/*==================================================
    MOMAI SALT
    STYLE.CSS
==================================================*/

/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Jost:wght@300;400;500;600;700&display=swap');

/*====================================
    RESET
====================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Jost',sans-serif;
    font-size:16px;
    line-height:1.7;
    color:#1c3348;
    background:#ffffff;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:.4s;

}

ul{

    list-style:none;

}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

.section-padding{

    padding:100px 0;

}


/*====================================
        COLORS
====================================*/

:root{

    --primary:#2E86C7;
    --secondary:#123A5C;
    --light:#F5FAFD;
    --white:#ffffff;
    --text:#5c7186;
    --border:#dbe9f3;

}


/*====================================
        BUTTON
====================================*/

.btn{

    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:15px 35px;
    border-radius:5px;
    font-size:15px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;

}

.btn:hover{

    background:var(--secondary);
    color:#fff;
}

.btn-outline{

    background:transparent;
    border:2px solid var(--primary);
    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);
    color:#fff;

}


/*====================================
        TOP BAR
====================================*/

.topbar{

    background:#123A5C;
    color:#fff;
    font-size:14px;
    padding:10px 0;

}

.topbar .container{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.top-right{

    display:flex;
    gap:25px;

}

.top-right a{

    color:#fff;

}

.top-right a:hover{

    color:#7FC1EA;

}


/*====================================
        HEADER
====================================*/

.header{

    position:sticky;
    top:0;
    background:#fff;
    z-index:999;
    box-shadow:0 0 25px rgba(0,0,0,.05);

}

.header .container{

    display:flex;
    align-items:center;
    justify-content:space-between;
    height:90px;

}

.logo img{

    height:60px;

}


/*========================
    PREMIUM PRELOADER
=========================*/

#preloader {

    position: fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;

    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;


    background:

    radial-gradient(
        circle at center,
        #ffffff 0%,
        #f7fbff 45%,
        #eef7ff 100%
    );

}



.loader-content {

    text-align:center;

}
.logo-box {

    display:flex;
    justify-content:center;
    align-items:center;

}

.logo-box img {

    width:180px;
    height:auto;

    display:block;


}



.loader-content h5 {

    margin-top:35px;

    font-size:12px;

    letter-spacing:5px;

    font-weight:600;

    color:#4da3df;

}



.loader-line {

    width:130px;

    height:2px;

    background:#dcecf7;

    margin:22px auto;

    overflow:hidden;

    position:relative;

}



.loader-line span {


    position:absolute;

    height:100%;

    width:40%;

    background:#4da3df;

    left:-40%;

    animation:loadingMove 1.5s infinite;


}



@keyframes loadingMove {


    0%{

        left:-40%;

    }


    100%{

        left:100%;

    }

}



@keyframes logoPulse {


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.05);

    }


    100%{

        transform:scale(1);

    }

}



#preloader.hide {

    opacity:0;

    visibility:hidden;

    transition:0.6s ease;

}

/*====================================
        NAVBAR
====================================*/

.navbar ul{

    display:flex;
    gap:35px;

}

.navbar ul li a{

    color:#16324A;
    font-weight:600;
    font-size:15px;
    position:relative;

}

.navbar ul li a:hover{

    color:var(--primary);

}

.navbar ul li a.active{

    color:var(--primary);

}

.navbar ul li a::after{

    content:'';
    position:absolute;
    width:0%;
    height:2px;
    left:0;
    bottom:-8px;
    background:var(--primary);
    transition:.4s;

}

.navbar ul li a:hover::after{

    width:100%;

}

.mobile-menu{

    display:none;
    font-size:28px;
    cursor:pointer;

}
/*==============================
 PRODUCT DROPDOWN FIX
==============================*/

.navbar ul li.dropdown{
    position:relative;
}


.navbar ul li.dropdown .dropdown-menu{

    position:absolute;

    top:35px;
    left:0;

    width:230px;

    display:block;

    background:#fff;

    padding:10px 0;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

    z-index:99999;

}


/* Remove Parent Flex */

.navbar ul li.dropdown .dropdown-menu li{

    display:block;

    width:100%;

}


/* Dropdown Link */

.navbar ul li.dropdown .dropdown-menu li a{

    display:block;

    padding:12px 20px;

    color:#16324A !important;

    font-size:15px;

    white-space:nowrap;

}


/* Hover */

.navbar ul li.dropdown .dropdown-menu li a:hover{

    background:#2E86C7;

    color:#fff !important;

}


/* Show */

.navbar ul li.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* Remove underline effect */

.navbar ul li.dropdown .dropdown-menu li a::after{

    display:none;

}

/*====================================
        HERO
====================================*/

.hero {
    padding: 100px 0;
    background: linear-gradient(180deg, #F5FAFD, #ffffff);
}

.hero .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px !important;
}

/*====================================
        LEFT CONTENT
====================================*/

.hero-content {
    flex: 0 0 55% !important;
    max-width: 620px !important;
}

.subtitle {
    display: inline-block;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-size: 58px;
    line-height: 1.15;
    font-family: 'Fraunces', serif;
    color: #16324A;
    margin-bottom: 25px;
}

.hero-content h1 span {
    color: var(--primary);
}

.hero-content p {
    color: #60788d;
    max-width: 560px;
    margin-bottom: 35px;
}


/*====================================
        BUTTONS
====================================*/

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 45px;
}



/*====================================
        COUNTER
====================================*/

.hero-counter {
    display: flex;
    gap: 60px;
    border-top: 1px solid #dbe9f3;
    padding-top: 35px;
}

.hero-counter h2 {
    font-size: 40px;
    color: var(--primary);
    font-family: 'Fraunces', serif;
}

.hero-counter span {
    color: #60788d;
    font-size: 15px;
}


/*====================================*
*MOMAI LOGO - RIGHT SIDE*
*====================================*/

.hero-image {
    flex: 0 0 40% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-120px) !important;
}

.hero-image .hero-logo {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;

    display: block !important;
    object-fit: contain !important;

    animation: float 4s ease-in-out infinite;
}


/*====================================*
*LOGO FLOAT*
*====================================*/

@keyframes float {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }

}


/*====================================*
*TABLET*
*====================================*/

@media (max-width: 991px) {

    .hero {
        padding: 80px 0;
    }

    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-counter {
        justify-content: center;
    }

    .hero-image {
        width: 100%;
        min-height: auto;

        /* IMPORTANT */
        transform: none !important;
    }

    .hero-logo {
        max-width: 380px !important;
        /* MOBILE FLOAT ANIMATION */
    animation: float 4s ease-in-out infinite !important;
    }

}


/*====================================*
*MOBILE*
*====================================*/

@media (max-width: 767px) {

    /* HERO */
    .hero {
        padding: 20px 0 50px !important;
        overflow: hidden !important;
    }

    /* HERO CONTAINER */
    .hero .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* LOGO */
    .hero-image {
        order: -1 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 0 25px 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    /* LOGO IMAGE */
    .hero-image .hero-logo {
        display: block !important;

        width: 75% !important;
        max-width: 280px !important;
        height: auto !important;

        margin: 0 auto !important;

        object-fit: contain !important;

        /* Float animation ko bhi reset */
       /* MOBILE FLOAT ANIMATION */
        animation: float 4s ease-in-out infinite !important;
        transform: none !important;

    }

    /* CONTENT */
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 20px !important;

        text-align: center !important;
    }

    /* SUBTITLE */
    .hero-content .subtitle {
        display: block !important;

        font-size: 14px !important;
        line-height: 1.5 !important;

        letter-spacing: 3px !important;

        margin-bottom: 18px !important;
    }

    /* HEADING */
    .hero-content h1 {
        font-size: 36px !important;
        line-height: 1.15 !important;

        margin: 0 0 20px !important;
    }

    /* DESCRIPTION */
    .hero-content p {
        font-size: 16px !important;
        line-height: 1.7 !important;

        margin: 0 auto 25px !important;
    }

}


/*====================================*
*SMALL MOBILE*
*====================================*/

@media (max-width: 480px) {

    .hero {
        padding: 25px 0 50px;
    }

    .hero .container {
        gap: 20px;
    }

    .hero-image {
        margin-bottom: 5px !important;
    }

    .hero-image .hero-logo {
        width: 82% !important;
        max-width: 290px !important;
        animation: float 4s ease-in-out infinite !important;

    }

    .hero-content h1 {
        font-size: 36px;
        line-height: 1.15;
    }

    .hero-content .subtitle {
        font-size: 15px;
        letter-spacing: 3px;
    }

}



/*====================================
        SECTION TITLE
====================================*/

.section-title{

    margin-bottom:60px;

}

.section-title span{

    color:var(--primary);
    font-size:14px;
    letter-spacing:3px;
    font-weight:700;
    text-transform:uppercase;

}

.section-title h2{

    font-size:42px;
    margin-top:15px;
    font-family:'Fraunces',serif;
    color:#16324A;

}

.section-title p{

    margin-top:20px;
    color:#60788d;

}

.text-center{

    text-align:center;

}



/*====================================
        ABOUT SECTION
====================================*/

.about{
    background:#fff;
}

.about .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.about .col-lg-6{
    flex:0 0 50%;
    max-width:50%;
}

.about-image{
    padding-right:40px;
}

