*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#070707;

}

.header{

position:fixed;

top:0;

left:0;

width:100%;

padding:6px 0;

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

backdrop-filter:blur(15px);

z-index:999;

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

}

.container{

width:90%;

max-width:1400px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:95px;

height:95px;

border-radius:50%;

object-fit:cover;

transition:0.3s ease;

}

.logo-text h2{

color:white;

font-size:28px;

font-weight:700;

}

.logo-text p{

color:#cfcfcf;

font-size:13px;

letter-spacing:1px;

}

.nav-links{

display:flex;

list-style:none;

gap:35px;

}

.nav-links a{

text-decoration:none;

color:white;

font-size:16px;

transition:.3s;

}

.nav-links a:hover{

color:#ff3030;

}

.book-btn{

padding:12px 28px;

background:#ff3030;

color:white;

text-decoration:none;

border-radius:40px;

font-weight:600;

transition:.4s;

}

.book-btn:hover{

background:white;

color:#111;

}

.menu-btn{

display:none;

color:white;

font-size:28px;

cursor:pointer;

}

/* ===== Orange Light Sweep Effect ===== */

.header::before{

content:"";

position:absolute;

top:0;

left:-35%;

width:30%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,140,0,0.08),
rgba(255,170,0,0.45),
rgba(255,140,0,0.08),
transparent
);

transform:skewX(-25deg);

animation:headerLight 6s linear infinite;

pointer-events:none;

}

@keyframes headerLight{

0%{

left:-35%;

}

100%{

left:135%;

}

}
/*==================================================
        MAHAVEER CINEMATIC INTRO
==================================================*/

.brand-banner{

    position:relative;

    margin-top:110px;

    height:100px;

    overflow:hidden;

    background:#050505;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* Metallic Border */

.top-line,
.bottom-line{

    position:absolute;

    left:0;

    width:100%;

    height:1px;

}

.top-line{

    top:0;

    background:
    linear-gradient(
    90deg,
    #222,
    #999,
    white,
    #999,
    #222);

}

.bottom-line{

    bottom:0;

    background:
    linear-gradient(
    90deg,
    #ff6a00,
    #ffb300,
    #ff6a00);

}
/*==================================================
            CINEMATIC SMOKE SYSTEM
==================================================*/

/* Smoke Layer */

.smoke-layer{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:2;

}

/* Main Smoke */

.smoke-layer::before{

    content:"";

    position:absolute;

    top:18px;

    right:-420px;

    width:520px;

    height:65px;

    border-radius:60px;

    background:
    radial-gradient(circle at 20% 50%,
    rgba(255,255,255,.55),
    rgba(220,220,220,.35) 35%,
    rgba(170,170,170,.18) 60%,
    transparent 100%);

    filter:blur(18px);

    animation:smokeMain 8s ease-in-out infinite;

}

/* Secondary Smoke */

.smoke-layer::after{

    content:"";

    position:absolute;

    top:10px;

    right:-520px;

    width:700px;

    height:85px;

    border-radius:100px;

    background:
    radial-gradient(circle at 30% 50%,
    rgba(255,255,255,.18),
    rgba(180,180,180,.12) 45%,
    transparent 100%);

    filter:blur(32px);

    animation:smokeSoft 8s ease-in-out infinite;

}


/* Smoke Animation */

@keyframes smokeMain{

0%{

    right:-420px;

    opacity:0;

    transform:scale(.75);

}

12%{

    opacity:.95;

}

45%{

    right:18%;

    opacity:.85;

    transform:scale(1);

}

65%{

    right:58%;

    opacity:.45;

    transform:scale(1.25);

}

82%{

    opacity:.18;

}

100%{

    right:115%;

    opacity:0;

    transform:scale(1.55);

}

}


@keyframes smokeSoft{

0%{

    right:-520px;

    opacity:0;

    transform:scale(.9);

}

15%{

    opacity:.55;

}

48%{

    right:10%;

    opacity:.45;

}

72%{

    right:55%;

    opacity:.18;

    transform:scale(1.4);

}

100%{

    right:115%;

    opacity:0;

    transform:scale(1.7);

}

}
/*==================================================
            PART 3 - CAR & HEADLIGHT
==================================================*/

/* Car */

.race-car{

    position:absolute;

    top:18px;

    right:-260px;

    height:48px;

    z-index:20;

    filter:
        drop-shadow(0 0 10px rgba(255,120,0,.45))
        drop-shadow(0 0 20px rgba(255,80,0,.25));

    animation:carRun 8s cubic-bezier(.55,.02,.28,.98) infinite;

}


/* Headlight Beam */

.headlight{

    position:absolute;

    top:34px;

    right:-215px;

    width:260px;

    height:18px;

    z-index:15;

    border-radius:40px;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.95),
        rgba(255,220,120,.75),
        rgba(255,165,0,.45),
        transparent
    );

    filter:blur(9px);

    transform-origin:right center;

    animation:headlightRun 8s cubic-bezier(.55,.02,.28,.98) infinite;

}


/* Small Orange Glow under Car */

.race-car::after{

    content:"";

    position:absolute;

    left:25%;

    bottom:-6px;

    width:60px;

    height:8px;

    border-radius:50%;

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

    filter:blur(8px);

}


/* Car Motion */

@keyframes carRun{

0%{

    right:-260px;

    transform:scale(.92);

}

10%{

    transform:scale(1);

}

55%{

    right:110%;

    transform:scale(1);

}

100%{

    right:110%;

    transform:scale(1);

}

}


/* Headlight Motion */

@keyframes headlightRun{

0%{

    right:-215px;

    opacity:0;

}

6%{

    opacity:1;

}

55%{

    right:110%;

    opacity:1;

}

72%{

    opacity:0;

}

100%{

    right:110%;

    opacity:0;

}
}
/*==================================================
            PART 4 - FIRE BRAND TITLE
==================================================*/

.brand-text{

    position:absolute;

    left:50%;

    top:50%;

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

    width:100%;

    text-align:center;

    z-index:10;

    font-size:68px;

    font-weight:900;

    letter-spacing:12px;

    text-transform:uppercase;

    white-space:nowrap;

    color:#ff8c00;

    opacity:0;

    user-select:none;

    text-shadow:
        0 0 6px rgba(255,150,0,.25),
        0 0 14px rgba(255,120,0,.20);

    animation:
        brandReveal 8s ease-in-out infinite,
        fireGlow 2.2s ease-in-out infinite;

}


/*--------------------------------------------------
        BRAND REVEAL
--------------------------------------------------*/

@keyframes brandReveal{

0%,48%{

    opacity:0;

    filter:
        blur(18px);

    transform:
        translate(-50%,-50%)
        scale(.96);

}

58%{

    opacity:1;

    filter:
        blur(4px);

}

65%{

    opacity:1;

    filter:
        blur(0);

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

}

82%{

    opacity:1;

}

92%{

    opacity:.35;

    filter:
        blur(4px);

}

100%{

    opacity:0;

    filter:
        blur(14px);

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

}

}


/*--------------------------------------------------
        HOT METAL / FIRE GLOW
--------------------------------------------------*/

@keyframes fireGlow{

0%{

color:#ff7a00;

text-shadow:

0 0 6px rgba(255,120,0,.25),
0 0 14px rgba(255,140,0,.18);

}

25%{

color:#ffb347;

text-shadow:

0 0 8px rgba(255,170,0,.45),
0 0 18px rgba(255,120,0,.30),
0 0 28px rgba(255,90,0,.18);

}

50%{

color:#ffd27a;

text-shadow:

0 0 10px rgba(255,190,0,.55),
0 0 24px rgba(255,130,0,.35),
0 0 40px rgba(255,70,0,.20);

}

75%{

color:#ffae42;

text-shadow:

0 0 8px rgba(255,160,0,.40),
0 0 18px rgba(255,120,0,.25);

}

100%{

color:#ff7a00;

text-shadow:

0 0 6px rgba(255,120,0,.25),
0 0 14px rgba(255,120,0,.18);

}

}
/*==================================================
        PART 5 - FINAL POLISH
==================================================*/

/* Smooth Rendering */

.brand-banner,
.brand-text,
.race-car,
.headlight,
.smoke-layer{

    will-change:transform,opacity,filter;

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

}

/* Slightly brighter while visible */

@keyframes premiumPulse{

0%,100%{

filter:brightness(1);

}

50%{

filter:brightness(1.08);

}

}

.brand-text{

animation:

brandReveal 8s ease-in-out infinite,

fireGlow 2.5s ease-in-out infinite,

premiumPulse 2.5s ease-in-out infinite;

}


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

@media (max-width:768px){

.brand-banner{

    margin-top:82px;

    height:68px;

}

.race-car{

    height:30px;

    top:18px;

}

.headlight{

    width:120px;

    height:7px;

    top:30px;

}

.smoke-layer::before{

    height:42px;

    width:260px;

    top:14px;

}

.smoke-layer::after{

    height:52px;

    width:320px;

    top:10px;

}

.brand-text{

    font-size:26px;

    letter-spacing:2px;

    padding:0 10px;

}

}


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

@media (min-width:769px) and (max-width:1199px){

.brand-text{

    font-size:46px;

    letter-spacing:6px;

}

}


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

@media (min-width:1600px){

.brand-text{

    font-size:82px;

    letter-spacing:18px;

}

}
/*==========================================
            HERO SECTION
==========================================*/

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    background:url("hero.png") center right/cover no-repeat;

    overflow:hidden;

}

/* Dark overlay for text readability */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.68) 35%,
        rgba(0,0,0,.28) 60%,
        rgba(0,0,0,.05) 100%
    );

}

/* Content container */

.hero-content{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1400px;

    height:100vh;

    margin:auto;

    display:flex;

    align-items:center;

}
/*==========================================
        HERO CONTENT
==========================================*/

.hero-left{

    width:48%;

    color:#fff;

    animation:heroFade 1.3s ease;

}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    border:1px solid rgba(255,170,0,.45);

    background:rgba(255,120,0,.08);

    color:#ffb347;

    letter-spacing:2px;

    font-size:14px;

    border-radius:40px;

    backdrop-filter:blur(8px);

}

