:root {
  --colore-testo-nero: black;
  --colore-sfondo-grigio: #f1f1f1;
  --colore-sfondo-bianco: #ffffff;
  --custom-transition-bezier: ease-in-out;
  --colore-rosa-dfi-100: #770068;
  --colore-rosa-dfi-90: #b13e90;
  --colore-rosa-dfi-60: #e58dce;
  --rosa-sfondo-40: #fcf2fa;
  --primitives-color-white: rgba(255, 255, 255, 1);
  --misura64px: 64px;
  --misura32px: 32px;
  --font-noto-sans: 'Noto Sans', Helvetica;
  --font-kulim-park: 'Kulim Park', Helvetica;
  --card-ombra: 0px 0px 10px 2px rgba(0, 0, 0, 0.05);
  --ombra-header: 0 4px 10px rgba(0, 0, 0, 0.03);

  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 20px;
  --swiper-navigation-color: var(--colore-rosa-dfi-100);
  --swiper-pagination-color: var(--colore-rosa-dfi-100);

  --padding-mobile-16px: 16px;
  --padding-mobile-32px: 32px;

  --misura-font-h1: clamp(3rem, calc(2.636rem + 1.818vw), 4rem);
  --misura-font-h2: clamp(2rem, calc(1.636rem + 1.818vw), 3rem);
  --misura-font-h3: clamp(1.8rem, calc(1.727rem + 0.364vw), 2rem);
  --misura-font-h4: clamp(1.4rem, calc(1.273rem + 0.636vw), 1.75rem);
  --misura-font-h5: clamp(1.1rem, calc(0.955rem + 0.727vw), 1.5rem);
  --misura-font-p: 1rem;
  --misura-font-p-big: 1.2rem;
  --misura-font-p-small: 0.85rem;
  --misura-font-p-tiny: 0.75rem;

  --testo-keywords-font-family: 'Kulim Park', Helvetica;
  --testo-keywords-letter-spacing: -0.24px;
  --testo-keywords-line-height: 100%;
  --testo-keywords-font-style: normal;

  --caption-small-func-font-weight: 500;
  --caption-small-func-letter-spacing: 0px;
  --caption-small-func-line-height: 100%;
  --caption-small-func-font-style: normal;
  --card-text-font-family: 'Noto Sans', Helvetica;
  --card-text-font-weight: 400;
  --card-text-letter-spacing: 0px;
  --card-text-line-height: 129.99999523162842%;
  --card-text-font-style: normal;
  --h2-sect-font-style: normal;

  --h3-card-title-font-weight: 700;

  --h3-card-title-letter-spacing: -0.96px;
  --h3-card-title-line-height: 100%;
  --h3-card-title-font-style: normal;
  --ombra-bevendy: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);

  --variable-collection-linea-divisione: rgba(0, 0, 0, 0.5);
  --spacing-sizing-page-padding-padding-global: 64px;
  --spacing-sizing-section-padding-padding-section-large: 112px;
  --spacing-sizing-container-container-large: 1280px;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-noto-sans);
  background-color: var(--colore-sfondo-bianco);
}

/* ==========================================
   classi generiche site-wise
   ========================================== */

.titolo-h1-hero,
h1 {
  font-family: var(--font-kulim-park);
  font-style: normal;
  font-weight: 700;
  font-size: var(--misura-font-h1);
  line-height: 100%;
  /* or 64px */
  margin: 0px;
  letter-spacing: -0.007em;
}

.titolo-h2,
h2 {
  font-family: var(--font-kulim-park);
  font-style: normal;
  font-weight: 700;
  font-size: var(--misura-font-h2);
  line-height: 100%;
  /* or 48px */
  letter-spacing: -0.03em;
  margin: 0px;
}

.titolo-h3,
h3 {
  font-family: 'Kulim Park';
  font-style: normal;
  font-weight: 700;
  font-size: var(--misura-font-h3);
  line-height: 100%;
  margin: 0px;
  /* or 32px */
}

.titolo-h4,
h4 {
  font-family: var(--font-kulim-park);
  font-style: normal;
  font-weight: 700;
  font-size: var(--misura-font-h4);
  line-height: 110%;
  margin: 0px;
}

.titolo-h5,
h5 {
  font-family: var(--font-kulim-park);
  font-style: normal;
  font-weight: 600;
  font-size: var(--misura-font-h5);
  line-height: 110%;
  letter-spacing: -0.02em;
  margin: 0px;
}

.testo-paragrafo,
p {
  font-family: var(--font-noto-sans);
  font-style: normal;
  font-weight: 300;
  font-size: var(--misura-font-p);
  line-height: 140%;
  margin: 0px;
  /* or 24px */
}

b {
  font-family: var(--font-noto-sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--misura-font-p);
  line-height: 140%;
  margin: 0px;
  /* or 24px */
}

.eyebrow {
  border-radius: 30px;
  padding: 4px 8px;
  background-color: white;
  font-family: var(--font-kulim-park);
  font-size: var(--misura-font-p-small);
  font-weight: 700;
  line-height: 100%;
  color: var(--colore-rosa-dfi-100);
}

.text-center {
  text-align: center;
}

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

  padding: 12px 24px;
  color: var(--primitives-color-white);

  border-radius: 24px;
  border: 1px solid;
  border-color: var(--colore-rosa-dfi-90);
  background-color: var(--colore-rosa-dfi-90);

  font-family: var(--font-noto-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--misura-font-p);
  line-height: 100%;
  letter-spacing: -0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3 ease-in-out;
}
.buttons:hover {
  transform: scale(0.9);
  transition: all 0.3 ease-in-out;
}
.bottone-testo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
  gap: 0.25rem;
  color: var(--colore-testo-nero);

  font-family: var(--font-noto-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--misura-font-p);
  line-height: 110%;
  letter-spacing: -0.02em;
  text-decoration: none;

  background: transparent;
  border: none;
}

.pillow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 24px;
  white-space: nowrap;
  transition: transform 0.2s var(--custom-transition-bezier);
  font-family: var(--testo-keywords-font-family);
  font-style: normal;
  font-weight: 700;
  font-size: var(--misura-font-p-small);
  line-height: 22px;
  color: #ffffff;
  background: var(--colore-rosa-dfi-100);
  border-radius: 120px;
}

.max-width-600 {
  max-width: 600px !important;
}

.no-padding-block {
  padding-block: 0px !important;
}
.text-center {
  text-align: center !important;
}

.hidden-desktop {
  display: none;
}

