:root {
    --homepage-gradient: linear-gradient(rgba(199, 164, 158, 0.1), rgba(199, 164, 158, 0.1));

    --navbar-home-bg: transparent;
    /* sfondo navbar */
    --navbar-home-text: #ffffff;
    /* colore testo/link */
    --navbar-home-hover: #ffffff;
    /* colore hover link */
    --navbar-home-dropdown-bg: #ffffff;
    /* sfondo dropdown */
    --navbar-home-dropdown-text: #000;
    /* testo dropdown */
    --navbar-home-icon: #ffffff;
    /* colore icone */
}

:root {
    --navbar-site-bg: #c8cac9;
    /* sfondo navbar */
    --navbar-site-text: #000;
    /* colore testo/link */
    --navbar-site-hover: #040404;
    /* colore hover link */
    --navbar-site-dropdown-bg: #ffffff;
    /* sfondo dropdown */
    --navbar-site-dropdown-text: #000;
    /* testo dropdown */
    --navbar-site-icon: #ffffff;
    /* colore icone */
}

:root {
    /* Mobile */
    --site-bg-mobile: #f5f5f5;
    --site-text-mobile: #000000;

    /* Navbar mobile */
    --navbar-mobile-bg: #c8cac9;
    --navbar-mobile-text: #000;
    --navbar-mobile-hover: #021d47;

    --footer: #c8cac9;
}

:root {
    --btn-conferma-bg: #c0c5c3;
    --btn-conferma-text: #000000;
    --btn-conferma-hover-bg: #0d6efd;
    /* blu standard Bootstrap */
    --btn-conferma-hover-text: #ffffff;

    --btn-annulla-bg: #c0c5c3;
    --btn-annulla-text: #000000;
    --btn-annulla-hover-bg: #dc3545;
    /* rosso Bootstrap danger */
    --btn-annulla-hover-text: #ffffff
}

/*--------------------------------------------------------------
# NavBar Home
--------------------------------------------------------------*/
/* Contenitore header trasparente */
.header-transparent.navbar-home,
.navbar-home {
    background-color: var(--navbar-home-bg);
    color: var(--navbar-home-text);
}

/* Link principali */
.navbar-home a {
    color: var(--navbar-home-text);
    text-decoration: none;
}

.navbar-home a:hover,
.navbar-home a:focus {
    color: var(--navbar-home-hover);
}

/* Brand + icona casa: usa currentColor per sincronizzare */
.navbar-home .navbar-brand {
    color: var(--navbar-home-text);
}

.navbar-home .navbar-brand i {
    color: currentColor;
    /* eredita il colore del brand */
    font-size: 1.2rem;
}

/* Icone generiche nella navbar (toggle, chevron, ecc.) */
.navbar-home i {
    color: var(--navbar-home-icon);
}

/* Toggle mobile */
.navbar-home .mobile-nav-toggle {
    color: var(--navbar-home-icon);
}

/* Dropdown menu (versione con .dropdown-menu + .dropdown-item) */
.navbar-home .dropdown-menu {
    background-color: var(--navbar-home-dropdown-bg);
    border: none;
}

/* Link dropdown */
.navbar-home .dropdown-menu a {
    background-color: transparent;
}

/* Hover dropdown */
.navbar-home .dropdown-menu a:hover {
    background-color: transparent;
    /* oppure un grigio chiaro */
    color: #021d47;
}

.navbar-home .dropdown-item {
    color: var(--navbar-home-dropdown-text);
}

.navbar-home .dropdown-item:hover,
.navbar-home .dropdown-item:focus {
    background-color: var(--navbar-home-bg);
    color: var(--navbar-home-hover);
}

.navbar-home .dropdown>a i,
.navbar-home .dropdown-toggle i {
    color: var(--navbar-home-text);
}

/* Stato aperto del dropdown (se gestito via classi o JS) */
.navbar-home .dropdown.show>.dropdown-menu {
    display: block;
}

/* Brand */
.navbar-home .navbar-brand {
    color: var(--navbar-home-text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: "Poppins", sans-serif;
}

/* Icona del brand */
.navbar-home .navbar-brand i {
    color: var(--navbar-home-icon);
    font-size: 1.2rem;
}

/*--------------------------------------------------------------
# NavBar Site
--------------------------------------------------------------*/
body.theme-site #header {
    background: var(--navbar-site-bg);
    padding: 24px 0;
}

body.theme-site #header.header-scrolled {
    background: var(--navbar-site-bg);
    padding: 12px;
}

/* Link principali */
.navbar-site a {
    color: var(--navbar-site-text);
    text-decoration: none;
}

.navbar-site a:hover,
.navbar-site a:focus {
    color: var(--navbar-site-hover);
}

/* Brand + icona casa: usa currentColor per sincronizzare */
.navbar-site .navbar-brand {
    color: var(--navbar-site-text);
}

.navbar-site .navbar-brand i {
    color: currentColor;
    /* eredita il colore del brand */
    font-size: 1.2rem;
}

/* Icone generiche nella navbar (toggle, chevron, ecc.) */
.navbar-site i {
    color: var(--navbar-site-icon);
}

/* Toggle mobile */
.navbar-site .mobile-nav-toggle {
    color: var(--navbar-site-icon);
}

/* Dropdown menu (versione con .dropdown-menu + .dropdown-item) */
.navbar-site .dropdown-menu {
    background-color: var(--navbar-site-dropdown-bg);
    border: none;
}

/* Link dropdown */
.navbar-site .dropdown-menu a {
    background-color: transparent;
}

