/*
	InventarIA Redesign Main CSS
	Versione modificata dal template Retrospect e personalizzata
    f977ec FUCSIA
    643afc VIOLA
*/

/* Stili globali e reset essenziali */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}
@font-face {
    font-family: 'Glacier'; /* Il nome che userai nel CSS */
    src: url('../fonts/Glacier/Glacier-Regular.woff2') format('woff2'),
         url('../fonts/Glacier/Glacier-Regular.woff') format('woff'),
         url('../fonts/Glacier/Glacier-Regular.ttf') format('truetype');
    font-weight: normal; /* Definiamo il peso come 'normal' per la versione Regular */
    font-style: normal;
    font-display: swap; /* Migliora l'esperienza di caricamento del font */
}
/* Variabili CSS per colori */
:root {
    --color-black: #000000;
    --color-dark-grey: #1a1a1a;
    --color-light-grey: #333333;
    --color-white: #ffffff;
    --color-purple: #643afc; /* Viola del wireframe #643afc*/
    --color-pink: #f977ec; /* Fucsia opaco del wireframe */
    --color-yellow: #dbf254; /* Giallo opaco del wireframe */
}

/* Stili base del body */
body {
    font-family: 'Glacier', sans-serif;
    background-color: var(--color-black);
    color: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: 0;
}

/* Stili base per i titoli */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Glacier', sans-serif; /* Applica Glacier ai titoli */
    font-weight: normal; /* Puoi provare 'normal' per il peso di base di Glacier */
    /* Se vuoi un aspetto più audace, potresti usare 'bold' o '700' qui, ma Glacier è già molto forte. */
    line-height: 1.2;
    color: var(--color-white);
    margin: 0;
}

@keyframes image-slideshow {
    0%, 33% { /* Mostra la prima immagine per il primo terzo dell'animazione */
        background-image: url('../images/croce_black.svg');
    }
    33.01%, 66% { /* Passa alla seconda immagine */
        background-image: url('../images/filo_black.svg');
    }
    66.01%, 100% { /* Passa alla terza immagine */
        background-image: url('../images/pois_black.svg');
    }
}

/* Header */
#header {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 1.5em 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-left {
    display: flex;
    align-items: center;
}
/* NUOVI STILI per il logo SVG completo (simbolo + scritta) */
.header-logo-full-svg {
    height: 35px; /* Altezza del logo SVG completo. Regola se necessario */
    width: auto; /* Mantieni proporzioni */
    /* Nessun margin-right perché la scritta è già integrata nell'SVG */
}

/* Navigazione */
#nav .links {
    display: flex;
    gap: 2em;
}

/* Navigazione */
#nav .links {
    display: flex;
    gap: 2em;
}
#nav .links li a {
    color: var(--color-white);
    font-weight: bold;
    text-decoration: none;
}
#nav .links li a:hover {
    color: var(--color-yellow);
}

.dropdown {
    position: relative;
}

.dropdown .submenu {
    display: none;
    position: absolute;
    background-color: var(--color-dark-grey);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 10px 0;
    border-radius: 5px;
    top: 100%;
    left: 0;
}

.dropdown .submenu li a {
    color: var(--color-white);
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: normal;
}

.dropdown .submenu li a:hover {
    background-color: var(--color-light-grey);
}

.dropdown:hover .submenu {
    display: block;
}

.dropdown a i {
    margin-left: 5px;
    font-size: 0.8em;
}

/* Pulsanti Header */
.header-buttons {
    display: flex;
    gap: 1em;
}

.button {
    padding: 0.8em 1.5em;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button-signin {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}
.button-signin:hover {
    background-color: var(--color-light-grey);
    border-color: var(--color-light-grey);
}

.button-create-now {
    background-color: var(--color-yellow);
    border: none;
    color: var(--color-black);
}
.button-create-now:hover {
    background-color: var(--color-pink);
    color: var(--color-white);
}

/* INIZIO SEZIONI*/

/* 1-Hero Section */
#hero-main {
    display: flex; /* Usa Flexbox per le due colonne principali */
    width: 100%; 
    max-width:none; /* Adatto la sezione a tutta la larghezza del display */
    margin: 0 auto; /* Centra la sezione */
    min-height: 80vh; /* Altezza minima adeguata */
    margin-top: 6.5em; /* Spazio per l'header fisso */
    background-color: var(--color-black);
    overflow: hidden;
    color: var(--color-white);
    padding: 0; /* Rimosso padding esterno, sarà gestito dalle colonne interne */
    /* BORDO INFERIORE: questa linea sarà il bordo superiore della Three Steps Section */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-col-left {
    flex: 0 0 25%; /* Colonna sinistra più stretta, regola la percentuale se vuoi più o meno stretta */
    background-color: var(--color-black);
    background-image: url('../images/pattern filo rosa.svg'); /* Pattern Viola */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1400px auto; /* Dimensione del tile, aggiusta per la densità */
    /* Assicurati che l'altezza del tile sia tale da allinearsi bene con il bordo */
}

.hero-col-right {
    flex: 1; /* La colonna destra occupa il restante 65% */
    display: flex;
    flex-direction: column; /* Gli elementi al suo interno si impilano */
    background-color: var(--color-black);
}

.hero-right-row-top {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    background-color: var(--color-black);
    background-image: url('../images/Risorsa 14.svg'); /* Pattern Rosa */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1500px auto; /* Dimensione del tile, aggiusta */
    min-height: 50%; /* Metà altezza della colonna destra */
    /* La linea bianca qui non è necessaria se il suo genitore ha il bordo sotto */
}

.hero-right-row-bottom {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    background-color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10em 6em; /* Padding intorno al titolo */
    min-height: 45%; /* Metà altezza della colonna destra */
}

.hero-right-row-bottom h2 {
    font-size: 5.5vw; /* Dimensione del titolo principale */
    font-weight: 700;
    line-height: 1.1; /* Spaziatura tra le righe del titolo */
    color: var(--color-white);
}

/*2- Three Steps Section  */
#three-steps {
    background-color: var(--color-black);
    padding : 6em 2em;
    text-align: center;
    margin: 0;
}

#three-steps .inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

#three-steps h2 {
    text-align: left;
    font-size: 4em;
    margin-bottom: 1em;
}

#three-steps .highlight-yellow {
    color: var(--color-yellow);
}

.steps-container {
    display: flex;
    justify-content: space-between;
    gap: 2em;
    flex-wrap: wrap;
    text-align: left;
}

