@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

  :root {
  --lightBlue: #004aad; /* blu di webez */
  --webezDark: #121212; /* nero di webez */
 /* --grigioSecondario: #d7deed;  grigio secondario da utilizzare sopra lo sfondo */
  --bluLeggero: #ECF0F1; /* blu leggero per sfondi in rilievo */
  --grigioScritte: #454545; /* grigio pre scritte secondarie */
  --bluHover: #004badba; /* blu trasparente */
  --grigioLeggero: #fafafa; /* bianco leggermente grigio */
}

html {
  padding: 0;
  margin-top: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  height: 100%;
  width: 100%;
  user-select: none;
  color: var(--webezDark);
  font-family: 'Poppins', sans-serif;
}

section {
  margin-top: 6vh;
  padding-left: 10vw;
  padding-right: 10vw;
  padding-top: 5vh;
}

/* Animazionie */
.animate__flipInX {
  animation: flip;
  animation-duration: 1s;  
}

.animate__fadeIn{
  animation: fade;
  animation-duration: 3s;
}

.lightBlue {
  color: var(--lightBlue);
}

/* ---- NAVBAR ---- */

.navbar {
  background-color: white;
  /* padding: 4vh 5vw; */
  padding: 1vh 5vw;
  border-bottom: 1px solid var(--bluLeggero);
}

.home-link-piccolo {
  font-size: 5vw !important;
}
.ul-piccolo {
  padding: 0 !important;
}
.ul-piccolo li {
  list-style: none;
  margin-top: 20px;
}
.home-chiama-piccolo {
  font-size: 5vw !important;
}

/* ---- SEZIONE HOME ---- */

.sectionHome {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 5vh;
  margin-top: 0 !important;
}

.home-navbar {
  background-color: white;
}

/* Logo */
.logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 600 !important;
  font-size: 2.3vw !important;
  color: var(--webezDark);
  margin-bottom: 0;
}

.logo-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 600 !important;
  font-size: 1vw !important;
  color: var(--webezDark);
  letter-spacing: 3px;
  margin-top: 0;
  line-height: 0;
}

.logo:hover {
  color: var(--lightBlue) !important;
}

.home-link {
  color: var(--grigioScritte);
  text-decoration: none;
  font-size: 1.2vw;
}

.home-link:hover {
  color: var(--lightBlue) !important;
}

.home-chiama {
  background-color: var(--lightBlue);
  color: white;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1.2vw;
  font-weight: 400;
  transition: 0.3s ease-in-out;
}
.home-chiama:hover {
  background-color: var(--bluHover);
  color: white;
}

.home-testi {
  margin-top: 10vh;
}

.home-titolo {
  font-size: 4vw;
  color: var(--webezDark);
  font-weight: 500;
}

.home-sottotitolo {
  font-size: 1.2vw;
  color: var(--grigioScritte);
  font-weight: 400;
  padding-top: 16px;
}

.home-container-social {
  margin-top: 3vh !important;
}

.home-social {
  font-size: 1vw;
  text-decoration: none;
  color: var(--webezDark);
  background-color: var(--bluLeggero);
  border-radius: 20px;
  margin: 10px;
  width: 10vw;
  padding: 1.5vh 0 1.5vh 0;
}

.home-card-container {
  margin-top: 10vh;
}

.home-card {
  width: 15vw;
  padding: 0;
  margin: 0;
  border: 1px solid var(--webezDark);
  border-radius: 5px;
  margin: 20px;
  background-color: var(--grigioLeggero);
}

.home-card-header {
  padding: 2vh 1.4vw 1vh 1.4vw;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  top: 0 !important;
}

.home-card-title {
  font-size: 1.5vw;
  font-weight: 400;
}

.home-card-content {
  padding: 2vh 1.6vw 1vh 1.4vw;
  background-color: var(--grigioLeggero);
  border-radius: 5px;
}

.home-card img {
  padding-bottom: 30px;
  width: 5vw;
}

/* ---- SECTION CHISIAMO ---- */

