/* Font personalizzato */
@font-face {
    font-family: 'Bebas';
    src: url('font/BebasNeue-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Santana';
    src: url('font/Santana.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Applicare il font al tuo sito (Riveduto: `regular` non è un valore valido per font-family) */
body {
    font-family: 'Bebas', sans-serif; /* Usiamo sans-serif come fallback generico */
    letter-spacing: 0.1em;
}

/* Navbar */
.navbar {
    height: 100px;
    background-color: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.navbar-brand img {
    height: 80px;
}

.navbar-nav {
    font-size: 20px;
    /* margin-left: auto; // Rimuovi o sposta questa regola in un media query per desktop */
    /* Aggiungi questa regola per allineare a destra su desktop */
    margin-left: auto; /* Mantiene l'allineamento a destra su desktop */
}

/* Regole per il Navbar quando è in modalità mobile (breakpoint 'lg' di Bootstrap) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        width: 100%;
        padding: 10px 15px;
        background-color: #f8f9fa;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .navbar-nav {
        /* Rimuovi il margin-left: auto; in mobile per evitare spostamenti strani */
        margin-left: 0;
        /* Allinea le voci di menu al centro se text-align: center è sul .navbar-collapse */
        /* Altrimenti, si allineeranno a sinistra per default */
        width: 100%; /* Assicura che la lista occupi tutta la larghezza */
    }

    .navbar-nav .nav-item {
        /* Le voci del menu in mobile dovrebbero occupare tutta la larghezza */
        width: 100%;
        text-align: left; /* Allinea il testo a sinistra all'interno di ogni voce */
        padding: 5px 0; /* Spazio verticale per ogni voce */
    }

    .navbar-nav .dropdown-menu {
        /* Assicurati che il sottomenu si apra sotto la voce principale */
        position: static; /* Fondamentale per farlo rimanere nel flusso del documento */
        float: none; /* Annulla eventuali float */
        width: 100%; /* Occupa tutta la larghezza */
        margin-top: 0; /* Rimuovi margini superiori */
        border: none; /* Rimuovi i bordi se non li vuoi */
        box-shadow: none; /* Rimuovi l'ombra se non la vuoi */
        background-color: #f8f9fa; /* Un colore di sfondo leggermente diverso per distinguerlo */
        padding-left: 25px; /* Indenta le voci del sottomenu per distinguerle */
    }

    .dropdown-menu li:last-child {
        margin-bottom: 10px; /* Aggiungi un po' di spazio sotto l'ultimo elemento del dropdown mobile */
    }
}

/* Hover sul oggetto di menu (valido sia per desktop che mobile se non sovrascritto) */
.nav-item:hover {
    transition: 0.1s;
    background-color: #e7e7e7;
}

/* Apri il menu a tendina al passaggio del mouse (principalmente per desktop) */
.dropdown:hover .dropdown-menu {
    background-color: #f8f9fa;
    display: block; /* Questa regola funziona bene per desktop */
}

/* Migliora il comportamento per evitare glitch */
.dropdown-menu {
    font-size: 20px;
    border-radius: 0%;
    margin-top: 0;
}

.dropdown-item:hover {
    background-color: #e7e7e7;
}

/* --------- CAROSELLO --------- */
#heroCarousel {
    height: 50vh;
    background-color: #494949;
}

.carousel-item img {
    height: 50vh;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.5s ease;
}

.carousel-item.active img {
    opacity: 0.7;
}

.carousel-caption {
    color: white;
    z-index: 10;
    margin-bottom: 140px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    word-spacing: 0.2em;
    letter-spacing: 0.1em;
    font-family: 'Bebas', sans-serif; /* Corretto da 'bold' a 'sans-serif' come fallback */
}

.carousel-caption h1 {
    font-size: 50px;
}

.carousel-caption h4 {
    font-size: 35px;
}

.carousel-inner {
    position: relative;
}

@media (max-width: 768px) {
    .carousel-caption {
        color: white;
        z-index: 10;
        margin-bottom: 15%;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        word-spacing: 0.2em;
        letter-spacing: 0.1em;
}
}

/* Toggler hamburger animato */
.custom-toggler {
    border: none;
    background: transparent;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1051;
}

.custom-toggler span {
    display: block;
    height: 3px;
    width: 25px;
    background: #000;
    margin: 5px 0px;
    transition: all 0.3s ease;
}

.custom-toggler.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.custom-toggler.open span:nth-child(2) {
    opacity: 0;
}

.custom-toggler.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* --------- SEZIONE SMALL --------- */
.section{
    /* Altezza minima per visualizzare bene il gradiente */
    min-height: 400px;
    display: flex;
    align-items: center; /* Centra verticalmente il contenuto */
    justify-content: center; /* Centra orizzontalmente il contenuto (se .container ha larghezza fissa) */
    text-align: center; /* Allinea il testo al centro */
    padding: 60px 0; /* Padding superiore e inferiore */
    background-color: #ffffff;
}

.section h1 {
    font-size: 80px; /* Dimensione del titolo */
    padding: 5%;
    font-family: 'Bebas', sans-serif; /* Usa il tuo font personalizzato */
    letter-spacing: 0.07em;
    color: #008500; /* Colore del testo */
    margin-bottom: 50px;
}

/* Stili per il contenuto all'interno della sezione (opzionali) */
.section h2 {
    font-size: 3em; /* Dimensione del titolo */
    margin-bottom: 20px;
    font-family: 'Bebas', sans-serif; /* Usa il tuo font personalizzato */
    letter-spacing: 0.05em;
    color: #008500; /* Colore del testo */
}

.section p {
    font-size: 1.3em; /* Dimensione del paragrafo */
    max-width: 700px; /* Limita la larghezza del testo per leggibilità */
    margin: 0 auto 30px auto; /* Centra il paragrafo e aggiunge margine sotto */
}

.section form{
    max-width: 600px;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 40px auto 30px auto; /* Centra il paragrafo e aggiunge margine sotto */
}

.section input{
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #ababab;
    outline: none;
}

input:focus{
    box-shadow:0px 0px 4px rgba(0,0,0,0.5); /* ombra leggera */
}

.section select{
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #ababab;
    outline: none;
}

select:focus{
    box-shadow:0px 0px 4px rgba(0,0,0,0.5); /* ombra leggera */
}

@media (max-width: 768px) {
    .section input{
        width: 100%;
        height: 40px;
        border-radius: 5px;
    }

    .section select{
        width: 100%;
        height: 40px;
        border-radius: 5px;
    }
}

.section .btn {
    /* Stili per il bottone, ad esempio da Bootstrap */
    background-color: #008500; /* Sfondo bianco */
    color: #ffffff; /* Testo verde */
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.05em;
    font-size: 1.3em;
    font-weight: normal;
    transition: 0.2s;
    max-width: 200px;
    width: 100%;
}

.section .btn:hover {
    background-color: #006900;
    color: #ffffff; /* Un verde leggermente più scuro all'hover */
}

/* --------- SEZIONE MEDIA --------- */
.section-md{
    /* Altezza minima per visualizzare bene il gradiente */
    min-height: 600px;
    display: flex;
    align-items: center; /* Centra verticalmente il contenuto */
    justify-content: center; /* Centra orizzontalmente il contenuto (se .container ha larghezza fissa) */
    text-align: center; /* Allinea il testo al centro */
    padding: 60px 0; /* Padding superiore e inferiore */
    background-color: #ffffff;
}

/* Stili per il contenuto all'interno della sezione (opzionali) */
.section-md h2 {
    font-size: 3em; /* Dimensione del titolo */
    margin-bottom: 20px;
    font-family: 'Bebas', sans-serif; /* Usa il tuo font personalizzato */
    letter-spacing: 0.05em;
    color: #008500; /* Colore del testo */
}

.section-md p {
    font-size: 1.3em; /* Dimensione del paragrafo */
    max-width: 700px; /* Limita la larghezza del testo per leggibilità */
    margin: 0 auto 30px auto; /* Centra il paragrafo e aggiunge margine sotto */
}

.section-md .btn {
    /* Stili per il bottone, ad esempio da Bootstrap */
    background-color: #008500; /* Sfondo bianco */
    color: #ffffff; /* Testo verde */
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.05em;
    font-size: 1.3em;
    font-weight: normal;
    transition: 0.2s;
    max-width: 200px;
    width: 100%;
}

.section-md .btn:hover {
    background-color: #006900;
    color: #ffffff; /* Un verde leggermente più scuro all'hover */
}

/* --------- SEZIONE GRADIENT --------- */
.section-gradient {
    /* Altezza minima per visualizzare bene il gradiente */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center; /* Questo centrerà il testo all'interno del .container */
    padding: 60px 0;
    background: linear-gradient(to bottom right, #001f3f, #008500);
}

/* Stili per il contenuto all'interno della sezione (opzionali) */
.section-gradient h2 {
    font-size: 3em; /* Dimensione del titolo */
    margin-bottom: 20px;
    font-family: 'Bebas', sans-serif; /* Usa il tuo font personalizzato */
    letter-spacing: 0.05em;
}

.section-gradient p {
    font-size: 1.2em; /* Dimensione del paragrafo */
    max-width: auto; /* Limita la larghezza del testo per leggibilità */
    margin-top: 5%;
}

.section-gradient .btn {
    /* Stili per il bottone, ad esempio da Bootstrap */
    background-color: #ffffff; /* Sfondo bianco */
    color: #008500; /* Testo verde */
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.05em;
    font-size: 1.3em;
    font-weight: normal;
    transition: 0.2s;
    max-width: 200px;
    width: 100%;
}

.section-gradient .btn:hover {
    background-color: #d1d1d1;
    color: #008500; /* Un verde leggermente più scuro all'hover */
}

.section-gradient .row {
    padding: 3%; /* Mantiene la percentuale per un padding responsive */
}

.section-gradient label {
    margin-bottom: 10px; /* Ok per piccoli spazi, ma potremmo usare rem */
    font-size: 2rem; /* Usa 'rem' per una dimensione del font scalabile */
}

.section-gradient .col-grad {
    padding: 5%; /* Mantiene la percentuale per un padding responsive */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4); /* L'ombra va bene così com'è */
    margin-bottom: 20px; /* Aggiunge spazio tra le colonne su schermi piccoli */
}

.section-gradient h4{
    margin-top: 2.5%;
    color: #008500;
    font-size: 30px;
    font-weight: normal;
}

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

/* Per schermi più piccoli (es. cellulari in verticale) */
@media (max-width: 768px) {
    .section-gradient label {
        font-size: 1.5rem; /* Riduci la dimensione del font per i titoli su schermi piccoli */
        text-align: center; /* Centra il testo delle label */
    }

    .section-gradient .col-grad {
        padding: 8%; /* Aumenta leggermente il padding interno su schermi piccoli */
        margin-bottom: 5%; /* Aumenta lo spazio tra le colonne */
    }

    .section-gradient .row {
        padding: 5%; /* Aumenta leggermente il padding generale della riga */
    }

    .section-gradient h4{
        margin-top: 5%;
        color: #008500;
        font-size: 20px;
        font-weight: normal;
    }

    .section-gradient p {
        font-size: 1.1em; /* Dimensione del paragrafo */
        max-width: 700px; /* Limita la larghezza del testo per leggibilità */
        margin-top: 10%;
    }

    .section h1 {
        font-size: 80px; /* Dimensione del titolo */
        padding: 6%;
        font-family: 'Bebas', sans-serif; /* Usa il tuo font personalizzato */
        letter-spacing: 0.07em;
        color: #008500; /* Colore del testo */
        margin-bottom: 50px;
    }
}

.offer-section {
    padding: 60px 0; /* Spazio interno per la sezione, crea l'altezza */
    text-align: center; /* Centra il testo all'interno della sezione */
    background-color: #f8f8f8; /* Colore di sfondo di esempio */
    /* Se vuoi un'immagine di sfondo come discusso prima, mettila qui */
    /* background-image: url('IMG/PACCHETTI/nome_della_tua_immagine.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    color: #333; /* Colore del testo predefinito, adegua se hai un'immagine scura */
}

.offer-section .container {
    max-width: 960px; /* Limita la larghezza del contenuto su schermi grandi */
    margin: 0 auto; /* Centra il container */
    padding: 0 15px; /* Padding sui lati per schermi piccoli */
}

.offer-details {
    margin-top: 30px; /* Spazio sopra i dettagli dell'offerta */
    
}

.offer-col {
    padding: 4%; /* Padding interno per ogni colonna dell'offerta */
    margin-bottom: 20px; /* Spazio tra le colonne quando si impilano */
    margin-left: 0px;
    background-color: #ffffff; /* Sfondo bianco per le card delle offerte */
    border-radius: 3px; /* Bordi arrotondati */
    align-items: center;
}

.offer-col-12{
    padding: 10%; /* Padding interno per ogni colonna dell'offerta */
    margin-bottom: 20px; /* Spazio tra le colonne quando si impilano */
    background-color: #ffffff; /* Sfondo bianco per le card delle offerte */
    border-radius: 3px; /* Bordi arrotondati */
}

.offer-col-12 h2 {
    font-size: 60px; /* Dimensione del titolo più grande, usa rem per responsività */
    margin-bottom: 10px;
    color: #008500; /* Un colore che si abbini al tema "Green Fiber" */
}

.offer-col p {
    font-size: 1rem; /* Dimensione del paragrafo, usa rem */
    line-height: 1.5;
    margin-bottom: 0px;
}

.offer-col h2 {
    font-size: 2.5rem; /* Dimensione del titolo più grande, usa rem per responsività */
    margin-bottom: 10px;
    color: #008500; /* Un colore che si abbini al tema "Green Fiber" */
}

.offer-col-12 p {
    font-size: 40px; /* Dimensione del paragrafo, usa rem */
    line-height: 1.5;
    margin-bottom: 0px;
    letter-spacing: 0.05rem;
}

.offer-col a{
    text-decoration: none;
    color: #008500;
}

.offer-col a:hover{
    transition: 0.1s;
    text-decoration: none;
    color: #00df00;
}

.activation-cost .offer-col {
    background-color: #ffffff; /* Un colore di sfondo diverso per l'attivazione */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4); /* L'ombra va bene così com'è */
}

.btn-secondary {
    margin-top: 30px; /* Spazio sopra il bottone */
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 3px;
    /* Altri stili per il tuo bottone */
}

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

@media (max-width: 768px) {
    .offer-section {
        padding: 50px 0; /* Riduci il padding su schermi più piccoli */
    }

    .offer-col h2 {
        font-size: 2rem; /* Riduci la dimensione del titolo */
    }

    .offer-col p {
        font-size: 1rem; /* Riduci la dimensione del testo */
    }

    .btn-secondary {
        font-size: 1rem; /* Riduci la dimensione del bottone */
        padding: 12px 25px;
    }
}

@media (max-width: 576px) {
    /* Per schermi molto piccoli, Bootstrap farà impilare col-md-6 */
    .offer-col{
        padding: 5%; /* Riduci ulteriormente il padding interno */
    }
}

/* Assicurati che .container sia ben definito per la larghezza massima */
/* Se non hai già un .container globale in Bootstrap, aggiungilo: */
.container {
    max-width: 80%; /* Esempio di larghezza massima */
    margin: 0 auto; /* Centra il container */
    padding: 0 15px; /* Padding laterale per responsività */
}

/* --------- SEZIONE PACKAGE --------- */
.package-section .container {
    display: flex; /* Abilita Flexbox sul contenitore */
    flex-wrap: wrap; /* Permette alle card di andare a capo su schermi piccoli */
    justify-content: center; /* Centra le card orizzontalmente */
    gap: 20px; /* Spazio tra le card (puoi regolare il valore) */
    align-items: flex-start; /* Allinea le card in alto, utile se hanno altezze diverse */
}

.package-section {
    min-height: 500px; /* Altezza minima per la sezione */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 80px 0; /* Padding superiore e inferiore */

    /* Background Gradient (stesso della sezione precedente) */
    background: linear-gradient(to bottom right, #001f3f, #008500);
}

.package-section .package-title {
    font-size: 2.8em;
    margin-bottom: 50px;
    font-family: 'Bebas', sans-serif;
    letter-spacing: 0.05em;
    color: #fff; /* Assicura che il titolo sia bianco */
    width: 100%; /* Assicura che il titolo occupi l'intera larghezza */
    text-align: center; /* Centra il testo del titolo */
}

.package-card {
    background-color: rgba(255, 255, 255, 0.15); /* Sfondo leggermente trasparente per la card */
    border-radius: 10px;
    padding: 40px;
    margin: 0 auto; /* Centra la card */
    max-width: 500px; /* Larghezza massima per la card */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4); /* Ombra più pronunciata */
    backdrop-filter: blur(5px); /* Effetto sfocatura sullo sfondo dietro la card */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Bordo sottile e semi-trasparente */
    display: flex; /* Rende la card stessa un contenitore flex per il suo contenuto */
    flex-direction: column; /* Organizza il contenuto della card in colonna */
    justify-content: space-between; /* Spinge il pulsante in basso */
}

.package-name {
    font-size: 2.5em;
    margin-bottom: 10px;
    font-family: 'Bebas', sans-serif;
    letter-spacing: 0.03em;
    color: #fff;
}

.package-price {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 20px;
    color: #e6ffb3; /* Un verde chiaro per evidenziare il prezzo */
    font-family: 'Bebas', sans-serif;
    letter-spacing: 0.05em;
}

.package-description {
    font-size: 1.3em;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #e0e0e0;
}

.package-features {
    list-style: none; /* Rimuovi i pallini della lista */
    padding: 0;
    margin-bottom: 30px;
}

.package-features li {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #c0f0d0; /* Un verde più chiaro per le voci */
    position: relative;
    padding-left: 25px; /* Spazio per l'icona */
}

/* Icona per le features (potresti usare Font Awesome o un SVG) */
.package-features li::before {
    content: '✓'; /* Un tick mark come esempio */
    color: #e6ffb3; /* Colore del tick */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

.payment-options {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 1em;
    color: #e0e0e0;
}

.payment-options ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.payment-options li {
    margin-bottom: 5px;
    color: #c0f0d0;
}

.btn-secondary {
    background-color: #ffffff; /* Sfondo bianco */
    color: #008500; /* Testo verde */
    border: none;
    padding: 15px 35px;
    border-radius: 3px; /* Bordi leggermente più arrotondati */
    text-decoration: none;
    font-weight: normal;
    font-size: 1.3em;
    transition: 0.2s;
    display: inline-block; /* Per centrarlo meglio se necessario */
}

.btn-secondary:hover {
    background-color: #d1d1d1;
    color: #006b00; /* Verde più scuro all'hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .package-section .container {
        flex-direction: column; /* Le card tornano in colonna su schermi piccoli */
        align-items: center; /* Centra le card quando sono in colonna */
    }

    .package-card {
        width: 90%; /* Occupa quasi tutta la larghezza su mobile */
        max-width: 400px; /* Mantiene una larghezza massima */
    }

    .package-title {
        font-size: 2.2em;
        margin-bottom: 30px;
    }
    .package-card {
        padding: 30px;
        max-width: 90%; /* Occupare più spazio su schermi piccoli */
    }
    .package-name {
        font-size: 2em;
    }
    .package-price {
        font-size: 3em;
    }
    .package-description {
        font-size: 1em;
    }
    .btn-secondary {
        padding: 15px 35px;
        font-size: 1em;
    }
}

/* --------- SECTION VIDEO --------- */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 890px; 
    
    /* Nuovo padding-bottom calcolato per 9:16 */
    padding-bottom: 0%; /* Per video 9:16 (altezza = 16/9 * larghezza) */
    height: 500px;
    
    overflow: hidden;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 2; /* Assicurati che l'overlay sia sopra il video */
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Disabilita eventi mouse quando nascosto */
}

