:root{
    --bs-body-font-family : 'inter';
}

*{
    --bs-body-font-family : 'inter';
}
font-face{
    font-family: 'inter';
    src: url(assets/css/Inter-VariableFont_opsz,wght.ttf);
}
/*body,h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .btn,p{
    font-family: "DM Sans", serif;
}*/
body{
    background-color: #f7f7f7;
} 

.bg{
    background-color: #d5d8dc;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.more-p-2{

}
.card-head{
    border-left: .5rem solid #1cb9bd;
    padding-left: .5rem;
}
.bg-primary {
    background-color: #20a2a9 !important;
}
.btn-primary {
  background-color: #20a2a9;
  border-color: #20a2a9;
  color: #fff;
}
.text-primary {
    color: #32726f !important;
}
.btn-success{
    background-color: #1CB9BD !important;
}
.carousel-indicators [data-bs-target]{
    width: 8px ; 
    height: 8px;
    border-radius: 50%;
    background-color: transparent; /* Transparent background */
    border: 2px solid white; /* White ring */
    opacity: 1; /* Make sure they are fully visible */
    transition: all 0.3s ease-in-out;
}
/* Change color when active */
.carousel-indicators .active {
    background-color: #20a2a9; /* Fill center when active */
}
.h1{
    font-size: 47.78px;
    line-height: 58px;
    font-weight: 700;
}
.h2{
    font-size: 39.81px;
    line-height: 49px;
    font-weight: 700;
}
.h3{
    font-size: 33.18px;
    line-height: 40px;
    font-weight: 700;
}
.h4{
    font-size: 27.65px;
    line-height:34px;
    font-weight: 700;
}
.h5{
    font-size: 23.04px;
    line-height: 28px;
}
.h5-w-0{
    font-weight: 0;
}
.h6{
    font-size: 19.2px;
    line-height: 28px;
}

.h6-w-700{
    font-weight: 700;
}

.card-p-0{
    padding-left: 0px;
}

p{
    font-size: 16px;
    line-height: 20px;
}
small{
    font-size: 13.33px;
    line-height: 16px;
}

.extra-small{
    font-size: 11.11px;
    line-height: 14px;
}

/* .carousel-caption{
    text-align: left;
    top:25%;
} */


.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    background: #000;
}

.marquee-content {
    display: flex;
    width: 200%; /* Double the width to allow smooth scrolling */
    animation: marquee 10s linear infinite;
}

.marquee-content img {
    width: 200px; /* Adjust as needed */
    height: auto;
}
.nav-link:focus, .nav-link:hover {
    color: #20a2a9;
   

  }
.nav-link {
    /* color: #20a2a9; */
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {   
    background-color: #20a2a9 ;
  }

.lms-green {
    border: 2px solid #20a2a9;
    color: #20a2a9;
}
.lms-green:after {    
    background: #20a2a9;
}

.carousel-indicators {
    bottom: -40px;
    
  }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* Moves left by half */
}
.btn-middle-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(50%);
}
@media (max-width: 768px) {  /* Adjust breakpoint as needed */
    .btn-middle-right {
        position: static;
        transform: none;
        right: auto;
        top: auto;
    }
    .h1{
        font-size: 40px;
    }
    .h2{
        font-size: 34px;
    }
    .h3{
        font-size: 31px;
    }
    .h4{
        font-size: 27.65px;
    }
    .h5{
        font-size: 23.04px;
    }   
    .h6{
        font-size: 19.2px;        
    }
    .h-100{
        width: 100%;
    }
    .m-center{
        text-align: center;
    }
}

@media (min-width: 992px) {
  #mainNav {
    border-color: transparent !important;
    /* background-color: transparent !important; */
  }
}
#mainNav {
    border-bottom: 1px solid rgba(33,37,41,.1);
    border-bottom-color: rgba(33, 37, 41, 0.1);
    background-color: #fff;
    transition: all .2s;
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}


/* Apply only for mobile screens */
@media (max-width: 1024px) {
    .mobile-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .mobile-navbar .navbar-toggler {
        order: 1;
    }
    .navbar-brand  {
        order: 2;
        position: absolute;
        left: 50%;
        top:5px;
        transform: translateX(-50%);  
                      
    }
    [role="search"] {
        order: 3;               
    }
}

@media  (min-width: 767px) {
    .mobile-only {
        display:none !important;
    }
} 
@media (max-width: 768px) {
    .desktop-only {
        display:none !important;
    }
}