@font-face {

    font-family: 'Luckiest Guy';

    src: url('/Content/Fonts/LuckiestGuy-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}



.main-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #fff;

    padding: 0 20px;

    border-bottom: 1px solid #eee;

    position: relative;

    z-index: 10;

}



html {

    scroll-behavior: smooth;

}



.nav-logo img {

    height: 50px;

}



.nav-links {

    display: flex;

    gap: 30px;

    list-style: none;

    margin: 0;

    padding: 0;

}



    .nav-links li a {

        color: white;

        text-decoration: none;

        font-weight: bold;

        font-size: 1.1em;

        transition: color 0.2s;

        padding-left: 10px;

    }



        .nav-links li a:hover {

            color: #bf2828;

        }



.nav-toggle {

    display: none;

    flex-direction: column;

    justify-content: center;

    background: none;

    border: none;

    cursor: pointer;

    padding: 10px;

}



.hamburger {

    width: 28px;

    height: 4px;

    background: white;

    margin: 4px 0;

    border-radius: 2px;

    transition: all 0.3s;

}



.banner {

    background-color: #800000;

    color: white;

    padding: 17px;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

}



/* Responsive: sotto i 768px mostra hamburger, nascondi menu */

@media (max-width: 768px) {

    .nav-links {

        display: none;

        position: absolute;

        top: 60px;

        background: #fff;

        flex-direction: column;

        width: 200px;

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

        border-radius: 0 0 8px 8px;

        z-index: 100;

    }



        .nav-links.open {

            display: flex;

        }



        .nav-links li a {

            color: #800000;

        }



    .nav-toggle {

        display: flex;

    }



    .main-nav {

        flex-direction: row;

        padding: 0 10px;

    }



    .banner{

        padding: 2px;

    }

}





body {

    margin: 0;

    font-family: 'Cabin', sans-serif;

    background-color: #fff;

    color: #800000;

}



header {

    background-color: #fff;

    padding: 40px;

    display: flex;

    align-items: center;

    justify-content: center; /* Centra tutto l'header orizzontalmente */

}



    header .logo {

        margin-right: 20px;

        margin-top: 30px;

    }



    header img {

        width: 60px;

        height: 60px;

    }



    header .title-container {

        display: flex;

        flex-direction: column;

        align-items: center; /* Allinea i titoli al centro orizzontalmente */

        color: #800000;

        text-align: center; /* Centra il testo all'interno del contenitore */

        padding-top: 85px;

    }



    header h1, header h2 {

        margin: 0;

        color: #800000;

    }



    header h1 {

        font-size: 2.5em;

        font-weight: bold;

        margin-bottom: 30px;

        color: #bf2828;

    }



    header h2 {

        font-size: 1em;

        margin-top: 5px;

        color: #800000;

    }



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}



.lucine {

    display: flex;

    justify-content: center; /* Centra l'immagine del bordo orizzontalmente */

    margin-top: -1px;

}



.event-info {

    background-color: #f2ebe4;

    padding: 20px;

    margin: 20px 0;

    border-radius: 8px;

    text-align: center;

    color: #800000;

}



.font-luckiest-guy {

    font-family: 'Luckiest Guy', sans-serif;

}



.event-info h2 {

    font-size: 2.5em;

    margin-top: 50px;

    margin-bottom: 50px;

    color: #bf2828;

}



.event-info p {

    font-size: 1.7em;

    line-height: 1.8;

}



.bold-text {

    font-weight: bold;

}



.prenotaz-obb {

    margin-top: 70px;

    color: #bf2828;

}



.numero {

    color: #bf2828;

    font-size: 2em !important;

}



.descrizione {

    font-size: 12px !important;

}



.cta-button:hover {

    background-color: #660000;

}



.image-gallery {

    width: 100%;

    border-radius: 10px;

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

    overflow: hidden;

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    justify-content: center;

    margin: 30px 0;

}



    .image-gallery img {

        width: 100%;

        border-radius: 10px;

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

        max-height: 770px;

    }



footer {

    background-color: #800000;

    color: white;

    padding: 20px;

    text-align: center;

    margin-top: 40px;

}



footer p {

    margin: 0;

    font-size: 1em;

}



.social-links {

    margin-top: 20px; /* Spazio tra la box immagine e il link */

}



.facebook-link {

    padding-right: 5px;

    text-decoration: none;

}



    .facebook-link img {

        width: 50px; /* Dimensione dell'immagine di Facebook */

        height: auto;

        border: none;

        vertical-align: middle;

    }



        .facebook-link img:hover {

            opacity: 0.8; /* Effetto di opacità quando si passa sopra l'immagine */

        }



/* Modal styles */



.open-modal {

    display: block;

    margin-top: 20px;

    text-align: center;

    font-size: 1.2em;

    color: #800000;

    cursor: pointer;

    text-decoration: underline;

}



    .open-modal:hover {

        color: #660000;

    }



.modal {

    display: none;

    position: fixed;

    z-index: 10;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.4);

    justify-content: center;

    align-items: center;

}



.modal-content {

    background-color: #fff;

    margin: 15% auto;

    /*padding: 20px;*/

    border: 1px solid #888;

    width: 90%;

    max-width: 600px;

}



    .modal-content img {

        width: 100%;

        height: auto;

    }



.close {

    color: #800000;

    float: right;

    font-size: 1.5em;

    font-weight: bold;

    cursor: pointer;

    padding-left: 15px;

}



    .close:hover,

    .close:focus {

        color: #660000;

        text-decoration: none;

        cursor: pointer;

    }



/* Stile per il logo ridotto quando si scorre */

.logo-small {

    position: fixed;

    top: 0px;

    margin-top: 0px;

    display: none;

    transition: opacity 0.5s ease-in-out; /* Transizione graduale della visibilità */

    opacity: 0;

}



    .logo-small.show {

        display: block;

        opacity: 1;

        z-index: 10;

    }



    .logo-small img {

        width: 60px; /* Larghezza ridotta del logo */

        height: 60px; /* Altezza ridotta del logo */

    }







@media (max-width: 768px) {

    header {

        flex-direction: column;

        align-items: center;

    }



        header .logo {

            margin-bottom: 10px;

        }



        header .title-container {

            align-items: center;

            text-align: center;

            padding-top: unset;

        }



        header h1 {

            font-size: 1.6em;

        }



        header h2 {

            font-size: 0.9em;

        }



    .event-info h2 {

        font-size: 2em;

    }



    .cta-button {

        padding: 10px 20px;

        font-size: 1.1em;

    }



    .image-gallery img {

        width: 90%;

    }



    .lucine img {

        width: 100%;

        max-width: 1200px; /* Limita la larghezza massima dell'immagine del bordo */

        height: auto;

    }



    .menu {

        width: 90%;

    }

}



@media (max-width: 480px) {

    .image-gallery img {

        width: 100%;

    }



    .menu {

        width: 90%;

    }

}