.step-item {
    flex-basis: calc(33.333% - 2em);
    background-color: var(--color-dark-grey);
    padding: 3em 2em;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.step-item img {
    max-width: 100px;
    height: auto;
    margin-bottom: 1.5em;
}

.step-item h3 {
    font-size: 1.8em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.step-item p {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.8);
}

/*3- MICS Info Section */
#mics-info-section {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    background-color: var(--color-black);
    max-width: 100%; 
    margin: 0 auto;
    min-height: auto; 
    color: var(--color-white);
    padding: 2em 3em; /* pagging superiore ed inferiore*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mics-info-left {
    flex: 0 0 40%;
    background-color: var(--color-black);
    padding: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}

/* NUOVO: Stili per il link del logo MICS */
.mics-logo-link {
    display: flex; /* Usa Flexbox per affiancare immagine e testo */
    flex-direction: row; /* Li mantiene affiancati */
    align-items: center; /* Centra verticalmente */
    gap: 20px; /* Spazio tra immagine e testo */
    text-decoration: none; /* Rimuove la sottolineatura di default del link */
    color: inherit; /* Assicura che i colori del testo siano ereditati o impostati altrove */
}


.mics-info-left img {
    max-width: 150px; /* Dimensione del SOLO simbolo MICS */
    height: auto;
    margin-bottom: 0;
}

/* LOGO SEZIONE MICS */
.mics-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.mics-logo-text h2 {
    font-size: 2.8em;
    font-weight: 900;
    line-height: 1;
    color: var(--color-white);
    margin-bottom: 0;
}

.mics-logo-text p {
    font-size: 0.9em;
    line-height: 1.2;
    color: var(--color-white);
    margin-bottom: 0;
}
.mics-logo-text p:first-of-type {
    margin-top: 0.5em;
}

.mics-info-right {
    flex: 1;
    background-color: var(--color-black);
    padding: 3em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.mics-info-right .text-content {
    max-width: 800px;
    margin: 0 auto;
    /* NUOVO: Allinea il blocco di testo a sinistra */
    text-align: left; 
}

.mics-info-right p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 1em;
    color: rgba(255, 255, 255, 0.9);
    text-align: left; 
}

.mics-info-right p:last-child {
    margin-bottom: 0;
}

.expandable-content .long-text {
    display: none;
}

.read-more-btn, .read-less-btn {
    background: none;
    border: none;
    color: var(--color-pink);
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: underline;
    padding: 0;
    margin-top: 1em;
    transition: color 0.3s ease;
}

.read-more-btn:hover, .read-less-btn:hover {
    color: var(--color-yellow);
}

/*4- SEZIONE IL PROGETTO INVENTARIA */
#il-progetto-inventaria {
    display: flex;
    background-color: var(--color-black);
    min-height: 450px; 
    max-width: 100%; 
    margin: 0 auto; 
    color: var(--color-white);
    padding: 0; 
    margin-top: 0; 
    margin-bottom: 0; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Colonna sinistra (Pattern Giallo con croce nera che alterna) */
.progetto-right-side { 
    flex: 0 0 35%; 
    background-color: var(--color-yellow); 
    
    /* MODIFICATO: Applica l'animazione per alternare le immagini */
    /* Imposto l'immagine iniziale, sarà sovrascritta dall'animazione una volta avviata */
    background-image: url('../images/croce_black.svg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 50% auto; 

    animation: image-slideshow 6s linear infinite; /* 9s = 3 immagini * 3 secondi ciascuna */
    
    border-right: 1px solid rgba(255, 255, 255, 0.2); 
}


/* Colonna destra (Contenuto testuale) */
.progetto-left-side { /* Nome classe mantenuto, ma è la colonna destra visualmente */
    flex: 1; /* Occupa il restante spazio, ora più grande */
    display: flex;
    flex-direction: column; 
    background-color: var(--color-black);
}

.progetto-title-box {
    /* MODIFICATO: Regola il padding per lasciare più spazio sopra e sotto il titolo */
    padding: 3em 3em 1.5em 3em; /* Padding intorno al titolo (top, right, bottom, left) */
    position: relative; 
}

.progetto-title-box h2 {
    font-size: 4em;
    color: var(--color-yellow);
    line-height: 1.1;
    font-weight: 900;
    /* MODIFICATO: Rimuovi max-width se presente qui per permettere al titolo di espandersi */
    /* max-width: none; */ 
}

/* La linea bianca sotto il titolo (lasciata come prima, si adatta al padding) */
.progetto-title-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 3em; 
    right: 3em; 
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.progetto-description-box {
    /* MODIFICATO: Regola il padding per il testo */
    padding: 1.5em 3em 3em 3em; /* Padding intorno alla descrizione (top, right, bottom, left) */
    flex-grow: 1; 
    display: flex;
    align-items: center; 
}

.progetto-description-box p {
    font-size: 1.1em;
    line-height: 1.6;
    max-width: none; /* Rimosso max-width: 600px; */
    color: rgba(255, 255, 255, 0.9);
}


/* 5- UN TESORO NASCOSTO NEI MAGAZZINI */
#hidden-treasure-section {
    display: flex; 
    background-color: var(--color-black);
    max-width: 100%; /* Larghezza massima che si adatta alla larghezza della finestra */
    margin: 0 auto; /* Centra la sezione */
    color: var(--color-white);
    padding: 0; 
    min-height: 500px; /* Altezza minima per la sezione  */
    
    /* La linea inferiore è già impostata sull'ID della sezione sopra */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hidden-treasure-left-column {
    flex: 0 0 60%; /* La colonna sinistra occupa il 60% della larghezza */
    background-color: var(--color-black);
    display: flex;
    flex-direction: column; /* Gli elementi al suo interno (titolo e testo) si impilano */
    padding-top: 5em; /* Padding superiore */
    padding-bottom: 5em; /* Padding inferiore */
}

.treasure-title-wrapper {
    padding: 0 3em; /* Padding laterale, 0 verticale */
    margin-bottom: 2em; /* Spazio sotto il titolo wrapper */
}

.treasure-title-wrapper h2 {
    font-size: 4em;
    color: var(--color-yellow);
    line-height: 1.1;
    font-weight: 900;
}

.treasure-text-wrapper {
    padding: 0 3em; /* Padding laterale per il testo */
    display: flex;
    flex-direction: column;
    /* Usare 'gap' se si vuole uno spazio fisso tra i paragrafi o 'justify-content' */
    /* justify-content: space-between; */ /* Se si vuole distribuire lo spazio tra i paragrafi */
}

.treasure-text-wrapper p {
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 600px; /* Limita la larghezza del testo */
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5em; /* Spazio tra i paragrafi */
}
.treasure-text-wrapper p:last-child {
    margin-bottom: 0; /* Rimuovi margine dall'ultimo paragrafo */
}

.hidden-treasure-right-column {
    flex: 1; /* La colonna destra occupa il restante 40% */
    background-color: var(--color-black); /* Sfondo nero */
    background-image: url('../images/pattern_filo_giallo.svg'); /* Path al tuo SVG giallo */
    background-repeat: no-repeat; /* Ripeti il pattern */
    background-position: center; /* Centra l'inizio del pattern */
    background-size: 1200px auto; /* Dimensione di ogni singolo tile del pattern. */
}

/* 6-SEZIONE CO-DESIGN INTELLIGENTE  */
#co-design-section {
    display: flex; /* Rende la sezione principale un flex container per le due colonne */
    background-color: var(--color-black);
    max-width: 100%; /* Larghezza massima come le altre sezioni */
    margin: 0 auto;
    color: var(--color-white);
    /* Spaziatura esterna (sezione intera) */
    padding : 0;
    min-height: 700px; /* Altezza minima per mantenere la proporzione, aggiusta se necessario */
    /* BORDO INFERIORE: questa linea sarà il bordo superiore della nuova sezione Moda Sostenibile */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 0;
    margin-bottom: 0;
}

.co-design-left-column {
    flex: 0 0 60%; /* La colonna sinistra occupa circa il 60% della larghezza */
    display: flex;
    flex-direction: column; /* Gli elementi al suo interno si impilano verticalmente */
    background-color: var(--color-black); /* Sfondo nero */
}

.cod-pattern-top {
    flex-grow: 1; /* Permette a questo div di occupare lo spazio disponibile */
    background-image: url('../images/pattern filo rosa.svg'); /* Path all' SVG rosa */
    background-repeat: no-repeat;
    background-position: center; /* Centra l'inizio del pattern */
    background-size: 1800px auto; /* Dimensione di ogni singolo tile del pattern. Regola per la densità desiderata */
    min-height: 250px; /* Altezza minima per la sezione del pattern superiore */
}

.cod-title-bottom {
    flex-shrink: 0; /* Impedisce al titolo di restringersi */
    background-color: var(--color-black);
    padding: 3em; /* Padding intorno al titolo */
    min-height: 250px; /* Altezza minima per il box del titolo */
    display: flex; /* Centra il testo verticalmente */
    align-items: center;
}

.cod-title-bottom h2 {
    font-size: 3.8em; /* Dimensione del titolo */
    color: #f977ec; /* Colore rosa per il titolo */
    line-height: 1.1;
    font-weight: 900;
}

.co-design-right-column {
    flex: 1; /* La colonna destra occupa il restante 45% */
    display: flex;
    flex-direction: column; /* Gli elementi al suo interno si impilano verticalmente */
    background-color: var(--color-black); /* Sfondo nero */
}

.cod-text-top {
    flex-grow: 1; /* Permette a questo div di occupare lo spazio disponibile */
    background-color: var(--color-black);
    padding: 4em; /* Padding intorno al testo */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuisce lo spazio tra i paragrafi */
}

.cod-text-top p {
    font-size: 1.1em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5em; /* Spazio tra i paragrafi */
}
.cod-text-top p:last-child {
    margin-bottom: 0; /* Rimuovi margine dall'ultimo paragrafo */
}

.cod-pattern-bottom {
    flex-grow: 1; /* Permette a questo div di occupare lo spazio restante */
    background-image: url('../images/pattern filo rosa.svg'); /* Path al tuo SVG rosa */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1400px auto; /* Stessa dimensione del pattern superiore */
    min-height: 290px; /* Altezza minima per la sezione del pattern inferiore */

}

/* 7-SEZIONE: Moda Sostenibile, Intelligente e Senza Sprechi --- */
#sustainable-fashion-section {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 0;
    min-height: 500px; /* Altezza minima della sezione */
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sf-left-col {
    flex: 0 0 42%;
    background-color: var(--color-black);
    background-image: url('../images/Risorsa 14.svg');
    background-repeat: repeat;
    background-position: center;
    background-size: 1700px auto; /* Dimensione di ogni singolo tile del pattern. REGOLA PER LA DENSITÀ DESIDERATA */
    padding: 0;
}

.sf-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-black);
    /* NUOVO: Padding generale per la colonna destra, come in hidden-treasure-left-column */
    padding-top: 5em;    /* Sposta il contenuto (titolo e testo) più in basso */
    padding-bottom: 5em; /* Spazio sotto il contenuto */
    padding-left: 3em;   /* Padding laterale sinistro */
    padding-right: 3em;  /* Padding laterale destro */
}

