/* Stili Generali - Tema Professionale Minimalista per Ingegneria Audio */
body {
font-family: 'Futura', sans-serif; /* Font Futura, con fallback generico */
    line-height: 1.6; /* Leggermente ridotto */
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Sfondo bianco pulito */
    color: #212529; /* Grigio scuro per il testo, alta leggibilità */
    -webkit-font-smoothing: antialiased; /* Migliora la resa dei font */
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px; /* Dimensione base del font regolata per corrispondenza */
}

.container {
    width: 85%; /* Leggermente più largo per un aspetto moderno */
    max-width: 1200px; /* Limite massimo per schermi grandi */
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
}

/* Header e Navigazione */
header {
    background: #ffffff; /* Sfondo bianco per l'header */
    color: #212529; /* Testo scuro */
    padding: 30px 0; /* Ulteriore aumento padding verticale per desktop, es. 30px */
    border-bottom: 1px solid #e9ecef; /* Bordo inferiore sottile e chiaro */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Ombra leggera per profondità */
    position: relative; /* Necessario per il posizionamento assoluto del menu mobile */
    z-index: 1000; /* Assicura che l'header sia sopra altri contenuti */
}

.header-container {
    display: flex;
    /* justify-content: space-between; Rimosso per permettere centraggio logo e nav a destra */
    align-items: center;
    position: relative; /* Mantenuto per posizionamento hamburger e logo */
}

/* Stili per il logo nell'header */
.logo-container {
    /* Su desktop, posizioniamo il logo assolutamente al centro */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Per assicurare che sia sopra altri elementi flex se necessario */
}

#header-logo { /* ID specifico per l'immagine del logo nell'header */
    max-height: 65px; /* Ulteriore aumento altezza massima per desktop, es. 65px */
    width: auto;
    display: block;
}

/* Pulsante Hamburger - nascosto su desktop */
.hamburger-button {
    display: none; /* Nascosto di default, mostrato solo su mobile */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10; /* Sopra la navigazione */
}

.hamburger-line {
    width: 30px;
    height: 3px;
    background-color: #212529; /* Colore scuro per pagine normali */
    border-radius: 10px;
    transition: all 0.3s linear;
}

/* Stili per la navigazione principale */
.main-navigation {
    /* Su desktop, spingiamo la navigazione a destra */
    margin-left: auto; /* Spinge la navigazione all'estrema destra */
}

.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; /* Allinea gli item orizzontalmente su desktop */
}

.main-navigation ul li {
    display: inline; /* Mantenuto per coerenza, ma flex gestisce l'allineamento */
    padding: 0 15px; /* Spaziatura tra le voci di menu */
}

.main-navigation ul li:last-child {
    padding-right: 0; /* Rimuove padding dall'ultimo item */
}

header a { /* Stile generale per i link nell'header, inclusi quelli di navigazione */
    color: #212529; /* Colore testo link scuro */
    text-decoration: none;
    text-transform: none; /* Testo normale, non uppercase */
    font-size: 0.95rem; /* Ridotto */
    font-weight: 500; /* Leggermente più bold per i link di navigazione */
    transition: color 0.3s ease;
}

/* Rimuoviamo i vecchi stili specifici per .logo e nav che usavano float */
/* header .logo { float: left; ... } */
/* header nav { float: right; ... } */

/* Gli stili per h1 nel logo non sono più usati con l'immagine diretta */

.main-navigation ul li a:hover, /* Applichiamo a .main-navigation */
.main-navigation ul li a.active { /* Stile per link attivo */
    color: #0056b3; /* Blu più scuro al passaggio del mouse o per link attivo */
    border-bottom: 2px solid #0056b3; /* Sottolineatura per evidenziare */
    padding-bottom: 5px;
}

