/* constanti del progetto */
:root {
  --primario: #a1cdf4;
  --secondario: #a9afd1;
  --accento: #ada9b7;
  --testo: #7c809b;
  --altrocolore: #b5b1b2;
  --selezione: rgb(120, 126, 240);
  --colsfondoprodotti: rgb(161, 205, 244, 0.5);
  --testohover: rgba(0, 0, 0, 0.1);
  --testoopaco: rgba(0, 0, 0, 0.1);
}

/* FONT IMPORTATE */

/* font testo */
* {
  font-family: "Roboto", serif;
}
/* font titolo */
.titolo {
  font-family: "Hachi Maru Pop", serif;
}
/* font enfasi */
.enfasi {
  font-family: "Edu AU VIC WA NT Arrows", serif;
}

/* STILE del progetto */

*{
  transition: all 0.5s;
}

.dimimmag {
  height: 90px; /* altezza  */
  width: 350px; /* larghezza */
}

.bordo {
  border: 2px solid var(--secondario);
  border-radius: 4px;
}

.scrollogiu {
  animation: scorri 2s;
}

@keyframes scorri {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.scrollosu {
  animation: scorrisu 0.5s;
}

@keyframes scorrisu {
  0% {
    opacity: 0.5;
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sfondonav {
  background: rgb(161, 205, 244);
  background: -moz-linear-gradient(
    307deg,
    rgba(161, 205, 244, 1) 20%,
    rgba(169, 175, 209, 1) 60%
  );
  background: -webkit-linear-gradient(
    307deg,
    rgba(161, 205, 244, 1) 20%,
    rgba(169, 175, 209, 1) 60%
  );
  background: linear-gradient(
    307deg,
    rgba(161, 205, 244, 1) 20%,
    rgba(169, 175, 209, 1) 60%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a1cdf4",endColorstr="#a9afd1",GradientType=1);
}

.sfondosubmenu {
  background-color: var(--accento);
  border-radius: 5px;
}

.sfondofooter {
  background: rgb(161, 205, 244);
  background: linear-gradient(
    307deg,
    rgba(161, 205, 244, 1) 4%,
    rgba(132, 156, 177, 1) 22%,
    rgb(167, 179, 226) 58%,
    rgba(146, 147, 173, 1) 84%,
    rgba(173, 169, 183, 1) 96%
  );
}

.sfondoaccordion {
  background-color: var(--primario);
}

.pulsanti {
  background-color: var(--primario);
}

.riquadroimmagini {
  width: 80%;
  max-width: 700px;
  height: auto;
}
.form-control {
  background-color: var(--primario);
}

.accordion-button:not(.collapsed) {
  background-color: var(--secondario);
}

.headertesto {
  background: rgb(161, 205, 244);
  background: linear-gradient(
    307deg,
    rgba(161, 205, 244, 1) 32%,
    rgba(198, 201, 214, 1) 48%,
    rgba(161, 205, 244, 1) 100%
  );
}
.riquadroimmagini {
  border-radius: 5px;
}

.sfondosezione {
  background-color: var(--primario);
}

.sfondosezione:hover {
  background-color: var(--selezione);
}

.card1 {
  text-decoration: none;
  background-color: red;
}

.card2 {
  text-decoration: none;
  background-color: green;
}

.card3 {
  text-decoration: none;
  background-color: blue;
}

.card4 {
  text-decoration: none;
  background-color: yellow;
}

.text-reset {
  text-decoration: none;
}
.text-reset:hover {
  background-color: var(--testohover);
}

.opaco {
  background-color: var(--testoopaco);
}

.arrotondato {
  border-radius: 10px;
}

.card1:hover,
.card2:hover,
.card3:hover,
.card4:hover {
  background-color: var(--primario);
}

.sfondoprodotti {
  background-color: var(--colsfondoprodotti);
}

.internoprodotto {
  background-color: var(--secondario);
}

.pulsanteDM {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 50;
}

/*! Inizio Parallasse */

.parallasse {
  height: 70vh;
  background: linear-gradient(rgba(12, 60, 73, 0.319), rgba(2, 2, 10, 0.685)),
    url("imgparallasse.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/*! Fine Parallasse  */

.riquadrocarosello {
  background-color: var(--secondario);
  color: var(--accento);
  border-radius: 10px;
}

/*! Carosello Swiper */

.swiper {
  width: 50vh;
  height: 50vh;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide {
  width: 80%;
}

.swiper-slide:nth-child(2n) {
  width: 60%;
}

.swiper-slide:nth-child(3n) {
  width: 40%;
}

/*! Fine Carosello Swiper  */