/* CSS Declaration */
:root{
    --color-medium-blue:#386893;
    --color-light-blue:#D3E3E5;
    --color-yellow-green:#F9F3DD;
    --color-light-grayish-blue:#A2ABAE;

    --font-arial:"Arial";
    --font-montserrat-bold:"Montserrat-Bold";
    --font-montserrat-medium:"Montserrat-Medium";
    --font-montserrat-semi-bold:"Montserrat-SemiBold";
    --font-montserrat-semi-bold-italic:"Montserrat-SemiBoldItalic";
    --font-myriad-pro-regular:"MyriadPro-Regular";
    --font-begum-medium:"Begum-Medium";
    --font-size-default:15px;
}

.background-medium-blue{
    background-color:var(--color-medium-blue) !important;
}
.background-light-blue{
    background-color:var(--color-light-blue) !important;
}
.background-yellow-green{
    background-color:var(--color-yellow-green) !important;
}
.background-light-grayish-blue{
    background-color:var(--color-light-grayish-blue) !important;
}

.color-medium-blue{
    color:var(--color-medium-blue) !important;
}
.color-light-blue{
    color:var(--color-light-blue) !important;
}
.color-yellow-green{
    color:var(--color-yellow-green) !important;
}
.color-light-grayish-blue{
    color:var(--color-light-grayish-blue) !important;
}

