/* Impostazioni generali */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 100px; /* Spazio per l'header fisso */
    font-family: 'font/Elegante.otf', sans-serif;
    background-color: #F5F5F5;
}

@font-face {
    font-family: 'Elegante'; /* Nome che userai nel CSS */
    src: url('font/Elegante.otf') format('opentype'),  /* Supporto per OTF */
         url('font/Elegante.ttf') format('truetype');  /* Supporto per TTF */
    font-weight: normal;
    font-style: normal;
}

/* Rendiamo l'header fisso in cima */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Assicura che l'header rimanga sempre sopra il contenuto */
    background-color: #172e44;
    padding: 10px 20px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.36); /* Aggiunge un'ombra */
}

/* Menu mobile che si posiziona subito sotto l'header 
/* Modifiche al resto del menu mobile */
.mobile-menu {
    position: fixed; /* Fissato sotto l'header */
    top: 165px; /* Posiziona il menu immediatamente sotto l'header */
    left: 0;
    width: auto; /* Il menu occupa tutta la larghezza della pagina */
    background-color: #192f44fa;
    z-index: 999; /* Assicura che il menu sia sopra il contenuto */
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Nascosto di default */
    text-align: center;
    transition: transform 0.5s ease-in-out; /* Aggiunge una transizione fluida */
    overflow-y: auto; /* Permette lo scroll all'interno del menu se necessario */
    max-height: calc(100vh - 60px); /* Massima altezza del menu */
    border-radius: 0 0px 10px 0px;
}

/* Mostra il menu quando viene attivato */
.menu-toggle.active + .mobile-menu {
    display: block;
    animation: slideDown 0.5s ease-in-out; /* Aggiunge una transizione quando il menu si apre */
    transform: translateY(0); /* Mantiene il menu visibile */
}

/* Aggiungiamo una semplice animazione per il menu */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}




/* Contenitore per logo e scritta */
.header-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Titolo della sezione */
.section-title {
    font-size: 56px;
    font-family: 'Elegante', serif;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
    margin-top: 10px;
  
    
  }
  

/* Stile per il logo */
.logo img {
    width: 120px;
    display: block;
}

/* Stile per la scritta sotto il logo */
.villa-name {
    font-family: 'Elegante', serif;
    font-size: 24px;
    color: white;
    margin-top: 10px;
    text-align: center;
}

/* Stile per l'icona del menu (hamburger) */
.menu-toggle {
    position: absolute;
    left: 20px;
    font-size: 28px;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease; /* Transizione fluida per il cambio icona */
}


.mobile-menu a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

.mobile-menu li {
    margin: 10px 0;
}

.mobile-menu li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 5px 10px;
    display: block;
}

/* Visualizzazione del menu quando attivato */
.menu-toggle.active + .mobile-menu {
    display: block; /* Mostra il menu sotto l'header */
}

/* Effetto a tendina */
.mobile-menu {
    animation: slideDown 0.3s ease-out;
}

/* Animazione di apertura del menu */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Stile per il numero di telefono */
.phone-number {
    text-align: left; /* Allinea a sinistra */
    padding: 10px 15px; /* Spaziatura interna per un aspetto pulito */
    font-size: 14px; /* Dimensione del testo */
    background-color: #172E44; /* Colore di sfondo del numero di telefono */
    border-bottom: 1px solid #fff; /* Aggiunge una linea di separazione sotto il numero */
}

.phone-number a {
    color: white; /* Colore bianco per il numero */
    text-decoration: none; /* Rimuove la sottolineatura */
    display: block; /* Assicura che il numero occupi tutta la larghezza del contenitore */
}


.mobile-menu li {
    margin: 10px 0;
}

.mobile-menu li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 5px 10px;
    display: block; /* Assicura che il link occupi l'intera larghezza */
    font-family: Arial, Helvetica, sans-serif;
}

.mobile-menu li a:hover {

    background-color: #ffffff3a;
}

/* Visualizzazione del menu quando attivato */
.menu-toggle.active + .mobile-menu {
    display: block; /* Mostra il menu sotto l'header */
}


/* Stile base per la sezione video */
.video-section {
    position: relative;
    width: 100%;
    height: aut;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Contenitore del video e del pulsante */
.video-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra gli elementi */
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Video di background */
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Video dietro il pulsante */
}