.sectionChisiamo {
}

.section-tag {
  padding: 1vw;
  background-color: var(--bluLeggero);
  color: var(--lightBlue);
  font-weight: 600;
  font-size: 1vw;
  padding: 10px !important;
}

.section-titolo {
  font-size: 3vw;
  font-weight: 400;
}

.section-testo {
  font-size: 1.2vw !important;
  color: var(--grigioScritte);
}

.section-button {
  margin-top: 2vh;
  font-size: 1.1vw;
  background-color: var(--lightBlue);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px 10px 15px;
  transition: 0.3s;
  font-weight: 400;
}
.section-button:hover {
  background-color: var(--bluHover);
  color: white;
}

.prenota-ora {
  margin-left: 20px;
  background-color: var(--bluLeggero);
  color: var(--webezDark);
  padding: 13px 20px 13px 20px;
  border: none;
}

.prenota-ora:hover {
  opacity: 0.7;
  background-color: var(--bluLeggero);
  color: var(--webezDark);
}

.chisiamo-immagine img {
  width: 30vw;
}

/* ---- SECTION SERVIZI ----*/

.sectionServizi {
  padding-bottom: 10vh;
}

.container-servizi {
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.servizi-box {
  margin: 10px;
  width: 18vw;
  border: 1px solid var(--bluLeggero);
  border-radius: 15px;
  padding: 4vh 2vw;
  background-color: var(--grigioLeggero);
  cursor: pointer;
}

.servizi-tag {
  color: var(--lightBlue);
  font-size: 1vw;
  font-weight: 500;
}

.servizi-box-titolo {
  font-size: 1.5vw;
  color: var(--grigioScritte);
  font-weight: 500;
  margin-bottom: 1.3vh;
}

.servizi-box-testi {
  color: var(--grigioScritte);
  font-size: 1vw;
}

.servizi-box-testi p{
  color: var(--grigioScritte);
  font-size: 1vw;
  font-weight: 400;
  margin-bottom: 2vh;
}

.servizi-box a {
  font-size: 0.9vw;
  font-weight: 500;
  text-decoration: none;
  color: var(--webezDark);
}

.servizi-box a:hover {
  text-decoration: underline;
}

/* ---- SEZIONE LAVORI ---- */

.lavori-container {
  margin-top: 3vh;
}

.lavoro {
  border-bottom: 1px solid var(--grigioScritte);
  padding-top: 30px;
  padding-bottom: 20px;
  color: var(--grigioScritte);
  cursor: pointer;
}

.lavoro-x {
  border-bottom: none;
}

.lavoro-sottotitolo {
  font-weight: 400;
  text-align: start;
}

.lavoro-testo {
  font-size: 1vw;
  color: var(--grigioScritte);
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 3vw;
}

.lavori-contenuto {
  margin-top: 3vh;
}
 
.box-lavori {
  position: relative;
  width: 15vw;
  height: 15vw;
  padding-bottom: 0;
  box-shadow: 0 2px 8px 0 rgba(63, 69, 81, 0.16);
  margin-bottom: 0.9em;
  overflow: hidden;
  border-radius: 20px;
  will-change: transform;
}


/* ---- SEZIONE RECENSIONI ---- */

#carouselFeedback {
  background-color: var(--bluLeggero);
  padding: 8vh 0 8vh 0;
}

.carousel-inner {
  margin-top: 0vh;
}

.carousel-inner, .carousel-item, .recensione-box {
  min-height: 30vh;
}

.recensione-box {
  color: var(--grigioScritte);
}

.recensione-titolo {
  font-weight: 400;
}

.recensione-testo {
  margin-top: 2vh;
  font-size: 1.3vw;
}

.recensione-nome {
  font-size: 1.3vw;
  font-weight: 400 !important;
  margin-top: 2vh;
  margin-bottom: 0;
}

.recensione-stelle {
  margin-top: 0.5vh;
  margin-bottom: 0;
}