.hero-left h1{

    margin-top:30px;

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1px;

}

.hero-left h1 span{

    color:#ff8c00;

    text-shadow:
    0 0 18px rgba(255,120,0,.28);

}

.hero-left p{

    margin-top:25px;

    max-width:650px;

    color:#d8d8d8;

    line-height:1.8;

    font-size:18px;

}

.hero-buttons{

    margin-top:45px;

    display:flex;

    gap:20px;

}
.hero-btn{

    padding:18px 38px;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.primary-btn{

    background:#ff7a00;

    color:#fff;

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(255,120,0,.45);

}

.secondary-btn{

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

    color:#fff;

    backdrop-filter:blur(8px);

}

.secondary-btn:hover{

    background:#fff;

    color:#111;

}
@keyframes heroFade{

0%{

    opacity:0;

    transform:translateX(-60px);

}

100%{

    opacity:1;

    transform:translateX(0);

}

}
/*==========================================
        HERO TRUST CARDS
==========================================*/

.hero-trust{

    position:absolute;

    right:40px;

    bottom:5px;

    display:flex;

    gap:18px;

    z-index:20;

}
.trust-card{

    width:145px;

    height:105px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(18px);

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

    border-radius:18px;

}

.trust-card:nth-child(2){

    animation-delay:.3s;

}

.trust-card:nth-child(3){

    animation-delay:.6s;

}

.trust-card:nth-child(4){

    animation-delay:.9s;

}

.trust-card i{

    font-size:28px;

    color:#ff8c00;

    margin-bottom:10px;

}

.trust-card h3{

    color:#fff;

    font-size:28px;

    font-weight:700;

    margin-bottom:6px;

}

.trust-card p{

    color:#cfcfcf;

    font-size:14px;

    letter-spacing:.5px;

}

.trust-card:hover{

    transform:translateY(-10px) scale(1.05);

    border-color:#ff8c00;

    box-shadow:

        0 20px 40px rgba(255,140,0,.30),

        0 0 30px rgba(255,140,0,.18);

}

/* Floating Animation */

@keyframes cardFloat{

0%,100%{

    transform:translateY(0);

}

50%{

    transform:translateY(-8px);

}

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

.about{

    padding:100px 0 50px;

    background:#0b0b0b;

    position:relative;

    overflow:hidden;

}

.about::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-200px;

    right:-150px;

    background:rgba(255,120,0,.08);

    filter:blur(120px);

}

.about-container{

    width:90%;
    max-width:1400px;

    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    position:relative;

    overflow:visible;
}

/* Floating Cards */

.about-image-card,
.about-content-card{

    position:relative;

    border-radius:28px;

    overflow:hidden;

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

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

    backdrop-filter:blur(18px);

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

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

    transition:.45s;

}

.about-content-card{

    padding:38px 42px;

    min-height:620px;      /* Same as image */

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    animation-delay:.8s;

}

.about-image-card{

    position:relative;

    height:620px;

    border-radius:28px;

    overflow:hidden;

    z-index:5;

    transition:
        width .9s cubic-bezier(.22,1,.36,1),
        height .9s cubic-bezier(.22,1,.36,1),
        transform .9s cubic-bezier(.22,1,.36,1),
        border-radius .9s,
        box-shadow .9s;

}

/* Workshop Image */

.about-image-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s;

}

/* Hidden Overlay */

.image-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

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

    opacity:0;

    transition:.45s;

}

.image-overlay h3{

    color:#fff;

    font-size:34px;

    margin-bottom:15px;

}

.image-overlay p{

    color:#ddd;

}

/* Right Content */

.about-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(255,120,0,.08);

    color:#ffb347;

    border:1px solid rgba(255,170,0,.35);

    letter-spacing:2px;

    font-size:13px;

}

.about-content-card h2{

    margin-top:18px;

    font-size:46px;

    color:#fff;

    line-height:1.08;

}

.about-content-card h2 span{

    color:#ff8c00;

}

.about-content-card p{

    margin-top:18px;

    color:#d5d5d5;

    line-height:1.7;

    font-size:16px;

}

/* Features */

.about-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-top:22px;

}

.feature{

    padding:14px 16px;

    border-radius:14px;

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

    color:#fff;

    transition:.35s;

}

.feature i{

    color:#ff8c00;

    margin-right:10px;

}

.feature:hover{

    background:#ff8c00;

    transform:translateY(-5px);

}

.feature:hover i{

    color:white;

}

/* Button */

.about-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:60px;

    margin-top:26px;

    border-radius:50px;

    background:#ff7a00;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    font-size:30px;

    line-height:1;

    transition:.35s;

}

.about-btn:hover{

    transform:translateY(-5px);

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

}
/* Card Hover */

.about-image-card:hover,
.about-content-card:hover{

    transform:translateY(-12px);

    border-color:#ff8c00;

}

/* Floating Animation */

@keyframes aboutFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}
/*==========================================
        ABOUT IMAGE HOVER EFFECT
==========================================*/

.about-container:hover .about-image-card{

    transform:scale(1);

}

.about-image-card:hover{

    transform:scale(1.18);

    transform-origin:left center;

    z-index:20;

    box-shadow:
        0 30px 80px rgba(255,120,0,.35),
        0 0 60px rgba(255,120,0,.18);

}

.about-image-card:hover img{

    transform:scale(1.05);

    filter:brightness(.85);

}

.about-image-card:hover .image-overlay{

    opacity:1;

    backdrop-filter:blur(2px);

}
.about-container.banner-open .about-content-card{
    opacity:0;

    transform:scale(.95);

    pointer-events:none;

}
/*==========================================
        CINEMATIC BANNER EXPANSION
==========================================*/

.about-container{

    position:relative;

}

.about-container.banner-open .about-image-card{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:620px;

    z-index:100;

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 40px 100px rgba(0,0,0,.55),
        0 0 70px rgba(255,120,0,.30);

}
.about-container.banner-open .about-image-card img{

    transform:scale(1.05);

    filter:brightness(.85);

}

.about-container.banner-open .image-overlay{

    opacity:1;

    backdrop-filter:blur(2px);

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

.services{

    padding:35px 0 25px;

    background:#0b0b0b;

    position:relative;

    overflow:hidden;

}

.services::before{
    content:"";
    position:absolute;
    top:-180px;
    left:-180px;
    width:450px;
    height:450px;
    background:rgba(255,120,0,.05);
    filter:blur(140px);
}

.services-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
/*==========================================
            SECTION TITLE
==========================================*/

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    display:inline-block;
    padding:10px 26px;
    border-radius:40px;
    background:rgba(255,120,0,.08);
    color:#ffb347;
    border:1px solid rgba(255,170,0,.35);
    letter-spacing:2px;
    font-size:13px;
    font-weight:600;
}

.section-title h2{
    margin:22px 0;
    color:#fff;
    font-size:56px;
    font-weight:800;
}

.section-title p{
    width:700px;
    margin:auto;
    color:#cfcfcf;
    font-size:18px;
    line-height:1.8;
}

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

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,320px);

    justify-content:space-between;

    row-gap:50px;

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

.service-card{

    position:relative;

    width:360px;

    min-height:210px;

    background:#f5f5f5;

    border-top:4px solid #d87400;

    border-bottom:4px solid #d87400;

    border-radius:28px;

    padding:45px 22px 20px;

    text-align:center;

    transition:.45s;

    box-shadow:0 18px 35px rgba(0,0,0,.22);

}

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

.service-icon{

    position:absolute;

    top:-28px;

    left:50%;

    transform:translateX(-50%);

    width:64px;

    height:64px;

    border-radius:50%;

    background:#ffffff;

    border:4px solid #d87400;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    0 0 18px rgba(255,120,0,.22);

    transition:.45s;

}

.service-icon i{

    font-size:30px;

    color:#d87400;

}

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

.service-card h3{

    font-size:24px;

    font-weight:700;

    color:#111;

    margin-bottom:10px;

}

.service-card p{

    font-size:16px;

    color:#5b5b5b;

    min-height:42px;

    line-height:1.6;

}

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

.service-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:30px;

    width:185px;

    height:50px;

    border-radius:50px;

    background:#d87400;

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.service-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:55%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.service-btn:hover::before{

    left:150%;

}

.service-btn:hover{

    background:#111;

}

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

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 55px rgba(0,0,0,.35),

    0 0 25px rgba(255,120,0,.18);

}

.service-card:hover .service-icon{

    transform:translateX(-50%) scale(1.08);

    box-shadow:

    0 12px 28px rgba(0,0,0,.22),

    0 0 28px rgba(255,120,0,.30);

}
/*==========================================
        PREMIUM SECTION DIVIDER
==========================================*/

.section-divider{

    width:90%;
    max-width:1400px;

    height:2px;

    margin:25px auto 0;

    background:#ff7a00;

    border-radius:50px;

    animation:sectionGlow 3.5s ease-in-out infinite;

}

@keyframes sectionGlow{

    0%,100%{

        opacity:.7;

        box-shadow:
            0 0 3px rgba(255,122,0,.25);

    }

    50%{

        opacity:1;

        box-shadow:
            0 0 10px rgba(255,122,0,.55),
            0 0 18px rgba(255,179,71,.35);

    }

}
/*==========================================
        SERVICES ACTION BUTTONS
==========================================*/

.services-action{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;

    margin:30px 0 18px;

}

.services-book-btn,
.services-contact-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    width:270px;
height:70px;

    border-radius:60px;

    text-decoration:none;

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

    transition:.35s;

}

/* Primary Button */

.services-book-btn{

    background:#ff7a00;
    color:#fff;

}

.services-book-btn:hover{

    transform:translateY(-5px);

    box-shadow:
        0 12px 30px rgba(255,122,0,.35);

}

/* Secondary Button */

.services-contact-btn{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,122,0,.65);

}

.services-contact-btn:hover{

    background:#ff7a00;

    border-color:#ff7a00;

    transform:translateY(-5px);

}
.services-book-btn i,
.services-contact-btn i{

    font-size:24px;

}
/*==========================================
        WHY CHOOSE MAHAVEER CAR CARE
===========================================*/

