/*==========================================
  GOOGLE FONT
==========================================*/

h1,h2,h3,h4,h5,h6,p{
    font-family:"Cormorant Garamond", serif;
}

body{
    font-family:"Poppins", sans-serif;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

:root{

    --primary:#000000;
    --secondary:#efefef;
    --light:#000000;
    --glass:rgba(0, 0, 0, 0.08);
    --border:rgba(0, 0, 0, 0.15);

}

body{

    font-family:'Outfit',sans-serif;
    background:#ffffff;
    color:#000000;
    overflow-x:hidden;

}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{

    width:92%;
    max-width:1400px;
    margin:auto;

}

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

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    transition:.4s;
    padding:18px 0;

}

.header.scrolled{

    background:rgba(255, 254, 254, 0.75);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 40px rgba(201, 197, 197, 0.45);

}

.header .container{

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

}

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

.logo{

    display:flex;
    align-items:center;
    gap:12px;

}

.logo img{

    width:60px;
    border-radius:50%;

}

.logo-text h2{

    color:#000000;
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;

}

.logo-text span{

    color:#000000;
    font-size:14px;
    letter-spacing:3px;
    text-transform:uppercase;

}

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

.nav-links{

    display:flex;
    align-items:center;
    gap:38px;

}

.nav-links li{

    position:relative;

}

.nav-links li a{

    color:#020202;
    font-size:18px;
    font-weight:500;
    transition:.35s;

}

.nav-links li a:hover{

    color:#121212;

}

/* .nav-links li a.active{

    color:#fff;

} */
 .nav-links li a.active{
    color:#111;
    font-weight:500;
}

.nav-links li::after{

    content:'';
    position:absolute;
    bottom:-8px;
    left:0;
    width:0%;
    height:2px;
    background:#fff;
    transition:.35s;

}

.nav-links li:hover::after{

    width:100%;

}

/*==========================================
DROPDOWN
==========================================*/

.dropdown-menu{

    position:absolute;
    top:48px;
    left:0;
    width:260px;
    background:rgba(233, 232, 232, 0.96);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:12px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.35s;

}

.dropdown:hover .dropdown-menu{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

.dropdown-menu li{

    width:100%;

}

/* .dropdown-menu li a{

    display:block;
    padding:14px 24px;
    font-size:15px;
    color:#000000;
    transition:.3s;

} */
 /* Reduce spacing between dropdown items */

.dropdown-menu{
    padding:4px 0;
}

.dropdown-menu li{
    margin:0;
    padding:0;
    line-height:1;
}

.dropdown-menu li a{
    background:black;
    display:block;

    padding:5px 18px;      /* was 8px */

    font-size:14px;

    font-weight:500;

    line-height:1.1;

    color:#ddd;

    border:none;

    transition:.3s ease;
}

.dropdown-menu li a:hover{
    background:#79bba4;
    color:#111;
    padding-left:22px;
}

.dropdown-menu li a:hover{

    background:rgba(255,255,255,.08);
    padding-left:32px;

}

.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 30px;

    background:#79bba4;
    color:#dcd8d8;

    text-decoration:none;
    font-weight:600;
    font-size:16px;

    border-radius:50px;          /* Fully rounded */

    transition:all .35s ease;

    box-shadow:0 8px 20px rgba(37,211,102,.28);
}

.whatsapp-btn i{
    font-size:20px;
}

.whatsapp-btn:hover{
    background:#79bba4;
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(37,211,102,.35);
}
/*==========================================
CALL BUTTON
==========================================*/

.call-btn{

    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    border-radius:50px;
    background:#fff;
    color:#000;
    font-weight:600;
    transition:.35s;

}

.call-btn:hover{

    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(255,255,255,.18);

}


/*==========================================
HAMBURGER
==========================================*/

.menu-toggle{

    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:6px;

}

.menu-toggle span{

    width:30px;
    height:3px;
    background:#fff;
    border-radius:10px;
    transition:.3s;

}

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

@media(max-width:992px){

.navbar{

    position:fixed;
    top:90px;
    left:-100%;
    width:280px;
    height:calc(100vh - 90px);
    background:#111;
    transition:.4s;
    padding:40px;

}

.navbar.active{

    left:0;

}

.nav-links{

    flex-direction:column;
    align-items:flex-start;
    gap:28px;

}

.dropdown-menu{

    position:relative;
    width:100%;
    top:15px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    background:#ede9e9;

}

.dropdown:hover .dropdown-menu{

    display:block;

}

.call-btn{

    display:none;

}

.menu-toggle{

    display:flex;

}

.logo img{

    width:52px;

}

.logo-text h2{

    font-size:24px;

}

}



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

@media (max-width:992px){

header{
    height:80px;
}

.menu-toggle{
    display:flex;
    z-index:1002;
}

.menu-toggle span{
    width:28px;
    height:3px;
    border-radius:50px;
    background:#070707;
    transition:.35s;
}

/* Hamburger Animation */

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translateY(12px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translateY(-12px);
}

/* Navigation */

.navbar{

    position:fixed;

    top:0;

    right:-100%;

    width:85%;

    max-width:360px;

    height:100vh;

    background:#ffffff;

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    padding:100px 35px 40px;

    transition:.45s ease;

    overflow-y:auto;

    z-index:1001;
}

.navbar.active{

    right:0;
}

/* Links */

.nav-links{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:8px;
}

.nav-links li{

    width:100%;
}

.nav-links li a{

    display:block;

    width:100%;

    padding:15px 0;

    color:#040404;

    font-size:18px;

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

/* Dropdown */

/* .dropdown-menu{

    position:static;

    width:100%;

    background:#1d1d1d;

    border:none;

    border-radius:8px;

    display:none;

    opacity:1;

    visibility:visible;

    transform:none;

    padding:3px 0;

    margin-top:3px;

    box-shadow:none;
}

.dropdown.active .dropdown-menu{

    display:block;
}

.dropdown-menu li a{

    padding:12px 18px;

    font-size:15px;

    color:#ddd;

    border:none;
}

.dropdown-menu li a:hover{

    background:#b3b1b1;

    padding-left:28px;
} */

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

.dropdown-menu{

    position:static;
    width:100%;

    background:#1d1d1d;

    border:none;
    border-radius:8px;

    display:none;

    opacity:1;
    visibility:visible;
    transform:none;

    padding:4px 0;
    margin-top:4px;

    box-shadow:none;

}

/* Show Dropdown */

.dropdown.active .dropdown-menu{

    display:block;

}

/* Remove Extra Gap */

.dropdown-menu li{

    margin:0;
    padding:0;

}

/* Dropdown Links */

.dropdown-menu li a{

    display:block;

    padding:8px 18px;

    font-size:15px;

    font-weight:500;

    line-height:1.2;

    color:#ddd;

    border:none;

    transition:all .3s ease;

}

/* Hover Effect */

.dropdown-menu li a:hover{

    background:#79bba4;

    color:#111;

    padding-left:24px;

}

/* Remove underline */

.nav-links li::after{

    display:none;

}

/* Hide desktop call button */

.call-btn{

    display:none;

}

/* Hide underline */

.nav-links li::after{

    display:none;
}

/* Hide call button */

.call-btn{

    display:none;
}

/* Logo */

.logo img{

    width:55px;
}

.logo-text h2{

    font-size:22px;
}

.logo-text span{

    font-size:12px;
}

/* Overlay */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(231, 228, 228, 0.6);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;
}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;
}

}





.hero{
    height:100vh;
}

.heroSwiper,
.swiper-slide{
    width:100%;
    height:100%;
}

.swiper-slide{
    position:relative;
}

.swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30));
}

.hero-content{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    color:#fff;

    max-width:650px;

    z-index:10;
}

.hero-content span{

    display:inline-block;

    background:#79bba4;

    color:#111;

    padding:10px 20px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:20px;
}

.hero-content h1{

    font-size:60px;

    line-height:1.2;

    margin-bottom:25px;
}

.hero-content h1 span{

    background:none;

    color:#000000;

    padding:0;
}

.hero-content p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;
    color:rgb(255, 255, 255);
}

.hero-btns{

    display:flex;

    gap:20px;
}

.btn{

    background: #157A5C;

    color:#111;

    padding:15px 35px;

    border-radius:8px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;
}

.btn:hover{

    transform:translateY(-4px);
}

.outline{

    background:transparent;

    color:#fff;

    border:2px solid #fff;
}

.outline:hover{

    background:#fff;

    color:#111;
}

.whatsapp{

    background:#9fa7a2;

    color:#fff;
}

.swiper-pagination-bullet{

    width:12px;

    height:12px;
}

.swiper-pagination-bullet-active{

    background:#79bba4;

    width:30px;

    border-radius:20px;
}

@media(max-width:768px){

.hero-content{

left:5%;

right:5%;
}

.hero-content h1{

font-size:34px;
}

.hero-content p{

font-size:16px;
}

.hero-btns{

flex-direction:column;
}

.btn{

text-align:center;
}

}



/* ==============================
   Floating Contact Buttons
============================== */

.floating-contact{
    position:fixed;
    right:22px;
bottom: 60px !important;
    display:flex;
    flex-direction:column;
    gap:12px;

    z-index:9999;
}


.float-btn{

    width:58px;
    height:58px;

    border-radius:50%;

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

    text-decoration:none;

    font-size:24px;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    transition:.35s ease;

}

/* WhatsApp */

.whatsapp-btn{

    background:#25D366 !important;
    color:rgb(255, 255, 255) !important;

    animation:whatsappBlink 2.2s infinite;

}

/* Call */

.call-btn{

    background:#b53f5c;
    color:#fff;

}

/* Hover */

.float-btn:hover{

    
    transform:translateY(-5px) scale(1.08);

}

/* Smooth WhatsApp Blink */

@keyframes whatsappBlink{

    0%{

        transform:scale(1);
        box-shadow:0 0 0 0 rgba(55, 119, 68, 0.45);

    }

    35%{

        transform:scale(1.08);
        box-shadow:0 0 0 12px rgba(37,211,102,0);

    }

    70%{

        transform:scale(1);

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

    }

    100%{

        transform:scale(1);

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

    }

}