.about-image img{
    width:100%;
    max-width:520px;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.about-content{
    padding-left:20px;
}

.about-content p{
    color:#60788d;
    margin-bottom:20px;
    line-height:1.8;
}

.about-feature{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:35px 0;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 20px;
    background:#f8fbfd;
    border-radius:10px;
    transition:.3s;
}

.feature-item i{
    color:#2E86C7;
    font-size:20px;
}

.feature-item:hover{
    background:#2E86C7;
    color:#fff;
}

.feature-item:hover i{
    color:#fff;
}

/* Mobile */

@media(max-width:991px){

.about .row{
    flex-direction:column;
}

.about .col-lg-6{
    flex:0 0 100%;
    max-width:100%;
}

.about-image{
    padding-right:0;
    margin-bottom:40px;
    text-align:center;
}

.about-content{
    padding-left:0;
}

.about-feature{
    grid-template-columns:1fr;
}

}

/*====================================
    VISION MISSION
====================================*/

.vision-mission{
    background:#F5FAFD;
}

.vm-card{
    background:#fff;
    padding:40px 30px;
    border-radius:15px;
    text-align:center;
    height:100%;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    border-top:4px solid #2E86C7;
}

.vm-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.vm-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    background:#2E86C7;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
}

.vm-card h3{
    margin-bottom:20px;
    font-size:28px;
    color:#123A5C;
    font-family:'Fraunces',serif;
}

.vm-card p{
    color:#60788d;
    line-height:1.8;
}

.value-list{
    list-style:none;
    padding:0;
    margin:0;
    text-align:left;
}

.value-list li{
    padding:12px 0;
    color:#60788d;
    border-bottom:1px solid #eef3f8;
}

.value-list li:last-child{
    border-bottom:none;
}

.value-list i{
    color:#2E86C7;
    margin-right:10px;
}

/*====================================
        PAGE BANNER
====================================*/

.page-banner{

    position:relative;

    background:url("../images/about/about-banner.jpg") center center/cover no-repeat;

    height:240px;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(18,58,92,.80),
        rgba(18,58,92,.75)
    );

}

.banner-content{

    position:relative;

    z-index:2;

    color:#fff;

}

.banner-content .subtitle{

    display:inline-block;

    color:#7FC1EA;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.banner-content h1{

    font-size:60px;

    font-family:'Fraunces',serif;

    margin-bottom:20px;

}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:16px;

}

.breadcrumb a{

    color:#7FC1EA;

    font-weight:600;

}

.breadcrumb a:hover{

    color:#ffffff;

}

.breadcrumb span{

    color:#ffffff;

}

@media(max-width:991px){

.page-banner{

height:300px;

}

.banner-content h1{

font-size:42px;

}

}

@media(max-width:767px){

.page-banner{

height:250px;

}

.banner-content h1{

font-size:34px;

}

.breadcrumb{

font-size:14px;

}

}

/*====================================
        WHY CHOOSE US
====================================*/

.why-choose{
    background:#F5FAFD;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.why-box{
    background:#fff;
    padding:40px 35px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
    transition:.4s;
    border-top:4px solid transparent;
}

.why-box:hover{
    transform:translateY(-10px);
    border-color:#2E86C7;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.why-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#2E86C7;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
}

.why-box h3{
    font-size:24px;
    color:#16324A;
    margin-bottom:18px;
    font-family:'Fraunces',serif;
}

.why-box p{
    color:#60788d;
    line-height:1.8;
}

@media(max-width:991px){

.why-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:767px){

.why-grid{
    grid-template-columns:1fr;
}

}

/*====================================
        SIMPLE CTA
====================================*/

.simple-cta{
    padding:60px 0;
}

.simple-cta-box{

    background:#123A5C;

    color:#fff;

    border-radius:15px;

    padding:45px 60px;

    text-align:center;

}

.simple-cta-box h2{

    font-size:38px;

    margin-bottom:15px;

    font-family:'Fraunces',serif;

}

.simple-cta-box p{

    color:#dce8f2;

    margin-bottom:25px;

    font-size:17px;

}

.simple-cta-box .btn{

    background:#2E86C7;

}

.simple-cta-box .btn:hover{

    background:#fff;

    color:#123A5C;

}

@media(max-width:767px){

.simple-cta-box{

padding:35px 25px;

}

.simple-cta-box h2{

font-size:28px;

}

}

/*====================================
        GOOGLE MAP
====================================*/

.map-section{
    background:#F5FAFD;
    padding:100px 0 0;
}

.map-wrapper{

    width:100%;
    height:500px;

    overflow:hidden;

    margin-top:50px;

}

.map-wrapper iframe{

    width:100%;
    height:100%;

    border:0;

    filter:grayscale(15%);

    transition:.4s;

}

.map-wrapper iframe:hover{

    filter:grayscale(0);

}

@media(max-width:767px){

.map-wrapper{

height:350px;

}

}

/*====================================
        FAQ
====================================*/

.faq{
    background:#fff;
}