/* Sezione Hero (Home Page) */
#hero {
    position: relative;
    min-height: 100vh; /* Altezza completa della viewport */
    background-image: url('pictures/main-banner_2.png'); /* Assicura che sia il nuovo banner */
    background-size: contain; /* Mostra l'intera immagine, potrebbe lasciare spazi vuoti */
    background-repeat: no-repeat;
    background-position: center center; /* Centra l'immagine */
    background-color: #000000; /* Fallback */
    color: #ffffff; /* Colore testo di fallback, se necessario */
    text-align: center;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Assicuriamoci che sia center per il comportamento di default */
    align-items: center;
}

/* Rimosso l'overlay #hero::before poiché il nuovo banner potrebbe non richiederlo o averlo integrato */
/*
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}
*/

#hero .container { /* Applica il container anche alla hero section */
    width: 85%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    position: relative;
    z-index: 2; /* Contenuto sopra l’overlay */
}

#hero .hero-content {
    color: #cccccc; /* Ripristinato Grigio chiaro di default */
    text-align: center; /* Centra il testo sotto il logo */
    /* Il padding-top globale di 1vh verrà gestito/annullato specificamente nelle media query se necessario */
}

/* Stili specifici per il testo nella hero section su DESKTOP */
#hero .hero-content h2 {
    font-family: 'Futura', sans-serif;
    font-size: 1.44rem; /* Aumentato del 20% (1.2 * 1.2 = 1.44) */
    font-weight: normal; /* Manteniamo normale per Futura */
    margin-bottom: 15px; /* Spazio sotto il titolo */
    color: #cccccc; /* Ripristinato Grigio chiaro */
}

#hero .hero-content p {
    font-family: 'Futura', sans-serif;
    font-size: 1.2rem; /* Dimensione precedente OK */
    line-height: 1.6; /* Manteniamo una buona leggibilità */
    max-width: 700px; /* Limitiamo la larghezza per una migliore leggibilità su schermi ampi */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px; /* Spazio sotto il paragrafo */
    color: #cccccc; /* Ripristinato Grigio chiaro */
}


/* Stile per il logo nella hero section (commentato/rimosso perché l'immagine è ora lo sfondo) */
/*
#hero .hero-logo img {
    display: block;
    margin: 0 auto 10px;
    max-width: 100%; 
    width: auto;
}
*/

/* Stili per .hero-subtitle e .hero-content p rimossi/commentati poiché il testo è integrato nel nuovo banner */
/*
#hero .hero-subtitle {
    font-family: 'Futura', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

#hero .hero-content p {
    font-family: 'Futura', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 600px;
    color: #cccccc;
}
*/

.cta-button {
    display: inline-block;
    background: #007bff; /* Blu primario */
    color: #ffffff;
    padding: 10px 24px; /* Padding leggermente ridotto */
    text-decoration: none;
    border-radius: 4px; /* Angoli leggermente arrotondati */
    margin-top: 10px;
    font-size: 0.95rem; /* Ridotto */
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none; /* Nessun bordo */
}

