/* Gestione della riga unica di box */
.sbox-10-wrapper .row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 -15px; /* Distanza tra le colonne */
}

/* Stile uniforme per tutte le box */
.sbox-10 {
    flex-direction: column;
    justify-content: space-between;
    height: 650px; /* Altezza fissa per tutte le box */
    margin-bottom: 30px; /* Distanza tra le box */
    min-height: 500px; /* Altezza minima per tutte le box */
    overflow: hidden; /* Nasconde eventuali contenuti che eccedono */
}

/* Testo nella box */
.sbox-10-txt {
    height: 200px; /* Altezza fissa per il testo */
    margin-bottom: 30px;
    flex-grow: 1; /* Fa in modo che il testo occupi il massimo spazio disponibile */
    text-align: center; /* Centra il testo */
    margin-bottom: 60px;
    padding-bottom: 30px; /* Aggiungi un po' di spazio per il bottone */
}

/* Bottone uniforme */
.sbox-10 .btn {
    padding: 12px 25px;
    margin-top: 20px; /* Spazio sopra al bottone */
    text-transform: uppercase;
    font-weight: 600;
    background-color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block; /* Assicurati che il bottone sia visibile */
    width: 100%; /* Il bottone occuperà tutta la larghezza disponibile della box */
    max-width: 200px; /* Limita la larghezza massima del bottone */
    text-align: center; /* Centra il testo nel bottone */
    margin-bottom: 20px; /* Distanza tra il bottone e il testo */
}

.sbox-10 .btn:hover {
    background-color: #4e4a4a;
    color: #fff;
}
/* Immagini uniformi */
.sbox-10-img {
    width: 100%;
    overflow: hidden;
    position: relative;
	width: 300px; 
	height: 300px; 
	margin: 0 auto; 
	border-radius: 50%; 
	

}

/* Responsività per dispositivi mobili */
@media (max-width: 768px) {
    .sbox-10 {
        height: auto; /* Rende la box più flessibile su schermi più piccoli */
        margin-bottom: 20px; /* Riduce lo spazio tra le box */
    }
    .sbox-10-img .img-fluid {
        height: 150px; /* Riduce l'altezza dell'immagine su schermi piccoli */
    }
    .sbox-10-txt {
        height: 180px; /* Riduce l'altezza del testo su schermi più piccoli */
		margin-bottom: 120px;
    }
    .sbox-10 .btn {
        width: 100%; /* Il bottone prende tutta la larghezza disponibile anche su mobile */
		margin-top: 70px; /* Spazio sopra al bottone */
   	 	margin-bottom: 50px; /* Distanza tra il bottone e il testo */
	}
    }
    
        /* Modalità chiara */
        body.light-mode {
            background-color: #fff;
            color: #4e4a4a;
            transition: background-color 0.3s, color 0.3s; /* Aggiungi transizione per il cambio colore */
        }
		  /* Quando la modalità è scura, cambia il colore di sfondo per .offer-deal.active */
		  body.dark-mode .offer-deal.active {
        background: #d9bf77; /* Imposta il colore di sfondo a #d9bf77 */
   		}

		/* Quando la modalità è scura, cambia anche il colore di sfondo per .myaccordion */
		body.dark-mode .myaccordion {
			background: #d9bf77  !important; /* Imposta il colore di sfondo a #d9bf77 */
		}

		/* Puoi aggiungere altre regole per mantenere la transizione fluida */
		.offer-deal.active, .myaccordion {
			transition: background 0.3s ease; /* Transizione per il cambiamento del colore di sfondo */
		}
        .navbar.light-mode {
            background-color: #f8f9fa;
            transition: background-color 0.3s; /* Aggiungi transizione */
        }

        h1, h2, h3, p {
            transition: color 0.3s; /* Aggiungi transizione per i testi */
        }
		body.dark-mode h3, body.dark-mode h5 {
        color: #fff;
		}
		body.dark-mode h2{
			color: #d9bf77;
		}
		body.dark-mode h3.ambiente-unico {
			color: #4e4a4a; /* Imposta il colore a nero */
		}
		body.dark-mode .testimony-section p {
        color: #fff; /* Imposta il colore a bianco */
		}

		/* Puoi anche aggiungere una transizione per il cambio di colore */
		.testimony-section p {
			transition: color 0.3s ease; /* Transizione per il cambiamento del colore */
		}
        /* Modalità scura */
        body.dark-mode {
            background-color: #4e4a4a;
            color: #fff;
            transition: background-color 0.3s, color 0.3s; /* Aggiungi transizione per il cambio colore */
        }

        .navbar.dark-mode {
            background-color: #4e4a4a;
            transition: background-color 0.3s; /* Aggiungi transizione */
        }
		  /* Quando la modalità è scura, cambia il colore di sfondo per .ftco-navbar-light.scrolled */
		  body.dark-mode .ftco-navbar-light.scrolled {
        background: #4e4a4a !important; /* Imposta il colore di sfondo a #4e4a4a */
		}

		/* Puoi aggiungere una transizione per rendere il cambiamento più fluido */
		.ftco-navbar-light.scrolled {
			transition: background 0.3s ease; /* Transizione per il cambiamento del colore di sfondo */
		}
        /* Cambiare il colore dei titoli */
        .navbar-dark-mode h1, .navbar-dark-mode h2, .navbar-dark-mode h3 {
            color: #fff;
        }
		 /* Quando la modalità è scura, i link di navigazione diventano bianchi */
		 body.dark-mode .ftco-navbar-light.scrolled .nav-link {
        color: #fff !important; /* Imposta il colore del testo a bianco */
    }

    /* Puoi aggiungere una transizione per il cambiamento del colore */
    .ftco-navbar-light.scrolled .nav-link {
        transition: color 0.3s ease; /* Transizione per il cambiamento del colore del testo */
    }
        /* Pulsante del cambio tema */
        #toggle-theme {

            border: none;
            cursor: pointer;
            color: #fff;
            transition: transform 0.3s ease; /* Aggiungi effetto di transizione */
        }
		    /* Aggiungi questa classe per mantenere il testo del paragrafo nero */
			.offer-deal .custom-paragraph {
        color: #4e4a4a; /* Imposta il colore del testo del paragrafo a nero */
    }
        #toggle-theme:hover {
            transform: scale(1.1); /* Effetto hover sul pulsante */
        }
		 /* Imposta la larghezza dell'icona a 30px per renderla più piccola */
		 #theme-icon {
        width: 50px;  /* Imposta la larghezza a 30px */
       height: auto;
    }
	/* Modalità scura - Colore per h2 nel footer */
	body.dark-mode .ftco-footer .ftco-footer-widget h2 {
		color: #d9bf77;  /* Imposta il colore desiderato */
	}

	/* Modalità scura - Colore per h2 nel heading */
	body.dark-mode .ftco-footer .ftco-heading-2 {
		color: #d9bf77;  /* Imposta il colore desiderato */
	}
	/* Modalità scura - Colore per i link nella sezione Link Rapidi */
