/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* ================= TOP HEADER ================= */
/* Default desktop layout */
.top-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.top-header{
    background:#f4f4f4;
    padding:10px 80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
}

.top-left{
    display:flex;
    align-items:center;
    gap:8px;
    color:#333;
}

.top-left i{
    color:#c40000;
}

.top-right{
    display:flex;
    align-items:center;
    gap:25px;
}

.top-right .phone{
    color:#c40000;
    font-weight:600;
}

.top-right a{
    color:#333;
    text-decoration:none;
    font-size:16px;
    transition:0.3s;
}

.top-right a:hover{
    color:#c40000;
}
/* ================= TOP HEADER MOBILE FIX ================= */
@media (max-width: 768px){

    .top-header{
        padding:10px 15px;
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

    .top-left{
        font-size:13px;
        justify-content:center;
        flex-wrap:wrap;
    }

    .top-right{
        gap:15px;
        justify-content:center;
        flex-wrap:wrap;
    }

    .top-right .phone{
        font-size:13px;
    }

    .top-right a{
        font-size:14px;
    }

}

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

/* Hide hamburger on desktop */
.mobile-menu-btn{
    display:none;
}

/* Hide mobile nav on desktop */
.mobile-navbar{
    display:none;
}.main-header{
    background: linear-gradient(
        90deg,
        #d4af37,
        #f6e27a,
        #e6c35c,
        #c89b3c
    );
    padding:10px 80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* LOGO */
.logo img{
    height:70px;
  width: 120px;
}

/* NAVIGATION */
.navbar{
    display:flex;
    gap:45px;
}

.navbar a{
    text-decoration:none;
    color:#111;
    font-weight:600;
    font-size:15px;
    letter-spacing:0px;
    transition:0.3s;
}

.navbar a:hover{
    color:#b10000;
}

/* ACTIVE LINK */
.navbar a.active{
    border-bottom:2px solid #b10000;
    padding-bottom:5px;
}

/* OPTIONAL: Sticky Header */
.main-header{
    position:sticky;
    top:0;
    z-index:999;
}

/* ================= MARQUEE ================= */

.marquee-container{
    width:100%;
    background:#b10000;
    overflow:hidden;
    height:45px;
    display:flex;
    align-items:center;
}

.marquee{
    display:flex;
    white-space:nowrap;
    animation:scroll 15s linear infinite;
}

.marquee span{
    font-size:20px;
    font-weight:700;
    letter-spacing:2px;
    padding-right:80px;

    /* GOLD TEXT */
    background: linear-gradient(
        90deg,
        #d4af37,
        #f6e27a,
        #ffffff,
        #f6e27a,
        #d4af37
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    background-size:200% auto;
    animation:shine 3s linear infinite;
}

/* Scroll Animation */
@keyframes scroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* Golden Shine Effect */
@keyframes shine{
    0%{
        background-position:0% center;
    }
    100%{
        background-position:200% center;
    }
}

/* ================= SLIDER ================= */

.slider-section{
    width:100%;
    position:relative;
}

/* ================= SLIDER FIX FOR 960x432 ================= */

.slider{
    width:100%;
    max-width:100%;
    height:432px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}

.slides{
    display:flex;
    height:432px;
    transition:transform 0.8s ease-in-out;
}

.slide{
    min-width:100%;
    height:432px;
}

.slide img{
    width:100%;
    height:432px;
    object-fit:cover;
}
/* Arrows */
.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    color:#fff;
    border:none;
    padding:12px 18px;
    font-size:24px;
    cursor:pointer;
    transition:0.3s;
    border-radius:4px;
}

.arrow:hover{
    background:#d4af37;
    color:#000;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}

/* Dots */
.dots{
    position:absolute;
    bottom:20px;
    width:100%;
    text-align:center;
}

.dot{
    height:12px;
    width:12px;
    margin:0 6px;
    background:#ccc;
    border-radius:50%;
    display:inline-block;
    cursor:pointer;
    transition:0.3s;
}

.dot.active{
    background:#d4af37;
}

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

/* ================= GOLD STRIP HEADING ================= */

.about-heading-strip{
    position:relative;
    overflow:hidden;

    background: linear-gradient(
        90deg,
        #d4af37,
        #f6e27a,
        #e6c35c,
        #c89b3c
    );

    padding:18px 0;
    text-align:center;
    font-size:24px;
    font-weight:700;
    letter-spacing:2px;
    color:#000;
}

/* ✨ Subtle Shine Effect */
.about-heading-strip::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;

    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0) 100%
    );

    transform:skewX(-20deg);
    animation:shineMove 4s linear infinite;
}

/* Shine Animation */
@keyframes shineMove{
    0%{
        left:-100%;
    }
    100%{
        left:150%;
    }
}

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

.about-section{
    padding:80px 100px;
    background:#f9f9f9;
}

/* SAME HEIGHT BOXES */
.about-container{
    display:flex;
    gap:40px;
    margin-top:60px;
}

.about-box{
    flex:1;
    height:600px; /* SAME HEIGHT */
    background:#fff;
    border-radius:15px;
    padding:35px;
    position:relative;
    overflow:hidden;

    /* 3D Depth */
    box-shadow:0 15px 30px rgba(0,0,0,0.1);
    transform:perspective(1000px) translateZ(0);
    transition:0.5s ease;
}