/* Pulsante Prenota Ora */
.prenota-btn {
    z-index: 10;
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Popup per la prenotazione - centrato sotto il pulsante */
.booking-options {
    display: none; /* Nascondi inizialmente */
    background-color: rgba(51, 51, 51, 0.9);
    padding: 15px;
    border-radius: 10px;
    width: 80%;
    text-align: center;
    margin-top: 10px; /* Distanza di 10px dal pulsante Prenota */
    z-index: 2;
    align-self: center; /* Centra il popup */
    position: relative;
    bottom: 80px;
    left: 8%;
    
}

/* Titolo del popup */
.booking-options h2 {
    margin-bottom: 10px;
    font-size: 24px;
    color: white;
}

/* Bottoni nel popup */
.option-buttons a {
    display: inline-block;
    margin: 5px;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 20px;
    font-weight: bold;
    color: white;
    transition: background-color 0.3s;
}

/* Colori dei pulsanti per le opzioni */
.option-buttons a[href="https://www.booking.com/Share-7WZsRza"] {
    background-color: rgb(1, 60, 148);
}

.option-buttons a[href="https://www.airbnb.it/users/show/457567404"] {
    background-color: rgba(220, 18, 99);
}

.option-buttons a[href="https://www.bed-and-breakfast.it/it/calabria/bb-villa-maracuja-jonadi/57099?"] {
    background-color: rgba(0, 150, 64);
}

.option-buttons a[href="tel:+393517036921"] {
    background-color: gold;
}

/* Icona di chiusura del popup */
.close-icon {
    color: white;
    font-size: 24px;
    cursor: pointer;
}



/* Media query per schermi piccoli */
@media only screen and (max-width: 1366px) {
    .video-section {
        width: 100%;
        height: 550px;
    }

    .booking-options {
        position: relative;
        bottom: 80px;
        left: 5%;
        width: 75%;
    }

    .booking-options {
        width: 85%;
    }
}


/* Media query per schermi piccoli */
@media only screen and (max-width: 768px) {
    .video-section {
        height: 350px;
    }

    .booking-options {
        position: relative;
        bottom: 80px;
        left: 5%;
        width: 75%;
    }

    .booking-options {
        width: 85%;
    }
}

@media only screen and (max-width: 375px) {
    .video-section {
        height: 400px;
    }

    .prenota-btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    .booking-options {
        position: relative;
        bottom: 80px;
        left: 8%;
        width: 75%;
    }

    .option-buttons a {
        font-size: 14px;
        padding: 8px 15px;
    }
}

@media only screen and (max-width: 320px) {
    .video-section {
        height: 380px;
    }

    .prenota-btn {
        font-size: 14px;
        padding: 8px 15px;
    }

    .booking-options {
        position: relative;
        bottom: 80px;
        left: 5%;
        width: 75%;
    }

    .option-buttons a {
        font-size: 12px;
        padding: 6px 10px;
    }
}


/* Sezione Chi Siamo */
.chi-siamo-section {
    padding: 50px 20px;
    background-color: #F5F5F5;
    text-align: center;
}

.chi-siamo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.chi-siamo-title {
    font-size: 32px;
    color: #172E44;
    margin-bottom: 20px;
}

.chi-siamo-text {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    text-align: justify;
}

/* Stile per schermi fino a 768px */
@media only screen and (max-width: 768px) {
    .chi-siamo-section {
        padding: 40px 15px;
    }

    .chi-siamo-title {
        font-size: 28px;
    }

    .chi-siamo-text {
        font-size: 16px;
        text-align: justify;
    }
}

/* Stile per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .chi-siamo-section {
        padding: 30px 10px;
    }

    .chi-siamo-title {
        font-size: 24px;
    }

    .chi-siamo-text {
        font-size: 14px;
        line-height: 1.5;
        text-align: justify;
    }
}



/* Sezione Camere */
.camere-section {
    padding: 50px 20px;
    background-color: #ffffff;
    text-align: center;
}

.camere-title {
    font-size: 32px;
    color: #172E44;
    margin-bottom: 40px;
}

.camere-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* Container for each camera card */
.camera {
    background-color: #F9F9F9;
    border-radius: 10px;
    overflow: hidden;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}



.camera:active .room-img {
    transform: scale(1.05); /* Effetto di zoom quando si tocca l'immagine */
}


/* Ensure images are fully contained within their card */
.camera img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures images stay within the card and maintain aspect ratio */
}

