:root {
  /*--SizeLogo: 25%;
    --BorderLogoSize: 0.2rem;
    --ColorLogo: #ede0d4;
    --BackColorLogo: #9c6644;
    --paddingLogo: 0.5rem;*/

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  --BackgroundColor: #ddb892;
  --BackgroundColor2: #dabfa4;

  --WebContainerSection: var(--BackgroundColor2);

  --MarroneScritte: #ffffffff;
  --MarroneChiaroScritte: #f8b945;
  --NavBar: #a98467;
  --BordoNavbar: #4b392fff;
  --MarroneBottoni: #ddb892;
  --MarroneBordi: #49352aff;
  --MarroneBordi2: #83644aff;
  --Registrati: #4b392fff;
  --Logo: #ddb892;

  /*Pop Up Sign In*/
  --LightGradientSwitch: #ccb188;
  --DarkGradientSwitch: #a5885d;
  --LightColorPopUp: white;
  --DarkColorPopUp: black;
  --PopUpShadow: rgba(0, 0, 0, 0.5);
  /*Pop Up Sign In*/

  /*Menu*/
  --CenterMenuColor: var(--MarroneBottoni);
  --SideMenuColor1: var(--MarroneBordi);
  --SideMenuColor2: rgb(255, 255, 255);
  /*Menu*/

  /*LogIn*/
  --XColor: var(--DarkGradientSwitch);
  --XColorMobile: var(--LightColorPopUp);

  --Ombra: rgba(0, 0, 0, 0.4);
  --Luce: rgba(255, 255, 255, 0.1);

  --translatePropety: translateX(calc(max(calc(79vw + 1rem), 55rem) - 100%));

  --base-height: 7.55vw;
  --base-min-height: 8rem;
  --media-height: 23vw;
  --media-min-height: 8.85rem;
  --Goccia-width: 4rem;
}
@font-face {
  font-family: "Logo";
  src: url("font/AldotheApache.ttf");

  font-family: "Courier New", Courier, monospace;
}

* {
  margin: 0px;
  padding: 0px;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: 100vw;
  height: auto;

  /* background-color: var(--BackgroundColor); */
  background: var(--BackgroundColor);
}
#NavBar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: calc(80vw + 1rem);
  transition: height 0.2s;
  height: 5rem;

  position: fixed;

  margin-top: min(4vh, 3rem);

  border: 0.03rem solid rgba(0, 0, 0, 0.5);

  box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
    0.15rem -0.15rem 0.15rem var(--Ombra),
    -0.15rem -0.15rem 0.15rem var(--Ombra),
    0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5),
    -0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5);

  background-color: var(--NavBar);

  border-radius: 1.5rem;
  z-index: 100;
}

#Content {
  position: relative;

  display: flex;
  align-items: start;
  justify-content: space-around;

  height: 1.8rem;
  width: max-content;

  overflow: hidden;
}
.scritte {
  transition: all 0.3s;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  color: var(--MarroneScritte);

  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;

  margin-left: 1rem;
  margin-right: 1rem;

  text-decoration: none;
  line-height: 150%;
}

.scritte::after {
  position: relative;
  content: attr(data-text);

  font-size: 1.3rem;

  color: var(--MarroneChiaroScritte);
}
.scritte:hover {
  transform: translateY(-50%);
}

#Login {
  display: flex;
  align-items: center;
  justify-content: start;

  height: 120%;
  width: 13rem;
  white-space: nowrap;

  margin-right: 1rem;
}
#SignInContainer {
  position: relative;

  display: flex;
  align-items: start;
  justify-content: space-around;

  height: 1.8rem;
  width: max-content;

  overflow: hidden;
}

#SignIn {
  transition: all 0.3s;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  color: var(--MarroneScritte);

  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;

  margin-left: 1rem;
  margin-right: 1rem;

  text-decoration: none;
  line-height: 150%;
}
#SignIn::after {
  position: relative;
  content: attr(data-text);

  font-size: 1.3rem;

  color: var(--MarroneChiaroScritte);
}
#SignInContainer:hover #SignIn {
  transform: translateY(-50%);
}

#Register {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: auto;
  border-radius: 0.8rem;

  background: linear-gradient(
    -45deg,
    var(--MarroneBordi),
    var(--MarroneBordi2)
  );

  transform-style: preserve-3d;
  margin-left: 1rem;

  cursor: pointer;
  transition: all 0.1s ease-in-out;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  border: solid 0.03rem rgba(0, 0, 0, 0.4);

  box-shadow: 0.2rem 0.2rem 0.2rem var(--Ombra);
}
#Register h1 {
  background-color: var(--MarroneBottoni);
  border-radius: 0.8rem;
  padding: 0.4rem;

  transition: all 0.1s ease-in-out;

  font-size: 1.3rem;
  color: var(--Registrati);
  text-decoration: none;
  font-weight: bold;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  box-shadow: -0rem 0rem 0rem 0.05rem rgba(0, 0, 0, 0.4);

  transform: translateY(-0.3rem) translateX(0.2vw);
}
#Register:active {
  box-shadow: none;
}
#Register:active h1 {
  transform: none;
  box-shadow: -0rem 0rem 0rem 0.05rem rgba(0, 0, 0, 0.4);
}

.BottoniPiatti {
  animation: BottoniPiattiAnim 0.2s 1 forwards;
}
@keyframes BottoniPiattiAnim {
  0% {
  }
  100% {
    box-shadow: none;
    background-color: var(--NavBar);

    --Registrati: var(--MarroneScritte);

    transform: none;
  }
}
.Bottoni3D {
  animation: Bottoni3DAnim 0.2s 1 forwards;
}
@keyframes Bottoni3DAnim {
  0% {
    box-shadow: none;
    background-color: var(--NavBar);

    --Registrati: var(--MarroneScritte);
    transform: none;
  }
  100% {
  }
}

#Telefono {
  display: flex;
  height: 100%;
  width: min-content;

  align-items: center;
  justify-content: space-between;
}
#Hamburger {
  display: none;
}
#LoginMobileContainer {
  display: none;
}
.LoginMobileSVG {
  display: none;
}

#LogoContainer {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  height: 100%;
  aspect-ratio: 1/1;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.LogoProva {
  width: 80%;
  height: 80%;

  border-radius: 100rem;

  fill: var(--MarroneScritte);

  /*border: 1px solid red;*/
}
.LogoProva:nth-child(1) {
  transform: translateY(-0.15rem);
  /*filter: drop-shadow(0rem 0.05rem 0.05rem var(--Ombra));*/

  z-index: 1;
}
.LogoProva:nth-child(2) {
  position: absolute;
  filter: drop-shadow(0rem 0.1rem 0.05rem var(--Ombra));

  z-index: 0;
}

.NavBarIncavata {
  animation: NavBarIncavata 0.2s 1 forwards linear;
}
@keyframes NavBarIncavata {
  0% {
    box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
      -0.4rem 0.4rem 0.4rem var(--Ombra);

    scale: 102%;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
      0.15rem -0.15rem 0.15rem var(--Ombra),
      -0.15rem -0.15rem 0.15rem var(--Ombra),
      0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
      -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

    scale: 100%;
  }
}
.NavBarVolante {
  animation: NavBarVolante 0.2s 1 forwards linear;
}
@keyframes NavBarVolante {
  0% {
    box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
      0.15rem -0.15rem 0.15rem var(--Ombra),
      -0.15rem -0.15rem 0.15rem var(--Ombra),
      0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
      -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

    scale: 100%;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
      -0.4rem 0.4rem 0.4rem var(--Ombra);

    scale: 102%;
  }
}

#img {
  display: flex;

  width: 100vw;
  height: 100vh;

  object-fit: cover;
  overflow: hidden;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

#Banner {
  position: fixed;

  width: 100vw;
  height: 100vh;

  z-index: -1;
}

#Welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: 100vh;

  background-color: rgba(0, 0, 0, 0.4);
}
.welcome {
  line-height: 100%;

  font-family: var(--font);
  color: var(--LightColorPopUp);
  font-weight: 200;
  letter-spacing: 0.2rem;

  font-size: min(3vw, 3rem);

  text-transform: uppercase;
}
.welcome:nth-child(2) {
  font-size: min(15vw, 15rem);
  margin-top: 7.5vh;

  text-transform: capitalize;

  /*width: 100%;
    line-height: 125%;
    text-align: center;

    background-color: rgba(0, 0, 0, 0.5);*/
}
.welcome:nth-child(3) {
  font-size: min(6vw, 6rem);
  margin-top: 2.5vh;

  text-transform: capitalize;
}
#Welcome-BTN {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font);
  color: var(--NavBar);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 2rem);
  letter-spacing: 0.2rem;

  text-transform: uppercase;

  background-color: rgb(199, 199, 207);

  width: 25vw;
  min-width: 12rem;
  max-width: 25rem;
  aspect-ratio: 5;

  margin-top: 15vh;

  

  /*border-radius: 1rem;
    box-shadow: 
        inset 0rem 0rem 1rem 0rem var(--Ombra),
        0.2rem -0.3rem 0rem 0.1rem rgb(174, 174, 176),
        0rem 0.3rem 0.3rem 0rem var(--Ombra);
    border: 0.3rem solid var(--LightColorPopUp);*/

  cursor: pointer;
}
#Welcome-BTN:active {
  /*box-shadow:inset 0rem 0rem 0.5rem 0rem var(--Ombra);
    transform: translateY(-0.3rem) translateX(0.3rem);*/
}

#SignInPopUpBackground * {
  user-select: none; /* disabilita selezione */
  -webkit-user-select: none; /* Safari / iOS */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* vecchi Edge */
  -webkit-touch-callout: none;
}

#SignInPopUpBackground {
  position: fixed;

  display: none;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;

  overflow-x: hidden;

  background-color: var(--PopUpShadow);

  z-index: 101;
}
#SignInPopUp {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: start;

  width: max(calc(79vw + 1rem), 55rem);
  height: clamp(35rem, calc(39vw + 1rem), max(80vh, 45rem));

  overflow: hidden;
  background: linear-gradient(
    0deg,
    var(--LightGradientSwitch) 15%,
    var(--DarkGradientSwitch) 85%
  );
  border-radius: 3rem;
}

#ClosePopUp {
  position: absolute;

  display: none;
  align-items: start;
  justify-content: start;

  width: 9rem;
  height: 9rem;

  top: calc(
    (100vh - clamp(35rem, calc(39vw + 1rem), max(80vh, 45rem))) / 2 - 6rem
  );
  right: calc((100vw - max(calc(79vw + 1rem), 55rem)) / 2 - 6rem);

  z-index: 2;

  background-color: rgba(255, 0, 0, 0);
}
#Xanimation {
  width: 100%;
  height: 100%;

  fill: var(--XColorMobile);
}
#XanimationMobile {
  display: none;
}
#XPopUp {
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 3rem;
  right: 3rem;

  width: 3rem;
  height: 3rem;

  z-index: 2;

  cursor: pointer;

  border-radius: 3rem;
}
#XPopUp svg {
  width: 80%;
  height: 80%;

  opacity: 0;
  transition: all 0.5s ease;

  fill: var(--XColor);
}

#SwitchPopUp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 35%;
  height: 100%;
  background-color: transparent;

  will-change: transform;

  /*Move To Other Side*/
  /*transform: translate(calc(max(calc(79vw + 1rem),55rem) - 100%));*/
}
#Welcome1 {
  display: flex;
  text-align: center;

  font-family: var(--font);
  font-size: max(3vw, 2.6rem);
  font-weight: 600;
  line-height: 100%;

  letter-spacing: 2%;

  color: var(--LightColorPopUp);
}
#Welcome1-mobile {
  display: none;
}
#Slogan1 {
  font-family: var(--font);
  text-align: center;

  margin-top: 5%;

  font-size: max(1vw, 0.9rem);
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 2%;

  color: var(--LightColorPopUp);
}
#Slogan1-mobile {
  display: none;
}
#Switch1 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font);
  font-size: max(1.5vw, 1.5rem);

  font-weight: 500;

  color: var(--LightColorPopUp);
  background-color: transparent;

  border-radius: 5rem;
  border: 0.1rem solid var(--LightColorPopUp);

  width: 50%;

  line-height: 170%;
  padding-bottom: 1%;

  margin-top: max(15%, 5rem);

  cursor: pointer;
}

#FormPopUp {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: end;

  width: 65%;
  height: 100%;

  overflow: hidden;
  background: transparent;

  z-index: 1;

  will-change: transform;

  transform: var(--translatePropety);

  /*Move To Other Side*/
  /*transform: none;*/
}
#Form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: 100%;

  background-color: var(--LightColorPopUp);
}
.Welcome2 {
  font-family: var(--font);
  font-size: max(3.5vw, 3.2rem);
  font-weight: 600;
  line-height: 100%;

  color: var(--LightGradientSwitch);

  margin-bottom: 2%;
}
#Welcome2-mobile {
  display: none;
}
.Welcome2:nth-child(2) {
  margin-bottom: 5%;
  font-size: max(3.3vw, 3rem);
  letter-spacing: 5%;
  color: var(--DarkGradientSwitch);
}
#InputFormContainer {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: max(60%, 28rem);
  height: auto;
}
#InputForm {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: 100%;
  height: max(var(--base-height), var(--base-min-height)); /*45%*/
}
.inputForm {
  width: 100%;

  font-size: max(1.2vw, 1.3rem);
  font-family: var(--font);

  padding-bottom: 0.5%;
  line-height: 150%;

  text-align: center;

  border-radius: 5rem;

  margin-bottom: 1.5%;

  border: 0.1rem solid var(--DarkGradientSwitch);
  color: var(--DarkColorPopUp);

  background-color: var(--LightColorPopUp);
}
.inputForm:last-child() {
  margin-bottom: 1.5%;
}
.inputForm:focus {
  outline: 0.2rem solid var(--LightGradientSwitch);
}
#SecondPassword {
  transition: opacity 0.2s ease;
}
#Switch2 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font);
  font-size: max(1.5vw, 1.5rem);

  font-weight: 500;

  color: var(--LightColorPopUp);
  background-color: transparent;

  border-radius: 5rem;
  background: linear-gradient(
    -90deg,
    var(--LightGradientSwitch),
    var(--DarkGradientSwitch)
  );
  border: none;

  width: 53%;

  line-height: 170%;
  padding-bottom: 1%;

  cursor: pointer;

  margin-top: 5%;
}

#RadioGroup {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
}
#Switch2 {
  font-size: min(4vw, 1.5rem);
  margin-top: 5%;
}

#ricordami {
  cursor: pointer;
}
.radioChoose {
  font-family: var(--font);
  font-size: min(2.5vw, 0.95rem);

  color: var(--DarkColorPopUp);

  cursor: pointer;
}

#Alternative {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: max(60%, 28rem);
  height: auto;
}

#Choose {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 0.2rem;

  background-color: var(--DarkColorPopUp);

  opacity: 0.4;

  margin-top: 7%;
  margin-bottom: 7%;
}
#Choose::after {
  position: absolute;

  content: "Oppure";
  color: var(--DarkColorPopUp);

  background-color: var(--LightColorPopUp);
  font-family: var(--font);
  font-weight: 600;

  padding-left: 3%;
  padding-right: 3%;
}
#Forget {
  display: none;
}

#SwitchText {
  display: none;
}

/*Menu*/
#Menu-mobile {
  display: none;
}
.NomeLogoMenu-mobile {
  display: none;
}
/*Menu*/

/*section*/
#WebConteiner {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: 100%;
  height: auto;
}
.section {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: 100vh;

  background: var(--WebContainerSection);

  overflow: hidden;
}
.section:nth-child(1) {
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.section:nth-child(1)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(src/Banner2.png);
  background-size: cover;
  background-position: center;
  filter: blur(20px) grayscale(100%);
  transform: scale(1.1); /* evita bordi bianchi dovuti al blur */
  z-index: -1;
}
.section:nth-child(2) {
  background: transparent;
}
/*section*/

/*Magazzino in Evidenza*/

#SearchBar-Container {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: 100%;
  height: auto;
}
.Mag-Evidenza {
  font-family: var(--font);
  color: var(--LightColorPopUp);

  margin-top: 5rem;

  font-weight: 500;
  text-transform: capitalize;
  font-size: clamp(0rem, 5vw, calc(5rem * 1.05));
  text-align: center;

  /*Animation*/
  opacity: 0;
  transform: translateY(-2rem);
}
.sub {
  margin: 0px;
  margin-top: 0.5rem;

  font-weight: 300;
  font-size: clamp(0rem, 1.5vw, calc(1.5rem * 1.05));
}
.mobile {
  display: none;
}