body.dark-mode .ftco-footer .ftco-footer-widget ul li a {
    color: #fff;  /* Imposta il colore bianco per i link in modalità scura */
}

/* Modalità scura - Colore per il link Mistralabagency */
body.dark-mode .ftco-footer .ftco-footer-widget a {
    color: #d9bf77;  /* Imposta il colore #d9bf77 per il link Mistralabagency */
}
/* Modalità scura - Colore per il testo e i link nella sezione "Hai delle domande?" */
body.dark-mode .ftco-footer .ftco-footer-widget ul li a,
body.dark-mode .ftco-footer .ftco-footer-widget ul li .text {
    color: #fff;  /* Imposta il colore bianco per il testo e i link in modalità scura */
}

/* Modalità scura - Colore per l'icona */
body.dark-mode .ftco-footer .ftco-footer-widget ul li .icon {
    color: #fff;  /* Imposta il colore bianco per le icone */
}
/* Modalità scura - Colore per il link nella sezione copyright */
body.dark-mode .ftco-footer p a {
    color: #d9bf77;  /* Imposta il colore #d9bf77 per il link in modalità scura */
}

/* Modalità scura - Immagine del logo quando la modalità scura è attiva */
body.dark-mode .ftco-footer .ftco-navbar-light img.logo-image {
    content: url('images/logobianco.png');  /* Carica il logo bianco in modalità scura */
}
/* Rimuovi il bordo dal bottone quando è selezionato o ha il focus */
#toggle-theme:focus {
    outline: none;  /* Rimuove il bordo di focus */
    box-shadow: none;  /* Rimuove l'ombra del focus */
}
/* Modalità scura - Cambia l'immagine del logo */
body.dark-mode .logo-image {
    content: url('images/logobianco.png');  /* Cambia l'immagine del logo quando è in modalità scura */
}
body.dark-mode .ftco-navbar .ftco-navbar-light.scrolled .navbar-toggler {
		color: #fff !important;  /* Imposta il colore del navbar-toggler a nero */
	}