.sf-title-row {
    /* Rimosso flex-grow, min-height, align-items, justify-content e padding, 
       ora gestiti da .sf-right-col e da margin-bottom */
    /* flex-grow: 1; */ 
    /* display: flex; */ /* Potrebbe non essere più necessario, il titolo è un blocco */
    /* justify-content: flex-start; */
    /* align-items: center; */
    text-align: left; /* Allinea il testo all'interno di h2 a sinistra */
    /* padding: 4em 3em; */ /* Padding sostituito dal padding della colonna padre */
    /* min-height: 40%; */
    
    /* NUOVO: Margin-bottom per separare il titolo dal testo, come in treasure-title-wrapper */
    margin-bottom: 2em; 
}

.sf-title-row h2 {
    font-size: 4.5em;
    color: #643afc;
    line-height: 1.1;
    font-weight: 900;
    /* NUOVO: Implementa clamp() per la responsività del font-size */
    font-size: clamp(2.5em, 4.5vw, 4.5em); 
}

.sf-text-row {
    /* Rimosso flex-grow, min-height, padding, justify-content e align-items, 
       ora gestiti da .sf-right-col e margini sui paragrafi */
    /* flex-grow: 1; */
    background-color: var(--color-black);
    /* padding: 3em; */ /* Padding sostituito dal padding della colonna padre */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */ 
    /* align-items: flex-start; */ 
    /* min-height: 60%; */
}

.sf-text-row p {
    font-size: 1.1em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    /* NUOVO: Aggiungiamo un margine per separare i paragrafi, come in treasure-text-wrapper */
    margin-bottom: 1.5em; 
    max-width: 700px;
}
.sf-text-row p:last-child {
    margin-bottom: 0;
}
/* 8-Sezione MICS Synergies */
#mics-synergies-section {
    background-color: var(--color-black);
    padding-top: 3em; /* MODIFICATO: Ridotto padding-top a 3em */
    padding-bottom: 6em;
    color: var(--color-white);
    overflow: hidden;
}

.mics-synergies-header {
    display: flex;
    max-width: 1800px;
    margin: 0 auto;
    margin-bottom: 4em;
}