.camera-name {
    font-size: 24px;
    margin-top: 15px;
    color: #172E44;
}

.camera-description {
    font-size: 18px;
    color: #2b2b2bc9;
    text-align: center;
    margin: 10px 10px 10px 10px; 
}


/* Stile per schermi fino a 768px */
@media only screen and (max-width: 1366px) {
    .camere-section {
        padding: 40px 15px;
    }

    .camere-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .camere-container {
        gap: 20px;
    }

    .camera-name {
        font-size: 20px;
    }

    .camera-description {
        font-size: 17px;
        padding: 8px 15px;
    }

    .icon-overlay {
        position: relative;
        bottom: 8%;
        left: -45%;
        z-index: 10;
        color: white;
    }
}



/* Stile per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .camere-section {
        padding: 30px 10px;
    }

    .camere-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .camera {
        max-width: 100%;
    }

    .camera-name {
        font-size: 18px;
    }

    .camera-description {
        font-size: 14px;
        padding: 8px 10px;
    }

    .icon-overlay {
        position: relative;
        bottom: 8%;
        left: -45%;
        z-index: 10;
        color: white;
    }
}


/* Servizi offerti nella card */
.card-services {
    list-style: none;
    padding: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Ridotto lo spazio tra i servizi */
    font-size: 14px;
    color: #000000;
    
  }
  
  .card-services li {
    display: flex;
    align-items: center;
  }
  
  .card-services span {
    margin-right: 5px;
    font-size: 20px;
    color: #172E44; /* Colore blu per le icone dei servizi */
  }
  
  /* Recensione nella card */
  .card-review {
    margin-top: 10px;
    font-style: italic;
    color: #000000;
    font-size: 14px;
  }

  /* Recensione nella card */
.card-review {
    margin-top: 10px;
    font-style: italic;
    color: #999;
    font-size: 14px;
  }

  /* Sezione Luoghi di Interesse */
.luoghi-interesse-section {
    padding: 50px 20px;
    background-color: #eaeaea;
    text-align: center;
}

.luoghi-interesse-title {
    font-size: 32px;
    color: #172E44;
    margin-bottom: 40px;
}

.luoghi-interesse-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.luogo {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.luogo:hover {
    transform: scale(1.05);
}

.luogo-img {
    width: 100%;
    height: auto;
}

.luogo-name {
    font-size: 24px;
    margin-top: 15px;
    color: #172E44;
}

.luogo-description {
    font-size: 16px;
    padding: 10px 20px;
    color: #555;
    text-align: justify;
}

/* Stile per schermi fino a 768px */
@media only screen and (max-width: 768px) {
    .luoghi-interesse-section {
        padding: 40px 15px;
    }

    .luoghi-interesse-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .luoghi-interesse-container {
        gap: 20px;
    }

    .luogo-name {
        font-size: 20px;
    }

    .luogo-description {
        font-size: 14px;
        padding: 8px 15px;
    }
}

/* Stile per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .luoghi-interesse-section {
        padding: 30px 10px;
    }

    .luoghi-interesse-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .luogo {
        max-width: 100%;
    }

    .luogo-name {
        font-size: 18px;
    }

    .luogo-description {
        font-size: 14px;
        padding: 8px 10px;
    }
}

/* Sezione Luoghi di Interesse */
.luoghi-interesse-section {
    padding: 50px 20px;
    background-color: #172E44; /* Sfondo scuro */
    text-align: center;
    color: #fff;
}

.section-title {
    font-size: 48px; /* Ridotto per schermi più piccoli */
    color: #fff;
    margin-bottom: 20px;
}

/* Lista dei luoghi */
.places-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Disposizione su più righe */
    gap: 20px;
    justify-content: center;
    font-size: 24px;
}

.places-list li {
    margin: 0 15px;
}

.places-list a {
    color: #00C6FF; /* Colore del link */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.places-list a:hover {
    color: #fdfdfd; /* Cambia colore al passaggio del mouse */
}

