@media screen and (max-width: 425px) {
    .slider-nav {
        display: none !important;
    }

    .slider-controls {
        bottom: 20px;
    }

    .slider-dots {
        gap: 8px;
    }

    .dot {
        width: 10px;
        height: 10px;
    }
}

@media screen and (min-width: 1400px) {
    .container {
        width: 85%;
        max-width: 1400px;
    }

    .hero-slider {
        width: 90%;
        max-width: 1600px;
        margin: 0 auto;
    }

    .slide-content {
        width: 85%;
        max-width: 1400px;
    }
}

@media screen and (min-width: 1800px) {
    .container {
        width: 80%;
        max-width: 1600px;
    }

    .hero-slider {
        width: 85%;
        max-width: 1800px;
    }

    .numbers-container,
    .testimonial-container {
        width: 80%;
        max-width: 1600px;
        margin: 0 auto;
    }

    .site-footer .container {
        width: 80%;
        max-width: 1600px;
    }
}

@media screen and (min-width: 2560px) {
    .container,
    .site-footer .container {
        width: 65%;
        max-width: 1800px;
    }

    /* Hero slider with balanced width */
    .hero-slider {
        width: 70%;
        max-width: 2000px;
    }

    /* Content positioning in hero slider */
    .slide-content {
        width: 65%;
        max-width: 1800px;
    }

    /* Background section containers */
    .numbers-container,
    .testimonial-container {
        width: 65%;
        max-width: 1800px;
    }

    /* Color section backgrounds with proper width */
    .numbers-section::before,
    .testimonial-section::before {
        width: 70%;
        max-width: 2000px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
}

/* Ultra-wide screens (3440px+) */
@media screen and (min-width: 3440px) {

    .container,
    .site-footer .container {
        width: 55%;
        max-width: 2000px;
    }

    .hero-slider {
        width: 60%;
        max-width: 2200px;
    }

    .slide-content {
        width: 55%;
        max-width: 2000px;
    }

    .numbers-container,
    .testimonial-container {
        width: 55%;
        max-width: 2000px;
    }

    .numbers-section::before,
    .testimonial-section::before {
        width: 60%;
        max-width: 2200px;
    }
}