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

.services-hero{

    padding:240px 0 140px;

    background:#070707;

    text-align:center;
}

.services-hero-content{

    max-width:900px;

    margin:0 auto;
}

.services-title{

    font-size:78px;

    line-height:.92;

    max-width:1000px;

    margin:25px auto 30px;
    
}

.services-title span{

    color:var(--primary);
}

.services-description{

    max-width:700px;

    margin:0 auto 45px;

    font-size:20px;

    color:#bdbdbd;

    line-height:1.8;
}

.services-hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

@media(max-width:767px){

    .services-hero{

        padding:140px 0 90px;
    }

    .services-title{

        font-size:58px;
    }

    .services-description{

        font-size:17px;
    }

}

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

.services-showcase{

    padding:120px 0;
}

.service-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-bottom:140px;
}

.service-row.reverse .service-image{

    order:2;
}

.service-row.reverse .service-content{

    order:1;
}

.service-image img{

    width:100%;

    display:block;

    border-radius:32px;
}

.service-label{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;
}

.service-content h2{

    font-size:56px;

    line-height:1;

    margin:20px 0;
}

.service-content p{

    color:#bdbdbd;

    line-height:1.9;

    margin-bottom:25px;
}

.service-content ul{

    list-style:none;

    padding:0;

    margin:0 0 35px;
}

.service-content li{

    margin-bottom:12px;

    color:#d7d7d7;
}

@media(max-width:991px){

    .service-row,
    .service-row.reverse{

        grid-template-columns:1fr;

        gap:40px;
    }

    .service-row.reverse .service-image,
    .service-row.reverse .service-content{

        order:initial;
    }

    .service-content h2{

        font-size:42px;
    }

}

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

.services-benefits{

    padding:120px 0;

    background:#090909;
}

.services-benefits .section-heading{

    text-align:center;

    margin-bottom:70px;
}

.benefits-grid{

    display:grid !important;

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

    gap:25px;

    align-items:stretch;
}

.benefit-card{

    background:#111111;

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

    border-radius:28px;

    padding:40px 30px;

    text-align:center;

    transition:.3s ease;

    height:100%;
}

.benefit-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,168,95,.25);
}

.benefit-card strong{

    display:block;

    font-family:'Bebas Neue';

    font-size:72px;

    line-height:1;

    color:var(--primary);

    margin-bottom:15px;
}

.benefit-card h3{

    margin-bottom:15px;

    font-size:24px;
}

.benefit-card p{

    color:#bdbdbd;

    line-height:1.8;

    margin:0;
}

@media(max-width:1200px){

    .benefits-grid{

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

}

@media(max-width:767px){

    .benefits-grid{

        grid-template-columns:1fr;
    }

}

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

.services-process{

    padding:120px 0;

    background:#070707;
}

.process-timeline{

    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.process-step{

    background:#111111;

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

    border-radius:28px;

    padding:35px;

    text-align:center;

    transition:.3s ease;
}

.process-step:hover{

    transform:translateY(-8px);

    border-color:rgba(212,168,95,.25);
}

.step-number{

    font-family:'Bebas Neue';

    font-size:64px;

    line-height:1;

    color:var(--primary);

    margin-bottom:20px;
}

.process-step h3{

    margin-bottom:15px;
}

.process-step p{

    color:#bdbdbd;

    line-height:1.8;
}

@media(max-width:1200px){

    .process-timeline{

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

}

@media(max-width:767px){

    .process-timeline{

        grid-template-columns:1fr;
    }

}

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

.services-selector{

    padding:120px 0;

    background:#090909;
}

.selector-table{

    max-width:900px;

    margin:60px auto 0;
}

.selector-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    background:#111111;

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

    border-radius:20px;

    padding:24px 30px;

    margin-bottom:15px;

    transition:.3s ease;
}

.selector-row:hover{

    border-color:rgba(212,168,95,.25);

    transform:translateY(-3px);
}

.selector-goal{

    font-weight:600;

    font-size:18px;
}

.selector-service{

    text-align:right;

    color:var(--primary);

    font-weight:700;
}

@media(max-width:767px){

    .selector-row{

        grid-template-columns:1fr;

        gap:10px;

        text-align:center;
    }

    .selector-service{

        text-align:center;
    }

}

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

.services-cta{

    padding:120px 0 140px;

    background:#070707;
}

.services-cta-box{

    position:relative;

    overflow:hidden;

    padding:90px 60px;

    text-align:center;

    border-radius:36px;

    background:
    linear-gradient(
        135deg,
        rgba(212,168,95,.18),
        rgba(212,168,95,.05)
    );

    border:1px solid rgba(212,168,95,.15);
}

.services-cta-box::before{

    content:'';

    position:absolute;

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

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,168,95,.15),
        transparent 70%
    );
}

.services-cta-box h2{

    font-size:64px;

    line-height:1.05;

    margin:20px auto 25px;

    max-width:850px;
}

.services-cta-box p{

    max-width:700px;

    margin:0 auto 40px;

    color:#d0d0d0;

    font-size:18px;

    line-height:1.9;
}

.services-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

@media(max-width:767px){

    .services-cta-box{

        padding:60px 30px;
    }

    .services-cta-box h2{

        font-size:42px;
    }

    .services-cta-buttons{

        flex-direction:column;
    }

}