/* Media query per schermi fino a 768px */
@media only screen and (max-width: 768px) {
    .section-title {
        font-size: 36px; /* Riduce la dimensione del titolo */
    }

    .places-list {
        gap: 10px;
        font-size: 20px; /* Riduce la dimensione del font */
    }

    .places-list li {
        margin: 0 10px;
    }
}

/* Media query per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .section-title {
        font-size: 28px; /* Titolo più piccolo per smartphone */
    }

    .places-list {
        gap: 5px;
        font-size: 18px;
    }

    .places-list li {
        margin: 0 5px;
    }
}

/* Sezione Luoghi di Interesse */
.luoghi-interesse-section {
    padding: 50px 20px;
    background-color: #172E44; /* Sfondo scuro */
    text-align: center;
    color: #fff;
}

.section-title {
    font-size: 48px; /* Font grande per il titolo */
    color: #fff;
    margin-bottom: 20px;
}

/* Lista dei luoghi */
.places-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    font-size: 24px;
}

.places-list li {
    margin: 0 15px;
}

.places-list a {
    color: #00C6FF; /* Colore del link */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.places-list a:hover {
    color: #fdfdfd; /* Cambia colore al passaggio del mouse */
}

/* Media query per schermi fino a 768px */
@media only screen and (max-width: 768px) {
    .section-title {
        font-size: 36px; /* Font ridotto per schermi medi */
    }

    .places-list {
        gap: 10px;
        font-size: 20px;
    }

    .places-list li {
        margin: 0 10px;
    }
}

/* Media query per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .section-title {
        font-size: 28px; /* Font ridotto per smartphone */
    }

    .places-list {
        gap: 5px;
        font-size: 18px;
    }

    .places-list li {
        margin: 0 5px;
    }
}

/* Sezione Mappa */
.mappa-section {
    padding: 50px 20px;
    background-color: #f4f4f4;
    text-align: center;
}

.mappa-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 450px;
}

.mappa-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.section-title {
    font-size: 36px;
    color: #172E44;
    margin-bottom: 20px;
}

/* Media query per schermi fino a 768px */
@media only screen and (max-width: 768px) {
    .mappa-section {
        padding: 40px 15px;
    }

    .mappa-container {
        height: 350px; /* Riduciamo l'altezza per schermi più piccoli */
    }

    .section-title {
        font-size: 28px; /* Titolo ridotto */
    }
}

/* Media query per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .mappa-section {
        padding: 30px 10px;
    }

    .mappa-container {
        height: 300px; /* Altezza ridotta ulteriormente per schermi molto piccoli */
    }

    .section-title {
        font-size: 24px; /* Titolo più piccolo per smartphone */
    }
}

/* Sezione Bar */
.bar-section {
    padding: 50px 20px;
    background-color: #f4f4f4;
    text-align: center;
}

.bar-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.bar-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 500px;
}

.bar-description {
    max-width: 600px;
    text-align: justify;
    font-size: 18px;
    color: #555;
}

.section-title {
    font-size: 36px;
    color: #3f3f3f;
    margin-bottom: 20px;
}

/* Media query per schermi fino a 768px */
@media only screen and (max-width: 768px) {
    .bar-section {
        padding: 40px 15px;
    }

    .bar-container {
        flex-direction: column;
        gap: 20px; /* Spazio ridotto tra l'immagine e il testo */
    }

    .section-title {
        font-size: 28px;
    }

    .bar-description {
        font-size: 16px;
        padding: 0 10px;
    }
}

/* Media query per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .bar-section {
        padding: 30px 10px;
    }

    .bar-container {
        flex-direction: column;
        gap: 15px;
    }

    .section-title {
        font-size: 24px;
    }

    .bar-description {
        font-size: 14px;
        padding: 0 5px;
    }
}

/* Sezione Video del Bar */
.video-bar-section {
    padding: 50px 20px;
    background-color: #ffffff;
    text-align: center;
}

.video-container {
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
}