.video-overlay i {
    font-size: 3em; /* Dimensione dell'icona play */
    margin-bottom: 10px;
}

.video-overlay p {
    font-size: 1.2em;
}

/* Stili per il titolo della sezione (opzionale) */
.video-section h2 {
    font-family: 'Bebas', sans-serif;
    color: #333; /* Colore scuro per un buon contrasto su sfondo bianco */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-md {
        min-height: 450px; /* Riduci l'altezza su mobile se necessario */
    }
    .video-wrapper {
        padding-bottom: 0%; /* Per video 4:3 su mobile, o mantieni 56.25% se preferisci */
    }
    .video-overlay i {
        font-size: 2.5em;
    }
    .video-overlay p {
        font-size: 1em;
    }
}

footer {
    background-color: #ffffff;
    color: #333;
    padding: 60px 0 20px 0; /* Padding superiore e inferiore, ridotto in basso per il copyright */
    font-size: 1em;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* Ombra superiore sottile */
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Permette agli elementi di andare a capo su schermi piccoli */
    justify-content: space-between; /* Spazia gli elementi equamente */
    align-items: flex-start; /* Allinea gli elementi in alto */
    margin-bottom: 40px; /* Spazio tra le colonne principali e il copyright */
}

.footer-left,
.footer-right,
.footer-center {
    flex: 1; /* Permette agli elementi di occupare spazio in modo flessibile */
    padding: 0 15px; /* Padding interno per spazio tra colonne */
    min-width: 250px; /* Larghezza minima per evitare che si schiaccino troppo */
}