/* FLOATING 3D EFFECT */
.about-box:hover{
    transform:perspective(1000px) translateY(-15px) translateZ(20px);
    box-shadow:0 25px 45px rgba(0,0,0,0.2);
}

/* ANIMATED BORDER GLOW */
.about-box::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:15px;
    padding:2px;
    background:linear-gradient(45deg,#d4af37,#f6e27a,#ffffff,#d4af37);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition:0.4s;
   pointer-events:none;   /* 🔥 THIS FIXES IT */
}

    
.about-box:hover::before{
    opacity:1;
    animation:glowRotate 3s linear infinite;
}

@keyframes glowRotate{
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(360deg);}
}

/* VIDEO */

.video-box{
    padding:0;              /* remove padding for image box */
    overflow:hidden;
    border-radius:15px;     /* same as about-box */
}

.about-image{
    width:100%;
    height:100%;
    object-fit:cover;       /* fills entire box */
    border-radius:15px;     /* same radius */
    display:block;
    transition:0.5s ease;
}

.video-box:hover .about-image{
    transform:scale(1.05);
}

/* CONTENT */
.sub-title{
    color:#c40000;
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:15px;
}

.content-box h2{
    font-size:28px;
    margin-bottom:20px;
}

.content-box h2 span{
    color:#1c2d5a;
}

.content-box p{
    font-size:15px;
    line-height:25px;
    color:#555;
    margin-bottom:30px;
}
.about-list{
    margin-top:20px;
}

.about-item{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.about-item span{
    background:#f1f1f1;
    padding:8px 14px;
    font-weight:700;
    color:#1c2d5a;
}

.about-item h4{
    color:#1c2d5a;
    margin-bottom:5px;
    font-size:16px;
}

.about-item p{
    font-size:14px;
    line-height:22px;
    margin:0;
}
/* BUTTON */
.read-btn{
    display:inline-block;
    background:#c40000;
    color:#fff;
    padding:12px 28px;
    text-decoration:none;
    border-radius:6px;
    font-weight:600;
    transition:0.3s;
}

.read-btn:hover{
    background:#d4af37;
    color:#000;
    box-shadow:0 0 20px #d4af37;
}
/* BUTTON */
.read-btn{
    display:inline-block;
    background:#c40000;
    color:#fff;
    padding:12px 30px;
    text-decoration:none;
    border-radius:6px;
    font-weight:600;
    transition:0.3s;
}

.read-btn:hover{
    background:#d4af37;
    color:#000;
    box-shadow:0 0 15px #d4af37;
}

/* ================= HOME VIDEO SECTION ================= */

.home-video-section{
    padding:80px 100px;
    background:#f9f9f9;
}

/* CARD */
.home-video-card{
    display:flex;
    gap:40px;
    background:#ffffff;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
    transition:0.5s ease;
}

/* HOVER EFFECT */
.home-video-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 50px rgba(0,0,0,0.15);
}

/* GOLD BORDER GLOW */
.home-video-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:2px;
    background:linear-gradient(45deg,#d4af37,#f6e27a,#d4af37);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition:0.4s;
    pointer-events:none;
}

.home-video-card:hover::before{
    opacity:1;
}

/* LEFT VIDEO */
.home-video-left{
    flex:1;
    height:350px;
}

.home-video-left video{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* RIGHT CONTENT */
.home-video-right{
    flex:1;
    padding:60px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-video-right h4{
    color:#c40000;
    letter-spacing:2px;
    font-size:14px;
    margin-bottom:15px;
}

.home-video-right h2{
    font-size:28px;
    margin-bottom:20px;
    color:#1c2d5a;
}

.home-video-right p{
    font-size:15px;
    line-height:26px;
    color:#555;
    margin-bottom:30px;
}

/* CTA BUTTON */
.know-more-btn{
  width: 35%;
    display:inline-block;
    background:#c40000;
    color:#fff;
    padding:14px 30px;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:0.3s ease;
}

.know-more-btn:hover{
    background:#d4af37;
    color:#000;
    box-shadow:0 0 20px #d4af37;
}
/* ================= COUNTER SECTION ================= */

.counter-section{
    padding:80px 100px;
    background:#b10000;
}

.counter-container{
    display:flex;
    gap:30px;
}

.counter-box{
    flex:1;
    background:#fff;
    padding:40px 20px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    text-align:center;
    transition:0.4s;
}

.counter-box i{
    font-size:38px;
    margin-bottom:15px;
    color:#c40000;
}

.counter-box h2{
    font-size:40px;
    color:#1c2d5a;
}

.counter-box p{
    color:#555;
}

.counter-box:hover{
    transform:translateY(-12px);
    box-shadow:0 15px 35px rgba(212,175,55,0.3);
}

/* ================= TEAM SECTION ================= */

.team-section{
    padding:100px 100px;
    background:#f4f6f9;
}

.team-heading{
    text-align:center;
    margin-bottom:60px;
}

.team-heading span{
    color:#c40000;
    font-size:14px;
    letter-spacing:2px;
}

.team-heading h2{
    font-size:40px;
    color:#1c2d5a;
    margin-top:10px;
}

/* GRID */
.team-container{
    display:flex;
    gap:40px;
    justify-content:space-between;
}

/* CARD */
.team-card{
    flex:1;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transform:translateY(40px);
    opacity:0;
    transition:0.6s ease;
    position:relative;

  
}

/* Scroll animation active */
.team-card.show{
    transform:translateY(0);
    opacity:1;
}


/* Info */
.team-info{
    padding:25px;
    text-align:center;
}

.team-info h3{
    font-size:20px;
    color:#1c2d5a;
    margin-bottom:8px;
}

.team-info p{
    font-size:14px;
    color:#555;
}

/* Hover Effects */
.team-card:hover{
    transform:translateY(-15px) scale(1.02);
    box-shadow:0 20px 40px rgba(212,175,55,0.3);
}

.team-card:hover .team-img img{
    transform:scale(1.1);
}
.team-img{
    height:300px; /* little more height */
    overflow:hidden;
    display:flex;
    align-items:flex-start; /* important */
    justify-content:center;
}

.team-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top; /* THIS FIXES HEAD CUT */
}
/* Animated Glow Border */
.team-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:15px;
    padding:2px;
    background:linear-gradient(45deg,#d4af37,#f6e27a,#ffffff,#d4af37);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition:0.4s;
}

.team-card:hover::before{
    opacity:1;
    animation:glowRotate 3s linear infinite;
}

@keyframes glowRotate{
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(360deg);}
}