.cta-button:hover {
    background: #0056b3; /* Blu più scuro al passaggio del mouse */
    transform: translateY(-2px); /* Leggero effetto al passaggio del mouse */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Sezioni Generali del Main */
main section {
    padding: 60px 0; /* Padding verticale per le sezioni */
    border-bottom: 1px solid #e9ecef; /* Separatore sottile e chiaro */
}

main section:last-child {
    border-bottom: none;
}

main section h3 { /* Titoli di sezione interni */
    color: #212529; /* Grigio scuro per il testo, alta leggibilità */
    text-align: left; /* Allineamento a sinistra */
    margin-bottom: 25px;
    font-size: 1.8rem; /* Ridotto */
    font-weight: 600;
}

/* Footer */
footer {
    padding: 40px 0; /* Padding più generoso */
    margin-top: 0; /* Rimuove margine superiore se le sezioni hanno già padding */
    color: #6c757d; /* Grigio chiaro per il testo del footer */
    background-color: #212529; /* Sfondo scuro per il footer */
    text-align: center;
}

footer p {
    margin: 0;
    font-size: 0.85rem; /* Ridotto */
}

/* Stili per le pagine interne */
.page-title {
    text-align: left; /* Allineamento a sinistra */
    margin-bottom: 35px;
    font-size: 2.2rem; /* Ridotto */
    font-weight: 700;
    color: #212529; /* Grigio scuro per il testo, alta leggibilità */
    padding-top: 20px; /* Spazio sopra il titolo della pagina */
}

/* Stili per gli articoli di servizio */
.service-item {
    background-color: #f8f9fa; /* Sfondo leggermente diverso per gli item */
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.service-item h3 {
    font-size: 1.4rem; /* Ridotto */
    color: #007bff; /* Blu per i titoli dei servizi */
    margin-top: 0;
    margin-bottom: 12px;
}

/* Stili per il modulo di contatto */
.contact-info, .contact-form {
    margin-bottom: 40px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057; /* Grigio medio-scuro per le etichette */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px; /* Ridotto */
    margin-bottom: 18px; /* Ridotto */
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box; /* Importante per il padding e la larghezza */
    font-size: 0.95rem; /* Ridotto */
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none;
}

.contact-form button[type="submit"] {
    /* Usa la classe .cta-button per coerenza */
}


/* Responsive */
/* Stili per immagini responsive */
img.responsive {
    max-width: 100%;
    height: auto;
    display: block; /* Per evitare spazi extra sotto l'immagine */
    margin: 15px 0; /* Margine sopra e sotto */
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Spazio tra le immagini */
    margin-bottom: 20px;
}

.image-gallery img {
    flex: 1 1 30%; /* Permette alle immagini di adattarsi, circa 3 per riga */
    max-width: 32%; /* Assicura che non diventino troppo grandi */
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


@media(max-width: 992px){ /* Breakpoint per tablet e schermi medi */
    .container {
        width: 90%;
    }
    #hero h2 {
        font-size: 2.1rem; /* Ridotto */
    }
    #hero p {
        font-size: 0.95rem; /* Ridotto */
    }
    .page-title {
        font-size: 2rem; /* Ridotto */
    }
    .image-gallery img {
        flex: 1 1 45%; /* Circa 2 per riga su tablet */
        max-width: 48%;
    }
}

@media(max-width: 768px){ /* Breakpoint per mobile */
    body {
        font-size: 14px; /* Ulteriore riduzione per mobile */
    }

    header { /* Riduciamo il padding dell'header per mobile per compensare l'aumento su desktop */
        padding: 15px 0; /* Manteniamo il padding mobile ridotto */
    }

    /* Inizio modifiche per header mobile */
    .header-container {
        /* Su mobile, justify-content: center è corretto per il logo,
           ma il .logo-container non ha più bisogno di position:absolute qui
           perché il pulsante hamburger è posizionato assolutamente.
           Il logo sarà centrato dal text-align del suo contenitore se necessario,
           o dal flex-grow se ci fossero altri elementi.
           Con il logo-container non più absolute su mobile,
           il justify-content: center del header-container lo centrerà.
        */
        justify-content: center; /* Mantiene il logo centrato su mobile */
    }

    .logo-container {
        position: static; /* Rimuove il posizionamento assoluto per mobile */
        transform: none;  /* Rimuove la trasformazione per mobile */
        /* Il logo ora si centra grazie a justify-content: center su .header-container */
    }

    #header-logo {
        max-height: 40px; /* Manteniamo l'altezza massima per mobile */
        margin: 0 auto; /* Mantiene il centraggio se il .logo-container fosse più largo */
    }

    .hamburger-button {
        display: flex; /* Mostra il pulsante hamburger */
        position: absolute; /* Posiziona rispetto a .header-container */
        top: 50%;
        right: 20px; /* Spazio dal bordo destro */
        transform: translateY(-50%);
        z-index: 1001; /* Assicura che sia sopra il menu */
    }

    .main-navigation {
        display: none; /* Nasconde la navigazione di default su mobile */
        position: absolute;
        top: 100%; /* Sotto l'header */
        left: 0;
        width: 100%;
        background-color: #ffffff; /* Sfondo per il menu aperto */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding-top: 10px; /* Spazio sopra il primo link */
        padding-bottom: 10px; /* Spazio sotto l'ultimo link */
    }

    .main-navigation.open { /* Classe per mostrare il menu */
        display: block;
    }

    .main-navigation ul {
        flex-direction: column; /* Link in colonna */
        width: 100%;
    }

    .main-navigation ul li {
        display: block; /* Ogni link occupa tutta la larghezza */
        text-align: center; /* Centra il testo del link */
        padding: 0; /* Rimuove padding laterale, gestito dal link stesso */
    }

    .main-navigation ul li a {
        display: block; /* Rende l'intera area cliccabile */
        padding: 12px 20px; /* Padding interno ai link */
        border-bottom: 1px solid #e9ecef; /* Separatore tra link */
        color: #212529; /* Colore testo scuro */
    }
    
    .main-navigation ul li:last-child a {
        border-bottom: none; /* Rimuove bordo dall'ultimo link */
    }

    .main-navigation ul li a:hover,
    .main-navigation ul li a.active {
        background-color: #f8f9fa; /* Sfondo per hover/attivo */
        color: #0056b3; /* Colore testo per hover/attivo */
        border-bottom-color: #f8f9fa; /* Nasconde il bordo se c'è sfondo */
    }
    
    /* Stili specifici per .hero-page in mobile */
    .hero-page header {
        /* position: absolute; width: 100%; z-index: 3; background: transparent; ... già presenti */
    }

    .hero-page .hamburger-line {
        background-color: #ffffff; /* Linee hamburger bianche su hero page */
    }
    
    .hero-page .main-navigation { /* Menu aperto su hero page */
        background-color: rgba(0, 0, 0, 0.85); /* Sfondo scuro semitrasparente */
    }

    .hero-page .main-navigation ul li a {
        color: #ffffff; /* Testo link bianco */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Separatore più tenue */
    }

    .hero-page .main-navigation ul li a:hover,
    .hero-page .main-navigation ul li a.active {
        background-color: rgba(255, 255, 255, 0.1); /* Sfondo leggermente più chiaro per hover/attivo */
        color: #ffffff;
        border-bottom-color: transparent;
    }
    /* Fine modifiche per header mobile */

    #hero .container { /* Modifiche specifiche per mobile per il corretto posizionamento assoluto di .hero-content */
        position: static;    /* Annulla position:relative dalla regola generale */
        overflow: visible; /* Annulla overflow:hidden dalla regola generale */
        z-index: auto;       /* Annulla z-index dalla regola generale */
    }

    #hero {
        padding: 50px 0; /* Ridotto */
        text-align: center; /* Centra il testo nella hero su mobile */
        background-size: 300% auto; /* Rimpicciolisce l'immagine di sfondo al 90% della larghezza, altezza automatica */
        background-position: -2% top; /* Sposta l'immagine di sfondo verso l'alto, mantenendo l'offset orizzontale */
    }
    #hero h2 {
        font-size: 1.8rem; /* Ridotto */
    }
    #hero p {
        font-size: 0.9rem; /* Ridotto */
        max-width: 100%; /* Permette al testo di occupare tutta la larghezza */
    }

    /* Stili specifici per il contenuto testuale nella hero section su mobile */
    #hero .hero-content {
        position: absolute; /* Posizionamento assoluto rispetto a #hero */
        top: 65vh;          /* Abbassato: 50vh + (50vh * 0.3) circa. Da aggiustare. */
        left: 50%;
        transform: translate(-50%, -50%); /* Centra il blocco rispetto al suo top/left */
        width: 90%;         /* Larghezza della barra rossa */
        max-width: 400px;   /* Limita la larghezza massima su schermi mobile più larghi */
        padding-top: 10px;    /* Ripristiniamo un po' di padding per l'altezza della barra */
        padding-bottom: 10px; /* Ripristiniamo un po' di padding per l'altezza della barra */
        padding-left: 15px;
        padding-right: 15px;
        background-color: rgba(255,0,0,0.15); /* Sfondo rosso reso più trasparente */
        border-radius: 5px; /* Angoli arrotondati per la barra */
        z-index: 2;         /* Sopra lo sfondo, sotto l'header se si sovrappone */
        /* margin-left e margin-right auto non sono più necessari con posizionamento assoluto e transform */
        /* text-align: center; è già sulla regola globale di .hero-content */
        /* display: block; non è più necessario con position: absolute */
    }

    #hero .hero-content h2 { /* Titolo per mobile - dimensione OK come da feedback */
        font-family: 'Futura', sans-serif; /* Esplicito per sicurezza */
        color: #cccccc; /* Testo grigio chiaro, come su desktop */
        font-size: 1.8rem; 
        margin-bottom: 10px; /* Spazio sotto il titolo */
        font-weight: normal; /* Standard per Futura in questo contesto */
    }

    #hero .hero-content p { /* Paragrafo per mobile - aumentato del 20% */
        font-family: 'Futura', sans-serif; /* Esplicito per sicurezza */
        color: #cccccc; /* Testo grigio chiaro, come su desktop */
        font-size: 1.08rem; /* Aumentato del 20% (0.9 * 1.2 = 1.08) */
        line-height: 1.5; /* Migliora leggibilità */
        /* max-width: 90%; Rimosso da qui, gestito dal genitore .hero-content */
        /* margin-left: auto; Rimosso da qui, gestito dal genitore .hero-content */
        /* margin-right: auto; Rimosso da qui, gestito dal genitore .hero-content */
        margin-bottom: 0; /* Rimuove margine inferiore se non necessario */
    }

    main section h3, .page-title {
        text-align: center; /* Centra i titoli su mobile */
        font-size: 1.6rem; /* Ridotto per mobile */
    }
    .service-item h3 {
        font-size: 1.3rem; /* Ridotto per mobile */
    }
    .image-gallery img {
        flex: 1 1 100%; /* Una immagine per riga su mobile */
        max-width: 100%;
    }
}