.background-image-cover-no-repeat-center{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

.btn-bg-medium-blue{
    color:#fff;
    background-color:var(--color-medium-blue) !important;
}

.btn-medium-blue-color-white{
    font-family: var(--font-montserrat-semi-bold);
    background-color:var(--color-medium-blue) !important;
    color:#fff;
    opacity: 1;
}
.btn-medium-blue-color-white[href]:not([href="javascript:void(0)"]):not([href=""]):hover {
    color:#fff;
    opacity: 0.8;
}

.btn-transparent-color-medium-blue{
    background-color: transparent;
    font-family: var(--font-montserrat-semi-bold);
    color: var(--color-medium-blue) !important;
    border: 1px solid var(--color-medium-blue);
}
.btn-transparent-color-medium-blue[href]:not([href="javascript:void(0)"]):not([href=""]):hover {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Light hover effect */
}

a[href="javascript:void(0)"]{
    cursor:unset;
}
a.link-underline:not([href="javascript:void(0)"]):hover{
    text-decoration:underline;
}

/* Fonts Download (Custom) */
@font-face {
    font-family: "Arial";
    src: url("/../assets/fonts/Arial.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat-Bold";
    src: url("../../assets/fonts/Montserrat-Bold.eot") format("embedded-opentype"),
         url("../../assets/fonts/Montserrat-Bold.ttf") format("truetype"),
         url("../../assets/fonts/Montserrat-Bold.otf") format("opentype"),
         url("../../assets/fonts/Montserrat-Bold.woff2") format("woff2"),
         url("../../assets/fonts/Montserrat-Bold.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat-Medium";
    src: url("../../assets/fonts/Montserrat-Medium.eot") format("embedded-opentype"),
         url("../../assets/fonts/Montserrat-Medium.woff2") format("woff2"),
         url("../../assets/fonts/Montserrat-Medium.woff") format("woff"),
         url("../../assets/fonts/Montserrat-Medium.ttf") format("truetype"),
         url("../../assets/fonts/Montserrat-Medium.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat-SemiBold";
    src: url("../../assets/fonts/Montserrat-SemiBold.eot") format("embedded-opentype"),
         url("../../assets/fonts/Montserrat-SemiBold.woff2") format("woff2"),
         url("../../assets/fonts/Montserrat-SemiBold.woff") format("woff"),
         url("../../assets/fonts/Montserrat-SemiBold.ttf") format("truetype"),
         url("../../assets/fonts/Montserrat-SemiBold.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat-SemiBoldItalic";
    src: url("../../assets/fonts/Montserrat-SemiBoldItalic.eot") format("embedded-opentype"),
         url("../../assets/fonts/Montserrat-SemiBoldItalic.woff2") format("woff2"),
         url("../../assets/fonts/Montserrat-SemiBoldItalic.woff") format("woff"),
         url("../../assets/fonts/Montserrat-SemiBoldItalic.ttf") format("truetype"),
         url("../../assets/fonts/Montserrat-SemiBoldItalic.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "MyriadPro-Regular";
    src: url("../../assets/fonts/MyriadPro-Regular.eot") format("embedded-opentype"),
         url("../../assets/fonts/MyriadPro-Regular.woff2") format("woff2"),
         url("../../assets/fonts/MyriadPro-Regular.woff") format("woff"),
         url("../../assets/fonts/MyriadPro-Regular.ttf") format("truetype"),
         url("../../assets/fonts/MyriadPro-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

.font-arial{
    font-family: var(--font-arial) !important;
}
.font-montserrat-bold{
    font-family: var(--font-montserrat-bold) !important;
}
.font-montserrat-medium{
    font-family: var(--font-montserrat-medium) !important;
}
.font-montserrat-semi-bold{
    font-family: var(--font-montserrat-semi-bold) !important;
}
.font-montserrat-semi-bold-italic{
    font-family: var(--font-montserrat-semi-bold-italic) !important;
}
.font-myriad-pro-regular{
    font-family: var(--font-myriad-pro-regular) !important;
}

.font-begum-medium{
    font-family: var(--font-begum-medium) !important;
}

*,html{
    font-family: var(--font-myriad-pro-regular);
    font-size: var(--font-size-default);
    /* font-style:italic; */
}
html, body {
    overflow: auto;
    font-family: var(--font-myriad-pro-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header */
.header-wrap{
    max-height: 100% !important;
    height: auto !important;
}

/* Notification Marquee */
.notification-top-bar p#notification-top-bar{
    font-family: var(--font-montserrat-bold);
}
.notification-top-bar .x-icon-box{
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}
.notification-top-bar .x-icon-box .x-icon{
    color:var(--color-light-grayish-blue);
    cursor:pointer;
}

/* Header Navbar (Customize) */
.logo-box #logo_link:hover{
    background-color:transparent !important;
}

.navigation-inner .navbar{
    flex: 1;
}
.navigation-inner .navbar .navbar-list{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.navbar{
    align-items: stretch !important;
}

.navbar .navbar-links{ 
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    flex:1;
}
.navbar .navbar-links li{
    /* font-size:18px; */
    width:25%;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

.navbar .navbar-links li a{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:var(--font-montserrat-semi-bold);
    text-align:center;
}

.navbar .navbar-links li:hover{
    background-color:transparent !important;
    border-bottom:3px solid var(--color-medium-blue);
}

.navbar .navbar-links a:hover{
    background-color:transparent;
}

.navbar .navbar-links li.active,
.nav-item:has(.show){
    border-bottom:3px solid var(--color-medium-blue);
}

.navbar .navbar-links li a{
    color:#000;
}

.navbar .nav-item{
    margin:unset;
}

.navbar-links .dropdown{
    overflow:unset;
}

.nav-item .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    border: none; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    backdrop-filter: blur(5px); 
    margin-top: 10px; 
    padding: 10px; 
    border-radius: unset;
    width: 100%; /* Match parent width */
    left: 0; /* Align to parent */
    right: 0; /* Align to parent */
}

/* Navbar Dropdown Item */
.dropdown-item {
    white-space: normal; /* Allow text to wrap to the next line */
    word-wrap: break-word; /* Break long words if necessary */
    word-break: break-word; /* For extra compatibility with long words */
    padding: 8px 15px; /* Adjust padding for consistent spacing */
}
.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Light hover effect */
    color: #000; /* Darker text on hover */
    border-radius: unset;
}

@media only screen and (width < 1280px), screen and (max-device-width: 1279px){
    .navbar .logo-box{
        display:flex;
        justify-content: center;
    }

    .navbar .navbar-links{
        display:none;
    }

    .header-column-right{
        padding:0 !important;
        align-items:center;
        margin: inherit;
    }
}

/* Sidebar Menu */
.sidebar-menu-wrap .sidebar-menu-header .sidebar-menu-close > i{
    color:#000;
}
.sidebar-menu-wrap .sidebar-menu-header{
    background-color: var(--color-yellow-green) !important;
}
.sidebar-menu-wrap .sidebar-menu-tab.nav-tabs .nav-item{
   margin: unset;
}
.sidebar-menu-wrap .sidebar-menu-tab.nav-tabs .nav-link{
    background-color: var(--color-yellow-green);
    font-family: var(--font-montserrat-semi-bold);
    color: #000 !important;
    border-bottom: 3px solid var(--color-yellow-green);
}
.sidebar-menu-wrap .sidebar-menu-tab.nav-tabs .nav-link.active{
    background-color: var(--color-yellow-green);
    border-bottom: 3px solid var(--color-medium-blue);
}
.sidebar-menu-wrap > .tab-content{
    background-color: var(--color-yellow-green);
    height: 100%;
    position: unset;
}
.sidebar-menu-wrap .sidebar-menu li a p{
    font-family: var(--font-montserrat-semi-bold);
    color: #000 !important;
    display: inline;
}
.tabs:not(.featured-categories-tabs) .tab-item:hover:before, .nav-tabs .nav-link:hover:before{
    width: unset;
}
.sidebar-menu li:hover{
    background-color: rgba(0, 0, 0, 0.1) !important; /* Light hover effect */
}
.list-inline.sidebar-menu{
    /* margin-top:0; */
}

/* Carousel Button */
.carousel-btn{
    background-color: transparent;
    position: absolute;
    bottom: 70px;
    transform: translateX(-50%);
    font-family: var(--font-montserrat-bold);
    color: var(--color-medium-blue) !important;
    border: 1px solid var(--color-medium-blue);
}
.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Light hover effect */
}

/* Carousel Dots */
.flickity-page-dots .dot.is-selected{
    background-color:#fff !important;
}


/* Home Therapeutic Section */
#home-therapeutic-section h1,
#home-therapeutic-section h2,
#home-therapeutic-section p{
    color:var(--color-medium-blue);
}

/* Home Products Section */
#home-products-section h1,
#home-products-section h2{
    color:var(--color-medium-blue);
}

#home-products-section .bg-img{
    position:relative;

    height: 680px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#home-products-section .bg-img .btn{
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

/* Home Benefits Section */
#home-benefit-section h1,
#home-benefit-section h4,
#home-benefit-section p,
#home-benefit-section button{
    color: var(--color-medium-blue);
}

#home-benefit-section .card{
    background: transparent;
    border: none;
    outline: none;

    border-bottom:1px solid var(--color-medium-blue);
}
#home-benefit-section .card .card-header{
    background: transparent;
    border: none;
    outline: none;

    padding-right: 0;
}
#home-benefit-section .card:nth-child(1){
    border-top:1px solid var(--color-medium-blue);
}
#home-benefit-section .card:not(:nth-child(1)) .card-header{
    padding-top:0;
}
#home-benefit-section .card .card-header button{
    padding-left: 0;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}