/* Modalità scura - Cambia il colore dei link di navigazion	 e solo su mobile */
@media (max-width: 767px) {
    body.dark-mode .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
        color: #fff;  /* Imposta il colore del testo a bianco solo su mobile */
    }
	/* Modalità scura - Cambia il colore del testo dei link nella navbar */
	body.dark-mode .navbar-nav .nav-item .nav-link {
    color: #d9bf77;  /* Imposta il colore del testo a #d9bf77 */
	
	}
	/* Modalità scura - Cambia il colore del navbar-toggler a nero */
	body.dark-mode .ftco-navbar-light.scrolled .navbar-toggler {
		color: #fff;  /* Imposta il colore del navbar-toggler a nero */
	}
	body.dark-mode .ftco-navbar-light.scrolled .navbar-toggler {
		color: #fff !important;
	}	

}
	/* Modalità chiara - Background chiaro per la navigazione */
body.light-mode .tra-menu .wsmainfull.scroll,
body.light-mode .white-menu .wsmainfull.scroll,
body.light-mode .dark-menu.dark-scroll .wsmainfull.scroll {
    background-color: #5F082E !important; /* Colore di sfondo chiaro */
    padding: 2px 0;
}

/* Modalità scura - Background scuro per la navigazione */
body.dark-mode .tra-menu .wsmainfull.scroll,
body.dark-mode .white-menu .wsmainfull.scroll,
body.dark-mode .dark-menu.dark-scroll .wsmainfull.scroll {
    background-color: #5F082E !important; /* Colore di sfondo scuro */
    padding: 2px 0;
}

/* Modalità chiara - Colore icona social */
body.light-mode .scroll .white-color.header-socials i {
    color: #8e7e51 !important; /* Colore dell'icona per la modalità chiara */
}

/* Modalità scura - Colore icona social */
body.dark-mode .scroll .white-color.header-socials i {
    color: #fff !important; /* Colore dell'icona per la modalità scura */
}

/* Modalità scura - Colore del testo dei link nel menu di navigazione */
body.dark-mode .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li a {
    color: #fff; /* Colore del testo per la modalità scura */
}


/* Modalità chiara - Colore del testo dei link nella navbar per tema chiaro */
body.light-mode .navbar-dark .wsmenu > .wsmenu-list > li > a {
    color: #465777; /* Colore del testo per il tema chiaro */
}

/* Modalità scura - Colore del testo dei link nella navbar per tema scuro */
body.dark-mode .navbar-dark .wsmenu > .wsmenu-list > li > a {
    color: #fff; /* Colore del testo per il tema scuro */
}

/* Modalità chiara - Colore del testo dei link nella navbar per tema chiaro */
body.light-mode .navbar-light .wsmenu > .wsmenu-list > li > a {
    color: #fff; /* Colore del testo per il tema chiaro */
}

/* Modalità scura - Colore del testo dei link nella navbar per tema scuro */
body.dark-mode .navbar-light .wsmenu > .wsmenu-list > li > a {
    color: #465777; /* Colore del testo per il tema scuro */
}

/* Modalità chiara (Light Mode) */
body.light-mode {
    background-color: #fff;
    color: #4e4a4a;
}

/* Modalità scura (Dark Mode) */
body.dark-mode {
    background-color: #4e4a4a;
    color: #fff;
}

/* Menu principale - Colore sfondo e testo per modalità chiara */
body.light-mode .wsmainfull
 {
    background-color: #4e4a4a; /* Sfondo chiaro */
    color: #4e4a4a; /* Colore testo scuro */
}

/* Menu principale - Colore sfondo e testo per modalità scura */
body.dark-mode .wsmainfull,
body.dark-mode .wsmainfull .wsmenu > .wsmenu-list > li a,
body.dark-mode .wsmenu .wsmenu-list > li a {
    color: #fff; /* Colore testo bianco */
}

/* Colore dei link e testo all'interno dei dropdowns in modalità chiara */
body.light-mode .wsmenu .wsmenu-list > li > a {
    color: #4e4a4a; /* Testo scuro */
}

body.light-mode .wsmenu .wsmenu-list > li > a:hover,
body.light-mode .wsmenu .sub-menu > li > a:hover {
    color: #d9bf77; /* Colore hover per il testo */
}

/* Colore dei link e testo all'interno dei dropdowns in modalità scura */
body.dark-mode .wsmenu .wsmenu-list > li > a {
    color: #fff; /* Testo bianco */
}

body.dark-mode .wsmenu .wsmenu-list > li > a:hover,
body.dark-mode .wsmenu .sub-menu > li > a:hover {
    color: #d9bf77; /* Colore hover per il testo */
}