.video-bar {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Media query per schermi fino a 768px */
@media only screen and (max-width: 768px) {
    .video-bar-section {
        padding: 40px 15px;
    }

    .video-bar {
        width: 100%;
        height: auto; /* Manteniamo l'aspetto responsive */
    }
}

/* Media query per schermi molto piccoli fino a 375px */
@media only screen and (max-width: 375px) {
    .video-bar-section {
        padding: 30px 10px;
    }

    .video-bar {
        width: 100%;
        height: auto; /* Responsive per schermi piccoli */
    }
}



/* Footer Section */
.footer-section {
    background-color: #172E44;
    padding: 20px;
    color: #fff;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-column h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.footer-column p {
    margin: 5px 0;
    font-size: 14px;
    color: #ccc;
}

.footer-column img {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 8px;
}

.booking-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.booking-links a img {
    width: 30px; /* Dimensione delle icone delle piattaforme di prenotazione */
    height: auto;
}

/* Stile per layout mobile */
@media (min-width: 768px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .footer-column {
        flex: 1;
    }
}


/* Sezione Galleria Fotografica */
.galleria-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.galleria-section .section-title {
    font-size: 36px;
    margin-bottom: 20px;
}

.galleria-section .section-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

/* Griglia per la galleria fotografica */
.galleria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* Stile per le immagini */
.galleria-grid img {
    width: 100%;
    height: 200px; /* Altezza fissa per mantenere un aspetto uniforme */
    object-fit: cover; /* Mantiene le proporzioni e riempie l'area */
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.galleria-grid img:hover {
    transform: scale(1.05); /* Effetto zoom al passaggio del mouse */
}

/* Stile responsivo */
@media (max-width: 768px) {
    .galleria-grid {
        grid-template-columns: repeat(2, 1fr); /* Due colonne sui dispositivi mobili */
    }

    .galleria-grid img {
        height: 150px; /* Riduce l'altezza delle immagini sui dispositivi mobili */
    }
}

/* Stile per l'overlay del popup */
.popup-overlay {
    display: none; /* Nascosto di default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo semi-trasparente */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* Contenuto del popup */
.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    width: 90%;
    max-height: 80%;
    overflow-y: auto; /* Permette di scorrere in caso di contenuto lungo */
    text-align: center;
    position: relative;
}

/* Pulsante di chiusura del popup */
.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

/* Titoli dei popup */
.popup-content h2 {
    margin-bottom: 20px;
}

/* Stile per il testo del popup */
.popup-content p {
    text-align: justify;
}

/* Scroll per schermi piccoli */
@media (max-width: 768px) {
    .popup-content {
        max-width: 90%;
        max-height: 90%;
    }
}



/* Slider overlay */
.slider-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    background-size: cover;
}

/* Slider image */
.slider-image {
    max-width: 80%;
    max-height: 80%;
    background-size: cover;
}

/* Close button */
.close-slider {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

/* Next & prev buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    color: white;
    font-size: 50px;
    padding: 16px;
    margin-top: -22px;
    transition: 0.6s ease;
    user-select: none;
}

/* Positioning next/prev buttons */
.prev {
    left: 0;
}

.next {
    right: 0;
}

/* Hover effect on buttons */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Stile per il footer */
.footer {
    background-color: #172E44;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-links li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.footer-links li a:hover {
    text-decoration: underline;
}

@media (min-width: 1366px) {
    .footer {
        font-size: 16px;
        padding: 25px;
    }

    .footer-links {
        gap: 30px;
    }

    .footer-links li a {
        font-size: 16px;
    }
}

@media (max-width: 1366px) and (min-width: 768px) {
    .footer {
        font-size: 14px;
        padding: 20px;
    }

    .footer-links {
        flex-direction: row;
        gap: 20px;
    }

    .footer-links li a {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .footer {
        font-size: 12px;
        padding: 15px;
    }

    .footer-links {
        flex-direction: column;
        gap: 10px;
    }

    .footer-links li a {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .footer {
        font-size: 10px;
        padding: 10px;
    }

    .footer-links {
        gap: 8px;
    }

    .footer-links li a {
        font-size: 10px;
    }
}



.design a {

    color: white;
    
}

#footer img {

    text-align: left;

}

.footer-column a {
    color: white;
}


#audio-toggle-btn {
    font-size: 18px;
    color: white; /* Puoi cambiare colore in base allo stile del menu */
    margin-left: 40%;
    list-style: none;
}

#audio-toggle-btn:hover {
    color: #ffcc00; /* Cambia colore al passaggio del mouse */
}

/* Stile per il contenitore della scritta e del pulsante */
.prenota-container {
    text-align: center;
    padding: 20px 0;
    background-color: #f5f5f5; /* Colore di sfondo leggero */
    margin-top: -50px; /* Aggiusta il margine superiore in base al layout */
}

/* Stile per il titolo sopra il pulsante */
.prenota-title {
    font-size: 28px;
    color: #172E44;
    font-family: 'Elegante', serif;
    margin-bottom: 10px;
}

/* Stile per la descrizione sopra il pulsante */
.prenota-description {
    font-size: 46px;
    color: #555;
    margin-bottom: 20px;
}

/* Stile per il pulsante */
.prenota-btn {
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.prenota-btn:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

@media only screen and (max-width: 768px) {
    .prenota-title {
        font-size: 24px;
    }

    .prenota-description {
        font-size: 14px;
    }

    .prenota-btn {
        font-size: 18px;
        padding: 10px 20px;
    }
}

#slider-image {
    transition: opacity 0.3s ease-in-out; /* Transizione fluida dell'opacità */
}


/*chat sito*/
.circle-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 100;
  }
  
  .menu-btn {
    width: 60px;
    height: 60px;
    background-color: #007BFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    font-size: 24px;
  }
  
  .social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .social-icons.active {
    opacity: 1;
    visibility: visible;
  }
  
  .social-icons li {
    position: absolute;  /* Aggiungiamo il posizionamento assoluto */
    bottom: 0; /* Partono tutti dal basso */
    left: 50%;
    transform: translateX(-50%) translateY(0); /* Imposta la posizione iniziale */
    transition: transform 0.3s ease-in-out;
  }
  
  /* Trasforma le icone quando il menu è aperto */
  .social-icons.active li:nth-child(1) {
    transform: translateX(-50%) translateY(-80px);
  }
  
  .social-icons.active li:nth-child(2) {
    transform: translateX(-50%) translateY(-130px);
  }
  
  .social-icons.active li:nth-child(3) {
    transform: translateX(-50%) translateY(-180px);
  }
  
  .social-icons.active li:nth-child(4) {
    transform: translateX(-50%) translateY(-230px);
  }

  .social-icons.active li:nth-child(5) {
    transform: translateX(-50%) translateY(-280px);
  }
  
  .social-icons li a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  /* Colori specifici per ciascun social */
  .social-icons li a.facebook {
    background-color: #3b5998; /* Colore blu per Facebook */
  }
  
  .social-icons li a.twitter {
    background-color: #1da1f2; /* Colore blu chiaro per Twitter */
  }
  
  .social-icons li a.instagram {
    background-color: #e1306c; /* Colore rosa/viola per Instagram */
  }
  
  .social-icons li a.linkedin {
    background-color: #0077b5; /* Colore blu scuro per LinkedIn */
  }
  
  .social-icons li a.whatsapp {
    background-color: #25D366; /* Colore verde per WhatsApp */
  }
  
  /* Effetto hover per tutti i social */
  .social-icons li a:hover {
    filter: brightness(0.8); /* Leggero scurimento al passaggio del mouse */
  }
  

  @media only screen and (max-width: 1366px) {
    /* Centra la sezione contatti */
    .footer-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra tutti gli elementi del footer */
        text-align: center; /* Centra il testo */
    }

    .footer-column {
        flex: 0 0 auto; /* Disattiva la distribuzione automatica dello spazio */
        width: 100%; /* Facoltativo, per fare in modo che ogni colonna occupi tutta la larghezza */
    }
    
    .footer-column h4 {
        text-align: center; /* Centra il titolo dei contatti */
    }

    .footer-column p, .footer-column a {
        margin: 0 auto; /* Centra i contenuti */
    }
}

    .footer-column img {
        text-align: center;
    }


    @media only screen and (max-width: 1366px) {
        /* Contenitore dei pulsanti */
        .booking-links {
            display: flex; /* Layout a riga */
            justify-content: center; /* Centra le icone orizzontalmente */
            align-items: center; /* Centra verticalmente */
            gap: 20px; /* Spaziatura costante tra le icone */
            margin: 0 auto; /* Mantiene il contenitore centrato */
            width: fit-content; /* Larghezza basata sul contenuto */
        }
    
        .booking-links a img {
            width: 40px; /* Dimensione uniforme per tutte le icone */
            height: auto;
        }
    }
    
    



/*citazione video*/

.video-source {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
    z-index: 2;
  }
  
  .video-source:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: gray;
  }