.navbar-custom {

  background: #ffc107;

    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9); /* Ombra leggera */

    

}















/* Imposta il colore del testo predefinito nel menu principale */

.navbar-custom .nav-link {

  color: #000; /* Testo nero nel menu principale */

}





.navbar-custom .dropdown-menu {

  background-color: #007bff; /* Colore blu (Bootstrap primary color) per il dropdown-menu */

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9); /* Ombra leggera */

}



.navbar-custom .dropdown-item {

  color: #fff; /* Testo bianco per i link nel dropdown-menu */

  border-bottom: 1px dashed #cccccc4f; /* Linea grigia tra le voci del menu per nazioni e città */

}



/* Cambia il colore del testo del dropdown-item quando il link è attivo o selezionato */

.navbar-custom .dropdown-item.active,

.navbar-custom .dropdown-item:focus {

  color: #fff; /* Testo bianco per il link dropdown-item attivo o selezionato */

}



/* Cambia il colore del testo al passaggio del mouse */

.navbar-custom .nav-link:hover {

  color: #000; /* Testo nero al passaggio del mouse */

}



/* Cambia il colore del testo del dropdown-item al passaggio del mouse */

.navbar-custom .dropdown-item:hover {

  color: #000; /* Testo nero al passaggio del mouse */

}



/* Cambia il colore del testo del dropdown-item quando il link è attivo o selezionato */

.navbar-custom .dropdown-item.active,

.navbar-custom .dropdown-item:focus {

  color: #000; /* Testo nero per il link dropdown-item attivo o selezionato */

}











/* Aggiungi un bordo inferiore grigio alle voci del menu */

.navbar-custom .nav-link {

  border-bottom: 3px solid #cccccc4f; /* Linea grigia tra le voci del menu */

}



/* Rimuovi il bordo inferiore dall'ultima voce del menu per evitare una linea in eccesso */

.navbar-custom .nav-link:last-child {

  border-bottom: none;

}



/* Cambia il colore del bordo inferiore al passaggio del mouse */

.navbar-custom .nav-link:hover {

  border-bottom-color: #000; /* Colore blu (Bootstrap primary color) al passaggio del mouse */

}

























.navbar-nav .dropdown-submenu.show {

  position: static;

}



.navbar-nav .dropdown-submenu:hover > .dropdown-menu {

  display: block;

}



@media (min-width: 992px) {

  .navbar-nav .dropdown-submenu {

    position: relative;

  }



  .navbar-nav .dropdown-submenu:hover > .dropdown-menu {

    display: block;

    position: absolute;

    top: 0;

    left: 100%;

  }



  .navbar-nav .dropdown-menu.destinazioni-submenu {

    top: 0;

    left: 100%;

    margin-top: 0;

  }

}



/* Stile per la larghezza del menu principale Destinazioni */

.destinazioni-menu {

  width: 250px;

}



/* Stile per la larghezza dei sottomenu Destinazioni */

.destinazioni-submenu {

  width: 100%;

}



/* Stile per la visualizzazione a schermo intero su schermi piccoli */

@media (max-width: 767px) {

  .destinazioni-menu {

    width: 100%; /* Larghezza a schermo intero su schermi piccoli */

  }

}



















.footer-custom {

    background: #ffc107;

    

    margin-left: 0;

    margin-right: 0;

    padding-left: 0;

    padding-right: 0;

}





.vertical-line {

    position: absolute;

    height: 100%;

    width: 3px;

    background-color: #000; /* Colore della linea, puoi personalizzarlo */

    top: 0;

    right: 0;

}













.rounded-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px; /* o qualsiasi altra percentuale desiderata */

  }





  /* Overlay Immagini delle Card Offerte */

.image-container-destinazioni {

    position: relative;

    height: 300px; /* Imposta l'altezza desiderata */

    overflow: hidden; /* Nasconde eventuali contenuti in eccesso oltre l'altezza specificata */

}



.image-container-destinazioni img {

    width: 100%; /* Assicura che l'immagine si adatti al 100% della larghezza del contenitore */

    height: auto; /* Consente all'immagine di adattarsi proporzionalmente alla larghezza */

    object-fit: cover; /* Imposta l'opzione di copertura */

    object-position: center bottom; /* Imposta la posizione dell'immagine al centro in orizzontale e in basso in verticale */

}



  

  .overlay-destinazioni {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 0%, rgba(255, 255, 255, 0) 90%);

}



/* Overlay Immagini delle Card Offerte */

.image-container-destinazioni-lista-offerte {

  position: relative;

  height: 74px; /* Imposta l'altezza desiderata */

  overflow: hidden; /* Nasconde eventuali contenuti in eccesso oltre l'altezza specificata */

  border-radius: 10px; /* Arrotonda gli angoli del contenitore */

}



