@media (max-width: 1024px) {
    .container {
        overflow: hidden;
    }

    .service-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-row.reverse {
        direction: ltr;
    }

    .service-images {
        height: 400px;
    }

    .service-image {
        width: 240px;
        height: 160px;
    }

    .img-2 {
        top: 120px;
    }

    .img-3 {
        top: 120px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .section-title {
        font-size: 2rem;
    }

    .service-text {
        padding: 20px;
    }

    .service-text h3 {
        font-size: 1.6rem;
    }

    .service-number {
        font-size: 4rem;
    }

    .service-images {
        height: 350px;
    }

    .service-image {
        width: 200px;
        height: 140px;
        gap: 5px;
    }

    .service-image i {
        font-size: 2.5rem;
    }

    .service-image h4 {
        font-size: 0.8rem;
    }

    .service-image span {
        font-size: 0.7rem;
    }

    .img-2 {
        top: 100px;
    }

    .img-3 {
        top: 100px;
    }
}

@media (max-width: 480px) {
    .service-row {
        margin-bottom: 80px;
    }

    .service-images {
        height: 300px;
    }

    .service-image {
        width: 160px;
        height: 120px;
    }

    .service-image i {
        font-size: 2rem;
    }

    .service-image span {
        font-size: 0.8rem;
    }

    .img-1 {
        top: 0;
    }

    .img-2 {
        top: 90px;
        left: -10px;
    }

    .img-3 {
        top: 90px;
        right: -10px;
    }
}