.fadebackgroundoverlay::before {
	z-index: 100;
	pointer-events: none;
}

/* --- DICHIARAZIONE VARIABILI COLORE --- */
/* Modifica questi valori per cambiare il colore base dell'effetto sfumato.
   Ricorda di aggiornare sia il HEX che i componenti RGB.
   Questi valori sono presi dal tuo #FEF3F3. */
:root {
    --fade-base-color-hex: #FEF3F3;       /* Il tuo colore HEX (per riferimento e per il colore di sfondo della sezione) */
    --fade-base-color-rgb: 254, 243, 243; /* I componenti R, G, B del tuo colore (usati nei gradienti) */
}

/* --- STILE ELEMENTO CONTENITORE (.fadesectionround) --- */
/* Applica questa classe CSS alla tua sezione in Elementor.
   ASSICURATI di impostare il BACKGROUND COLOR della sezione in Elementor su #FEF3F3 (o il tuo --fade-base-color-hex).
   DISABILITA COMPLETAMENTE la funzionalità "Sfondo Overlay" di Elementor per questa sezione. */
.fadesectionround {
    position: relative; /* ESSENZIALE per il posizionamento corretto del ::before */
    overflow: hidden;   /* Nasconde eventuali sbordature della sfumatura */
}

/* --- STILE BASE PER LO PSEUDO-ELEMENTO ::before (L'OVERLAY DI SFUMATURA) --- */
/* Queste proprietà sono comuni a tutte le dimensioni dello schermo */
.fadesectionround::before {
    content: ''; /* Obbligatorio per renderizzare lo pseudo-elemento */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* Copre l'intera area del genitore */
    z-index: 100; /* Assicura che sia sopra gli altri elementi */
    pointer-events: none; /* Permette l'interazione con il contenuto sottostante */
    background-repeat: no-repeat; /* Evita la ripetizione indesiderata dei gradienti */
}


/* --- MEDIA QUERY: EFFETTO COMPLETO (> 1366px) --- */
/* Questa media query attiva l'effetto di sfumatura su tutti i lati tranne il top
   quando la larghezza dello schermo è MAGGIORE di 1366px. */
@media (min-width: 1367px) {
    .fadesectionround::before {
        /* L'effetto di sfumatura su tutti i lati tranne il top */
        background-image:
            /* 1. Sfumatura dal BASSO verso l'ALTO (Opacità iniziale leggermente più alta per l'effetto principale) */
            linear-gradient(to top, rgba(var(--fade-base-color-rgb),0.8) 0%, rgba(var(--fade-base-color-rgb),0) 100%),
            /* 2. Sfumatura da SINISTRA verso DESTRA (Opacità iniziale più bassa per la sovrapposizione) */
            linear-gradient(to right, rgba(var(--fade-base-color-rgb),0.6) 0%, rgba(var(--fade-base-color-rgb),0) 100%),
            /* 3. Sfumatura da DESTRA verso SINISTRA (Opacità iniziale più bassa per la sovrapposizione) */
            linear-gradient(to left, rgba(var(--fade-base-color-rgb),0.6) 0%, rgba(var(--fade-base-color-rgb),0) 100%),
            /* 4. Sfumatura dall'ANGOLO INFERIORE SINISTRO (Opacità ancora più bassa per gli angoli) */
            linear-gradient(to top right, rgba(var(--fade-base-color-rgb),0.4) 0%, rgba(var(--fade-base-color-rgb),0) 100%),
            /* 5. Sfumatura dall'ANGOLO INFERIORE DESTRO (Opacità ancora più bassa per gli angoli) */
            linear-gradient(to top left, rgba(var(--fade-base-color-rgb),0.4) 0%, rgba(var(--fade-base-color-rgb),0) 100%);
        
        /* I valori "0%" e "100%" creano una sfumatura che copre l'intera dimensione del gradiente,
           riproducendo lo stile "lineare" tipico di Elementor. */
    }
}

/* --- MEDIA QUERY: EFFETTO SOLO IN BASSO (<= 1366px) --- */
/* Questa media query attiva l'effetto di sfumatura solo dal basso
   quando la larghezza dello schermo è MINORE o UGUALE a 1366px. */
@media (max-width: 1366px) {
    .fadesectionround::before {
        /* L'effetto di sfumatura solo dal basso (con l'opacità originale dell'overlay nativo) */
        background-image:
            linear-gradient(to top, rgba(var(--fade-base-color-rgb),0.9) 0%, rgba(var(--fade-base-color-rgb),0) 50%);
            /* Ho usato 0.9 qui per simulare un'opacità più "solida" all'origine, simile all'overlay nativo. */
    }
}