.image-container-destinazioni-lista-offerte img {

  width: 100%; /* Assicura che l'immagine si adatti al 100% della larghezza del contenitore */

  height: auto; /* Consente all'immagine di adattarsi proporzionalmente alla larghezza */

  object-fit: cover; /* Imposta l'opzione di copertura */

  object-position: center bottom;

  border-radius: 10px; /* Arrotonda gli angoli dell'immagine */

}



.testosuimmaginedestinazione {

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Ombra */

  -webkit-text-stroke: 1px white; /* Contorno bianco di 1 pixel */

}



.card-overlay-cosafare {

  position: relative;

  border: 1px solid #ccc; /* Aggiunto un bordo per la visibilità */

  border-radius: 10px; /* Imposta il raggio di arrotondamento degli angoli */

   

}

/* Assicurati che tutte le schede abbiano la stessa altezza */
.card-overlay-offerte {

  position: relative;

  border: 1px solid #ccc; /* Aggiunto un bordo per la visibilità */

  border-radius: 10px; /* Imposta il raggio di arrotondamento degli angoli */
  display: flex;
  flex-direction: column;
  height: 100%;

   

}

/* Assicurati che il contenuto della scheda si espanda in altezza */
.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}




.logo-overlay-cosafare {

  position: absolute;

  top: 0;

  left: 0;

  width: 150px;

  margin: 5px; /* Aggiunto un margine per evitare sovrapposizioni dirette */

  z-index: 1; /* Assicura che il logo sia sopra l'immagine principale */

}



.logo-overlay-cosafare-offerte {

  position: absolute;

  top: 0;

  left: 0;

  width: 35px;

  margin: 5px; /* Aggiunto un margine per evitare sovrapposizioni dirette */

  z-index: 1; /* Assicura che il logo sia sopra l'immagine principale */

}





.prenotaora-dettagli {

  background: linear-gradient(to bottom, rgb(204, 204, 206), #fff);

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Ombra leggera */

}



.custom-tooltip {

  --bs-tooltip-bg: var(--bd-violet-bg);

  --bs-tooltip-color: var(--bs-white);

}



.data-contenitore-offerte {

  position: absolute;

  top: 10px; /* Modifica la posizione in base alle tue esigenze */

  left: 10px; /* Modifica la posizione in base alle tue esigenze */

  background-color: white;

  width: 70px; /* Imposta la larghezza desiderata */

  height: 70px; /* Imposta l'altezza desiderata */

  padding: 10px;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  line-height: 0.8; /* Imposta l'interlinea */

  border: 1px solid black; /* Aggiungi un bordo nero */

}



.data-giorno-offerte {

  font-size: 32px;

  font-weight: bold; /* Imposta il testo in grassetto */

  margin: 0; /* Rimuovi il margine per centrare verticalmente */

}



.data-mese-offerte {

  margin-top: 5px; /* Regola il margine superiore per separare il giorno e il mese */

  font-weight: bold; /* Imposta il testo in grassetto */

}



.custom-btn-primary-offerte {

  background-color: transparent;

  border: none;

  padding: 0;

}



.custom-btn-primary-offerte i {

  color: #007BFF; /* Imposta il colore desiderato per l'icona */

  font-size: 2em; /* Imposta la dimensione desiderata per l'icona */

}



.tag-image-offerte {

  position: absolute;

  top: 10px; /* Distanza dal bordo superiore */

  right: 10px; /* Distanza dal bordo destro */

  width: 50px; /* Imposta la larghezza desiderata per l'immagine TAG */

  height: auto; /* L'altezza si adatterà proporzionalmente alla larghezza */

}



.fullscreen-video-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 640px; /* Altezza fissa del video */

  overflow: hidden;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aggiungi ombra al video */

}



#fullscreen-video {

  width: 100%;

  height: 100%;

  object-fit: cover; /* Copre completamente il contenitore mantenendo l'aspetto del video */

}



.rounded-form {

  background-color: #ffc107; /* Sfondo bianco traslucido per il form */

  border-radius: 10px;

  position: relative; /* Assicura che il form sia posizionato correttamente sopra il video */

  z-index: 1; /* Alza il form sopra al video */

}



/* INIZIO DEL BLOCCO TESTO LATERALE AL FILTRO DI RICERCA SOPRA AL VIDEO CON EFFETTO MACCHINA DA SCRIVERE */



.testo-info-sx-form-barradiricerca {

  text-align: left;

  margin-top: 70px; /* Aumenta il margine superiore per dare più spazio al testo */

  z-index: 2;

  color: rgba(255, 255, 255, 0.8); /* Imposta il colore del testo con trasparenza */

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Riduci il valore dell'ombra se necessario */

}