.why-choose {
    position: relative;
    width: 100%;
     padding: 80px 6% 75px !important;
    background: #050505 !important;
    color: #ffffff !important;
    overflow: hidden;
}


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

.why-section-title {
    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto 65px !important;

    text-align: center !important;
}


/*------------------------------------------
        BADGE
-------------------------------------------*/

.why-section-badge {
    display: inline-block !important;

    padding: 11px 28px !important;

    border: 1px solid rgba(255, 145, 0, 0.65) !important;

    border-radius: 30px !important;

    background: rgba(255, 102, 0, 0.06) !important;

    color: #ff7a00 !important;

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

    letter-spacing: 2px !important;

    text-transform: uppercase !important;
}


/*------------------------------------------
        MAIN HEADING
-------------------------------------------*/

.why-section-title h2 {
    display: block !important;

    width: 100% !important;

    margin: 32px auto 22px !important;

    padding: 0 !important;

    color: #ffffff !important;

    font-size: 52px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;

    letter-spacing: -1px !important;

    text-align: center !important;
}

.why-section-title h2 span {
    color: #ff6500 !important;
}


/*------------------------------------------
        DESCRIPTION
-------------------------------------------*/

.why-section-title p {
    display: block !important;

    max-width: 760px !important;

    margin: 0 auto !important;

    color: #b5b5b5 !important;

    font-size: 16px !important;
    line-height: 1.8 !important;

    text-align: center !important;
}


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

.why-container {
    width: 100% !important;

    max-width: 1250px !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns: 0.92fr 1.08fr !important;

    gap: 65px !important;

    align-items: center !important;
}


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

.why-image {
    position: relative !important;

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

    overflow: hidden !important;

    border-radius: 5px !important;

    border: 1px solid rgba(255, 102, 0, 0.35) !important;

    background: #090909 !important;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.55) !important;
}

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

    display: block !important;

    object-fit: cover !important;

    transition: transform 0.8s ease !important;
}

.why-image:hover img {
    transform: scale(1.035) !important;
}


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

.why-content {
    width: 100% !important;

    text-align: left !important;
}


/*------------------------------------------
        SUB HEADING
-------------------------------------------*/

.why-subtitle {
    display: inline-block !important;

    margin-bottom: 12px !important;

    color: #ff6500 !important;

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

    letter-spacing: 2.5px !important;

    text-transform: uppercase !important;
}


/*------------------------------------------
        RIGHT HEADING
-------------------------------------------*/

.why-content > h3 {
    display: block !important;

    margin: 0 0 15px !important;

    color: #ffffff !important;

    font-size: 32px !important;
    line-height: 1.25 !important;

    font-weight: 750 !important;

    text-align: left !important;
}

.why-content > h3 span {
    color: #ff6500 !important;
}


/*------------------------------------------
        RIGHT DESCRIPTION
-------------------------------------------*/

.why-content .why-intro {
    max-width: 600px !important;

    margin: 0 0 28px !important;

    color: #9fa5ad !important;

    font-size: 14px !important;

    line-height: 1.75 !important;

    text-align: left !important;
}


/*==========================================
        FEATURE GRID
===========================================*/

.why-features {
    display: grid !important;

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

    gap: 18px !important;
}


/*==========================================
        FEATURE CARD
===========================================*/

.why-feature {
    position: relative !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 15px !important;

    min-height: 125px !important;

    padding: 22px 20px !important;

    background: #0b0b0b !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    border-top: 2px solid #ff6500 !important;

    border-radius: 4px !important;

    overflow: hidden !important;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease !important;
}


/*------------------------------------------
        CARD GLOW
-------------------------------------------*/

.why-feature::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    top: -45px;
    right: -45px;

    border-radius: 50%;

    background: rgba(255, 101, 0, 0.08);

    transition: transform 0.4s ease;
}

.why-feature:hover {
    transform: translateY(-5px) !important;

    background: #101010 !important;

    border-color: rgba(255, 101, 0, 0.45) !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

.why-feature:hover::before {
    transform: scale(1.5);
}


/*==========================================
        NUMBER
===========================================*/

.why-feature-number {
    position: relative;

    z-index: 2;

    flex-shrink: 0;

    display: flex;

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

    width: 43px;
    height: 43px;

    border-radius: 50%;

    background: #ff6500 !important;

    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    box-shadow:
        0 0 0 5px rgba(255, 101, 0, 0.08);
}


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

.why-feature-content {
    position: relative;

    z-index: 2;
}

.why-feature-content h4 {
    margin: 2px 0 8px !important;

    color: #ffffff !important;

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

    text-align: left !important;
}

.why-feature-content p {
    margin: 0 !important;

    color: #9299a2 !important;

    font-size: 12px !important;

    line-height: 1.65 !important;

    text-align: left !important;
}


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

@media (max-width: 1000px) {

    .why-choose {
        padding: 90px 5% 100px !important;
    }

    .why-section-title {
        margin-bottom: 50px !important;
    }

    .why-section-title h2 {
        font-size: 44px !important;
    }

    .why-container {
        grid-template-columns: 1fr !important;

        gap: 50px !important;
    }

    .why-image {
        height: 560px !important;

        max-width: 800px !important;

        margin: 0 auto !important;
    }

    .why-content {
        max-width: 900px !important;

        margin: 0 auto !important;
    }
}


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

@media (max-width: 600px) {

    .why-choose {
        padding: 75px 20px 85px !important;
    }

    .why-section-title {
        margin-bottom: 40px !important;
    }

    .why-section-badge {
        padding: 9px 20px !important;

        font-size: 10px !important;

        letter-spacing: 1.8px !important;
    }

    .why-section-title h2 {
        margin: 25px 0 16px !important;

        font-size: 31px !important;

        line-height: 1.2 !important;
    }

    .why-section-title p {
        font-size: 13px !important;

        line-height: 1.7 !important;
    }

    .why-container {
        gap: 38px !important;
    }

    .why-image {
        height: 430px !important;
    }

    .why-subtitle {
        font-size: 10px !important;

        letter-spacing: 2px !important;
    }

    .why-content > h3 {
        font-size: 27px !important;

        line-height: 1.25 !important;
    }

    .why-intro {
        font-size: 13px !important;

        line-height: 1.7 !important;

        margin-bottom: 25px !important;
    }

    .why-features {
        grid-template-columns: 1fr !important;

        gap: 13px !important;
    }

    .why-feature {
        min-height: auto !important;

        padding: 18px 16px !important;
    }

    .why-feature-number {
        width: 38px !important;
        height: 38px !important;

        font-size: 11px !important;
    }

    .why-feature-content h4 {
        font-size: 14px !important;
    }

    .why-feature-content p {
        font-size: 11.5px !important;

        line-height: 1.6 !important;
    }
}
/*==========================================
        GALLERY SECTION
===========================================*/

.gallery-section {
    position: relative;

    width: 100%;

    padding: 75px 6% 100px;
            
   background: #050505;

    overflow: hidden;
}


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

.gallery-section-title {
    width: 100%;

    max-width: 900px;

    margin: 0 auto 65px;

    text-align: center;
}


/*------------------------------------------
        GALLERY BADGE
-------------------------------------------*/

.gallery-badge {
    display: inline-block;

    padding: 11px 28px;

    border: 1px solid rgba(255, 145, 0, 0.65);

    border-radius: 30px;

    background: rgba(255, 102, 0, 0.06);

    color: #ff7a00;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/*------------------------------------------
        GALLERY HEADING
-------------------------------------------*/

.gallery-section-title h2 {
    margin: 32px 0 22px;

    color: #ffffff;

    font-size: 52px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;
}

.gallery-section-title h2 span {
    color: #ff6500;
}


/*------------------------------------------
        GALLERY DESCRIPTION
-------------------------------------------*/

.gallery-section-title p {
    max-width: 760px;

    margin: 0 auto;

    color: #b5b5b5;

    font-size: 16px;

    line-height: 1.8;
}


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

.gallery-grid {
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

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

    grid-auto-rows: 250px;

    gap: 16px;
}


/*==========================================
        GALLERY ITEM
===========================================*/

.gallery-item {
    position: relative;

    overflow: hidden;

    min-width: 0;

    border-radius: 5px;

    border: 1px solid rgba(255, 102, 0, 0.25);

    background: #0b0b0b;

    cursor: pointer;

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* LARGE IMAGE */

.gallery-large {
    grid-column: span 2;

    grid-row: span 2;
}


/* WIDE IMAGE */

.gallery-wide {
    grid-column: span 2;
}


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

.gallery-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background:
        linear-gradient(
            135deg,
            #0b0b0b,
            #111111
        );

    border: 1px solid rgba(255, 255, 255, 0.035);

    color: #555b63;

    transition:
        transform 0.6s ease,
        color 0.35s ease;
}

.gallery-placeholder i {
    font-size: 32px;

    color: #ff6500;

    opacity: 0.65;
}

.gallery-placeholder span {
    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #6f747b;
}


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

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 20px;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0, 0, 0, 0.85) 100%
        );

    opacity: 0;

    transition: opacity 0.35s ease;
}


/* LABEL */