#home-benefit-section .card .card-body{
    text-align:left;
    padding-right:0;
    padding-top:0;
}
#home-benefit-section .benefit-img{
    /* width: 450px;
    height: 100% */
    width: 350px;
    height: 100%;
    background-position: center;
    background-size: cover;
    /* background-position: center 30%;
    background-size: 150%; */

    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#home-benefit-section .benefit-img.active{
    opacity: 1;
}

#home-benefit-section .card .card-header,
#home-benefit-section .card .card-body{
    padding-left:3px;
}

@media only screen and (width < 768px), screen and (max-device-width: 767px){
    #home-benefit-section .benefit-img {
        height: 400px;
    }
}

/* Home Ingredients Section */
#home-ingredients-section h1,
#home-ingredients-section .card-title,
#home-ingredients-section .card-body{
    color:var(--color-medium-blue);
}
#home-ingredients-section .card{
    display:flex;
    align-items:center;
    justify-content:center;

    border: none;
}
#home-ingredients-section .card img{
    width:150px;
    height: 150px;
    object-fit: contain;
    object-position: center;
}

/* Home Review Section */
#home-review-section blockquote{
    display:flex;
    align-items:center;
    justify-content:center;
}
#home-review-section blockquote img{
    width:60px;
}
#home-review-section .content-box{
    width:75%;
    text-align:center;
    color:var(--color-medium-blue);
}
#home-review-section .content-box h5{
    color:var(--color-medium-blue);
}

#home-review-section .content-box svg .arrow{
    fill: #DBE5E6;
}
#home-review-section .content-box .flickity-slider{
    display: grid;
    place-items: center;
}
#home-review-section .content-box .flickity-button{
    background-color:transparent;
}
#home-review-section .review-slider .carousel-cell{
    opacity:0;
}
#home-review-section .review-slider .carousel-cell.is-selected{
    opacity:1;
}

/* One Background Banner */
.one-background-banner{
    background-size:cover; 
    background-position:center; 
    background-repeat:no-repeat;
    height:100vh;
}

@media only screen and (width < 992px), screen and (max-device-width: 991px){
    .one-background-banner{
        height:80vh;
    }
}
@media only screen and (width < 768px), screen and (max-device-width: 767px){
    .one-background-banner{
        height:60vh;
    }
}

/* About Us Water Purificaation Container */
#about-us-water-purification-container .img-box{
    display: flex;
    align-items: center;
    justify-content: center;

    column-gap: 15px;
}
#about-us-water-purification-container .img-box img{
    width:80px;
}
#about-us-water-purification-container h1,
#about-us-water-purification-container p{
    color:var(--color-medium-blue);
}

/* About Us 3 in 1 Vitamin Container */
#about-us-three-in-one-vitamin-container h1{
    color: var(--color-medium-blue);
}