.footer-center {
    display: flex;
    justify-content: center; /* Centra il logo */
    align-items: center;
    vertical-align: middle;
    min-width: 400px; /* Ridotto per il logo */
}

.footer-logo img {
    max-width: 250px; /* Dimensione massima per il logo nel footer */
    height: auto;
    margin-top: 50px;
}

footer h3 {
    font-size: 1.3em;
    margin-bottom: 20px;
    font-family: 'Bebas', sans-serif; /* Usa il tuo font Bebas */
    color: #008500; /* Colore verde per i titoli del footer */
    letter-spacing: 0.03em;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 10px;
}

footer ul li a {
    color: #555; /* Colore scuro per i link */
    text-decoration: none;
    transition: color 0.3s ease;
}

footer ul li a:hover {
    color: #008500; /* Verde all'hover */
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid #eee; /* Linea sottile sopra il copyright */
    padding-top: 35px;
    text-align: center;
    font-size: 0.9em;
    color: #777;
}

/* Responsive adjustments */
@media (max-width: 991.98px) { /* Tablet e mobile */
    .footer-content {
        flex-direction: column; /* Impila gli elementi in colonna */
        align-items: center; /* Centra gli elementi impilati */
        text-align: center;
    }

    .footer-left,
    .footer-right,
    .footer-center {
        margin-bottom: 30px; /* Spazio tra le sezioni impilate */
        min-width: unset; /* Rimuovi la larghezza minima */
        width: 100%; /* Occupano tutta la larghezza */
    }

    .footer-center {
        order: -1; /* Sposta il logo in cima quando impilato */
        margin-bottom: 40px; /* Più spazio sotto il logo */
        margin-top: -50px;
    }

    footer h3 {
        margin-top: 20px; /* Spazio sopra i titoli quando impilati */
    }
}