/* Mobile */

@media(max-width:768px){

    .floating-contact{

        right:16px;
        bottom:22px;

    }

    .float-btn{

        width:54px;
        height:54px;

        font-size:22px;

    }

}

.pigeon-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #ff6745;
    color: #ffffff;

    padding: 12px 20px;
    border-radius: 9px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    transition: 0.3s ease;
}

.pigeon-call-btn:hover {
    background: #f4512f;
    color: #ffffff;
}

.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 26px;

    background:#f5f6f6;      /* Light teal */
    color:#111;

    text-decoration:none;
    font-size:15px;
    font-weight:700;

    border-radius:50px;

    transition:all .35s ease;
}

.whatsap-btn i{
    font-size:18px;
}

.whatsap-btn:hover{
    background:#d4d7d7;
    transform:translateY(-2px);
}

/* ==========================
   Mobile View - WhatsApp Button
========================== */

@media (max-width:768px){

    .whatsap-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;

        height:36px;
        padding:0 16px;
            width:200px;


        gap:6px;

        font-size:15px;
        font-weight:600;

        border-radius:999px;
    }

    .whatsap-btn i{
        font-size:14px;
    }

}

.cal-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    height:42px;
    padding:0 24px;


    background:#79bba4;
    color:black;

    border-radius:999px;

    font-size:15px;
    font-weight:700;
    text-decoration:none;

    transition:.3s ease;
}

.cal-btn i{
    font-size:16px;
}

.cal-btn:hover{
    background:#507975;
    transform:translateY(-2px);
}


/* ==========================
   Mobile View - Call Button
========================== */

@media (max-width:768px){

    .cal-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;

        height:36px;
        width:200px;
        padding:0 16px;

        gap:6px;

        font-size:15px;
        font-weight:600;

        border-radius:999px;
    }

    .cal-btn i{
        font-size:14px;
    }

}


.whatsap-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 26px;

    background:#f5f6f6;      /* Light teal */
    color:#111;

    text-decoration:none;
    font-size:15px;
    font-weight:700;

    border-radius:50px;

    transition:all .35s ease;
}

.whatsap-btn i{
    font-size:18px;
}

.whatsap-btn:hover{
    background:#d4d7d7;
    transform:translateY(-2px);
}













/*==========================
ABOUT prasad
==========================*/

.about-prasad{

    padding:120px 8%;
    background:#fff;
    overflow:hidden;
}

.about-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
}

.about-tag{

    color:#A63D66;
    letter-spacing:5px;
    font-weight:700;
    font-size:14px;
    display:block;
    margin-bottom:20px;
}

.about-content h2{

    font-size:58px;
    line-height:1.15;
    margin-bottom:30px;
    font-family:"Playfair Display",serif;
}

.about-content h2 span{

    color:#A63D66;
}

.about-content p{

    font-size:18px;
    line-height:1.9;
    color:#000000;
    margin-bottom:22px;
}

.about-content strong{

    color:#222;
}

.about-features{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:45px;
}

.feature{

    background:#f7fbfa;
    padding:16px 20px;
    border-left:5px solid #79bba4;
    border-radius:15px;
    transition:.45s;
    font-weight:600;
}

.feature:hover{

    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.about-image{

    position:relative;
    perspective:1200px;
}

.about-image img{

    width:100%;
    border-radius:35px;
    transition:.6s;
    box-shadow:0 30px 80px rgba(0,0,0,.18);
}

.about-image:hover img{

    transform:
    rotateY(-8deg)
    rotateX(3deg)
    scale(1.04);
}

.experience-card{

    position:absolute;

    bottom:35px;
    left:-35px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(18px);

    border-radius:25px;

    padding:25px 35px;

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

.experience-card h3{

    font-size:42px;
    color:#79bba4;
}

.experience-card p{

    color:#000000;
    margin-top:8px;
}





/*=========================================
        ABOUT prasad - MOBILE
=========================================*/

@media (max-width:768px){

    .about-prasad{

        padding:70px 20px;

    }

    .about-container{

        grid-template-columns:1fr;
        gap:40px;

    }

    /* Content */

    .about-tag{

        font-size:12px;
        letter-spacing:2px;
        margin-bottom:15px;

    }

    .about-content h2{

        font-size:36px;
        line-height:1.25;
        margin-bottom:20px;

    }

    .about-content p{

        font-size:15px;
        line-height:1.8;
        margin-bottom:18px;

    }

    /* Features */

    .about-features{

        grid-template-columns:1fr;
        gap:12px;
        margin-top:25px;

    }

    .feature{

        padding:14px 16px;
        font-size:14px;
        border-radius:12px;

    }

    /* Image */

    .about-image{

        order:-1;      /* Image appears first on mobile */
    }

    .about-image img{

        width:100%;
        height:260px;          /* Smaller image */
        object-fit:cover;
        border-radius:20px;

    }

    /* Floating Card */

    .experience-card{

        left:15px;
        bottom:15px;

        padding:14px 18px;

        border-radius:16px;

    }

    .experience-card h3{

        font-size:24px;

    }

    .experience-card p{

        font-size:13px;
        margin-top:4px;

    }

}










/* ===========================
   ABOUT STATS
=========================== */

.about-stats {
    padding: 80px 8%;
    background:
radial-gradient(circle at top left, rgba(18,139,115,.12) 0%, transparent 35%),
radial-gradient(circle at bottom right, rgba(15,107,85,.10) 0%, transparent 40%),
#fafafa;
}

.about-stats .container {
    max-width: 1320px;
    margin: auto;

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

.stat-card {
    background: #dcdfdb;;
    border-radius: 30px;
    padding: 45px 30px;
    text-align: center;

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

    transition: all 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(21, 122, 92, 0.15);
}

.stat-card h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 64px;
    font-weight: 600;
    color: #157A5C;
    margin-bottom: 10px;
    line-height: 1;
}

.stat-card p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    line-height: 1.7;
}

/* ===========================
   Tablet
=========================== */

@media (max-width: 992px) {

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

}

/* ===========================
   Mobile
=========================== */

@media (max-width: 768px) {

    .about-stats {
        padding: 60px 20px;
    }

    .about-stats .container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stat-card {
        padding: 35px 20px;
    }

    .stat-card h2 {
        font-size: 50px;
    }

    .stat-card p {
        font-size: 16px;
    }

}









/*=========================================
        GOOGLE FONTS
=========================================*/

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

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

:root{

    --primary:#157A5C;
    --primary-light:#1F9D72;
    --primary-dark:#0F5E48;

    --white:#ffffff;

    --heading:#1F1F1F;

    --paragraph:#0b0b0b;

    --border:#ECECEC;

    --light:#F7FBF9;

    --shadow:0 15px 45px rgba(0,0,0,.08);

}

/*=========================================
        SERVICES SECTION
=========================================*/

.services{

    padding:120px 8%;

    background:#ffffff;

    overflow:hidden;

}

.services .container{

    max-width:1400px;

    margin:auto;

}

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

.section-title{

    text-align:center;

    margin-bottom:80px;

}

.section-title .subtitle{

    display:inline-block;

    padding:12px 30px;

    background:#EEF7F3;

    color:var(--primary);

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:.8px;

    margin-bottom:25px;

}

.section-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:82px;

    font-weight:600;

    color:var(--heading);

    line-height:1;

    margin-bottom:25px;

}

.section-title h2 span{

    color:var(--primary);

}

.section-title p{

    max-width:760px;

    margin:auto;

    font-family:'Poppins',sans-serif;

    font-size:18px;

    line-height:1.9;

    color:var(--paragraph);

}

/*=========================================
        SERVICES GRID
=========================================*/

.services-grid{

    display:grid;

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

    gap:35px;

}

/*=========================================
        SERVICE CARD
=========================================*/

.service-card{

    max-width:320px;

    margin:auto;

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.45s ease;

    position:relative;

}

.service-card:hover{

    transform:translateY(-12px);

}

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

.service-image{

    position:relative;

    overflow:hidden;

    height:280px;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.service-card:hover img{

    transform:scale(1.08);

}

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

.service-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
                rgba(0,0,0,.25),
                rgba(0,0,0,0));

    z-index:1;

}

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

.service-badge{

    position:absolute;

    top:20px;

    left:20px;

    z-index:2;

    background:#1f1f1f;

    color:#fff;

    padding:10px 18px;

    border-radius:50px;

    font-size:13px;

    font-family:'Poppins',sans-serif;

    font-weight:600;

}


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

.service-content{

    padding:32px 30px 30px;

    position:relative;

}

.service-tag{

    display:inline-block;

    padding:8px 18px;

    background:#EEF7F3;

    color:var(--primary);

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.service-content h3{

    font-family:'Cormorant Garamond',serif;

    font-size:38px;

    font-weight:600;

    color:var(--heading);

    line-height:1.15;

    margin-bottom:18px;

    transition:.35s ease;

}

.service-card:hover .service-content h3{

    color:var(--primary);

}

.service-content p{

    font-family:'Poppins',sans-serif;

    font-size:16px;

    line-height:1.9;

    color:var(--paragraph);

    margin-bottom:28px;

}
.service-badge:hover {
    color: #000000 !important;
}
/*=========================================
        BUTTON
=========================================*/

.service-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;

    color: #ffffff !important;
    background: #c51f52;

    padding: 7px 14px;
    border-radius: 50px;

    transition: .3s ease;
}

.service-btn:hover {
    background: #b01847 !important;
    color: #ffffff !important;
}

.service-btn:hover i {
    color: #ffffff !important;
}

.service-card:hover .service-btn{

    color:var(--primary-dark);

}

.service-card:hover .service-btn::after{

    transform:translateX(8px);

}

/*=========================================
        HOVER BORDER
=========================================*/

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,
                var(--primary),
                var(--primary-light));

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s ease;

}

.service-card:hover::before{

    transform:scaleX(1);

}

/*=========================================
        CARD HOVER
=========================================*/