/* ================= TESTIMONIAL SECTION ================= */

/* ================= PREMIUM TESTIMONIAL ================= 

.testimonial-heading{
    text-align:center;
    margin-bottom:60px;
}

.testimonial-heading span{
    color:#c40000;
    font-size:16px;
    letter-spacing:2px;
}

.testimonial-heading h2{
    font-size:36px;
}

.testimonial-section{
    padding:100px 80px;
    background:#fff;
    color:#555;
    overflow:hidden;
}

.testimonial-wrapper{
    position:relative;
    display:flex;
    align-items:center;
}

.testimonial-track{
    display:flex;
    transition:transform 0.5s ease-in-out;
}

/* 3 Cards Visible 
.testimonial-card{
    min-width:33.33%;
    padding:35px 25px;
    background:#1e293b;
    margin:0 15px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
    transition:0.1s;
}

/* Hover Glow 
.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(212,175,55,0.4);
}

/* Circular Image 
.testimonial-img{
    width:85px;
    height:85px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 15px;
    border:3px solid #d4af37;
}

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

.stars{
    color:#d4af37;
    font-size:18px;
    margin:15px 0;
}


/* ===== Make Card Text White ===== 

.testimonial-card p,
.testimonial-card h4,
.testimonial-card span{
    color:#fff;
}

/* Optional: make name slightly bold 
.testimonial-card h4{
    font-weight:600;
}

/* Optional: lighter designation
.testimonial-card span{
    color:#ddd;    
}         ============= */


/* ================= TESTIMONIAL SECTION ================= */

.testimonial-section{
    padding:100px 80px;
    background:#fff;
    overflow:hidden;
}

.testimonial-heading{
    text-align:center;
    margin-bottom:60px;
}

.testimonial-heading span{
    color:#c40000;
    font-size:16px;
    letter-spacing:2px;
}

.testimonial-heading h2{
    font-size:36px;
}

/* ================= MARQUEE STRUCTURE ================= */

.testimonial-marquee-container{
    overflow:hidden;
    width:100%;
}

/* IMPORTANT FIX */
.testimonial-marquee-track{
    display:flex;
    gap:30px;
    animation:testimonialScroll 30s linear infinite;
}

/* 3 CARDS FIXED WIDTH */
.testimonial-card{
    min-width:350px;   /* fixed width instead of 33% */
    max-width:350px;
    background:#1e293b;
    padding:35px 25px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
    transition:0.3s;
}

/* Hover */
.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(212,175,55,0.4);
}

/* Image */
.testimonial-img{
    width:85px;
    height:85px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 15px;
    border:3px solid #d4af37;
}

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

.stars{
    color:#d4af37;
    font-size:18px;
    margin:15px 0;
}

/* Text */
.testimonial-card p,
.testimonial-card h4{
    color:#fff;
}

.testimonial-card span{
    color:#ddd;
}

/* Animation */
@keyframes testimonialScroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

/* Pause on hover */
.testimonial-marquee-track:hover{
    animation-play-state:paused;
}

/* ================= LICENCE SECTION ================= */


/* ===== MARQUEE SECTION ===== */

.licence-marquee-section{
    background:#c40000;
    padding:30px 0 60px 0;
    overflow:hidden;
}

.licence-marquee{
    overflow:hidden;
}

.licence-track{
    display:flex;
    width:max-content;
    animation:licenceScroll 20s linear infinite;
}

.licence-card{
    background:#fff;
    width:220px;
    height:140px;
    margin:0 20px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
    transition:0.4s;
}

.licence-card img{
    max-width:140px;
    max-height:80px;
}

.licence-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(212,175,55,0.6);
}
.licence-marquee-section{
    margin-bottom:80px; /* gap before footer */
}

/* Scroll Animation */
@keyframes licenceScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}


/* ================= FOOTER ================= */
/* GOLD TOP LINE ABOVE FOOTER */
.footer-section{
    position:relative;
}

.footer-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(
        90deg,
        #d4af37,
        #f6e27a,
        #e6c35c,
        #c89b3c
    );
}

.footer-section{
    background:#0f172a;   /* deep navy */
    color:#fff;
    padding:100px 0 0 0;
}

/* TOP BOX CONTAINER */
.footer-top-boxes{
    width:1200px;
    max-width:95%;
    margin:0 auto 80px auto;
    display:flex;
    gap:40px;
}