.gallery-overlay > span {
    color: #ffffff;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


/* VIEW ICON */

.gallery-view {
    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ff6500;

    color: #ffffff;

    font-size: 14px;

    transform: translateY(10px);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


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

.gallery-item:hover {
    border-color: rgba(255, 101, 0, 0.65);

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

.gallery-item:hover .gallery-placeholder {
    transform: scale(1.04);

    color: #ffffff;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-view {
    transform: translateY(0);
}

.gallery-item:hover .gallery-placeholder i {
    opacity: 1;
}


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

@media (max-width: 1000px) {

    .gallery-section {
        padding: 90px 5% 100px;
    }

    .gallery-section-title {
        margin-bottom: 50px;
    }

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

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

        grid-auto-rows: 240px;

        gap: 14px;
    }

    .gallery-large {
        grid-column: span 2;

        grid-row: span 2;
    }

    .gallery-wide {
        grid-column: span 2;
    }
}


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

@media (max-width: 600px) {

    .gallery-section {
        padding: 75px 20px 85px;
    }

    .gallery-section-title {
        margin-bottom: 40px;
    }

    .gallery-badge {
        padding: 9px 20px;

        font-size: 10px;

        letter-spacing: 1.8px;
    }

    .gallery-section-title h2 {
        margin: 25px 0 16px;

        font-size: 31px;

        line-height: 1.2;
    }

    .gallery-section-title p {
        font-size: 13px;

        line-height: 1.7;
    }

    .gallery-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 230px;

        gap: 13px;
    }

    .gallery-large,
    .gallery-wide {
        grid-column: span 1;

        grid-row: span 1;
    }

    .gallery-large {
        height: 300px;
    }

    .gallery-overlay {
        padding: 15px;
    }

    .gallery-view {
        width: 38px;

        height: 38px;

        font-size: 12px;
    }

}
/*==========================================
        FEATURED USED CARS - FINAL FIX
===========================================*/

.featured-used-cars {
    position: relative !important;

    width: 100% !important;

    height: 620px !important;

    min-height: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    display: flex !important;

    align-items: center !important;

    background: #050505 !important;
}


/*==========================================
        USED CAR IMAGE
===========================================*/

.featured-used-cars .featured-used-image {
    position: absolute !important;

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

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;

    object-position: center center !important;

    z-index: 1 !important;
}


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

.featured-used-cars .featured-used-overlay {
    position: absolute !important;

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

    width: 100% !important;

    height: 100% !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 8, 0.58) 0%,
            rgba(3, 5, 8, 0.40) 28%,
            rgba(3, 5, 8, 0.16) 55%,
            rgba(3, 5, 8, 0.02) 100%
        ) !important;
}


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

.featured-used-cars .featured-used-content {
    position: relative !important;

    z-index: 3 !important;

    width: 100% !important;

    max-width: 1250px !important;

    margin: 0 auto !important;

    padding: 0 6% !important;

    box-sizing: border-box !important;
}


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

.featured-used-cars .featured-used-badge {
    display: inline-block !important;

    color: #ff8a00 !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    text-transform: uppercase !important;
}


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

.featured-used-cars .featured-used-content h2 {
    max-width: 580px !important;

    margin: 24px 0 24px !important;

    color: #ffffff !important;

    font-size: 64px !important;

    line-height: 1.02 !important;

    font-weight: 800 !important;

    letter-spacing: -1.5px !important;
}

.featured-used-cars .featured-used-content h2 span {
    display: block !important;

    color: #ff6500 !important;

    font-size: 1.08em !important;

    letter-spacing: -2px !important;
}
/*==========================================
        DESCRIPTION
===========================================*/

.featured-used-cars .featured-used-content p {
    max-width: 560px !important;

    margin: 0 0 36px !important;

    color: #e7e9ec !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.8 !important;

    letter-spacing: 0.1px !important;
}


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

.featured-used-cars .featured-used-btn {
    position: relative !important;

    z-index: 4 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 22px !important;

    min-width: 320px !important;

    padding: 21px 32px !important;

    background: #ff6500 !important;

    border: 1px solid #ff7a1a !important;

    border-radius: 12px !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

    box-sizing: border-box !important;

    box-shadow:
        0 12px 35px rgba(255, 101, 0, 0.30) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease !important;
}

.featured-used-cars .featured-used-btn:hover {
    transform: translateY(-4px) !important;

    background: #ff7414 !important;

    box-shadow:
        0 18px 45px rgba(255, 101, 0, 0.42) !important;
}

.featured-used-cars .featured-used-btn i {
    font-size: 15px !important;

    transition: transform 0.3s ease !important;
}

.featured-used-cars .featured-used-btn:hover i {
    transform: translateX(6px) !important;
}


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

@media (max-width: 1000px) {

    .featured-used-cars {
        height: 560px !important;
    }

    .featured-used-cars .featured-used-content {
        padding: 0 5% !important;
    }

    .featured-used-cars .featured-used-content h2 {
        font-size: 48px !important;
    }

}


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

@media (max-width: 600px) {

    .featured-used-cars {
        height: 650px !important;

        min-height: 650px !important;

        align-items: flex-end !important;
    }

    .featured-used-cars .featured-used-image {
        object-position: 62% center !important;
    }

    .featured-used-cars .featured-used-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 5, 8, 0.10) 0%,
                rgba(3, 5, 8, 0.30) 35%,
                rgba(3, 5, 8, 0.85) 70%,
                rgba(3, 5, 8, 0.98) 100%
            ) !important;
    }

    .featured-used-cars .featured-used-content {
        padding: 0 20px !important;
    }

    .featured-used-cars .featured-used-content h2 {
        font-size: 38px !important;
    }

    .featured-used-cars .featured-used-content p {
        font-size: 13px !important;
    }

    .featured-used-cars .featured-used-btn {
        width: 100% !important;

        min-width: 0 !important;
    }

}
/*==========================================
        CUSTOMER REVIEWS
===========================================*/

.customer-reviews {
    position: relative;

    width: 100%;

    padding: 110px 6% 100px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 102, 0, 0.055),
            transparent 42%
        ),
        #050505;

    overflow: hidden;
}


/*==========================================
        CONTAINER
===========================================*/

.reviews-container {
    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


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

.reviews-section-title {
    width: 100%;

    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}


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

.reviews-badge {
    display: inline-block;

    padding: 11px 28px;

    border: 1px solid rgba(255, 145, 0, 0.65);

    border-radius: 30px;

    background: rgba(255, 102, 0, 0.06);

    color: #ff7a00;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.reviews-section-title h2 {
    margin: 25px 0 18px;

    color: #ffffff;

    font-size: 52px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;
}

.reviews-section-title h2 span {
    color: #ff6500;
}


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

.reviews-section-title p {
    max-width: 720px;

    margin: 0 auto;

    color: #aeb4bd;

    font-size: 15px;

    line-height: 1.8;
}


/*==========================================
        REVIEW GRID
===========================================*/

.reviews-grid {
    display: grid;

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

    gap: 22px;
}


/*==========================================
        REVIEW CARD
===========================================*/

.review-card {
    position: relative;

    min-height: 310px;

    padding: 32px 30px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 19, 24, 0.98),
            rgba(8, 10, 13, 0.98)
        );

    border: 1px solid rgba(255, 255, 255, 0.075);

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* TOP ORANGE ACCENT */

.review-card::before {
    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff6500,
            transparent
        );

    opacity: 0.65;
}


/* CARD HOVER */

.review-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(255, 102, 0, 0.38);

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.45),
        0 0 35px rgba(255, 102, 0, 0.07);
}


/*==========================================
        FEATURED REVIEW
===========================================*/

.featured-review {
    border-color:
        rgba(255, 102, 0, 0.28);

    transform: translateY(-8px);

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.42),
        0 0 40px rgba(255, 102, 0, 0.07);
}

.featured-review:hover {
    transform: translateY(-12px);
}


/*==========================================
        REVIEW TOP
===========================================*/

.review-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


/*==========================================
        STARS
===========================================*/

.review-stars {
    color: #ff7800;

    font-size: 18px;

    letter-spacing: 3px;
}


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

.review-quote {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background:
        rgba(255, 102, 0, 0.08);

    border: 1px solid
        rgba(255, 102, 0, 0.18);

    color: #ff6500;

    font-size: 15px;
}


/*==========================================
        REVIEW TEXT
===========================================*/

.review-text {
    margin: 0;

    color: #d8dce2;

    font-size: 14px;

    line-height: 1.85;

    font-weight: 400;
}


/*==========================================
        DIVIDER
===========================================*/

.review-divider {
    width: 100%;

    height: 1px;

    margin: 27px 0 22px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 102, 0, 0.35),
            rgba(255, 255, 255, 0.06),
            transparent
        );
}


/*==========================================
        CUSTOMER
===========================================*/

.review-customer {
    display: flex;

    align-items: center;

    gap: 13px;
}


/*==========================================
        AVATAR
===========================================*/

.review-avatar {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff6500,
            #c94e00
        );

    color: #ffffff;

    font-size: 15px;

    box-shadow:
        0 6px 18px rgba(255, 101, 0, 0.20);
}


/*==========================================
        CUSTOMER NAME
===========================================*/

.review-customer h4 {
    margin: 0 0 3px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


/*==========================================
        CUSTOMER TYPE
===========================================*/

.review-customer span {
    color: #777f8a;

    font-size: 11px;

    line-height: 1.4;
}


/*==========================================
        TRUST STATEMENT
===========================================*/

.reviews-trust {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 65px;
}


.reviews-trust-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 102, 0, 0.32)
        );
}

.reviews-trust-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255, 102, 0, 0.32),
            transparent
        );
}


.reviews-trust-content {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #bfc4ca;

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;
}


.reviews-trust-content i {
    color: #ff6500;

    font-size: 16px;
}


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

@media (max-width: 1000px) {

    .customer-reviews {
        padding: 90px 5% 85px;
    }


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


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

        gap: 18px;
    }


    .featured-review {
        transform: none;
    }

    .featured-review:hover {
        transform: translateY(-8px);
    }

}


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

@media (max-width: 600px) {

    .customer-reviews {
        padding: 75px 20px 80px;
    }


    .reviews-section-title {
        margin-bottom: 40px;
    }


    .reviews-badge {
        padding: 9px 20px;

        font-size: 10px;

        letter-spacing: 1.8px;
    }


    .reviews-section-title h2 {
        margin: 24px 0 16px;

        font-size: 32px;

        line-height: 1.2;
    }


    .reviews-section-title p {
        font-size: 13px;

        line-height: 1.7;
    }


    .reviews-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .review-card {
        min-height: auto;

        padding: 26px 22px;
    }


    .featured-review {
        transform: none;
    }


    .review-stars {
        font-size: 16px;

        letter-spacing: 2px;
    }


    .review-text {
        font-size: 13px;

        line-height: 1.75;
    }


    .reviews-trust {
        gap: 12px;

        margin-top: 40px;
    }


    .reviews-trust-line {
        display: none;
    }


    .reviews-trust-content {
        justify-content: center;

        width: 100%;

        font-size: 11px;
    }

}
/*==========================================
        FAQ SECTION - PREMIUM STYLE
===========================================*/