.accordion-item{
    border:none;
    margin-bottom:20px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.accordion-button{
    padding:20px 25px;
    font-size:18px;
    font-weight:600;
    color:#123A5C;
}

.accordion-button:not(.collapsed){
    background:#2E86C7;
    color:#fff;
}

.accordion-body{
    padding:20px 25px;
    color:#60788d;
    line-height:1.8;
}


/*====================================
        PRODUCTS SECTION
====================================*/

.products{
    background:#F5FAFD;
}

.products .row{
    display:flex;
    flex-wrap:wrap;
    row-gap:30px;
}

.products .col-lg-3{
    padding:15px;
}



/*====================================
        PRODUCT CARD
====================================*/

.product-card{

    background:#fff;
    border-radius:15px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.product-card:hover{

    transform:translateY(-10px);
    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.product-image{

    height:260px;
    overflow:hidden;
    background:#fff;

}

.product-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-content{

    padding:25px;

}

.product-content h3{

    font-size:16px;
    margin-bottom:15px;
    color:#16324A;
    font-family:'Fraunces',serif;

}

.product-content p{

    color:#60788d;
    margin-bottom:25px;

}

.product-btn{

    display:inline-block;
    color:#2E86C7;
    font-weight:600;

}

.product-btn:hover{

    color:#123A5C;

}



/*====================================
        PRODUCT HOVER EFFECT
====================================*/

.product-card::before{

    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:#2E86C7;
    transform:scaleX(0);
    transition:.4s;

}

.product-card{

    position:relative;

}

.product-card:hover::before{

    transform:scaleX(1);

}



/*====================================
        PRODUCT ICON
====================================*/

.product-icon{

    width:70px;
    height:70px;
    background:#2E86C7;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:20px;

}



/*====================================
        PRODUCT BUTTON
====================================*/

.product-content .btn{

    margin-top:10px;

}



/*====================================
        PRODUCT BADGE
====================================*/

.product-badge{

    position:absolute;
    top:20px;
    right:20px;
    background:#123A5C;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;

}

/* PRODUCT DETAILS */

.product-detail-image img{

    width:100%;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.10);

}


.product-detail-content h2{

    font-size:45px;
    color:#16324A;
    font-family:'Fraunces',serif;
    margin:20px 0;

}


.product-detail-content p{

    color:#60788d;
    line-height:1.8;
    margin-bottom:20px;

}


.product-detail-content h3{

    color:#123A5C;
    margin:25px 0 15px;

}


.product-list{

    padding:0;
    margin-bottom:30px;

}


.product-list li{

    list-style:none;
    margin-bottom:12px;
    color:#60788d;

}


.product-list i{

    color:#2E86C7;
    margin-right:10px;

}

.navbar ul li a.active{
    color:#2E86C7;
}


.dropdown-menu a.active{
    background:#2E86C7;
    color:#fff !important;
}

/* PRODUCT SPECIFICATION */

.product-specification{
    margin:30px 0;
}


.product-specification h3{

    font-size:24px;
    color:#16324A;
    margin-bottom:20px;

}


.product-specification table{

    width:100%;
    border-collapse:collapse;
    background:#fff;

}


.product-specification table th,
.product-specification table td{

    border:1px solid #e2eaf0;
    padding:12px 15px;
    text-align:left;

}


.product-specification table th{

    width:40%;
    color:#123A5C;
    background:#F5FAFD;

}


.product-specification table td{

    color:#60788d;

}



/* Quantity */

.quantity-box{

    margin:25px 0;

}


.quantity-box label{

    display:block;
    font-weight:600;
    color:#123A5C;
    margin-bottom:10px;

}


.quantity-control{

    display:flex;
    align-items:center;
    width:150px;

}


.quantity-control button{

    width:40px;
    height:40px;
    border:none;
    background:#2E86C7;
    color:#fff;
    font-size:22px;
    cursor:pointer;

}


.quantity-control input{

    width:70px;
    height:40px;
    text-align:center;
    border:1px solid #ddd;
    font-weight:600;

}

/*====================================
        PRODUCT GRID RESPONSIVE BASE
====================================*/

@media(max-width:991px){

.products .row{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:767px){

.products .row{

grid-template-columns:1fr;

}

.about-feature{

grid-template-columns:1fr;

}

.about .row{

flex-direction:column;

}

}

/*====================================
        PRODUCT GALLERY
=====================================*/

.product-gallery{
    background:#F5FAFD;
}


.productGallerySlider{
    padding:10px 10px 60px;
}


.gallery-card{

    position:relative;

    height:380px;

    overflow:hidden;

    border-radius:15px;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.gallery-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}


.gallery-card:hover img{

    transform:scale(1.08);

}


/* Overlay */

.gallery-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:30px 25px;

    background:linear-gradient(
        transparent,
        rgba(18,58,92,.95)
    );

    color:#fff;

    transform:translateY(10px);

    transition:.4s ease;

}


.gallery-card:hover .gallery-overlay{

    transform:translateY(0);

}


.gallery-overlay h3{

    margin:0 0 8px;

    font-size:24px;

    font-family:'Fraunces',serif;

    color:#fff;

}


.gallery-overlay p{

    margin:0;

    color:#dce8f2;

    font-size:15px;

}


/* Swiper Navigation */

.productGallerySlider .swiper-button-next,
.productGallerySlider .swiper-button-prev{

    width:45px;

    height:45px;

    background:#2E86C7;

    color:#fff;

    border-radius:50%;

}


.productGallerySlider .swiper-button-next:after,
.productGallerySlider .swiper-button-prev:after{

    font-size:18px;

    font-weight:bold;

}


.productGallerySlider .swiper-button-next:hover,
.productGallerySlider .swiper-button-prev:hover{

    background:#123A5C;

}


/* Pagination */

.productGallerySlider .swiper-pagination-bullet{

    width:10px;

    height:10px;

    opacity:1;

    background:#c8dce9;

}


.productGallerySlider .swiper-pagination-bullet-active{

    background:#2E86C7;

}


/* Mobile */

@media(max-width:991px){

    .gallery-card{
        height:340px;
    }

}


@media(max-width:767px){

    .gallery-card{
        height:300px;
    }

    .productGallerySlider{
        padding-left:0;
        padding-right:0;
    }

    .productGallerySlider .swiper-button-next,
    .productGallerySlider .swiper-button-prev{

        width:38px;
        height:38px;

    }

    .productGallerySlider .swiper-button-next:after,
    .productGallerySlider .swiper-button-prev:after{

        font-size:15px;

    }

}


/*====================================
    FLOATING REQUEST QUOTE
====================================*/

.floating-quote{

    position:fixed;

    right:25px;
    bottom:25px;

    height:50px;

    padding:0 25px;

    background:#123A5C;
    color:#fff;

    border-radius:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    font-size:14px;
    font-weight:700;

    box-shadow:0 12px 30px rgba(0,0,0,.20);

    z-index:9998;

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease,
        background .3s ease;

}


.floating-quote i{

    font-size:17px;

}


.floating-quote:hover{

    background:#2E86C7;
    color:#fff;

    transform:translateY(-4px);

}


/* Hide */

.floating-quote.hide-quote{

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    pointer-events:none;

}


/* Mobile */

@media(max-width:767px){

    .floating-quote{

        right:15px;
        bottom:20px;

        height:48px;

        padding:0 18px;

        font-size:12px;

    }

    .floating-quote i{

        font-size:15px;

    }

}

/*====================================
        PRODUCT IMAGE ZOOM BUTTON
====================================*/

.product-image{
    position:relative;
    overflow:hidden;
}


.image-zoom{

    position:absolute;

    right:15px;
    bottom:15px;

    width:45px;
    height:45px;

    border:none;

    border-radius:50%;

    background:#2E86C7;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

    cursor:pointer;

    opacity:0;
    transform:translateY(10px);

    transition:.3s;

    z-index:5;

    box-shadow:0 8px 20px rgba(0,0,0,.20);

}


.product-card:hover .image-zoom{

    opacity:1;

    transform:translateY(0);

}


.image-zoom:hover{

    background:#123A5C;

    transform:scale(1.08) !important;

}

/*====================================
        IMAGE LIGHTBOX
====================================*/

.image-lightbox{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.88);

    display:flex;

    align-items:center;
    justify-content:center;

    padding:40px;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:99999;

}


.image-lightbox.active{

    opacity:1;

    visibility:visible;

}


.image-lightbox img{

    max-width:90%;

    max-height:85vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:10px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

    transform:scale(.85);

    transition:.3s;

}


.image-lightbox.active img{

    transform:scale(1);

}


.lightbox-close{

    position:absolute;

    top:25px;
    right:30px;

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#2E86C7;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    align-items:center;
    justify-content:center;

    transition:.3s;

}


.lightbox-close:hover{

    background:#fff;

    color:#123A5C;

    transform:rotate(90deg);

}


@media(max-width:767px){

    .image-lightbox{

        padding:20px;

    }

    .image-lightbox img{

        max-width:95%;

        max-height:75vh;

    }

    .lightbox-close{

        top:15px;
        right:15px;

        width:42px;
        height:42px;

    }

    /* Mobile par + always visible */

    .image-zoom{

        opacity:1;

        transform:translateY(0);

        width:40px;
        height:40px;

    }

}

/*=========================================
        PRODUCT FLIP CARDS
=========================================*/

.product-flip-card {

    width:100%;
    height:460px;

    perspective:1400px;

    position:relative;

}


.product-flip-inner {

    position:relative;

    width:100%;
    height:100%;

    transition:
        transform .8s
        cubic-bezier(.4,.2,.2,1);

    transform-style:preserve-3d;

}


/*=========================================
        HOVER FLIP
=========================================*/

.product-flip-card:hover .product-flip-inner {

    transform:rotateY(180deg);

}


/*=========================================
        FRONT + BACK
=========================================*/

.product-flip-front,
.product-flip-back {

    position:absolute;

    inset:0;

    width:100%;
    height:460px;

    border-radius:18px;

    overflow:hidden;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}


/*=========================================
        FRONT
=========================================*/

.product-flip-front {

    background:#fff;

    box-shadow:
        0 12px 35px rgba(0,0,0,.08);

    border:1px solid #e7eef4;

}


.flip-image {

    width:100%;

    height:245px;

    background:#F5FAFD;

    overflow:hidden;

}


.flip-image img {

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s ease;

}


/* Image zoom on hover */

.product-flip-card:hover .flip-image img {

    transform:scale(1.06);

}


.flip-front-content {

    padding:22px 25px;

}


.flip-front-content > span {

    color:#2E86C7;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}


.flip-front-content h3 {

    color:#16324A;

    font-size:23px;

    font-family:'Fraunces',serif;

    margin:8px 0 8px;

}


.flip-front-content p {

    color:#60788d;

    font-size:14px;

    line-height:1.6;

    margin-bottom:12px;

}


/*=========================================
        HOVER HINT
=========================================*/

.flip-hint {

    color:#2E86C7;

    font-size:12px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:8px;

}


.flip-hint i {

    font-size:13px;

}


/*=========================================
        BACK
=========================================*/

.product-flip-back {

    background:
        linear-gradient(
            145deg,
            #123A5C,
            #164b70
        );

    color:#fff;

    padding:28px 25px;

    transform:rotateY(180deg);

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    box-shadow:
        0 15px 40px rgba(0,0,0,.15);

}


.product-flip-back > span {

    color:#7FC1EA;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

}


.product-flip-back h3 {

    color:#fff;

    font-size:24px;

    font-family:'Fraunces',serif;

    margin:8px 0 20px;

}


/*=========================================
        SPEC LIST
=========================================*/

.spec-list {

    flex:1;

}


.spec-list div {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding:10px 0;

    border-bottom:
        1px solid rgba(255,255,255,.14);

    font-size:12px;

}


.spec-list strong {

    color:#dbeaf4;

    font-weight:500;

}


.spec-list span {

    color:#fff;

    font-weight:700;

    text-align:right;

}


/*=========================================
        VIEW FULL DETAILS
=========================================*/

.view-details-btn {

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:none;

    background:#2E86C7;

    color:#fff;

    padding:14px 16px;

    border-radius:7px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.7px;

    text-transform:uppercase;

    cursor:pointer;

    margin-top:18px;

    transition:.3s ease;

}


.view-details-btn:hover {

    background:#fff;

    color:#123A5C;

}


.view-details-btn i {

    transition:.3s;

}


.view-details-btn:hover i {

    transform:translateX(5px);

}

/* =========================================
   FINAL PRODUCT DETAILS POPUP
   LEFT IMAGE + RIGHT DETAILS
========================================= */

.product-details-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 30px !important;

    background: rgba(7, 24, 38, 0.72) !important;
    backdrop-filter: blur(7px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .3s ease, visibility .3s ease;

    z-index: 999999 !important;
}

.product-details-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================
   POPUP BOX
========================================= */

.product-details-box {
    position: relative !important;

    width: 100% !important;
    max-width: 1000px !important;
    height: 90vh !important;
    max-height: 90vh !important;

    background: #fff !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transform: translateY(25px) scale(.97);

    transition: transform .35s ease;

    z-index: 2;
}

.product-details-modal.active .product-details-box {
    transform: translateY(0) scale(1);
}


/* =========================================
   OVERLAY
========================================= */

.product-details-overlay {
    position: absolute !important;
    inset: 0 !important;

    background: rgba(7,24,38,.72) !important;
    backdrop-filter: blur(7px);

    cursor: pointer;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.product-modal-close {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    width: 44px !important;
    height: 44px !important;

    border: none !important;
    border-radius: 50% !important;

    background: #2E86C7 !important;
    color: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 18px !important;

    cursor: pointer;

    z-index: 20 !important;

    transition: .3s ease;
}

.product-modal-close:hover {
    background: #123A5C !important;
    transform: rotate(90deg);
}


/* =========================================
   LEFT IMAGE + RIGHT DETAILS
========================================= */

.product-modal-content {
    display: grid !important;

    grid-template-columns: 42% 58% !important;

    width: 100% !important;
    height: 100% !important;

    max-height: 90vh !important;
}


/* =========================================
   LEFT SIDE IMAGE
========================================= */

.product-modal-image {
    height: 100% !important;
    min-height: 0 !important;

    background: #F5FAFD !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}

.product-modal-image img {
    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    object-fit: cover !important;
}


/* =========================================
   RIGHT SIDE DETAILS
========================================= */

.product-modal-info {
    height: 100% !important;
    max-height: 90vh !important;

    padding: 48px 42px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #fff !important;
}


/* RIGHT SIDE SCROLLBAR */

.product-modal-info::-webkit-scrollbar {
    width: 7px;
}

.product-modal-info::-webkit-scrollbar-track {
    background: #edf4f8;
}

.product-modal-info::-webkit-scrollbar-thumb {
    background: #2E86C7;
    border-radius: 10px;
}

.product-modal-info::-webkit-scrollbar-thumb:hover {
    background: #123A5C;
}


/* =========================================
   PRODUCT TITLE
========================================= */

.modal-product-category {
    display: inline-block;

    color: #2E86C7;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;

    margin-bottom: 10px;
}

.product-modal-info h2 {
    font-size: 38px;
    line-height: 1.2;

    color: #16324A;

    font-family: 'Fraunces', serif;

    margin-bottom: 18px;
}

.product-modal-info > p {
    color: #60788d;

    line-height: 1.8;

    margin-bottom: 28px;
}


/* =========================================
   SPECIFICATION TABLE
========================================= */

.modal-spec-table {
    border: 1px solid #e3edf4;

    border-radius: 10px;

    overflow: hidden;
}

.modal-spec-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 13px 16px;

    border-bottom: 1px solid #e8f0f5;

    background: #fff;
}

.modal-spec-row:nth-child(even) {
    background: #F5FAFD;
}

.modal-spec-row:last-child {
    border-bottom: none;
}

.modal-spec-row strong {
    color: #123A5C;
    font-weight: 600;
}

.modal-spec-row span {
    color: #60788d;

    text-align: right;

    font-weight: 600;
}


/* =========================================
   ACTION BUTTONS
========================================= */

.modal-actions {
    margin-top: 30px;
}


/* =========================================
   DESKTOP ONLY
========================================= */

@media (min-width: 992px) {

    .product-modal-content {
        grid-template-columns: 42% 58% !important;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .product-details-box {
        max-width: 700px !important;
        height: 90vh !important;
    }

    .product-modal-content {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .product-modal-image {
        height: 280px !important;
        min-height: 280px !important;
    }

    .product-modal-image img {
        height: 280px !important;
    }

    .product-modal-info {
        height: auto !important;
        max-height: calc(90vh - 280px) !important;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .product-details-modal {
        padding: 12px !important;
    }

    .product-details-box {
        height: 92vh !important;
        max-height: 92vh !important;

        border-radius: 15px !important;
    }

    .product-modal-image {
        height: 210px !important;
        min-height: 210px !important;
    }

    .product-modal-image img {
        height: 210px !important;
    }

    .product-modal-info {
        max-height: calc(92vh - 210px) !important;

        padding: 30px 22px !important;
    }

    .product-modal-info h2 {
        font-size: 30px;
    }
}


/*=========================================
        OVERLAY
=========================================*/

.product-details-overlay {

    position:absolute;

    inset:0;

    background:
        rgba(7,24,38,.82);

    backdrop-filter:blur(6px);

}


/*=========================================
        MODAL BOX
=========================================*/

.product-details-box {

    position:relative;

    width:100%;

    max-width:1000px;

    max-height:90vh;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transform:
        translateY(30px)
        scale(.96);

    transition:
        transform .4s ease;

    z-index:2;

}


/* OPEN ANIMATION */

.product-details-modal.active
.product-details-box {

    transform:
        translateY(0)
        scale(1);

}


/*=========================================
        CLOSE BUTTON
=========================================*/

.product-modal-close {

    position:absolute;

    top:18px;
    right:18px;

    width:45px;
    height:45px;

    border:none;

    border-radius:50%;

    background:#2E86C7;

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:18px;

    cursor:pointer;

    z-index:10;

    transition:.3s;

}


.product-modal-close:hover {

    background:#123A5C;

    transform:
        rotate(90deg);

}


/*=========================================
        MODAL CONTENT
=========================================*/

.product-modal-content {

    display:grid;

    grid-template-columns:
        42% 58%;

    max-height:90vh;

}


/*=========================================
        MODAL IMAGE
=========================================*/

.product-modal-image {

    min-height:600px;

    background:#F5FAFD;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

}


.product-modal-image img {

    width:100%;
    height:100%;

    min-height:600px;

    object-fit:cover;

}


/*=========================================
        MODAL INFORMATION
=========================================*/

.product-modal-info {

    padding:50px 45px;

    max-height:90vh;

    overflow-y:auto;

}


/* Custom scrollbar */

.product-modal-info::-webkit-scrollbar {

    width:6px;

}


.product-modal-info::-webkit-scrollbar-thumb {

    background:#2E86C7;

    border-radius:10px;

}


.product-modal-info::-webkit-scrollbar-track {

    background:#edf4f8;

}


/*=========================================
        CATEGORY
=========================================*/

.modal-product-category {

    display:inline-block;

    color:#2E86C7;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

}


.product-modal-info h2 {

    font-size:40px;

    line-height:1.2;

    color:#16324A;

    font-family:'Fraunces',serif;

    margin-bottom:18px;

}


.product-modal-info > p {

    color:#60788d;

    line-height:1.8;

    margin-bottom:28px;

}


/*=========================================
        MODAL SECTION
=========================================*/

.modal-section {

    margin-bottom:28px;

}


.modal-section h4 {

    display:flex;

    align-items:center;

    gap:10px;

    color:#123A5C;

    font-size:18px;

    margin-bottom:12px;

}


.modal-section h4 i {

    color:#2E86C7;

}


.modal-section p {

    color:#60788d;

    line-height:1.8;

    margin:0;

}


/*=========================================
        SPEC TABLE
=========================================*/

.modal-spec-table {

    border:
        1px solid #e3edf4;

    border-radius:10px;

    overflow:hidden;

}


.modal-spec-row {

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:13px 16px;

    border-bottom:
        1px solid #e8f0f5;

    background:#fff;

}


.modal-spec-row:nth-child(even) {

    background:#F5FAFD;

}


.modal-spec-row:last-child {

    border-bottom:none;

}


.modal-spec-row strong {

    color:#123A5C;

    font-weight:600;

}


.modal-spec-row span {

    color:#60788d;

    text-align:right;

    font-weight:600;

}


/*=========================================
        MODAL ACTION
=========================================*/

.modal-actions {

    margin-top:30px;

}


.modal-actions .btn {

    display:inline-flex;

    align-items:center;

    gap:10px;

}


/*=========================================
        MODAL MOBILE
=========================================*/

@media(max-width:991px) {

    .product-details-box {

        max-width:700px;

    }


    .product-modal-content {

        grid-template-columns:1fr;

    }


    .product-modal-image {

        min-height:260px;

        max-height:260px;

    }


    .product-modal-image img {

        min-height:260px;

    }


    .product-modal-info {

        max-height:
            calc(90vh - 260px);

        padding:35px 30px;

    }

}


@media(max-width:767px) {

    .product-details-modal {

        padding:15px;

    }


    .product-details-box {

        max-height:92vh;

        border-radius:15px;

    }


    .product-modal-image {

        min-height:210px;

        max-height:210px;

    }


    .product-modal-image img {

        min-height:210px;

    }


    .product-modal-info {

        max-height:
            calc(92vh - 210px);

        padding:30px 22px;

    }


    .product-modal-info h2 {

        font-size:30px;

    }


    .modal-spec-row {

        padding:11px 12px;

        font-size:13px;

    }


    .product-modal-close {

        width:40px;
        height:40px;

        top:12px;
        right:12px;

    }


    .view-details-btn {

        padding:13px;

    }

}
/*====================================================
    PRODUCT DETAILS POPUP
====================================================*/

.product-details-modal{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:30px;

    background:rgba(0,0,0,.22) !important;
backdrop-filter:blur(5px) !important;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:999999;

}


.product-details-modal.active{

    opacity:1;
    visibility:visible;

}


/* OVERLAY */

.product-details-overlay{
    position:absolute !important;
    inset:0 !important;

    background:transparent !important;

    cursor:pointer;
}


/*========================================
    MODAL BOX
========================================*/

.product-details-box{

    position:relative;

    width:100%;

    max-width:850px;

    max-height:90vh;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30);

    transform:translateY(40px) scale(.95);

    transition:.4s ease;

    z-index:2;

}


.product-details-modal.active .product-details-box{

    transform:translateY(0) scale(1);

}


/*========================================
    CLOSE BUTTON
========================================*/

.product-modal-close{

    position:absolute;

    top:18px;
    right:18px;

    width:45px;
    height:45px;

    border:none;

    border-radius:50%;

    background:#2E86C7;

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:20px;

    cursor:pointer;

    z-index:10;

    transition:.3s;

}


.product-modal-close:hover{

    background:#123A5C;

    transform:rotate(90deg);

}


/*========================================
    HEADER
========================================*/

.product-modal-header{

    padding:35px 45px 25px;

    background:
        linear-gradient(
            135deg,
            #123A5C,
            #1b527d
        );

    color:#fff;

}


.product-modal-header span{

    display:inline-block;

    color:#7FC1EA;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:8px;

}


.product-modal-header h2{

    color:#fff;

    font-size:36px;

    font-family:'Fraunces',serif;

    margin:0 0 8px;

}


.product-modal-header p{

    color:#dce8f2;

    margin:0;

    font-size:15px;

}


/*========================================
    SCROLL AREA
========================================*/

.product-modal-scroll{

    max-height:calc(90vh - 160px);

    overflow-y:auto;

    padding:35px 45px 45px;

}


/* Custom scrollbar */

.product-modal-scroll::-webkit-scrollbar{

    width:7px;

}


.product-modal-scroll::-webkit-scrollbar-track{

    background:#f1f5f8;

}


.product-modal-scroll::-webkit-scrollbar-thumb{

    background:#2E86C7;

    border-radius:10px;

}


.product-modal-scroll::-webkit-scrollbar-thumb:hover{

    background:#123A5C;

}


/*========================================
    PRODUCT IMAGE
========================================*/

.modal-product-image{

    width:100%;

    height:300px;

    background:#F5FAFD;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:30px;

}


.modal-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*========================================
    HEADINGS
========================================*/

.modal-product-description h3,
.modal-product-specification h3,
.modal-product-applications h3{

    color:#123A5C;

    font-family:'Fraunces',serif;

    font-size:25px;

    margin-bottom:15px;

}


.modal-product-description p{

    color:#60788d;

    line-height:1.8;

    margin-bottom:30px;

}


/*========================================
    SPEC GRID
========================================*/

.modal-spec-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:15px;

    margin-bottom:35px;

}


.modal-spec-item{

    padding:18px 20px;

    background:#F5FAFD;

    border:1px solid #e1edf5;

    border-radius:10px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}


.modal-spec-item span{

    color:#60788d;

    font-size:14px;

}


.modal-spec-item strong{

    color:#123A5C;

    font-size:14px;

    text-align:right;

}


/*========================================
    APPLICATIONS
========================================*/

.modal-product-applications{

    margin-bottom:30px;

}


.modal-product-applications ul{

    margin:0;

    padding:0;

    list-style:none;

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:12px;

}


.modal-product-applications li{

    color:#60788d;

    padding:12px 15px;

    background:#F5FAFD;

    border-radius:8px;

    font-size:14px;

}


.modal-product-applications li i{

    color:#2E86C7;

    margin-right:8px;

}


/*========================================
    FOOTER
========================================*/

.modal-product-footer{

    padding-top:25px;

    border-top:1px solid #e5edf3;

}


.modal-product-footer .btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

}


/*========================================
    MOBILE
========================================*/

@media(max-width:767px){

    .product-details-modal{

        padding:15px;

    }


    .product-details-box{

        max-height:92vh;

        border-radius:14px;

    }


    .product-modal-header{

        padding:30px 25px 22px;

    }


    .product-modal-header h2{

        font-size:28px;

        padding-right:35px;

    }


    .product-modal-scroll{

        max-height:calc(92vh - 145px);

        padding:25px 20px 30px;

    }


    .modal-product-image{

        height:220px;

    }


    .modal-spec-grid{

        grid-template-columns:1fr;

    }


    .modal-product-applications ul{

        grid-template-columns:1fr;

    }


    .product-modal-close{

        width:40px;
        height:40px;

        top:12px;
        right:12px;

    }

}


/*====================================
        FRONT
====================================*/

.product-flip-front{

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.07);

}


.flip-image{

    height:220px;

    background:#F5FAFD;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

}


.flip-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}


.product-flip-card:hover .flip-image img{

    transform:scale(1.05);

}


.flip-front-content{

    padding:22px 25px;

}


.flip-front-content > span,
.product-flip-back > span{

    color:#2E86C7;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

}


.flip-front-content h3{

    color:#16324A;

    font-size:22px;

    font-family:'Fraunces',serif;

    margin:8px 0 10px;

}


.flip-front-content p{

    color:#60788d;

    font-size:14px;

    line-height:1.6;

    margin-bottom:15px;

}


/*====================================
        VIEW LINK
====================================*/

.view-specs{

    color:#2E86C7;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}


.view-specs i{

    margin-left:7px;

    transition:.3s;

}


.view-specs:hover{

    color:#123A5C;

}


.view-specs:hover i{

    transform:translateX(5px);

}


/*====================================
        BACK
====================================*/

.product-flip-back{

    background:#123A5C;

    color:#fff;

    padding:25px;

    transform:rotateY(180deg);

    display:flex;

    flex-direction:column;

}


.product-flip-back > span{

    color:#7FC1EA;

}


.product-flip-back h3{

    color:#fff;

    font-size:21px;

    font-family:'Fraunces',serif;

    margin:8px 0 18px;

}


/*====================================
        SPECIFICATION
====================================*/

.spec-list{

    flex:1;

}


.spec-list div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding:9px 0;

    border-bottom:1px solid rgba(255,255,255,.15);

    font-size:12px;

}


.spec-list div:last-child{

    border-bottom:none;

}


.spec-list strong{

    color:#dce8f2;

    font-weight:500;

}


.spec-list span{

    color:#fff;

    font-weight:600;

    text-align:right;

}


/*====================================
        DETAILS BUTTON
====================================*/

.view-details-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#2E86C7;

    color:#fff;

    padding:12px 15px;

    border-radius:5px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.7px;

    text-transform:uppercase;

    margin-top:15px;

}