/* BOX STYLE (NEW COLOR) */
/* PREMIUM GOLD BORDER BOX */

.footer-box{
    flex:1;
    background:linear-gradient(145deg,#1e293b,#243247);
    padding:45px 40px;
    border-radius:18px;
    position:relative;
    z-index:1;
    transition:0.4s;
}

/* GOLD BORDER EFFECT */
.footer-box::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1.5px; /* border thickness */
    border-radius:18px;
    background:linear-gradient(
        135deg,
        #d4af37,
        #f6e27a,
        #e6c35c,
        #c89b3c
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
}

/* Hover Glow */
.footer-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(212,175,55,0.25);
}

/* HEADINGS */
.footer-box h3{
    font-size:20px;
    margin-bottom:20px;
    color:#d4af37;
}

/* TEXT */
.footer-box p{
    margin-bottom:12px;
    color:#ddd;
    font-size:15px;
    line-height:24px;
}

.footer-box a{
    text-decoration:none;
    color:#ddd;
}

.footer-box a:hover{
    color:#d4af37;
}

/* SOCIAL ICONS */
.footer-social{
    margin-top:20px;
    display:flex;
    gap:15px;
}

.footer-social a{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#16202e;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:16px;
    transition:0.3s;
}

.footer-social a:hover{
    background:#d4af37;
    color:#000;
}

/* BOTTOM */
.footer-bottom{
    text-align:center;
    padding:30px 0;
    background:#0b1220;
    font-size:14px;
    color:#bbb;
}

.footer-bottom a{
    color:#d4af37;
    text-decoration:none;
    font-weight:600;
}

/* WHATSAPP FLOAT */
.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    font-size:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
    z-index:999;
    transition:0.3s;
}

.whatsapp-float:hover{
    transform:scale(1.1);
}
.whatsapp-float{
    text-decoration:none !important;
}

.whatsapp-float i{
    text-decoration:none;
}




/* ================= ABOUT PAGE ================= */
body{
    margin:0;
    padding:0;
}

.about-page{
    padding:100px 0 0 0;
    background:#f4f6f9;
}

/* UNITS SECTION */
.units-container{
    width:1200px;
    max-width:95%;
    margin:20px auto;
    display:flex;
    gap:40px;
}

.unit-card{
    flex:1;
    background:linear-gradient(145deg,#1e293b,#243247);
    padding:50px;
    border-radius:20px;
    color:#fff;
    position:relative;
    transition:0.4s;
    border:1px solid rgba(212,175,55,0.2);
}

.unit-card h3{
    color:#d4af37;
    margin-bottom:20px;
}

.unit-card p{
    line-height:28px;
    color:#ddd;
}

/* Glow Hover */
.unit-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(212,175,55,0.3);
}

/* ABOUT CONTENT */
.about-content{
    width:1000px;
    max-width:95%;
    margin:80px auto;
    text-align:center;
}

.about-content h2{
    font-size:36px;
    color:#1e293b;
    margin-bottom:20px;
}

.about-highlight{
    font-size:18px;
    margin-bottom:40px;
}

.about-highlight span{
    color:#d4af37;
    font-weight:700;
}

/* TAGLINES */
/* CONTAINER */
.flip-card-container{
    display:flex;
    gap:30px;
    margin:70px auto;
    width:1200px;
    max-width:95%;
    perspective:1000px;
}

/* CARD */
.flip-card{
    flex:1;
    height:240px; /* reduced height */
    position:relative;
}

/* INNER */
.flip-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform 0.8s;
    transform-style:preserve-3d;
}

/* Flip on Hover */
.flip-card:hover .flip-inner{
    transform:rotateY(180deg);
}

/* FRONT & BACK */
.flip-front,
.flip-back{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:25px;
    background:#ffffff;
    border:2px solid transparent;
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
    transition:0.4s;
}
.flip-front{
  background:#fceeee;
}
/* BACK */
.flip-back{
    transform:rotateY(180deg);
    text-align:center;
}

/* ICON */
.flip-icon{
    font-size:35px;
    margin-bottom:15px;
}

/* HEADING */
.flip-front h3{
    color:#c40000;
    font-size:18px;
}

/* TEXT */
.flip-back p{
    color:#444;
    font-style:italic;
    margin:6px 0;
    font-size:14px;
}

/* STRONG RED GLOW BORDER ON HOVER */
.flip-card:hover .flip-front,
.flip-card:hover .flip-back{
    border:2px solid #8b0000;
    box-shadow:
        0 0 10px #8b0000,
        0 0 25px rgba(139,0,0,0.6);
}


/* JOURNEY */
/* JOURNEY SECTION */
/* JOURNEY BOX */
.journey-section{
    margin:80px auto;
    width:1000px;
    max-width:95%;
    padding:70px;
    background:#f4f5f7;
    border-radius:25px;
    transition:all 0.4s ease;
    box-shadow:0 15px 35px rgba(0,0,0,0.05);
    position:relative;
}

/* RED GLOW HOVER EFFECT */
.journey-section:hover{
    transform:translateY(-8px);
    box-shadow:
        0 0 20px rgba(196,0,0,0.4),
        0 0 40px rgba(196,0,0,0.3),
        0 25px 50px rgba(0,0,0,0.1);
}
.journey-section:hover{
    border:2px solid #c40000;
}