.mics-synergies-header-left {
    flex: 0 0 40%;
    background-color: var(--color-yellow);
    padding: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mics-synergies-header-left h2 {
    font-size: 4.5em;
    color: var(--color-black);
    line-height: 1.1;
    text-align: center;
}

.mics-synergies-header-right {
    flex: 1;
    background-color: var(--color-dark-grey);
    padding: 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mics-synergies-header-right p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 1em;
    color: rgba(255, 255, 255, 0.9);
}
.mics-synergies-header-right p:last-child {
    margin-bottom: 0;
}

/* Accordion Styles */
.mics-accordion-container {
    max-width: 1800px; /* Stessa larghezza dell'header per allineamento */
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.accordion-item {
    margin-bottom: 0.5em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 1.5em 3em; /* Aumentato padding orizzontale per allineare */
    background-color: var(--color-dark-grey);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-header:hover {
    background-color: #444444;
}

.accordion-header.active {
    background-color:f977ec;
    color: var(--color-black);
}

.accordion-icon {
    width: 40px;
    height: 40px;
    margin-right: 1.5em;
    flex-shrink: 0;
}

.accordion-title {
    flex-grow: 1;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.3;
}

.accordion-toggle-icon {
    font-size: 1.8em;
    margin-left: 1em;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.accordion-header.active .accordion-toggle-icon {
    transform: rotate(0deg);
}

.accordion-content {
    background-color: var(--color-dark-grey);
    padding: 0 3em; /* Aumentato padding orizzontale per allineare */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    color: rgba(255, 255, 255, 0.8);
}

.accordion-content.active {
    padding: 1.5em 3em; /* Aumentato padding orizzontale quando attivo */
}

.accordion-content p {
    margin-bottom: 1em;
    font-size: 1em;
    line-height: 1.6;
}

.accordion-content p:last-child {
    margin-bottom: 0;
}


/* 8-SEZIONE Let's Talk */
#lets-talk-section {
    background-color: var(--color-black); /* Sfondo nero solido */
    padding: 0 0 0 0;
    position: relative;
    overflow: hidden;
    min-height: 700px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Linea di separazione */
}

.lets-talk-content {
    display: flex;
    max-width: 1800px;
    margin: 0 auto;
    background-color: var(--color-black);
}

.lets-talk-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3em;
    position: relative;
    overflow: hidden;
    background-color: var(--color-black);
}

.lets-talk-left h2 {
    font-size: 8em;
    color: var(--color-yellow);
    line-height: 1;
    position: relative;
    z-index: 2;
}

.lets-talk-left .arrow-icon {
    font-size: 0.9em;
    width: 2em; /* Dimensione dell' svg della freccia*/
    vertical-align: middle; /* super*/
    display: inline-block;
    margin-left: 0.1em; /*0.2 em */
    transform: translateY(-0.1em);
}

.lets-talk-right {
    flex: 1;
    background-color: var(--color-dark-grey);
    padding: 3em 4em;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente il testo */
    align-items: flex-start; /* Allinea il testo a sinistra */
}

.lets-talk-right p {
    /* MODIFICATO: Usa clamp() per un font-size responsivo e più grande */
    /* clamp(min_size, viewport_scaling_size, max_size) */
    font-size: clamp(1.3em, 2vw, 1.6em); 
    line-height: 1.6;
    margin-bottom: 1.5em; /* Spazio tra i due paragrafi */
    color: rgba(255, 255, 255, 0.9);
    text-align: left; /* Assicura che il testo sia allineato a sinistra */
    max-width: none; /* RIMOSSO: Rimuovi la limitazione di larghezza per farlo riempire la sezione */
}
.lets-talk-right p:last-child {
    margin-bottom: 0; /* Rimuovi margine dall'ultimo paragrafo */
}

.lets-talk-right p .email-link {
    color: var(--color-yellow); /* Colore giallo per il link */
    text-decoration: underline; /* Sottolineato per indicare che è cliccabile */
    font-weight: 700; /* Per farlo spiccare */
    transition: color 0.3s ease;
}

.lets-talk-right p .email-link:hover {
    color: var(--color-pink); /* Cambia colore al passaggio del mouse */
}

/* FOOTER  */
#main-footer {
    /*max-width: 1400px;*/
    width: 100%; /* **AGGIUNTO: Assicura che occupi tutta la larghezza disponibile** */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
}

/* Stili per la riga superiore del footer (sfondo giallo) */
.footer-top-row {
    display: flex;
    background-color: var(--color-yellow);
    color: var(--color-black); /* Testo nero di default per questa riga */
    padding: 3em 3em;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    
}

.footer-section-logo {
    flex: 0 0 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-logo-link {
    display: inline-block;
    line-height: 0;
}

.footer-inventaria-logo {
    height: 40px;
    width: auto;
    /* Rimuovi completamente il filtro brightness/invert qui, l'SVG deve essere già nero */
    /* filter: brightness(0) invert(0); */
}

.footer-section-nav {
    flex: 0 0 auto;
    padding: 0 1em;
}

.footer-section-contact {
    flex: 0 0 auto;
    padding: 0 1em;
}

.footer-title {
    font-size: 1.2em;
    font-weight: normal; /* **MODIFICATO: NON IN GRASSETTO** */
    color: var(--color-black);
    margin-bottom: 1em;
}

.footer-links li, .footer-contact-info li {
    margin-bottom: 0.5em;
}
.footer-links li:last-child, .footer-contact-info li:last-child {
    margin-bottom: 0;
}

.footer-links a, .footer-contact-info a {
    color: rgba(0, 0, 0, 0.7);
    font-size: 1em;
    font-weight: normal; /* **MODIFICATO: NON IN GRASSETTO** */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover, .footer-contact-info a:hover {
    color: var(--color-black);
}

/* Stili per la riga inferiore del footer (sfondo nero con loghi partner) */
.footer-bottom-row {
    display: flex;
    background-color: var(--color-black);
    padding: 2em 3em;
    justify-content: flex-start;
    align-items: center;
}

.footer-partners-area {
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.footer-partner-logo { /* Logo Technova nel footer */
    height: 30px;
    width: auto;
    /* Rimuovi completamente il filtro brightness qui, l'SVG deve essere già bianco */
    /* filter: brightness(0); */
}

.footer-partner-pluff { /* Titolo Pluff Studio nel footer */
    font-size: 1.1em;
    font-weight: 900;
    color: var(--color-white);
    margin: 0;
}


/* Media Queries per il Footer */
/* Media Query per schermi fino a 980px (Tablet) */
@media screen and (max-width: 980px) {
    #main-footer {
        padding: 0;
    }
    .footer-top-row {
        flex-direction: column; /*Questo garantisce che gli elementi vengano impilati nella riduzione dello schermo: passando da orizzontale a verticale */
        padding: 3em 2em;
        align-items: center;
    }
    .footer-section-logo,
    .footer-section-nav,
    .footer-section-contact {
        flex: none;
        width: 100%;
        text-align: center;
        margin-bottom: 1.5em;
        padding: 0;
    }
    .footer-section-logo {
        margin-bottom: 2em;
    }
    .footer-section-contact {
        margin-bottom: 0;
    }

    .footer-title {
        font-weight: normal; /* **MODIFICATO: NON IN GRASSETTO ANCHE SU MOBILE** */
    }
    .footer-links a, .footer-contact-info a {
        font-weight: normal; /* **MODIFICATO: NON IN GRASSETTO ANCHE SU MOBILE** */
    }
    .footer-bottom-row {
        justify-content: center;
        padding: 2em 2em;
    }

}

/* Media Query per schermi fino a 600px (Smartphone) */
@media screen and (max-width: 600px) {
    #main-footer {
        padding: 0;
    }
    .footer-top-row {
        padding: 2em 1em;
    }
    .footer-section-logo {
        margin-bottom: 1.5em;
    }
    .footer-inventaria-logo { height: 35px; }
    .footer-title { font-size: 1.1em; margin-bottom: 0.8em; font-weight: normal; } /* **MODIFICATO: NON IN GRASSETTO ANCHE SU MOBILE** */
    .footer-links a, .footer-contact-info a { font-size: 0.9em; font-weight: normal; } /* **MODIFICATO: NON IN GRASSETTO ANCHE SU MOBILE** */

    .footer-bottom-row {
        padding: 1.5em 1em;
    }
    .footer-partner-logo { height: 25px; }
    .footer-partner-pluff { font-size: 1em; }
}

/* SEZIONE-Pagina AZIENDE PARTNER: La sezione ha due colonne, la sinistra è fissa e la destra è scorrevole */

#partners-hero {
    display: flex;
    background-color: var(--color-black);
    padding-top: 80px;
    overflow: hidden;
    height: 100vh;
}

.partners-left-column {
    flex: 0 0 50%;
    background-color: var(--color-black);
    padding: 6em 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: sticky;
    top: 0;
    align-self: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.partners-left-column h2 {
    font-size: 5em;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1em;
    color: var(--color-white);
    
}

.partners-left-column p {
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 500px;
    color: rgba(255, 255, 255, 0.9);
}

.partners-right-column {
    flex: 1; /* La colonna destra occupa il restante 50% */
    /* background-color: var(--color-dark-grey); */ /* RIMOSSO: Il colore base viene ora da sfondo_partner.jpg */
    background-image: url('../images/sfondo_partner.jpg'); /* **CRUCIALE:** L'immagine di sfondo va qui */
    background-repeat: no-repeat; /* Non ripete l'immagine */
    background-position: center; /* Centra l'immagine */
    background-size: cover; /* Copre l'intera area della colonna */
    background-attachment: local; /* L'immagine scorre con il contenuto della colonna */
    /* Se volessi che l'immagine fosse fissa anche all'interno dello scroll della colonna, useresti background-attachment: fixed; ma è complesso da gestire con overflow-y: auto; */

    position: relative; /* Contesto di posizionamento per elementi assoluti */
    height: 100%; /* Deve occupare l'intera altezza per consentire lo scroll */
    overflow-y: auto; /* Abilita lo scorrimento verticale del contenuto */
    scroll-behavior: smooth; /* Rende lo scroll più fluido */
    padding: 0; /* Rimuove qualsiasi padding esterno, la spaziatura sarà interna al contenuto scorrevole */
}

/* L'elemento .yellow-pattern-large sarà ORA il tuo QUADRATO GIALLO RUOTATO, non l'immagine di sfondo */
.yellow-pattern-large {
    position: sticky; /* Torna a sticky */
    top: 50px; /* Posizione sticky */
    right: 0;
    width: 90%; /* Dimensione del pattern */
    height: 90%;
    background-color: var(--color-yellow); /* Il colore giallo del quadrato ruotato */
    background-image: none; 
    transform: rotate(30deg); /* Ruota */
    z-index: 1; /* Sopra lo sfondo base della colonna, sotto le card */
    border-radius: 20px;
}

/* Il contenitore che racchiude le schede dei partner e che scorrerà sopra lo sfondo */
.partners-scroll-content {
    position: relative; /* Crea un nuovo contesto di impilamento */
    z-index: 2; /* Posiziona questo contenitore sopra .yellow-pattern-large e lo sfondo della colonna */
    background-color: transparent; /* **CRUCIALE:** Lo sfondo è TRASPARENTE, permettendo all'immagine sfondo_partner.jpg di essere visibile negli spazi. */
    padding: 5em 3em; /* Spaziatura interna del contenuto scorrevole */
}

.partner-section {
    min-height: calc(100vh - 80px - 10em); /* Forza lo scroll "una alla volta" */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Allinea la card in basso all'interno della sua sezione */
    align-items: flex-end; /* Allinea la card a destra all'interno della sua sezione */
    padding-bottom: 6em; /* Spazio sotto ogni card (mantenuto grande per "una alla volta") */
    background-color: transparent; /* La partner-section stessa è trasparente */
}

/* Stili specifici per la card Technova (con sfondo nero) */
.partner-card.technova-card {
    background-color: #1a1a1a;
    color: var(--color-white); /* Testo bianco per Technova */
    border-radius: 15px; /* **MODIFICATO: Angoli smussati per Technova** */
    border: none;
}

.partner-card img {
    max-width: 200px;
    height: auto;
    margin-bottom: 1.5em;
    display: block;
}

.partner-card h3 {
    font-size: 2em;
    margin-bottom: 1em;
    font-weight: 700;
}

.partner-card p {
    font-size: 0.95em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 111);
}

/* Stili specifici per Pluff Studio (card GIALLA SOLIDA con testo nero) */
.partner-section-pluff .pluff-card {

    background-color: #dbf254;
    color: var(--color-white); /* Testo bianco per Technova */
    border-radius: 15px; /* **MODIFICATO: Angoli smussati per Technova** */
    border: none;
}

.partner-section-pluff .pluff-card h3 {
    color: var(--color-black);
}

.partner-section-pluff .pluff-card p {
    color: rgba(0, 0, 0, 0.85);
}

/* --- Media Queries Generali per la Responsività --- */

@media screen and (max-width: 1200px) {
    /* Hero Section per 1200px */
    #hero-main {
        flex-direction: column; /* 🔹 Passiamo già al layout impilato */
        min-height: auto; 
        margin-top: 0;
        padding-top: 2em;
        padding-bottom: 2em;
    }

    .hero-col-left, .hero-col-right {
        flex: none;
        width: 100%; /* Colonne a tutta larghezza */
        min-height: auto;
    }

    .hero-col-left {
        min-height: 200px; /* più grande che a 980px, per respiro */
        background-size: 100% auto; /* estende il pattern su tutta la larghezza */
        background-position: center;
    }

    .hero-right-row-top {
        min-height: 300px;
        background-size: 100% auto; /* estende il pattern su tutta la larghezza */
        background-position: center;
    }

    .hero-right-row-bottom {
        padding: 4em 2em; /*  un po’ più spazioso rispetto al mobile */
        min-height: auto;
    }

    .hero-right-row-bottom h2 { 
        font-size: 4.2em; /*  più grande che a 980px */
    }

    /* Aggiunte per i pattern specifici a 1200px, estendendoli su tutta la larghezza */
    .pattern-purple { 
        grid-area: 1 / 1 / 2 / 2; 
        background-size: 100% auto; /* Estende su tutta la larghezza */
        background-position: center;
    }
    .pattern-pink { 
        grid-area: 2 / 1 / 3 / 2; 
        background-size: 100% auto; /* Estende su tutta la larghezza */
        background-position: center;
    }
    .hero-content { 
        grid-area: 3 / 1 / 4 / 2; 
        padding: 2em 1em; 
    }
    .pattern-yellow-bottom { 
        grid-area: 4 / 1 / 5 / 2; 
        background-size: 100% auto; /* Estende su tutta la larghezza */
        background-position: center;
    }
    .hero-description-box { 
        grid-area: 5 / 1 / 6 / 2; 
        margin: 1em; 
        padding: 1.5em; 
    }
    
    #hero-main h2 {
        font-size: 4.2em; /* Coerente con hero-right-row-bottom h2 */
    }
    .hero-description-box p {
        text-align: center;
    }


    /* Partners Section */
    .partners-left-column h2 { font-size: 4.5em; }
    .partner-card { padding: 2.5em; }

    /* MICS Info Section */
    .mics-info-left img { max-width: 80px; }
    .mics-logo-text h2 { font-size: 2.2em; }
    .mics-logo-text p { font-size: 0.85em; }
    .mics-info-right .text-content { max-width: 90%; }

    /* Moda Sostenibile Section per 1200px */
    .sf-left-col { 
        background-size: 80% auto; 
        padding: 0; 
    }
    /* Rimuovi il padding dalla colonna destra per 1200px, sarà gestito dalle righe interne */
    .sf-right-col {
        padding: 0; /* Rimosso padding globale, le righe interne avranno il loro padding */
    }
    .sf-title-row { 
        padding: 3em 2.5em; /* Padding intorno al titolo, come nella co-design-section */
        margin-bottom: 1.5em; /* Spazio tra titolo e testo */
        text-align: left; /* Allineamento a sinistra */
        display: flex; /* Assicuriamo flex per justify-content/align-items */
        justify-content: flex-start;
        align-items: center;
        min-height: auto;
    }
    .sf-title-row h2 { 
        font-size: clamp(2.8em, 3.8vw, 3.8em); /* Usa clamp per scalabilità */
    }
    .sf-text-row { 
        padding: 2.5em; /* Padding intorno al testo */
        display: flex; /* Assicuriamo flex per justify-content/align-items */
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        min-height: auto;
    }
    .sf-text-row p { 
        font-size: 1em; 
        margin-bottom: 1em; /* Spazio tra i paragrafi */
        max-width: none; /* Consenti al testo di occupare la larghezza disponibile */
    }
    .sf-text-row p:last-child {
        margin-bottom: 0;
    }

}

