@charset "utf-8";

/************************************************ GOOGLE FONT ************************************************/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
	
/************************************************ STILI DI BASE ************************************************/

a {
  color: #666666;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #009f9b;
  text-decoration: underline;
}

.btn-link:hover {
  color: #009f9b;
  text-decoration: underline;
  background-color: transparent;
  border-color: transparent;
}

/* Stile del menu principale */
#menu {
    height: 110px;
    background-color: rgba(0, 0, 0, 0.6)!important; /* Colore di sfondo semitrasparente */
    transition: height 0.3s; /* Animazione di transizione */
}

#mainNav a.navbar-brand,
#mainNav .navbar-nav .nav-link {
    color: white;
    font-size: 15px; /* Testo piccolo */
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Stile del menu quando si riduce l'altezza */
#mainNav.menu-small {
    height: 90px;
}


/* Stile delle voci del menu al passaggio del mouse */
#menu .navbar-nav .nav-link {
    transition: color 0.3s; /* Animazione di transizione del colore */
}

#menu .navbar-nav .nav-link:hover {
    color: #0EBEA7; /* Cambio di colore al passaggio del mouse (esempio: giallo) */
}

/* Distanza tra le voci del menu */
.navbar-nav .nav-link {
    margin-right: 20px; /* Aggiusta la distanza tra le voci del menu */
}

/* Stile per la voce "Lingue" */
#lingue-dropdown .nav-link {
    margin-left: 40px; /* Distanza maggiore tra "Lingue" e le altre voci */
}

.dropdown-menu {
    border-radius: 0; /* Rimuove gli angoli arrotondati */
    background-color: #fff;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* Aumenta la diffusione dell'ombra (esempio: 0px 4px 12px rgba(0, 0, 0, 0.2)) */
    border: none; /* Rimuovi il bordo */
}

@media (max-width: 1199px) {
  .dropdown-menu {
    border-radius: 0; /* Rimuove gli angoli arrotondati */
    background-color: #ffffff00;
    border: none; /* Rimuovi il bordo */

  }
}

/* Stile delle voci di menu della tendina con lo stesso font delle voci di menu principali */
.dropdown-menu .dropdown-item {
    font-family: 'Roboto Condensed', sans-serif; /* Usa lo stesso font delle voci di menu principali */
    margin-bottom: 8px; /* Aggiusta la distanza verticale (esempio: 10px) */
    margin-top: 8px; /* Aggiusta la distanza verticale (esempio: 10px) */
}

@media (max-width: 1199px) {
    .dropdown-menu .dropdown-item {
      font-family: 'Roboto Condensed', sans-serif;
      margin-bottom: 8px;
      margin-top: 8px;
      color: white;
      font-size: 14px;
      letter-spacing: 1px;
      font-weight: 300;
    }
}

/* Rimuovi l'effetto del rettangolo grigio e mantieni solo il cambio di colore del testo */
.dropdown-menu .dropdown-item {
    background-color: transparent; /* Rimuovi il colore di sfondo */
    border: none; /* Rimuovi il bordo */
}

.dropdown-menu .dropdown-item:hover {
    color: #078877; /* Cambio di colore al passaggio del mouse (esempio: giallo) */
}


/*************** INGRANDIMENTO SU ICONE SOCIAL ********************/

/* Nuova classe per l'ingrandimento dell'icona */
.icona-ingrandita {
  display: inline-block;
  transition: transform 0.3s ease-in-out; /* Aggiungi una transizione all'ingrandimento */
}

/* Stile al passaggio del mouse per l'icona */
.icona-ingrandita:hover {
  transform: scale(1.1); /* Ingrandisci al passaggio del mouse */
}


/****************** STILI TESTO ***********/

.titolo-sezione {
    color: #222;
    font-size: 19px; /* Testo piccolo */
    line-height: 23px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
}

@media (max-width: 767px) {
  .titolo-sezione {
      white-space: normal !important;
  }
}

.titolo-sezione-maxi {
  color:  #009f9b; 
  font-size: 24px; /* Testo piccolo */
  line-height: 30px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
}

.titolo-maiuscolo {
    font-family: 'Roboto Condensed', sans-serif;
    color: #222;
    font-size: 18px;
    line-height: 23px;
    font-weight: 500;
    text-transform:uppercase;
    letter-spacing: 3px;
}