.journey-section:hover .journey-year{
    box-shadow:
        0 0 10px #c40000,
        0 0 25px rgba(196,0,0,0.6);
}
.journey-title{
    text-align:center;
    font-size:32px;
    color:#1e293b;
    margin-bottom:50px;
}

/* Timeline */
.journey-timeline{
    position:relative;
    padding-left:40px;
    border-left:3px solid #d4af37;
}

.journey-item{
    margin-bottom:50px;
    position:relative;
}

.journey-year{
    position:absolute;
    left:-75px;
    top:0;
    background:#c40000;
    color:#fff;
    padding:8px 15px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
}

.journey-content h4{
    color:#c40000;
    margin-bottom:10px;
}

.journey-content p{
    color:#555;
    line-height:26px;
}


/* WHY SECTION */
/* SECTION */
.why-mini-section{
    padding:60px 0 30px 0;
    text-align:center;
    background:#f4f6f9;
}

/* GOLD STRIP (NOT FULL WIDTH) */
.why-strip{
    display:inline-block;
    padding:14px 50px;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(90deg,#d4af37,#f6e27a,#c89b3c);
    color:#000;
    border-radius:6px;
    margin-bottom:50px;
}

/* CONTAINER */
.why-mini-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:nowrap;
}

/* SMALL CARD */
.why-mini-card{
    width:23%;
    padding:25px 20px;
    background:#ffffff;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,0.05);
    transition:0.4s;
    border:1px solid rgba(0,0,0,0.05);
}

/* ICON */
.why-mini-icon{
    width:55px;
    height:55px;
    margin:0 auto 15px;
    background:#c40000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:20px;
    transition:0.4s;
}

/* TEXT */
.why-mini-card p{
    font-size:14px;
    color:#444;
    line-height:22px;
}

/* HOVER EFFECT */
.why-mini-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 15px 30px rgba(212,175,55,0.25),
        0 5px 15px rgba(0,0,0,0.08);
}

.why-mini-card:hover .why-mini-icon{
    background:#d4af37;
    transform:scale(1.1);
}

/* CTA CALL SECTION */
.cta-call-section{
    text-align:center;
    margin:30px 0 60px 0; 
}

/* CTA BUTTON */
.cta-call-btn{
    display:inline-block;
    padding:16px 40px;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    background:#8b0000;              /* maroon */
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    transition:0.4s ease;
    box-shadow:0 8px 20px rgba(139,0,0,0.3);
}

/* HOVER EFFECT */
.cta-call-btn:hover{
    background:#a40000;
    transform:translateY(-5px);
    box-shadow:
        0 0 10px #8b0000,
        0 0 25px rgba(139,0,0,0.6),
        0 15px 35px rgba(0,0,0,0.2);
}




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

.contact-page{
    padding:100px 0;
    background:#f4f6f9;
}

/* GOLD STRIP (same style as others) */
.contact-strip{
    display:inline-block;
    padding:14px 60px;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(90deg,#d4af37,#f6e27a,#c89b3c);
    color:#000;
    border-radius:6px;
    margin-bottom:60px;
}

.contact-page{
    text-align:center;
}

/* CONTAINER */
.contact-container{
    width:1200px;
    max-width:95%;
    margin:0 auto;
    display:flex;
    gap:40px;
}

/* BOX STYLE */
.contact-box{
    flex:1;
    min-height:420px; /* ensures full box coverage */
    background:#ffffff;
    padding:60px 40px;
    border-radius:25px;
    border:2px solid #800000;
    box-shadow:0 15px 35px rgba(0,0,0,0.05);
    transition:0.4s;

    /* CENTER EVERYTHING */
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}
/* HOVER GLOW */
.contact-box:hover{
    transform:translateY(-8px);
    border:2px solid #800000;
    box-shadow:
        0 0 20px rgba(128,0,0,0.4),
        0 0 40px rgba(128,0,0,0.3),
        0 20px 40px rgba(0,0,0,0.08);
}

/* HEADINGS */
.contact-box h3{
    margin-bottom:30px;
    color:#1e293b;
}

/* FORM */
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px;
    margin-bottom:20px;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:14px;
    outline:none;
    transition:0.3s;
}

.contact-form textarea{
    height:120px;
    resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border:1px solid #800000;
    box-shadow:0 0 8px rgba(128,0,0,0.3);
}
.contact-form select{
    width:100%;
    padding:14px 16px;
    margin-bottom:20px;
    border-radius:10px;
    border:1px solid #dcdcdc;
    font-size:14px;
    background:#f9f9f9;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    cursor:pointer;
    transition:0.3s;
}

/* Focus effect */
.contact-form select:focus{
    outline:none;
    border:1px solid #a00000;
    background:#fff;
}