.service-card:hover{

    box-shadow:0 25px 60px rgba(21,122,92,.15);

}

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

.service-card:hover .service-image::before{

    background:linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,.05)
    );

}

/*=========================================
        BADGE HOVER
=========================================*/

.service-card:hover .service-badge{

    background:var(--primary);

}

/*=========================================
        TAG HOVER
=========================================*/

.service-card:hover .service-tag{

    background:var(--primary);

    color:#fff;

}

/*=========================================
        SMOOTH TRANSITIONS
=========================================*/

.service-card,
.service-image img,
.service-content h3,
.service-tag,
.service-btn,
.service-badge{

    transition:all .4s ease;

}

/*=========================================
        OPTIONAL FLOAT EFFECT
=========================================*/

.service-card{

    animation:floatCard 6s ease-in-out infinite;

}

.service-card:nth-child(even){

    animation-delay:1.5s;

}

.service-card:nth-child(3n){

    animation-delay:3s;

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Stop floating while hovering */

.service-card:hover{

    animation:none;

    transform:translateY(-12px);

}

/*=========================================
        LARGE LAPTOPS
=========================================*/

@media (max-width:1400px){

    .services-grid{

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

        gap:28px;

    }

    .section-title h2{

        font-size:72px;

    }

    .service-content h3{

        font-size:34px;

    }

    .service-image{

        height:250px;

    }

}

/*=========================================
        LAPTOPS
=========================================*/

@media (max-width:1200px){

    .services{

        padding:100px 5%;

    }

    .services-grid{

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

        gap:30px;

    }

    .section-title{

        margin-bottom:70px;

    }

    .section-title h2{

        font-size:65px;

    }

    .service-image{

        height:240px;

    }

    .service-content{

        padding:28px;

    }

    .service-content h3{

        font-size:32px;

    }

}

/*=========================================
        TABLETS
=========================================*/

@media (max-width:992px){

    .services{

        padding:90px 5%;

    }

    .services-grid{

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

        gap:25px;

    }

    .section-title{

        margin-bottom:60px;

    }

    .section-title h2{

        font-size:55px;

    }

    .section-title p{

        font-size:17px;

    }

    .service-image{

        height:220px;

    }

    .service-content{

        padding:25px;

    }

    .service-content h3{

        font-size:30px;

    }

    .service-content p{

        font-size:15px;

    }

}

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

@media (max-width:768px){

    .services{

        padding:70px 20px;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title .subtitle{

        font-size:13px;

        padding:10px 22px;

    }

    .section-title h2{

        font-size:46px;

        line-height:1.05;

    }

    .section-title p{

        font-size:16px;

        line-height:1.8;

    }

    .service-image{

        height:240px;

    }

    .service-content{

        padding:25px;

    }

    .service-tag{

        font-size:12px;

        padding:7px 15px;

    }

    .service-content h3{

        font-size:32px;

    }

    .service-content p{

        font-size:15px;

        line-height:1.8;

    }

    .service-btn{

        font-size:15px;

    }

    .service-badge{

        font-size:12px;

        padding:8px 16px;

    }

}

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

@media (max-width:480px){

    .services{

        padding:60px 15px;

    }

    .section-title .subtitle{

        font-size:12px;

        padding:8px 18px;

    }

    .section-title h2{

        font-size:38px;

    }

    .section-title p{

        font-size:15px;

    }

    .service-card{

        border-radius:22px;

    }

    .service-image{

        height:210px;

    }

    .service-content{

        padding:22px;

    }

    .service-content h3{

        font-size:28px;

    }

    .service-content p{

        font-size:14px;

        margin-bottom:20px;
    }
    .service-btn{
        font-size:14px;
    }
    .service-badge{

        top:15px;

        left:15px;

        padding:7px 14px;

        font-size:11px;

    }

}

/*=========================================
        EXTRA SMALL DEVICES
=========================================*/

@media (max-width:360px){

    .section-title h2{

        font-size:34px;

    }

    .service-content h3{

        font-size:25px;

    }

    .service-image{

        height:190px;

    }

}








/*=========================================
            GOOGLE FONTS
=========================================*/

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

/*=========================================
            GALLERY SECTION
=========================================*/

.gallery-section{

    padding:120px 8%;

    background:#e0e7e9;

    overflow:hidden;

}

.gallery-section .container{

    max-width:1400px;

    margin:auto;

}

/*=========================================
            HEADING
=========================================*/

.gallery-heading{

    text-align:center;

    margin-bottom:70px;

}

.gallery-subtitle{

    display:inline-block;

    padding:12px 30px;

    background:#EEF7F3;

    color:#cd0505;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:25px;

}

.gallery-heading h2{

    font-family:'Cormorant Garamond',serif;

    font-size:82px;

    font-weight:600;

    color:#1F1F1F;

    line-height:1.1;

    margin-bottom:25px;

}

.gallery-heading h2 span{

    color:#cd0505;

}

.gallery-heading p{

    max-width:760px;

    margin:auto;

    font-family:'Poppins',sans-serif;

    font-size:18px;

    line-height:1.9;

    color:#070707;

}

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

.gallery-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:60px;

    margin-bottom:70px;

}

.filter-btn{

    border:none;

    outline:none;

    cursor:pointer;

    padding:14px 28px;

    border-radius:50px;

    background:#F6F6F6;

    color:#222;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:500;

    transition:.4s ease;

}

.filter-btn:hover{

    background:#157A5C;

    color:#fff;

}

.filter-btn.active{

    background:#157A5C;

    color:#fff;

    box-shadow:0 10px 25px rgba(21,122,92,.25);

}

/*=========================================
            GALLERY GRID
=========================================*/

.gallery-grid{

    display:grid;

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

    grid-auto-rows:120px;

    gap:25px;

}

/*=========================================
            GALLERY ITEMS
=========================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

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

    transition:.45s ease;

}

.gallery-item:hover{

    transform:translateY(-10px);

}

/*=========================================
            ZIG-ZAG SIZES
=========================================*/

.gallery-item.large{

    grid-column:span 6;

    grid-row:span 4;

}

.gallery-item.medium{

    grid-column:span 3;

    grid-row:span 4;

}

.gallery-item.small{

    grid-column:span 3;

    grid-row:span 2;

}

/*=========================================
        PREMIUM ROUNDED CORNERS
=========================================*/

.gallery-item{

    border:1px solid #F3F3F3;

}


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

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .7s ease,
               filter .5s ease;

}

.gallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(.75);

}

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

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(
                to top,
                rgba(0,0,0,.85) 5%,
                rgba(0,0,0,.45) 45%,
                rgba(0,0,0,0) 100%);

    opacity:0;

    transition:.45s ease;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

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

.gallery-overlay span{

    display:inline-block;

    width:max-content;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    color:#ffffff;

    font-family:'Poppins',sans-serif;

    font-size:5px;

    font-weight:500;

    margin-bottom:18px;

    transform:translateY(25px);

    opacity:0;

    transition:.45s ease;

}

.gallery-item:hover .gallery-overlay span{

    transform:translateY(0);

    opacity:1;

}

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

.gallery-overlay h3{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    font-weight:600;

    line-height:1.1;

    color:#ffffff;

    margin-bottom:20px;

    transform:translateY(35px);

    opacity:0;

    transition:.5s ease;

}

.gallery-item:hover .gallery-overlay h3{

    transform:translateY(0);

    opacity:1;

}

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

.gallery-overlay a{

    width:max-content;

    text-decoration:none;

    color:#ffffff;

    background:#cd0505;

    padding:14px 28px;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    transition:.35s ease;

    transform:translateY(40px);

    opacity:0;

}

.gallery-item:hover .gallery-overlay a{

    transform:translateY(0);

    opacity:1;

}

.gallery-overlay a:hover{

    background:#0F5E48;

    padding-right:38px;

}

/*=========================================
        HOVER SHADOW
=========================================*/

.gallery-item:hover{

    box-shadow:0 30px 70px rgba(21,122,92,.18);

}

/*=========================================
        TOP BORDER EFFECT
=========================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #157A5C,
        #1F9D72);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s ease;

    z-index:5;

}

.gallery-item:hover::before{

    transform:scaleX(1);

}

/*=========================================
        GLOW EFFECT
=========================================*/

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle,
               rgba(21,122,92,.20),
               transparent 70%);

    opacity:0;

    transition:.45s ease;

    pointer-events:none;

}

.gallery-item:hover::after{

    opacity:1;

}

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

.gallery-item{

    overflow:hidden;

    border:1px solid rgba(21,122,92,.08);

}

/*=========================================
        TRANSITIONS
=========================================*/

.gallery-item,
.gallery-item img,
.gallery-overlay,
.gallery-overlay span,
.gallery-overlay h3,
.gallery-overlay a{

    transition:all .45s ease;

}


#installation-gallery-title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

#installation-gallery-title::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 7px;
    background: #b50a0a;
    border-radius: 10px;

    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
/*=========================================
        LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

    .gallery-section{

        padding:110px 6%;

    }

    .gallery-heading h2{

        font-size:72px;

    }

}

/*=========================================
        LAPTOP
=========================================*/

@media (max-width:1200px){

    .gallery-grid{

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

        grid-auto-rows:110px;

    }

    .gallery-item.large{

        grid-column:span 4;

        grid-row:span 4;

    }

    .gallery-item.medium{

        grid-column:span 4;

        grid-row:span 3;

    }

    .gallery-item.small{

        grid-column:span 4;

        grid-row:span 2;

    }

    .gallery-heading h2{

        font-size:64px;

    }

}

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

@media (max-width:992px){

    .gallery-section{

        padding:90px 5%;

    }

    .gallery-heading{

        margin-bottom:55px;

    }

    .gallery-heading h2{

        font-size:54px;

    }

    .gallery-heading p{

        font-size:17px;

    }

    .gallery-filter{

        gap:12px;

        margin-bottom:50px;

    }

    .filter-btn{

        padding:12px 24px;

        font-size:14px;

    }

    .gallery-grid{

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

        grid-auto-rows:250px;

        gap:20px;

    }

    .gallery-item.large,
    .gallery-item.medium,
    .gallery-item.small{

        grid-column:span 1;

        grid-row:span 1;

    }

    .gallery-overlay{

        padding:28px;

    }

    .gallery-overlay h3{

        font-size:34px;

    }

}

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

