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

.page-hero{
    min-height:55vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    padding:120px 8% 80px;

    background:
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.7)),
    url("../images/services-hero.webp");

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

.page-hero-content{
    max-width:760px;
}

.page-hero h1{
    font-size:clamp(2.5rem,5vw,4rem);
    margin:20px 0;
}

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

.service-block{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    padding:110px 8%;

}

.service-block.reverse .service-image{

    order:2;

}

.service-image img{

    width:100%;

    height:480px;

    object-fit:cover;

    border-radius:18px;

}

.service-tag{

    color:var(--primary);

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:12px;

}

.service-text h2{

    font-size:2.2rem;

    margin-bottom:20px;

    color:var(--dark);

}

.service-text p{

    color:var(--text);

    margin-bottom:25px;

}

.service-list{

    list-style:none;

    margin-bottom:35px;

}

.service-list li{

    margin:12px 0;

    padding-left:28px;

    position:relative;

}

.service-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--accent);

    font-weight:bold;

}
/* CTA */

.cta{
    background:var(--primary);
    color:white;
    text-align:center;
    padding:90px 8%;
}

.cta h2{
    font-size:clamp(2rem,4vw,3rem);
    margin:18px 0;
}

.cta p{
    max-width:650px;
    margin:0 auto 35px;
    color:#DBEAFE;
}

.cta .tag{
    color:#BFE4FF;
}

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

@media(max-width:768px){

.service-block{

grid-template-columns:1fr;

padding:80px 6%;

gap:35px;

}

.service-block.reverse .service-image{

order:0;

}

.service-image img{

height:260px;

}

.page-hero{

padding:110px 6% 70px;

}
.cta{
    padding:80px 6%;
}

}