/* Custom dropdown arrow */
.contact-form select{
    background-image:url("data:image/svg+xml;utf8,<svg fill='%23555' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 15px center;
    background-size:16px;
}

/* FORM ROW */
.form-row{
    display:flex;
    gap:20px;
}

.form-row input{
    flex:1;
}

/* BUTTON */
.contact-form button{
    width:100%;
    padding:15px;
    background:#800000;
    color:#fff;
    border:none;
    border-radius:30px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.contact-form button:hover{
    background:#a00000;
    box-shadow:0 10px 25px rgba(128,0,0,0.4);
}

/* ADDRESS */
.unit-info{
    margin-bottom:35px;
    width:100%;
}

.unit-info h4{
    color:#800000;
    margin-bottom:12px;
    font-size:18px;
}

.unit-info p{
    color:#444;
    line-height:28px;
    font-size:15px;
}
.unit-info:not(:last-child){
    border-bottom:1px solid rgba(0,0,0,0.08);
    padding-bottom:25px;
}

.map-box{
    margin-top:15px;
    width:100%;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:0.4s;
}

.map-box:hover{
    transform:scale(1.02);
    box-shadow:0 0 20px rgba(128,0,0,0.4);
}
.contact-container{
    display:flex;
    gap:40px;
    width:1200px;
    max-width:95%;
    margin:60px auto;
}

/* BOTH BOXES */
.contact-box{
    flex:1;
    background:#ffffff;
    padding:50px;
    border-radius:25px;
    transition:0.4s;
    border:2px solid transparent;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* MAROON GLOW HOVER */
.contact-box:hover{
    border:2px solid #800000;
    box-shadow:
        0 0 25px rgba(128,0,0,0.4),
        0 15px 40px rgba(0,0,0,0.1);
}

/* HEADINGS */
.contact-box h3{
    text-align:center;
    margin-bottom:35px;
    font-size:22px;
    color:#1e293b;
}

/* UNIT BLOCK */
.unit-block{
    text-align:center;
}

.unit-block h4{
    color:#800000;
    margin-bottom:15px;
    font-size:18px;
}

.unit-block p{
    color:#555;
    line-height:28px;
    font-size:15px;
}

/* DIVIDER */
.unit-divider{
    height:2px;
    width:60%;
    margin:35px auto;
    background:linear-gradient(90deg,transparent,#d4af37,transparent);
}
/* DIRECTION BUTTON */
.direction-btn{
    display:inline-block;
    margin-top:15px;
    padding:10px 25px;
    background:#800000;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    font-size:14px;
    transition:0.3s;
}

.direction-btn:hover{
    background:#a00000;
    box-shadow:0 0 15px rgba(128,0,0,0.6);
}

/* MAP SECTION */
.map-section{
    width:1200px;
    max-width:95%;
    margin:80px auto;
    display:flex;
    gap:40px;
}

/* MAP CARD */
.map-card{
    flex:1;
    background:#ffffff;
    padding:25px;
    border-radius:20px;
    border:2px solid #800000;
    transition:0.4s;
    box-shadow:0 15px 35px rgba(0,0,0,0.05);
}

.map-card h3{
    text-align:center;
    margin-bottom:20px;
    color:#1e293b;
}

.map-card iframe{
    width:100%;
    height:300px;
    border-radius:15px;
    border:0;
}

/* Hover Glow */
.map-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 0 20px rgba(128,0,0,0.4),
        0 0 40px rgba(128,0,0,0.2);
}

/* Smooth Scroll */
html{
    scroll-behavior:smooth;
}
/* QUICK QUERY SECTION */
.quick-query-container{
    width:1200px;
    max-width:95%;
    margin:40px auto 60px auto; /* small top gap */
    display:flex;
    gap:25px;
    justify-content:center;
    flex-wrap:wrap;
}

/* CARD */
.quick-card{
    flex:1;
    min-width:280px;
    background:#ffffff;
    padding:20px;
    border-radius:15px;
    text-align:center;
    transition:0.4s ease;
    border:1px solid rgba(0,0,0,0.05);
    box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

/* TITLE */
.quick-card h4{
    color:#1e293b;
    margin-bottom:12px;
    font-size:16px;
    letter-spacing:1px;
}

/* EMAIL */
.quick-card p{
    color:#c40000;
    font-weight:600;
    font-size:14px;
}

/* HOVER EFFECT */
.quick-card:hover{
    transform:translateY(-6px);
    border:1px solid #800000;
    box-shadow:
        0 0 15px rgba(128,0,0,0.4),
        0 10px 30px rgba(0,0,0,0.08);
}

/* CONTACT CTA */
.contact-cta{
    text-align:center;
    margin:50px 0 20px 0;
}

/* BUTTON */
.contact-cta-btn{
    display:inline-block;
    padding:18px 50px;
    background:linear-gradient(145deg,#8b0000,#b30000);
    color:#fff;
    font-size:18px;
    font-weight:600;
    border-radius:40px;
    text-decoration:none;
    transition:0.4s ease;
    box-shadow:0 10px 25px rgba(139,0,0,0.4);
}

/* HOVER EFFECT */
.contact-cta-btn:hover{
    transform:translateY(-5px);
    box-shadow:
        0 0 20px rgba(139,0,0,0.7),
        0 15px 35px rgba(0,0,0,0.15);
}


/* PAGE BACKGROUND */
.franchise-page{
    padding:80px 0;
    background:#f4f6f9;
    text-align:center;
}

/* GOLD STRIP */
.franchise-strip{
    display:inline-block;
    padding:16px 60px;
    background:linear-gradient(90deg,#d4af37,#f6e27a,#c89b3c);
    font-weight:700;
    letter-spacing:2px;
    border-radius:6px;
    margin-bottom:60px;
}

/* CONTAINER */
.franchise-container{
    width:1100px;
    max-width:95%;
    margin:0 auto 80px;
}

/* FORM BOX */
.franchise-box{
    background:#ffffff;
    padding:50px;
    border-radius:20px;
    transition:0.4s;
    border:2px solid transparent;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* MAROON GLOW HOVER */
.franchise-box:hover{
    transform:translateY(-8px);
    border:2px solid #8b0000;
    box-shadow:
        0 0 15px #8b0000,
        0 0 35px rgba(139,0,0,0.5);
}

.franchise-box h2{
    margin-bottom:40px;
    color:#1e293b;
}

/* FORM */
.franchise-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-row{
    display:flex;
    gap:20px;
}

.form-row input{
    flex:1;
}

/* INPUTS */
.franchise-form input,
.franchise-form select{
    padding:14px;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:14px;
    transition:0.3s;
}

.franchise-form input:focus,
.franchise-form select:focus{
    border-color:#d4af37;
    outline:none;
}

/* TERMS */
.terms{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
}

/* BUTTON */
.franchise-form button{
    background:#8b0000;
    color:#fff;
    padding:14px;
    border:none;
    border-radius:30px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.franchise-form button:hover{
    background:#c40000;
    box-shadow:
        0 0 10px #c40000,
        0 0 25px rgba(196,0,0,0.6);
}

/* PROMO BOX */
.franchise-promo{
    width:1100px;
    max-width:95%;
    margin:0 auto;
    padding:40px;
    border-radius:15px;
    background:linear-gradient(135deg,#1e293b,#243247);
    color:#fff;
    transition:0.4s;
    border:2px solid #d4af37;
}

/* GOLD GLOW HOVER */
.franchise-promo:hover{
    transform:translateY(-6px);
    box-shadow:
        0 0 20px rgba(212,175,55,0.5),
        0 0 40px rgba(212,175,55,0.3);
}

.franchise-promo h3{
    color:#d4af37;
    margin-bottom:15px;
}

.promo-contact{
    margin-top:15px;
    font-weight:600;
}



/* ================= PRODUCT PAGE ================= */

.product-page{
    padding:30px 80px;
    background:#f9f9f9;
}

/* GOLD STRIP */
.product-strip{
    display:block;                 /* ensure block */
    width:fit-content;             /* shrink to content */
    margin:10px auto 30px auto;    /* center horizontally */
    padding:14px 50px;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(90deg,#d4af37,#f6e27a,#c89b3c);
    color:#000;
    border-radius:8px;
    text-align:center;
}                                

/* INTRO BOX */
.product-intro-box{
    background:#fceeee;
    padding:40px 60px;
    border-radius:18px;
    margin:0 auto 60px auto;
    max-width:900px;
    text-align:center;   /* ✅ CENTER TEXT */
    transition:0.4s;
    border:2px solid transparent;
}

.product-intro-box h3{
    color:#8b0000;
    margin-bottom:15px;
    font-size:22px;
}

.product-intro-box p{
    color:#444;
    line-height:28px;
    font-size:15px;
}

/* GLOW HOVER */
.product-intro-box:hover{
    border:2px solid #8b0000;
    box-shadow:
        0 0 15px #8b0000,
        0 0 30px rgba(139,0,0,0.4);
    transform:translateY(-8px);
}

/* GRID */
.product-container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.product-grid{
    width:1200px;
    max-width:95%;
    margin:60px auto;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:40px;
}
/* CARD */
.product-card{
    background:#ffffff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    transition:0.4s;
    display:flex;
    flex-direction:column;
}

/* HOVER GLOW */
.product-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 0 20px rgba(196,0,0,0.3),
        0 20px 40px rgba(0,0,0,0.12);
}


/* GOLD BORDER GLOW */
.product-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:2px;
    background:linear-gradient(45deg,#d4af37,#f6e27a,#d4af37);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition:0.4s;
}

.product-card:hover::before{
    opacity:1;
}

/* MEDIA */
.product-media{
    width:100%;
    height:320px; /* fixed proper height */
    overflow:hidden;
}

.product-media img,
.product-media video{
    width:100%;
    height:100%;
    object-fit:cover; /* keeps it clean without stretch */
    display:block;
}
/* FIX PRODUCT MEDIA HEIGHT */
.product-media{
    height:260px;
    overflow:hidden;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}

/* VIDEO PREVIEW WRAPPER */
.product-video-preview{
    position:relative;
    width:100%;
    height:100%;
}

/* VIDEO FULL COVER */
.product-video-preview video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* CONTENT */
.product-content{
    padding:25px 30px;
    text-align:left;
}

/* TITLE */
.product-content h3{
    font-size:20px;   /* reduced size */
    margin-bottom:10px;
    color:#1e293b;
}

/* DESCRIPTION */
.product-content p{
    font-size:14px;   /* reduced size */
    line-height:22px;
    color:#555;
    margin-bottom:20px;
}

/* QUERY BUTTON */
.query-btn{
    display:inline-block;
    padding:10px 22px;
    background:#c40000;
    color:#fff;
    text-decoration:none;
    border-radius:25px;
    font-size:14px;
    font-weight:600;
    transition:0.3s;
}

.query-btn:hover{
    background:#d4af37;
    color:#000;
    box-shadow:0 0 15px #d4af37;
}
.query-btn{
    position:relative;
    z-index:10;
}
/* ================= IMAGE CTA CARDS ================= */

.cta-cards-section{
    padding:50px 100px;
    background:#ffffff;
}

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

/* CARD */
.cta-card{
    position:relative;
    height:350px;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    transition:0.4s;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* IMAGE */
.cta-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
    display:block;
}

/* DARK OVERLAY */
.cta-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.4) 40%,
        rgba(0,0,0,0.2) 70%,
        rgba(0,0,0,0.1) 100%
    );
    transition:0.4s;
  pointer-events:none;
   z-index:2;
}

/* BUTTON CENTER */
/* BUTTON AT BOTTOM */
.cta-btn{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    padding:12px 28px;
    background:#c40000;
    color:#fff;
    border:none;
    border-radius:25px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
     z-index:5;  
    transition:0.3s;
}

.cta-btn:hover{
    background:#d4af37;
    color:#000;
    box-shadow:0 0 15px #d4af37;
}

/* HOVER EFFECT */
.cta-card:hover img{
    transform:scale(1.08);
}

.cta-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 0 25px rgba(196,0,0,0.3),
        0 0 45px rgba(212,175,55,0.3);
}

/* GOLD BORDER GLOW */
.cta-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:2px;
    background:linear-gradient(45deg,#d4af37,#f6e27a,#d4af37);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:0.4s;
    z-index:3;
    pointer-events:none;
}

.cta-card:hover::before{
    opacity:1;
}

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

@media (max-width:1024px){
    .cta-cards-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){
    .cta-cards-section{
        padding:60px 20px;
    }

    .cta-cards-grid{
        grid-template-columns:1fr;
    }
}
/* ========================================= */
/* ========== MOBILE RESPONSIVE ============ */
/* ========================================= */

@media (max-width:768px){



/* ===== MAIN HEADER ===== */
.main-header{
    padding:10px 20px;
}

.logo img{
    height:55px;
    width:95px;
}

.navbar{
    display:none;   /* Hide desktop nav */
}

/* ===== SLIDER ===== */
.slider,
.slides,
.slide,
.slide img{
    height:250px;
}

/* Arrows smaller */
.arrow{
    padding:8px 12px;
    font-size:18px;
}

/* ===== ABOUT SECTION ===== */
.about-section{
    padding:50px 20px;
}

.about-container{
    flex-direction:column;
    gap:25px;
}

.about-box{
    height:auto;
    padding:25px;
}

.content-box h2{
    font-size:22px;
}

.content-box p{
    font-size:14px;
    line-height:22px;
}

/* ===== HOME VIDEO ===== */
.home-video-section{
    padding:50px 20px;
}

.home-video-card{
    flex-direction:column;
}

.home-video-left{
    height:220px;
}

.home-video-right{
    padding:30px 20px;
}

.home-video-right h2{
    font-size:22px;
}

.know-more-btn{
    width:100%;
    text-align:center;
}

/* ===== COUNTER ===== */
.counter-section{
    padding:50px 20px;
}

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

.counter-box h2{
    font-size:32px;
}

/* ===== TEAM ===== */
.team-section{
    padding:60px 20px;
}

.team-container{
    flex-direction:column;
    gap:25px;
}

.team-heading h2{
    font-size:28px;
}

/* ===== TESTIMONIAL ===== */
.testimonial-section{
    padding:60px 20px;
}

.testimonial-card{
    min-width:100%;
    margin:0 0 20px 0;
}

/* ===== FOOTER ===== */
.footer-top-boxes{
    flex-direction:column;
    gap:25px;
}

.footer-box{
    padding:30px 20px;
}

/* ===== ABOUT PAGE ===== */
.units-container{
    flex-direction:column;
    gap:25px;
}

.flip-card-container{
    flex-direction:column;
}

.journey-section{
    padding:40px 20px;
}

.journey-year{
    left:-60px;
    font-size:12px;
}

/* ===== WHY MINI ===== */
.why-mini-container{
    flex-direction:column;
    align-items:center;
}

.why-mini-card{
    width:100%;
}

/* ===== CONTACT ===== */
.contact-container{
    flex-direction:column;
    gap:25px;
}

.map-section{
    flex-direction:column;
}

/* Form rows stack */
.form-row{
    flex-direction:column;
}

/* ===== FRANCHISE ===== */
.franchise-container,
.franchise-promo{
    padding:20px;
}

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

/* ===== PRODUCT ===== */
.product-page{
    padding:50px 20px;
}

.product-grid{
    grid-template-columns:1fr;
    gap:25px;
}

.product-intro-box{
    padding:25px 20px;
}

.product-media{
    height:200px;
}

.product-content{
    padding:20px;
}

/* ===== QUICK QUERY ===== */
.quick-query-container{
    flex-direction:column;
    gap:15px;
}

.quick-card{
    width:100%;
}

/* ===== WhatsApp Icon Smaller ===== */
.whatsapp-float{
    width:50px;
    height:50px;
    font-size:22px;
    right:15px;
    bottom:15px;
}

 /* ================================= */
/* ===== FINAL MOBILE HEADER FIX === */
/* ================================= */

/* Hide mobile elements on desktop */
.mobile-menu-btn{
    display:none;
}

.mobile-navbar{
    display:none;
}

@media screen and (max-width:768px){

/* Hide desktop navbar */
.navbar{
    display:none !important;
}

/* Show hamburger */
.mobile-menu-btn{
    display:block;
    font-size:26px;
    cursor:pointer;
}

/* Header layout fix */
.main-header{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 15px;
}

/* Mobile dropdown menu */
.mobile-navbar{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#ffffff;
    flex-direction:column;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    padding:15px 0;
    z-index:9999;
}

.mobile-navbar a{
    display:block;
    padding:12px 0;
    text-decoration:none;
    color:#111;
    font-weight:600;
}

.mobile-navbar.active{
    display:flex;
}