/* Services page responsive rules */

/* Mobile devices */
@media (max-width: 767px) {
    .page-banner {
        height: auto;
        margin-top: -24px;
    }

    .banner-content {
        padding: 32px 20px 42px;
    }

    .banner-content h1 {
        font-size: 36px;
    }

    .banner-content p {
        font-size: 18px;
    }

    .service-tabs {
        justify-content: center;
        gap: 8px;
    }

    .service-row,
    .service-row.reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .service-text,
    .service-image {
        width: 100%;
    }

    .service-image img {
        height: auto;
    }

    .service-row {
        padding: 15px;
    }

    .service-text h3 {
        font-size: 28px;
    }

    .service-text p,
    .service-text ul li {
        font-size: 16px;
    }

    .service-image img {
        border-radius: 18px;
    }

    .service-card {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* HD devices */
@media (min-width: 1280px) and (max-width: 1599px) {
    .container {
        max-width: 1180px;
        padding: 0 30px;
    }

    .service-row {
        gap: 36px;
        border-radius: 20px;
        padding: 30px;
        margin: 30px 10px;
    }

    .service-image img {
        height: 320px;
    }
}

/* Full HD devices */
@media (min-width: 1600px) and (max-width: 1919px) {
    .container {
        max-width: 1400px;
        padding: 0 40px;
    }

    .service-row {
        gap: 42px;
    }
}

/* Mac devices and large retina screens */
@media screen and (min-width: 1920px) {
    .container {
        max-width: 1700px;
        padding: 0 50px;
    }

    .banner-content h1 {
        font-size: 72px;
    }

    .banner-content p {
        font-size: 24px;
    }
}