.recensione-stelle i{
  font-size: 1.3vw;
  color: var(--bluHover);
}

/* ---- SEZIONE CONTATTACI ---- */

.contatti-contenuto {
  margin-top: 5vh;
}

.contattaci-input label {
  color: var(--grigioScritte);
}

.contattaci-input input, textarea{
  background-color: var(--grigioLeggero) !important;
  border: 1px solid var(--bluLeggero) !important;
  border-radius: 12px !important;
}

.contattaci-input input {
  height: 50px;
}

.contattaci-button {
  margin: 0 !important;
}

.contattaci-button button {
  font-size: 1vw;
}

.container-contattaci-box {
  margin: 0 !important;
  padding: 0 !important;
}

.contattaci-box {
  background-color: var(--grigioLeggero);
  border: 1px solid var(--bluLeggero);
  border-radius: 15px;
  margin: 10px;
  padding: 1.5vw;
  width: 18vw;
  height: 20vh;
  cursor: pointer;
}

.contattaci-box i {
  font-size: 2vw;
  color: var(--lightBlue);
}

.contattaci-box h3 {
  font-weight: 400;
  font-size: 1.2vw;
  color: var(--grigioScritte);
  margin-bottom: 3px;
}

.contattaci-box p {
  font-size: 1vw;
  font-weight: 300;
  color: var(--grigioScritte);
  margin-bottom: 0;
}

.contattaci-box-social {
  margin: 10px;
}

.contattaci-social {
  background-color: var(--grigioLeggero);
  border: 1px solid var(--bluLeggero);
  width: 55px;
  height: 55px;
  padding: 10px;
  border: 1px solid var(--bluLeggero);
  border-radius: 15px;
}

/* ---- SECTION FOOTER ---- */

.sectionFooter {
  margin-top: 0;
  background-color: var(--grigioLeggero);
  padding-top: 0 !important;
}

.footer-header p{
  color: var(--grigioScritte);
}

.footer-content {
  padding-top: 6vh;
}

.footer-content h3 {
  color: var(--webezDark);
  font-weight: 500;
  font-size: 1.2vw;
}

.footer-content ul {
  margin-top: 20px;
  list-style: none;
  text-decoration: none;
  padding: 0;
}

.footer-content ul li, a{
  font-weight: 400;
  margin-top: 10px;
  text-decoration: none;
  color: var(--grigioScritte);
}

.footer-content .social li{
  margin-top: 20px;
}

.footer-footer {
  margin-top: 15vh;
}

.footer-footer p{
  color: var(--grigioScritte);
  font-size: 0.8vw;
  font-weight: 400;
}

/* ---- ANIMAZIONI ---- */

.hvr-float {
  -webkit-transition-duration: 0.2s !important;
  transition-duration: 0.2s !important;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-20px) !important;
  transform: translateY(-20px) !important;
  cursor: pointer;
}

.hvr-shrink {
  -webkit-transition-duration: 0.2s !important;
  transition-duration: 0.2s !important;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover {
  -webkit-transform: scale(0.95) !important;
  transform: scale(0.95) !important;
}

/* ---- COMPONENTI ESTERNI ---- */

.card {
  width: 25vw;
  height: auto;
  margin: 0 auto;
  background-color: var(--grigioLeggero);
  border-radius: 8px;
  z-index: 1;
  padding: 10px;
 }
 
 .tools {
  display: flex;
  align-items: center;
  padding: 9px;
 }
 
 .circle {
  padding: 0 4px;
 }
 
 .box {
  display: inline-block;
  align-items: center;
  width: 10px;
  height: 10px;
  padding: 1px;
  border-radius: 50%;
 }
 
 .red {
  background-color: #ff605c;
 }
 
 .yellow {
  background-color: #ffbd44;
 }
 
 .green {
  background-color: #00ca4e;
 }
 
.search-bar {
  padding-left: 20px;
}

.search-bar p{
  margin-bottom: 0;
}

 .card__content img {
  width: 24vw !important;
  max-height: 20vh;
 }