.testo-info-sx-form-barradiricerca-stili {

  overflow: hidden;

  white-space: nowrap;

  margin: 0 auto;

}



#typewriter-text {

  overflow: hidden;

  white-space: nowrap;

}



#typewriter-text span {

  display: inline-block;

  overflow: hidden;

  white-space: nowrap;

  width: 0;

}



@keyframes typing {

  to {

    width: 100%;

  }

}



/* FINE DEL BLOCCO TESTO LATERALE AL FILTRO DI RICERCA SOPRA AL VIDEO CON EFFETTO MACCHINA DA SCRIVERE */







.alert {

  z-index: 2; /* Assicura che l'alert sia sopra il video e il form */

}



td.data-cell { /* per impostare la data sottoforma di calendario correttamente in infodestinazione.php */

  position: relative;



}



/* INIZIO BLOCCO PER LE ICONE VIAGGIATORI IN OFFERTE ESCLUSIVE */



.icona-viaggiatori-offerte-esclusive {

  display: flex;

  align-items: center;

  justify-content: flex-end; /* Allinea gli elementi a destra */

}



.icona-piccola {

  font-size: 16px; /* Imposta la dimensione desiderata */

  margin: 0 0px;   /* Aggiungi margine tra le icone se necessario */

}



/* FINE BLOCCO PER LE ICONE VIAGGIATORI IN OFFERTE ESCLUSIVE */





/* Pulsanti per ordinare le offerte nelle due modalita card e lista */

.custom-btn {

  margin: 0;

  padding: 0.1rem 0.1rem; /* Personalizza il padding secondo le tue preferenze */

  text-decoration: none; /* Rimuove il sottolineato predefinito */

  color: #000000; /* Personalizza il colore del testo */

  background-color: transparent; /* Rimuove lo sfondo predefinito */

  border: none; /* Rimuove il bordo predefinito */

  display: inline-block; /* Rende il pulsante un elemento di tipo "inline-block" */



}


/* Logo mobile */
.logo-mobile {
  z-index: 1050; /* Mantiene il logo in primo piano */
  padding-right: 15px; /* Spazio dal bordo destro */
}

/* Nascondi il logo mobile quando il menu è aperto */
.collapse.show + .logo-mobile {
  display: none;
}

.logo-desktop {
  left: 0; /* Allinea il logo a sinistra per dispositivi grandi */
}


/* Limita l'altezza massima del menu a tendina su dispositivi mobili */
@media (max-width: 992px) {
  .dropdown-menu {
    max-height: 300px;  /* Imposta l'altezza massima */
    overflow-y: auto;   /* Abilita lo scroll verticale */
    overflow-x: hidden; /* Impedisce lo scroll orizzontale */
  }
}

/* Se necessario, aggiungi un po' di padding per migliorare l'estetica */
.dropdown-menu {
  padding: 10px;
}

/* Selezione Vista logo Blu attivo */
.icon-active {
  font-weight: bold;
  color: blue;
}

.city-label {
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
}

.data-contenitore-offerte {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px 10px;
  border-radius: 10px;
  color: black;
}

.flag-label img {
  height: 25px;
  border: 1px solid black;
  border-radius: 5px;
}


.icona-piccola {
  font-size: 13px;    /* Icone più piccole */
  margin-left: 1px;   /* Spaziatura ridotta tra le icone */
  color: white;
}

/* Salvadenaio colorato */
.piggy-bank-custom {
  color: black; /* Colore dell'interno */
  font-size: 20px; /* Dimensione personalizzata */
  text-shadow: 0 0 3px #ffc107, 0 0 20px #ffc107 /* Contorno giallo */
}

/* testo apice per il numero di giorni acconto al nome dell'hotel nelle offerte */
.custom-apice {
  font-size: 0.6rem; /* Dimensione del testo più piccola */
  vertical-align: super; /* Allinea il testo come un apice */
  padding: 0.1rem 0.3rem; /* Riduce il padding */
}


/* ingrandisci l'immagine intestazione nelle card delle offerte */
/* Contenitore dell'immagine */
.image-container {
  position: relative;
  height: 150px;
  overflow: hidden; /* Nasconde l'eccesso di immagine */
}

/* Effetto di transizione per l'immagine */
.image-container img {
  transition: transform 0.5s ease; /* Transizione morbida */
}

/* Effetto hover sulla card: ingrandisce e ruota l'immagine */
.card-overlay-offerte:hover .image-container img {
  transform: scale(1.2) rotate(5deg); /* Ingrandisce del 10% e ruota di 5 gradi */
}