html,

body {

    height: 100%;

    margin: 0;

    padding: 0;

}



body {

    background: url('../img/web.svg') no-repeat center center fixed;

    background-size: cover;

    background-attachment: fixed;

}



.hero-overlay {

    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);

}



.course-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

    justify-content: center;

}



.card {

    display: flex;

    flex-direction: column;

    height: auto;

    transition: all 0.3s ease;

    border: none;

    border-radius: 1rem;

    overflow: hidden;

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}



/* L'immagine resta fissa in alto */

.card-img-top {

    height: 220px;

    width: 100%;

    object-fit: cover;

}



/* Il testo e pulsanti scorrono senza venire tagliati */

.card-body {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



/* Badge posizione */

.badge-pos {

    position: absolute;

    top: 10px;

    left: 10px;

}



.card-price {

    font-size: 1.2rem;

    font-weight: bold;

    color: #198754;

}



.btn-success {

    border-radius: 30px;

}



.btn-svg {

    border: none;

    background: none;

    padding: 0;

    transition: transform 0.2s ease;

}



.btn-svg:hover {

    transform: scale(1.05);

}



/* Stile della navbar */

.navbar {

    background-color: #00456F;

    padding: 10px 15px;

}



.navbar .navbar-brand img {

    height: 35px;

}



/* Posizione del badge sopra l'icona del carrello */

.nav-link.position-relative {

    position: relative;

}



.nav-link .fa-shopping-cart {

    font-size: 24px;

}



/* Stile per il badge numerico sopra il carrello */

.badge2 {

    font-size: 14px;

    font-weight: bold;

    position: absolute;

    top: -5px;

    right: -5px;

    padding: 5px;

    background-color: #DB2833;

    color: #ffffff;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    text-align: center;

    line-height: 10px;

}



/* Navbar desktop */

.navbar-desktop {

    display: flex;

}



/* Navbar mobile nascosta di default */

.navbar-mobile {

    display: none;

}



/* Mostra la navbar mobile su schermi piccoli */

@media (max-width: 767px) {

    .navbar-desktop {

        display: none;

    }

    .navbar-mobile {

        display: flex;

        justify-content: space-between;

        align-items: center;

        background-color: #00456F;

        padding: 10px 15px;

    }

}



.wrapper {

    min-height: 100%;

    display: flex;

    flex-direction: column;

}



footer {

    margin-top: auto;

}



.contact-info {

    max-width: 1000px;

    margin: 0 auto;

}



.contact-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

    justify-content: center;

    text-align: center;

}



.contact-grid div {

    background: #f8f9fa;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

}



.bruxelles {

    font-weight: bold;

    color: gold;

}



@media (max-width: 768px) {

    .contact-info img {

        width: 80%;

    }

    .contact-buttons {

        flex-direction: column;

        gap: 15px;

    }

    .contact-buttons a img {

        width: 80%;

    }

}

/* FORZA TUTTE LE CARD AD AVERE LA STESSA ALTEZZA */

.row .col-md-4 {

    display: flex;

}



.row .col-md-4 .card {

    display: flex;

    flex-direction: column;

    height: 100%;

}



/* Immagini uguali */

.card-img-top {

    height: 220px !important;

    object-fit: cover;

}



/* Il corpo della card si espande */

.card-body {

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    justify-content: space-between;

}



/* Il testo extra non fa crescere la card */

.card-text {

    flex-grow: 1;

}



/* Mantiene pulsanti in fondo */

.card-body .mt-auto {

    margin-top: auto;

}

        .corso-info-box {
    background: rgba(255, 255, 255, 0.82); /* bianco trasparente */
    padding: 25px;
    border-radius: 12px;
    backdrop-filter: blur(4px); /* effetto premium */
}