.view-details-btn:hover{

    background:#fff;

    color:#123A5C;

}


.view-details-btn i{

    transition:.3s;

}


.view-details-btn:hover i{

    transform:translateX(5px);

}


/*====================================
        MOBILE
====================================*/

@media(max-width:991px){

    .product-flip-card{

        height:440px;

    }

}


@media(max-width:767px){

    .product-flip-card{

        height:450px;

    }

}

/*====================================
        PROCESS SECTION
====================================*/

.process{
    background:#ffffff;
}

.process-wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.process-box{
    background:#fff;
    padding:40px 30px;
    border-radius:15px;
    text-align:center;
    position:relative;
    transition:.4s;
    border:1px solid #e6eef5;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
}

.process-box:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.process-number{
    width:70px;
    height:70px;
    line-height:70px;
    margin:0 auto 25px;
    background:#2E86C7;
    color:#fff;
    font-size:24px;
    font-weight:700;
    border-radius:50%;
}

.process-box h3{
    font-size:24px;
    color:#16324A;
    margin-bottom:15px;
    font-family:'Fraunces',serif;
}

.process-box p{
    color:#60788d;
}


/*====================================
        COUNTER SECTION
====================================*/

.counter-section{
    padding:90px 0;
    background:#123A5C;
}

.counter-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.counter-box{
    text-align:center;
    color:#fff;
}

