/* ── Banner mobile min-height ── */
@media (max-width: 767px) {
    .banner-section .slide-item {
        min-height: 560px;
    }
}

@media (max-width: 575px) {
    .banner-section .slide-item {
        min-height: 480px;
    }
}

@media (max-width: 399px) {
    .banner-section .slide-item {
        min-height: 380px;
    }
}

/* ── Section paddings mobile ──
   Le section con padding hardcoded non ereditano le CSS variables --container-pt/pb.
   Le allineiamo ai valori già usati dal sistema per .section-space.
   ≤ 767px → 60px top / 40px bottom
   ≤ 575px → 50px top / 30px bottom
*/
@media (max-width: 767.98px) {
    .services-section-five,
    .about-section,
    .about-section-four,
    .team-section,
    .news-section,
    .call-to-action-two,
    .faqs-section,
    .featured-products,
    .service-section-eight {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .features-section {
        padding-top: 60px;
        padding-bottom: 50px;
    }

    .contact-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 575.98px) {
    .services-section-five,
    .about-section,
    .about-section-four,
    .team-section,
    .news-section,
    .call-to-action-two,
    .faqs-section,
    .featured-products,
    .service-section-eight {
        padding-top: 50px;
        padding-bottom: 30px;
    }

    .features-section {
        padding-top: 50px;
        padding-bottom: 40px;
    }

    .contact-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* ── about-section-four image decorativa ──
   .image-1 ha overflow:hidden (serve per border-radius sull'immagine)
   ma clippa il :before decorativo posizionato a left:-19px.
   Sposto il border-radius sull'img e libero l'overflow sul figure.
*/
.about-section-four .image-column .inner-column .image-1 {
    overflow: visible;
}

.about-section-four .image-column .inner-column .image-1 img {
    border-radius: 5px;
}