.titolo-colonna {
    font-family: 'Roboto Condensed', sans-serif;
    color: #333;
    font-size: 25px;
    line-height: 31px;
    font-weight: 500;
    letter-spacing: 1px;
}

.titolo-sezione-bianco {
    color: #f1f1f1;
    font-size: 19px; /* Testo piccolo */
    line-height: 23px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
}


.paragrafo {
    color: #666;
    font-size: 15px; /* Testo piccolo */
    line-height: 25px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
}

/* Stile al passaggio del mouse */
.paragrafo a:hover {
  color: #009f9b;
  text-decoration: none;
}

.paragrafo-bianco {
    color: #e9e9e9;
    font-size: 15px; /* Testo piccolo */
    line-height: 25px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
}

/* Stile al passaggio del mouse */
.paragrafo-bianco a:hover {
  color: #009f9b;
  text-decoration: none;
}

@media (max-width: 1199px) {
  .paragrafo-bianco {
    text-align: center!important;
  }
}

/****************** FOOTER ***************/

@media (max-width: 1199px) {
  .riduci-1200 {
    text-align: center!important;
    max-height: 140px!important;
  }
}

#subfooter {
    background-color:#e7e7e7;
    padding-top: 50px;
    padding-bottom: 50px;
    color: #fff;
}

#mysocial {
    background-color: #282727;
    color: #fff;
    padding-top: 25px;
    padding-bottom: 15px;
}

.padding_destro {
    padding-right: 50px;
}

/********* LINEA SEPARATORE **************/

.line {
    width: 50px;
    border-bottom: 3px solid #009f9b;
    position: absolute;
}

.line-marchi {
  width: 50px;
  border-bottom: 3px solid #009f9b;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/************** VIDEO HOME PAGE ***********/

/* Stile per il video-container */
.video-container {
    position: relative;
  }
  
  /* Stile per il video - larghezza al 100% e altezza automatica */
  .video {
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 200px; /* Altezza minima per il video */
  }
  
  /* Resto del tuo stile rimane invariato */
  
  /* Media query per schermi più piccoli, ad esempio dispositivi mobili */
  @media screen and (max-width: 768px) {
    .video {
      min-height: 600px; /* Altezza minima ridotta per dispositivi mobili */
    }
  }

  .text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .overlay-title {
    font-size: 41px; /* Testo piccolo */
    line-height: 51px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
    color: #fff; /* Colore del titolo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Effetto ombra del titolo */
    margin-bottom: 20px; /* Distanza tra il titolo e il testo */
  }

  .overlay-text {
    font-size: 16px; /* Testo piccolo */
    line-height: 24px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    color: #fff; /* Colore del testo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Effetto ombra del testo */
  }

  /* Rimuovi i controlli del video */
  video::-webkit-media-controls {
    display: none;
  }

  video::-webkit-media-controls-play-button,
  video::-webkit-media-controls-start-playback-button {
    display: none;
  }

  /**************** READ MORE ******************/

  #summary {
    font-size: 14px;
    line-height: 1.5;
  }
  
  #summary p.collapse:not(.show) {
      height: 80px !important;
      overflow: hidden;
    
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;  
  }
  
  #summary p.collapsing {
      min-height: 80px !important;
  }
  
  #summary a.collapsed:after  {
      content: 'Leggi tutto';
  }
  
  #summary a:not(.collapsed):after {
      content: 'Chiudi';
  }

  /********************* EFFETTO SU FOTOGRAFIE ******************/

  .contenitore-immagine {
    overflow: hidden; /* Nasconde parte dell'immagine al di fuori del contenitore */
    border-radius: 0px 0px 0px 0px;
    }
  
  .classe-effetto-foto {
    transition: transform 0.3s ease;
  }
  
  .contenitore-immagine:hover .classe-effetto-foto {
    transform: scale(1.1); /* Ingrandisce l'immagine all'interno del contenitore */
  }

  /********************* BOTTONE ******************/

  .btn-outline-light {
    color: #ffffff;
    background-color: transparent;
    background-image: none;
    border-color: #ffffff;
    border-radius: 0px;
    letter-spacing: 2px;
    font-size: 14px; /* Testo piccolo */
    line-height: 24px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
}