.Mag-text-animation-in {
  animation: text-animation 0.5s ease 1 forwards;
}
.Mag-text-animation-out {
  animation: text-animation-reverse 0.5s ease 1 forwards;
}
@keyframes text-animation {
  from {
    opacity: 0;
    transform: translateY(-2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes text-animation-reverse {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-2rem);
  }
}

/*SearchBar*/
#SearchBar {
  /*position: fixed;
    top: 5rem;*/
  top: 5rem;

  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: auto;

  margin-top: min(10.5rem, 10%);

  z-index: 101;
}
#Bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: min(80%, calc(80rem * 0.9));
  height: 4rem;

  background-color: var(--NavBar);
  border-radius: 3rem;
  border: 0.03rem solid rgba(0, 0, 0, 0.5);

  box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
    0.15rem -0.15rem 0.15rem var(--Ombra),
    -0.15rem -0.15rem 0.15rem var(--Ombra),
    0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5),
    -0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5);

  box-shadow: inset 0rem 0.3rem 0.3rem var(--Ombra);

  transition: height 0.2s;
}
#Goccia {
  position: absolute;

  width: 22rem;
  height: 22rem;

  fill: var(--NavBar);
  opacity: 0;

  z-index: 1;

  pointer-events: none;
}

.Bar-animation {
  animation: Bar-animation-3D 0.2s ease 1 forwards;
}
.Bar-animation-out {
  animation: Bar-animation-3D-out 0.2s ease 1 forwards;
}
@keyframes Bar-animation-3D {
  0% {
    box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
      0.15rem -0.15rem 0.15rem var(--Ombra),
      -0.15rem -0.15rem 0.15rem var(--Ombra),
      0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
      -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

    box-shadow: inset 0rem 0.3rem 0.3rem var(--Ombra);

    scale: 100%;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0.3rem 0.3rem 0.5rem var(--Ombra),
      -0.3rem 0.3rem 0.5rem var(--Ombra);

    scale: 102%;

    /*width: 4rem;*/
  }
}
@keyframes Bar-animation-3D-out {
  0% {
    box-shadow: 0.3rem 0.3rem 0.5rem var(--Ombra),
      -0.3rem 0.3rem 0.5rem var(--Ombra);

    scale: 102%;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
      0.15rem -0.15rem 0.15rem var(--Ombra),
      -0.15rem -0.15rem 0.15rem var(--Ombra),
      0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
      -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

    box-shadow: inset 0rem 0.3rem 0.3rem var(--Ombra);

    scale: 100%;
  }
}
.Bar-goccia-in {
  animation: Goccia-in 0.2s 1 forwards;
}
.Bar-goccia-out {
  animation: Goccia-out 0.2s 1 forwards;
}
@keyframes Goccia-in {
  0% {
    box-shadow: 0.3rem 0.3rem 0.5rem var(--Ombra),
      -0.3rem 0.3rem 0.5rem var(--Ombra);

    border-radius: 3rem;
  }
  100% {
    border-radius: 3rem;
    width: var(--Goccia-width);
  }
}
@keyframes Goccia-out {
  0% {
    border-radius: 3rem;
    width: var(--Goccia-width);
  }
  100% {
    box-shadow: 0.3rem 0.3rem 0.5rem var(--Ombra),
      -0.3rem 0.3rem 0.5rem var(--Ombra);

    border-radius: 3rem;
  }
}

#InputFormSearch {
  display: flex;
  align-items: center;
  justify-content: right;

  width: 100%;
  height: 100%;
}
#InputSearch {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  border: none;
  font-family: var(--font);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--LightColorPopUp);

  margin-left: 1.5rem;
}
#SearchButton {
  height: 60%;
  aspect-ratio: 1/1;

  fill: none;
  stroke-width: 0.3rem;
  stroke: var(--LightColorPopUp);

  background-color: transparent;
  border: none;
  outline: none;

  margin: 1rem;

  cursor: pointer;
}

#Filtri-Container {
  display: flex;
  align-items: center;
  justify-content: start;

  width: min(80%, calc(80rem * 0.9));
  height: 3rem;

  margin-top: 1rem;

  z-index: -1;
}
.Filtri-animation {
  animation: Filtri-adjusment 0.2s ease 1 forwards;
}
.Filtri-animation-out {
  animation: Filtri-adjusment-out 0.2s ease 1 forwards;
}
@keyframes Filtri-adjusment {
  from {
    scale: 100%;
    transform: none;
  }
  to {
    scale: 102%;
    transform: translateY(-125%);
    margin-top: 0px;
  }
}
@keyframes Filtri-adjusment-out {
  from {
    scale: 102%;
    transform: translateY(-125%);
    margin-top: 0px;
  }
  to {
    scale: 100%;
    transform: none;
  }
}
#Filtri {
  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(6rem, calc(10% + 2.5rem), 8rem);
  height: 100%;

  background-color: var(--NavBar);
  border-radius: 3rem;
  border: 0.03rem solid rgba(0, 0, 0, 0.5);

  box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
    0.15rem -0.15rem 0.15rem var(--Ombra),
    -0.15rem -0.15rem 0.15rem var(--Ombra),
    0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5),
    -0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5);

  box-shadow: inset 0rem 0.3rem 0.3rem var(--Ombra);

  cursor: pointer;
}
#Filtri svg {
  height: 60%;
  aspect-ratio: 1/1;

  fill: none;
  stroke-width: 0.2rem;
  stroke: var(--LightColorPopUp);

  margin-right: 10%;
}
#Filtri h1 {
  font-family: var(--font);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 500;
  color: var(--LightColorPopUp);
}
#Filtri {
  text-decoration: none;
}

#Card-Container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 25rem);

  justify-content: space-around;
  align-content: center;

  gap: 2.5rem;

  width: 80%;
  max-width: calc(90rem + 2.5rem * 2);
  height: auto;

  margin-top: calc(
    min(10.5rem, 10%) + 10rem
  ); /*se si cambia, aggiornare anche il js*/

  margin-bottom: 5rem;
}
.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;

  width: 25rem;
  height: 35rem;

  /*background-image: url(src/Banner2.png);*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 2rem;
}
.mobileCards {
  display: none;
}
.card-img {
  display: flex;
  align-items: start;
  justify-content: end;
  overflow: hidden;

  width: 100%;
  height: 45%;

  /*background-image: url(src/Banner2.png);*/
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  background-color: white;

  border-radius: 1rem 0rem 1rem 0rem;

  background-color: transparent;
}
.card-desc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;

  width: 100%;
  height: 45%;

  border-radius: 1rem 0rem 1rem 0rem;
  /*outline: 0.1rem solid var(--LightColorPopUp);*/

  /*border: 0.2rem solid rgb(33, 33, 33);*/

  border-radius: 0rem 0rem 2rem 2rem;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.4);
}
.card-desc h1 {
  display: flex;
  align-items: center;
  justify-content: start;

  width: 90%;
  line-height: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;

  font-family: var(--font);
  color: var(--LightColorPopUp);
  font-size: 2rem;

  font-weight: 600;
}
.card-desc p {
  font-family: var(--font);
  color: var(--LightColorPopUp);

  font-size: 1rem;
  font-weight: 300;

  width: 90%;
  height: 100%;

  overflow: scroll;
}

.Achievement {
  display: flex;
  align-items: center;
  justify-content: start;

  width: 90%;
  height: 2rem;

  margin-top: 1rem;
  margin-bottom: 1rem;

  filter: grayscale(100%);
}
.Achievement h1 {
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: min-content;
  white-space: nowrap;

  height: 100%;
  padding-left: 5%;
  padding-right: 5%;

  margin-right: 3%;

  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3rem;

  font-size: 1rem;
  font-weight: 300;

  text-transform: capitalize;
}
.card-desc a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  font-family: var(--font);
  color: var(--DarkColorPopUp);

  width: 90%;
  height: 12rem;

  background-color: var(--LightColorPopUp);
  border: none;

  border-radius: 2rem;

  font-size: 1.1rem;
  white-space: nowrap;
  font-weight: 700;

  cursor: pointer;

  margin-bottom: 1rem;
}

.Novita {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 2rem;

  transform: translateX(42%) translateY(35%) rotate(45deg);

  background-color: red;
}
.Novita h1 {
  font-family: var(--font);

  text-align: center;
  font-size: 1rem;
  color: var(--LightColorPopUp);
}

/*Filtri*/
.section:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  height: auto;
}
.FiltriTitolo {
  font-family: var(--font);
  color: var(--LightColorPopUp);

  margin-top: 2.5rem;

  font-weight: 500;
  text-transform: capitalize;
  font-size: clamp(0rem, 5vw, calc(5rem * 1.05));
  text-align: center;

  width: 100%;
  padding: 2%;

  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);

  line-height: 70%;
}
.FiltriTitolo span {
  font-weight: 300;
  font-size: clamp(0rem, 1.5vw, calc(1.5rem * 1.05));
}
.mobileFiltri {
  display: none;
}
#ContainerFiltriAttivi {
  display: flex;
  align-items: end;
  justify-content: start;

  width: 100%;
  height: auto;
}
#PopUpFiltri-Container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;

  width: calc(60vw - 5rem);
  aspect-ratio: 1;
  margin: 2.5rem;

  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);

  border-radius: 3rem;
}

.toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: calc(100% - 5rem);
  height: max(5%, 2.5rem);
  margin-top: 2.5rem;

  background: var(--LightGradientSwitch);
  border-radius: 3rem;

  font-family: var(--font);

  transition: all 0.2s ease;
}
.toggle:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.toggle input {
  display: none;
}

.toggle label {
  position: relative;
  z-index: 2;
  cursor: pointer;
  font-size: max(1.3vw, 1.3rem);
  color: var(--LightColorPopUp);
  transition: color 0.3s;
  letter-spacing: 0.1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 50%;
  height: calc(100% - 8px);

  text-transform: capitalize;
}

.toggle input:checked + input + .slider + label,
.toggle input#affitto:checked ~ label[for="affitto"] {
  color: var(--MarroneChiaroScritte);
  cursor: default;
}

.slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 50%;
  height: calc(100% - 8px);
  background: var(--DarkGradientSwitch);
  border-radius: 3rem;
  transition: transform 0.3s ease;
}

/* quando è selezionato "affitto" */
#affitto:checked ~ .slider {
  transform: translateX(calc(100% - 8px));
}

.slider-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;

  position: relative;
  width: 60%;
  height: max(20%, 9rem);

  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}
#ScrittaPrezzo {
  display: flex;
  align-items: center;
  justify-content: start;

  width: 100%;

  font-family: var(--font);
  font-size: max(1vw, 1rem);
  color: var(--LightColorPopUp);
  font-weight: 400;
  letter-spacing: 0.1rem;
}


.double-range {
  position: relative;
  width: 100%;
  height: 3.5rem;
  padding-bottom: 1.25rem;
  user-select: none;

  margin-right: 2.5rem;
}
.slider-container .double-range {
  margin-right: 0rem;
}

.ghost-range,
.logic-range {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* SOLO il ghost prende il touch */
.ghost-range {
  pointer-events: all;
  cursor: pointer;
  z-index: 10;
}

.track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.1rem;
  background: var(--DarkGradientSwitch);
  transform: translateY(-50%);
  border-radius: 1rem;
}
.slider-container .track{
  background: var(--LightGradientSwitch);
}

.fill {
  position: absolute;
  top: 50%;
  height: 0.2rem;
  background: var(--MarroneChiaroScritte);
  transform: translateY(-50%);
  border-radius: 1rem;
}

.thumb {
  position: absolute;
  top: 50%;
  width:1.25rem;
  aspect-ratio: 1;
  background:var(--LightGradientSwitch);
  border: 0.1rem solid var(--MarroneChiaroScritte);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.price-label {
  position: absolute;
  top: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-family: var(--font);
  font-weight: 600;
  white-space: nowrap;
  color: var(--LightColorPopUp);
}
.thumb-right .price-label{
  top: -1.8rem;
}

/*

#range {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.rangePrezzo {
  position: absolute;
  width: 100%;

  height: 0px;
  background-color: red;

  z-index: 1;
}

.rangePrezzo::-webkit-slider-thumb,
.rangePrezzo::-moz-range-thumb,
.rangePrezzo::-ms-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 3rem;
  background: var(--LightColorPopUp);
  border: 0.3rem solid var(--LightGradientSwitch);
  cursor: pointer;
}

.track {
  position: absolute;
  height: 0.3rem;
  bottom: -0.3rem;
  width: 100%;
  border-radius: 3rem;

  z-index: 0;

  border-top: 1px solid var(--LightGradientSwitch);

  pointer-events: none;
}

/* label prezzo 
.price-label {
  position: absolute;

  bottom: -2.5rem;
  transform: translateX(-50%);

  color: var(--LightColorPopUp);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font);

  white-space: nowrap;
  pointer-events: none;

  z-index: 1;
}

*/

/*Tipologia Magazzini*/
#tipologia-container {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: calc(100% - 5rem);
  height: auto;

  margin-top: 2.5rem;

  background-color: var(--LightGradientSwitch);
  border-radius: 3rem;

  color: var(--LightColorPopUp);
  font-family: var(--font);

  transition: all 0.2s ease;
}
#tipologia-container:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

#tipologia-container h1 {
  font-size: max(1.3vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 500;

  margin: 1.25rem;
  margin-bottom: 0px;
}
#tipologia {
  display: flex;
  flex-wrap: wrap;

  justify-content: space-around;
  align-content: center;

  width: calc(100% - 2.5rem);
  gap: 1.25rem;
  margin: 1.25rem;
}
.types {
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  width: auto;
  height: max(2vw, 2rem);
  white-space: nowrap;

  border-radius: 3rem;
}

.typesText {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;

  /*width: max(10vw , 10rem);*/

  padding-left: 1rem;
  padding-right: 1rem;

  height: 100%;

  border-radius: 3rem;

  border: 0.1rem solid var(--DarkGradientSwitch);

  font-family: var(--font);
  font-size: max(1vw, 1rem);
  letter-spacing: 0.1rem;
  text-transform: capitalize;
  font-weight: 300;

  cursor: pointer;
}

.typesCheck {
  width: 100%;
  height: 100%;

  border-radius: 3rem;

  cursor: pointer;

  position: absolute;
  opacity: 0;
}

.typesCheck:checked + text, /* non serve text, ma vediamo la logica */
.typesCheck:checked +   .typesText {
  /* funziona meglio con label intorno all'input */
  background-color: var(--MarroneBottoni);
  color: var(--MarroneChiaroScritte);
}

#Grandezze {
  display: flex;
  align-items: center;
  justify-content: start;

  height: auto;
  width: calc(100% - 5rem);

  margin: 2.5rem;
}
#sub-Grandezze {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  width: 60%;
}
.InputMagazzinoReact-Cont {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: auto;

  background-color: var(--LightGradientSwitch);
  border-radius: 3rem;

  transition: all 0.2s ease;
}

.InputMagazzinoReact-Cont:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.InputMagazzinoReact-Cont h1 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font);
  color: var(--LightColorPopUp);
  font-weight: 400;

  width: 15rem;
  line-height: 100%;
  padding: 2.5rem;

  font-size: max(1vw, 1rem);
  text-transform: capitalize;
  letter-spacing: 0.1rem;
}

#SearchSubmit {
  font-family: var(--font);
  margin-bottom: 2.5rem;

  width: max(20vw, 20rem);
  height: max(3vw, 3rem);

  border-radius: 3rem;

  text-transform: capitalize;
  letter-spacing: 0.1rem;

  background-color: var(--LightGradientSwitch);
  color: var(--LightColorPopUp);
  border: none;

  font-weight: 500;
  font-size: max(1.2vw, 1.5rem);

  cursor: pointer;

  animation: SubmitFilter 1.5s ease infinite forwards;
}
@keyframes SubmitFilter {
  0% {
    box-shadow: none;
  }
  10% {
    box-shadow: 0rem 0rem 0.5rem var(--MarroneChiaroScritte);
  }
}
#SearchSubmit span {
  font-size: max(1.5vw, 1.7rem);
  color: var(--MarroneChiaroScritte);
}

/*Filtri Info*/
#FiltriInfo {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: calc(40vw - 2.5rem);
  height: 100%;

  background-color: var(--LightGradientSwitch);
  border-radius: 3rem;

  margin-left: 2.5rem;

  transition: all 0.2s ease;
}
#FiltriInfo:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
}
#FiltriInfo h1 {
  color: var(--LightColorPopUp);
  font-family: var(--font);

  font-size: max(1.3vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 500;

  margin: 1.25rem;
  margin-bottom: 0px;
}

.select-magazzino-3D {
  width: calc(100% - 2.5rem);
  padding: 0.6rem 1rem;
  border-radius: 3rem;
  background: transparent;
  color: var(--LightColorPopUp);
  border: 0.1rem solid var(--DarkGradientSwitch);
  font-size: 0.95rem;

  margin: 1.25rem;
  margin-bottom: 0px;

  cursor: pointer;
}

.select-magazzino-3D:focus {
  background: var(--LightGradientSwitch);
}