.faq-section {
    position: relative;
    width: 100%;
    padding: 110px 5% 30px;

    background: #050505;

    overflow: hidden;
    box-sizing: border-box;
}


/* SUBTLE ORANGE GLOW */

.faq-section::before {
    content: "";
    position: absolute;

    top: -180px;
    left: 50%;

    width: 500px;
    height: 350px;

    transform: translateX(-50%);

    background: rgba(255, 101, 0, 0.055);

    filter: blur(130px);

    pointer-events: none;
}


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

.faq-container {
    position: relative;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    display: block;
}


/* HEADER */

.faq-intro {
    width: 100%;

    text-align: center;

    margin-bottom: 35px;
}


/* BADGE */

.faq-badge {
    display: inline-block;

    padding: 11px 27px;

    border: 1px solid rgba(255, 140, 0, 0.75);

    border-radius: 40px;

    background: rgba(255, 101, 0, 0.045);

    color: #ff7200;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* MAIN HEADING */

.faq-intro h2 {
    max-width: 900px;

    margin: 28px auto 0;

    color: #ffffff;

    font-size: 58px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}


/* ORANGE HEADING WORD */

.faq-intro h2 span {
    color: #ff6500;
}


/* ORANGE DIVIDER */

.faq-intro h2::after {
    content: "";

    display: block;

    width: 150px;
    height: 3px;

    margin: 30px auto 0;

    background: linear-gradient(
        90deg,
        transparent,
        #ff6500,
        transparent
    );

    box-shadow:
        0 0 18px rgba(255, 101, 0, 0.65);
}


/* DESCRIPTION */

.faq-intro > p {
    max-width: 760px;

    margin: 30px auto 0;

    color: #b9bec6;

    font-size: 16px;

    line-height: 1.8;

    text-align: center;
}


/*==========================================
        REMOVE OLD TRUST BOX
===========================================*/

.faq-trust-box {
    display: none;
}


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

.faq-list {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin: 0 auto;
}


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

.faq-item {
    position: relative;

    width: 100%;

    background: #151515;

    border: 1px solid rgba(255, 135, 0, 0.32);

    border-radius: 22px;

    overflow: hidden;

    box-sizing: border-box;

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.faq-item:hover {
    border-color: rgba(255, 135, 0, 0.60);

    background: #181818;
}


.faq-item.active {
    border-color: rgba(255, 101, 0, 0.70);

    background: #171717;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.30),
        0 0 25px rgba(255, 101, 0, 0.055);
}


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

.faq-question {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;

    min-height: 100px;

    padding: 25px 30px;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff !important;

    font-family: inherit;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;
}


.faq-question span {
    flex: 1;

    color: #ffffff !important;
}


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

.faq-question i {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(255, 101, 0, 0.55);

    color: #ff6500 !important;

    background: rgba(255, 101, 0, 0.025);

    font-size: 13px;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}


.faq-item.active .faq-question i {
    transform: rotate(45deg);

    background: #ff6500;

    color: #ffffff !important;

    border-color: #ff6500;
}


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

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows 0.4s ease;
}


.faq-answer p {
    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 30px;

    color: #aeb4bd !important;

    font-size: 14px;

    line-height: 1.8;

    opacity: 0;

    transition:
        opacity 0.3s ease,
        padding 0.4s ease;
}


.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}


.faq-item.active .faq-answer p {
    padding: 0 30px 28px;

    opacity: 1;
}


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

@media (max-width: 1000px) {

    .faq-section {
        padding: 90px 5% 100px;
    }

    .faq-intro h2 {
        font-size: 48px;
    }

    .faq-question {
        min-height: 90px;

        font-size: 16px;
    }

}


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

@media (max-width: 600px) {

    .faq-section {
        padding: 75px 20px 85px;
    }

    .faq-intro {
        margin-bottom: 45px;
    }

    .faq-badge {
        padding: 9px 19px;

        font-size: 9px;

        letter-spacing: 1.7px;
    }

    .faq-intro h2 {
        margin-top: 23px;

        font-size: 34px;

        line-height: 1.12;

        letter-spacing: -0.5px;
    }

    .faq-intro h2::after {
        width: 110px;

        height: 3px;

        margin-top: 24px;
    }

    .faq-intro > p {
        margin-top: 24px;

        font-size: 13px;

        line-height: 1.75;
    }

    .faq-list {
        gap: 10px;
    }

    .faq-item {
        border-radius: 16px;
    }

    .faq-question {
        min-height: 75px;

        padding: 20px 18px;

        gap: 15px;

        font-size: 13px;
    }

    .faq-question i {
        width: 30px;
        height: 30px;

        font-size: 11px;
    }

    .faq-item.active .faq-answer p {
        padding: 0 18px 20px;

        font-size: 12px;

        line-height: 1.75;
    }

}
/*==========================================
        FINAL CTA SECTION
===========================================*/

.final-cta {
    position: relative;

    width: 100%;
    height: 620px;

    background-image: url("final.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    overflow: hidden;
}


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

.final-cta-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 8, 0.98) 0%,
            rgba(3, 5, 8, 0.90) 25%,
            rgba(3, 5, 8, 0.62) 47%,
            rgba(3, 5, 8, 0.18) 72%,
            rgba(3, 5, 8, 0.08) 100%
        );

    pointer-events: none;
}


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

.final-cta-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    padding: 0 6%;

    box-sizing: border-box;
}


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

.final-cta-badge {
    display: inline-block;

    padding: 11px 25px;

    border: 1px solid rgba(255, 130, 0, 0.80);

    border-radius: 40px;

    background: rgba(255, 101, 0, 0.045);

    color: #ff7200;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.final-cta-content h2 {
    max-width: 700px;

    margin: 25px 0 0;

    color: #ffffff;

    font-size: 58px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.final-cta-content h2 span {
    display: block;

    color: #ff6500;
}


/*==========================================
        ORANGE LINE
===========================================*/

.final-cta-line {
    width: 150px;
    height: 3px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            #ff6500,
            rgba(255, 101, 0, 0)
        );

    box-shadow:
        0 0 15px rgba(255, 101, 0, 0.55);
}


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

.final-cta-content > p {
    max-width: 570px;

    margin: 0 0 30px;

    color: #c2c6cc;

    font-size: 15px;

    line-height: 1.8;
}


/*==========================================
        MAIN CTA BUTTON
===========================================*/

.final-cta-buttons {
    display: flex;
    align-items: center;
}


.final-cta-btn {
    position: relative;

    display: inline-flex;

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

    gap: 16px;

    min-width: 330px;

    padding: 19px 28px;

    border-radius: 14px;

    background: #ff6500;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.7px;

    text-decoration: none;

    box-shadow:
        0 12px 35px rgba(255, 101, 0, 0.30);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.final-cta-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}


.final-cta-btn:hover::before {
    left: 140%;
}


.final-cta-btn:hover {
    transform: translateY(-4px);

    background: #ff7414;

    box-shadow:
        0 18px 45px rgba(255, 101, 0, 0.42);
}


.final-cta-btn i:last-child {
    transition: transform 0.3s ease;
}


.final-cta-btn:hover i:last-child {
    transform: translateX(6px);
}


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

.final-cta-contact {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 24px;

    color: #c4c8ce;

    font-size: 13px;

    text-decoration: none;

    transition: color 0.3s ease;
}


.final-cta-contact strong {
    color: #ff6500;

    font-weight: 700;
}


.final-cta-contact > i {
    color: #ff6500;

    transition: transform 0.3s ease;
}


.final-cta-contact:hover {
    color: #ffffff;
}


.final-cta-contact:hover > i {
    transform: translateX(5px);
}


/* CONTACT ICON */

.final-cta-contact-icon {
    display: flex;

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

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255, 101, 0, 0.50);

    border-radius: 50%;

    color: #ff6500;

    background: rgba(255, 101, 0, 0.04);
}


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

@media (max-width: 1000px) {

    .final-cta {
        height: 580px;

        background-position: center center;
    }

    .final-cta-content {
        padding: 0 5%;
    }

    .final-cta-content h2 {
        font-size: 48px;
    }

    .final-cta-content > p {
        max-width: 500px;

        font-size: 14px;
    }

}


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

@media (max-width: 600px) {

    .final-cta {
        min-height: 650px;

        height: auto;

        padding: 90px 0 80px;

        align-items: flex-end;

        background-position: 65% center;
    }


    .final-cta-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 5, 8, 0.25) 0%,
                rgba(3, 5, 8, 0.55) 30%,
                rgba(3, 5, 8, 0.94) 65%,
                rgba(3, 5, 8, 0.99) 100%
            );
    }


    .final-cta-content {
        padding: 0 20px;
    }


    .final-cta-badge {
        padding: 9px 18px;

        font-size: 9px;

        letter-spacing: 1.6px;
    }


    .final-cta-content h2 {
        margin-top: 22px;

        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -0.5px;
    }


    .final-cta-line {
        width: 110px;

        margin: 22px 0;
    }


    .final-cta-content > p {
        max-width: 100%;

        margin-bottom: 25px;

        font-size: 13px;

        line-height: 1.7;
    }


    .final-cta-buttons {
        width: 100%;
    }


    .final-cta-btn {
        width: 100%;

        min-width: 0;

        padding: 17px 15px;

        gap: 10px;

        border-radius: 12px;

        font-size: 10px;
    }


    .final-cta-contact {
        margin-top: 22px;

        font-size: 12px;
    }

}
/*==========================================
        GOOGLE MAP / LOCATION SECTION
===========================================*/

.location-section {
    position: relative;

    width: 100%;

    padding: 110px 5% 100px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255, 101, 0, 0.045),
            transparent 40%
        ),
        #050505;

    overflow: hidden;

    box-sizing: border-box;
}


/*==========================================
        CONTAINER
===========================================*/