@media screen and (max-width: 980px) {
    #header {
        flex-direction: column;
        padding: 1em;
        position: static; /* Rimuove fixed per mobile */
    }
    .header-left, #nav, .header-buttons {
        margin-bottom: 1em;
    }
    #nav .links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1em;
    }

/* Hero Section per 980px (layout a singola colonna) */
    #hero-main {
        flex-direction: column; /* Impila le colonne */
        min-height: auto; /* Altezza dinamica su mobile */
        margin-top: 0;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .hero-col-left, .hero-col-right {
        flex: none;
        width: 100%; /* Occupano tutta la larghezza */
        min-height: auto;
    }
    .hero-col-left {
        min-height: 100px; /* Altezza minima per il pattern */
        background-size: 150px auto;
    }
    .hero-right-row-top {
        min-height: 200px; /* Altezza minima per il pattern */
        background-size: 100px auto;
    }
    .hero-right-row-bottom {
        padding: 2em;
        min-height: auto;
    }
    .hero-right-row-bottom h2 { font-size: 3em; }

    /* Posizionamento dei pattern e testo per mobile impilato */
    .pattern-purple { grid-area: 1 / 1 / 2 / 2; background-size: 200px auto; }
    .pattern-pink { grid-area: 2 / 1 / 3 / 2; background-size: 180px auto; }
    .hero-content { grid-area: 3 / 1 / 4 / 2; padding: 2em 1em; }
    .pattern-yellow-bottom { grid-area: 4 / 1 / 5 / 2; background-size: 250px auto; }
    .hero-description-box { grid-area: 5 / 1 / 6 / 2; margin: 1em; padding: 1.5em; }
    
    #hero-main h2 {
        font-size: 3em;
    }
    .hero-description-box p {
        text-align: center;
    }

    /* Three Steps Section */
    #three-steps h2 {
        font-size: 3em;
        text-align: center;
    }
    .step-item {
        flex-basis: 100%;
        align-items: center;
        text-align: center;
    }

    /* MICS Info Section */
    #mics-info-section {
        flex-direction: column;
        min-height: auto;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .mics-info-left, .mics-info-right {
        flex: none;
        width: 100%;
        padding: 2em;
    }
    .mics-info-left {
        /* Adatta la colonna sinistra per centrare il link wrapper */
        flex-direction: column; /* Impila verticalmente se necessario, ma il link wrapper è già un flex container */
        justify-content: center; /* Centra il link wrapper */
        align-items: center; /* Centra il link wrapper */
        padding-top: 3em;
        padding-bottom: 3em;
        /* Rimosso gap qui, perché è gestito da .mics-logo-link */
    }
    /* NUOVO: Adatta il link wrapper per mantenere il layout corretto */
    .mics-logo-link {
        flex-direction: row; /* Mantiene immagine e testo affiancati */
        gap: 15px; /* Spazio ridotto per tablet */
        justify-content: center; /* Centra il contenuto del link se c'è spazio */
    }

    .mics-info-left img { max-width: 70px; }
    .mics-logo-text h2 { font-size: 1.8em; }
    .mics-logo-text p { font-size: 0.8em; }
    /* NUOVO: Allineamento del testo nella colonna destra */
    .mics-info-right .text-content { 
        max-width: 100%; /* Permette al testo di occupare tutta la larghezza disponibile */
        margin: 0; /* Rimuove margin auto per allineamento a sinistra */
        text-align: left; /* Assicura allineamento a sinistra */
    }
    .mics-info-right p {
        text-align: left; /* Assicura allineamento a sinistra */
    }

    /* Partners Section */
    #partners-hero {
        flex-direction: column;
        min-height: auto;
        height: auto;
        padding-top: 0;
    }
    .partners-left-column, .partners-right-column {
        flex: none;
        width: 100%;
        position: static;
        height: auto;
        padding: 3em 2em;
    }
    .partners-left-column {
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-top: 5em;
    }
    .partners-left-column h2 { font-size: 3.5em; }
    .partners-left-column p { max-width: 80%; }
    .partners-right-column {
        min-height: 500px;
        overflow-y: visible;
        display: block;
        padding-bottom: 5em;
    }
    .yellow-pattern-large {
        position: absolute;
        width: 120%;
        height: 120%;
        top: -20%;
        right: -20%;
        opacity: 0.3;
        transform: translate(0,0) rotate(30deg);
    }
    .partners-scroll-content { padding: 0; }
    .partner-section {
        min-height: auto;
        justify-content: center;
        align-items: center;
        padding: 2em 1em;
    }
    .partner-card { max-width: 90%; }

    /* MICS Synergies Section 980*/
    .mics-synergies-header {
        flex-direction: column;
        margin-bottom: 2em;
    }
    .mics-synergies-header-left, .mics-synergies-header-right {
        flex: none;
        width: 100%;
        padding: 2em;
    }
    .mics-synergies-header-left h2 { font-size: 3em; }
    .mics-synergies-header-right { margin-top: 1em; }
    .mics-accordion-container { padding: 0; }
    .accordion-header {
        padding: 1em 1.5em;
        flex-wrap: wrap;
    }
    .accordion-icon {
        margin-right: 1em;
        margin-bottom: 0.5em;
    }
    .accordion-title {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }
    .accordion-toggle-icon {
        width: 100%;
        text-align: right;
        margin-left: 0;
    }
    .accordion-content { padding: 1em 1.5em; }
    
    /* Let's Talk Section 980-singola colonna*/
    #lets-talk-section { padding: 3em 0; } 

    .lets-talk-content {
        flex-direction: column; 
        padding: 0 1em;
    }
    .lets-talk-left, .lets-talk-right {
        flex: none;
        width: 100%;
        padding: 2em;
    }
    .lets-talk-left {
        justify-content: center;
        align-items: center; 
        text-align: center; 
        margin-bottom: 2em; 
    }
    .lets-talk-left h2 { 
        font-size: 3.5em; 
        text-align: center; 
    }

    .lets-talk-right { 
        margin-top: 0; 
        /* MODIFICATO: Allinea gli elementi al suo interno a sinistra */
        align-items: flex-start; /* Cambiato da 'center' a 'flex-start' */
    }
    .lets-talk-right p { 
        /* MODIFICATO: Allinea il testo a sinistra */
        text-align: left; /* Cambiato da 'center' a 'left' */
        max-width: none; /
    }


 /* Moda Sostenibile Section per 980px (layout a colonna singola) */
    #sustainable-fashion-section {
        flex-direction: column; /* Impila le colonne su mobile */
        min-height: auto;
        padding-top: 3em; /* Padding generale della sezione, come co-design */
        padding-bottom: 3em; /* Padding generale della sezione, come co-design */
    }
    .sf-left-col, .sf-right-col {
        flex: none;
        width: 100%; /* Occupano tutta la larghezza */
        min-height: auto;
    }
    .sf-left-col {
        min-height: 200px; /* Altezza minima per il pattern, come co-design */
        background-size: 100% auto; /* Estende il pattern su tutta la larghezza */
        background-position: center;
        padding: 0;
    }
    /* Rimuovi padding e allineamenti dalla colonna destra, li applicheremo alle righe interne */
    .sf-right-col {
        padding: 0;
    }
    .sf-title-row {
        /* Padding e allineamento come cod-title-bottom */
        padding: 2em;
        min-height: auto;
        display: flex; /* Manteniamo flex per un controllo più fine */
        justify-content: flex-start; /* Allinea il titolo a sinistra */
        align-items: center; /* Centra verticalmente il titolo se è su una riga */
        text-align: left; /* Allinea il testo all'interno di h2 a sinistra */
        margin-bottom: 1.5em; /* Spazio sotto il titolo per separarlo dal testo */
    }
    .sf-title-row h2 { 
        font-size: 3em; /* Dimensione font come co-design */
        line-height: 1.1; /* Spaziatura tra le righe del titolo */
    }
    .sf-text-row {
        /* Padding e allineamento come cod-text-top */
        padding: 2em;
        min-height: auto;
        display: flex; /* Manteniamo flex per un controllo più fine */
        flex-direction: column;
        justify-content: flex-start; /* Allinea i paragrafi in alto */
        align-items: flex-start; /* Allinea i paragrafi a sinistra */
        text-align: left; /* Allinea il testo dei paragrafi a sinistra */
    }
    .sf-text-row p { 
        font-size: 1em; /* Dimensione font come co-design */
        margin-bottom: 1em; /* Spazio tra i paragrafi */
        max-width: none; /* Permetti al testo di occupare tutta la larghezza */
    }
    .sf-text-row p:last-child {
        margin-bottom: 0;
    }
}


