/* General Styles */

body {
    font-family: 'Bitter', serif;
    background-color: #efefef !important;
    /* Grigio chiaro */
    margin: 0;
    padding: 0;
}


/* Navbar */

.navbar {
    background-color: #563031 !important;
    /* Rosso scuro */
    padding: 0.3rem;
}


/* Cambia il colore delle tre linee del bottone in bianco */

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255%2C255%2C255%2C1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
    border-color: #ffffff;
    /* Cambia anche il colore del bordo del bottone hamburger */
}


/* Impostazioni specifiche per il monogramma nella navbar */

.navbar-brand img {
    width: auto !important;
    /* Forza il mantenimento della proporzione originale */
    height: 80px !important;
    /* Aumenta l'altezza del monogramma */
    display: block !important;
    margin-left: 0 !important;
    /* Spostalo leggermente a sinistra se necessario */
    margin-right: 0 !important;
    /* Evita margini extra a destra */
    padding-top: 0px !important;
    /* Aggiusta l'altezza rispetto alla navbar */
    padding-bottom: 0px !important;
}


/* Regole responsive per monogramma su dispositivi mobili */

@media (max-width: 768px) {
    .navbar-brand img {
        height: 80px !important;
        /* Regola l'altezza su dispositivi mobili */
        padding-top: 0px !important;
        /* Aggiusta il padding per centrare verticalmente */
    }
}

.navbar-brand:hover {
    text-decoration: none;
    color: #efefef !important;
    /* Grigio chiaro al passaggio del mouse */
}

.navbar-nav .nav-link {
    font-size: 18px;
    color: #efefef !important;
    /* Grigio chiaro per i link */
    margin-right: 20px;
}

.navbar-nav .btn {
    background-color: #d7c8b0 !important;
    /* Beige chiaro */
    color: #2e2e2e !important;
    /* Grigio scuro per il testo del bottone */
    font-weight: bold;
}

.navbar-nav .btn:hover {
    background-color: #2e2e2e !important;
    /* Grigio scuro al passaggio del mouse */
    color: #efefef !important;
    /* Grigio chiaro per il testo */
}


/* Hero Section */

.hero {
    position: relative;
    height: 90vh;
    /* Altezza della hero */
    background-size: cover;
    background-position: center -210px;
    /* Sposta leggermente l'immagine verso l'alto */
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}


/* Regole per tablet (tra 768px e 1024px di larghezza) */

@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        height: 80vh;
        /* Riduce leggermente l'altezza per i tablet */
        background-position: center top;
        /* Centra meglio l'immagine */
    }
}


/* Regole per schermi piccoli */

@media (max-width: 768px) {
    .hero {
        height: 75vh;
        /* Riduce ulteriormente l'altezza per smartphone */
        background-position: center top;
        /* Centra l'immagine rispetto al top */
    }
}


/* Regole per schermi molto piccoli (smartphone piccoli) */