.container-sezione-contenuto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: var(--spacing-sizing-section-padding-padding-section-large)
    var(--spacing-sizing-page-padding-padding-global)
    var(--spacing-sizing-section-padding-padding-section-large)
    var(--spacing-sizing-page-padding-padding-global);
  background-color: var(--colore-sfondo-bianco);
}

.contenitore-generale {
  max-width: 1300px;
  display: flex;
  gap: var(--misura64px);
}

@media (max-width: 767px) {
  .contenitore-generale {
    max-width: 1300px;
    display: flex;
    gap: var(--misura32px);
  }

  .container-sezione-contenuto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--misura64px);
    padding: 3rem 16px;
    background-color: var(--colore-sfondo-bianco);
  }

  .hidden-mobile {
    display: none !important;
  }
}
/* ==========================================
   classi Header
   ========================================== */

header .wrap-header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primitives-color-white);
}

header .wrap-header-logo-cta {
  display: flex;
  max-width: 1300px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0px 64px;
}

header .hamburger {
  display: none;
}

header .contenitore-header {
  display: flex;
  width: 100vw;
  height: 70px;

  background-color: var(--primitives-color-white);

  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  z-index: 105;
}
header .menu-headers {
  z-index: 101;
}
header .wrap-header.label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  color: var(--tokens-colors-text-on-action-secondary);
  font-size: var(--misura-font-p);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

header .header-menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
}

header .menu-item {
  padding: 8px 16px;
  text-decoration: none;
  list-style-type: none;

  font-family: var(--font-noto-sans);
}
header .menu-item a {
  text-decoration: none;
  color: var(--colore-testo-nero);
}
/*mobile menu*/