@media (max-width:768px){

    .gallery-section{

        padding:70px 20px;

    }

    .gallery-heading{

        margin-bottom:45px;

    }

    .gallery-subtitle{

        padding:10px 22px;

        font-size:13px;

    }

    .gallery-heading h2{

        font-size:46px;

    }

    .gallery-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .gallery-filter{

        gap:10px;

        margin-top:40px;

        margin-bottom:40px;

    }

    .filter-btn{

        padding:10px 20px;

        font-size:13px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:300px;

        gap:20px;

    }

    .gallery-item{

        border-radius:22px;

    }

    .gallery-overlay{

        padding:24px;

    }

    .gallery-overlay span{

        font-size:12px;

    }

    .gallery-overlay h3{

        font-size:30px;

        margin-bottom:15px;

    }

    .gallery-overlay a{

        padding:12px 24px;

        font-size:14px;

    }

}

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

@media (max-width:480px){

    .gallery-section{

        padding:60px 15px;

    }

    .gallery-heading h2{

        font-size:38px;

    }

    .gallery-heading p{

        font-size:15px;

    }

    .gallery-grid{

        grid-auto-rows:250px;

    }

    .gallery-overlay{

        padding:20px;

    }

    .gallery-overlay span{

        padding:7px 15px;

        font-size:11px;

    }

    .gallery-overlay h3{

        font-size:26px;

    }

    .gallery-overlay a{

        padding:10px 20px;

        font-size:13px;

    }

    .filter-btn{

        padding:9px 16px;

        font-size:12px;

    }

}

/*=========================================
        EXTRA SMALL DEVICES
=========================================*/

@media (max-width:360px){

    .gallery-heading h2{

        font-size:34px;

    }

    .gallery-grid{

        grid-auto-rows:220px;

    }

    .gallery-overlay h3{

        font-size:22px;

    }

    .gallery-overlay{

        padding:18px;

    }

}





/*=========================================
        GOOGLE FONTS
=========================================*/

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

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

.faq-section{

    padding:120px 8%;

    background:#ffffff;

    overflow:hidden;

}

.faq-section .container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

}

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

.faq-left{

    position:relative;

}

/*=========================================
        SUBTITLE
=========================================*/

.faq-subtitle{

    display:inline-block;

    padding:12px 28px;

    background:#EEF7F3;

    color:#cd0505;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:.8px;

    margin-bottom:25px;

}

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

.faq-left h2{

    font-family:'Cormorant Garamond',serif;

    font-size:78px;

    line-height:1.05;

    color:#131313;

    font-weight:600;

    margin-bottom:25px;

}

.faq-left h2 span{

    color:#cd0505;

}

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

.faq-description{

    font-family:'Poppins',sans-serif;

    color:#080808;

    font-size:17px;

    line-height:1.9;

    max-width:650px;

    margin-bottom:45px;

}

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

.faq-item{

    background:#ffffff;

    border:1px solid #EEEEEE;

    border-radius:22px;

    margin-bottom:18px;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.faq-item:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 45px rgba(21,122,92,.10);

}

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

.faq-item.active{

    border-color:#157A5C;

}

/*=========================================
        QUESTION
=========================================*/

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 30px;

    cursor:pointer;

}

.faq-question h3{

    font-family:'Poppins',sans-serif;

    font-size:18px;

    color:#222222;

    font-weight:600;

    transition:.35s ease;

}

.faq-item:hover .faq-question h3{

    color:#157A5C;

}

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

.faq-icon{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#EEF7F3;

    color:#157A5C;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:600;

    transition:.35s ease;

}

.faq-item.active .faq-icon{

    background:#157A5C;

    color:#ffffff;

}





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

.faq-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:700px;

}

/*=========================================
        DECORATIVE CIRCLE
=========================================*/

.faq-circle{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:linear-gradient(135deg,
                #EEF7F3,
                #D9F3E8);

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:1;

}

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

.faq-image{

    position:relative;

    width:460px;

    height:600px;

    border-radius:180px 30px 180px 30px;

    overflow:hidden;

    z-index:3;

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

    transition:.5s ease;

}

/*=========================================
        ROTATED FRAME
=========================================*/

.faq-image::before{

    content:"";

    position:absolute;

    inset:-18px;

    border:3px solid #7a3715;

    border-radius:180px 30px 180px 30px;

    transform:rotate(-6deg);

    z-index:-1;

}

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

.faq-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.faq-image:hover img{

    transform:scale(1.08);

}

.faq-image:hover{

    transform:translateY(-10px);

}

/*=========================================
        EXPERIENCE CARD
=========================================*/

.experience-card{

    position:absolute;

    left:-30px;

    bottom:70px;

    display:flex;

    align-items:center;

    gap:18px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(15px);

    padding:20px 28px;

    border-radius:22px;

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

    z-index:5;

    transition:.4s ease;

}

.experience-card:hover{

    transform:translateY(-8px);

}

/*=========================================
        EXPERIENCE ICON
=========================================*/

.experience-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#cd0505;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    flex-shrink:0;

}

/*=========================================
        EXPERIENCE TEXT
=========================================*/

.experience-content h3{

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    color:#157A5C;

    line-height:1;

    margin-bottom:5px;

}

.experience-content p{

    font-family:'Poppins',sans-serif;

    color:#666666;

    font-size:15px;

    font-weight:500;

}

/*=========================================
        QUALITY BADGE
=========================================*/

.quality-badge{

    position:absolute;

    right:-20px;

    top:90px;

    display:flex;

    align-items:center;

    gap:12px;

    background:#157A5C;

    color:#ffffff;

    padding:16px 24px;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    box-shadow:0 18px 45px rgba(21,122,92,.28);

    z-index:5;

    transition:.4s ease;

}

.quality-badge:hover{

    transform:translateY(-6px);

}

.quality-badge i{

    font-size:22px;

}

/*=========================================
        DECORATIVE DOTS
=========================================*/

.faq-right::before{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    background-image:radial-gradient(#157A5C 2px, transparent 2px);

    background-size:18px 18px;

    left:-40px;

    top:40px;

    opacity:.18;

}

.faq-right::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    background:rgba(21,122,92,.08);

    bottom:-20px;

    right:-30px;

    z-index:0;

}


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

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease,
               padding .45s ease;

    padding:0 30px;

}

.faq-answer p{

    font-family:'Poppins',sans-serif;

    color:#020202;

    font-size:16px;

    line-height:1.9;

    padding-bottom:28px;

}

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

.faq-item.active .faq-answer{

    max-height:220px;

    padding:0 30px;

}

.faq-item.active .faq-question{

    border-bottom:1px solid #EEEEEE;

}

.faq-item.active .faq-question h3{

    color:#157A5C;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

}

/*=========================================
        SMOOTH TRANSITIONS
=========================================*/

.faq-item,
.faq-question,
.faq-answer,
.faq-icon,
.faq-image,
.experience-card,
.quality-badge{

    transition:all .4s ease;

}

/*=========================================
        LARGE LAPTOP
=========================================*/

@media(max-width:1200px){

    .faq-section{

        padding:100px 6%;

    }

    .faq-section .container{

        gap:60px;

    }

    .faq-left h2{

        font-size:62px;

    }

    .faq-image{

        width:400px;

        height:540px;

    }

}

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

@media(max-width:992px){

    .faq-section{

        padding:90px 5%;

    }

    .faq-section .container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .faq-left{

        order:2;

    }

    .faq-right{

        order:1;

        min-height:auto;

    }

    .faq-left h2{

        font-size:54px;

    }

    .faq-description{

        font-size:16px;

    }

    .faq-image{

        width:380px;

        height:500px;

    }

    .experience-card{

        left:10px;

        bottom:20px;

    }

    .quality-badge{

        right:10px;

        top:20px;

    }

}

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

@media(max-width:768px){

    .faq-section{

        padding:70px 20px;

    }

    .faq-subtitle{

        padding:10px 22px;

        font-size:13px;

    }

    .faq-left h2{

        font-size:44px;

    }

    .faq-description{

        font-size:15px;

        margin-bottom:35px;

    }

    .faq-question{

        padding:22px;

    }

    .faq-question h3{

        font-size:16px;

        padding-right:15px;

    }

    .faq-icon{

        width:40px;

        height:40px;

        font-size:22px;

    }

    .faq-answer{

        padding:0 22px;

    }

    .faq-item.active .faq-answer{

        padding:0 22px;

    }

    .faq-answer p{

        font-size:15px;

    }

    .faq-image{

        width:300px;

        height:420px;

        border-radius:120px 25px 120px 25px;

    }

    .faq-image::before{

        border-radius:120px 25px 120px 25px;

    }

    .experience-card{

        padding:15px 20px;

        gap:12px;

        left:0;

        bottom:-20px;

    }

    .experience-icon{

        width:55px;

        height:55px;

        font-size:24px;

    }

    .experience-content h3{

        font-size:34px;

    }

    .experience-content p{

        font-size:13px;

    }

    .quality-badge{

        padding:12px 18px;

        font-size:13px;

    }

}

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

@media(max-width:480px){

    .faq-left h2{

        font-size:36px;

    }

    .faq-image{

        width:260px;

        height:360px;

    }

    .faq-circle{

        width:300px;

        height:300px;

    }

    .experience-card{

        width:210px;

    }

    .experience-content h3{

        font-size:30px;

    }

    .quality-badge{

        right:0;

        top:-10px;

    }

}

/*=========================================
        EXTRA SMALL
=========================================*/

@media(max-width:360px){

    .faq-left h2{

        font-size:32px;

    }

    .faq-image{

        width:230px;

        height:320px;

    }

    .experience-card{

        width:190px;

        padding:12px 15px;

    }

    .experience-content h3{

        font-size:26px;

    }

}


