/* =========================
   RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}

/* =========================
   SERVICES BANNER (TOP)
========================= */
.services-banner{
    padding:160px 8% 60px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:50px;
    flex-wrap:wrap;
}
.service-image img{
    max-width:100%;
    height:auto;
    display:block;
}

.services-title{
    font-size:72px;
    font-weight:800;
    line-height:1;
    color:#000;
    max-width:500px;
}

.services-text{
    max-width:550px;
    font-size:17px;
    line-height:1.7;
    color:#222;
}

/* =========================
   SERVICE SECTION
========================= */
.service-box{
    margin-top:80px;
    padding:60px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
    flex-wrap:wrap;
}

/* Alternate layout */
.service-box.reverse{
    flex-direction:row-reverse;
}

.service-description{
    max-width:460px;
}

.service-description h2{
    font-size:28px;
    font-weight:800;
    margin-bottom:12px;
}

.service-description p{
    font-size:16px;
    line-height:1.7;
    color:#333;
}

/* =========================
   SERVICE IMAGE
========================= */
.service-image img{
    width:100%;
    max-width:380px;
    height:auto;
}

/* =========================
   LARGE DESKTOP (≥1440px)
========================= */
@media (min-width:1440px){
    .services-banner{
        padding:180px 12% 80px;
    }
    .service-box{
        padding:80px 12%;
    }
}

/* =========================
   LAPTOP / TABLET (≤1024px)
========================= */
@media (max-width:1024px){
    .services-title{
        font-size:56px;
    }

    .services-text{
        font-size:16px;
    }

    .service-box{
        gap:50px;
    }

    .service-description h2{
        font-size:24px;
    }
}

/* =========================
   TABLET (≤900px)
========================= */
@media (max-width:900px){
    .services-banner{
        padding:120px 6% 40px;
    }

    .services-title{
        font-size:48px;
    }

    .service-box{
        margin-top:60px;
        padding:50px 6%;
    }

    .service-image img{
        max-width:300px;
    }
}

/* =========================
   MOBILE (≤768px)
========================= */
@media (max-width:768px){

    .services-banner{
        flex-direction:column;
        gap:25px;
        padding:100px 20px 30px;
    }

    .services-title{
        font-size:42px;
    }

    .service-box,
    .service-box.reverse{
        flex-direction:column;
        text-align:center;
        gap:30px;
        padding:40px 20px;
    }

    .service-description{
        max-width:100%;
    }

    .service-image img{
        max-width:260px;
    }
}

/* =========================
   SMALL MOBILE (≤480px)
========================= */
@media (max-width:480px){

    .services-title{
        font-size:34px;
    }

    .services-text{
        font-size:15px;
    }

    .service-description h2{
        font-size:22px;
    }

    .service-description p{
        font-size:15px;
    }

    .service-image img{
        max-width:220px;
    }
}