.counter-box h2{
    font-size:54px;
    font-family:'Fraunces',serif;
    margin-bottom:10px;
}

.counter-box p{
    font-size:17px;
    opacity:.9;
}


/*====================================
        GLOBAL REACH
====================================*/

.global-reach{
    background:#F5FAFD;
}

.global-reach .row{
    display:flex;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
}

.country-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:30px 0;
}

.country-list li{
    background:#fff;
    padding:14px 18px;
    border-left:4px solid #2E86C7;
    border-radius:8px;
    color:#16324A;
    font-weight:500;
    transition:.3s;
}

.country-list li:hover{
    background:#2E86C7;
    color:#fff;
    transform:translateX(6px);
}

.global-image{
    text-align:center;
}

.global-image img{
    max-width:100%;
    animation:float 5s ease-in-out infinite;
}


/*====================================
        NEWS SECTION
====================================*/

.news{
    background:#fff;
}

.news .row{
    display:flex;
    flex-wrap:wrap;
    row-gap:30px;
}

.news .col-lg-4{
    padding:15px;
}

.news-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
    transition:.4s;
}

.news-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.news-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    transition:.5s;
}

.news-card:hover img{
    transform:scale(1.08);
}

.news-content{
    padding:30px;
}

.news-content span{
    display:inline-block;
    color:#2E86C7;
    font-size:14px;
    font-weight:700;
    margin-bottom:15px;
    text-transform:uppercase;
}

.news-content h3{
    font-size:24px;
    color:#16324A;
    margin-bottom:18px;
    font-family:'Fraunces',serif;
    line-height:1.4;
}

.news-content p{
    color:#60788d;
    margin-bottom:20px;
}

.news-content a{
    color:#2E86C7;
    font-weight:600;
}