/*=========================================
        GOOGLE FONTS
=========================================*/

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

/*=========================================
        COVERAGE SECTION
=========================================*/

.coverage-section{

    padding:120px 8%;

    background:#ffffff;

    overflow:hidden;

}

.coverage-section .container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

}

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

.coverage-left{

    position:relative;

}

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

.coverage-subtitle{

    display:inline-block;

    padding:12px 30px;

    background:#EEF7F3;

    color:#cd0505;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:25px;

}

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

.coverage-left h2{

    font-family:'Cormorant Garamond',serif;

    font-size:78px;

    line-height:1.05;

    color:#222222;

    font-weight:600;

    margin-bottom:25px;

}

.coverage-left h2 span{

    color:#cd0505;

}

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

.coverage-description{

    font-family:'Poppins',sans-serif;

    font-size:17px;

    color:#000000;

    line-height:1.9;

    margin-bottom:45px;

    max-width:650px;

}

/*=========================================
        FEATURES
=========================================*/

.coverage-features{

    display:grid;

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

    gap:22px;

    margin-bottom:45px;

}

.feature-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    background:#ffffff;

    border:1px solid #EEEEEE;

    border-radius:22px;

    transition:.4s ease;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.feature-box:hover{

    transform:translateY(-8px);

    border-color:#157A5C;

    box-shadow:0 20px 45px rgba(21,122,92,.15);

}

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

.feature-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#157A5C;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    flex-shrink:0;

    transition:.35s ease;

}

.feature-box:hover .feature-icon{

    transform:rotate(-8deg) scale(1.08);

}

/*=========================================
        FEATURE TEXT
=========================================*/

.feature-text h4{

    font-family:'Poppins',sans-serif;

    font-size:18px;

    font-weight:600;

    color:#222222;

    margin-bottom:8px;

}

.feature-text p{

    font-family:'Poppins',sans-serif;

    font-size:15px;

    color:#050505;

    line-height:1.7;

}

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

.coverage-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:10px;

    margin-bottom:50px;

}

.coverage-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:#cd0505;

    color:#ffffff;

    padding:16px 36px;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    transition:.35s ease;

}

.coverage-btn:hover{

    background:#cd0505;

    transform:translateY(-4px);

}

.coverage-call{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#157A5C;

    font-family:'Poppins',sans-serif;

    font-size:16px;

    font-weight:600;

}

.coverage-call i{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#EEF7F3;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s ease;

}

.coverage-call:hover i{

    background:#157A5C;

    color:#ffffff;

}

/*=========================================
        MINI STATS
=========================================*/

.coverage-stats{

    display:flex;

    gap:35px;

    flex-wrap:wrap;

}

.mini-stat{

    position:relative;

    padding-right:35px;

}

.mini-stat:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:10px;

    width:1px;

    height:55px;

    background:#DDDDDD;

}

.mini-stat h3{

    font-family:'Cormorant Garamond',serif;

    font-size:48px;

    color:#157A5C;

    margin-bottom:5px;

}

.mini-stat p{

    font-family:'Poppins',sans-serif;

    font-size:15px;

    color:#666666;

}

/*=========================================
        SMOOTH TRANSITIONS
=========================================*/

.coverage-btn,
.coverage-call,
.feature-box,
.feature-icon,
.mini-stat{

    transition:all .4s ease;

}


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

.coverage-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:700px;

}

/*=========================================
        BACKGROUND CIRCLE
=========================================*/

.coverage-circle{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:linear-gradient(
                135deg,
                #EEF7F3,
                #D8F3E8);

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:1;

}

/*=========================================
        DECORATIVE DOTS
=========================================*/

.coverage-dots{

    position:absolute;

    left:-40px;

    top:40px;

    width:140px;

    height:140px;

    background-image:radial-gradient(#157A5C 2px,transparent 2px);

    background-size:18px 18px;

    opacity:.18;

    z-index:1;

}

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

.coverage-image{

    position:relative;

    width:470px;

    height:620px;

    overflow:hidden;

    border-radius:180px 35px 180px 35px;

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

    z-index:3;

    transition:.5s ease;

}

/*=========================================
        ROTATED FRAME
=========================================*/

.coverage-image::before{

    content:"";

    position:absolute;

    inset:-18px;

    border:3px solid #157A5C;

    border-radius:180px 35px 180px 35px;

    transform:rotate(-6deg);

    z-index:-1;

}

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

.coverage-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.coverage-image:hover{

    transform:translateY(-10px);

}

.coverage-image:hover img{

    transform:scale(1.08);

}

/*=========================================
        FLOATING CARD
=========================================*/

.coverage-card{

    position:absolute;

    left:-35px;

    bottom:60px;

    display:flex;

    align-items:center;

    gap:18px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(16px);

    padding:20px 28px;

    border-radius:22px;

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

    z-index:5;

    transition:.4s ease;

}

.coverage-card:hover{

    transform:translateY(-8px);

}

/*=========================================
        CARD ICON
=========================================*/

.coverage-card-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#157A5C;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    flex-shrink:0;

}

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

.coverage-card-content h3{

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    color:#157A5C;

    margin-bottom:5px;

    line-height:1;

}

.coverage-card-content p{

    font-family:'Poppins',sans-serif;

    font-size:15px;

    color:#666666;

    font-weight:500;

}

/*=========================================
        FLOATING BADGE
=========================================*/

.coverage-badge{

    position:absolute;

    right:-20px;

    top:90px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 24px;

    background:#157A5C;

    color:#ffffff;

    border-radius:50px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    box-shadow:0 18px 40px rgba(21,122,92,.30);

    z-index:5;

    transition:.4s ease;

}

.coverage-badge:hover{

    transform:translateY(-6px);

}

.coverage-badge i{

    font-size:22px;

}

/*=========================================
        DECORATIVE RING
=========================================*/

.coverage-right::after{

    content:"";

    position:absolute;

    right:-40px;

    bottom:-20px;

    width:170px;

    height:170px;

    border-radius:50%;

    border:18px solid rgba(21,122,92,.08);

    z-index:0;

}

/*=========================================
        FLOATING ANIMATION
=========================================*/

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

.coverage-card{

    animation:floating 4s ease-in-out infinite;

}

.coverage-badge{

    animation:floating 5s ease-in-out infinite;

}

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

.coverage-image{

    filter:drop-shadow(0 25px 50px rgba(0,0,0,.12));

}

/*=========================================
        LARGE LAPTOP
=========================================*/

@media (max-width:1200px){

    .coverage-section{

        padding:100px 6%;

    }

    .coverage-section .container{

        gap:60px;

    }

    .coverage-left h2{

        font-size:64px;

    }

    .coverage-image{

        width:410px;

        height:560px;

    }

    .coverage-card{

        left:-20px;

    }

}

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

@media (max-width:992px){

    .coverage-section{

        padding:90px 5%;

    }

    .coverage-section .container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .coverage-left{

        order:2;

        text-align:center;

    }

    .coverage-right{

        order:1;

        min-height:auto;

    }

    .coverage-left h2{

        font-size:54px;

    }

    .coverage-description{

        max-width:100%;

    }

    .coverage-features{

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

    }

    .coverage-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .coverage-stats{

        justify-content:center;

    }

    .coverage-image{

        width:390px;

        height:520px;

    }

    .coverage-card{

        left:0;

        bottom:20px;

    }

    .coverage-badge{

        right:0;

        top:20px;

    }

}

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

@media (max-width:768px){

    .coverage-section{

        padding:70px 20px;

    }

    .coverage-subtitle{

        padding:10px 22px;

        font-size:13px;

    }

    .coverage-left h2{

        font-size:42px;

        line-height:1.15;

    }

    .coverage-description{

        font-size:15px;

        line-height:1.8;

    }

    .coverage-features{

        grid-template-columns:1fr;

        gap:18px;

    }

    .feature-box{

        padding:20px;

    }

    .feature-icon{

        width:58px;

        height:58px;

        font-size:22px;

    }

    .feature-text h4{

        font-size:17px;

    }

    .feature-text p{

        font-size:14px;

    }

    .coverage-buttons{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }

    .coverage-btn{

        width:100%;

        text-align:center;

    }

    .coverage-call{

        justify-content:center;

    }

    .coverage-stats{

        justify-content:space-between;

        gap:20px;

    }

    .mini-stat{

        padding-right:15px;

    }

    .mini-stat::after{

        display:none;

    }

    .mini-stat h3{

        font-size:38px;

    }

    .mini-stat p{

        font-size:14px;

    }

    .coverage-image{

        width:300px;

        height:420px;

        border-radius:120px 25px 120px 25px;

    }

    .coverage-image::before{

        border-radius:120px 25px 120px 25px;

    }

    .coverage-circle{

        width:340px;

        height:340px;

    }

    .coverage-card{

        width:230px;

        left:0;

        bottom:-20px;

        padding:15px 18px;

        gap:12px;

    }

    .coverage-card-icon{

        width:55px;

        height:55px;

        font-size:22px;

    }

    .coverage-card-content h3{

        font-size:34px;

    }

    .coverage-card-content p{

        font-size:13px;

    }

    .coverage-badge{

        right:0;

        top:-10px;

        padding:12px 18px;

        font-size:13px;

    }

}

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

@media (max-width:480px){

    .coverage-left{

        text-align:left;

    }

    .coverage-left h2{

        font-size:36px;

    }

    .coverage-description{

        font-size:15px;

    }

    .coverage-image{

        width:260px;

        height:360px;

    }

    .coverage-circle{

        width:280px;

        height:280px;

    }

    .coverage-card{

        width:200px;

        padding:14px;

    }

    .coverage-card-content h3{

        font-size:28px;

    }

    .coverage-card-content p{

        font-size:12px;

    }

    .coverage-badge{

        padding:10px 15px;

        font-size:12px;

    }

    .coverage-badge i{

        font-size:16px;

    }

    .coverage-stats{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

}

/*=========================================
        EXTRA SMALL
=========================================*/

@media (max-width:360px){

    .coverage-left h2{

        font-size:32px;

    }

    .coverage-image{

        width:220px;

        height:310px;

    }

    .coverage-card{

        width:180px;

        left:0;

        bottom:-15px;

    }

    .coverage-card-content h3{

        font-size:24px;

    }

    .coverage-card-content p{

        font-size:11px;

    }

    .coverage-circle{

        width:240px;

        height:240px;

    }

}























































/*==================================
      TRUSTED CLIENTS
===================================*/

.clients-section{

    padding:120px 0;
    background:#f7fbfa;
    overflow:hidden;

}

.section-title{

    text-align:center;
    max-width:800px;
    margin:0 auto 70px;

}

.section-title span{

    display:inline-block;

    background:#A63D66;

    color:#fff;

    padding:10px 26px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;

}

.section-title h2{

    font-size:60px;

    margin-bottom:20px;

    font-family:"Playfair Display",serif;

}

.section-title h2 span{

    background:none;

    color:#A63D66;

    padding:0;

}

.section-title p{

    font-size:18px;

    color:#000000;

    line-height:1.8;

}

/* Slider */

.clients-slider{

    overflow:hidden;

    white-space:nowrap;

}

.clients-track{

    display:flex;

    width:max-content;

    animation:scrollClients 35s linear infinite;

}

.client-card{

    min-width:280px;

    margin:0 18px;

    padding:28px 35px;

    background:#ffffff;

    border:2px solid #79bba4;

    border-radius:20px;

    text-align:center;

    font-size:26px;

    font-weight:700;

    color:#3c3b3b;

    transition:.4s;

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

}

.client-card:hover{

    background:#79bba4;

    color:#fff;

    transform:translateY(-8px);

}

@keyframes scrollClients{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}



/*=========================================
      TRUSTED CLIENTS - MOBILE
=========================================*/

@media (max-width:768px){

    .clients-section{

        padding:70px 0;

    }

    /* Heading */

    .section-title{

        padding:0 20px;
        margin-bottom:35px;

    }

    .section-title span{

        padding:8px 18px;
        font-size:12px;
        letter-spacing:2px;
        margin-bottom:15px;

    }

    .section-title h2{

        font-size:34px;
        line-height:1.3;
        margin-bottom:15px;

    }

    .section-title p{

        font-size:15px;
        line-height:1.7;
        padding:0 5px;

    }

    /* Slider */

    .clients-slider{

        overflow:hidden;
        padding:10px 0;

    }

    .clients-track{

        gap:12px;
        animation:scrollClients 18s linear infinite;

    }

    /* Company Cards */

    .client-card{

        min-width:170px;
        padding:16px 18px;

        font-size:16px;
        font-weight:600;

        border-radius:14px;

        margin:0;

    }

}


/*=========================================
        GET FREE QUOTE SECTION
=========================================*/

.quote-section{

    padding:120px 8%;
    background:#fcfafb;
    position:relative;
    overflow:hidden;

}

/* Decorative Circles */

.quote-section::before{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    background:rgba(166,61,102,.08);

    border-radius:50%;

    top:-120px;
    right:-120px;

}

.quote-section::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:rgba(166,61,102,.05);

    border-radius:50%;

    left:-120px;
    bottom:-120px;

}

/* Container */

.quote-container{

    max-width:1250px;

    margin:auto;

    background:#fff;

    padding:70px;

    border-radius:35px;

    position:relative;

    z-index:2;

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

}

/* Heading */

.quote-heading{

    text-align:center;

    margin-bottom:55px;

}

.quote-tag{

    display:inline-block;

    padding:10px 24px;

    background:#f6dbe5;

    color:#A63D66;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.quote-heading h2{

    font-size:58px;

    font-family:"Playfair Display",serif;

    margin-bottom:20px;

    color:#222;

}

.quote-heading h2 span{

    color:#A63D66;

}

.quote-heading p{

    max-width:760px;

    margin:auto;

    color:#000000;

    font-size:18px;

    line-height:1.9;

}

/* Form */

.quote-form{

    width:100%;

}

/* Grid */

.form-grid{

    display:grid;

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

    gap:28px;

}

/* Group */

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:10px;

    font-size:14px;

    font-weight:700;

    color:#555;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* Inputs */

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:18px 22px;

    border:2px solid #ececec;

    border-radius:18px;

    font-size:16px;

    font-family:inherit;

    outline:none;

    transition:.35s;

    background:#fff;

}