header .nav-menu-mobile {
  z-index: 101;
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100svh;
  width: 100vw;
  background: var(--primitives-color-white);
  max-height: 0px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

header .menu-mobile {
  flex-grow: 1;
}

header .mobile-menu-wrap {
  gap: 32px;
  padding: 6rem 1rem 2rem 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

header .buttons-header {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #000000;
}
header .footer-socials {
  justify-content: space-around;
}

header .footer-socials a {
  color: #000000;
  font-size: var(--misura-font-h4);
  text-decoration: none;
}

header .header-menu-mobile {
  gap: 32px;
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

/*hamburger menu animazione*/
header .hamburger {
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1;
}

header .toggle-input {
  display: none;
}

header .line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--colore-testo-nero);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

header .top {
  top: 0;
}
header .middle {
  top: 50%;
  transform: translateY(-50%);
}
header .bottom {
  bottom: 0;
}

header .toggle-input:checked ~ .top {
  transform: rotate(45deg);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

header .toggle-input:checked ~ .middle {
  opacity: 0;
}

header .toggle-input:checked ~ .bottom {
  transform: rotate(-45deg);
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

header #menu-custom.active {
  display: flex;
  z-index: 999;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

header #menu-custom {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: none;
}

header .menu-hidden-desktop {
  display: none;
}

@media (min-width: 1300px) {
  header .wrap-header-logo-cta {
    padding: 0px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  header .wrap-header-logo-cta {
    padding: 0px 16px;
  }

  header .menu-invisible-mobile {
    display: none;
  }

  header .menu-hidden-desktop {
    display: inline-block;
  }

  header .menu-item a {
    font-size: var(--misura-font-p-big);
  }
}

/* fine header */

/* ==========================================
   classi herosection 
   ========================================== */

.contenitore-generale-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 2rem;

  max-width: 1000px;
}
.hero-bg {
  background:
    linear-gradient(
      180deg,
      var(--colore-sfondo-bianco) 0%,
      rgba(255, 255, 255, 0.3) 5.29%,
      rgba(255, 255, 255, 0.3) 40.61%,
      var(--colore-sfondo-bianco) 70.83%
    ),
    url(../images/background-dfi.png), var(--colore-sfondo-bianco);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
}

.container-titolo-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.gruppo-bottoni-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 767px) {
  .gruppo-bottoni-hero {
    flex-direction: column;
  }
  .hero-bg {
    background:
      linear-gradient(
        180deg,
        var(--colore-sfondo-bianco) 0%,
        rgba(255, 255, 255, 0.3) 5.29%,
        rgba(255, 255, 255, 0.1) 40.61%,
        var(--colore-sfondo-bianco) 90.83%
      ),
      url(../images/background-dfi.png), var(--colore-sfondo-bianco);
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto 50%;
  }
}

/* ==========================================
   classi template contenuto img + testo
   ========================================== */

.wrapper-sezione-about p {
  margin: 0px;
  font-family: var(--font-noto-sans);
  font-style: normal;
  font-weight: 300;
  font-size: var(--misura-font-p);
  line-height: 140%;
  /* or 24px */
}

.wrapper-sezione-about .blocco-contenuto-testuale {
  justify-content: space-between;
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.wrapper-sezione-about .blocco-contenuto-testuale-interno {
  gap: 1rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.wrapper-sezione-about .riga-img-testo {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 8px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.wrapper-sezione-about .list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.wrapper-sezione-about .sez-contenuto-icona {
  width: 32px;
  height: 32px;
}

.wrapper-sezione-about .scene-bold {
  position: relative;
  width: 600px;
  height: 600px;
  aspect-ratio: 1;
  object-fit: cover;
}

.wrapper-sezione-about .container {
  width: 100%;
}

.wrapper-sezione-about .immagine-lottie {
  display: flex;
  width: 50%;
}

.lottie-animation {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  height: auto;
  border-radius: 16px;
  background-color: var(--colore-rosa-dfi-60);
}
/* stili per row e row-revese */
.sezione-about-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4rem;
}

.wrapper-sezione-about .row-reverse {
  flex-direction: row-reverse;
}

.sinistra .row {
  flex-direction: row-reverse;
}

.sinistra .row-reverse {
  flex-direction: row;
}

.row .immagine-lottie {
  justify-content: flex-end;
}

@media (max-width: 1360px) {
  .wrapper-sezione-about .contenitore-generale {
    gap: 3rem;
  }
}

@media (max-width: 991px) {
  .wrapper-sezione-about .contenitore-generale {
    flex-direction: column;
    align-items: flex-start;
  }

  .wrapper-sezione-about .content {
    width: 100%;
  }

  .wrapper-sezione-about .row {
    gap: 2rem;
  }
}

@media (max-width: 767px) {
  .wrapper-sezione-about .row {
    flex-direction: column;
  }

  .wrapper-sezione-about .row-reverse,
  .wrapper-sezione-about .riga-img-testo {
    flex-direction: column;
    gap: 1.5rem;
  }

  .wrapper-sezione-about .list-item {
    gap: 0.5rem;
  }

  .wrapper-sezione-about .immagine-lottie {
    display: flex;
    width: 100%;
  }

  .wrapper-sezione-about .blocco-contenuto-testuale {
    gap: 2rem;
  }

  .sezione-about-flex {
    padding-block: 2rem;
  }
}

/* stili specifici 3 carte*/

.container-grid-carte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1300px;
}

/* stili prima carta */
.card-tre-carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  /*padding: 32px;*/

  isolation: isolate;

  max-width: 500px;
  min-width: 350px;
  /*aspect-ratio: 9/12;*/

  background: var(--colore-sfondo-grigio);
  border-radius: 20px;

  position: relative;

  /* Inside auto layout */
}

.card-tre-carte .pillow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 24px;
  white-space: nowrap;
  transition: transform 0.2s var(--custom-transition-bezier);

  /* Dazi Doganali */

  font-family: var(--testo-keywords-font-family);
  font-style: normal;
  font-weight: 700;
  font-size: var(--misura-font-p-small);
  line-height: 22px;
  /* identical to box height */

  color: #ffffff;

  background: var(--colore-rosa-dfi-100);
  border-radius: 120px;
}

.card-quotazione-tempo-reale .pillow-1 {
  transform: rotate(0deg);
  position: absolute;
  left: 0px;
  top: 0px;
  transition: transform 0.3s var(--custom-transition-bezier);
}
.card-quotazione-tempo-reale .pillow-2 {
  position: absolute;
  left: 0px;
  top: 0px;
  transform: rotate(0deg);
  transition: transform 0.3s var(--custom-transition-bezier);
}
.card-quotazione-tempo-reale .pillow-3 {
  position: absolute;
  left: 0px;
  top: 0px;
  transform: rotate(0deg);
  transition: transform 0.3s var(--custom-transition-bezier);
}

.card-tre-carte .contenuto-immagine {
  position: relative;
  min-height: 350px;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  align-items: center;
}

.immagine-card {
  position: absolute;
  width: auto;
  height: 95%;

  border-radius: 16px;
  transition: transform 0.3s var(--custom-transition-bezier);
}

.immagine-mouse {
  position: absolute;
  z-index: 1;
  bottom: 0px;
  right: 50px;
  transition: transform 0.3s var(--custom-transition-bezier);
}

.contenitore-pillow {
  width: 200px;
  height: 100px;
  position: relative;
  z-index: -1;
}

.contenuto-testo {
  color: var(--colore-testo-nero);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 48px;

  gap: 8px;
  height: auto;
}

.card-quotazione-tempo-reale:hover .immagine-card {
  transform: translateY(150px);
}

.card-quotazione-tempo-reale:hover .immagine-mouse {
  transform: translate(-200px, -120px);
}

.card-quotazione-tempo-reale:hover .pillow-1 {
  transform: rotate(42deg) translate(60px, -140px) scale(1.2);
}
.card-quotazione-tempo-reale:hover .pillow-2 {
  transform: rotate(-20deg) translate(-30px, -100px) scale(1.2);
}
.card-quotazione-tempo-reale:hover .pillow-3 {
  transform: rotate(11deg) translate(20px, -70px) scale(1.2);
}

/* stili seconda carta */

.immagine-card-dashboard {
  border-radius: 16px;
  right: -20%;
  position: absolute;
  height: 95%;
  transition: transform 0.3s var(--custom-transition-bezier);
}

.immagine-mouse-card-2 {
  position: absolute;
  z-index: 1;
  transition: transform 0.2s var(--custom-transition-bezier) 0.1s;
}

.contenitore-documenti {
  height: 90%;
  position: absolute;
  display: flex;
  left: -50%;
  z-index: -1;
  flex-direction: column;
  justify-content: center;

  transition: transform 0.3s var(--custom-transition-bezier);
}

.contenitore-documenti .doc1 {
  transition: transform 0.2s var(--custom-transition-bezier);
}

.contenitore-documenti .doc3 {
  transition: transform 0.2s var(--custom-transition-bezier) 0.1s;
}

.contenitore-documenti .doc2 {
  transition: transform 0.2s var(--custom-transition-bezier) 0.2s;
}

.contenitore-documenti .immagine-documento {
  margin-top: -80%;
}

.card-documentazione-doganale:hover .immagine-card-dashboard {
  transform: translateX(90px);
}

.card-documentazione-doganale:hover .doc1 {
  transform: rotate(24deg) translateX(100%);
}

.card-documentazione-doganale:hover .doc2 {
  transform: rotate(24deg) translateX(100%);
}

.card-documentazione-doganale:hover .doc3 {
  transform: rotate(24deg) translateX(100%);
}

.card-documentazione-doganale:hover .immagine-mouse-card-2 {
  transform: translate(-92px, 50px);
}

/* stili terza carta */
.contenitore-immagini-pulsante {
  position: absolute;
  height: 95%;
  gap: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contenitore-canali-vendita {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  column-gap: 20px;

  transition:
    column-gap 0.2s var(--custom-transition-bezier),
    transform 0.3s ease;
}

.bevendy-logo-card {
  border-radius: 16px;
  padding: 48px 16px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition:
    opacity 0.1s var(--custom-transition-bezier) 0.1s,
    transform 0.2s var(--custom-transition-bezier) 0.2s;
}

.bevendy-logo-card img {
  width: 80%;
  height: auto;
}

.immagine-mouse-card-3 {
  position: absolute;
  bottom: -50px;
  left: 50px;
  z-index: 2;
  transition: transform 0.2s var(--custom-transition-bezier) 0.1s;
}

.card-unificazione-canali-vendita:hover .immagine-mouse-card-3 {
  transform: translate(32px, -250px);
}
.card-unificazione-canali-vendita:hover .pillow {
  transform: translateY(90px);
}

.card-unificazione-canali-vendita:hover .contenitore-canali-vendita {
  transform: scale(0.8);
  opacity: 1;
  column-gap: 300px;
}

.card-unificazione-canali-vendita:hover .bevendy-logo-card {
  transform: scale(1.1);
  opacity: 1;
}

@media (max-width: 767px) {
  .container-grid-carte {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
  SEZIONE RIASSUNTO FUNZIONI
   ========================================== */

.sez-riassunto-funzioni-contenitore-esterno {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  padding: 0px 16px;
  max-height: 700px;
  overflow: hidden;
  border-radius: 20px;
  /*background-color: var(--rosa-sfondo-40);*/
  background:
    linear-gradient(109.45deg, var(--rosa-sfondo-40) 26.17%, #e58dce 84.37%),
    var(--rosa-sfondo-40);
}

.sez-riassunto-colonna-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  height: 100%;
}

.sez-riassunto-colonna-2 {
  height: 700px;
}

.sez-riassunto-colonna-2 i {
  font-size: var(--misura-font-h5);
}

.sez-riassunto-colonna-2 .swiper-wrapper {
  overflow: visible;
  transition-timing-function: linear !important;
}

.sez-riassunto-colonna-2 .swiper-slide {
  height: auto;
  width: auto;
  display: flex;
  transition-timing-function: linear;
}
.sez-riassunto-wrap-titolo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 23px;
  gap: 24px;
}
.sez-riassunto-wrap-card-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
}

.card-riassunto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 16px 32px;
  gap: 16px;
  height: auto;
  margin: 0px 12px;
  background: var(--primitives-color-white);
  box-shadow: var(--card-ombra);
  border-radius: 16px;
  border: solid 1px white;
  transition: all var(--custom-transition-bezier) 0.2s;
}

/*CARD RIASUNTO FUNZIONE */

.card-riassunto:hover {
  border: solid 1px var(--colore-rosa-dfi-90);
}

@media (max-width: 767px) {
  .sez-riassunto-funzioni-contenitore-esterno {
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    padding: 0px;

    max-height: none;
    overflow: hidden;
    background:
      linear-gradient(180deg, var(--rosa-sfondo-40) 26.17%, #e58dce 84.37%),
      var(--rosa-sfondo-40);
  }

  .sez-riassunto-colonna-2 {
    height: auto;
  }

  .sez-riassunto-colonna-2 .swiper-slide {
    height: 80%;

    display: flex;
    margin-block: 8px;
  }

  .card-riassunto .testo-paragrafo {
    width: 200px;
    font-size: var(--misura-font-p-small);
  }

  .card-riassunto .titolo-h4 {
    font-size: 1.25rem;
    line-height: 100%;
  }

  .sez-riassunto-colonna-2 .swiper-wrapper {
    display: flex;
    flex-direction: row;
    width: 100vw;
  }
}

/* ==========================================
   FOOTER STYLES
   ========================================== */

.spacer {
  height: 500px;
}

.site-footer {
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--colore-rosa-dfi-90);
  color: var(--primitives-color-white);
  padding: 64px 64px 0 64px;
  box-sizing: border-box;
  overflow: hidden;
}

.site-footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 64px;
}