.news-content a:hover{
    color:#123A5C;
}


/*====================================
        RESPONSIVE
====================================*/

@media(max-width:991px){

.process-wrapper{
    grid-template-columns:repeat(2,1fr);
}

.counter-grid{
    grid-template-columns:repeat(2,1fr);
}

.news .row{
    grid-template-columns:1fr;
}

.global-reach .row{
    flex-direction:column;
}

}

@media(max-width:767px){

.process-wrapper{
    grid-template-columns:1fr;
}

.counter-grid{
    grid-template-columns:1fr;
}

.country-list{
    grid-template-columns:1fr;
}

}

/*====================================
        CONTACT SECTION
====================================*/

.contact{
    background:#F5FAFD;
}

.contact .row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}

.contact .col-lg-5,
.contact .col-lg-7{
    margin-bottom:30px;
}

.contact-info{
    background:#123A5C;
    color:#fff;
    padding:50px;
    border-radius:15px;
    height:100%;
}

.quote-form{
    background:#fff;
    padding:50px;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    height:100%;
}


/*====================================
        FOOTER
====================================*/

footer{
    background:#123A5C;
    color:#fff;
    padding:80px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:40px;
    margin-bottom:50px;
}

.footer-logo{
    width:220px;
    margin-bottom:20px;
}

.footer-widget h3{
    margin-bottom:20px;
    font-size:22px;
    font-family:'Fraunces',serif;
}

.footer-widget ul li{
    margin-bottom:14px;
}

.footer-widget ul li a{
    color:#d7e5ef;
}

.footer-widget ul li a:hover{
    color:#7FC1EA;
    padding-left:6px;
}

.footer-widget i{
    color:#7FC1EA;
    margin-right:10px;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    color:#d7e5ef;
}


/*====================================
        MODALS
====================================*/

.login-modal,
.product-modal{

    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.70);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.login-box,
.product-box{

    width:95%;
    max-width:600px;
    background:#fff;
    padding:40px;
    border-radius:12px;
    position:relative;
    animation:popup .35s ease;
}

@keyframes popup{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.close-login,
.close-product{

    position:absolute;
    right:18px;
    top:18px;
    width:42px;
    height:42px;
    border:none;
    background:#2E86C7;
    color:#fff;
    border-radius:50%;
    cursor:pointer;
    font-size:22px;
}

.login-box input{

    width:100%;
    padding:15px;
    margin-bottom:18px;
    border:1px solid #ddd;
    border-radius:8px;
}


/*====================================
        MOBILE MENU
====================================*/

.mobile-menu{
    display:none;
}

@media(max-width:991px){

.navbar{

    position:fixed;
    top:90px;
    left:-100%;
    width:280px;
    height:100%;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    transition:.4s;
    padding:30px;

}

.navbar.active{
    left:0;
}

.navbar ul{
    flex-direction:column;
    gap:20px;
}

.mobile-menu{
    display:block;
}

.header-btn{
    display:none;
}

.topbar{
    display:none;
}

.hero .container,
.about .row,
.contact .row,
.global-reach .row{

    flex-direction:column;
}

.hero-content h1{
    font-size:42px;
}

.hero-counter{
    gap:30px;
    flex-wrap:wrap;
}

.footer-grid{
    grid-template-columns:1fr 1fr;
}

.quote-form .row{
    flex-direction:column;
}

}


/*====================================
        MOBILE
====================================*/

@media(max-width:767px){

.section-padding{
    padding:70px 0;
}

.container{
    width:92%;
}

.hero{
    padding:80px 0;
}

.hero-content h1{
    font-size:34px;
}

.section-title h2{
    font-size:30px;
}

.footer-grid{
    grid-template-columns:1fr;
}

.footer-bottom{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

.contact-info,
.quote-form{
    padding:30px;
}

.hero-buttons{
    flex-direction:column;
}

.hero-counter{
    flex-direction:column;
    gap:20px;
}

}


/*====================================
        SCROLLBAR
====================================*/

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#2E86C7;
    border-radius:10px;
}

::-webkit-scrollbar-track{
    background:#f1f1f1;
}


.particles{

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

overflow:hidden;

pointer-events:none;

}

.particle{

position:absolute;

width:8px;
height:8px;

background:#86d4ff;

opacity:.5;

clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);

animation:particleMove linear infinite;

}

@keyframes particleMove{

0%{

transform:
translateY(0)
translateX(0)
rotate(0deg);

}

25%{

transform:
translateY(-50px)
translateX(25px)
rotate(90deg);

}

50%{

transform:
translateY(20px)
translateX(-35px)
rotate(180deg);

}

75%{

transform:
translateY(-30px)
translateX(20px)
rotate(270deg);

}

100%{

transform:
translateY(0)
translateX(0)
rotate(360deg);

}

}

.whatsapp{

position:fixed;

left:25px;
bottom:25px;

width:65px;
height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

color:#fff;

font-size:34px;

box-shadow:0 15px 35px rgba(0,0,0,.25);

z-index:9999;

animation:whats 2s infinite;

}

@keyframes whats{

0%{

box-shadow:
0 0 0 0 rgba(37,211,102,.5);

}

70%{

box-shadow:
0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:
0 0 0 0 rgba(37,211,102,0);

}

}

/* =========================================================
   FINAL PRODUCT POPUP - LEFT IMAGE / RIGHT DETAILS
========================================================= */

.product-details-modal .product-details-box {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    grid-template-rows: 190px 1fr !important;

    width: min(1000px, 94vw) !important;
    height: min(90vh, 650px) !important;

    overflow: hidden !important;
    background: #fff !important;
    border-radius: 18px !important;
}


/* CLOSE BUTTON */
.product-details-modal .product-modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #2E86C7 !important;
    color: #fff !important;
    z-index: 100 !important;
}


/* =========================================================
   HEADER = RIGHT SIDE
========================================================= */

.product-details-modal .product-modal-header {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 58% !important;
    height: 190px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    padding: 38px 55px 25px 40px !important;

    background: linear-gradient(
        135deg,
        #123A5C,
        #1d5885
    ) !important;

    z-index: 10 !important;
}


/* CATEGORY */
.product-details-modal .product-modal-header span {
    color: #7FC1EA !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    letter-spacing: 2px !important;
}


/* TITLE */
.product-details-modal .product-modal-header h2 {
    color: #fff !important;

    font-size: 36px !important;

    margin: 6px 0 10px !important;

    padding: 0 !important;
}


/* INTRO */
.product-details-modal .product-modal-header p {
    color: #dce8f2 !important;

    font-size: 14px !important;

    line-height: 1.65 !important;

    margin: 0 !important;

    padding-right: 20px !important;
}


/* =========================================================
   IMAGE = LEFT SIDE
========================================================= */

.product-details-modal .modal-product-image {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 250px;
    height: 250px;

    margin: 0 !important;

    padding: 0 !important;

    background: #F5FAFD !important;

    overflow: hidden !important;

    z-index: 5 !important;
}


.product-details-modal .modal-product-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    display: block !important;
}


/* =========================================================
   RIGHT SIDE SCROLL AREA
========================================================= */

.product-details-modal .product-modal-scroll {

    position: absolute !important;

    top: 190px !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 58% !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    padding: 30px 40px 40px !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #fff !important;
}


/* SCROLLBAR */
.product-details-modal .product-modal-scroll::-webkit-scrollbar {
    width: 7px;
}

.product-details-modal .product-modal-scroll::-webkit-scrollbar-track {
    background: #edf4f8;
}