.form-group textarea{

    resize:none;

}

/* Focus */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:#A63D66;

    box-shadow:0 0 0 6px rgba(166,61,102,.10);

}

/* Full Width */

.full-width{

    margin-top:28px;

}

/* Features */

.quote-features{

    display:grid;

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

    gap:18px;

    margin:35px 0;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    font-weight:600;

    color:#444;

}

/* WhatsApp Button */

.quote-whatsapp-btn{

    width:100%;

    padding:22px;

    border:none;

    border-radius:60px;

    background:#A63D66;

    color:#fff;

    font-size:20px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    transition:.35s;

    box-shadow:0 18px 35px rgba(166,61,102,.28);

}

.quote-whatsapp-btn:hover{

    background:#8B2E55;

    transform:translateY(-5px);

    box-shadow:0 25px 45px rgba(166,61,102,.35);

}

.whatsapp-btn i{

    font-size:24px;

}

/* Input Hover */

.form-group input:hover,

.form-group select:hover,

.form-group textarea:hover{

    border-color:#d6b2c1;

}

/* Placeholder */

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9b9b9b;

}




/*=========================================
        QUOTE FORM - MOBILE
=========================================*/

@media (max-width:768px){

.quote-section{

    padding:70px 20px;

}

.quote-container{

    padding:35px 22px;

    border-radius:25px;

}

.quote-heading{

    margin-bottom:35px;

}

.quote-tag{

    font-size:12px;

    padding:8px 18px;

    letter-spacing:1.5px;

}

.quote-heading h2{

    font-size:34px;

    line-height:1.3;

    margin-bottom:15px;

}

.quote-heading p{

    font-size:15px;

    line-height:1.8;

}

.form-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.full-width{

    margin-top:18px;

}

.form-group label{

    font-size:13px;

}

.form-group input,

.form-group select,

.form-group textarea{

    padding:15px 18px;

    font-size:15px;

    border-radius:14px;

}

.form-group textarea{

    min-height:140px;

}

.quote-features{

    grid-template-columns:1fr;

    gap:12px;

    margin:28px 0;

}

.feature-item{

    font-size:14px;

}

.whatsapp-btn{

    padding:18px;

    font-size:17px;

    border-radius:50px;

}

.whatsapp-btn i{

    font-size:22px;

}

}



/*====================================================
        PREMIUM LUXURY FOOTER
=====================================================*/


.footer{

    background:#11110f;

    color:#ffffff;

    position:relative;

    overflow:hidden;

    font-family:'Poppins',sans-serif;

}



/* subtle animated background */

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#0f6b55;

    opacity:.12;

    filter:blur(120px);

    top:-200px;

    right:-150px;

    animation:footerGlow 8s infinite alternate;

}


@keyframes footerGlow{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-80px,80px);

    }

}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

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

.psnQuoteSection{
padding:100px 6%;
background:#faf8f4;
}

.psnQuoteWrap{
max-width:1350px;
margin:auto;
display:grid;
grid-template-columns:1fr 520px;
gap:80px;
align-items:center;
}

.psnBadge{
display:inline-flex;
padding:14px 28px;
border-radius:50px;
background:#edf5f0;
color:#0f7b66;
font-size:.95rem;
font-weight:600;
font-family:'Inter',sans-serif;
letter-spacing:.5px;
margin-bottom:35px;
}

.psnHeading{
font-family:'Cormorant Garamond',serif;
font-size:5rem;
font-weight:500;
line-height:1.05;
color:#1f1f1f;
margin-bottom:30px;
}

.psnHeading span{
display:block;
color:#0f7b66;
}

.psnText{
max-width:580px;
font-family:'Inter',sans-serif;
font-size:1.08rem;
line-height:1.9;
color:#666;
margin-bottom:40px;
}

.psnWhatsappCard{
display:flex;
align-items:center;
gap:18px;
padding:20px 25px;
width:max-content;
border-radius:18px;
background:#fff;
border:1px solid #ececec;
box-shadow:0 15px 40px rgba(0,0,0,.05);
margin-bottom:35px;
}

.psnWhatsappIcon{
width:65px;
height:65px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#fff;
}

.psnWhatsappCard small{
display:block;
font-family:'Inter',sans-serif;
color:#888;
margin-bottom:5px;
}

.psnWhatsappCard h3{
font-family:'Inter',sans-serif;
font-size:1.25rem;
font-weight:700;
color:#1f1f1f;
}

.psnWhatsappBtn{
display:inline-flex;
align-items:center;
gap:12px;
padding:18px 36px;
border-radius:60px;
background:#0f7b66;
color:#fff;
text-decoration:none;
font-family:'Inter',sans-serif;
font-weight:600;
transition:.35s;
}

.psnWhatsappBtn:hover{
background:#0a5e4e;
transform:translateY(-4px);
}

.psnFormBox{
background:#fff;
padding:45px;
border-radius:28px;
box-shadow:0 30px 70px rgba(0,0,0,.08);
}

.psnFormBox h3{
font-family:'Cormorant Garamond',serif;
font-size:2.3rem;
font-weight:600;
color:#222;
margin-bottom:10px;
}

.psnFormBox>p{
font-family:'Inter',sans-serif;
color:#777;
margin-bottom:35px;
}

.psnRow{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:22px;
}

.psnInput{
display:flex;
flex-direction:column;
}

.psnInput label{
font-family:'Inter',sans-serif;
font-size:.78rem;
font-weight:700;
letter-spacing:1px;
color:#666;
margin-bottom:10px;
}

.psnInput input,
.psnInput select,
.psnInput textarea{
width:100%;
padding:16px 18px;
border:1px solid #ddd;
border-radius:14px;
background:#fafafa;
font-family:'Inter',sans-serif;
font-size:15px;
outline:none;
transition:.3s;
}