.location-container {
    position: relative;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


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

.location-header {
    width: 100%;

    margin-bottom: 55px;

    text-align: center;
}


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

.location-badge {
    display: inline-block;

    padding: 11px 28px;

    border: 1px solid rgba(255, 140, 0, 0.75);

    border-radius: 40px;

    background: rgba(255, 101, 0, 0.045);

    color: #ff7200;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.location-header h2 {
    margin: 25px 0 17px;

    color: #ffffff;

    font-size: 56px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.location-header h2 span {
    color: #ff6500;
}


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

.location-header p {
    max-width: 700px;

    margin: 0 auto;

    color: #aeb4bd;

    font-size: 15px;

    line-height: 1.8;
}


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

.location-map {
    position: relative;

    width: 100%;

    height: 480px;

    border: 1px solid rgba(255, 101, 0, 0.28);

    border-radius: 20px;

    overflow: hidden;

    background: #111419;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.40);
}


.location-map::after {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid rgba(255, 255, 255, 0.035);

    border-radius: 20px;

    pointer-events: none;
}


.location-map iframe {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;
}


/*==========================================
        LOCATION INFORMATION
===========================================*/

.location-info {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-top: 28px;
}


/*==========================================
        DETAIL CARD
===========================================*/

.location-detail {
    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 95px;

    padding: 20px 25px;

    background:
        linear-gradient(
            145deg,
            #111419,
            #080a0d
        );

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 12px;

    box-sizing: border-box;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}


.location-detail:hover {
    border-color:
        rgba(255, 101, 0, 0.35);

    transform: translateY(-3px);
}


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

.location-detail-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(255, 101, 0, 0.08);

    border: 1px solid
        rgba(255, 101, 0, 0.25);

    color: #ff6500;

    font-size: 19px;
}


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

.location-detail-content h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


.location-detail-content p {
    margin: 0;

    color: #9ea6b0;

    font-size: 13px;

    line-height: 1.5;
}


/*==========================================
        DIRECTIONS ACTION
===========================================*/

.location-action {
    width: 100%;

    margin-top: 25px;
}


.location-directions-btn {
    position: relative;

    width: 100%;

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 18px 30px;

    background: #ff6500;

    border-radius: 16px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 12px 35px rgba(255, 101, 0, 0.25);

    overflow: hidden;

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* BUTTON SHINE */

.location-directions-btn::before {
    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 65%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.23),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}


.location-directions-btn:hover::before {
    left: 140%;
}


.location-directions-btn:hover {
    transform: translateY(-3px);

    background: #ff7414;

    box-shadow:
        0 18px 45px rgba(255, 101, 0, 0.35);
}


.location-directions-btn i {
    transition:
        transform 0.3s ease;
}


.location-directions-btn:hover i {
    transform: translateX(6px);
}


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

@media (max-width: 900px) {

    .location-section {
        padding: 90px 5% 85px;
    }

    .location-header h2 {
        font-size: 48px;
    }

    .location-map {
        height: 430px;
    }

}


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

@media (max-width: 600px) {

    .location-section {
        padding: 75px 20px 80px;
    }


    .location-header {
        margin-bottom: 38px;
    }


    .location-badge {
        padding: 9px 19px;

        font-size: 9px;

        letter-spacing: 1.6px;
    }


    .location-header h2 {
        margin-top: 22px;

        font-size: 34px;

        line-height: 1.12;

        letter-spacing: -0.5px;
    }


    .location-header p {
        font-size: 13px;

        line-height: 1.7;
    }


    .location-map {
        height: 360px;

        border-radius: 16px;
    }


    .location-map::after {
        border-radius: 16px;
    }


    .location-info {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 15px;
    }


    .location-detail {
        min-height: 82px;

        padding: 17px 18px;

        border-radius: 10px;
    }


    .location-detail-icon {
        width: 43px;

        height: 43px;

        font-size: 16px;
    }


    .location-detail-content h3 {
        font-size: 13px;
    }


    .location-detail-content p {
        font-size: 11px;
    }


    .location-action {
        margin-top: 15px;
    }


    .location-directions-btn {
        min-height: 62px;

        border-radius: 13px;

        font-size: 11px;

        letter-spacing: 0.8px;
    }

}
/*==========================================
        MAHAVEER CAR CARE FOOTER
===========================================*/

.site-footer {
    position: relative;
    width: 100%;
    background: #030405;
    color: #ffffff;
    overflow: hidden;
}


/* TOP ORANGE DIVIDER */

.footer-divider {
    width: 92%;
    height: 2px;
    margin: 0 auto;

    background: linear-gradient(
        90deg,
        transparent,
        #ff6500 20%,
        #ff6500 80%,
        transparent
    );

    box-shadow:
        0 0 15px rgba(255, 101, 0, 0.25);
}


/* MAIN FOOTER */

.footer-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
    padding: 75px 5% 65px;

    display: grid;

    grid-template-columns:
        1.5fr
        0.8fr
        1fr
        1.1fr;

    gap: 65px;

    box-sizing: border-box;
}


/* BRAND */

.footer-brand h2 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
    line-height: 1.05;

    letter-spacing: 1px;
}

.footer-brand h2 span {
    display: block;

    margin-top: 5px;

    color: #ff6500;
}

.footer-brand p {
    max-width: 300px;

    margin: 20px 0 25px;

    color: #858d97;

    font-size: 13px;
    line-height: 1.8;
}


/* SOCIAL ICONS */

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    width: 38px;
    height: 38px;

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

    border: 1px solid rgba(255, 101, 0, 0.28);
    border-radius: 50%;

    background: #0a0c0f;

    color: #aeb4bd;

    font-size: 13px;

    text-decoration: none;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.footer-socials a:hover {
    color: #ffffff;
    background: #ff6500;
    border-color: #ff6500;

    transform: translateY(-3px);
}


/* FOOTER COLUMNS */

.footer-column h3 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.footer-column h3::after {
    content: "";

    display: block;

    width: 32px;
    height: 2px;

    margin-top: 10px;

    background: #ff6500;
}

.footer-column ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 11px;
}

.footer-column ul li a {
    color: #858d97;

    font-size: 13px;

    text-decoration: none;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}

.footer-column ul li a:hover {
    color: #ff6500;
    padding-left: 5px;
}


/* CONTACT */

.footer-contact-item {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: #9299a2;

    font-size: 13px;

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-contact-item:hover {
    color: #ffffff;
}

.footer-contact-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border: 1px solid rgba(255, 101, 0, 0.25);
    border-radius: 50%;

    background: rgba(255, 101, 0, 0.04);

    color: #ff6500;

    font-size: 12px;
}


/* FOOTER BOTTOM */