.footer-left {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-left h2 {
  color: var(--primitives-color-white);
}

.footer-left p {
  color: var(--primitives-color-white);
  font-size: var(--misura-font-p);
}

.footer-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-actions .btn-demo {
  background-color: var(--primitives-color-white);
  color: var(--colore-testo-nero);
  border-color: var(--primitives-color-white);
  text-decoration: none;
}

.footer-actions .btn-sales {
  color: var(--primitives-color-white);
  text-decoration: none;
}

.footer-actions .btn-sales i {
  margin-left: 4px;
}

.footer-right {
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.footer-menu-col {
  display: flex;
  flex-direction: column;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-menu li a {
  color: var(--primitives-color-white);
  text-decoration: none;
  font-family: var(--font-noto-sans);
  font-size: var(--misura-font-p-small);
  font-weight: 300;
}

.footer-divider {
  border: 0;
  height: 1px;
  background-color: white;
  margin: 0 0 32px 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.footer-copyright {
  font-family: var(--font-noto-sans);
  font-size: var(--misura-font-p-small);
}

.footer-socials {
  display: flex;
  gap: 16px;
  color: white;
}

.footer-socials a {
  color: white;
  font-size: var(--misura-font-h5);
  text-decoration: none;
}

.footer-logo-parallax {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 32px;
  transform: translateY(150px);
  will-change: transform;
}

.lottie-animation-logo {
  width: 100%;
  max-width: 1300px;
  cursor: pointer;
  display: flex;
  margin-bottom: -50px;
}

.fallback-logo {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .site-footer {
    padding: 32px 16px 0 16px;
    position: relative;
    z-index: 1;
  }

  .footer-top {
    flex-direction: column;
    gap: 48px;
    margin-bottom: 32px;
  }

  .footer-right {
    gap: 48px;
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  .lottie-animation-logo {
    margin-bottom: 0px;
  }
}

/* ==========================================
   SEZIONE RECENSIONI  
   ========================================== */

.sezione-wrap-recensioni {
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--colore-sfondo-bianco) 0%,
    var(--rosa-sfondo-40) 30%
  );
}

.sezione-wrap-recensioni .swiper {
  overflow: visible;
}

.recensioni-eyebrow {
  background-color: var(--rosa-sfondo-40);
}

.wrap-recensioni .contenitore-titolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 16px;
  width: 100%;
  margin-bottom: 64px;
}

.swiper-recensioni {
  max-width: 1200px;
  width: calc(100vw - 64px);
}

.swiper-recensioni .swiper-slide {
  overflow: hidden;
  border-radius: 20px;
}

.review-img {
  width: 50%;
  height: 100%;
}

.review-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gruppo-contenuto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 64px;
  gap: 32px;
  width: 50%;
  height: auto;
}

.review-text {
  font-family: var(--font-kulim-park);
  font-style: normal;
  font-weight: 400;
  font-size: var(--misura-font-h4);
  line-height: 120%;

  color: var(--colore-testo-nero);
}
.nome-recensore {
  font-family: var(--font-noto-sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--misura-font-p-small);
  line-height: 150%;
}

.avatar-recensore {
  max-height: 50px;
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.review-rating {
  color: var(--colore-rosa-dfi-100);
  font-size: var(--misura-font-h5);
}

.review-logo {
  border-left: 1px solid var(--variable-collection-linea-divisione);
}
.review-logo img {
  width: auto;
  height: 100%;
}

.review-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: auto;
  overflow: clip;
  border-radius: 20px;
  background-color: #ffffff;
  width: 100%;
  height: 450px;
  box-shadow: var(--card-ombra);
}

@media (max-width: 767px) {
  .swiper-recensioni .swiper-wrapper {
    width: calc(
      100vw - var(--padding-mobile-32px) - var(--padding-mobile-32px)
    );
  }

  .wrap-recensioni .contenitore-titolo {
    margin-bottom: 2rem;
    text-align: center;
  }

  .swiper-recensioni .swiper-slide {
    height: auto;
    overflow: hidden;
    border-radius: 20px;
  }

  .sezione-wrap-recensioni {
    overflow: hidden;
    padding-bottom: 80px;
  }

  .review-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .review-card .review-text {
    font-size: var(--misura-font-p);
  }

  .review-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  .reviews-swiper {
    width: calc(100vw - 32px);
  }
  .gruppo-contenuto {
    width: 100%;
    padding-block: 1rem;
    align-items: flex-start;
    height: -webkit-fill-available;
    justify-content: space-between;
  }

  .gruppo-contenuto .review-rating,
  .gruppo-contenuto .review-text,
  .gruppo-contenuto .avatar-recensore {
    padding: 0px 16px;
  }
}

.nome-recensore {
  display: flex;
  font-family: var(--font-noto-sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--misura-font-p-tiny);
  line-height: 150%;
  flex-direction: column;
}

/* ==========================================
   SEZIONE RECENSIONI  
   ========================================== */

.recensione-evidenza-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 32px;
  max-width: 700px;
}