.psnInput textarea{
height:140px;
resize:none;
}

.psnInput input:focus,
.psnInput select:focus,
.psnInput textarea:focus{
border-color:#0f7b66;
background:#fff;
}

.psnSubmitBtn{
margin-top:15px;
width:100%;
padding:18px;
border:none;
border-radius:60px;
background:#0f7b66;
color:#fff;
font-family:'Inter',sans-serif;
font-size:16px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
transition:.35s;
}

.psnSubmitBtn:hover{
background:#094d40;
transform:translateY(-3px);
}

@media(max-width:991px){

.psnQuoteWrap{
grid-template-columns:1fr;
gap:60px;
}

.psnHeading{
font-size:3.7rem;
}

}

@media(max-width:768px){

.psnQuoteSection{
padding:70px 20px;
}

.psnHeading{
font-size:2.8rem;
}

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

.psnFormBox{
padding:30px;
}

.psnWhatsappCard{
width:100%;
}

.psnWhatsappBtn{
width:100%;
justify-content:center;
}

}

/*====================================================
                    CTA BOX
=====================================================*/


.footer-cta{


    max-width:1200px;

    margin:-90px auto 0;

    padding:55px 65px;

    background:#f8f6f1;

    border-radius:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    position:relative;

    z-index:2;

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


}



.footer-tag{

    color:#0f6b55;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:3px;

    font-weight:600;

}



.footer-cta h2{


    font-family:'Playfair Display',serif;

    color:#111;

    font-size:45px;

    margin:15px 0;

}



.footer-cta p{


    color:#555;

    max-width:600px;

    line-height:1.8;

}





/* BUTTONS */


.footer-cta-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.footer-call-btn,
.footer-whatsapp-btn{


    width:190px;

    padding:16px;

    border-radius:50px;

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-weight:600;

    transition:.4s;

}



.footer-call-btn{


    background:#0f6b55;

    color:white;

}



.footer-whatsapp-btn{


    background:white;

    border:1px solid #0f6b55;

    color:#0f6b55;

}



.footer-call-btn:hover,
.footer-whatsapp-btn:hover{


    transform:translateY(-6px);

}






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


.footer-main{


    padding:130px 6% 50px;

}



.footer-main .container{


    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1.6fr 1fr 1fr 1.3fr;

    gap:60px;

}





/* COMPANY */


.footer-logo{


    width:130px;

    margin-bottom:20px;

}



.footer-about h3{


    font-family:'Playfair Display',serif;

    font-size:32px;

}



.footer-about p{


    color:#b7b5ae;

    line-height:1.9;

    font-size:15px;

}





/* FEATURES */


.footer-features{


    margin-top:25px;

}



.footer-features div{


    margin-bottom:12px;

    color:#ddd;

    display:flex;

    gap:12px;

    align-items:center;

}



.footer-features i{


    color:#0f6b55;

}





/* SOCIAL */


.footer-social{


    display:flex;

    gap:15px;

    margin-top:30px;

}



.footer-social a{


    width:45px;

    height:45px;

    border-radius:50%;


    border:1px solid rgba(255,255,255,.2);


    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    transition:.4s;

}



.footer-social a:hover{


    background:#0f6b55;

    border-color:#0f6b55;

    transform:
    translateY(-8px)
    rotate(10deg);

}






/* HEADINGS */


.footer-column h4{


    font-family:'Playfair Display',serif;


    font-size:25px;


    margin-bottom:30px;


    color:#ffffff;


}



.footer-column h4::after{


    content:"";

    display:block;

    margin-top:12px;

    width:45px;

    height:2px;

    background:#0f6b55;


}






/* LINKS */


.footer-column ul{


    padding:0;

    list-style:none;


}



.footer-column ul li{


    margin-bottom:16px;


}



.footer-column ul li a{


    color:#b7b5ae;

    text-decoration:none;

    transition:.3s;


}



.footer-column ul li a:hover{


    color:#ffffff;

    padding-left:10px;


}






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


.contact-box{


    display:flex;

    gap:15px;

    margin-bottom:22px;


}



.contact-box i{


    width:45px;

    height:45px;

    border-radius:50%;

    background:#0f6b55;

    display:flex;

    justify-content:center;

    align-items:center;


}



.contact-box span{


    color:#999;

    font-size:13px;


}



.contact-box a,
.contact-box p{


    color:white;

    text-decoration:none;

    margin:4px 0;


}





/* MAP BUTTON */


.footer-map-btn{


    margin-top:20px;

    padding:15px 25px;

    border-radius:50px;

    border:1px solid #0f6b55;

    color:white;

    text-decoration:none;

    display:inline-flex;

    gap:10px;

    transition:.4s;


}



.footer-map-btn:hover{


    background:#0f6b55;

    transform:translateY(-5px);


}







/*====================================================
                COPYRIGHT
=====================================================*/


.footer-bottom{


    border-top:

    1px solid rgba(255,255,255,.15);


    text-align:center;

    padding:25px;

    color:#aaa;

    font-size:14px;

}






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


@media(max-width:900px){


.footer-cta{


    margin:0 20px;

    flex-direction:column;

    text-align:center;

    padding:40px 25px;


}



.footer-cta h2{


    font-size:32px;

}



.footer-main .container{


    grid-template-columns:1fr;


}



.footer-main{


    padding-top:90px;

}



.footer-about{


    text-align:center;


}



.footer-social{


    justify-content:center;


}



.footer-cta-buttons{


    width:100%;

}



.footer-call-btn,
.footer-whatsapp-btn{


    width:100%;

}


}







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

.hero{

    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;

}

.slide{

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    opacity:0;
    visibility:hidden;

    transition:1s ease;

}

.slide.active{

    opacity:1;
    visibility:visible;

}

.overlay{

    position:absolute;
    inset:0;

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

}

.hero-content{

    position:absolute;

    top:50%;
    left:10%;

    transform:translateY(-50%);

    color:#fff;

    z-index:5;

    max-width:700px;

}

.sub-title{

    color:#ffffff;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:15px;

    font-weight:600;

    border-left:4px solid  #157A5C;

    padding-left:15px;

}

.hero h1{

    font-size:75px;

    line-height:1.1;

    margin:25px 0;

    font-weight:800;

}

.hero h1 span{

    color:#d70c0c;

}

.hero p{

    font-size:23px;

    width:650px;

    line-height:1.8;

}

.hero-btns{

    display:flex;

    gap:20px;

    margin-top:40px;

}

.btn-fill{

    background: #157A5C;

    color:white;

    text-decoration:none;

    padding:18px 42px;

    border-radius:40px;

    font-weight:600;

}

.btn-outline{

    color:white;

    text-decoration:none;

    border:2px solid white;

    padding:18px 42px;

    border-radius:40px;

    font-weight:600;

}

.slider-dots{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:100;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#fff;

    opacity:.4;

    cursor:pointer;

}

.dot.active{

    background:#ff6b3d;

    opacity:1;

}



/* ===========================
   Mobile Responsive Hero
=========================== */