/* Media Queries per la sezione Il Progetto Inventaria (aggiornate per l'inversione) */
/* Rimosso il commento "background-size: 200px auto;" perché non è un commento CSS valido in quella posizione */

@media screen and (max-width: 980px) {
    #il-progetto-inventaria {
        flex-direction: column; /* Impila le colonne su schermi più piccoli */
        min-height: auto; /* Altezza dinamica quando impilato */
        padding-top: 2.5em; /* MODIFICATO: Leggermente ridotto per compattezza, ma non troppo */
        padding-bottom: 2.5em; /* MODIFICATO: Leggermente ridotto per compattezza, ma non troppo */
    }
    .progetto-left-side,
    .progetto-right-side {
        flex: none;
        width: 100%; /* Occupano tutta la larghezza */
        min-height: auto;
    }
    .progetto-right-side { /* Colonna del pattern su mobile (ora sopra il testo) */
        min-height: 200px; /* MODIFICATO: Altezza minima per il pattern (adeguata all'animazione) */
        background-size: 60% auto; /* Dimensione del pattern (si applica a tutte e 3 le immagini animate) */
        background-color: var(--color-yellow); /* Sfondo giallo anche su mobile */
        border-right: none; /* Rimuovi la linea verticale quando impilato */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Aggiungi un bordo inferiore per separare dal testo */
        /* L'animazione 'image-slideshow' continuerà ad applicarsi */
    }
    .progetto-left-side { /* Contenuto testuale su mobile (ora sotto il pattern) */
        padding: 0; /* Il padding sarà gestito dagli elementi interni (title-box, description-box) */
    }
    .progetto-title-box {
        /* MODIFICATO: Padding specifico per il titolo su tablet */
        padding: 2.5em 2em 1.2em 2em; /* Top, Right, Bottom, Left */
    }
    .progetto-title-box h2 {
        font-size: 3em;
    }
    .progetto-title-box::after {
        left: 2em;
        right: 2em;
    }
    .progetto-description-box {
        /* MODIFICATO: Padding specifico per la descrizione su tablet */
        padding: 1.2em 2em 2.5em 2em; /* Top, Right, Bottom, Left */
    }
    .progetto-description-box p {
        font-size: 1em;
        max-width: none; /* Assicura che il testo riempia la larghezza disponibile */
    }
}