.footer-bottom {
    width: 100%;

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom-inner {
    width: 100%;
    max-width: 1250px;

    min-height: 75px;

    margin: 0 auto;
    padding: 20px 5%;

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

    gap: 20px;

    box-sizing: border-box;
}

.footer-bottom p {
    margin: 0;

    color: #666e78;

    font-size: 11px;
}

.footer-bottom p strong {
    color: #9ba2ab;
}

.footer-tagline {
    color: #737b85 !important;
}

.footer-legal {
    display: flex;

    align-items: center;

    gap: 10px;
}

.footer-legal a {
    color: #666e78;

    font-size: 11px;

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #ff6500;
}

.footer-legal span {
    color: #353a40;
    font-size: 10px;
}


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

@media (max-width: 950px) {

    .footer-container {
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap: 45px;
    }

    .footer-brand {
        grid-column: span 3;
    }

    .footer-brand p {
        max-width: 500px;
    }

    .footer-bottom-inner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}


/*==================================================
        FOOTER - MOBILE
        FINAL 2 COLUMN LAYOUT
==================================================*/

@media (max-width: 768px) {

    /* FOOTER MAIN AREA */

    .site-footer {
        width: 100%;
        overflow: hidden;
    }

    .footer-container {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding: 55px 45px 45px;

        display: grid;

        grid-template-columns: 1fr 1fr;

        column-gap: 55px;

        row-gap: 55px;

        align-items: start;

        box-sizing: border-box;
    }


    /*==================================================
            QUICK LINKS + SERVICES
    ==================================================*/

    .footer-column {
        width: 100%;
        min-width: 0;
    }


    .footer-column h3 {
        margin: 0 0 25px;

        color: #ffffff;

        font-size: 17px;

        line-height: 1.3;

        font-weight: 800;

        letter-spacing: 1.8px;
    }


    .footer-column h3::after {
        content: "";

        display: block;

        width: 75px;

        height: 4px;

        margin-top: 13px;

        background: #ff6500;
    }


    .footer-column ul {
        margin: 0;
        padding: 0;

        list-style: none;
    }


    .footer-column ul li {
        margin: 0 0 20px;
        padding: 0;
    }


    .footer-column ul li a {
        display: inline-block;

        color: #9299a2;

        font-size: 15px;

        line-height: 1.55;

        text-decoration: none;

        transition: color .3s ease;
    }


    .footer-column ul li a:hover {
        color: #ff6500;

        padding-left: 0;
    }


    /*==================================================
            CONTACT US
            FULL WIDTH BELOW BOTH COLUMNS
    ==================================================*/

    .footer-contact {
        grid-column: 1 / -1;

        width: 100%;

        max-width: 430px;

        margin: 0 auto;

        text-align: left;
    }


    .footer-contact h3 {
        margin-bottom: 28px;
    }


    /* CONTACT ITEMS */

    .footer-contact-item {
        display: flex;

        align-items: center;

        gap: 16px;

        width: 100%;

        margin-bottom: 20px;

        color: #9299a2;

        font-size: 15px;

        text-decoration: none;

        transition: color .3s ease;
    }


    .footer-contact-item:hover {
        color: #ffffff;
    }


    /* CONTACT ICON */

    .footer-contact-icon {
        width: 48px;

        height: 48px;

        flex: 0 0 48px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 1px solid rgba(255, 101, 0, .40);

        border-radius: 50%;

        background: rgba(255, 101, 0, .035);

        color: #ff6500;

        font-size: 16px;
    }


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

    .footer-bottom {
        width: 100%;

        border-top: 1px solid rgba(255, 255, 255, .07);
    }


    .footer-bottom-inner {
        width: 100%;

        min-height: 0;

        padding: 28px 20px 25px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 13px;

        text-align: center;

        box-sizing: border-box;
    }


    .footer-bottom p {
        margin: 0;

        color: #777f89;

        font-size: 12px;

        line-height: 1.7;
    }


    .footer-bottom p strong {
        color: #ffffff;
    }


    .footer-tagline {
        color: #777f89 !important;

        font-size: 12px !important;
    }


    .footer-legal {
        display: flex;

        align-items: center;

        justify-content: center;

        flex-wrap: wrap;

        gap: 10px;

        margin-top: 3px;
    }


    .footer-legal a {
        color: #777f89;

        font-size: 12px;

        text-decoration: none;
    }


    .footer-legal a:hover {
        color: #ff6500;
    }


    .footer-legal span {
        color: #444950;

        font-size: 11px;
    }
}


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

@media (max-width: 480px) {

    .footer-container {
        padding: 50px 24px 40px;

        column-gap: 24px;

        row-gap: 48px;
    }


    .footer-column h3 {
        font-size: 15px;

        letter-spacing: 1.5px;

        margin-bottom: 23px;
    }


    .footer-column h3::after {
        width: 62px;

        height: 3px;

        margin-top: 11px;
    }


    .footer-column ul li {
        margin-bottom: 17px;
    }


    .footer-column ul li a {
        font-size: 14px;
    }


    .footer-contact {
        max-width: 360px;
    }


    .footer-contact-item {
        gap: 14px;

        margin-bottom: 17px;

        font-size: 14px;
    }


    .footer-contact-icon {
        width: 44px;

        height: 44px;

        flex-basis: 44px;

        font-size: 15px;
    }


    .footer-bottom-inner {
        padding:
            25px 15px 22px;
    }


    .footer-bottom p,
    .footer-legal a {
        font-size: 11px;
    }
}
/*==================================================
        MAHAVEER CAR CARE
        MOBILE FIX - TOP 3 SECTIONS
==================================================*/

@media (max-width: 600px) {


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

    .hero {
        width: 100%;

        min-height: 760px;
        height: auto;

        background-position: 68% center;

        overflow: hidden;
    }


    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.28) 0%,
                rgba(0,0,0,.55) 38%,
                rgba(0,0,0,.92) 100%
            );
    }


    .hero-content {
        width: 100%;

        max-width: none;

        height: auto;

        min-height: 760px;

        margin: 0;

        padding:
            95px 20px 190px;

        display: flex;

        align-items: center;

        justify-content: center;

        box-sizing: border-box;
    }


    .hero-left {
        width: 100%;

        max-width: 520px;

        text-align: center;

        margin: 0 auto;
    }


    .hero-tag {
        padding: 9px 17px;

        font-size: 9px;

        letter-spacing: 1.5px;

        white-space: nowrap;
    }


    .hero-left h1 {
        margin-top: 22px;

        font-size: 40px;

        line-height: 1.08;

        letter-spacing: -.5px;
    }


    .hero-left p {
        margin: 20px auto 0;

        max-width: 390px;

        color: #d8d8d8;

        font-size: 12px;

        line-height: 1.75;
    }


    /* HERO BUTTONS */

    .hero-buttons {
        width: 100%;

        margin-top: 28px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 12px;
    }


    .hero-btn {
        width: 100%;

        max-width: 320px;

        min-height: 52px;

        padding: 15px 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        box-sizing: border-box;

        font-size: 12px;

        border-radius: 50px;
    }


    /* HERO TRUST CARDS */

    .hero-trust {
        position: absolute;

        left: 20px;

        right: 20px;

        bottom: 15px;

        width: auto;

        display: grid;

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

        gap: 8px;

        z-index: 20;
    }


    .trust-card {
        width: 100%;

        height: 82px;

        border-radius: 13px;

        background:
            rgba(20,20,20,.62);

        backdrop-filter: blur(12px);
    }


    .trust-card i {
        font-size: 17px;

        margin-bottom: 4px;
    }


    .trust-card h3 {
        font-size: 18px;

        margin-bottom: 2px;
    }


    .trust-card p {
        font-size: 9px;

        letter-spacing: .3px;
    }


    .trust-card:hover {
        transform: none;

        box-shadow: none;
    }


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

    .about {
        width: 100%;

        padding: 65px 0 45px;

        overflow: hidden;
    }


    .about-container {
        width: 100%;

        max-width: none;

        margin: 0;

        padding: 0 20px;

        display: flex;

        flex-direction: column;

        gap: 22px;

        box-sizing: border-box;
    }


    /* ABOUT IMAGE */

    .about-image-card {
        width: 100%;

        height: 360px;

        min-height: 360px;

        border-radius: 20px;

        animation: none;

        transform: none !important;

        box-sizing: border-box;
    }


    .about-image-card img {
        width: 100%;

        height: 100%;

        object-fit: cover;

        transform: none !important;
    }


    /* Disable desktop hover expansion on mobile */

    .about-image-card:hover {
        width: 100%;

        height: 360px;

        transform: none !important;

        box-shadow:
            0 20px 50px rgba(0,0,0,.35);
    }


    .about-image-card:hover img {
        transform: none !important;

        filter: none;
    }


    .about-image-card:hover .image-overlay {
        opacity: 0;
    }


    /* ABOUT CONTENT */

    .about-content-card {
        width: 100%;

        min-height: 0;

        padding: 28px 22px 25px;

        border-radius: 20px;

        animation: none;

        transform: none !important;

        box-sizing: border-box;
    }


    .about-content-card:hover {
        transform: none !important;

        border-color:
            rgba(255,255,255,.08);
    }


    .about-tag {
        padding: 9px 17px;

        font-size: 9px;

        letter-spacing: 1.5px;

        align-self: flex-start;
    }


    .about-content-card h2 {
        margin-top: 20px;

        font-size: 32px;

        line-height: 1.15;

        letter-spacing: -.5px;
    }


    .about-content-card p {
        margin-top: 17px;

        font-size: 13px;

        line-height: 1.75;
    }


    /* ABOUT FEATURES */

    .about-features {
        grid-template-columns: 1fr;

        gap: 9px;

        margin-top: 20px;
    }


    .feature {
        padding: 12px 14px;

        border-radius: 11px;

        font-size: 12px;
    }


    .feature i {
        margin-right: 8px;

        font-size: 12px;
    }


    .feature:hover {
        transform: none;

        background:
            rgba(255,255,255,.04);
    }


    .feature:hover i {
        color: #ff8c00;
    }


    /* ABOUT BUTTON */

    .about-btn {
        width: 100%;

        height: 52px;

        margin-top: 22px;

        border-radius: 50px;

        font-size: 13px;

        padding: 0 18px;

        box-sizing: border-box;
    }


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

    .services {
        width: 100%;

        padding: 65px 20px 35px;

        box-sizing: border-box;
    }


    .services-container {
        width: 100%;

        max-width: none;

        margin: 0 auto;
    }


    /* SERVICES TITLE */

    .section-title {
        width: 100%;

        margin-bottom: 48px;

        text-align: center;
    }


    .section-title span {
        padding: 9px 19px;

        font-size: 9px;

        letter-spacing: 1.7px;
    }


    .section-title h2 {
        margin: 22px 0 15px;

        font-size: 32px;

        line-height: 1.15;
    }


    .section-title p {
        width: 100%;

        max-width: 430px;

        margin: 0 auto;

        font-size: 13px;

        line-height: 1.75;
    }


    /* SERVICES GRID */

    .services-grid {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 42px;

        justify-content: stretch;

        row-gap: 42px;
    }


    /* SERVICE CARD */

    .service-card {
        width: 100%;

        max-width: 100%;

        min-height: 0;

        padding:
            42px 20px 20px;

        border-radius: 20px;

        box-sizing: border-box;
    }


    .service-card h3 {
        font-size: 20px;

        margin-bottom: 9px;
    }


    .service-card p {
        min-height: 0;

        font-size: 13px;

        line-height: 1.65;
    }


    /* SERVICE ICON */

    .service-icon {
        width: 58px;

        height: 58px;

        top: -29px;

        border-width: 3px;
    }


    .service-icon i {
        font-size: 24px;
    }


    /* SERVICE BUTTON */

    .service-btn {
        width: 170px;

        height: 46px;

        margin-top: 14px;

        font-size: 12px;
    }


    .service-card:hover {
        transform: none;

        box-shadow:
            0 18px 35px rgba(0,0,0,.22);
    }


    .service-card:hover .service-icon {
        transform:
            translateX(-50%);
    }


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

    .services-action {
        width: 100%;

        margin: 35px 0 20px;

        display: flex;

        flex-direction: column;

        gap: 12px;
    }


    .services-book-btn,
    .services-contact-btn {
        width: 100%;

        max-width: 360px;

        height: 54px;

        font-size: 14px;

        border-radius: 50px;

        box-sizing: border-box;
    }


    .services-book-btn i,
    .services-contact-btn i {
        font-size: 16px;
    }


    /*==================================================
            SERVICES DIVIDER
    ==================================================*/

    .section-divider {
        width: 88%;

        height: 2px;

        margin: 25px auto 0;
    }

}
/* =========================================================
   MAHAVEER CAR CARE
   FRESH MOBILE HEADER FIX
   Desktop layout remains untouched
   ========================================================= */