@scope (.recensione-evidenza-wrapper) {
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 500px;
    overflow: hidden;
  }

  .avatar img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  .nome-recensore {
    justify-content: center;
  }

  .review-text {
    text-align: center;
  }

  .review-logo {
    display: flex;
    width: 100px;
    justify-content: flex-end;
  }
}

/* ==========================================
   SEZIONE LOGHI (Logo Carousel Section)  
   ========================================== */

.sezione-loghi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 32px;
  background-color: var(--primitives-color-white);
}

.sezione-loghi .swiper-slide {
  width: auto;
}

.container-loghi {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.testo-loghi {
  font-family: var(--testo-keywords-font-family);
  font-weight: var(--testo-keywords-font-weight);
  padding: 0px 16px;
  font-size: var(--misura-font-p);
  color: black;
  text-align: center;
  margin-bottom: 40px;
}

.griglia-loghi {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.logo-immagine {
  display: flex;
  filter: saturate(0);
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.logo-immagine {
  width: 100%;
  height: 100%;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-immagine:hover {
  transform: translateY(-8px) scale(1.1);
}

.logo-immagine img {
  width: auto;
  height: 70px;
  display: block;
}

@media (max-width: 991px) {
  .griglia-loghi {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .sezione-tre-carte,
  .sezione-loghi {
    padding: 2rem 0px;
  }

  .griglia-loghi {
    gap: 24px;
  }

  .logo-item {
    width: 80px;
  }
}

/* ==========================================
   SEZIONE INTEGRAZIONI CAROSELLO
   ========================================== */

.integrazione-logo img {
  width: auto;
  height: 35px;
  display: block;
}

/* ==========================================
   SEZIONE F-A-Q 
   ========================================== */

@scope (.sezione-faq) {
  .container-sezione-contenuto {
    background-color: var(--rosa-sfondo-40);
  }
  .container-faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    max-width: 1000px;
  }

  .contenitore-titolo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;
    margin-bottom: 0px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }

  .contenitore-domande {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-content: space-between;
    padding: 0px;
    gap: 48px;
  }

  .domanda {
    height: auto;

    cursor: pointer;
    background-color: var(--primitives-color-white);
    transition: all 0.2s var(--custom-transition-bezier);
    border-radius: 16px;
    transition: background-color 0.3s ease;
  }

  .contenitore-risposta {
    transition:
      max-height 0.4s ease-in-out,
      opacity 0.3s ease-in-out,
      padding 0.3s ease-in-out;
  }

  /* TRANSIZIONE PER L'ICONA FRECCIA */
  .domanda .icona {
    transition: transform 0.3s ease;
    display: inline-block;
  }

  .contenitore-domanda {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 56px;
    gap: 100px;

    border-radius: 16px;
  }
  .contenitore-risposta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 56px;
    gap: 16px;

    border-radius: 16px;
  }

  .contenitore-generale {
    justify-content: center;
  }

  h3 {
    font-family: var(--font-kulim-park);
    font-style: normal;
    font-weight: 500;
    font-size: var(--misura-font-p-big);
    line-height: 28px;
  }

  .contenitore-CTA {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;
    max-width: 600px;
  }

  .contenitore-CTA h3 {
    font-family: 'Kulim Park';
    font-style: normal;
    font-weight: 700;
    font-size: var(--misura-font-h3);
    line-height: 100%;
    margin: 0px;
  }

  @media (max-width: 768px) {
    .contenitore-titolo {
      gap: 1rem;
    }
    .container-faq {
      gap: 2rem;
    }
    .contenitore-domanda,
    .contenitore-risposta {
      gap: 1rem;
      padding: 1rem;
    }
    h3 {
      font-size: 1.25rem;
      line-height: 110%;
    }
  }
}
/* ==========================================
   SEZIONE BANDIERE 
   ========================================== */

.sezione-bandiere {
  text-align: center;
  font-family: var(--font-kulim-park, 'Kulim Park', sans-serif);
}

.sezione-bandiere .contenitore-generale {
  flex-direction: column;
  width: 100%;
}

.contenitore-titolo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-items: center;
  align-items: center;
}

.bandiere-tabs {
  display: flex;
  border: 1px solid rgb(0, 0, 0, 0.2);
  border-radius: 100px;
  padding: 2px;
  gap: 2px;
}

.bandiere-tab {
  border: none;
  background: transparent;
  padding: 8px 24px;
  border-radius: 100px;
  font-family: var(--font-noto-sans);
  font-size: var(--misura-font-p-small);
  font-weight: 500;
  cursor: pointer;
  color: var(--colore-testo-nero);
  transition: all 0.2s ease;
}
.categorie-b2c {
  display: flex;
  gap: 8px;
}
.bandiere-tab-alcol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 10px 10px;
  border: 1px solid rgb(0, 0, 0, 0.2);
  border-radius: 100px;
  background: transparent;
  color: var(--colore-testo-nero);
  font-family: var(--font-noto-sans);
  font-size: var(--misura-font-p-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bandiere-tab-alcol.active {
  border-color: var(--colore-rosa-dfi-90);
}

.bandiere-tab.active {
  background: var(--colore-rosa-dfi-100);
  color: var(--primitives-color-white);
}

.bandiere-tab:not(.active) {
  border-color: #999;
  color: #999;
}

.bandiere-content {
  background-color: #f2f2f2;
  border-radius: 20px;
  padding-block: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.bandiere-pane {
  display: none;
}

.bandiere-pane.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bandiere-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 3rem 3rem;
  justify-items: center;
  padding: 2rem;
}

.bandiera-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.bandiera-item img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.bandiera-title {
  font-size: var(--misura-font-p);
  font-weight: 600;
  color: var(--colore-testo-nero);
}

.bandiera-desc-list {
  list-style: disc;
  margin: 0;
  padding-left: 16px;
  font-size: var(--misura-font-p);
  color: rgb(0, 0, 0, 0.8);
  display: block;
  text-align: left;
  gap: 8px;
  opacity: 0;
  height: auto;
}

.bandiera-desc-list li {
  padding-bottom: 4px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .bandiere-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 2rem;
    padding: 2rem;
  }

  .bandiere-tab,
  .bandiere-tab-alcol {
    width: 100%;
    padding: 10px;
    white-space: nowrap;
  }
  .bandiere-tab-alcol {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .bandiere-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   SEZIONE VERSUS
   ========================================== */

.sezione-versus .container-sezione-contenuto {
  background-color: var(--rosa-sfondo-40);
  overflow: hidden;
}

.versus-eyebrow {
  background-color: var(--rosa-sfondo-40);
}

.versus-card {
  width: auto;
  max-width: var(--spacing-sizing-container-container-large);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--misura64px);
  padding: 64px 112px;
  box-sizing: border-box;
  background-color: var(--colore-sfondo-bianco);
  border-radius: 20px;
  position: relative;
}

@scope (.versus-card) {
  .card-versus-documento {
    position: absolute;
    top: 45%;
    left: 0;
    transform: rotate(343deg);
    margin-left: -120px;
  }
  .card-versus-documento-1 {
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(30deg);
    margin-right: -100px;
  }
  .card-versus-documento-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotate(17deg);
    margin-right: -90px;
  }

  .versus-pillow-1 {
    transform: rotate(35deg);
    position: absolute;
    top: 1rem;
    right: 0;
  }
  .versus-pillow-2 {
    transform: rotate(25deg);
    position: absolute;
    top: 40%;
    left: -3rem;
  }
  .versus-pillow-3 {
    transform: rotate(-35deg);
    position: absolute;
    bottom: 30%;
    left: 0;
  }

  .versus-pillow-4 {
    transform: rotate(25deg);
    position: absolute;
    bottom: 0;
    right: 0;
  }

  @media (max-width: 767px) {
    .versus-contenitore-immagini {
      display: none;
    }
  }
}

.versus-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.versus-table-wrap {
  width: 100%;
  max-width: 980px;
}

.versus-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.45fr;
  align-items: stretch;
  border-bottom: 1px solid var(--variable-collection-linea-divisione);
}