.btn-outline-dark {
  color:#2b2a2a;
  background-color: transparent;
  background-image: none;
  border-color: #161616;
  border-radius: 0px;
  letter-spacing: 2px;
  font-size: 14px; /* Testo piccolo */
  line-height: 24px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}

/****************** COLONNA HOME *****************/

.colonna-grigia {
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  background:#f4f4f4;
  padding: 50px;
  border-radius: 0px 0px 0px 0px;
}

@media (max-width: 1199px) {
  .colonna-grigia {
    padding-left: 19px;
    padding-right: 19px;
  }
}

.bordo-img{
  border-radius: 0px 0px 0px 0px;
}


/*************** BANDIERE SELETTORE LINGUA *********/

.menu-item {
  display: flex;
  align-items: center;
}

.menu-item a {
  display: flex;
  align-items: center;
}

.menu-item a img {
  width: 21px; /* Regola la larghezza desiderata */
  margin-right: 0px; /* Aggiunge uno spazio a destra dell'immagine */
}

.align-middle {
  display: flex;
  align-items: center;
}

/* CSS per ridurre lo spazio tra le voci del menu con classe "bandiera" */
.menu-item.bandiera {
  margin-right: 15px; /* Puoi regolare la larghezza desiderata tra le bandiere */
}

/****************************** RITALGIA FOTO *******************/