/* Stili per header trasparente sulla pagina hero */
.hero-page header {
    position: absolute;
    width: 100%;
    z-index: 3;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.hero-page header a { /* Stile generale per i link nell'header della hero page */
    color: #cccccc; /* Grigio chiaro */
}

/* Stili per il menu mobile sulla hero page */
.hero-page .main-navigation ul li a { /* Già presente nella sezione mobile, ma ri-specifico per chiarezza e per assicurarmi che il colore sia corretto */
    color: #cccccc; /* Grigio chiaro per i link del menu mobile */
    /* border-bottom: 1px solid rgba(204, 204, 204, 0.2); /* Potremmo voler rendere il separatore più scuro se il testo è chiaro */
}

.hero-page .main-navigation ul li a:hover,
.hero-page .main-navigation ul li a.active {
    /* Per mobile, lo sfondo cambia leggermente, il colore del testo può rimanere grigio chiaro o diventare più scuro per contrasto */
    background-color: rgba(255, 255, 255, 0.1); /* Sfondo leggermente più chiaro per hover/attivo */
    color: #cccccc; /* Manteniamo grigio chiaro, o #dddddd per un leggero schiarimento */
    /* border-bottom-color: transparent; /* Già presente */
}


/* Stili per hover/active su desktop per hero-page */
@media(min-width: 769px) {
    #hero { 
        /* Nessuna modifica specifica qui, #hero è già position: relative */
    }

    #hero .container { 
        position: static; /* Annulla position:relative dalla regola generale */
        z-index: auto;    /* Annulla z-index dalla regola generale */
        /* Ora .hero-content (se position:absolute) si posizionerà rispetto a #hero */
    }

    #hero .hero-content {
        position: absolute;   /* Posiziona rispetto a #hero (che è position: relative) */
        top: 28vh;            /* VALORE CHIAVE DA AGGIUSTARE: stima per posizionare sotto il logo. */
                              /* (logo è a top: 15vh) */
        left: 50%;
        transform: translateX(-50%);
        width: 85%;           /* Mantiene una larghezza simile a quella del .container */
        max-width: 700px;     /* Coerente con gli stili precedenti per il testo */
        padding-top: 0;       /* Annulla padding specifici */
        margin-top: 0;        /* Annulla margini specifici */
        z-index: 3;           /* Per assicurare che sia sopra altri elementi posizionati in #hero */
        color: #cccccc;       /* Ripristinato Grigio chiaro per il blocco desktop */
        /* text-align: center; è già sulla regola globale di .hero-content, quindi i figli h2 e p saranno centrati */
    }

    .hero-page .main-navigation ul li a:hover,
    .hero-page .main-navigation ul li a.active {
        color: #cccccc; /* Grigio chiaro anche per hover/active */
        border-bottom: 2px solid #cccccc; /* Sottolineatura grigio chiaro */
        background-color: transparent; /* Assicura che non ci sia sfondo da mobile */
    }

    /* MODIFICHE RESPONSIVE PER IL LOGO (SOLO DESKTOP) */

    /* Nasconde il logo dell'header originale su desktop */
    header .logo-container.desktop-hidden {
        display: none !important; /* Usa !important per garantire la sovrascrittura se necessario */
    }

    /* Mostra gli elementi con classe .mobile-hidden su desktop */
    #hero .hero-section-logo-container.mobile-hidden { 
        display: block !important; 
    }

    /* Nuova barra rossa in cima alla hero section per desktop - RIMOSSA */
}


