/* Zoom-in animation */
@keyframes zoomIn {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}


@font-face {
    font-family: JOST_VARIABLE;
    src: url(./fonts/Jost-VariableFont_wght.ttf);
}

* {
    font-family: JOST_VARIABLE;
}

nav.navbar {
    position: absolute;
    z-index: 9;
    width: 100%;
    background-color: rgba(255, 255, 255, 0) !important;
    color: #fff;
    box-shadow: none;
    /* No shadow by default */
    transition: all 0.9s ease;
    /* Smooth transitions */
}

.sphspl_logo {
    width: auto;
    height: 75px;
    border-radius: 50%;
}

nav.navbar h4,
nav.navbar small,
nav.navbar a {
    color: #fff;
}

nav.navbar a {
    font-size: 17px;
}

nav.navbar a.active,
nav.navbar a:hover,
nav.navbar a:focus,
nav.navbar a:active {
    color: #ccc !important;
    color: #fff !important;
}

nav.navbar small {
    font-size: 14px;
}

nav.navbar.ui_change_nav {
    position: fixed;
    background: #fff !important;
    height: 75px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Add shadow after scrolling */

}

nav.navbar.ui_change_nav .sphspl_logo {
    width: auto;
    height: 55px;
    border-radius: 50%;
}

nav.navbar.ui_change_nav h4,
nav.navbar.ui_change_nav small,
nav.navbar.ui_change_nav a {
    color: #000000;
}

nav.navbar.ui_change_nav a.active,
nav.navbar.ui_change_nav a:hover,
nav.navbar.ui_change_nav a:focus,
nav.navbar.ui_change_nav a:active {
    color: #666 !important;
}

nav.navbar.ui_change_nav h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}


nav.navbar.ui_change_nav small {
    font-size: 12px;
}




.carousel {
    position: relative;
}

.carousel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 2;
}

.carousel-inner {
    z-index: 3;
}

.carousel .carousel-caption {
    position: absolute;
    right: 0%;
    bottom: 30%;
    left: 0%;
    width: 50%;
    margin: auto;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}

.carousel-item img {
    width: 100%;
    height: 100vh;
    animation: zoomIn 3500ms ease-in-out;
    animation-delay: 1000ms;
    /* Delay of 1 second */
    transition: transform 3500ms ease-in-out;
    object-fit: cover;
}

.carousel-caption h1 {
    font-size: 4.5rem;
    font-weight: 400 !important;
    line-height: 1.25;
}

.carousel-caption h6 {
    font-size: 1.19rem;
    font-weight: 400;
    position: relative;
}

.carousel-caption h6::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    margin: auto;
    left: 0px;
    right: 0px;
    border-bottom: solid 1px #fff;
}

.carousel-item .image_by {
    position: absolute;
    bottom: 25px;
    right: 0;
    width: auto;
    margin: auto;
    padding: 0 15px;
    z-index: 9;
    background: rgba(255, 255, 255, 0.5);
    color: #888888;
    text-align: center;
    font-size: 12px;
    z-index: 999;
}

.carousel-item .image_by a {
    color: rgba(0, 0, 0, 0.35) !important
}

.carousel-item .image_by a:hover,
.carousel-item .image_by a:active,
.carousel-item .image_by a:focus {
    color: rgba(0, 0, 0, 0.55) !important
}

.btn-bd-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
    --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
    --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

.carousel-control-next,
.carousel-control-prev {
    z-index: 3;
}

.carousel-control-next,
.carousel-control-prev {
    height: 92%;
}

/* .carousel-control-next, .carousel-control-prev{
          position: absolute;
          top: unset;
          bottom: 8%;
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 15%;
          padding: 0;
          color: #fff;
          text-align: center;
          background: 0 0;
          border: 0;
          opacity: .5;
          transition: opacity .15s ease;
      }
      .carousel-control-prev {
          left: unset;
          right: 50px;
      } */


/*  Start CSS For ABOUT */
.section_bg_color_grey {
    background: #f7f7f7;
}

.page_heading_color {
    /* color: #95ab63 !important; */
    color: #ac2d43 !important;
}

.page_big_heading_color {
    color: #232323;

}

.page_desc_color {
    color: #828282;
    text-align: justify;
}

.about_icon_col {
    width: 55px;
    height: 55px;
    border: solid 1px;
    border-radius: 50%;
}

.about_icon_col i {
    font-size: 25px;
}

#icon_community {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


.card {
    border-radius: 50px;
}
.card .card-img-wrapper{
    border-radius: inherit;
}


/* Maintain fixed aspect ratio and responsive design */
.fixed-image {
    height: 300px;
    /* Fixed height for uniform image size */
    width: 100%;
    /* Full width of the card */
    object-fit: cover;
    /* Ensure image covers the area without distortion */
    border-top-left-radius: inherit;
    /* Match card border radius */
    border-top-right-radius: inherit;
    /* Match card border radius */
}


/* Card elevation on hover */
.hover-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}


.hover-card:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    /* Elevate card */
    transform: translateY(-5px);
    /* Lift card slightly */
    background-color: #708541;
    border-radius: 50px;
}

.hover-card:hover .card-body {
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    box-shadow: 1px 1px 3px #fff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.hover-card:hover h5,
.hover-card:hover small,
.hover-card:hover p {
    color: #fff !important;
}


.hover-card:hover small {
    color: #c9c9c9;
}

/* Service */
.service_container {}

.service_container .text-sliding-line {

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

    display: inline-block;
    position: relative;
    padding: 0;
    z-index: 1;
    background-image: linear-gradient(135deg, transparent 45%, #fff 45%, #fff 55%, transparent 0);
    background-size: 4px 4px;
    background-clip: text;


    line-height: 6.25rem;
    font-size: 8.125rem;

}

.service_container .bg-extra-medium-gray {
    background-color: #e4e4e4;
}

.service_container h3 {
    letter-spacing: 2px !important;
    line-height: 2.813rem;
    font-size: 2.813rem;
    font-weight: 600;
}

.service_container .service_icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* box-shadow: 0 10px 20px rgba(0,0,0,.08); */
    /* box-shadow: 0px 2px 10px rgba(0, 0, 0, .08); */
    text-align: center;
    border:dotted 1px #e9e9e9;
}

.service_container .service_icon i {
    font-size: 25px;
}

.service_container .service_icon img {
    width: auto;
    height: 35px;
}

.service_container h4 {
    font-size: 1.25rem;
    font-weight: 400;
    position: relative;

}
.service_container h4::after{
    content:'';
    border-top:dotted 1px #ccc;
    position: absolute;
    bottom: -25px;
    right: 0px;
    width: 100%;
}

.service_container hr{
    /* opacity: 0.1; */
    border-color: #cccccc;
}


/* Contact us */
.contact_us_container,.contact_bg_img{
    background-image: url("./../images/simon-berger-unsplash.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
    position: relative;
}
.contact_us_container::before,
.contact_bg_img::before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color:rgb(255 255 255 / 88%)
}


.contact_bg_img::before{
    background-color:rgb(255 255 255 / 45%)
}
.contact_us_container .contact_img{
    height: 75px;
}

.contact_us_container form .form-control{
    height: 45px;
}
.contact_us_container form textarea.form-control{
    height: 150px;
}


.contact_us_container hr{
    /* opacity: 0.1; */
    border-color: #999999;
}