.ritaglia-foto {
  max-height: 400px;
  overflow: hidden;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/**************** BANNER **************************/

/* Stili generici */
.banner {
  background-image: url('img/banner-01.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-mescole {
  background-image: url('img/banner-mescole.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-login {
  background-image: url('img/banner-login.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-news {
  background-image: url('img/banner-news.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-download {
  background-image: url('img/banner-download.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-team {
  background-image: url('img/banner-team.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-trattamenti {
  background-image: url('img/banner-trattamenti.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-prodotti {
  background-image: url('img/banner-prodotti.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}

.banner-consegne {
  background-image: url('img/banner-consegne.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  height: 650px; /* Altezza desktop */
}


/* Altezza mobile */
@media (max-width: 768px) {
  .banner {
      height: 500px;
  }
}

/* Stili per il testo sovrapposto */
.banner-text {
  font-size: 41px;
  line-height: 51px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 3px;
  color: #fff; /* Cambia il colore del testo se necessario */
}

/* Altezza mobile */
@media (max-width: 768px) {
  .banner-text {
    font-size: 25px;
    line-height: 34px;
  }
}

/************************************** TABS ***************************************************************/

.nav-pills .nav-link {
  color: #555;
}
.text-uppercase {
  letter-spacing: 0.1em;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #009f9b;
}

@media (min-width: 576px) {
  .rounded-nav {
    border-radius: 50rem !important;
  }
}

@media (min-width: 576px) {
  .rounded-nav .nav-link {
    border-radius: 50rem !important;
  }
}

.with-arrow .nav-link.active {
  position: relative;
}

.with-arrow .nav-link.active::after {
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #009f9b;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

.lined .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
}

.lined .nav-link:hover {
  border: none;
  border-bottom: 3px solid transparent;
}

.lined .nav-link.active {
  background: none;
  color: #009f9b;
  border-color: #009f9b;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
}


/*************** CTA ************************/

.cta-box {
  background-color: #f4f4f4;
  padding: 40px;
  border-radius: 0px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cta-content {
  text-align: left;
}

.cta-title {
  color: #009f9b;
  font-size: 24px;
  line-height: 30px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
}

.cta-paragraph {
  color: #666;
  font-size: 15px; /* Testo piccolo */
  line-height: 25px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}

.cta-button-container {
  display: flex;
  align-items: center;
}

.cta-button {
  background-color: #009f9b;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 18px;
  margin-right: 10px;
  border: 1px solid #009f9b;
  border-radius: 0px;
  text-decoration: none;
  font-size: 14px;
  line-height: 24px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}

.cta-button:hover {
  background-color: #282727;
  border: 1px solid #282727;
  color: #ffffff;
  text-decoration: none;
}

/* Responsive styles for screens smaller than 1200px */
@media (max-width: 1199px) {
  .cta-box {
      flex-direction: column;
      align-items: flex-start;
  }
}

/***************** SEPARATORE ORIZZONTALE TRA LE COLONNE *************************************/

.with-vertical-lines .col-xxl-4,
.with-vertical-lines .col-xl-4,
.with-vertical-lines .col-12 {
    border-right: 1px solid #808080; /* Aggiunge una linea verticale tra le colonne */
    padding-right: 15px; /* Spazio tra il testo e la linea verticale */
}

.with-vertical-lines .col-xxl-4:last-child,
.with-vertical-lines .col-xl-4:last-child,
.with-vertical-lines .col-12:last-child {
    border-right: none; /* Rimuove la linea verticale dalla colonna finale */
}

/* Rimuovi le linee verticali sotto 1200px */
@media (max-width: 1200px) {
  .with-vertical-lines .col-xxl-4,
  .with-vertical-lines .col-xl-4,
  .with-vertical-lines .col-12 {
      border-right: none;
      padding-right: 0;
  }
}

/***************** SFONDO GRIGIO *************************************/

.sfondo-grigio {
  background-color: #f4f4f4;
  padding-top: 60px;
  padding-bottom: 60px;
}

/**************** CARD *********************/

.card{
  border: 1px solid rgb(151 151 151 / 13%);
}

.card-footer {
  padding-top: 1.2rem;
  padding-bottom: 1.95rem;
  background-color:#fff;
  border-top: 0px;
}

.card-body {
  padding-top: 1.25rem;
  padding-bottom: 0.3rem;
}

.img-card {
  max-height:200px;
  max-width:200px;
  margin-top:30px;
  margin-bottom:15px;
}

.custom-card {
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  border-radius: 15px;
}

.custom-card:hover {
  box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 0%), 0px 40px 40px 13px rgb(0 0 0 / 12%);
  z-index: 1;
  transform: translateY(-10px);
}




.container-over {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 0px; /* Aggiunto: margine inferiore per separare le righe */
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #009f9b;
}

.container-over:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/******************* hover effect su pagina prodotti ***************/

.container-over {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.container-over a {
  color: #ffffff;
  text-decoration: none;
  position: relative; /* Aggiunto per consentire il posizionamento dell'elemento ::before relativo a questo elemento */
}

.container-over a.hover-effect::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ffffff;  /* Colore della linea (bianco) */
  transition: width 0.3s ease-out;  /* Transizione di espansione della larghezza */
}

.container-over a.hover-effect:hover::before {
  width: 100%;  /* Espansione completa alla larghezza del testo */
}

.container-over a:hover {
  color: #ffffff; /* Sovrascrivi eventuali regole di colore al passaggio del mouse */
}

.border-top {
  border-top: 1px solid #515151!important;
}

/***** COLLAPSE NAVBAR *******/

#logo {
  transition: 0.3s; /* Aggiungi una transizione per uno scrolling più fluido */
}

.logo-scrolled {
  height: 50px; /* Modifica l'altezza desiderata */
}


.navbar {
  background: #000000ad;
	border-style: none;
	border-width: 0px 0px 1px 0px;
	border-color: #ddd;
	transition: 0.3s; /* Aggiungi una transizione per una transizione fluida */
  list-style: none;
  padding: 0;
  }
  



  @media only screen and (max-width: 992px) {
  .navbar {
    background: rgb(0 0 0 / 93%);
	}
  }


  button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color; 
}


/*********** NASCONDE E MOSTRA SU MOBILE *****************/

.nascondi-mobile {
  display: block;
}

@media only screen and (max-width: 1199px) {
  .nascondi-mobile{
    display: none;
	}
}

.mostra-mobile {
  display: none;
}

@media only screen and (max-width: 1199px) {
  .mostra-mobile{
    display: block;
	}
}


/****************** CONTAINER CUSTOM **********************/

.custom-container {
  max-width: 900px;
}

.nav-link {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease-in-out;
}

.nav-link:hover {
  color: #009f9b!important;
}

.margini-mobile {   
  padding-left: 0px;
  padding-right: 0px;
}

@media only screen and (max-width: 800px) {
.margini-mobile {   
  padding-left: 30px;
  padding-right: 30px;
}
}