/* About US High Density Filter */
#about-us-high-density-filter-container h1,
#about-us-high-density-filter-container p{
    color: var(--color-medium-blue);
}
#about-us-high-density-filter-container .img-content-box img{
    height: 250px;
    width: 250px;
}
#about-us-high-density-filter-container .img-content-box a {
    border-radius: 10px;
}

/* About US Suitable Skin */
#about-us-suitable-skin-container h1, 
#about-us-suitable-skin-container p{
    color: var(--color-medium-blue);
}


#about-us-suitable-skin-container .bg-img{
    width:100%;
    height:500px;
    flex: 25%;
}
#about-us-suitable-skin-container .bg-img:nth-child(1){
    background-position: 28% center;
}
#about-us-suitable-skin-container .bg-img:nth-child(2){
    background-position: 32% center;
}
#about-us-suitable-skin-container .bg-img:nth-child(3){
    background-position: 65% center;
}
#about-us-suitable-skin-container .bg-img:nth-child(4){
    background-size: 350%;
    background-position: 37% center;
}
#about-us-suitable-skin-container .img-row{
    flex-wrap:wrap;
}

@media only screen and (width < 768px), screen and (max-device-width: 767px){
    #about-us-suitable-skin-container .bg-img{
        flex:50%;
    }
}
/* @media only screen and (width < 576px), screen and (max-device-width: 575px){
    #about-us-suitable-skin-container .bg-img{
        flex:100%;
    }
} */

/* About Us How Top Water Harm */
#how-tap-water-harm-container h1, 
#how-tap-water-harm-container p{
    color: var(--color-medium-blue);
}
#how-tap-water-harm-container .card img{
    width:100px;
    height:100px;
    object-fit: contain;
    object-position: center;
}
#how-tap-water-harm-container .card{
    display:grid;
    place-items:center;
    border:none;
}

/* About Us Multiple Installation Options */
#about-us-multiple-installation-container h1{
    color: var(--color-medium-blue);
}
#about-us-multiple-installation-container .bg-img{
    width:100%;
    height:500px;
    flex: 25%;
}
#about-us-multiple-installation-container .img-row{
    flex-wrap:wrap;
}
@media only screen and (width < 768px), screen and (max-device-width: 767px){
    #about-us-multiple-installation-container .bg-img{
        flex:50%;
    }
}
/* @media only screen and (width < 576px), screen and (max-device-width: 575px){
    #about-us-multiple-installation-container .bg-img{
        flex:100%;
    }
} */


/* Footer */
.footer-wrap{
    background-color:var(--color-yellow-green);
}
.footer-wrap ul{
    list-style-type: none;
}
.footer-wrap ul li{
    text-align:left;
}
.footer-wrap ul li .nav-link{
    color:#000 !important;
}
.footer-wrap ul li .nav-link:hover{
    text-decoration:underline;
}

.footer-wrap .social-media-icons svg.icon{
    width:25px !important;
}
.footer-wrap .social-media-icons a{
    /* background-color: var(--color-medium-blue); */
    /* padding: 5px;
    border-radius: 8px; */
}

/* Marquee Container */
.marquee-container {
    width: 100%;
    overflow: hidden;
    padding: 10px;
    border-radius: 10px;
    position: relative; 
}
.marquee-container svg{
    height: 300px;
}
.marquee-container textPath a {
    font-size: 22px; 
}
.uppercase-text {
    /* text-transform: uppercase; */
}

@media only screen and (width < 992px), screen and (max-device-width: 991px){
    .marquee-container svg{
        height:200px;
    }

    .marquee-container textPath a {
        font-size: 28px;
    }
}

@media only screen and (width < 768px), screen and (max-device-width: 767px){
    .marquee-container svg{
        height:200px;
    }
    .marquee-container textPath a {
        font-size: 32px;
    }
}

@media only screen and (width < 576px), screen and (max-device-width: 575px){
    .marquee-container svg{
        height:150px;
    }
    .marquee-container textPath a {
        font-size: 3.5rem; 
    }
}

/* Background size */
path {
    stroke-width: 2rem;
}

@media (max-width: 768px) {
    path {
        stroke-width: 6rem; 
    }
}

@media (max-width: 480px) {
    path {
        stroke-width: 8rem;
    }
}


@media only screen and (width < 768px), screen and (max-device-width: 767px){
    .footer-wrap .logo-box{
        text-align:center;
    }
    .footer-wrap ul li{
        text-align:center;
    }
    .footer-wrap .social-media-icons{
        text-align:center;
    }
}

.flickity-button:focus{
    box-shadow: unset !important;
}