#impianti {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  height: 100%;
  width: calc(100% - 2.5rem);

  background-color: var(--LightGradientSwitch);
  border-radius: 3rem;

  margin: 1.25rem;

  background-color: rgba(0, 0, 0, 0.3);
}
#impianti h1 {
  color: var(--LightColorPopUp);
  font-family: var(--font);

  font-size: max(1.3vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 500;

  margin: 1.25rem;
  margin-bottom: 0px;
}
#impianti-container {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  align-content: start;

  width: calc(100% - 2.5rem);

  gap: 1.25rem;

  margin: 1.25rem;
}
.impianto {
  position: relative;

  height: max(2vw, 2rem);

  display: flex;
  align-items: center;
  justify-content: center;
}
.impianto input {
  position: absolute;
  opacity: 0;

  width: 100%;
  height: 100%;

  border-radius: 3rem;

  cursor: pointer;
}
.impianto h2 {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;

  /*width: max(10vw , 10rem);*/

  padding-left: 1rem;
  padding-right: 1rem;

  height: 100%;

  border-radius: 3rem;

  border: 0.1rem solid var(--DarkGradientSwitch);
  color: var(--LightColorPopUp);

  font-family: var(--font);
  font-size: max(1vw, 1rem);
  letter-spacing: 0.1rem;
  text-transform: capitalize;
  font-weight: 300;

  cursor: pointer;
}
.impianto input:checked + text, /* non serve text, ma vediamo la logica */
.impianto input:checked + h2 {
  /* funziona meglio con label intorno all'input */
  background-color: var(--MarroneBottoni);
  color: var(--MarroneChiaroScritte);
}

/*Filtri*/

/*Magazzino 3D reattivo*/
.CanvaContainer {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: calc(50vw - 5rem);
  aspect-ratio: 1;

  margin-right: 2.5rem;

  margin-bottom: 2.5rem;

  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);

  border-radius: 3rem;
}
.Magazzino3D-React {
  position: absolute;
}
.mobileCanva {
  display: none;
}

/*Magazzino 3D reattivo*/

.Commenti {
  justify-content: center;
  height: auto;

  background: linear-gradient(
    var(--BackgroundColor),
    transparent,
    var(--BackgroundColor)
  );
  backdrop-filter: blur(20px);
}
.TitoloCommenti {
  font-family: var(--font);
  color: var(--LightColorPopUp);

  font-weight: 500;
  text-transform: capitalize;
  font-size: min(4vw, 4rem);
  text-align: center;
  white-space: nowrap;

  padding: 2.5rem;
  line-height: 70%;

  width: 100%;
}
.mobileTitoloCommenti {
  display: none;
}
.Commenti span {
  font-weight: 300;
  font-size: clamp(0rem, 1.5vw, calc(1.5rem * 1.05));
}
/*Carousel Recensioni*/
.Carousel-Recensioni {
  position: relative;

  display: flex;
  align-items: center;
  flex-direction: start;

  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);

  padding: 2.5rem;
  height: clamp(30rem, 40vw, 40rem);

  /* margin-top: 7.5rem;*/
}
.Recensioni-Container {
  height: calc(100% - 5rem);

  display: flex;
  align-items: center;
  justify-content: space-between;

  will-change: transform;

  animation: Carousel 60s linear forwards infinite;
}
.Carousel-Recensioni:last-child .Recensioni-Container {
  transform: translateX(-100%);
  animation-direction: reverse;
}
@keyframes Carousel {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.Recensione {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  height: 100%;
  aspect-ratio: 1.6;

  margin-right: 5rem;

  background-color: rgba(86, 88, 116, 0.3);
}
.FirstCommentSection {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 15%;
  background-color: rgba(0, 0, 0, 0.3);
}
.VirgoletteCommento {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Times New Roman", Times, serif;
  text-transform: uppercase;

  color: var(--LightColorPopUp);

  font-size: clamp(4rem, 5vw, 5rem);
  font-weight: 900;
  line-height: calc(100% - 2.5rem);

  margin: 1.25rem;
  margin-right: 2.5rem;
  margin-left: 2.5rem;
}
.stelline {
  display: flex;
  align-items: center;
  justify-content: space-around;

  height: calc(100% - 2.5rem);
  width: auto;

  gap: 0.5rem;

  margin: 1.25rem;
  margin-right: 2.5rem;
  margin-left: 2.5rem;
}
.stelline svg {
  height: 100%;
  aspect-ratio: 1/1;

  fill: var(--LightColorPopUp);
}
.testoCommento {
  position: relative;

  color: var(--LightColorPopUp);
  font-family: var(--font);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow-y: hidden;

  text-align: center;

  line-height: 1.5;

  width: calc(100% - 5rem);
  height: calc(65% - 5rem);

  margin-top: 2.5rem;
  margin-bottom: 1.25rem;

  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 300;
  word-spacing: 0.2rem;
}

.testoCommento.blur-end::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rem; /* ≈ altezza ultima riga */
  pointer-events: none;

  background: linear-gradient(
    180deg,
    transparent 80%,
    rgba(255, 255, 255, 0.286) 100%
  );
}
.testoCommento::before {
  position: absolute;
  content: "";

  left: 0px;
  bottom: 0rem;

  width: 100%;
  height: 0.1rem;

  background: linear-gradient(
    90deg,
    transparent 5%,
    var(--LightColorPopUp) 10%,
    var(--LightColorPopUp) 90%,
    transparent 95%
  );
}
.CommentoInfoPersona {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 20%;
  width: calc(100% - 5rem);
}
.CommentoInfoPersona h1 {
  color: var(--LightColorPopUp);

  font-family: "Courier New", Courier, monospace;
}
.UtenteCommento {
  letter-spacing: 0.1rem;
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 3rem);
}
.DataCommento {
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  letter-spacing: 0.1rem;
  font-weight: 300;
}
.DiPiuCommento {
  display: none;
  align-items: end;
  justify-content: end;

  position: absolute;

  bottom: 22.5%;
  right: 2.5rem;

  height: 100%;
  aspect-ratio: 1.6;
}
.LeggiCommento {
  color: var(--LightColorPopUp);
  white-space: nowrap;

  font-family: var(--font);
  font-size: 1rem;
  line-height: 1;
  font-weight: 300;
}
/*Carousel Recensioni*/

/*Footer*/
#Footer {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: 80% 20%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  width: 100%;
  height: 500px;

  background: var(--BackgroundColor);
}
#Footer * {
  font-family: var(--font);
  transition: none;
}

.Footer-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.Footer-sub:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}
.Footer-sub:nth-child(2) {
  grid-area: 1 / 2 / 2 / 3;

  flex-direction: row;
  justify-content: center;
}
.Footer-sub:nth-child(3) {
  justify-content: space-between;
  grid-area: 2 / 1 / 3 / 3;
}

#FooterCompanyLogo {
  color: var(--LightColorPopUp);

  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 100%;
}
#Dati-Azzienda-mobile {
  display: none;
}
.Dati-Azzienda {
  color: var(--LightColorPopUp);

  font-size: 1rem;
  font-weight: 100;
  opacity: 0.5;
}

.Footer-sub-cont {
  display: flex;
  align-items: center;
  justify-content: start;

  width: 80%;
  height: min-content;
}
.Footer-sub-cont:nth-child(1) {
  height: 20%;
}
.Footer-sub-cont:nth-child(2) {
  flex-direction: column;
  align-items: start;
  justify-content: center;

  height: 40%;
}
.Footer-sub-cont:nth-child(3) {
  height: 15%;
}
.Social3D-cont {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 50%;
  aspect-ratio: 1/1;

  margin-left: 1rem;
  border-radius: 50%;

  /*background-color: var(--LightColorPopUp);
    box-shadow: 0.05vw -0.2rem 0rem 0rem rgba(255, 255, 255, 0.8),
                -0.05rem 0.15rem 0.2rem var(--Ombra);

    transform:  translateY(0.2rem)
                translateX(-0.05vw);
*/
  border: 0.1rem solid var(--LightColorPopUp);
  /*background-color: rgba(255, 255, 255, 0.2);*/

  cursor: pointer;
}
.Social3D {
  width: 100%;
  aspect-ratio: 1/1;

  padding: 25%;
}
#ig {
  fill: white;
}
#fb {
  fill: white;
}
#tw {
  fill: white;
}
#tt {
  fill: white;
}

.Social3D-cont:active {
  transition: all 1s ease;
  box-shadow: none;
  transform: none;
}

.Social3D-cont:first-child {
  margin-left: 0%;
}

#LogoFooter-cont {
  height: 100%;
  aspect-ratio: 1/1;

  margin-right: 2%;
}
#LogoFooter {
  width: 100%;
  height: 100%;

  fill: var(--LightColorPopUp);
}

