/* Body and basic styles */
body {
  font-family: "Open Sans", sans-serif; /* Font di base per il testo */
  color: #334240; /* Colore del testo */
}

a {
  text-decoration: none; /* Rimuove la sottolineatura dai link */
  color: #1bbca3; /* Colore dei link */
}

a:hover {
  color: #2ae0c4; /* Colore dei link al passaggio del mouse */
  text-decoration: none; /* Assicura che non ci sia sottolineatura al passaggio del mouse */
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif; /* Font per gli headings */
}

/* Back to top button */
.back-to-top {
  position: fixed; /* Posizione fissa sullo schermo */
  visibility: hidden; /* Nasconde il bottone inizialmente */
  opacity: 0; /* Trasparenza iniziale */
  right: 15px; /* Distanza dal margine destro */
  bottom: 15px; /* Distanza dal margine inferiore */
  z-index: 99999; /* Assicura che il bottone sia sopra altri elementi */
  background: #b59719; /* Colore di sfondo del bottone */
  width: 40px; /* Larghezza del bottone */
  height: 40px; /* Altezza del bottone */
  border-radius: 4px; /* Angoli arrotondati */
  transition: all 0.4s; /* Transizione per la visibilità */
}

.back-to-top i {
  font-size: 24px; /* Dimensione dell'icona */
  color: #fff; /* Colore dell'icona */
  line-height: 0; 
}

.back-to-top:hover {
  background: #b59719; /* Colore di sfondo al passaggio del mouse */
  color: #fff; /* Colore dell'icona al passaggio del mouse */
}

.back-to-top.active {
  visibility: visible; /* Rende visibile il bottone */
  opacity: 1; /* Rende il bottone opaco */
}

/* Hero Section */
#hero {
  width: 100%; /* Larghezza del contenitore */
  height: 100vh; /* Altezza del contenitore */
  background-color: rgba(21, 27, 26, 0.7); /* Colore di sfondo con trasparenza */
  overflow: hidden; /* Nasconde gli overflow */
  padding: 0;
}

#hero .carousel-item {
  width: 100%; /* Larghezza della slide */
  height: 100vh; /* Altezza della slide */
  background-size: cover; /* Copre l'intera area della slide */
  background-position: center; /* Centra l'immagine */
  background-repeat: no-repeat; /* Non ripete l'immagine */
}

#hero .carousel-item::before {
  content: "";
  background-color: rgba(21, 27, 26, 0.7); /* Sovrapposizione di colore con trasparenza */
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

/* Contenitore del carosello */
#hero .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  flex-direction: column; /* Allinea il contenuto in colonna */
  align-items: center; /* Centra orizzontalmente il contenuto */
  text-align: center; /* Assicura che il testo sia centrato */
}

/* Contenuto del carosello */
#hero .carousel-content {
  text-align: center;
	 margin-top: 100px;
}

/* Stile per il titolo */
#hero h2 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 40px; /* Dimensione del testo per la scritta "Stiamo costruendo..." da PC */
  font-weight: 700;
}

/* Stile per il paragrafo */
#hero p {
  width: 100%; /* Larghezza del paragrafo */
  margin: 0 auto 10px auto; /* Centrato con margine inferiore */
  color: #e9c72b; /* Colore del paragrafo */
  text-align: center; /* Allinea il testo al centro */
}

/* Stile per i pulsanti */
#hero .btn-get-started {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  color: #fff;
  border: 2px solid #1bbca3;
  min-width: 250px; /* Larghezza minima per uniformare i pulsanti */
  text-align: center; /* Centra il testo all'interno del pulsante */
}

#hero .btn-get-started:hover {
  background: #1bbca3;
  color: #fff;
  text-decoration: none;
}

/* Aggiunta di una classe container per i pulsanti */
.btn-container {
  display: flex; /* Usa il flexbox per allineare i pulsanti */
  justify-content: center; /* Centra i pulsanti orizzontalmente */
  gap: 10px; /* Spazio tra i pulsanti */
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
  .btn-container {
    flex-direction: column; /* Dispone i pulsanti verticalmente */
    align-items: center; /* Centra i pulsanti */
  }

  #hero .btn-get-started {
    min-width: 300px; /* Rimuove la larghezza minima per pulsanti */
    width: 80%; /* Imposta i pulsanti a larghezza piena */
    max-width: 500px; /* Imposta una larghezza massima per i pulsanti */
    margin: 3px 0; /* Riduce il margine verticale tra i pulsanti */
  }
}

/* Logo and highlighted text */
.logo-img {
  width: 400px; /* Dimensione del logo per desktop */
  height: auto;
  margin-top: -150px; /* Sposta il logo più in alto da PC */
}

.highlighted-text-wrapper {
  background: rgba(255, 165, 0, 0.3); /* Rettangolo arancione con più trasparenza */
  width: 100vw; /* Assicura che la fascia tocchi i margini sinistro e destro */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px; /* Imposta un'altezza specifica per la fascia da PC */
}

.highlighted-text {
  padding: 0 20px; /* Padding laterale per il testo */
  font-size: 24px; /* Imposta la dimensione del font per assicurare che sia leggibile */
  margin: 0; /* Rimuovi i margini del testo */
  text-align: center;
}

.colored-text {
  color: #fcfcfc !important; /* Ripristina il colore originale del testo */
  margin-top: 20px; /* Aggiungi margine per distanziare la scritta dalla fascia */
}

/* Responsive design */
@media (min-width: 1024px) {
  .colored-text {
    white-space: nowrap; /* Evita che il testo vada a capo */
    font-size: 18px; /* Ridimensiona il testo se necessario */
  }
}

@media (max-width: 768px) {
  .logo-img {
    width: 310px; /* Dimensione del logo per dispositivi mobili */
    height: auto;
    margin-top: -90px; /* Sposta il logo più vicino al top */
  }

  .highlighted-text-wrapper {
    padding: 8px 0; /* Meno padding per schermi più piccoli */
  }

  .highlighted-text {
    font-size: 16px; /* Font più piccolo per schermi più piccoli */
  }

  .carousel-content {
    padding: 20px !important; /* Aumenta questo valore se necessario */
    padding-bottom: 60px !important; /* Aggiungi spazio inferiore per il pulsante Get Started */
  }

  .carousel-control-prev,
  .carousel-control-next {
    bottom: 150px; /* Sposta le frecce più in basso su schermi piccoli */
    top: auto; /* Rimuove il valore di top */
    transform: none; /* Rimuove la traslazione */
  }

  #hero .carousel-content h2 {
    font-size: 16px; /* Riduce la dimensione del carattere per la scritta "Stiamo costruendo qualcosa di straordinario!" */
  }

  #hero .carousel-content p {
    font-size: 14px; /* Riduce la dimensione del carattere per la descrizione */
  }

  .colored-text {
    margin-top: 20px; /* Margine superiore per distanziare la descrizione dalla fascia */
  }
}

/* Footer */
#footer {
  background: #344341;
  padding: 0 0 30px 0;
  color: #fff;
  font-size: 14px;
}

#footer .footer-top {
  background: #3d4f4c;
  border-bottom: 1px solid #4d635f;
  padding: 60px 0 30px 0;
}

#footer .footer-info h3 {
  font-size: 24px;
  margin: 0 0 20px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff;
}

#footer .copyright {
  text-align: center;
  padding-top: 30px;
}

#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}

.highlighted {
  background-color: orange; /* Sets the background color to orange */
  padding: 10px; /* Adds some padding for better readability */
  border-radius: 5px; /* Rounds the corners of the highlighted area */
  color: white; /* Sets the text color to white for better contrast */
}