@media (max-width: 991px) {

    /* -------------------------------
       HEADER
    ------------------------------- */

    .header {
        padding: 5px 0;
        height: auto;
    }

    .header .container {
        width: 94%;
        max-width: none;
        margin: 0 auto;

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

        gap: 8px;
    }


    /* -------------------------------
       LOGO AREA
    ------------------------------- */

    .header .logo {
        display: flex;
        align-items: center;

        gap: 8px;

        flex: 1 1 auto;
        min-width: 0;

        overflow: hidden;
    }

    .header .logo img {
        width: 55px;
        height: 55px;

        min-width: 55px;
        max-width: 55px;

        flex: 0 0 55px;

        border-radius: 50%;
        object-fit: cover;
    }

    .header .logo-text {
        min-width: 0;
        overflow: hidden;
    }

    .header .logo-text h2 {
        margin: 0;

        color: #ffffff;

        font-size: 20px;
        line-height: 1.15;
        font-weight: 700;

        white-space: nowrap;
    }

    .header .logo-text p {
        margin: 3px 0 0;

        color: #cfcfcf;

        font-size: 10px;
        line-height: 1.3;

        letter-spacing: .7px;

        white-space: nowrap;
    }


    /* -------------------------------
       HIDE DESKTOP NAVIGATION
    ------------------------------- */

    .header .nav-links {
        display: none;
    }

    .header .book-btn {
        display: none;
    }


    /* -------------------------------
       MOBILE CALL BUTTON
       7008100859
    ------------------------------- */

    .header .mobile-call-btn {
        display: flex !important;

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

        width: 48px;
        height: 48px;

        min-width: 48px;
        max-width: 48px;

        flex: 0 0 48px;

        padding: 0;
        margin: 0 6px 0 4px;

        box-sizing: border-box;

        border: 2px solid #ff6500;
        border-radius: 10px;

        background: transparent;

        color: #ff6500;

        text-decoration: none;

        position: static;
        transform: none;
    }

    .header .mobile-call-btn i {
        color: #ff6500;

        font-size: 21px;
        line-height: 1;

        margin: 0;
    }


    /* -------------------------------
       HAMBURGER MENU
    ------------------------------- */

    .header .menu-btn {
        display: flex;

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

        width: 34px;
        height: 48px;

        min-width: 34px;

        flex: 0 0 34px;

        margin: 0;
        padding: 0;

        color: #ffffff;

        font-size: 30px;

        line-height: 1;

        cursor: pointer;
    }


    /* -------------------------------
       MOBILE NAVIGATION DROPDOWN
    ------------------------------- */

    .header .navbar {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background: #0b0b0b;

        max-height: 0;
        overflow: hidden;

        transition: max-height .4s ease;

        border-top: 1px solid rgba(255,255,255,.06);
    }

    .header .navbar.active {
        max-height: 500px;
    }

    .header .navbar .nav-links {
        display: flex;

        flex-direction: column;

        width: 100%;

        padding: 10px 0;

        gap: 0;

        list-style: none;
    }

    .header .navbar .nav-links li {
        width: 100%;

        text-align: center;

        padding: 14px 0;

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

    .header .navbar .nav-links li:last-child {
        border-bottom: none;
    }

    .header .navbar .nav-links a {
        display: block;

        color: #ffffff;

        font-size: 17px;

        text-decoration: none;
    }

}


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

@media (max-width: 480px) {

    .header .container {
        width: 94%;
        gap: 5px;
    }

    .header .logo {
        gap: 7px;
    }

    .header .logo img {
        width: 52px;
        height: 52px;

        min-width: 52px;
        max-width: 52px;

        flex-basis: 52px;
    }

    .header .logo-text h2 {
        font-size: 18px;
    }

    .header .logo-text p {
        font-size: 9px;
        letter-spacing: .5px;
    }

    .header .mobile-call-btn {
        width: 46px;
        height: 46px;

        min-width: 46px;
        max-width: 46px;

        flex-basis: 46px;

        margin-left: 4px;
        margin-right: 5px;

        border-radius: 10px;
    }

    .header .mobile-call-btn i {
        font-size: 20px;
    }

    .header .menu-btn {
        width: 32px;
        height: 46px;

        min-width: 32px;

        flex-basis: 32px;

        font-size: 28px;
    }

}


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

@media (max-width: 360px) {

    .header .logo img {
        width: 48px;
        height: 48px;

        min-width: 48px;
        max-width: 48px;

        flex-basis: 48px;
    }

    .header .logo-text h2 {
        font-size: 17px;
    }

    .header .logo-text p {
        font-size: 8px;
    }

    .header .mobile-call-btn {
        width: 44px;
        height: 44px;

        min-width: 44px;
        max-width: 44px;

        flex-basis: 44px;

        margin-left: 3px;
        margin-right: 4px;
    }

    .header .menu-btn {
        width: 30px;
        min-width: 30px;

        flex-basis: 30px;

        font-size: 27px;
    }

}
/* Hide mobile call button on desktop */
.mobile-call-btn {
    display: none !important;
}
/* =========================================================
   WHY CHOOSE US — PREMIUM DESKTOP ALIGNMENT
   ========================================================= */

@media (min-width: 1001px) {

    .why-container {
        display: grid !important;
        grid-template-columns: 0.92fr 1.08fr !important;
        gap: 65px !important;
        align-items: stretch !important;
    }

    /* LEFT IMAGE */
    .why-image {
        height: 620px !important;
        min-height: 620px !important;
        border-radius: 8px !important;

        box-shadow:
            0 25px 60px rgba(0,0,0,.55),
            0 0 35px rgba(255,102,0,.10) !important;
    }

    .why-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* RIGHT CONTENT */
    .why-content {
        height: 620px !important;
        min-height: 620px !important;

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

        justify-content: flex-start !important;
    }

    /* Small orange label */
    .why-subtitle {
        margin-bottom: 12px !important;
    }

    /* Main heading */
    .why-content > h3 {
        margin: 0 0 14px !important;
        font-size: 34px !important;
        line-height: 1.2 !important;
    }

    /* Description */
    .why-content .why-intro {
        max-width: 650px !important;
        margin: 0 0 24px !important;
        line-height: 1.7 !important;
    }

    /* FEATURE GRID */
    .why-features {
        flex: 1 !important;

        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;

        gap: 18px !important;

        min-height: 0 !important;
    }

    /* FEATURE CARDS */
    .why-feature {
        min-height: 0 !important;
        height: 100% !important;

        padding: 20px 18px !important;

        border-radius: 8px !important;

        background:
            linear-gradient(
                145deg,
                #0d0d0d,
                #090909
            ) !important;

        border: 1px solid rgba(255,255,255,.08) !important;
        border-top: 2px solid #ff6500 !important;

        box-shadow:
            0 10px 25px rgba(0,0,0,.20) !important;

        transition:
            transform .35s ease,
            border-color .35s ease,
            box-shadow .35s ease,
            background .35s ease !important;
    }

    .why-feature:hover {
        transform: translateY(-5px) !important;

        border-color: rgba(255,101,0,.50) !important;

        background:
            linear-gradient(
                145deg,
                #111111,
                #0a0a0a
            ) !important;

        box-shadow:
            0 18px 35px rgba(0,0,0,.40),
            0 0 22px rgba(255,101,0,.10) !important;
    }

    /* NUMBER CIRCLE */
    .why-feature-number {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;

        font-size: 12px !important;
    }

    /* CARD TITLE */
    .why-feature-content h4 {
        margin: 2px 0 7px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    /* CARD DESCRIPTION */
    .why-feature-content p {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
}
/* ==========================================
   GALLERY REAL IMAGES
========================================== */

.gallery-item > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.gallery-item:hover > img {
    transform: scale(1.05);
}
.holiday-note {
    display: inline-block;
    margin-top: 5px;
    color: #7f8792;
    font-size: 11px;
    line-height: 1.5;
}
/* ==================================================
   CINEMATIC GALLERY EXPANSION
   ================================================== */

.gallery-grid {
    position: relative;
    isolation: isolate;
}


/* Smooth image expansion */
.gallery-item {
    transition:
        left 0.6s cubic-bezier(.22,.61,.36,1),
        top 0.6s cubic-bezier(.22,.61,.36,1),
        width 0.6s cubic-bezier(.22,.61,.36,1),
        height 0.6s cubic-bezier(.22,.61,.36,1),
        opacity 0.45s ease,
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        filter 0.45s ease;

    will-change: left, top, width, height;
}


/* Background gallery items become subtle */
.gallery-grid.gallery-has-expanded
.gallery-item:not(.gallery-expanding) {
    opacity: 0.16;
    transform: scale(.985);
    filter: brightness(.35);
}


/* Expanded image */
.gallery-item.gallery-expanding {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 100;

    border-color: #ff6500;

    border-radius: 12px;

    box-shadow:
        0 35px 100px rgba(0,0,0,.65),
        0 0 60px rgba(255,101,0,.25);

    overflow: hidden;
}


/* Cinematic image zoom */
.gallery-item.gallery-expanding > img {
    transform: scale(1.05);

    transition:
        transform 0.8s cubic-bezier(.22,.61,.36,1),
        filter 0.6s ease;
}


/* Dark cinematic overlay */
.gallery-item.gallery-expanding::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 35%,
            rgba(0,0,0,.72) 100%
        );

    pointer-events: none;

    z-index: 1;
}


/* Existing overlay becomes visible */
.gallery-item.gallery-expanding .gallery-overlay {
    opacity: 1;

    z-index: 2;

    padding: 30px;
}


/* Expanded label */
.gallery-item.gallery-expanding .gallery-overlay > span {
    font-size: 13px;
    letter-spacing: 2.5px;
}


/* Expanded view button */
.gallery-item.gallery-expanding .gallery-view {
    transform: translateY(0);

    width: 52px;
    height: 52px;

    font-size: 16px;

    box-shadow:
        0 10px 30px rgba(255,101,0,.35);
}


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

@media (max-width: 1000px) {

    .gallery-item.gallery-expanding {
        position: relative;

        left: auto;
        top: auto;

        width: auto;
        height: auto;

        z-index: auto;
    }

    .gallery-grid.gallery-has-expanded
    .gallery-item:not(.gallery-expanding) {
        opacity: 1;
        transform: none;
        filter: none;
    }

}
/*==========================================
        CUSTOMER REVIEWS → FAQ GAP FIX
===========================================*/

/* Desktop */
.customer-reviews {
    padding-bottom: 45px !important;
}

.faq-section {
    padding-top: 55px !important;
}


/* Tablet */
@media (max-width: 1000px) {

    .customer-reviews {
        padding-bottom: 50px !important;
    }

    .faq-section {
        padding-top: 60px !important;
    }

}


/* Mobile */
@media (max-width: 600px) {

    .customer-reviews {
        padding-bottom: 50px !important;
    }

    .faq-section {
        padding-top: 55px !important;
    }

}