@media screen and (max-width: 600px) {
    #il-progetto-inventaria {
        padding-top: 2em; /* MODIFICATO: Leggermente ridotto per schermi molto piccoli */
        padding-bottom: 2em; /* MODIFICATO: Leggermente ridotto per schermi molto piccoli */
    }
    .progetto-right-side {
        min-height: 200px; /* MODIFICATO: Altezza minima per il pattern su schermi molto piccoli */
        background-size: 50% auto; 
        /* L'animazione 'image-slideshow' continuerà ad applicarsi */
    }
    .progetto-title-box {
        /* MODIFICATO: Padding specifico per il titolo su mobile */
        padding: 2em 1.5em 1em 1.5em; /* Top, Right, Bottom, Left */
    }
    .progetto-title-box h2 {
        font-size: 2.2em;
    }
    .progetto-title-box::after {
        left: 1.5em;
        right: 1.5em;
    }
    .progetto-description-box {
        /* MODIFICATO: Padding specifico per la descrizione su mobile */
        padding: 1em 1.5em 2em 1.5em; /* Top, Right, Bottom, Left */
    }
    .progetto-description-box p {
        font-size: 0.9em;
        max-width: none; /* Assicura che il testo riempia la larghezza disponibile */
    }
}

@media screen and (max-width: 600px) {

    /* Hero Section per 600px */
    .hero-col-left { background-size: 600px auto; min-height: 200px; }
    .hero-right-row-bottom h2 { font-size: 0.5em; }
    .hero-right-row-top { background-size: 600px auto; min-height: 200px; }

    /* Three Steps Section */
    /* Three Steps Section */
    #three-steps h2 { 
        font-size: 2.5em; 
        /* MODIFICATO: Allinea il titolo a sinistra */
        text-align: left; 
    }
    .step-item { 
        padding: 2em 1em; 
        /* MODIFICATO: Allinea gli elementi della step-item a sinistra */
        align-items: flex-start; /* Cambiato da 'center' a 'flex-start' */
        /* MODIFICATO: Allinea il testo all'interno della step-item a sinistra */
        text-align: left; /* Cambiato da 'center' a 'left' */
    }
    .step-item h3 { font-size: 1.5em; }

    /* MICS Info Section */
    .mics-info-left, .mics-info-right { padding: 1.5em; }
    .mics-info-left { flex-direction: column; text-align: center; gap: 10px; }
    .mics-info-left img { max-width: 60px; }
    .mics-logo-text { align-items: center; }
    .mics-logo-text h2 { font-size: 1.5em; }
    .mics-logo-text p { font-size: 0.7em; }

    /* Partners Section */
    .partners-left-column h2 { font-size: 2.8em; }
    .partners-left-column p { font-size: 1em; }
    .partners-right-column { padding: 2em 1em; }
    .partner-card { padding: 2em 1.5em; }
    .partner-card img { max-width: 120px; }
    .partner-card p { font-size: 0.9em; }

    /* Moda Sostenibile Section */
    #sustainable-fashion-section { padding-top: 1em; padding-bottom: 1em; }
    #sustainable-fashion-section .sf-left-col { min-height: 200px; background-size: 600px auto; }
    #sustainable-fashion-section .sf-title-row { padding: 1; }
    #sustainable-fashion-section .sf-title-row h2 { font-size: 2.2em; }
    #sustainable-fashion-section .sf-text-row { padding: 1.5em; }
    #sustainable-fashion-section .sf-text-row p { font-size: 0.9em; }


    /* MICS Synergies Section */
    #mics-synergies-section { padding-top: 3em; padding-bottom: 3em; }
    .mics-synergies-header-left h2 { font-size: 2.5em; }
    .mics-synergies-header-right p { font-size: 0.9em; }
    .accordion-title { font-size: 1.1em; }
    .accordion-icon { width: 30px; height: 30px; }
    .accordion-toggle-icon { font-size: 1.5em; }
    .accordion-content p { font-size: 0.9em; }

    /* Let's Talk Section */
    .lets-talk-right { 
        padding: 1.5em; 
        /* MODIFICATO: Allinea gli elementi al suo interno a sinistra */
        align-items: flex-start; /* Cambiato da 'center' a 'flex-start' */
    }
    .lets-talk-right p {
        /* MODIFICATO: Allinea il testo a sinistra */
        text-align: left; /* Cambiato da 'center' a 'left' */
        font-size: clamp(1em, 2.8vw, 1.2em); 
        max-width: none; /* Rimuovi qualsiasi max-width per farlo riempire lo spazio */
        margin-bottom: 1em;
    }
}