/* --------- TRANSIZIONE DEI TESTI -------- */
/* Stili per gli elementi che dovranno apparire con un fade-in */
.fade-in-element {
    opacity: 0; /* Inizialmente invisibile */
    transform: translateY(20px); /* Leggermente spostato verso il basso */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transizione fluida */
}

/* Stili quando l'elemento è visibile (e quindi deve apparire) */
.fade-in-element.is-visible {
    opacity: 1; /* Completamente visibile */
    transform: translateY(0); /* Torna alla posizione originale */
}

/* Opzionale: Aggiungi un leggero ritardo per gli elementi successivi, per un effetto a cascata */
/* Puoi applicare queste classi direttamente nell'HTML, ad esempio <p class="fade-in-element delay-1"> */
.fade-in-element.delay-1 { transition-delay: 0.1s; }
.fade-in-element.delay-2 { transition-delay: 0.2s; }
.fade-in-element.delay-3 { transition-delay: 0.3s; }
/* ... e così via, per creare un effetto sequenziale se ci sono più testi vicini */

.section-pack {
    background-image: url('IMG/PACCHETTI/nbg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

.section-pack-2 {
    background-image: url('IMG/CHI\ SIAMO/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

.section-pack-3 {
    background-image: url('IMG/FRANCHISING/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

.section-pack-4 {
    background-image: url('IMG/TRASPARENZA/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.section-pack::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.section-pack-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.section-pack-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.section-pack-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

.section-pack .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.section-pack-2 .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.section-pack-3 .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.section-pack-4 .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.section-pack h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.section-pack-2 h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.section-pack-3 h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.section-pack-4 h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.section-pack, p {
    font-size: 25px;
}

.section-pack-2 p {
    font-size: 25px;
}

.section-pack-3 p {
    font-size: 25px;
}

.section-pack-4 p {
    font-size: 25px;
}

.section-verifica {
    background-image: url('IMG/VERIFICA\ COPERTURA/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.section-verifica::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

.section-verifica h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.section-verifica .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.section-verifica, p {
    font-size: 25px;
}

.section-ordine {
    background-image: url('IMG/ORDINE/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

.section-ordine::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

.section-ordine .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.section-ordine h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.section-ordine, p {
    font-size: 25px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.custom-card{
    background-color: rgb(255, 255, 255);
    height: 300px;
    border-radius: 3px;
    color: #171717;
    transition: transform 0.3s ease-in-out;
}

.custom-card:hover{
    transform: scale(1.05); /* Aumenta la dimensione del 5% */
}

.section-image {
  display: flex; /* Abilita Flexbox per disporre gli elementi affiancati */
  align-items: center; /* Allinea verticalmente gli elementi al centro */
  gap: 20px; /* Spazio tra l'immagine e il testo */
  padding: 40px; /* Spazio interno alla sezione */
  background-color: #f9f9f9; /* Colore di sfondo leggero */
  margin: 0 auto; /* Centra la sezione nella pagina */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra leggera */
  max-width: initial;
}

.section-image-gradient {
  display: flex; /* Abilita Flexbox per disporre gli elementi affiancati */
  align-items: center; /* Allinea verticalmente gli elementi al centro */
  gap: 15px; /* Spazio tra l'immagine e il testo */
  padding: 40px; /* Spazio interno alla sezione */
  background: linear-gradient(to bottom right, #001f3f, #008500);
  margin: 0 auto; /* Centra la sezione nella pagina */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}

.image-container {
  flex: 1; /* Permette al contenitore dell'immagine di occupare lo spazio disponibile */
  min-width: 300px; /* Larghezza minima per l'immagine su schermi più piccoli */
}

.image-container-gradient {
  flex: 1; /* Permette al contenitore dell'immagine di occupare lo spazio disponibile */
  min-width: 300px; /* Larghezza minima per l'immagine su schermi più piccoli */
}

.image-container img {
  max-width: 80%; /* Assicura che l'immagine non fuoriesca dal suo contenitore */
  height: auto; /* Mantiene le proporzioni dell'immagine */
  display: block; /* Rimuove lo spazio extra sotto l'immagine */
  border-radius: 3px; /* Bordi leggermente arrotondati per l'immagine */
}

.image-container-gradient img {
  max-width: 80%; /* Assicura che l'immagine non fuoriesca dal suo contenitore */
  height: auto; /* Mantiene le proporzioni dell'immagine */
  display: block; /* Rimuove lo spazio extra sotto l'immagine */
  border-radius: 3px; /* Bordi leggermente arrotondati per l'immagine */
  margin-left: 120px;
}

.text-container {
  flex: 2; /* Permette al contenitore del testo di occupare più spazio rispetto all'immagine */
  color: #333; /* Colore del testo */
  line-height: 1.5; /* Interlinea per una migliore leggibilità */
}

.text-container h2 {
  color: #008500; /* Colore del titolo */
  margin-bottom: 15px; /* Spazio sotto il titolo */
  font-size: 35px; /* Dimensione del font del titolo */
}

.text-container p {
  margin-bottom: 10px; /* Spazio sotto i paragrafi */
}

/* Media query per schermi più piccoli: impila gli elementi */
@media (max-width: 768px) {
    .section-image {
        display: block;
        flex-direction: column; /* Cambia la direzione in colonna per schermi piccoli */
        text-align: center; /* Centra il testo */
    }

    .section-image-gradient {
        flex-direction: column; /* Cambia la direzione in colonna per schermi piccoli */
        text-align: center; /* Centra il testo */
    }

    .image-container, .text-container {
        flex: none; /* Rimuove la flessibilità per permettere agli elementi di occupare l'intera larghezza */
        width: 100%; /* Occupano tutta la larghezza disponibile */
    }

    .image-container {
        margin-left: 11%;
        margin-bottom: 20px; /* Spazio sotto l'immagine quando è impilata */
    }

  
    .image-container-gradient {
        flex: 1; /* Permette al contenitore dell'immagine di occupare lo spazio disponibile */
        min-width: 300px; /* Larghezza minima per l'immagine su schermi più piccoli */
        margin-right: 0%;
    }

    .image-container-gradient img {
        margin-left: 11%;
        margin-bottom: 20px; /* Spazio sotto l'immagine quando è impilata */
    }
}

.section-contatti {
    background-image: url('IMG/CONTATTI/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: top; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

.hero-section-franchising{
    background-image: url('IMG/FRANCHISING/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

.hero-section-franchising h1{
    font-size: 50px;
    color: white;
}

.hero-section-trasparenza{
    background-image: url('IMG/TRASPARENZA/bg1.jpeg'); /* Assicurati di mettere il nome corretto della tua immagine */
    background-size: cover; /* Questo assicura che l'immagine copra l'intera area */
    background-position: center; /* Centra l'immagine nel background */
    background-repeat: no-repeat; /* Impedisce che l'immagine si ripeta */
    position: relative; /* Necessario se vuoi applicare un overlay */
    padding: 100px 0; /* Aggiungi un po' di spazio interno per il contenuto */
    color: white; /* Per rendere il testo visibile sull'immagine */
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.hero-section-franchising::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.hero-section-trasparenza::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

.hero-section-trasparenza h1{
    font-size: 50px;
    color: white;
}

/* Optional: Overlay per migliorare la leggibilità del testo */
.section-contatti::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Scurisce l'immagine del 50% */
    z-index: 1; /* Assicura che l'overlay sia sopra l'immagine */
}

.section-contatti .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.hero-section .container {
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay */
}

.section-contatti h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.hero-section h2 {
    font-size: 50px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.section-contatti, p {
    font-size: 25px;
}

.hero-section, p {
    font-size: 25px;
}

input .comune-results {
    position: absolute; /* O 'absolute' a seconda del contesto */
    z-index: 2000; /* Nessun "px" qui */
    background-color: white;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); /* Un'ombra più morbida è spesso preferibile */
    /* Aggiungi 'top', 'left', 'right' o 'bottom' per posizionarla */
    top: 0; /* Esempio: posizionala in alto */
    width: 100%; /* Esempio: la larghezza del viewport */
}

.results {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background-color: #fff;
  z-index: 1000;
  text-align: center;
  align-items: center;
  display: block;

  position: relative;
  top: 100%; /* subito sotto l’input */
  left: 0%;

  border-radius: 0 0 5px 5px;
}

.results a{
    text-decoration: none;
    color: #000;
}

.results a:hover{
    background-color: #ababab;
}

/* Media query optional: mobile touch-up */
@media (max-width: 768px) {
    .results {
        max-height: 200px;
        font-size: 0.9rem;
    }
  
    label img{
        margin: 0px;
    }
}

.opzioni-pacchetto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1rem;
    text-align: center;
    align-items: center;
}

.opzioni-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 5px;
    justify-content: center;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: #007bff;
    cursor: pointer;
}

/* ✅ Responsive sotto i 768px */
@media (max-width: 768px) {
    .opzioni-riga {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .custom-checkbox {
        font-size: 16px;
    }

    .custom-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
}