.product-details-modal .product-modal-scroll::-webkit-scrollbar-thumb {
    background: #2E86C7;
    border-radius: 10px;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.product-details-modal .modal-spec-grid {
    display: block !important;
}

.product-details-modal .modal-spec-item {
    display: flex !important;

    justify-content: space-between !important;
    align-items: center !important;

    padding: 13px 0 !important;

    border-bottom: 1px solid #dce8ef !important;

    background: transparent !important;

    border-radius: 0 !important;
}


/* =========================================================
   APPLICATIONS
========================================================= */

.product-details-modal .modal-product-applications ul {
    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

    .product-details-modal .product-details-box {
        display: block !important;
    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 991px) {

    .product-details-modal .product-details-box {
        height: 90vh !important;
        max-height: 90vh !important;

        overflow-y: auto !important;
    }

    .product-details-modal .product-modal-header {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        padding: 35px 30px 25px !important;
    }

   .modal-product-image {
    width: 420px !important;
    height: 570px !important;

    padding: 20px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #e1e8ed !important;
    border-radius: 16px !important;

    box-shadow: inset 0 0 20px rgba(0,0,0,0.04) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}

.modal-product-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 10px !important;
}
    .product-details-modal .product-modal-scroll {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: auto !important;

        padding: 30px !important;
    }
}

/* =========================================================
   PRODUCT POPUP - EXACT VIDEO STYLE
========================================================= */


/* BACKGROUND */

.product-details-modal {
    position: fixed !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 30px !important;

    background: rgba(0, 0, 0, 0.22) !important;

    backdrop-filter: blur(5px) !important;

    -webkit-backdrop-filter: blur(5px) !important;

    z-index: 999999 !important;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: .3s ease;
}


.product-details-modal.active {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


/* OVERLAY */

.product-details-overlay {

    position: absolute !important;

    inset: 0 !important;

    background: rgba(20, 45, 65, .18) !important;

    backdrop-filter: blur(5px) !important;

    -webkit-backdrop-filter: blur(5px) !important;

}


/* =========================================================
   POPUP BOX
========================================================= */

.product-details-box {

   display: grid !important;
    grid-template-columns: 420px 1fr !important;
    grid-template-rows: auto 1fr !important;
    width: 1000px !important;
    max-width: 95vw !important;
    height: 570px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}


.product-details-modal.active
.product-details-box {

    transform: scale(1);
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.video-modal-image {

    width: 100% !important;

    height: 100% !important;

    background: #f5fafc !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;
}


.video-modal-image img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;
}


/* =========================================================
   RIGHT DETAILS
========================================================= */

.video-modal-details {

    width: 100% !important;

    height: 100% !important;

    background: #fff !important;

    overflow: hidden !important;
}


.video-modal-scroll {

    width: 100% !important;

    height: 100% !important;

    box-sizing: border-box !important;

    padding: 43px 38px 30px !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;
}


/* SCROLLBAR */

.video-modal-scroll::-webkit-scrollbar {

    width: 7px;
}

.video-modal-scroll::-webkit-scrollbar-track {

    background: #f1f5f8;
}

.video-modal-scroll::-webkit-scrollbar-thumb {

    background: #8a9298;

    border-radius: 10px;
}


/* =========================================================
   CATEGORY
========================================================= */

.video-modal-category {

    display: block !important;

    color: #2E86C7 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    margin-bottom: 10px !important;

    text-transform: uppercase !important;
}


/* =========================================================
   TITLE
========================================================= */

.video-modal-scroll h2 {

    margin: 0 0 15px !important;

    padding: 0 !important;

    color: #16324A !important;

    font-family: 'Fraunces', serif !important;

    font-size: 30px !important;

    line-height: 1.2 !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.video-modal-intro {

    margin: 0 0 28px !important;

    color: #60788d !important;

    font-size: 14px !important;

    line-height: 1.75 !important;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.video-specifications {

    width: 100% !important;

    margin-bottom: 28px !important;
}


.video-spec-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    min-height: 43px !important;

    border-bottom: 1px solid #dce5eb !important;

    gap: 20px !important;
}


.video-spec-row span {

    color: #60788d !important;

    font-size: 13px !important;
}


.video-spec-row strong {

    color: #123A5C !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    text-align: right !important;
}


/* =========================================================
   QUANTITY
========================================================= */

.video-quantity {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-top: 4px !important;

    margin-bottom: 24px !important;
}


.video-quantity > span {

    color: #60788d !important;

    font-size: 13px !important;
}


.quantity-selector {

    display: flex !important;

    align-items: center !important;

    height: 38px !important;

    border: 1px solid #d9e5ec !important;

    border-radius: 7px !important;

    overflow: hidden !important;
}


.quantity-selector button {

    width: 36px !important;

    height: 38px !important;

    border: none !important;

    background: #f4f8fb !important;

    color: #2E86C7 !important;

    font-size: 17px !important;

    cursor: pointer !important;
}


.quantity-selector input {

    width: 48px !important;

    height: 38px !important;

    border: none !important;

    outline: none !important;

    text-align: center !important;

    color: #123A5C !important;

    font-size: 13px !important;
}


/* remove arrows */

.quantity-selector input::-webkit-inner-spin-button,
.quantity-selector input::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;
}


/* =========================================================
   BOTTOM BUTTONS
========================================================= */

.video-modal-buttons {

    display: flex !important;

    gap: 14px !important;

    padding-top: 5px !important;
}


.video-request-btn {

    flex: 1 !important;

    min-height: 58px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    text-decoration: none !important;

    background: #2E86C7 !important;

    color: #fff !important;

    border-radius: 6px !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    letter-spacing: .3px !important;

    line-height: 1.2 !important;

    transition: .25s ease !important;
}


.video-request-btn:hover {

    background: #123A5C !important;

    color: #fff !important;
}


.video-close-btn {

    width: 108px !important;

    min-height: 58px !important;

    border: 1px solid #d8e3ea !important;

    background: #fff !important;

    color: #123A5C !important;

    border-radius: 6px !important;

    cursor: pointer !important;

    font-size: 13px !important;

    font-weight: 600 !important;
}


.video-close-btn:hover {

    background: #f5f9fb !important;
}


/* =========================================================
   TOP RIGHT X
========================================================= */

.product-modal-close {

    position: absolute !important;

    top: 18px !important;

    right: 18px !important;

    width: 34px !important;

    height: 34px !important;

    border: none !important;

    border-radius: 50% !important;

    background: #edf6fc !important;

    color: #123A5C !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 15px !important;

    cursor: pointer !important;

    z-index: 100 !important;
}


.product-modal-close:hover {

    background: #2E86C7 !important;

    color: #fff !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {

    .product-details-modal {

        padding: 12px !important;
    }


    .product-details-box {

        width: 100% !important;

        height: 92vh !important;

        max-height: 92vh !important;

        display: flex !important;

        flex-direction: column !important;
    }


    .video-modal-image {

        height: 230px !important;

        min-height: 230px !important;

        flex-shrink: 0 !important;
    }


    .video-modal-details {

        flex: 1 !important;

        min-height: 0 !important;
    }


    .video-modal-scroll {

        padding: 30px 22px !important;
    }


    .video-modal-scroll h2 {

        font-size: 28px !important;
    }


    .video-modal-buttons {

        flex-direction: column !important;
    }


    .video-close-btn {

        width: 100% !important;
    }
}

/* =========================================================
   PRODUCT DETAILS POPUP - FINAL FIX
   LEFT IMAGE + RIGHT HEADER + RIGHT SCROLL
   ========================================================= */

.product-details-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(7,24,38,.72) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .3s ease, visibility .3s ease !important;
    z-index: 999999 !important;
}

.product-details-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.product-details-modal .product-details-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}

.product-details-modal .product-details-box {
    position: relative !important;
    width: min(1000px, 94vw) !important;
    height: min(90vh, 760px) !important;
    max-width: 1000px !important;
    max-height: 90vh !important;
    display: block !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.35) !important;
    transform: translateY(25px) scale(.97);
    transition: transform .35s ease !important;
    z-index: 2 !important;
}

.product-details-modal.active .product-details-box {
    transform: translateY(0) scale(1) !important;
}

/* LEFT IMAGE - full popup height */
.modal-product-image {
    width: 420px !important;
    height: 570px !important;
    overflow: hidden !important;
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    background: #fff !important;
}

.modal-product-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* RIGHT HEADER */
.product-details-modal .product-modal-header {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 58% !important;
    height: 190px !important;
    margin: 0 !important;
    padding: 38px 55px 25px 40px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg,#123A5C,#1d5885) !important;
    color: #fff !important;
    z-index: 5 !important;
     grid-column: 2 !important;
    grid-row: 1 !important;
}

.product-details-modal .product-modal-header span {
    display: inline-block !important;
    color: #7FC1EA !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.product-details-modal .product-modal-header h2 {
    color: #fff !important;
    font-size: 36px !important;
    line-height: 1.15 !important;
    font-family: 'Fraunces',serif !important;
    margin: 6px 0 10px !important;
    padding: 0 !important;
}

.product-details-modal .product-modal-header p {
    color: #dce8f2 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding: 0 20px 0 0 !important;
}

/* RIGHT CONTENT - only this area scrolls */
.product-details-modal .product-modal-scroll {
    position: absolute !important;
    top: 190px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 58% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 30px 40px 40px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fff !important;
}