/* Media Queries per la sezione Un Tesoro Nascosto nei Magazzini */
@media screen and (max-width: 980px) {
    #hidden-treasure-section {
        flex-direction: column; /* Impila le colonne su schermi più piccoli */
        min-height: auto;
        padding-top: 3em; /* Padding superiore per mobile */
        padding-bottom: 3em; /* Padding inferiore per mobile */
    }
    .hidden-treasure-left-column,
    .hidden-treasure-right-column {
        flex: none;
        width: 100%; /* Occupano tutta la larghezza */
        padding-top: 2em; /* Padding superiore per la colonna sinistra su mobile */
        padding-bottom: 2em; /* Padding inferiore per la colonna sinistra su mobile */
    }
    .treasure-title-wrapper {
        padding: 0 2em;
        margin-bottom: 1.5em;
    }
    .treasure-title-wrapper h2 {
        font-size: 3em;
    }
    .treasure-text-wrapper {
        padding: 0 2em;
    }
    .treasure-text-wrapper p {
        font-size: 1em;
        margin-bottom: 1em;
    }
    .hidden-treasure-right-column {
        min-height: 300px; /* Altezza minima per il pattern su mobile */
        background-size: 150px auto; /* Riduci la dimensione del pattern su mobile */
    }
}

@media screen and (max-width: 600px) {
    #hidden-treasure-section {
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .hidden-treasure-left-column {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
    }
    .treasure-title-wrapper {
        padding: 0 1.5em;
        margin-bottom: 1em;
    }
    .treasure-title-wrapper h2 {
        font-size: 2.2em;
    }
    .treasure-text-wrapper {
        padding: 0 1.5em;
    }
    .treasure-text-wrapper p {
        font-size: 0.9em;
        margin-bottom: 0.8em;
    }
    .hidden-treasure-right-column {
        min-height: 200px;
        background-size: 550px auto;
    }
}


/* Media Queries per la sezione Co-Design Intelligente */
@media screen and (max-width: 980px) {
    #co-design-section {
        flex-direction: column; /* Impila le colonne su schermi più piccoli */
        min-height: auto;
        padding-top: 3em;
        padding-bottom: 3em;
    }
    .co-design-left-column,
    .co-design-right-column {
        flex: none;
        width: 100%; /* Occupano tutta la larghezza */
        min-height: auto;
    }
    .cod-pattern-top {
        min-height: 200px; /* Riduci altezza pattern su mobile */
        background-size: 100px auto;
    }
    .cod-title-bottom {
        padding: 2em;
        min-height: auto;
    }
    .cod-title-bottom h2 {
        font-size: 3em;
    }
    .cod-text-top {
        padding: 2em;
    }
    .cod-text-top p {
        font-size: 1em;
        margin-bottom: 1em;
    }
    .cod-pattern-bottom {
        min-height: 200px; /* Riduci altezza pattern su mobile */
        background-size: 100px auto;
    }
}

@media screen and (max-width: 600px) {
    #co-design-section {
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .cod-pattern-top {
        min-height: 150px;
        background-size: 550px auto;
    }
    .cod-title-bottom {
        padding: 1.5em;
    }
    .cod-title-bottom h2 {
        font-size: 2.2em;
    }
    .cod-text-top {
        padding: 1.5em;
    }
    .cod-text-top p {
        font-size: 0.9em;
    }
    .cod-pattern-bottom {
        min-height: 150px;
        background-size: 550px auto;
    }
}