.scritte-Footer {
  text-align: start;

  display: flex;
  align-items: start;
  justify-content: space-around;
  flex-direction: column;

  height: 75%; /*somma delle 3 .Footer-sub-cont:nth-child*/

  color: var(--LightColorPopUp);

  padding-left: 15%;
  padding-right: 15%;
}
#scritte-Footer-mobile {
  display: none;
}
.scritte-Footer-h1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  white-space: nowrap;

  font-weight: 200;
  font-size: 1rem;

  height: calc((100% - 26.7%) / 5);

  color: var(--LightColorPopUp);
  text-decoration: none;

  cursor: pointer;
}
.scritte-Footer-h1::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.1rem;

  background-color: var(--MarroneChiaroScritte);

  top: 80%;
  width: 0%;
  transition: 0.5s width ease;
}
.scritte-Footer-h1:hover {
  color: var(--MarroneChiaroScritte);
}
.scritte-Footer-h1:hover::after {
  width: 100%;
}
.scritte-Footer h2 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: 1rem;
  height: 26.7%;

  opacity: 0.5;
}

#Redirect-Footer-cont {
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: 90%;
  height: 50%;

  border-top: 0.1rem solid var(--LightColorPopUp);
}
.Redirect-Footer-cont2 {
  display: flex;
  align-items: center;
  justify-content: center;

  border-right: 0.1rem solid var(--LightColorPopUp);

  width: 100%;
}
.Redirect-Footer-cont2:last-child {
  border: none;
}

.Redirect-Footer-text {
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  line-height: 100%;
  white-space: nowrap;

  color: var(--LightColorPopUp);

  font-weight: 600;
  font-size: 1rem;

  cursor: pointer;
}
.Redirect-Footer-cont2:first-child .Redirect-Footer-text {
  justify-content: start;
}
.Redirect-Footer-cont2:last-child .Redirect-Footer-text {
  justify-content: end;
}

.Redirect-Footer-text::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.1rem;

  background-color: var(--MarroneChiaroScritte);

  top: 100%;
  width: 0%;
  transition: 0.5s width ease;
}
.Redirect-Footer-text:hover {
  color: var(--MarroneChiaroScritte);
}
.Redirect-Footer-text:hover::after {
  width: 100%;
}

#copyright {
  font-family: var(--font);
  font-weight: 100;
  font-size: 0.8rem;

  color: var(--LightColorPopUp);

  opacity: 0.3;

  margin-bottom: 0.5rem;
}

/*Footer*/

/*@media (max-width: 80rem) {
  /* Passa a 2 card per riga */
/*.card-cont {
    grid-template-columns: repeat(2, 1fr);

    max-width: 50rem;
  }
}
@media (max-width: 50rem) {
  /* Passa a 2 card per riga */
/*.card-cont {
    grid-template-columns: repeat(1, 1fr);

    max-width: 50rem;
  }
  .card{
    margin: 0px;
    margin-bottom: 10%;
  }
  
}*/

@media only screen and (max-width: 100rem) {
  #Grandezze {
    flex-direction: column-reverse;
    height: auto;
  }
  #FiltriInfo {
    width: 100%;
    margin: 0px;
    margin-bottom: 2.5rem;
    height: auto;
  }
  #impianti-container {
    gap: 1rem;

    width: calc(100% - 5rem);

    margin: 2.5%;
  }

  #sub-Grandezze {
    width: 100%;
    height: auto;

    margin-bottom: 0px;
  }
  .InputMagazzinoReact-Cont {
    margin-bottom: 1.25rem;
  }
  .InputMagazzinoReact-Cont h1 {
    width: 10rem;
  }
  .InputMagazzinoReact-Cont:last-child {
    margin: 0px;
  }
  #SearchSubmit {
    width: calc(100% - 5rem);

    margin: 2.5rem;
    margin-top: 0px;
    height: 4rem;
  }
}

@media only screen and (max-width: 70rem) {
  #Card-Container {
    display: flex;
    align-items: center;
    overflow-x: scroll;
    /*scroll-snap-type: x mandatory;*/

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    transform-style: preserve-3d;
    perspective: 1000px;

    width: 100%;
    height: auto;

    padding-bottom: 3rem;
    padding-top: 3rem;
  }
  #Card-Container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .card {
    width: calc(25rem * 0.75);
    height: calc(35rem * 0.75);

    flex-shrink: 0;
    scroll-snap-align: center;

    backface-visibility: hidden;
    will-change: transform;
  }
  .card-desc h1 {
    margin-top: calc(1.5rem * 0.75);
    margin-bottom: calc(1rem * 0.75);
    font-size: calc(2rem * 0.75);
  }
  .card-desc p {
    font-size: calc(1.05rem * 0.75);
  }
  .card-desc button {
    font-size: calc(1.1rem * 0.75);
    height: calc(7rem * 0.75);

    margin-bottom: calc(1rem * 0.75);
  }
  .Achievement {
    height: calc(2.3rem * 0.75);

    margin-top: calc(1rem * 0.75);
    margin-bottom: calc(1rem * 0.75);
  }
  .Achievement h1 {
    font-size: calc(1.05rem * 0.75);
  }

  .mobileCards {
    display: flex;
  }

  .slider-container {
    width: calc(100% - 5rem);
  }
}