.product-details-modal .product-modal-scroll::-webkit-scrollbar { width: 7px !important; }
.product-details-modal .product-modal-scroll::-webkit-scrollbar-track { background: #edf4f8 !important; }
.product-details-modal .product-modal-scroll::-webkit-scrollbar-thumb { background: #2E86C7 !important; border-radius: 10px !important; }

.product-details-modal .modal-spec-grid {
    display: block !important;
    margin-bottom: 35px !important;
}

.product-details-modal .modal-spec-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid #dce8ef !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.product-details-modal .modal-product-applications ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.product-details-modal .product-modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #2E86C7 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

.product-details-modal .product-modal-close:hover {
    background: #fff !important;
    color: #123A5C !important;
    transform: rotate(90deg) !important;
}

/* TABLET / MOBILE */
@media (max-width: 991px) {
    .product-details-modal { padding: 15px !important; }
    .product-details-modal .product-details-box {
        width: 100% !important;
        max-width: 700px !important;
        height: 90vh !important;
        max-height: 90vh !important;
        overflow: hidden !important;
    }
    .product-details-modal .modal-product-image {
         height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: #fff !important;

    padding: 15px !important;
    box-sizing: border-box !important;
    }
    .product-details-modal .modal-product-image img {  width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;
}
    .product-details-modal .product-modal-header {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 30px !important;
    }
    .product-details-modal .product-modal-scroll {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(90vh - 280px - 145px) !important;
        padding: 30px !important;
    }
}

@media (max-width: 767px) {
    .product-details-modal { padding: 10px !important; }
    .product-details-modal .product-details-box {
        height: 92vh !important;
        max-height: 92vh !important;
        border-radius: 14px !important;
    }
    .product-details-modal .modal-product-image,
    .product-details-modal .modal-product-image img {
        height: 220px !important;
        min-height: 220px !important;
    }
    .product-details-modal .product-modal-header { padding: 25px 22px 22px !important; }
    .product-details-modal .product-modal-header h2 { font-size: 30px !important; }
    .product-details-modal .product-modal-header p { font-size: 13px !important; }
    .product-details-modal .product-modal-scroll {
        max-height: calc(92vh - 220px - 130px) !important;
        padding: 25px 20px 30px !important;
    }
    .product-details-modal .modal-product-applications ul { grid-template-columns: 1fr !important; }
}
/* =========================================================
   PRODUCT DETAILS MODAL - MOBILE FINAL FIX
========================================================= */

@media (max-width: 767px) {

    /* MODAL BACKGROUND */
    .product-details-modal {
        padding: 10px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    /* MODAL BOX */
    .product-details-modal .product-details-box {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 94vh !important;
        max-height: 94vh !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;

        border-radius: 14px !important;

        transform: translateY(20px) scale(.97) !important;
    }

    .product-details-modal.active .product-details-box {
        transform: translateY(0) scale(1) !important;
    }


    /* =========================================
       PRODUCT IMAGE
    ========================================= */

    .product-details-modal .modal-product-image {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;

        flex-shrink: 0 !important;

        margin: 0 !important;
        padding: 12px !important;

        background: #F5FAFD !important;

        border: none !important;
        border-radius: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }


    .product-details-modal .modal-product-image img {
        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

        display: block !important;
    }


    /* =========================================
       HEADER
    ========================================= */

    .product-details-modal .product-modal-header {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: auto !important;

        flex-shrink: 0 !important;

        padding: 22px 50px 18px 20px !important;

        box-sizing: border-box !important;
    }


    .product-details-modal .product-modal-header span {
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
    }


    .product-details-modal .product-modal-header h2 {
        font-size: 25px !important;
        line-height: 1.2 !important;

        margin: 5px 0 8px !important;

        padding: 0 !important;
    }


    .product-details-modal .product-modal-header p {
        font-size: 13px !important;
        line-height: 1.55 !important;

        padding: 0 !important;
        margin: 0 !important;
    }


    /* =========================================
       DETAILS SCROLL AREA
    ========================================= */

    .product-details-modal .product-modal-scroll {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        flex: 1 1 auto !important;
        min-height: 0 !important;

        padding: 20px !important;

        box-sizing: border-box !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #fff !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /* =========================================
       PRODUCT OVERVIEW
    ========================================= */

    .product-details-modal .modal-product-description h3,
    .product-details-modal .modal-product-specification h3,
    .product-details-modal .modal-product-applications h3 {
        font-size: 21px !important;
        line-height: 1.3 !important;

        margin-bottom: 12px !important;
    }


    .product-details-modal .modal-product-description p {
        font-size: 14px !important;
        line-height: 1.7 !important;

        margin-bottom: 25px !important;
    }


    /* =========================================
       SPECIFICATIONS
    ========================================= */

    .product-details-modal .modal-spec-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 10px !important;

        margin-bottom: 25px !important;
    }


    .product-details-modal .modal-spec-item {
        width: 100% !important;

        min-height: 50px !important;

        padding: 12px 14px !important;

        display: flex !important;

        justify-content: space-between !important;
        align-items: center !important;

        gap: 12px !important;

        box-sizing: border-box !important;
    }


    .product-details-modal .modal-spec-item span {
        font-size: 13px !important;

        flex: 1 !important;
    }


    .product-details-modal .modal-spec-item strong {
        font-size: 13px !important;

        text-align: right !important;

        max-width: 50% !important;

        word-break: break-word !important;
    }


    /* =========================================
       APPLICATIONS
    ========================================= */

    .product-details-modal .modal-product-applications ul {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 8px !important;
    }


    .product-details-modal .modal-product-applications li {
        font-size: 13px !important;

        padding: 10px 12px !important;
    }


    /* =========================================
       QUOTE BUTTON
    ========================================= */

    .product-details-modal .modal-product-footer {
        padding-top: 20px !important;
        padding-bottom: 10px !important;
    }


    .product-details-modal .modal-product-footer .btn {
        width: 100% !important;

        justify-content: center !important;

        padding: 13px 15px !important;

        font-size: 13px !important;
    }


    /* =========================================
       CLOSE BUTTON
    ========================================= */

    .product-details-modal .product-modal-close {
        top: 10px !important;
        right: 10px !important;

        width: 38px !important;
        height: 38px !important;

        font-size: 16px !important;

        z-index: 999 !important;
    }

}


/* =========================================================
   MOBILE PRODUCT MODAL - COMPLETE OVERRIDE
========================================================= */

@media (max-width: 767px) {

    /* MODAL */
    #productDetailsModal {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 10px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    /* MODAL BOX */
    #productDetailsModal .product-details-box {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: calc(100vh - 20px) !important;
        max-height: calc(100vh - 20px) !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;

        border-radius: 16px !important;

        transform: none !important;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    #productDetailsModal .modal-product-image {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        order: 1 !important;

        width: 100% !important;

        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;

        flex: 0 0 180px !important;

        margin: 0 !important;
        padding: 10px !important;

        background: #f5fafd !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        z-index: 1 !important;
    }


    #productDetailsModal .modal-product-image img {
        position: relative !important;

        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        margin: 0 !important;

        object-fit: contain !important;
        object-position: center !important;

        display: block !important;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    #productDetailsModal .product-modal-header {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        order: 2 !important;

        width: 100% !important;

        height: auto !important;
        min-height: auto !important;

        margin: 0 !important;

        padding: 20px 55px 18px 20px !important;

        box-sizing: border-box !important;

        flex: 0 0 auto !important;

        background: #123a5c !important;

        z-index: 2 !important;
    }


    #productDetailsModal .product-modal-header span {
        display: block !important;

        font-size: 10px !important;

        letter-spacing: 2px !important;

        margin-bottom: 7px !important;
    }


    #productDetailsModal .product-modal-header h2 {
        font-size: 28px !important;

        line-height: 1.15 !important;

        margin: 0 0 8px !important;

        padding: 0 !important;
    }


    #productDetailsModal .product-modal-header p {
        font-size: 13px !important;

        line-height: 1.55 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* =====================================================
       SCROLL CONTENT
    ===================================================== */

    #productDetailsModal .product-modal-scroll {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        order: 3 !important;

        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        flex: 1 1 auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 22px 18px 30px !important;

        box-sizing: border-box !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #fff !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /* =====================================================
       CLOSE BUTTON
    ===================================================== */

    #productDetailsModal .product-modal-close {
        position: absolute !important;

        top: 12px !important;
        right: 12px !important;

        width: 42px !important;
        height: 42px !important;

        z-index: 999 !important;

        border-radius: 50% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    #productDetailsModal .modal-product-description h3,
    #productDetailsModal .modal-product-specification h3,
    #productDetailsModal .modal-product-applications h3 {
        font-size: 22px !important;

        line-height: 1.25 !important;

        margin: 0 0 12px !important;
    }


    #productDetailsModal .modal-product-description p {
        font-size: 14px !important;

        line-height: 1.7 !important;

        margin-bottom: 28px !important;
    }


    /* SPECIFICATIONS */

    #productDetailsModal .modal-spec-grid {
        display: block !important;

        margin-bottom: 28px !important;
    }


    #productDetailsModal .modal-spec-item {
        display: flex !important;

        width: 100% !important;

        min-height: 48px !important;

        padding: 11px 0 !important;

        justify-content: space-between !important;

        align-items: center !important;

        gap: 10px !important;

        box-sizing: border-box !important;
    }


    #productDetailsModal .modal-spec-item span {
        font-size: 13px !important;

        flex: 1 !important;
    }


    #productDetailsModal .modal-spec-item strong {
        font-size: 13px !important;

        text-align: right !important;

        max-width: 50% !important;
    }


    /* APPLICATIONS */

    #productDetailsModal .modal-product-applications ul {
        display: block !important;

        padding: 0 !important;

        margin: 0 !important;
    }


    #productDetailsModal .modal-product-applications li {
        font-size: 13px !important;

        margin-bottom: 8px !important;

        padding: 10px 12px !important;
    }


    /* QUOTE BUTTON */

    #productDetailsModal .modal-product-footer {
        padding-top: 22px !important;

        padding-bottom: 5px !important;
    }


    #productDetailsModal .modal-product-footer .btn {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 13px 15px !important;

        font-size: 13px !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    #productDetailsModal {
        padding: 6px !important;
    }


    #productDetailsModal .product-details-box {
        height: calc(100vh - 12px) !important;

        max-height: calc(100vh - 12px) !important;
    }


    #productDetailsModal .modal-product-image {
        height: 150px !important;

        min-height: 150px !important;

        max-height: 150px !important;

        flex-basis: 150px !important;
    }


    #productDetailsModal .product-modal-header {
        padding: 18px 52px 16px 18px !important;
    }


    #productDetailsModal .product-modal-header h2 {
        font-size: 24px !important;
    }


    #productDetailsModal .product-modal-scroll {
        padding: 18px 16px 25px !important;
    }

}