.services-page{


padding:140px 0 100px;

background:#0f0f0f;


}

.services-page .section-heading{


text-align:center;

max-width:900px;

margin:0 auto;


}

/* ==========================================
DIVISION SECTIONS
========================================== */

.division-section{


padding:120px 0;


}

.division-section--alt{


background:#141414;


}

.division-tag{


display:inline-block;

color:var(--hgm-gold);

text-transform:uppercase;

letter-spacing:2px;

font-weight:700;

margin-bottom:20px;


}

.division-section h2{


font-size:3rem;

margin-bottom:25px;


}

.division-section p{


font-size:1.05rem;

line-height:1.9;

color:#d0d0d0;

max-width:900px;

margin-bottom:40px;


}

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

.division-banner{


margin:40px 0;


}

.division-banner img{


width:100%;

height:500px;

object-fit:cover;

border-radius:24px;

display:block;

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


}

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

.service-gallery{


display:grid;

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

gap:20px;

margin:50px 0;


}

.service-gallery img{


width:100%;

height:220px;

object-fit:cover;

border-radius:18px;

transition:.35s ease;

cursor:pointer;


}

.service-gallery img:hover{


transform:translateY(-8px);

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


}

/* ==========================================
SERVICE CARDS
========================================== */

.service-cards{


display:grid;

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

gap:25px;

margin-top:30px;


}

.service-card{


background:#111;

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

border-radius:22px;

padding:35px;

text-align:center;

transition:.3s ease;


}

.service-card:hover{


transform:translateY(-10px);

border-color:rgba(252,208,21,.3);


}

.service-card i{


font-size:2.2rem;

color:var(--hgm-gold);

margin-bottom:20px;


}

.service-card h4{


color:#fff;

margin:0;


}

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

.division-stats{


display:grid;

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

gap:25px;

margin-top:60px;


}

.stat-card{


background:#111;

border-radius:22px;

padding:35px;

text-align:center;

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


}

.stat-card span{


display:block;

font-size:2.7rem;

font-weight:800;

color:var(--hgm-gold);

margin-bottom:10px;


}

.stat-card p{


margin:0;

color:#cfcfcf;


}

/* ==========================================
VEHICLE SALES
========================================== */

.vehicle-grid{


display:grid;

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

gap:30px;

margin-top:50px;


}

.vehicle-card{


background:#111;

border-radius:24px;

overflow:hidden;

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

transition:.3s ease;


}

.vehicle-card:hover{


transform:translateY(-10px);


}

.vehicle-card img{


width:100%;

height:260px;

object-fit:cover;

display:block;


}

.vehicle-card h4{


padding:25px 25px 10px;

color:#fff;


}

.vehicle-card p{


padding:0 25px 25px;

margin:0;

color:#cfcfcf;


}

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

.services-cta{

    padding:140px 0;

    text-align:center;

    background:#111;

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

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

    position:relative;

    overflow:hidden;
}

.services-cta::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:300px;

    height:300px;

    background:rgba(252,208,21,.08);

    filter:blur(120px);

    border-radius:50%;

    pointer-events:none;
}

.services-cta .container{

    position:relative;

    z-index:2;
}

.services-cta h2{

    font-size:3.2rem;

    margin-bottom:20px;

    color:#fff;

    font-weight:800;
}

.services-cta p{

    max-width:750px;

    margin:0 auto 40px;

    color:#cfcfcf;

    font-size:1.1rem;

    line-height:1.8;
}

.services-cta .btn-primary{

    background:linear-gradient(
        135deg,
        #fcd015,
        #e5b800
    );

    color:#111;

    border:none;

    padding:18px 40px;

    font-weight:700;

    border-radius:50px;

    transition:.3s ease;
}

.services-cta .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(252,208,21,.25);
}

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

@media (max-width:768px){

    .services-cta{

        padding:90px 0;
    }

    .services-cta h2{

        font-size:2.2rem;
    }

    .services-cta p{

        font-size:1rem;
    }
}

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

@media (max-width:1024px){


.service-gallery{

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

.service-cards{

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

.vehicle-grid{

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


}

@media (max-width:768px){


.division-section{

    padding:80px 0;
}

.division-section h2{

    font-size:2rem;
}

.division-banner img{

    height:250px;
}

.service-gallery{

    grid-template-columns:1fr;
}

.service-cards{

    grid-template-columns:1fr;
}

.division-stats{

    grid-template-columns:1fr;
}

.vehicle-grid{

    grid-template-columns:1fr;
}

.services-cta h2{

    font-size:2rem;
}


}