/* Hover dropdown */
.navbar-site .dropdown-menu a:hover {
    background-color: transparent;
    /* oppure un grigio chiaro */
    color: #021d47;
}

.navbar-site .dropdown-item {
    color: var(--navbar-site-dropdown-text);
}

.navbar-site .dropdown-item:hover,
.navbar-site .dropdown-item:focus {
    background-color: var(--navbar-site-bg);
    color: var(--navbar-site-hover);
}

/* Stato aperto del dropdown (se gestito via classi o JS) */
.navbar-site .dropdown.show>.dropdown-menu {
    display: block;
}

.navbar-site .dropdown>a i,
.navbar-site .dropdown-toggle i {
    color: var(--navbar-site-text);
    /* oppure var(--navbar-site-icon) */
}

/* Brand */
.navbar-site .navbar-brand {
    color: var(--navbar-site-text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: "Poppins", sans-serif;
}

/* Icona del brand */
.navbar-site .navbar-brand i {
    color: var(--navbar-site-icon);
    font-size: 1.2rem;
}

/* Navbar Mobile x tutti */
@media (max-width: 768px) {
    body {
        background-color: var(--site-bg-mobile);
        color: var(--site-text-mobile);
    }

    .navbar {
        background-color: var(--navbar-mobile-bg);
        color: var(--navbar-mobile-text);
    }

    .navbar a {
        color: var(--navbar-mobile-text);
    }

    .navbar a:hover {
        color: var(--navbar-mobile-hover);
    }
}

/* Pulsanti Conferma */
.btn-conferma {
    background-color: var(--btn-conferma-bg);
    color: var(--btn-conferma-text);
    border: 1px solid var(--btn-conferma-hover-bg);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-conferma:hover,
.btn-conferma:focus {
    background-color: var(--btn-conferma-hover-bg);
    color: var(--btn-conferma-hover-text);
}

/* Pulsante Cambia Area solo in mobile verticale */
/* si stacca dal pulsante superiore */
@media (max-width: 576px) {

    /* Contenitore pulsanti come flexbox */
    .btn-area {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4em;
        /* spazio uniforme tra tutti i bottoni */
    }

    /* Tutti i bottoni allineati e con larghezza coerente */
    .btn-area .btn {
        margin: 0 !important;
        /* annulla ml-3 su mobile */
        min-width: 140px;
        text-align: center;
    }
}

/* Pulsanti Annulla */
.btn-annulla {
    background-color: var(--btn-annulla-bg);
    color: var(--btn-annulla-text);
    border: 1px solid var(--btn-annulla-hover-bg);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-annulla:hover,
.btn-annulla:focus {
    background-color: var(--btn-annulla-hover-bg);
    color: var(--btn-annulla-hover-text);
}

/* Box Team */
.box-team {
    margin: 0 auto;
    /* centrato orizzontalmente, niente auto verticale */
    padding: 1em;
    position: relative;
    max-width: 900px;
    width: 90%;
    background-color: #ffffff;
    border-radius: 1em;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.19);
    margin-bottom: 2rem;
    /* spaziatura coerente tra i box */
}

/* Layout container */
.team-container {
    display: flex;
    flex-wrap: wrap;
    /* permette di andare a capo su schermi piccoli */
    align-items: center;
    gap: 1em;
}

/* Immagine */
.team-image {
    flex: 1 1 300px;
    /* minimo 300px, ma si adatta */
    text-align: center;
}

.img-team {
    max-width: 100%;
    height: auto;
    border-radius: 0.5em;
    background-color: white;
    padding: 5px;
    display: inline-block;
}

/* Testo */
.team-text {
    flex: 2 1 400px;
    /* occupa più spazio del blocco immagine */
}

/* Media Query per schermi piccoli */
@media (max-width: 768px) {
    .team-container {
        flex-direction: column;
        /* immagine sopra, testo sotto */
        text-align: center;
    }

    .team-text {
        text-align: left;
        /* testo leggibile anche su mobile */
    }
}

/* Box promo coupon corsi-ba */
.promo-box {
    border: 2px solid #a3a5a5;
    max-width: 600px;
    margin: auto;
    padding: 20px 10px;
    background: whitesmoke;
    border-radius: 0.5em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
}

.promo-box p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.promo-box .promo-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0078d7;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.promo-box .promo-link:hover {
    background-color: #005fa3;
}

/* Margine di scorrimento per tutti gli elementi con id
posizionamento delle sezioni da porfolio o popup distanza fissa 80px sotto la barra */
[id] {
    scroll-margin-top: 80px;
    /* altezza navbar */
}

html {
    scroll-behavior: smooth;
}

/* testo barra semplice tipo conferme */
.navbar-text {
    font-size: 1.2rem;
    /* dimensione base desktop */
}

@media (max-width: 768px) {
    .navbar-text {
        font-size: 1rem;
        /* tablet */
    }
}

@media (max-width: 480px) {
    .navbar-text {
        font-size: 0.9rem;
        /* smartphone */
    }
}

/* Responsive: Mobile & Tablet */
@media (max-width: 768px) {
    .promo-box {
        margin: 20px 15px;
        padding: 25px 20px;
    }

    .promo-box p {
        font-size: 1rem;
    }

    .promo-box .promo-link {
        padding: 10px 16px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .promo-box {
        padding: 20px 15px;
    }

    .promo-box p {
        font-size: 0.95rem;
    }

    .promo-box .promo-link {
        width: 100%;
        font-size: 0.9rem;
    }
}