.versus-grid-head {
  align-items: end;
}

.versus-cell {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  box-sizing: border-box;
  font-family: var(--font-noto-sans);
  font-size: var(--misura-font-p);
  line-height: 130%;
  color: var(--colore-testo-nero);
}

.versus-feature,
.versus-feature-title {
  justify-content: flex-start;
  font-weight: 700;
  padding-left: 0;
}

.versus-feature-title,
.versus-traditional-title {
  min-height: 70px;
  font-family: var(--font-kulim-park);
  font-size: var(--misura-font-h5);
  font-weight: 700;
  line-height: 100%;
}

.versus-brand,
.versus-brand-cell {
  justify-content: center;
  text-align: center;
  background-color: var(--rosa-sfondo-40);
}

.versus-brand-cell {
  min-height: 70px;
  border-radius: 16px 16px 0 0;
}

.versus-traditional,
.versus-traditional-title {
  justify-content: center;
  text-align: center;
}

.versus-logo {
  width: 130px;
  max-width: 100%;
  height: auto;
  display: block;
}

.versus-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.versus-actions a {
  text-decoration: none;
}

@media (max-width: 991px) {
  .versus-card {
    padding: 48px 32px;
  }

  .versus-table-wrap {
    max-width: 100%;
  }

  .versus-grid {
    grid-template-columns: 1.1fr 1fr 1fr;
  }

  .versus-cell {
    padding: 0 12px;
    font-size: var(--misura-font-p-small);
  }

  .versus-feature-title,
  .versus-traditional-title {
    font-size: var(--misura-font-p-big);
  }
}

@media (max-width: 767px) {
  .versus-card {
    gap: 32px;
    padding: 32px 12px;
    border-radius: 16px;
  }

  .versus-table-wrap {
    display: block;
    max-width: 100%;
    overflow-x: visible;
  }

  .versus-grid,
  .versus-grid-head {
    grid-template-columns: 1.15fr 0.8fr 0.8fr;
    border-bottom: 1px solid var(--variable-collection-linea-divisione);
    overflow: visible;
    border-radius: 0;
  }

  .versus-grid-head {
    display: grid;
  }

  .versus-cell {
    min-height: 48px;
    padding: 10px 6px;
    font-size: var(--misura-font-p-tiny);
    line-height: 115%;
    justify-content: center;
    text-align: left;
  }

  .versus-feature {
    justify-content: flex-start;
    text-align: left;
    background-color: transparent;
    font-size: var(--misura-font-p-tiny);
    padding-left: 0;
  }

  .versus-feature-title,
  .versus-traditional-title {
    min-height: 56px;
    font-size: var(--misura-font-p-small);
    line-height: 100%;
  }

  .versus-brand-cell {
    min-height: 56px;
    border-radius: 12px 12px 0 0;
  }

  .versus-logo {
    width: 92px;
  }

  .versus-brand,
  .versus-traditional {
    justify-content: center;
    text-align: center;
    gap: 6px;
  }

  .versus-brand::before,
  .versus-traditional::before {
    display: none;
  }

  .versus-brand i,
  .versus-traditional i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--misura-font-p-big);
    line-height: 1;
  }

  .versus-brand i {
    color: var(--colore-rosa-dfi-90);
  }

  .versus-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================
   SEZIONE COMPARAZIONE
   ========================================== */

.sezione-comparazione {
  padding-block: 4rem;
}

.comparazione-desktop-wrapper {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}

.comp-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
  padding: 16px 0;
}

.comp-header-row {
  position: sticky;
  top: 0;
  background-color: var(--primitives-color-white);
  border-bottom: 1px solid rgb(0, 0, 0, 0.2);
  align-items: end;
  padding-block: 86px 32px;
}

.comp-cell {
  text-align: center;
  font-family: var(--font-noto-sans);
  font-weight: 300;
  font-size: var(--misura-font-p-small);
}

.comp-feature-cell {
  font-family: var(--font-kulim-park);
  text-align: left;
  font-weight: 600;
  font-size: var(--misura-font-p);
}

.comp-feature-sub {
  font-weight: 400;
  font-size: var(--misura-font-p-tiny);
  color: #666;
  display: block;
  margin-top: 4px;
}

.comp-pkg-title {
  font-family: var(--font-kulim-park);
  font-size: var(--misura-font-p-big);
  font-weight: 700;
  margin-bottom: 8px;
}

.comp-pkg-price {
  font-family: var(--font-kulim-park);
  font-weight: 700;
  font-size: var(--misura-font-p);
  margin-bottom: 4px;
}

