html {
    font-size: 16px;
    --sp-cointainer-padding: 10vw;
}
@media only screen and (max-width: 1900px) {
    html {
        font-size: 15px;
        --sp-cointainer-padding: 2.5vw;
    }
}

@media only screen and (max-width: 1400px) {
    html {
        font-size: 14px;
        --sp-cointainer-padding: 2.5vw;
    }
}
body {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
:root {
  --container-max-width: 1359px;
  --container-padding: clamp(16px, 3vw, 32px);
}
header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    left: 0px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    padding-bottom: 1rem;
}
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
}
.sp-text-main {
    color: #4D3743;
}
.sp-text-orange {
    color: #FE844E;
}
.sp-h1{
    font: normal normal 700 2.5rem "Poppins", sans-serif;
    color: #4D3743;
}
.sp-p{
    font: normal normal 400 1.25rem/1.875rem Poppins;
}
.sp-p-b{
    font: normal normal 500 1.25rem/1.875rem Poppins;

}
.top-header {
    padding-top: 1.8125rem;
}
@media (max-width: 576px) {

}
.mobile-header {
    display: none !important;
}
@media (max-width: 576px) {
    .logo-container {
        display: none;
    }
    .mobile-header {
        display: flex !important;
        justify-content: space-between !important;
    }

    .top-header {
        justify-content: center !important;
        align-items: center;    
    }
    .top-header .nav {
        width: 100%;
        
    }
    .logo {
        width: 80%;
    }
}
.nav-link {
    font: normal normal 500 1rem "Poppins", sans-serif;
    color: #4D3743;
}
.nav-link.dropdown {
  position: relative;
  padding-right: 1.25rem;
}



/* dropdown on hover with smooth transition */
.dropdown-toggle::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: .4em;
  background: url("../img/dropdown-arrow.svg") no-repeat center;
  background-size: contain;
  border: none;
  vertical-align: unset;
  transition: transform 0.3s ease;
}
.dropdown-toggle::after:hover {
  transform: rotate(180deg);
}
.dropdown-toggle:hover .dropdown-toggle::after:hover {
  transform: rotate(180deg);
}
.dropdown .dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    pointer-events: none;
    will-change: opacity, transform;
}


.dropdown:hover > .dropdown-menu,
.dropdown.show > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}
/* active / focus styles for nav links */
:root {
    --nav-link-active-color: #FE844E;
}

.nav-link:active,
.nav-link:hover,
.nav-link:focus,
.nav-link:focus-visible,
.nav-link.active {
    color: #FE844E;
    transition: color .15s ease;
    outline: none;
}
.dropdown-item:active,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:focus-visible,
.dropdown-item.active {
    color: #FE844E;
    transition: color .15s ease;
    outline: none;
}

/* Main Menu*/


#main-menu-section {
    margin-top: 1rem;
}
.navbar-nav{
   width: 100%;
}
.dropdown-item{
    font: normal normal 500 1rem "Poppins", sans-serif !important;
    color: #4D3743 !important;
}
@media (max-width: 576px) {
    #main-menu-section{
        margin-top: unset;
        margin-bottom: unset;
        padding-bottom: 1.5rem;
    }
    
    .dropdown-menu.show {
        display: block !important;
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
    .offcanvas-header {
        margin-top: 3.2rem;
        margin-right: 1.7rem;
    }
    .nav-item {
        border-bottom: 1px solid #D7D7D7;
        padding-bottom: .6rem;
        padding-top: .6rem;
    }
    .dropdown-menu{
        border: none;
        display: block;
        visibility: visible !important; 
        opacity: 1 !important; 
        margin-top: -1rem;      
    }
    #main-menu .dropdown-menu li::before {
        content: "-";
        position: absolute;
        left: 0;
        font-size: 1.8em;
        line-height: 1;
        color: inherit;
    }
    #top-menu .nav-item{
        border: none;
    }
    #top-menu .dropdown-menu   {
    display: unset !important;
    visibility: hidden !important;
    opacity: 0 !important;
    }
    #top-menu .dropdown:hover > .dropdown-menu,
#top-menu .dropdown.show > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}
}


/*** Main Menu ends ***/


/*** Banner Carousel***/
 #bannerCarousel 
 .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    opacity: .4;
    border-radius: 50%;
}

#bannerCarousel .carousel-indicators .active {
    opacity: 1;
}
/*** Banner Carousel ends***/


