.prodotti-section {
    width: 100%;
    max-width: 1920px;
    margin: 80px auto 0 auto;
    max-height: 2355px;
    position: relative;
    background-image: url('../images/bg-prodotti-desktop.svg');
    background-size: 1920px auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 10%;
}

.opportunita-desktop {
    margin-top:12% !important;
    width: 100%;
}

.beauty-nervoso-container {
    margin-top:12% !important;
    width: 100%;
}

/* Layout Mobile - 3 immagini in colonna */
.prodotti-mobile-container {
    margin-top: 20px;
}

.opportunita-mobile,
.beauty-mobile,
.nervoso-mobile {
    margin-bottom: 30px;
}

/* Larghezza massima per beauty-mobile */
.beauty-mobile svg {
    width: 100%;
    height: auto;
    max-width: 300px;
}

/* Larghezza massima per nervoso-mobile */
.nervoso-mobile svg {
    width: 100%;
    height: auto;
    max-width: 300px;
}

/* Media queries per ridimensionare le immagini */

/* Per tablet e schermi medi (768px - 1199px) */
@media (min-width: 992px) {
    .opportunita-desktop svg {
        width: 85%;
        height: auto;
        max-width: 1100px;
    }
    
    .beauty-desktop svg,
    .nervoso-desktop svg {
        width: 90%;
        height: auto;
        max-width: 530px;
    }
}

/* Per tablet piccoli (576px - 767px) */
@media (max-width: 767px) {
    .prodotti-section {
        margin: 40px auto 0 auto;
        padding-bottom: 20px;
    }
    
   
    .prodotti-mobile-container {
        margin-top: 40px;
        padding: 0 20px;
    }
    
    .opportunita-mobile,
    .beauty-mobile,
    .nervoso-mobile {
        margin-bottom: 25px;
    }
    
   
}

/* Per smartphone (fino a 575px) */
@media (max-width: 575px) {
    .prodotti-section {
        margin: 20px auto 0 auto;
        padding-bottom: 20px;
    }
    
   
    
    .beauty-nervoso-container {
        margin-top: 8% !important;
    }
    
    .prodotti-mobile-container {
        margin-top: 30px;
        padding: 0 15px;
    }
    
    .opportunita-mobile,
    .beauty-mobile,
    .nervoso-mobile {
        margin-bottom: 20px;
    }
    
    
    .beauty-mobile svg,
    .nervoso-mobile svg {
       
        max-width: 250px;
    }
    .opportunita-mobile svg {
        max-width: 440px;
    }
}

.aree-trattate-box {
    margin-top: 10%;
}