@media only screen and (max-width: 60rem) {
  :root {
    --translatePropety: translateY(calc(min(calc(120vw + 1rem), 47rem) - 100%));
    --Goccia-width: 3rem;
  }

  #NavBar {
    height: 3.5rem;
  }
  #LogoContainer {
    height: 3.5rem;
  }
  #Content {
    display: none;
  }
  #Login {
    display: none;
  }
  #Telefono {
    width: 100%;
  }
  .LoginMobileSVG {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    height: 50%;
    aspect-ratio: 1/1;

    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;

    background-color: var(--MarroneBottoni);
    border-radius: 0.6rem;
    padding: 0.3rem;

    transform: translateY(-0.2rem);

    border: 0.05rem solid rgba(0, 0, 0, 0.5);

    box-shadow: 0rem 0.2rem 0rem var(--MarroneBordi),
      0rem 0.3rem 0.2rem 0rem var(--Ombra);
  }

  .LoginMobileSVG:nth-child(1) {
    margin-left: 1rem;
  }
  .LoginMobileSVG:last-child {
    margin-right: 1rem;
  }

  .LoginMobileSVG:active {
    transform: translateY(-0.05rem);
    box-shadow: -0rem 0rem 0rem 0.03rem rgba(0, 0, 0, 0.4),
      -0rem 0.05rem 0rem var(--MarroneBordi);
  }
  .SVG {
    width: 100%;
    height: 100%;
    fill: var(--MarroneScritte);
  }
  .LoginMobileSVG h1 {
    font-size: 0.55rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;

    color: var(--Registrati);
  }

  .BottoniPiatti {
    animation: BottoniPiattiAnim 0.2s 1 forwards;
  }
  @keyframes BottoniPiattiAnim {
    0% {
    }
    100% {
      box-shadow: none;
      background-color: var(--NavBar);

      --Registrati: var(--MarroneScritte);

      transform: none;
    }
  }
  .Bottoni3D {
    animation: Bottoni3DAnim 0.2s 1 forwards;
  }
  @keyframes Bottoni3DAnim {
    0% {
      box-shadow: none;
      background-color: var(--NavBar);

      --Registrati: var(--MarroneScritte);
      transform: none;
    }
    100% {
    }
  }

  /*SVG*/

  /*SVG*/

  #LoginMobileContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 60%;
    aspect-ratio: 1/1;

    margin: 0.6rem;
    border-radius: 10rem;

    background: linear-gradient(
      -45deg,
      var(--MarroneBordi),
      var(--MarroneBordi2)
    );
    box-shadow: 0.1rem 0.1rem 0.1rem var(--Ombra);

    transition: all 0.1s linear;

    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #LoginMobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    height: 100%;
    width: 100%;

    border-radius: 10rem;
    background-color: var(--MarroneBottoni);

    box-shadow: inset 0.05rem 0.1rem 0.1rem var(--Luce);

    transform: translateX(0.05rem) translateY(-0.1rem);

    transition: all 0.1s linear;
  }
  #LoginMobileContainer:active {
    box-shadow: none;
  }
  #LoginMobileContainer:active #LoginMobile {
    box-shadow: none;
    transform: none;
  }
  #Testa {
    display: flex;
    align-items: end;
    justify-content: center;

    height: 30%;
    aspect-ratio: 1/1;
    border-radius: 1rem;

    margin-bottom: 0.05rem;

    box-shadow: inset 0rem 0rem 0rem 0.1rem var(--NavBar);
  }
  #Testa::after {
    position: absolute;
    content: "";
    width: 0.1rem;
    height: 0.25rem;

    background-color: var(--NavBar);
    transform: translateX(0.4rem) translateY(0.15rem) rotate(-45deg);

    border-radius: 0.2rem;
  }
  #Testa::before {
    position: absolute;
    content: "";
    width: 0.1rem;
    height: 0.4rem;

    background-color: var(--NavBar);
    transform: translateX(0.4rem) translateY(calc(50% + 0.125rem)) rotate(45deg)
      translateY(calc(-50% - 0.025rem));

    border-radius: 0.2rem;
  }
  #Corpo {
    height: 40%;
    aspect-ratio: 1.3/1;
    border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;

    box-shadow: inset 0rem 0rem 0rem 0.1rem var(--NavBar);
  }

  @keyframes NavBarIncavata {
    0% {
      box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
        -0.4rem 0.4rem 0.4rem var(--Ombra);

      scale: 101%;
    }
    50% {
      box-shadow: none;
    }
    100% {
      box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
        0.15rem -0.15rem 0.15rem var(--Ombra),
        -0.15rem -0.15rem 0.15rem var(--Ombra),
        0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
        -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

      scale: 100%;
    }
  }

  @keyframes NavBarVolante {
    0% {
      box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
        0.15rem -0.15rem 0.15rem var(--Ombra),
        -0.15rem -0.15rem 0.15rem var(--Ombra),
        0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
        -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

      scale: 100%;
    }
    50% {
      box-shadow: none;
    }
    100% {
      box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
        -0.4rem 0.4rem 0.4rem var(--Ombra);

      scale: 101%;
    }
  }

  /*PopUp*/

  #SignInPopUp {
    position: relative;
    justify-content: start;
    flex-direction: column;

    width: min(calc(90vw + 1rem), 35rem);
    height: min(calc(120vw + 1rem), 47rem);

    transform: translateZ(0px);

    background: linear-gradient(
      0deg,
      var(--DarkGradientSwitch) 5%,
      var(--LightGradientSwitch) 40%,
      var(--LightGradientSwitch) 60%,
      var(--DarkGradientSwitch) 95%
    );
  }
  #ClosePopUp {
    right: unset;
    top: calc((100vh - min(calc(120vw + 1rem), 47rem)) / 2 - 9rem);
  }
  #Xanimation {
    display: none;
  }
  #XanimationMobile {
    display: flex;
    width: 100%;
    height: 100%;

    fill: var(--XColor);
  }
  #XPopUp svg {
    fill: var(--XColorMobile);
  }

  #SwitchPopUp {
    width: 100%;
    height: 25%;

    /*transform:translateY(calc( min(calc(120vw + 1rem),50rem) - 100%));*/
  }
  #Welcome1 {
    display: none;
  }
  #Welcome1-mobile {
    display: flex;
    text-align: center;
    font-family: var(--font);
    font-size: min(7vw, 2.6rem);
    font-weight: 500;
    line-height: 100%;

    letter-spacing: 5%;

    color: var(--LightColorPopUp);
  }
  #Slogan1 {
    display: none;
  }
  #Slogan1-mobile {
    display: flex;

    font-family: var(--font);
    text-align: center;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 4%;

    color: var(--LightColorPopUp);

    margin-top: 2.5%;

    font-size: min(2.5vw, 0.95rem);
  }
  #Switch1 {
    display: none;
  }

  #FormPopUp {
    width: 100%;
    height: 75%;

    transform: var(--translatePropety);
    border-radius: 3rem;
    /*Move To Other Side*/
    /*transform: none;*/
  }
  #Form {
    justify-content: start;
  }
  .Welcome2 {
    display: none;
  }
  #Welcome2-mobile {
    display: flex;
    text-align: center;

    font-family: var(--font);
    font-size: min(10vw, 3.8rem);
    font-weight: 600;
    line-height: 100%;

    color: var(--DarkGradientSwitch);

    margin-top: 4%;
    padding-bottom: 4%;
  }
  #Slogan2 {
    display: none;
  }
  #InputFormContainer {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    width: 70%;
    height: auto;
  }
  #InputForm {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    width: 100%;
    height: min(var(--media-height), var(--media-min-height));
  }
  .inputForm {
    width: 100%;
    font-size: min(3vw, 1.15rem);

    line-height: 200%;

    border: 0.05rem solid var(--DarkGradientSwitch);
  }

  #Alternative {
    width: 70%;
    font-size: min(2vw, 0.75rem);
  }
  #SwitchText {
    font-family: var(--font);

    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--DarkGradientSwitch);

    font-size: min(3vw, 1.15rem);
    font-weight: 500;

    bottom: 4%;

    white-space: nowrap;
  }
  #SwitchText a {
    color: var(--LightGradientSwitch);
    text-decoration: underline;

    padding-top: 4%;
    padding-bottom: 4%;

    font-weight: 600;

    cursor: pointer;
  }

  /*PopUp*/

  /*Menu*/
  #Menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 100%;
    height: calc(100% - max(20%, 3.5rem));

    overflow: hidden;
  }

  .foot-menu-mobile {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 15%;
  }
  #ContentMenu-mobile {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    width: 100%;
    height: 85%;

    /* background: linear-gradient(var(--CenterMenuColor)0%,var(--SideMenuColor1)10%,var(--SideMenuColor1)90%,var(--CenterMenuColor)100%);*/
    background: var(--SideMenuColor1);
  }

  #MenuUserLogo-mobile {
    width: 30%;
    height: 30%;

    fill: var(--LightColorPopUp);
  }
  .MenuLogoContainer-mobile {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    aspect-ratio: 1/1;
  }
  .NomeLogoMenu-mobile {
    position: absolute;
    display: flex;
    opacity: 0;
    align-items: start;
    justify-content: center;

    color: var(--LightColorPopUp);
    font-family: var(--font);

    font-size: 2vh;

    font-weight: 500;

    width: auto;
    white-space: nowrap;
    overflow: hidden;

    margin-top: 30%;

    z-index: -1;
  }
  .foot-menu-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  #LoginMenu {
    position: relative;
    opacity: 1;

    font-family: var(--font);

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 3.5vw;

    height: min-content;

    color: var(--LightColorPopUp);

    margin-right: 5%;

    white-space: nowrap;
  }

  #LoginMenu::after {
    content: "Account base";

    font-family: var(--font);

    font-size: 2.5vw;
    color: var(--DarkColorPopUp);
    opacity: 0.5;

    font-weight: 700;
  }

  .SingleContentMenu {
    display: flex;
    align-items: center;
    justify-content: start;

    width: 80%;
    height: max(4vh, 2rem);

    cursor: pointer;
  }
  .SingleContentMenu:last-child {
    margin-bottom: 5vh;
  }
  .SingleContentMenu:first-child {
    margin-top: 5vh;
  }

  .SingleContentMenu:hover > .SingleContentText {
    color: var(--MarroneChiaroScritte);
  }
  .SingleContentMenu:hover > .SingleContentText::after {
    width: 100%;
  }

  .SingleContentLogoContainer {
    height: 100%;
    aspect-ratio: 1/1;

    margin-left: calc(50% - (max(4vh, 2rem) / 2));
  }
  .SvgMenu {
    width: 100%;
    height: 100%;

    fill: transparent;
    stroke-width: 7%;
    stroke: var(--LightGradientSwitch);
  }
  .SvgMenuChiSiamo {
    width: 100%;
    height: 100%;

    fill: var(--LightGradientSwitch);
  }
  .SvgMenuChiSiamo2 {
    width: 100%;
    height: 100%;

    fill: var(--LightGradientSwitch);
    stroke-width: -5%;
    stroke: var(--SideMenuColor1);
  }
  .SingleContentText {
    display: none;
    justify-content: start;
    align-items: end;
    position: relative;

    width: 0%;

    font-family: var(--font);

    color: var(--MarroneScritte);
    margin-left: 5%;

    font-size: 1.5vh;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;
  }
  .SingleContentText::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 0.2vw;

    background-color: var(--MarroneChiaroScritte);

    transition: width 0.4s ease;
  }

  /*Menu*/

  /*Magazzini In Evidenza*/
  .Mag-Evidenza {
    display: none;
  }
  .mobile {
    display: flex;

    font-size: clamp(calc(8rem * 0.15), 8vw, calc(5rem * 0.6));
  }
  .sub {
    font-size: clamp(calc(3rem * 0.15), 3vw, calc(1.5rem * 0.6));
  }
  #SearchBar {
    margin-top: clamp(3rem, 20%, 7.5rem);
  }
  #Bar {
    height: 3rem;
  }
  #Goccia {
    width: 16rem;
    height: 16rem;
  }
  #Filtri-Container {
    height: 2rem;
    margin-top: 0.5rem;
  }
  #InputSearch {
    margin-left: 1rem;
  }

  /*.section-sub:last-child{
        width: 100%;

        overflow: hidden;
    }
    .card-cont{
        overflow: auto;
        scroll-snap-type: x mandatory;
        display: flex;
        
    }
    .card{
        flex: 0 0 50vw; /* larghezza *fissa* di 50rem */
  /*height: 70vw;
        padding: 0%;
        margin: -3%;

        margin-top: 5%;
        margin-bottom: 5%;

        transition: none;

        scroll-snap-align: center;
    }
    .card:hover{
        scale: none;
        box-shadow: none;
    }
    .card-desc p{
        font-size: 2.5vw;
    }
    .card-desc button{
        font-size: 2vw;
    }

/*Magazzini In Evidenza*/

  /*Filtri*/

  .FiltriTitolo {
    display: none;
  }
  .mobileFiltri {
    display: unset;

    font-size: min(10vw, calc(10rem * 0.3));

    line-height: 70%;

    padding: 5%;

    margin-top: 5%;
  }
  .mobileFiltri span {
    font-size: min(4vw, calc(4rem * 0.3));
    line-height: 100%;

    font-weight: 300;
  }

  #ContainerFiltriAttivi {
    align-items: center;
    flex-direction: column;
  }
  #PopUpFiltri-Container {
    width: calc(100% - 5%);

    margin: 2.5%;
    border-radius: 2rem;
  }

  .toggle {
    width: calc(100% - 2rem);
    height: min(25vw, 5rem);
    margin: 1rem;
    border-radius: 2rem;

    margin-bottom: 0px;
  }
  .toggle label {
    font-size: min(4vw, 1.6rem);
  }

  .slider-container {
    width: calc(100% - 4rem);

    margin: 2rem;
    margin-bottom: 2.5rem;
  }
  #ScrittaPrezzo {
    font-size: min(3vw, 1.6rem);
  }
  .price-label{
    font-size: 0.8rem;
  }

  #tipologia-container {
    width: calc(100% - 2rem);
    margin: 1rem;
    margin-bottom: 0px;

    border-radius: 2rem;
  }
  #tipologia-container h1 {
    font-size: min(4vw, 1.6rem);
    margin-top: 1rem;
  }
  #tipologia {
    width: calc(100% - 2rem);
    margin: 1rem;

    gap: 1rem;
  }
  .typesText {
    border: 0.1rem solid var(--DarkGradientSwitch);
    font-size: min(3.5vw, 1.2rem);
  }

  #Grandezze {
    width: calc(100% - 2rem);
    margin: 1rem;
    margin-bottom: 0px;
  }
  #FiltriInfo {
    margin: 0px;
    border-radius: 2rem;
  }
  #FiltriInfo h1 {
    font-size: min(4vw, 1.6rem);
    margin-top: 1rem;
  }
  .select-magazzino-3D {
    width: calc(100% - 2rem);
    margin: 1rem;
    margin-bottom: 0px;
    border: 0.1rem solid var(--DarkGradientSwitch);
  }
  #impianti {
    width: calc(100% - 2rem);
    border-radius: 2rem;
    margin: 1rem;
  }
  #impianti-container {
    width: calc(100% - 2rem);
    margin: 1rem;
  }
  .impianto h2 {
    border: 0.1rem solid var(--DarkGradientSwitch);
    font-size: min(3.5vw, 1.2rem);
  }

  #sub-Grandezze {
    margin: 1rem;
    margin-bottom: 0px;
  }
  .InputMagazzinoReact-Cont {
    justify-content: space-between;
    margin-bottom: 1rem;

    height: auto;

    border-radius: 2rem;
  }
  .InputMagazzinoReact-Cont h1 {
    font-size: min(3.5vw, 1.2rem);
    width: max-content;
    padding: 2rem;
  }
  .double-range{
    width: 55%;
  }

  .CanvaContainer {
    width: calc(100% - 5rem);
    aspect-ratio: 1/1;
    margin: 0px;
    margin-bottom: 5%;
  }
  .CanvaContainer {
    display: none;
  }
  .mobileCanva {
    display: flex;

    width: calc(100% - 2rem);
    margin: 1rem;
    margin-bottom: 0px;

    background-color: transparent;
    backdrop-filter: none;
  }

  #SearchSubmit {
    width: calc(100% - 2rem);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 2rem;

    font-size: min(5vw, 1.6rem);

    font-weight: 400;

    margin: 1rem;
  }
  #SearchSubmit span {
    font-size: min(5vw, 1.6rem);
  }
  /*Filtri*/

  /*Commenti*/

  .TitoloCommenti {
    display: none;
  }
  .mobileTitoloCommenti {
    display: unset;

    font-size: min(9vw, calc(9rem * 0.3));

    line-height: 70%;

    padding: 5%;

    margin: 5%;
  }
  .mobileTitoloCommenti span {
    font-size: min(4vw, calc(4rem * 0.3));
    line-height: 100%;

    font-weight: 300;
  }

  .Carousel-Recensioni {
    height: min(125vw , 50rem);
    padding: 0px;
    margin: 0px;
  }
  .Recensione {
    height: 100%;
    aspect-ratio: 0.7;

    margin-right: 2.5rem;
  }
  .VirgoletteCommento {
    display: none;
  }
  .FirstCommentSection {
    justify-content: center;
  }
  .stelline {
    height: 30%;

    gap: 0.5rem;
  }
  .testoCommento {
    display: flex;
    align-items: start;
    justify-content: center;

    font-size: clamp(1rem,3.8vw,1.5rem);
    width: calc(100% - 2.5rem);
    height: 100%;

    margin: 1.25rem;
    margin-bottom: 0px;
  }
  .CommentoInfoPersona {
    flex-direction: column;
    justify-content: center;
    align-items: start;

    width: calc(100% - 2.5rem);
    height: auto;

    margin: 1.25rem;
    margin-top: 0px;
  }
  .UtenteCommento {
    font-size: 1rem;
    white-space: nowrap;

    margin: 0px;
    line-height: 1;
  }
  .DataCommento {
    line-height: 1;
    margin: 0px;
  }

  .DiPiuCommento {
    display: flex !important;
    justify-content: end;
    align-items: center;
    position: relative;

    width: 80%;
    height: 1.25rem;

    padding: 0px;
    margin: 0.5rem;
    margin-bottom: 1.25rem;

    bottom: unset;
    right: unset;
  }
  /*Commenti*/

  /*Footer*/
  #Footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    height: min(160vw, 76rem);
  }

  .Footer-sub {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    width: 100%;
    height: 100%;
  }
  .Footer-sub:nth-child(1) {
    justify-content: start;
    height: 75%;
  }
  .Footer-sub:nth-child(2) {
    display: none;
  }
  .Footer-sub:nth-child(3) {
    justify-content: space-between;

    height: 25%;

    background-color: var(--BordoNavbar);
  }

  #FooterCompanyLogo {
    font-size: min(8vw, 3rem);
  }

  .Dati-Azzienda {
    display: none;
  }
  #Dati-Azzienda-mobile {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;

    width: 100%;
    height: 100%;
  }
  .Dati-Azzienda-mobile {
    color: var(--LightColorPopUp);

    font-size: min(2.5vw, 1.2rem);
    font-weight: 100;
    opacity: 0.5;

    line-height: 200%;

    margin-left: 5%;
  }
  .Dati-Azzienda-mobile h1 {
    color: var(--LightColorPopUp);
    text-decoration: none;
    -webkit-touch-callout: none;
  }

  .Footer-sub-cont {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 80%;
    height: min-content;
  }
  .Footer-sub-cont:nth-child(1) {
    height: 10%;

    margin-top: 5%;
  }
  .Footer-sub-cont:nth-child(2) {
    flex-direction: column;
    align-items: start;
    justify-content: center;

    height: 65%;

    margin-top: 2%;
  }
  .Footer-sub-cont:nth-child(3) {
    height: 6%;

    margin-top: 2%;
  }

  .Social3D-cont {
    height: 100%;

    /*border: 0.05rem solid rgba(0, 0, 0, 0.5);
        box-shadow: 0rem -0.15rem 0rem 0rem rgba(255, 255, 255, 0.8),
                    0rem 0.2rem 0.2rem var(--Ombra);

        transform:  translateY(0.15rem)
                    translateX(0rem);*/

    border: 0.12rem solid var(--LightColorPopUp);
  }

  .scritte-Footer {
    display: none;
  }
  #scritte-Footer-mobile {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .scritte-Footer-h1 {
    font-size: min(4vw, 1.5rem);
  }

  #Redirect-Footer-cont {
    display: none;
  }

  #copyright {
    font-size: min(2.5vw, 0.8rem);
  }
  /*Footer*/
}