/* Colore del menu mobile in modalità chiara */
@media screen and (max-width: 767px) {
    body.light-mode .wsmobileheader {
        background-color: #4e4a4a; /* Sfondo bianco per il menu mobile */
    }

    body.light-mode .wsmobileheader .wsmenu > .wsmenu-list > li > a {
        color: #4e4a4a !important; /* Testo scuro per il menu mobile */
    }
	body.light-mode .navbar-light .wsmenu > .wsmenu-list > li > a {
		background-color: #fff;
		color: #4e4a4a;
	}
}

/* Colore del menu mobile in modalità scura */
@media screen and (max-width: 767px) {
    body.dark-mode .wsmobileheader {
        background-color: #4e4a4a; /* Sfondo scuro per il menu mobile */
    }

	body.dark-mode .tra-menu .wsmenu > .wsmenu-list > li > a {
		color: #fff;
		background-color: #4e4a4a;
	}
    body.dark-mode .wsmobileheader .wsmenu > .wsmenu-list > li > a {
        color: #fff; /* Testo bianco per il menu mobile */
    }
	body.dark-mode .wsmenu .wsmenu-list > li a {
		color: #4e4a4a;
	}
	.tra-menu .wsmobileheader, .white-menu .wsmobileheader {
         background-color: #4e4a4a; 
    }
	body.dark-mode .wsmenu > .wsmenu-list {
		background-color:#4e4a4a ;
	}
}
/* Colore del menu mobile/tablet in modalità chiara */
@media screen and (max-width: 991px) {
    body.light-mode .wsmobileheader {
        background-color: #4e4a4a;
    }

    body.light-mode .wsmobileheader .wsmenu > .wsmenu-list > li > a {
        color: #4e4a4a !important;
    }

    body.light-mode .navbar-light .wsmenu > .wsmenu-list > li > a {
        background-color: #fff;
        color: #4e4a4a;
    }
}

/* Colore del menu mobile/tablet in modalità scura */
@media screen and (max-width: 991px) {
    body.dark-mode .wsmobileheader {
        background-color: #5F082E;
    }

    body.dark-mode .tra-menu .wsmenu > .wsmenu-list > li > a {
        color: #fff;
        background-color: #4e4a4a;
    }

    body.dark-mode .wsmobileheader .wsmenu > .wsmenu-list > li > a {
        color: #fff;
    }

    body.dark-mode .wsmenu .wsmenu-list > li a {
        color: #4e4a4a;
    }

    .tra-menu .wsmobileheader, .white-menu .wsmobileheader {
        background-color: #4e4a4a;
    }

    body.dark-mode .wsmenu > .wsmenu-list {
        background-color: #4e4a4a;
    }
}

/* Modalità scura per i testi nelle sezioni */
body.dark-mode li {
    color: #fff !important; /* Testo bianco */
}

body.dark-mode p,
body.dark-mode h5,
body.dark-mode h5

 { 
    color: #fff; /* Testo scuro */
}
body.dark-mode h6

 { 
    color: #d9bf77; /* Testo scuro */
}
body.light-mode li { 
    color: #4e4a4a; /* Testo scuro */
}

.body.dark-mode .txt-color-05{
	color: #000;
}
.light-only {
    display: block;
}
.dark-only {
    display: none;
}

body.dark-mode .light-only {
    display: none;
}
body.dark-mode .dark-only {
    display: block;
}


body.dark-mode .masonry-filter button {
	color:#fff; 
}
/* Quando la modalità scura è attiva, cambia il colore dei link in "Userful Links" */
body.dark-mode .footer-links ul li a {
    color: #fff !important;
}
/* Link "Mistralabagency" in modalità scura */
body.dark-mode .footer-copyright a {
    color: #d9bf77 !important;
}

/* Link dei social (Facebook, Twitter, Instagram, Yelp) in modalità scura */
body.dark-mode .bottom-footer-list li a {
    color: #d9bf77 !important;
}

/* Opzionale: colore delle icone dei social */
body.dark-mode .bottom-footer-list li a i {
    color: #d9bf77 !important;
}

/* Forza testo nero e sfondo bianco nella lista paesi */
body.light-mode .iti__country-list {
  background-color: #fff !important;
  color: #000 !important;
}

/* Forza testo nero dentro ciascun elemento della lista */
body.light-mode .iti__country {
  color: #000 !important;
}

body.dark-mode .iti__country-list {
    background-color: #fff !important;
    color: #000 !important;
  }
  
  body.dark-mode .iti__country {
    color: #000 !important;
  }
  
  body.dark-mode .iti__selected-dial-code {
    color: #000 !important;
  }