.comp-pkg-sub {
  font-size: var(--misura-font-p-small);
  color: #666;
  margin-bottom: 16px;
}

.comp-btn-demo {
  padding: 8px 16px;
  font-size: var(--misura-font-p-small);
  background-color: var(--primitives-color-white);
  color: var(--colore-rosa-dfi-90);
}

.comp-group-title {
  font-family: var(--font-kulim-park);
  font-size: var(--misura-font-h4);
  font-weight: 700;
  margin: 48px 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-group-title i {
  font-size: var(--misura-font-h4);
}

.comparazione-mobile-nav {
  display: none;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 991px) {
  .comp-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 8px;
  }

  .comp-pkg-sub {
    display: none;
  }

  .comp-pkg-cell {
    display: none;
  }

  .comp-pkg-cell.active-pkg {
    display: block;
  }

  .comparazione-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background: var(--colore-sfondo-bianco);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
    z-index: 90;
    border-radius: 30px 30px 0px 0px;
  }

  .swiper-comparazione {
    border-radius: 50px;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 1px inset;
    background-color: var(--colore-sfondo-grigio);
  }
  .comparazione-mobile-nav .swiper {
    padding-block: 4px;
  }

  .comp-slide-item {
    text-align: center;
    padding: 8px 16px;
    border-radius: 100px;
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p-small);
    font-weight: 600;
    color: #666;
    background: #f1f1f1;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto !important;
  }

  .mkt-scrollable {
    overscroll-behavior-x: contain;
    --tw-duration: 0.3s;
    mask-image: linear-gradient(
      to right,
      var(--mkt-scrollable-mask-left) 0%,
      black 2rem,
      black calc(100% - 2rem),
      var(--mkt-scrollable-mask-right) 100%
    );
    transition-property:
      --mkt-scrollable-mask-left, --mkt-scrollable-mask-right;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    overflow: auto clip;
  }

  .swiper-slide-active.comp-slide-item,
  .comp-slide-item.active-tab {
    background: var(--primitives-color-white);
    color: var(--colore-testo-nero);
  }

  .comp-btn-demo-mobile {
    width: 100%;
    background-color: var(--colore-rosa-dfi-100);
  }
  .comp-btn-demo {
    display: none;
  }

  .nav-ui-wrap-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;

    border-radius: 30px 30px 0px 0px;
  }
}

/* ==========================================
   TEMPLATE CARD PREZZI
   ========================================== */
@scope (.card-prezzi) {
  :scope {
    border: 1px solid rgb(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--colore-sfondo-bianco);
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
  }

  [data-category='b2b-b2c'] {
    border: 1px solid var(--colore-rosa-dfi-90) !important;
  }

  .card-prezzi-eyebrow {
    background-color: var(--rosa-sfondo-40);
    color: var(--colore-testo-nero);
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p-small);
    font-weight: 500;
    padding: 6px 24px;
    border-radius: 100px;
    margin-bottom: 24px;
    display: inline-block;
  }

  .card-prezzi-title {
    font-family: var(--font-kulim-park);
    font-size: var(--misura-font-h2);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--colore-testo-nero);
  }

  .card-prezzi-desc {
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p);
    font-weight: 300;
    color: var(--colore-testo-nero);
    margin-top: 16px;
    margin-bottom: 24px;
    line-height: 1.4;
  }

  .card-prezzi-price-container {
    margin-bottom: 4px;
  }

  .card-prezzi-price {
    font-family: var(--font-kulim-park);
    font-size: var(--misura-font-h2);
    font-weight: 700;
    color: var(--colore-testo-nero);
  }
  .prezzo_non_scontato {
    display: none;
    font-size: var(--misura-font-p-big);
    font-weight: 500;
    color: rgb(0, 0, 0, 0.8);
    position: relative;
  }
  .prezzo_non_scontato::after {
    content: ''; /* Required to render */
    position: absolute;

    background: linear-gradient(
      15deg,
      transparent calc(50% - 1px),
      #000 calc(50% - 1px),
      #000 calc(50% + 1px),
      transparent calc(50% + 1px)
    );
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .card-prezzi-suffix {
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p-big);
    font-weight: 700;
    color: var(--colore-testo-nero);
  }

  .card-prezzi-iva {
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p-tiny);
    font-weight: 400;
    color: var(--colore-testo-nero);
    margin-bottom: 24px;
  }

  .card-prezzi-btn {
    width: 100%;
    margin-bottom: 32px;
    box-sizing: border-box;
  }

  .card-prezzi-divider {
    width: 100%;
    border: none;
    border-top: 1px solid var(--colore-testo-nero);
    margin: 0 0 32px 0;
  }

  .card-prezzi-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-align: left;
  }

  .card-prezzi-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .card-prezzi-feature-item i {
    font-size: var(--misura-font-h5);
    color: var(--colore-testo-nero);
    flex-shrink: 0;
    margin-top: 2px;
  }

  .card-prezzi-feature-text {
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p);
    color: var(--colore-testo-nero);
    line-height: 1.4;
  }

  .card-prezzi-feature-text p {
    margin: 0;
  }

  .card-prezzi-feature-text b,
  .card-prezzi-feature-text strong {
    font-weight: 700;
  }
}

/* ==========================================
   TEMPLATE Call to action
   ========================================== */

.page-id-134 .sezione-cta {
  background-color: var(--primitives-color-white);
}

.sezione-cta {
  background-color: var(--rosa-sfondo-40);
  overflow: hidden;
}

.cta-contenitore-generale {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 4rem;
}
.sezione-cta .cta-contenuto-testo {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 2rem;
}
.sezione-cta .cta-contenuto-grafico {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 2rem;
  position: relative;
}

.sezione-cta .button-cta {
  position: relative;
}

.sezione-cta .immagine-mouse {
  pointer-events: none;
  right: -150%;
  bottom: 30%;
  transition: all var(--custom-transition-bezier) 0.2s;
}
.sezione-cta .immagine-lottie {
  position: absolute;
}

.sezione-cta .lottie-animation {
  background-color: transparent;
}

.sezione-cta .cta-contenuto-testo:hover .immagine-mouse {
  bottom: -5%;
  right: -10px;
}

.sezione-cta .lottie-animation svg g image {
  opacity: 0.2;
}

@media (max-width: 767px) {
  .sezione-cta .cta-contenuto-grafico,
  .sezione-cta .cta-contenuto-testo {
    width: 100%;
  }

  .sezione-cta .immagine-lottie {
    position: static;
  }
}