@media (max-width: 576px) {
    .hero {
        height: 60vh;
        /* Riduce ancora l'altezza per schermi piccoli */
        background-position: center top;
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(46, 46, 46, 0.4);
    /* Grigio scuro con trasparenza */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    /* Il testo e il logo sopra l'overlay */
    color: #efefef;
    /* Grigio chiaro */
}


/* Logo con effetto di zoom-out */

.logo-zoom-out {
    width: 80%;
    /* Il logo occupa l'80% della larghezza della hero */
    max-width: 1000px;
    /* Limite massimo di larghezza */
    height: auto;
    /* Mantiene le proporzioni */
    animation: zoomOutLogo 2s ease-in-out forwards;
    /* Animazione di zoom-out */
    opacity: 0;
    /* Inizia invisibile */
}


/* Media query per dispositivi di medie dimensioni (tablet) */

@media (max-width: 992px) {
    .logo-zoom-out {
        width: 80%;
        /* Il logo rimane ben visibile su tablet */
        max-width: 700px;
        /* Limite massimo per dispositivi medi */
    }
}


/* Media query per dispositivi mobili */

@media (max-width: 768px) {
    .logo-zoom-out {
        width: 80%;
        /* Logo più grande sui dispositivi mobili */
        max-width: 700px;
        /* Limite massimo di larghezza su mobile */
    }
}


/* Media query per dispositivi molto piccoli (smartphone piccoli) */

@media (max-width: 576px) {
    .logo-zoom-out {
        width: 80%;
        /* Logo ancora più grande su schermi molto piccoli */
        max-width: 500px;
        /* Limite massimo di larghezza */
    }
}


/* Modifica della dimensione del testo per mantenere il logo più grande rispetto alla scritta */

.hero h1 {
    font-size: 3rem;
    /* Riduzione della dimensione del testo */
}

.hero p {
    font-size: 1.2rem;
    /* Riduzione della dimensione del sottotitolo */
}

@keyframes zoomOutLogo {
    0% {
        transform: scale(1.5);
        /* Inizia più grande */
        opacity: 0;
        /* Inizia invisibile */
    }
    100% {
        transform: scale(1);
        /* Ritorna alla dimensione normale */
        opacity: 1;
        /* Diventa visibile */
    }
}

.hero h1,
.hero p {
    margin: 0;
    background: none;
    /* Nessuno sfondo opaco */
    color: #efefef;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    /* Ombra per migliorare la leggibilità */
}

.hero h1 {
    font-size: 4rem;
}

.hero p {
    font-size: 1.5rem;
}

.hero .btn {
    background-color: #d7c8b0;
    /* Beige chiaro */
    padding: 1rem 2rem;
    border: none;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 2;
    /* Assicura che il bottone sia sopra l'overlay */
}

.hero .btn:hover {
    background-color: #2e2e2e;
    /* Grigio scuro al passaggio del mouse */
    color: #efefef !important;
    /* Grigio chiaro per il testo */
}


/* Fascia di Prenotazione */

.booking-bar {
    background-color: #563031 !important;
    /* Rosso scuro */
    padding: 40px 0;
    color: #efefef !important;
    /* Grigio chiaro */
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.booking-bar h3 {
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #d7c8b0 !important;
    /* Beige chiaro */
}

.booking-bar .form-group input {
    background-color: #efefef !important;
    /* Grigio chiaro */
    color: #2e2e2e !important;
    /* Grigio scuro */
    border: 1px solid #d7c8b0 !important;
    /* Beige chiaro */
    padding: 12px;
    font-size: 18px;
}

.booking-bar .form-group label {
    color: #d7c8b0 !important;
    /* Beige chiaro */
    font-size: 16px;
    margin-bottom: 5px;
}

.booking-bar .form-group input {
    width: 200px;
    /* Larghezza fissa */
    text-align: center;
    background-color: #ffffff !important;
    /* Beige chiaro */
    color: #2e2e2e !important;
    /* Grigio scuro */
    border: 2px solid #2e2e2e !important;
    /* Grigio chiaro */
    padding: 12px;
    font-size: 18px;
}

.booking-bar input[type="submit"] {
    background-color: #d7c8b0 !important;
    /* Beige chiaro */
    color: #2e2e2e !important;
    /* Grigio scuro */
    font-size: 18px;
    padding: 12px 30px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 100%;
    /* Imposta altezza al 100% per allineamento */
    margin-top: 30px;
    /* Spazio per allinearlo verticalmente */
}

.booking-bar input[type="submit"]:hover {
    background-color: #2e2e2e !important;
    /* Grigio scuro al passaggio del mouse */
    color: #efefef !important;
    /* Grigio chiaro */
}


/* Compensa la navbar fissa con un padding aggiuntivo */

section {
    scroll-margin-top: 80px;
    /* Cambia il valore in base all'altezza della tua navbar */
}


/* Section Titles */

h2 {
    margin: 2rem 0;
    font-size: 2.5rem;
    text-align: center;
    color: #563031 !important;
    /* Rosso scuro */
}


/* Footer */

.footer {
    background-color: #563031 !important;
    /* Rosso scuro */
    color: #efefef !important;
    /* Grigio chiaro */
    padding: 1rem;
    text-align: center;
    font-size: 14px;
}


/* Logo nel Footer */

.footer img {
    width: 100%;
    /* Adatta la larghezza del logo al 100% dello spazio disponibile */
    max-width: 400px;
    /* Imposta una larghezza massima per mantenere proporzioni ragionevoli */
    height: auto;
    /* Mantiene le proporzioni originali del logo */
    margin: 0 auto;
    /* Centra il logo */
    display: block;
    /* Assicura che sia trattato come un blocco */
    padding-bottom: 15px;
    /* Spazio sotto il logo */
}


/* Regole Responsive per il Logo nel Footer */

@media (max-width: 768px) {
    .footer img {
        max-width: 400px;
        /* Riduce leggermente la larghezza su dispositivi mobili */
    }
}

@media (max-width: 576px) {
    .footer img {
        max-width: 300px;
        /* Ulteriore riduzione per schermi molto piccoli */
    }
}


/* Scroll to Top Button */

#scrollTopBtn {
    display: none;
    /* Inizialmente nascosto */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #d7c8b0 !important;
    /* Beige chiaro */
    color: #2e2e2e !important;
    /* Grigio scuro */
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}

#scrollTopBtn:hover {
    background-color: #2e2e2e !important;
    /* Grigio scuro */
    color: #efefef !important;
    /* Grigio chiaro */
}


/* Cookie Banner */

#cookieBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(46, 46, 46, 0.9);
    /* Grigio scuro */
    color: white;
    padding: 20px;
    text-align: center;
    z-index: 9999;
}

#cookieBanner button {
    background-color: #d7c8b0 !important;
    /* Beige chiaro */
    border: none;
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
}


/* Modal Customization */

.modal-content {
    background-color: #f9f5f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.modal-header {
    background-color: #563031 !important;
    /* Rosso scuro */
    color: #fff !important;
    padding: 20px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}


/* Imposta dimensioni fisse per le immagini dello slider */

.slider-img {
    height: 400px;
    /* Altezza fissa */
    object-fit: cover;
    /* Taglia l'immagine per riempire lo spazio senza distorsioni */
}

@media (max-width: 768px) {
    .slider-img {
        height: 250px;
        /* Altezza ridotta su dispositivi mobili */
    }
}

.card-img-top {
    width: 100%;
    height: 300px;
    /* Imposta l'altezza fissa per tutte le immagini */
    object-fit: cover;
    /* Assicura che l'immagine riempia il contenitore senza distorsioni */
}

.social-icons a img {
    width: 30px;
    margin-right: 10px;
}

.social-icons a {
    display: inline-block;
    transition: transform 0.2s ease;
}

.social-icons a:hover {
    transform: scale(1.1);
}