@media (max-width:768px){

.hero{

    height:100vh;
    min-height:700px;

}

.slide{

    background-position:center center;

}

.overlay{

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

}

.hero-content{

    left:20px;
    right:20px;
    top:50%;

    transform:translateY(-50%);

    max-width:100%;

}

.sub-title{

    font-size:12px;

    letter-spacing:2px;

    padding-left:12px;

}

.hero h1{

    font-size:42px;

    line-height:1.15;

    margin:18px 0;

}

.hero h1 span{

    display:block;

}

.hero p{

    width:100%;

    font-size:16px;

    line-height:1.7;

}

.hero-btns{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.btn-fill,
.btn-outline{

    width:100%;

    text-align:center;

    padding:16px;

    font-size:16px;

}

.slider-dots{

    bottom:25px;

}

.dot{

    width:12px;
    height:12px;

}

}



:root{

--primary:#ad2447;

--light:#EFF8F4;

--text:#222;

--paragraph:#010101;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Poppins',sans-serif;

background:#fff;

}

.why-us{

padding:120px 8%;

overflow:hidden;

}

.container{

max-width:1400px;

margin:auto;

}

.why-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

/* IMAGE */

.why-image{

position:relative;

}

.shape{

position:absolute;

width:88%;

height:90%;

background:linear-gradient(135deg,#d9f2e8,#edf8f2);

border-radius:60px;

left:-25px;

top:-25px;

z-index:-1;

}

.why-image img{

width:100%;

border-radius:55px;

display:block;

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

}

.floating-card{

position:absolute;

right:-40px;

top:55px;

background:#eaecee;

padding:28px 38px;

border-radius:28px;

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

}

.floating-card h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

font-weight:600;

color:var(--primary);

}

.floating-card p{

font-size:18px;

color:#000000;

}

/* CONTENT */

.badge{

display:inline-block;

padding:14px 28px;

background:var(--light);

color:var(--primary);

border-radius:40px;

font-weight:600;

margin-bottom:30px;

}

.why-content h2{

font-family:'Cormorant Garamond',serif;

font-size:82px;

font-weight:500;

line-height:0.95;

color:#000000;

margin-bottom:30px;

}

.why-content h2 span{

display:block;

color:var(--primary);

}

.description{

font-size:20px;

line-height:2;

color:var(--paragraph);

margin-bottom:45px;

max-width:640px;

}

/* FEATURE CARD */

.feature-card{

display:flex;

gap:28px;

align-items:flex-start;

background:#fff;

padding:28px;

border-radius:28px;

margin-bottom:24px;

transition:.35s;

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

}

.feature-card:hover{

transform:translateY(-8px);

}

.number{

width:78px;

height:78px;

border-radius:20px;

background:linear-gradient(135deg,#157A5C,#1F9D72);

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

font-family:'Cormorant Garamond',serif;

color:#fff;

font-weight:700;

flex-shrink:0;

}

.feature-card h3{

font-family:'Cormorant Garamond',serif;

font-size:42px;

font-weight:500;

margin-bottom:10px;

}

.feature-card p{

font-size:18px;

line-height:1.8;

color:#000000;

}

/* RESPONSIVE */

@media(max-width:992px){

.why-grid{

grid-template-columns:1fr;

gap:70px;

}

.why-content h2{

font-size:60px;

}

.description{
font-size:18px;
}
.floating-card{

right:20px;

top:20px;

padding:22px;

}

}

@media(max-width:768px){

.why-us{

padding:80px 20px;

}

.why-content h2{

font-size:48px;

}

.feature-card{

padding:22px;

}

.feature-card h3{

font-size:30px;

}

.number{

width:65px;

height:65px;

font-size:28px;

}

.description{

font-size:16px;

line-height:1.8;

}

.badge{

padding:12px 24px;

}

.floating-card{

position:relative;

right:auto;

top:auto;

margin-top:-60px;

margin-left:auto;

width:220px;

}

}



/*======================================
        MOBILE VIEW
=======================================*/
@media (max-width:768px){

.psnQuoteSection{
padding:45px 15px;
}

.psnQuoteWrap{
grid-template-columns:1fr;
gap:30px;
}

.psnQuoteLeft{
text-align:center;
}

.psnBadge{
padding:8px 18px;
font-size:.75rem;
margin-bottom:15px;
}

.psnHeading{
font-size:2.1rem;
line-height:1.15;
margin-bottom:12px;
}

.psnText{
font-size:.9rem;
line-height:1.6;
margin-bottom:20px;
}

.psnWhatsappCard{
width:100%;
padding:12px 14px;
gap:12px;
border-radius:14px;
margin-bottom:18px;
justify-content:center;
}

.psnWhatsappIcon{
width:45px;
height:45px;
font-size:20px;
}

.psnWhatsappCard small{
font-size:.7rem;
}

.psnWhatsappCard h3{
font-size:.95rem;
}

.psnWhatsappBtn{
width:100%;
justify-content:center;
padding:13px;
font-size:14px;
border-radius:50px;
}

/*==========================
      FORM CARD
===========================*/

.psnFormBox{
padding:18px;
border-radius:18px;
max-width:360px;
margin:auto;
}

.psnFormBox h3{
font-size:1.6rem;
margin-bottom:5px;
text-align:center;
}

.psnFormBox>p{
font-size:.82rem;
margin-bottom:18px;
text-align:center;
}

.psnRow{
grid-template-columns:1fr;
gap:12px;
margin-bottom:12px;
}

.psnInput label{
font-size:.68rem;
margin-bottom:6px;
}

.psnInput input,
.psnInput select,
.psnInput textarea{
padding:11px 12px;
font-size:14px;
border-radius:10px;
}

.psnInput textarea{
height:90px;
}

.psnSubmitBtn{
padding:13px;
font-size:14px;
margin-top:8px;
border-radius:50px;
}

}
@media (max-width:480px){

.psnFormBox{
max-width:320px;
padding:15px;
}

.psnHeading{
font-size:1.9rem;
}

.psnWhatsappCard{
padding:10px 12px;
}

.psnWhatsappIcon{
width:40px;
height:40px;
font-size:18px;
}

.psnWhatsappBtn,
.psnSubmitBtn{
padding:12px;
font-size:13px;
}

.psnInput input,
.psnInput select,
.psnInput textarea{
padding:10px;
font-size:13px;
}

.psnInput textarea{
height:80px;
}

}



/*=========================================
WHY CHOOSE US - SMALL MOBILE
=========================================*/
/* @media (max-width:480px){

.why-image img{
    height:200px !important;
    border-radius:18px !important;
}

.floating-card{
    padding:10px 14px !important;
    bottom:10px !important;
    left:10px !important;
}

.floating-card h2{
    font-size:20px !important;
}

.floating-card p{
    font-size:11px !important;
}

.feature-card{
    padding:14px !important;
    border-radius:16px !important;
    margin-bottom:12px !important;
}

.number{
    width:46px !important;
    height:46px !important;
    font-size:16px !important;
}

.feature-text h3{
    font-size:18px !important;
}

.feature-text p{
    font-size:13px !important;
    line-height:1.6 !important;
}

} */


@media (max-width:480px){

    .why-image img{
        height:300px !important;
        border-radius:18px !important;
    }


    .floating-card{
        padding:10px 14px !important;
        bottom:10px !important;
        left:10px !important;
    }


    .floating-card h2{
        font-size:20px !important;
    }


    .floating-card p{
        font-size:11px !important;
    }


    .feature-card{
        padding:14px !important;
        border-radius:16px !important;
        margin-bottom:12px !important;
    }


    .number{
        width:46px !important;
        height:46px !important;
        font-size:16px !important;
    }


    .feature-text h3{
        font-size:18px !important;
    }


    .feature-text p{
        font-size:13px !important;
        line-height:1.6 !important;
    }


}



#jalla-tech-credit {
    display: inline-block;

    color: #b8b8b8;
    text-decoration: none;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;

    transition: .3s ease;
}

#jalla-tech-credit span {
    color: #ffffff;
    font-weight: 600;

    transition: .3s ease;
}

#jalla-tech-credit:hover {
    color: #ffffff;
}

#jalla-tech-credit:hover span {
    color: #ff6847 !important;
}

/* =========================================
   GALLERY LIGHTBOX
========================================= */

.gallery-lightbox {
    position: fixed !important;
    inset: 0 !important;

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

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

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

    z-index: 99999 !important;

    padding: 30px !important;
    box-sizing: border-box !important;
}

/* When lightbox is opened */

.gallery-lightbox.active {
    display: flex !important;
}


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

.gallery-lightbox img {
    max-width: 90% !important;
    max-height: 85vh !important;

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;

    border-radius: 10px !important;
}


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

.gallery-lightbox .close-lightbox {
    position: absolute !important;

    top: 25px !important;
    right: 30px !important;

    color: #ffffff !important;

    font-size: 40px !important;
    font-weight: 300 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 100000 !important;
}


/* =========================================
   PREVIOUS / NEXT BUTTONS
========================================= */

.gallery-lightbox .prev-btn,
.gallery-lightbox .next-btn {

    position: absolute !important;

    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 50px !important;
    height: 50px !important;

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

    background: rgba(255, 255, 255, 0.15) !important;

    color: #ffffff !important;

    font-size: 24px !important;

    cursor: pointer !important;

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

    z-index: 100000 !important;
}


.gallery-lightbox .prev-btn {
    left: 25px !important;
}

.gallery-lightbox .next-btn {
    right: 25px !important;
}


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

.gallery-lightbox .prev-btn:hover,
.gallery-lightbox .next-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}


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

@media (max-width: 600px) {

    .gallery-lightbox {
        padding: 15px !important;
    }

    .gallery-lightbox img {
        max-width: 95% !important;
        max-height: 80vh !important;
    }

    .gallery-lightbox .close-lightbox {
        top: 15px !important;
        right: 18px !important;
        font-size: 32px !important;
    }

    .gallery-lightbox .prev-btn,
    .gallery-lightbox .next-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
    }

    .gallery-lightbox .prev-btn {
        left: 10px !important;
    }

    .gallery-lightbox .next-btn {
        right: 10px !important;
    }

}




/* =========================================
   BACK TO TOP BUTTON
========================================= */

.back-to-top {
    position: fixed;

    /* SAME RIGHT POSITION AS WHATSAPP + CALL */
    right: 20px;
    bottom: 18px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #7ebcde;
    color: #ffffff;

    font-size: 18px;
    font-weight: 600;

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

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;

    z-index: 99999;
}


/* SHOW */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* HOVER */
.back-to-top:hover {
    background: #0d87c9;
}


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

@media (max-width: 768px) {

    .back-to-top {
        right: 26px;;
        bottom: 6px;

        width: 30px;
        height: 30px;

        font-size: 16px;
    }

}



/* Desktop Dropdown Scroll */
@media (min-width: 769px) {
    .dropdown-menu {
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Custom scrollbar */
    .dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }

    .dropdown-menu::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .dropdown-menu::-webkit-scrollbar-thumb {
        background: #c2385a;
        border-radius: 10px;
    }

    .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: #a82f4d;
    }
}




/* =========================================================
   MOBILE SERVICES DROPDOWN FIX
   Paste this at the VERY END of your CSS
   ========================================================= */

@media (max-width: 768px) {

    /* Disable desktop hover behavior on mobile */
    .nav-item:hover > .dropdown,
    .nav-item:hover > .dropdown-menu,
    .dropdown:hover > .dropdown-menu,
    .services:hover .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Services dropdown - closed by default */
    .nav-item .dropdown,
    .nav-item .dropdown-menu,
    .services .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-8px);
        transition: opacity 0.25s ease,
                    transform 0.25s ease,
                    visibility 0.25s ease;
    }

    /* Only show when your JS adds an active/open class */
    .nav-item.active > .dropdown,
    .nav-item.active > .dropdown-menu,
    .services.active .dropdown-menu,
    .services.open .dropdown-menu,
    .dropdown.active .dropdown-menu,
    .dropdown.open .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0);
    }

    /* Dropdown links */
    .dropdown a,
    .dropdown-menu a {
        display: block;
        width: 100%;
    }

    /* Prevent the dropdown from forcing the whole page sideways */
    .dropdown,
    .dropdown-menu {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Mobile dropdown scrolling */
    .dropdown-menu {
        max-height: 55vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Remove sticky hover effects from dropdown links */
    .dropdown a:hover,
    .dropdown-menu a:hover {
        transform: none !important;
    }

    /* Better touch behavior */
    .dropdown a,
    .dropdown-menu a,
    .services > a,
    .services > button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}


/* =========================================================
   IMPORTANT: PREVENT HOVER DROPDOWN ON TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .nav-item:hover .dropdown,
    .nav-item:hover .dropdown-menu,
    .services:hover .dropdown-menu,
    .dropdown:hover .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Open only through active/open class */
    .nav-item.active .dropdown,
    .nav-item.active .dropdown-menu,
    .services.active .dropdown-menu,
    .services.open .dropdown-menu,
    .dropdown.active .dropdown-menu,
    .dropdown.open .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}