@media (max-width: 767px) {
  .sezione-cta .cta-contenitore-generale {
    flex-direction: column;
  }
}

/* ==========================================
   SEZIONE PREZZI
   ========================================== */
@scope (.sezione-prezzi) {
  :scope {
    padding-top: 70px;
  }

  .prezzi-header {
    display: flex;
    width: 100%;

    max-width: 1300px;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 64px;
    gap: 32px;
    z-index: 100;
  }
  .pin-navbar {
    display: flex;
    height: 70px;
    flex-direction: column;
    align-items: center;
    justify-items: center;
  }

  .nav-ui-wrap {
    width: 100%;
    display: flex;
    padding: 4px;
    gap: 32px;
    border: solid 1px transparent;
    border-radius: 100px;
    background-color: var(--primitives-color-white);
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }
  .prezzi-header-left,
  .prezzi-header-right {
    display: flex;
    flex-direction: column;
    gap: 0px;
  }

  .prezzi-header-right {
    align-items: flex-start;
  }

  .prezzi-header-title {
    font-family: var(--font-kulim-park);
    font-size: var(--misura-font-h5);
    font-weight: 700;
    margin: 0;
    margin-bottom: 1rem;
  }

  .prezzi-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px 8px 8px;
    border: 1px solid rgb(0, 0, 0, 0.2);
    border-radius: 100px;
    background: transparent;
    color: var(--colore-testo-nero);
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p-small);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .pill-btn i {
    font-size: var(--misura-font-p-big);
  }

  .pill-btn.active {
    border-color: var(--colore-rosa-dfi-100);
    color: var(--colore-testo-nero);
  }

  .prezzi-toggle-container {
    display: flex;
    border: 1px solid rgb(0, 0, 0, 0.2);
    border-radius: 100px;
    padding: 2px;
    gap: 2px;
  }

  .pill-toggle {
    border: none;
    background: transparent;
    padding: 8px 16px;
    border-radius: 100px;
    font-family: var(--font-noto-sans);
    font-size: var(--misura-font-p);
    font-weight: 500;
    cursor: pointer;
    color: var(--colore-testo-nero);
    transition: all 0.2s ease;
  }

  .pill-toggle.active {
    background: var(--colore-rosa-dfi-100);
    color: var(--primitives-color-white);
  }

  .prezzi-groups-container {
    display: flex;
    flex-direction: column;
    gap: 96px;
  }

  .prezzi-group {
    transition: opacity 0.3s ease;
  }

  .prezzi-group-header {
    text-align: center;
    margin-bottom: 48px;
  }

  .prezzi-group-header h2 {
    margin-bottom: 16px;
  }

  .prezzi-cards-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
  }

  @media (max-width: 991px) {
    .prezzi-header {
      display: none;
    }

    .prezzi-header-right,
    .prezzi-header-left {
      align-items: center;
    }

    .prezzi-filters {
      width: 100%;
      gap: 8px;
      flex-wrap: nowrap;
      flex-direction: row;
      justify-content: center;
    }
  }

  @media (max-width: 767px) {
    .prezzi-toggle-container {
      border-radius: 50px;
      width: 100%;
      justify-content: center;
    }

    .prezzi-cards-grid {
      display: grid;
      grid-template-columns: auto;
    }

    .pill-toggle,
    .pill-btn {
      padding: 12px;
      width: 100%;
      border-radius: 50px;
      justify-content: center;
    }

    .nav-ui-wrap {
      flex-direction: column;
      gap: 16px;
      border-radius: 20px;
    }
  }
}

/* ==========================================
   SEZIONE UTILIZZI
   ========================================== */
@scope (.sezione-utilizzi) {
  :scope {
    padding-block: 4rem;
  }

  .utilizzi-header {
    max-width: 800px;
    margin-inline: auto;
  }

  .utilizzi-title {
    margin-bottom: 1rem;
  }

  .utilizzi-cards-container {
    display: flex;
    gap: 16px;
    height: 600px;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
  }

  .utilizzi-card {
    position: relative;
    flex: 1;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: flex-end;
  }

  .utilizzi-card.active,
  .utilizzi-card:hover {
    flex: 3;
  }

  .utilizzi-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .utilizzi-card-content {
    position: relative;
    z-index: 1;
    padding: 32px;
    color: var(--primitives-color-white);
    width: 100%;
  }

  .utilizzi-card-content h3 {
    overflow: hidden;
  }

  .utilizzi-card.active .utilizzi-card-content h3,
  .utilizzi-card:hover .utilizzi-card-content h3 {
    white-space: normal;
  }

  .utilizzi-card-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
  }

  .utilizzi-card.active .utilizzi-card-desc,
  .utilizzi-card:hover .utilizzi-card-desc {
    opacity: 1;
    max-height: 200px;
    margin-top: 12px;
  }

  @media (max-width: 991px) {
    .utilizzi-cards-container {
      flex-direction: column;
      height: 800px;
    }

    .utilizzi-card.active,
    .utilizzi-card:hover {
      flex: 2;
    }

    .utilizzi-card-content h3 {
      white-space: normal;
    }
  }
}

/* ==========================================
   SEZIONE CONTATTI
   ========================================== */

@scope (.sezione-contatti) {
  .contenitore-generale {
    display: flex;
    flex-direction: row;
    gap: 64px;
  }
  .contenuto-testo-contatti {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 1rem;
    text-align: left;
  }

  .contenitore-form {
    display: flex;
    flex-direction: column;
    width: 50%;
  }

  h3 {
    margin-top: 2rem;
  }

  p {
    font-size: 1.1rem;
    line-height: 140%;
  }

  .lista-contatti {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
  }
  .lista-contatti li a {
    font-family: var(--font-kulim-park);
    color: var(--colore-testo-nero);
    text-decoration: none;
    font-size: var(--misura-font-p-big);
  }

  .lista-contatti li a:hover {
    color: var(--colore-rosa-dfi-90);
  }

  .mappa {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 64px;
  }

  @media (max-width: 991px) {
    .contenitore-generale {
      flex-direction: column;
    }
    .contenuto-testo-contatti {
      width: 100%;
    }

    .contenitore-form {
      width: 100%;
      min-height: 400px;
    }
  }
}

/* ==========================================
   SEZIONE demo
   ========================================== */

@scope (.sezione-demo) {
  .contenitore-generale-demo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    width: 100%;
  }
  .contenuto-testo {
    padding: 0px;
    text-align: center;
    width: 100%;
  }
  p {
    max-width: 600px;
  }
  .contenuto-calendario {
    width: 100%;
  }

  .eyebrow {
    background-color: var(--rosa-sfondo-40);
  }
}