/* Rimuoviamo l'import di Montserrat, dato che usiamo Futura */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); */

/* Regole globali font e dimensioni titoli e paragrafi */
h2 {
    font-size: 3rem;
    line-height: 1.2;
}
h3 {
    font-size: 2rem;
    line-height: 1.3;
}
p {
    font-size: 1rem;
}

/* NUOVI STILI AGGIUNTI */

/* Classi di utilità per visibilità responsive */
.mobile-hidden {
    display: none; /* Nascosto su mobile per default */
}

/* .desktop-hidden non necessita di una regola globale se il suo comportamento di default è essere visibile; 
   verrà nascosto specificamente nella media query per desktop. */

/* Stili per il nuovo logo nella hero section */
/* Questi stili si applicano quando .hero-section-logo-container.mobile-hidden diventa visibile (su desktop) */
#hero .hero-section-logo-container.mobile-hidden {
    position: absolute; /* Posizionamento assoluto rispetto a #hero */
    width: 100%; /* Occupa tutta la larghezza per centrare l'immagine interna */
    top: 15vh; /* Distanza dal top della viewport (15% dell'altezza della viewport). */
    left: 0; /* Allineato al bordo sinistro del contenitore #hero */
    z-index: 1001; /* Aumentato z-index per portarlo davanti */
    text-align: center; /* Centra l'immagine del logo (che sarà inline-block) */
    background-color: rgba(255,0,0,0.05); /* MODIFICATO: Resa la banda rossa quasi impercettibile */
}

#hero #hero-section-logo {
    width: 15vw; /* Imposta la larghezza del logo al 15% della larghezza della viewport */
    max-width: 220px; /* Limite massimo per la larghezza del logo (es. per schermi molto grandi) */
    min-width: 80px; /* Limite minimo per la larghezza del logo (per garantire visibilità) */
    height: auto; /* Mantiene le proporzioni dell'immagine automaticamente */
    display: inline-block; /* Necessario per il centraggio con text-align sul parent */
}