body {
    font-family: 'Exo', sans-serif;
    line-height: 1.6; /* Migliora la leggibilità del testo */
    color: #333; /* Un colore di testo scuro ma non nero puro */
    padding-top: 56px; /* Per compensare la navbar fissa (fixed-top) */
}

/* Applica Merienda solo agli H1 */
h1, h2 {
    font-family: 'Merienda', cursive;
    /* Puoi aggiungere altri stili per gli h1 qui, es: */
    /* color: #007bff; */ /* Colore primario di Bootstrap */
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.3); */
}

/* Applica Exo agli altri titoli (H2, H3, H4, H5, H6) */
h3, h4, h5, h6 {
    font-family: 'Exo', sans-serif;
    /* Puoi aggiungere altri stili per gli h2-h6 qui */
}


/* Stili generici per le sezioni */
.hero-section {
    position: relative;
    /* Immagine di sfondo già definita in Index.cshtml style="background-image: url('/img/hero_bg.jpg');" */
    color: white; /* Assicurati che il testo sia leggibile sullo sfondo scuro */
    padding-top: 8rem; /* Spazio aggiuntivo in alto per non sovrapporsi alla navbar fissa */
    padding-bottom: 8rem;
    overflow: hidden; /* Per gestire eventuali elementi che fuoriescono */
}

    /* Overlay scuro per la Hero Section per migliorare la leggibilità del testo */
    .hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Overlay nero semitrasparente */
        z-index: 0;
    }

    .hero-section > .container {
        position: relative; /* Assicura che il contenuto del container sia sopra l'overlay */
        z-index: 1;
    }

/* Stili per il pulsante "Inizia con gli Incontri Introduttivi Gratuiti!" */
.btn-primary {
    background-color: #007bff; /* Colore primario di Bootstrap */
    border-color: #007bff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .btn-primary:hover {
        background-color: #0056b3; /* Un blu leggermente più scuro all'hover */
        border-color: #0056b3;
    }

/* Stili per i punti forza nella sezione "Perché SPECTRUM?" */
.why-spectrum .col-md-3 {
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .why-spectrum .col-md-3:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

.why-spectrum i {
    font-size: 3.5rem; /* Rende le icone più grandi */
    margin-bottom: 15px;
}

/* Stili per le card della sezione "Scopri il Percorso" */
.card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }

.card-title {
    color: #333; /* Colore per i titoli delle card */
}

.card-text {
    font-size: 0.95rem;
    color: #555;
}

/* Stili per il footer */
footer {
    background-color: #212529 !important; /* Forza il colore scuro del footer se non applicato da Bootstrap */
    color: #f8f9fa !important; /* Testo bianco */
}

.social-icons a {
    font-size: 1.5rem;
    color: #f8f9fa;
    transition: color 0.3s ease;
}

    .social-icons a:hover {
        color: #007bff; /* Cambia colore all'hover */
    }

/* Stili per la navbar fissa */
.fixed-top {
    z-index: 1030; /* Assicura che la navbar sia sopra gli altri elementi */
}




/* Classe per testo con gradiente dello spettro elettromagnetico */
.spectrum-text-gradient {
    /* Imposta il gradiente come sfondo */
    /* Ho scelto una sequenza di colori che va dal "rosso" delle basse energie
       fino al "viola/magenta" delle alte energie, passando per lo spettro visibile. */
    background: linear-gradient(to right, #A8312B, /* Rosso mattone (per Radio/Microonde) */
    #E36414, /* Arancione bruciato (per Infrarosso) */
    #F9C74F, /* Giallo senape (per Visibile) */
    #43AA8B, /* Verde petrolio (per Visibile) */
    #2A72B3, /* Blu scuro (per Visibile) */
    #523D8A, /* Indaco (per Indaco/UV) */
    #793E94 /* Viola scuro (per UV/Raggi X) */
    );
    /* Le seguenti proprietà sono cruciali per applicare il gradiente al testo */
    -webkit-background-clip: text; /* Rende lo sfondo visibile solo dietro il testo */
    background-clip: text; /* Versione standard */

    -webkit-text-fill-color: transparent; /* Rende il testo trasparente per mostrare lo sfondo */
    color: transparent; /* Fallback per browser non compatibili e versione standard */
    /* Migliora la visibilità del gradiente su testi grandi e in grassetto */
    font-weight: 700; /* Assicurati che il testo sia in grassetto */
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.2); */ /* Opzionale: per un leggero effetto 3D */
}

/* Suggerimento: questa classe rende meglio su testi di grandi dimensioni,
   come H1 o H2, o titoli specifici. */
/* Puoi creare una versione specifica per Merienda se vuoi combinarli */
.spectrum-gradient {
    /* Copia le proprietà del .spectrum-text-gradient qui sopra */
    background: linear-gradient(to right, #A8312B, /* Rosso mattone (per Radio/Microonde) */
    #E36414, /* Arancione bruciato (per Infrarosso) */
    #F9C74F, /* Giallo senape (per Visibile) */
    #43AA8B, /* Verde petrolio (per Visibile) */
    #2A72B3, /* Blu scuro (per Visibile) */
    #523D8A, /* Indaco (per Indaco/UV) */
    #793E94 /* Viola scuro (per UV/Raggi X) */
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700; /* Assicurati che il font Merienda supporti questo peso o scegli uno compatibile */
}

.merienda {
    font-family: 'Merienda', cursive;   
}

.exo {
    font-family: 'Exo', sans-serif;
}


/* Media Query per schermi piccoli (es. cellulari) */
@media (max-width: 768px) {
    /* Riduci la dimensione del titolo principale SPECTRUM */
    .hero-section h1.display-3 {
        font-size: 1.5rem !important; /* Rendi il titolo più piccolo */
    }

    /* Riduci la dimensione del logo SPECTRUM */
    .hero-section #hero-title {
        width: 100% !important; /* Aumenta leggermente il logo */
        min-width: 150px !important;
    }

    /* Riduci la dimensione del logo di AstronomiAmo */
    .hero-section img[src*="LogoAABianco.png"] {
        width: 30% !important;
        max-width: 200px !important;
        min-width: 100px !important;
    }

    /* Riduci la dimensione del logo SPECTRUM */
    .hero-section img[src*="LogoSpectrum_Bianco.png"] {
        width: 30% !important; /* Aumenta leggermente il logo */
        max-width: 200px !important;
        min-width: 100px !important;
    }

    .hero-section p.lead.mb-5 {
        font-size: 1rem !important;
    }
}


/* Classe per applicare il gradiente di spectrum allo sfondo */
.spectrum-bg-gradient {
    background: linear-gradient(to right, #A8312B, /* Rosso mattone */
    #E36414, /* Arancione bruciato */
    #F9C74F, /* Giallo senape */
    #43AA8B, /* Verde petrolio */
    #2A72B3, /* Blu scuro */
    #523D8A, /* Indaco */
    #793E94 /* Viola scuro */
    );
    color: #fff; /* Assicura che il testo all'interno sia bianco e leggibile */
}

/* Regola per applicare il gradiente al pulsante dell'accordion quando è attivo */
.accordion-button:not(.collapsed) {
    background: linear-gradient(to right, #A8312B, #E36414, #F9C74F, #43AA8B, #2A72B3, #523D8A, #793E94 ) !important;
    color: #fff !important; /* Rende il testo bianco */
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); /* Aggiunge una leggera ombra per evidenziare */
}

    /* Modifica il colore delle icone dell'accordion quando attivo */
    .accordion-button:not(.collapsed) i {
        color: #fff;
    }