/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/scss/app.scss ***!
  \********************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
h1,
h2,
h3,
h4,
h5,
h6, .h3, .h2, .h1 {
  margin: 0px;
  font-family: "Poppins", "arial", "sans serif";
  line-height: 100%;
}

.h1 {
  font-weight: 600;
  font-size: clamp(2.5rem, 1.9643rem + 2.6786vw, 4.375rem);
  line-height: clamp(3.125rem, 2.5893rem + 2.6786vw, 5rem);
}
@media (max-width: 767px) {
  .h1 {
    font-size: 40px;
    line-height: 45px;
  }
}

.h2 {
  font-weight: 600;
  font-size: clamp(2.25rem, 2.1786rem + 0.3571vw, 2.5rem);
  line-height: 110%;
}
@media (max-width: 767px) {
  .h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 500;
  }
}

.h3 {
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2679rem + 0.5357vw, 1.75rem);
  line-height: clamp(2.125rem, 2.3036rem - 0.8929vw, 1.5rem);
}

.h4 {
  font-weight: 600;
  font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  line-height: 1.5rem;
}

.p-large {
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.875rem;
}

.p,
.p-body, .p--bold,
.p-body--bold, .text-content ul, .text-content ol {
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 400;
  margin: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}

.p-small, .p-small--bold {
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 400;
  margin: 0px;
  font-size: 0.875rem;
  line-height: 1.05rem;
}

.p-mini {
  font-family: "Poppins", "arial", "sans serif";
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
}

.quote {
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 500;
  font-size: clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem);
  line-height: clamp(2.5rem, 2.3571rem + 0.7143vw, 3rem);
}

.label {
  margin: 0px;
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
}

a, .button-primary, .button-primary.white, .button-red, .text-link {
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
}

.text-link {
  color: #2d2826;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  margin: 2px 0;
  max-width: max-content;
}
.text-link svg,
.text-link .icon {
  width: 16px;
  height: 16px;
  fill: #2d2826;
}
.text-link:after {
  content: "";
  display: block;
  width: 0px;
  height: 2px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background: #2d2826;
  transition: width 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.active.text-link:after, .text-link:focus-visible:after, .text-link:active:after {
  width: 100%;
}
@media (min-width: 1025px) {
  .text-link:hover:after {
    width: 100%;
  }
}
[disabled].text-link {
  color: #f3f3f3;
  pointer-events: none;
}
[disabled].text-link svg,
[disabled].text-link .icon {
  fill: #f3f3f3;
}

/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
.button-red, .button-primary.white, .button-primary {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-direction: row;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 14px 24px;
  text-decoration: none;
  text-align: center;
  border-radius: 24px;
  transition: color 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53), background-color 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53), box-shadow 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  z-index: 1;
  border: none;
  width: max-content;
}
.button-red svg, .button-primary.white svg, .button-primary svg,
.button-red span,
.button-primary.white span,
.button-primary span {
  display: inline-block;
  vertical-align: middle;
}
.button-red svg, .button-primary.white svg, .button-primary svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  transition: fill 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53), color 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
@media (max-width: 1024px) {
  .button-red, .button-primary.white, .button-primary {
    min-width: 160px;
  }
}
@media (min-width: 1025px) {
  .button-red, .button-primary.white, .button-primary {
    min-width: 180px;
  }
}

.button-primary {
  color: #ffffff;
  background-color: #2d2826;
  -webkit-box-shadow: inset 0px 0px 0px 1px #2d2826;
  -moz-box-shadow: inset 0px 0px 0px 1px #2d2826;
  box-shadow: inset 0px 0px 0px 1px #2d2826;
  transition: top 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
}
.button-primary .icon,
.button-primary svg {
  fill: #ffffff;
  color: #ffffff;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
.active.button-primary, .button-primary:focus-visible, .button-primary:hover, .button-primary:active {
  color: #2d2826 !important;
  background-color: transparent !important;
  outline: none;
}
.active.button-primary .icon,
.active.button-primary svg, .button-primary:focus-visible .icon,
.button-primary:focus-visible svg, .button-primary:hover .icon,
.button-primary:hover svg, .button-primary:active .icon,
.button-primary:active svg {
  fill: #2d2826 !important;
  color: #2d2826 !important;
}
[disabled].button-primary {
  pointer-events: none;
  color: #f3f3f3 !important;
  background-color: #2d2826 !important;
  -webkit-box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  -moz-box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  box-shadow: inset 0px 0px 0px 1px #f3f3f3;
}
[disabled].button-primary svg {
  fill: #f3f3f3;
}

.button-primary.white {
  color: #e5554f;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 0px 1px #ffffff;
  transition: top 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
}
.button-primary.white .icon,
.button-primary.white svg {
  fill: #e5554f;
  color: #e5554f;
  flex: 0 0 13px;
}
.active.button-primary.white, .button-primary.white:focus-visible, .button-primary.white:hover, .button-primary.white:active {
  color: #ffffff !important;
  background-color: transparent !important;
  outline: none;
}
.active.button-primary.white .icon,
.active.button-primary.white svg, .button-primary.white:focus-visible .icon,
.button-primary.white:focus-visible svg, .button-primary.white:hover .icon,
.button-primary.white:hover svg, .button-primary.white:active .icon,
.button-primary.white:active svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}
[disabled].button-primary.white {
  pointer-events: none;
  color: #f3f3f3;
  background-color: #ffffff;
  -webkit-box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  -moz-box-shadow: inset 0px 0px 0px 1px #f3f3f3;
  box-shadow: inset 0px 0px 0px 1px #f3f3f3;
}
[disabled].button-primary.white svg {
  fill: #f3f3f3;
}

.button-red {
  color: #ffffff;
  background-color: #e5554f;
  -webkit-box-shadow: inset 0px 0px 0px 1px #e5554f;
  -moz-box-shadow: inset 0px 0px 0px 1px #e5554f;
  box-shadow: inset 0px 0px 0px 1px #e5554f;
  transition: top 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
}
.button-red .icon,
.button-red svg {
  fill: #ffffff;
  color: #ffffff;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
.active.button-red, .button-red:focus-visible, .button-red:hover, .button-red:active {
  color: #ffffff !important;
  background-color: #C64744 !important;
  -webkit-box-shadow: inset 0px 0px 0px 1px #C64744;
  -moz-box-shadow: inset 0px 0px 0px 1px #C64744;
  box-shadow: inset 0px 0px 0px 1px #C64744;
  outline: none;
}
.active.button-red .icon,
.active.button-red svg, .button-red:focus-visible .icon,
.button-red:focus-visible svg, .button-red:hover .icon,
.button-red:hover svg, .button-red:active .icon,
.button-red:active svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}
[disabled].button-red {
  pointer-events: none;
  opacity: 0.5;
  color: #f3f3f3;
}
[disabled].button-red svg {
  fill: #f3f3f3;
}

/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
.container, .container--small {
  width: 100%;
  margin: 0px auto;
}
@media (max-width: 767px) {
  .container, .container--small {
    padding-inline: 20px;
  }
}
@media (min-width: 768px) {
  .container, .container--small {
    padding-inline: 4.44%;
  }
}
@media (min-width: 1441px) {
  .container, .container--small {
    max-width: 1312px;
    padding-left: 0;
    padding-right: 0;
  }
}

/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
/**
    * File scss:     reset.scss
    * -----------------------------------------------------------
    * Description:   Reset CSS globale per il sito. 
    *
**/
* {
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: block;
  position: relative;
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 400;
  color: #2d2826;
  overflow-x: hidden;
  background-color: #ffffff;
  scroll-behavior: smooth;
}

picture,
img, svg,
video {
  display: block;
}

strong, b {
  font-weight: 700;
}

i, em {
  font-style: italic;
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#main-content {
  position: relative;
  min-height: 90dvh;
}

/* Aggiunge un margine al sito quando l'admin bar è visibile */
body.admin-bar header {
  margin-top: 32px;
}
@media (max-width: 767px) {
  body.admin-bar header {
    margin-top: 46px;
  }
}

/**
    * File scss:     common.scss
    * -----------------------------------------------------------
    * Description:   Stili globali per la tipografia, i testi, i 
    *                pulsanti (CTA), e altri elementi comuni 
**/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
}
h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span {
  display: block;
}

.h4 {
  text-transform: uppercase;
}

p {
  margin: 0;
}

.p--bold,
.p-body--bold {
  font-weight: 600;
}

.p-small--bold {
  font-weight: 600;
}

.button-primary.small {
  padding: 8px 10px;
  min-width: initial;
}
.button-primary {
  max-width: 78vw;
}

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

.text-content {
  position: relative;
  width: 100%;
  line-height: 24px;
}
.text-content p:not(:last-child) {
  margin-bottom: 20px;
}
.text-content ul {
  list-style-type: disc;
  padding: 0 0 10px 30px;
}
.text-content ul li {
  padding: 0 0 10px 0;
}
.text-content ol {
  list-style-type: decimal;
  padding: 0 0 10px 20px;
}
.text-content ol li {
  padding: 0 0 10px 0;
}
.text-content video {
  margin: 0;
  width: 100%;
  height: auto;
}
.text-content iframe {
  margin: 0;
  width: 100%;
  height: auto;
}
.text-content img {
  margin: 0 0 0 0;
  width: auto;
  height: auto;
  max-width: 100%;
}
.text-content a {
  color: #2d2826;
  text-decoration: underline;
  font-size: inherit;
  line-height: inherit;
  word-wrap: break-word;
}
.text-content strong,
.text-content b {
  color: currentColor;
  font-weight: 700;
}

.d-none {
  display: none;
}

.bg-corallo {
  background-color: #e5554f;
}

.bg-chevrons {
  background-image: url("../../../assets/img/bg-tax-integratori.png");
  background-repeat: no-repeat;
  background-size: 140%;
  background-position: center;
  background-blend-mode: soft-light;
}
@media (max-width: 767px) {
  .bg-chevrons {
    background-size: 500%;
  }
}

.bg-carta-da-zucchero {
  background-color: #7397bb;
}

.bg-azzurrino {
  background-color: #bacadf;
}

.bg-grey {
  background-color: #f3f3f3;
}

.bg-corallo-light {
  background-color: rgba(229, 85, 79, 0.3019607843);
}

.bg-corallo-gradient {
  background: radial-gradient(41.74% 155.57% at 71.11% 35.71%, #e5554f 0%, #f5bbb9 100%);
}

.bg-azzurro-gradient {
  background: radial-gradient(41.74% 155.57% at 71.11% 35.71%, #7397bb 0%, #bacadf 100%);
}

.text-light {
  color: #ffffff;
}
.text-light a:after {
  background: #ffffff !important;
}
.text-light a.active {
  color: #ffffff !important;
}

.headroom--not-top .text-light {
  color: unset;
}
.headroom--not-top .text-light a:after {
  background: unset !important;
}
.headroom--not-top .text-light a.active {
  color: unset !important;
}

.text-dark {
  color: #2d2826;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-100 {
  width: 100%;
}

@media (max-width: 1024px) {
  .w-50,
  .w-40,
  .w-60 {
    width: 100%;
  }
}
.flex-row-reverse {
  flex-direction: row-reverse;
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 768px) {
  .two-columns {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 767px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.avviso {
  display: flex;
  gap: 40px;
  align-items: center;
  background-color: rgba(186, 202, 223, 0.5019607843);
  border-radius: 16px;
  margin: 30px auto;
  padding: 40px 20px;
  text-transform: uppercase;
  min-height: 130px;
}
.avviso a {
  color: #2d2826;
  font-weight: 700;
}
@media (max-width: 767px) {
  .avviso {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.avviso .icons-info {
  width: 40px;
  height: 40px;
  flex: 1 0 40px;
}
.avviso .text-content {
  font-weight: 500;
}

.dev-component-label {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 5px;
  font-size: 12px;
  z-index: 9999;
  border-radius: 3px;
}

.rounded-circle {
  border-radius: 50% !important;
}

.chevron-list ul {
  list-style-type: none;
  font-weight: 600;
}
.chevron-list li {
  display: flex;
  align-items: flex-start;
  padding: 0 0 10px 10px !important;
  position: relative;
}
.chevron-list li::before {
  content: "";
  position: absolute;
  left: -30px;
  width: 24px;
  height: 24px;
  top: 5px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12.0496 4.8C12.3278 4.8 12.5836 4.95866 12.7041 5.20332L18.79 17.6154C18.8993 17.8383 18.8844 18.0939 18.749 18.301C18.6161 18.5069 18.3863 18.6304 18.1354 18.6304H17.5082C17.2312 18.6304 16.9741 18.4717 16.8537 18.2271L12.0496 8.42868L7.24544 18.2271C7.12621 18.4717 6.86787 18.6304 6.58966 18.6304H5.96369C5.7128 18.6304 5.48302 18.5069 5.34889 18.2985C5.21475 18.0926 5.19985 17.8371 5.3079 17.6154L11.3938 5.20332C11.513 4.95866 11.7713 4.8 12.0496 4.8Z' fill='%232D2826'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.scrollmenu {
  overflow: auto;
  white-space: nowrap;
  overflow-y: hidden;
  scrollbar-width: none; /* For Firefox */
}

.scrollmenu::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Edge */
}

.im-modal-cookie__container {
  min-height: 571px;
  border-radius: 16px;
  padding-inline: unset;
  width: 90%;
}
.im-modal-cookie__content-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: end;
}
.im-modal-cookie__content-text {
  max-height: 26vh !important;
}
.im-modal-cookie__content-text p {
  margin-bottom: 10px;
}
.im-modal-cookie__img {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.link-primary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-direction: row;
  color: #2d2826 !important;
  font-weight: 600;
  text-decoration: none !important;
  text-transform: none;
}
.link-primary svg {
  fill: #2d2826;
  color: #2d2826;
  width: 13px;
  height: 13px;
}

.block-embed select {
  height: 37px;
  display: block;
  background: #ffffff;
  border: 1px solid #2d2826 !important;
  border-radius: 5px;
}

.form {
  background-color: #ffffff;
  padding: 40px;
  margin: 20px 0;
  border-radius: 16px;
}
.form > .h3 {
  margin-bottom: 20px;
}
.form > .p-body {
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .form {
    padding: 40px 20px;
  }
}
.form-small-txt {
  margin-bottom: 10px;
}
.form-small-txt h3 {
  margin-bottom: 20px;
}
.form-row {
  width: 100%;
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
  .form-row {
    margin-bottom: 20px;
    flex-direction: column;
    gap: 20px;
  }
}
.form .im-accordion__toggle {
  border-bottom: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.form .im-accordion__toggle .button--link {
  text-decoration: underline;
}
.form-actions {
  margin-top: 50px;
}

.form-group {
  width: 100%;
  margin-bottom: 1em;
}
.form-group label {
  display: block;
  padding: 0 4px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #2d2826;
  cursor: pointer;
  margin-bottom: 8px;
}
.form-group .wrap-message {
  min-height: 22px;
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=number],
.form-group input[type=url],
.form-group textarea,
.form-group select {
  -webkit-appearance: none;
  width: 100%;
  height: 45px;
  padding: 12px 16px;
  margin: 0px;
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: #2d2826;
  background-color: transparent;
  border: #DADADA solid 1px;
  border-radius: 8px;
}
.form-group input[type=text]:focus, .form-group input[type=text]:focus-visible,
.form-group input[type=email]:focus,
.form-group input[type=email]:focus-visible,
.form-group input[type=tel]:focus,
.form-group input[type=tel]:focus-visible,
.form-group input[type=number]:focus,
.form-group input[type=number]:focus-visible,
.form-group input[type=url]:focus,
.form-group input[type=url]:focus-visible,
.form-group textarea:focus,
.form-group textarea:focus-visible,
.form-group select:focus,
.form-group select:focus-visible {
  outline-color: #e5554f;
}
.form-group input[type=number]::-webkit-inner-spin-button,
.form-group input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-group input[type=radio],
.form-group input[type=checkbox] {
  border-radius: 0px;
  appearance: none;
  -webkit-appearance: none;
  outline: 1px solid #f3f3f3;
  border: 2px solid #ffffff;
  background-color: #ffffff;
  width: 14px;
  height: 14px;
  border-radius: 8px;
}
.form-group input[type=radio]:checked,
.form-group input[type=checkbox]:checked {
  background-color: #e5554f;
}
.form-group textarea {
  height: 100%;
  max-height: 150px;
  padding: 10px;
  resize: none;
}
.form-group select {
  width: 100%;
  height: auto;
  min-width: 300px;
  -webkit-appearance: none;
  background-position: calc(100% - 20px);
  background-size: 22px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m22 7.97-9.25 9.25a1.063 1.063 0 0 1-1.5 0L2 7.97l1.501-1.5L12 14.967l8.498-8.499L22 7.971Z'/%3E%3C/svg%3E");
  cursor: pointer;
}
.form-group legend,
.form-group .wpcf7-list-item-label,
.form-group .error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #2d2826;
}
.form-group .wpcf7-not-valid-tip {
  margin-top: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.form-group .wpcf7-not-valid {
  border-color: #c21517 !important;
}
.form-group .error,
.form-group .wpcf7-not-valid-tip {
  color: #c21517;
}
.form-group .wpcf7-checkbox {
  margin-top: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.form-group .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
}
.form-group .wpcf7-checkbox .wpcf7-list-item > label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.form-group .radio-wrap {
  display: inline-block;
  vertical-align: middle;
}
.form-group .radio-wrap:last-child, .form-group .radio-wrap:nth-child(3) {
  margin-left: 15px;
}
.form-group .radio-wrap * {
  display: inline-block;
  vertical-align: middle;
}
.form-group .radio-wrap label {
  margin-left: 5px;
}
.form-group .required {
  margin-top: 15px;
}
.form-group .box-acceptance {
  margin-top: 60px;
  margin-bottom: 20px;
}
.form-group .box-acceptance .title-accordion-open {
  margin-top: 10px;
  cursor: pointer;
}
.form-group .box-acceptance .title-accordion-open .button--link {
  border-color: #2d2826;
}
.form-group .box-acceptance .content-accordion .title-accordion-open,
.form-group .box-acceptance .content-accordion [data-wrapper-height] {
  padding: 20px 0;
}
.form-group .box-acceptance .radios--wrapper {
  margin-top: 10px;
}
.form-group .box-acceptance .radios--wrapper input[type=radio] {
  margin-right: 7px;
  transform: translateY(2px);
  outline-color: #8B8C89;
  outline-width: 2px;
}
.form-group .box-acceptance .radios--wrapper .fieldset-wrapper .wpcf7-list-item:first-child {
  margin-left: 0px;
}
.form-group .box-acceptance .radios--wrapper .fieldset-wrapper .wpcf7-list-item:not(:first-child) {
  margin-left: 50px;
}
@media (max-width: 767px) {
  .form-group .box-acceptance .radios--wrapper .fieldset-wrapper {
    margin-top: 10px;
    display: flex;
    padding-top: 10px;
  }
}
@media (min-width: 768px) {
  .form-group .box-acceptance .radios--wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .form-group .box-acceptance .radios--wrapper .fieldset-wrapper {
    white-space: nowrap;
    display: flex;
    padding-top: 10px;
  }
}
.form-group .box-acceptance .text-link {
  font-size: inherit;
}
.form-group label.acceptance-a {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 10px 0;
}
.form-group label.acceptance-a .wpcf7-not-valid-tip {
  position: absolute;
}
.form-group .float-label {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-group .float-label .wpcf7-form-control-wrap {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}
.form-group .float-label textarea {
  resize: none;
}
.form-group .float-label textarea.wpcf7-not-valid ~ .floating-label,
.form-group .float-label textarea + .floating-label {
  top: 25px;
}
.form-group .float-label textarea:focus ~ .floating-label,
.form-group .float-label textarea:not(:focus):not(:placeholder-shown) ~ .floating-label,
.form-group .float-label input:focus ~ .floating-label,
.form-group .float-label input:not(:focus):not(:placeholder-shown) ~ .floating-label {
  top: 2px;
  transform: none;
  font-size: 12px;
}
.form-group .float-label input {
  height: 100%;
  min-height: 40px;
  border-bottom: 1px solid #f3f3f3;
  padding: 25px 2px 5px;
  caret-color: #2d2826;
  color: #2d2826;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
}
.form-group .float-label input:focus, .form-group .float-label input:focus-visible {
  outline: none;
}
.form-group .float-label .floating-label {
  pointer-events: none;
  position: absolute;
  top: 50%;
  bottom: initial;
  left: initial;
  right: initial;
  transform: translateY(-50%);
  left: 2px;
  font-family: "Poppins", "arial", "sans serif";
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0em;
  color: currentColor;
  text-align: left;
  transition: color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19), top 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}
.form-actions input[type=submit] {
  border-radius: 1.5rem;
  min-width: 150px;
  padding: 0.875rem 1.5rem;
  background-color: #e5554f;
  color: #ffffff;
  border: 0;
  cursor: pointer;
  box-shadow: none;
}
.form-actions .wpcf7-spinner {
  position: absolute;
}

.wpcf7-response-output {
  background: #ffffff;
  text-align: center;
  font-weight: 600;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 5px;
}

form.invalid .wpcf7-response-output {
  color: #c21517;
}

form.sent .wpcf7-response-output {
  color: #196d38;
  margin: 0 !important;
}

/**
  * File scss:     containers.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili per i container 
**/
.container--small {
  max-width: 1090px;
}
.container--fluid {
  max-width: 100%;
}
@media (min-width: 1441px) {
  .container--fluid {
    max-width: 1600px;
    margin: auto;
  }
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mt-xs {
  margin-top: 5px !important;
}

.mr-xs {
  margin-right: 5px !important;
}

.mb-xs {
  margin-bottom: 5px !important;
}

.ml-xs {
  margin-left: 5px !important;
}

.mx-xs {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.my-xs {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.mt-s {
  margin-top: 10px !important;
}

.mr-s {
  margin-right: 10px !important;
}

.mb-s {
  margin-bottom: 10px !important;
}

.ml-s {
  margin-left: 10px !important;
}

.mx-s {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.my-s {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.mt-m {
  margin-top: 20px !important;
}

.mr-m {
  margin-right: 20px !important;
}

.mb-m {
  margin-bottom: 20px !important;
}

.ml-m {
  margin-left: 20px !important;
}

.mx-m {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.my-m {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.mt-l {
  margin-top: 30px !important;
}

.mr-l {
  margin-right: 30px !important;
}

.mb-l {
  margin-bottom: 30px !important;
}

.ml-l {
  margin-left: 30px !important;
}

.mx-l {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

.my-l {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.mt-xl {
  margin-top: 40px !important;
}

.mr-xl {
  margin-right: 40px !important;
}

.mb-xl {
  margin-bottom: 40px !important;
}

.ml-xl {
  margin-left: 40px !important;
}

.mx-xl {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.my-xl {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.mt-xxl {
  margin-top: 60px !important;
}

.mr-xxl {
  margin-right: 60px !important;
}

.mb-xxl {
  margin-bottom: 60px !important;
}

.ml-xxl {
  margin-left: 60px !important;
}

.mx-xxl {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.my-xxl {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.mt-xxxl {
  margin-top: 90px !important;
}

.mr-xxxl {
  margin-right: 90px !important;
}

.mb-xxxl {
  margin-bottom: 90px !important;
}

.ml-xxxl {
  margin-left: 90px !important;
}

.mx-xxxl {
  margin-left: 90px !important;
  margin-right: 90px !important;
}

.my-xxxl {
  margin-top: 90px !important;
  margin-bottom: 90px !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pt-xs {
  padding-top: 5px !important;
}

.pr-xs {
  padding-right: 5px !important;
}

.pb-xs {
  padding-bottom: 5px !important;
}

.pl-xs {
  padding-left: 5px !important;
}

.px-xs {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.py-xs {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.pt-s {
  padding-top: 10px !important;
}

.pr-s {
  padding-right: 10px !important;
}

.pb-s {
  padding-bottom: 10px !important;
}

.pl-s {
  padding-left: 10px !important;
}

.px-s {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.py-s {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.pt-m {
  padding-top: 20px !important;
}

.pr-m {
  padding-right: 20px !important;
}

.pb-m {
  padding-bottom: 20px !important;
}

.pl-m {
  padding-left: 20px !important;
}

.px-m {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py-m {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.pt-l {
  padding-top: 30px !important;
}

.pr-l {
  padding-right: 30px !important;
}

.pb-l {
  padding-bottom: 30px !important;
}

.pl-l {
  padding-left: 30px !important;
}

.px-l {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.py-l {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.pt-xl {
  padding-top: 40px !important;
}

.pr-xl {
  padding-right: 40px !important;
}

.pb-xl {
  padding-bottom: 40px !important;
}

.pl-xl {
  padding-left: 40px !important;
}

.px-xl {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.py-xl {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.pt-xxl {
  padding-top: 60px !important;
}

.pr-xxl {
  padding-right: 60px !important;
}

.pb-xxl {
  padding-bottom: 60px !important;
}

.pl-xxl {
  padding-left: 60px !important;
}

.px-xxl {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.py-xxl {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.pt-xxxl {
  padding-top: 90px !important;
}

.pr-xxxl {
  padding-right: 90px !important;
}

.pb-xxxl {
  padding-bottom: 90px !important;
}

.pl-xxxl {
  padding-left: 90px !important;
}

.px-xxxl {
  padding-left: 90px !important;
  padding-right: 90px !important;
}

.py-xxxl {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

.splide__progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.splide__progress-wrap .splide__progress-num {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.25rem;
}
.splide__progress {
  width: 100%;
  background: #2d2826;
  height: 1px;
}
.splide__progress--bar {
  background: #2d2826;
  height: 4px;
  transition: width 400ms ease;
  transform: translateY(-3px);
  width: 0;
}
.splide__arrows {
  display: flex;
  gap: 6px;
}
.splide__arrow {
  width: 60px;
  height: 60px;
  background-color: #e5554f;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: none;
}
.splide__arrow[disabled] {
  background-color: #ffffff;
  cursor: default;
}
.splide__arrow[disabled] > svg {
  fill: #BABABA;
}
.splide__arrow > svg {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  bottom: initial;
  left: 50%;
  right: initial;
  transform: translate(-50%, -50%);
  fill: #ffffff;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./node_modules/@splidejs/splide/dist/css/splide-core.min.css ***!
  \*************************************************************************************************************************************************************************************************************/
@use "scss/base" as *;
@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/components/animation/animation.scss ***!
  \******************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
/*
*
* File SASS componente Incipit
*
*/
[data-animm=bottom-to-top] {
  opacity: 0;
  position: relative;
  top: 70px;
}
[data-animm=bottom-to-top].start-animation {
  transition: top 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 1;
  top: 0;
}

[data-animm=opacity] {
  opacity: 0;
}
[data-animm=opacity].start-animation {
  transition: opacity 0.4s linear;
  opacity: 1;
}

[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(1) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(1) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(2) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(2) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 200ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 200ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(3) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(3) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 400ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(4) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(4) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 600ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 600ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(5) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(5) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 800ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 800ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(6) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(6) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1000ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1000ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(7) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(7) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(8) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(8) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1400ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1400ms;
  opacity: 1;
  transform: translateY(0px);
}
[data-animm=card-bottom-to-top] [data-animm-card-child]:nth-child(9) {
  opacity: 0;
  transform: translateY(100px);
}
[data-animm=card-bottom-to-top].start-animation [data-animm-card-child]:nth-child(9) {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1600ms, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1600ms;
  opacity: 1;
  transform: translateY(0px);
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/components/video-player/video-player.scss ***!
  \************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
/*
*
* File SCSS componente Video Player
*
*/
.video-player {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background-color: #2d2826;
  z-index: 1001;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.4s linear, height 0ms linear 0.4s;
}
.video-player.is-open {
  height: 100%;
  opacity: 1;
  transition: opacity 0.4s linear, height 0ms linear;
}
.video-player__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.video-player__content video {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s linear;
}
.video-player__content video.attached {
  opacity: 1;
}
.video-player__close {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 2;
}
.video-player__close:after, .video-player__close:before {
  content: "";
  position: absolute;
  top: 19px;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: #ffffff;
}
.video-player__close:before {
  transform: rotate(45deg);
}
.video-player__close:after {
  transform: rotate(-45deg);
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/components/header/header.scss ***!
  \************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
.header__top .menu > li > a, .header__menu .menu > li > a {
  font-family: "Poppins", "arial", "sans serif";
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
}

.header__top .menu > li > a, .header__menu .menu > li > a {
  color: #2d2826;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  margin: 2px 0;
  max-width: max-content;
}
.header__top .menu > li > a svg, .header__menu .menu > li > a svg,
.header__top .menu > li > a .icon,
.header__menu .menu > li > a .icon {
  width: 16px;
  height: 16px;
  fill: #2d2826;
}
.header__top .menu > li > a:after, .header__menu .menu > li > a:after {
  content: "";
  display: block;
  width: 0px;
  height: 2px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background: #2d2826;
  transition: width 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.header__top .menu > li > a.active:after, .header__menu .menu > li > a.active:after, .header__top .menu > li > a:focus-visible:after, .header__menu .menu > li > a:focus-visible:after, .header__top .menu > li > a:active:after, .header__menu .menu > li > a:active:after {
  width: 100%;
}
@media (min-width: 1025px) {
  .header__top .menu > li > a:hover:after, .header__menu .menu > li > a:hover:after {
    width: 100%;
  }
}
.header__top .menu > li > a[disabled], .header__menu .menu > li > a[disabled] {
  color: #f3f3f3;
  pointer-events: none;
}
.header__top .menu > li > a[disabled] svg, .header__menu .menu > li > a[disabled] svg,
.header__top .menu > li > a[disabled] .icon,
.header__menu .menu > li > a[disabled] .icon {
  fill: #f3f3f3;
}

/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
.header__top, .header__wrapper, .header__menu .menu > li > .megamenu-container {
  width: 100%;
  margin: 0px auto;
}
@media (max-width: 767px) {
  .header__top, .header__wrapper, .header__menu .menu > li > .megamenu-container {
    padding-inline: 20px;
  }
}
@media (min-width: 768px) {
  .header__top, .header__wrapper, .header__menu .menu > li > .megamenu-container {
    padding-inline: 4.44%;
  }
}
@media (min-width: 1441px) {
  .header__top, .header__wrapper, .header__menu .menu > li > .megamenu-container {
    max-width: 1380px;
    padding-left: 0;
    padding-right: 0;
  }
}

/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(100% - 44px);
  z-index: 101;
  color: #2d2826;
}
@media (max-width: 1129px) {
  .header {
    top: 0;
    width: 100%;
  }
}
.header__top {
  padding-inline: 0;
  margin-bottom: 6px;
}
.header__top--wrapper {
  width: min-content;
  padding: 8px 40px;
  border-radius: 8px;
  margin-left: auto;
  background-color: transparent;
  opacity: 1;
  transition: opacity 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.header__top .menu {
  display: flex;
  gap: 20px;
}
@media (min-width: 1441px) {
  .header__top .menu {
    gap: 40px;
  }
}
@media (max-width: 1129px) {
  .header__top .menu {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    color: #ffffff;
    padding: 30px 4.44%;
  }
}
@media (max-width: 767px) {
  .header__top .menu {
    padding: 30px 20px;
  }
}
.header__top .menu > li.active,
.header__top .menu > li a.active {
  color: #2d2826;
}
.header__top .menu > li.active:after,
.header__top .menu > li a.active:after {
  width: 100%;
  background-color: #2d2826;
}
.header__top .menu > li > a {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 0.9375rem;
  letter-spacing: 1.4px;
  color: currentColor;
  text-decoration: none;
}
@media (max-width: 1129px) {
  .header__top .menu > li > a {
    font-size: 1.75rem;
    line-height: 2rem;
    text-align: left;
    color: #2d2826;
    width: 100%;
    justify-content: space-between;
    max-width: initial;
  }
}
@media (max-width: 1129px) {
  .header__top {
    display: none;
  }
}
.header__wrapper {
  padding: 24px 40px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.9803921569);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  box-shadow: 0px 4.38px 4.63px 0px rgba(0, 0, 0, 0.0235294118), 0px 20px 13px 0px rgba(0, 0, 0, 0.0352941176), 0px 50.63px 34.88px 0px rgba(0, 0, 0, 0.0470588235), 0px 100px 80px 0px rgba(0, 0, 0, 0.0705882353);
}
@media (max-width: 1129px) {
  .header__wrapper {
    height: 45px;
    width: calc(100% - 40px);
    margin-top: 20px;
    padding: 12px;
  }
}
.header__logo {
  flex: 0 0 calc(20% - 40px);
  z-index: 10;
}
.header__logo svg {
  width: 180px;
  height: auto;
}
.header__logo svg path {
  transition: fill 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@media (max-width: 1129px) {
  .header__logo svg {
    width: 108px;
  }
}
@media (max-width: 1129px) {
  .header__menu {
    transition: transform 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    overflow: hidden;
    width: 100%;
    height: 101dvh;
    background-color: #f3f3f3;
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    transform: translateX(100%);
    overflow-y: auto;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .header__menu::-webkit-scrollbar {
    display: none;
  }
}
.header__menu .menu {
  display: flex;
  gap: 20px;
}
@media (min-width: 1441px) {
  .header__menu .menu {
    gap: 30px;
  }
}
@media (max-width: 1129px) {
  .header__menu .menu {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    color: #2d2826;
    padding: 30px 20px;
  }
}
@media (max-width: 1129px) {
  .header__menu .menu > li {
    padding: 28px 0;
    border-top: 1px solid;
  }
}
@media (min-width: 1130px) {
  .header__menu .menu > li.active a:after {
    width: 100%;
    background-color: #2d2826;
  }
}
.header__menu .menu > li > a {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 0.9375rem;
  letter-spacing: 1.4px;
  color: currentColor;
  text-decoration: none;
  text-transform: uppercase;
}
.header__menu .menu > li > a:after {
  bottom: -6px;
}
@media (max-width: 1129px) {
  .header__menu .menu > li > a {
    font-size: 0.875rem;
    line-height: 1rem;
    text-align: left;
    letter-spacing: 1.4px;
    color: #2d2826;
    width: 100%;
    justify-content: space-between;
    max-width: initial;
  }
  .header__menu .menu > li > a::after {
    content: initial;
  }
  .header__menu .menu > li > a:not(.dropdown-toggle)::after {
    content: "";
    width: 16px;
    height: 16px;
    background: transparent;
    position: initial;
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='14' viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.88577 2.6571H10.0572C10.4359 2.6571 10.7429 2.96411 10.7429 3.34282V9.51425C10.7429 9.89294 10.4359 10.2 10.0572 10.2C9.67844 10.2 9.37152 9.89294 9.37152 9.51425V4.99828L2.3135 12.0562L1.34375 11.0865L8.40173 4.02853H3.88577C3.50705 4.02853 3.20005 3.72153 3.20005 3.34282C3.20005 2.96411 3.50705 2.6571 3.88577 2.6571Z' fill='currentColor'/%3E%3C/svg%3E%0A");
  }
}
.header__menu .menu > li .submenu-indicator > svg {
  transition: transform 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 12px;
  height: 12px;
  fill: currentColor;
}
@media (max-width: 1129px) {
  .header__menu .menu > li .submenu-indicator {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .header__menu .menu > li .submenu-indicator::before, .header__menu .menu > li .submenu-indicator::after {
    content: "";
    position: absolute;
    background-color: black;
    transition: opacity 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  .header__menu .menu > li .submenu-indicator::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .header__menu .menu > li .submenu-indicator::after {
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .header__menu .menu > li .submenu-indicator > svg {
    display: none;
  }
}
.header__menu .menu > li > .megamenu-container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 100%;
  padding: 24px 40px;
  background: #ffffff;
  position: absolute;
  left: 0;
  right: 0;
  top: 126px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0px 4.38px 4.63px 0px rgba(0, 0, 0, 0.0235294118), 0px 20px 13px 0px rgba(0, 0, 0, 0.0352941176), 0px 50.63px 34.88px 0px rgba(0, 0, 0, 0.0470588235), 0px 100px 80px 0px rgba(0, 0, 0, 0.0705882353);
}
@media (max-width: 1129px) {
  .header__menu .menu > li > .megamenu-container {
    width: 100%;
    height: auto;
    position: initial;
    padding: 0px;
    box-shadow: initial;
    background-color: transparent;
    gap: 15px;
  }
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu {
  display: flex;
  margin-bottom: 26px;
  position: relative;
  gap: 20px;
}
@media (max-width: 1129px) {
  .header__menu .menu > li > .megamenu-container > .dropdown-menu {
    margin: 0px;
    overflow: hidden;
    height: 0px;
    gap: 0px;
    transform-origin: top;
    transition: height 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    justify-content: flex-end;
    flex-direction: column;
  }
  .header__menu .menu > li > .megamenu-container > .dropdown-menu > li:not(:last-child) a {
    margin-bottom: 15px;
    display: block;
  }
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item {
  width: 100%;
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item {
  position: relative;
}
@media (min-width: 1130px) {
  .header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item {
    display: flex;
  }
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img {
  width: 100%;
  height: 100%;
  position: relative;
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img > picture {
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 1129px) {
  .header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img > picture {
    display: none;
  }
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  height: 244px;
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img > picture::after {
  content: "";
  border-radius: 16px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.53%, rgba(0, 0, 0, 0.3) 74.18%);
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img .wrap-text {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 0px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}
@media (max-width: 1129px) {
  .header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img .wrap-text {
    position: initial;
    color: #2d2826;
    padding: 0;
  }
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img .wrap-text .label {
  width: 60%;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
}
@media (max-width: 1129px) {
  .header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img .wrap-text .label {
    width: auto;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4375rem;
    display: flex;
    align-items: center;
  }
  .header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img .wrap-text .label::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    width: 15px;
    height: 15px;
    background-size: 15px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.463 2.251a.857.857 0 0 0-1.212 1.212l5.91 5.91a3.714 3.714 0 0 1 0 5.253l-5.91 5.91a.857.857 0 0 0 1.212 1.213l5.91-5.91a5.429 5.429 0 0 0 0-7.678l-5.91-5.91Z'/%3E%3C/svg%3E%0A");
  }
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img .wrap-text .icon {
  width: 60px;
  height: 60px;
  fill: #e5554f;
  background-color: #ffffff;
  padding: 16px;
  border-radius: 50%;
}
@media (max-width: 1129px) {
  .header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item > a.dropdown-item .wrap-img .wrap-text .icon {
    display: none;
  }
}
.header__menu .menu > li > .megamenu-container > .dropdown-menu .megamenu-item.active .wrap-text {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.header__menu .menu > li > .megamenu-container a {
  color: #ffffff;
  text-decoration: none;
}
@media (max-width: 1129px) {
  .header__menu .menu > li.open {
    border-top: 2px solid #2d2826;
  }
}
.header__menu .menu > li.open > .megamenu-container {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1130px) {
  .header__menu .menu > li.open > .megamenu-container {
    transition: opacity 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }
}
.header__menu .menu > li.open .submenu-indicator > svg {
  transform: rotate(180deg);
}
@media (max-width: 1129px) {
  .header__menu .menu > li.open .submenu-indicator::after {
    opacity: 0;
  }
}
@media (min-width: 1130px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul {
    gap: 60px;
    padding-bottom: 20px;
  }
}
@media (min-width: 1130px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) {
    flex: 0 0 calc(50% - 110px);
    max-width: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    margin-right: 110px;
  }
}
@media (max-width: 1129px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori):last-child {
    padding-top: 20px;
  }
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > a {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 50%;
}
@media (max-width: 1129px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > a {
    padding-bottom: 20px;
  }
}
@media (max-width: 1129px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > a .submenu-indicator::after, .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > a .submenu-indicator::before {
    content: unset;
  }
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > a .submenu-indicator svg {
    display: block;
  }
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > a .submenu-indicator svg {
  transform: rotate(-90deg);
  width: 60px;
  height: 30px;
  padding: 10px 20px;
}
@media (max-width: 1129px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > a .submenu-indicator svg {
    width: 20px;
    height: 20px;
    padding: 0px;
  }
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container {
  flex: 1 0 50%;
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container > ul {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 1129px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container > ul {
    gap: 16px;
  }
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container > ul > li > a .wrap-integratori {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container > ul > li > a .wrap-integratori .title {
  font-weight: 500;
  font-size: 14px;
  line-height: 15.4px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1129px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container > ul > li > a .wrap-integratori .title {
    gap: 4px;
    justify-content: flex-start;
  }
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container > ul > li > a .wrap-integratori .title::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='10' viewBox='0 0 5 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.548283 8.46967C0.25539 8.76256 0.25539 9.23744 0.548283 9.53033C0.841176 9.82322 1.31605 9.82322 1.60894 9.53033L4.19473 6.94454C5.26867 5.8706 5.26867 4.1294 4.19473 3.05546L1.60894 0.46967C1.31605 0.176777 0.841176 0.176777 0.548283 0.46967C0.25539 0.762563 0.25539 1.23744 0.548283 1.53033L3.13407 4.11612C3.62222 4.60427 3.62223 5.39573 3.13407 5.88388L0.548283 8.46967Z' fill='%23363538'/%3E%3C/svg%3E%0A");
  display: block;
  width: 5px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 5px;
  background-position: center;
}
.header__menu .menu > .menu-integratori > .megamenu-container > ul > li:not(.all-integratori) > .megamenu-container > ul > li > a .wrap-integratori .label {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #e5554f;
}
@media (min-width: 1130px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul .all-integratori {
    background-color: #e5554f;
    position: absolute;
    bottom: -68px;
    left: -40px;
    width: calc(100% + 80px);
    padding: 20px 36px;
    z-index: 10;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0px 4.38px 4.63px 0px rgba(0, 0, 0, 0.0235294118), 0px 20px 13px 0px rgba(0, 0, 0, 0.0352941176), 0px 50.63px 34.88px 0px rgba(0, 0, 0, 0.0470588235), 0px 100px 80px 0px rgba(0, 0, 0, 0.0705882353);
  }
  .header__menu .menu > .menu-integratori > .megamenu-container > ul .all-integratori a {
    width: 100%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }
  .header__menu .menu > .menu-integratori > .megamenu-container > ul .all-integratori a::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='5' height='10' viewBox='0 0 5 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.548283 8.46967C0.25539 8.76256 0.25539 9.23744 0.548283 9.53033C0.841176 9.82322 1.31605 9.82322 1.60894 9.53033L4.19473 6.94454C5.26867 5.8706 5.26867 4.1294 4.19473 3.05546L1.60894 0.46967C1.31605 0.176777 0.841176 0.176777 0.548283 0.46967C0.25539 0.762563 0.25539 1.23744 0.548283 1.53033L3.13407 4.11612C3.62222 4.60427 3.62223 5.39573 3.13407 5.88388L0.548283 8.46967Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    background-color: transparent;
  }
}
@media (max-width: 1129px) {
  .header__menu .menu > .menu-integratori > .megamenu-container > ul .all-integratori {
    width: 100%;
    padding-top: 20px;
  }
  .header__menu .menu > .menu-integratori > .megamenu-container > ul .all-integratori a {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: black;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .header__menu .menu > .menu-integratori > .megamenu-container > ul .all-integratori a::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='5' height='10' viewBox='0 0 5 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.548283 8.46967C0.25539 8.76256 0.25539 9.23744 0.548283 9.53033C0.841176 9.82322 1.31605 9.82322 1.60894 9.53033L4.19473 6.94454C5.26867 5.8706 5.26867 4.1294 4.19473 3.05546L1.60894 0.46967C1.31605 0.176777 0.841176 0.176777 0.548283 0.46967C0.25539 0.762563 0.25539 1.23744 0.548283 1.53033L3.13407 4.11612C3.62222 4.60427 3.62223 5.39573 3.13407 5.88388L0.548283 8.46967Z' fill='%23363538'/%3E%3C/svg%3E%0A");
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
  }
}
.header__menu .menu > .menu-integratori > .megamenu-container a {
  color: #2d2826;
  text-decoration: none;
}
.header__menu--top {
  display: none;
}
@media (max-width: 1129px) {
  .header__menu--top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 30px 20px 0px;
  }
  .header__menu--top svg {
    width: 48px;
    height: 48px;
  }
  .header__menu--top .close-mobile-menu {
    font-size: 0.75rem;
    line-height: 0.8125rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e5554f;
    font-weight: 600;
    text-decoration: none;
  }
}
.header__menu--bottom {
  display: none;
}
@media (max-width: 1129px) {
  .header__menu--bottom {
    display: block;
  }
  .header__menu--bottom .menu {
    gap: 15px;
    padding-bottom: 60px;
  }
  .header__menu--bottom .menu > li {
    padding: 0px;
    border: none;
  }
  .header__menu--bottom .menu > li > a {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 0.875rem;
    letter-spacing: 1.4px;
    text-decoration-line: underline;
    text-transform: none;
  }
  .header__menu--bottom .menu > li > a::after {
    content: initial !important;
  }
}
.header__burger {
  display: block;
  width: 20px;
  height: 15px;
  position: relative;
  overflow: hidden;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
.header__burger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #2d2826;
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transform-origin: center;
  border-radius: 20%;
}
.header__burger-line:not(:first-child) {
  margin-top: 4px;
}
@media (min-width: 1130px) {
  .header__burger {
    display: none;
  }
}
.header.submenu-opened .header__wrapper {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.header.submenu-opened .header__top--wrapper {
  opacity: 1;
  background-color: #ffffff;
  pointer-events: all;
  box-shadow: 0px 4.38px 4.63px 0px rgba(0, 0, 0, 0.0235294118), 0px 20px 13px 0px rgba(0, 0, 0, 0.0352941176), 0px 50.63px 34.88px 0px rgba(0, 0, 0, 0.0470588235), 0px 100px 80px 0px rgba(0, 0, 0, 0.0705882353);
}
@media (max-width: 1129px) {
  .header.mainmenu-opened .header__menu {
    transform: translateX(0%);
  }
  .header.mainmenu-opened .header__burger .header__burger-line {
    opacity: 0;
  }
  .header.mainmenu-opened .header__burger .header__burger-line:first-child {
    opacity: 1;
    transform: translateY(6px) rotate(45deg);
    background-color: #e5554f;
  }
  .header.mainmenu-opened .header__burger .header__burger-line:last-child {
    opacity: 1;
    transform: translateY(-6px) rotate(-45deg);
    background-color: #e5554f;
  }
}
@media (min-width: 1130px) {
  .header.headroom--pinned:not(.submenu-opened) .header__top--wrapper {
    opacity: 1;
    background-color: #ffffff;
    pointer-events: all;
    box-shadow: 0px 4.38px 4.63px 0px rgba(0, 0, 0, 0.0235294118), 0px 20px 13px 0px rgba(0, 0, 0, 0.0352941176), 0px 50.63px 34.88px 0px rgba(0, 0, 0, 0.0470588235), 0px 100px 80px 0px rgba(0, 0, 0, 0.0705882353);
  }
  .header.headroom--pinned:not(.submenu-opened) .header__wrapper {
    position: relative;
    top: 0px;
    transition: top 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  .header.headroom--unpinned:not(.submenu-opened) .header__top--wrapper {
    opacity: 0;
    pointer-events: none;
  }
  .header.headroom--unpinned:not(.submenu-opened) .header__wrapper {
    position: relative;
    top: -50px;
    transition: top 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  .header.headroom--top .header__top--wrapper {
    opacity: 1;
    background-color: transparent !important;
    pointer-events: all;
    box-shadow: initial !important;
  }
}
.header .no-transition {
  transition: none !important;
}

@media (max-width: 1129px) {
  body.mainmenu-opened {
    overflow: hidden;
  }
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/components/footer/footer.scss ***!
  \************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
.footer__bottom .text-legacy, .footer__bottom .menu-legacy a {
  font-family: "Poppins", "arial", "sans serif";
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
}

/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.footer {
  color: #ffffff;
  position: relative;
  background-image: url(./../../../assets/img/footer/bg-d.png);
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 1024px) {
  .footer {
    padding: 20px;
    background-image: url(./../../../assets/img/footer/bg-m.png);
  }
}
.footer__wrapper {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-top: 180px;
  gap: 30px;
}
@media (max-width: 1024px) {
  .footer__wrapper {
    padding-top: 100px;
    flex-direction: column;
  }
  .footer__wrapper .button-primary {
    display: none;
  }
}
.footer__wrapper .newsletter-link {
  display: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 0.9375rem;
  letter-spacing: 1px;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  text-transform: uppercase;
  margin-top: 30px;
}
.footer__wrapper .newsletter-link:after {
  content: "";
  display: block;
  width: 0px;
  height: 1px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background-color: #ffffff;
  transition: width 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.footer__wrapper .newsletter-link.active:after, .footer__wrapper .newsletter-link:focus-visible:after, .footer__wrapper .newsletter-link:active:after, .footer__wrapper .newsletter-link:hover:after {
  width: 100%;
}
@media (max-width: 1024px) {
  .footer__wrapper .newsletter-link {
    display: block;
  }
}
.footer__wrapper--col:first-child {
  flex: 0 1 calc(25% - 30px);
}
.footer__wrapper--col:last-child {
  flex: 1;
}
.footer .logo {
  margin-bottom: 50px;
  display: block;
}
.footer .logo svg {
  width: 180px;
  height: auto;
}
@media (max-width: 1024px) {
  .footer .logo {
    margin-bottom: 30px;
  }
}
.footer .menu {
  display: flex;
  gap: 30px;
}
@media (max-width: 1024px) {
  .footer .menu {
    flex-direction: column;
  }
}
.footer .menu > li.menu-item {
  flex: 1;
}
.footer .menu > li.menu-item > a.dropdown-toggle {
  pointer-events: none;
  display: none;
}
.footer .menu > li.menu-item a {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 0.9375rem;
  letter-spacing: 1px;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  text-transform: uppercase;
}
.footer .menu > li.menu-item a:after {
  content: "";
  display: block;
  width: 0px;
  height: 1px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background-color: #ffffff;
  transition: width 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.footer .menu > li.menu-item a.active:after, .footer .menu > li.menu-item a:focus-visible:after, .footer .menu > li.menu-item a:active:after, .footer .menu > li.menu-item a:hover:after {
  width: 100%;
}
.footer .menu > li.menu-item > ul.dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.footer .menu > li.menu-item > ul.dropdown-menu li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown > a.dropdown-item {
  display: block;
  opacity: 0.5;
  pointer-events: none;
  margin-bottom: 30px;
}
@media (max-width: 1024px) {
  .footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown > a.dropdown-item {
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
  }
}
.footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown > a.dropdown-item .submenu-indicator > svg {
  transition: transform 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 12px;
  height: 12px;
  color: #ffffff;
}
@media (min-width: 1025px) {
  .footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown > a.dropdown-item .submenu-indicator {
    display: none;
  }
}
.footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown > ul.dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown > ul.dropdown-menu a {
  text-transform: none;
}
@media (max-width: 1024px) {
  .footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown > ul.dropdown-menu {
    height: 0px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0s linear, height 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}
.footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown.open > ul.dropdown-menu {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
  padding-top: 10px;
}
.footer .menu > li.menu-item > ul.dropdown-menu > li.dropdown.open .submenu-indicator > svg {
  transform: rotate(180deg);
}
.footer__bottom {
  z-index: 2;
  position: relative;
  margin-top: 50px;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #ffffff;
}
@media (max-width: 1024px) {
  .footer__bottom {
    margin-top: 30px;
  }
}
.footer__bottom .text-legacy {
  color: #ffffff;
}
.footer__bottom .menu-legacy {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.footer__bottom .menu-legacy > li:not(:last-child):after {
  content: "-";
  display: inline-block;
  margin-left: 10px;
}
.footer__bottom .menu-legacy a {
  color: #ffffff;
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/components/accordion/accordion.scss ***!
  \******************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.im-accordion__toggle {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #2d2826;
  gap: 10px;
  color: #2d2826;
  position: relative;
  padding-left: 10px;
}
@media (min-width: 1025px) {
  .im-accordion__toggle {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .im-accordion__toggle span {
    font-size: 1.125rem;
  }
}
.im-accordion__toggle.open .im-accordion__icon::after {
  opacity: 0;
}
.im-accordion__icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex: 0 0 16px;
}
.im-accordion__icon::before, .im-accordion__icon::after {
  content: "";
  position: absolute;
  background-color: #2d2826;
  transition: opacity 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.im-accordion__icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.im-accordion__icon::after {
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.im-accordion__content {
  overflow: hidden;
  height: 0px;
  transition: height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.im-accordion__content > [data-wrapper-height] {
  padding: 10px;
}
.im-accordion__content .wrapper {
  color: #7397bb;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
@media (max-width: 767px) {
  .im-accordion__content .wrapper {
    flex-direction: column;
  }
}
.im-accordion__content .wrapper .text-content {
  flex: 1 1 50%;
}
/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/components/breadcrumb/breadcrumb.scss ***!
  \********************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin: 10px 0;
  padding: 0;
}
.breadcrumbs .icon-home svg {
  width: 20px;
  height: 20px;
}
.breadcrumbs .trail-item {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.125rem;
}
.breadcrumbs .trail-item.active {
  font-weight: 600;
}
.breadcrumbs .trail-item > a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  display: block;
  position: relative;
  font-size: 0.875rem;
  line-height: 1.125rem;
}
.breadcrumbs .trail-item > a:after {
  content: "";
  display: block;
  width: 0px;
  height: 2px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background: #ffffff;
  transition: width 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.breadcrumbs .trail-item > a.active, .breadcrumbs .trail-item > a:focus-visible, .breadcrumbs .trail-item > a:active, .breadcrumbs .trail-item > a:hover {
  color: #ffffff;
  font-weight: 600;
}
.breadcrumbs .trail-item > a.active:after, .breadcrumbs .trail-item > a:focus-visible:after, .breadcrumbs .trail-item > a:active:after, .breadcrumbs .trail-item > a:hover:after {
  width: 100%;
  background-color: #ffffff;
}
.breadcrumbs .trail-item + .trail-item::before {
  content: "";
  display: block;
  width: 15px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: 4px;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='10' viewBox='0 0 5 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.21967 8.46967C-0.0732234 8.76256 -0.0732234 9.23744 0.21967 9.53033C0.512563 9.82322 0.987437 9.82322 1.28033 9.53033L3.86612 6.94454C4.94006 5.8706 4.94006 4.1294 3.86612 3.05546L1.28033 0.46967C0.987437 0.176777 0.512562 0.176777 0.21967 0.46967C-0.0732237 0.762563 -0.0732237 1.23744 0.21967 1.53033L2.80546 4.11612C3.29361 4.60427 3.29361 5.39573 2.80546 5.88388L0.21967 8.46967Z' fill='white'/%3E%3C/svg%3E%0A");
}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./components/sticky-cta/style.scss ***!
  \***********************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.sticky-cta {
  z-index: 10;
  position: absolute;
  top: initial;
  bottom: initial;
  left: 50%;
  right: initial;
  transform: translateX(-50%);
  position: fixed;
  bottom: 30px;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.sticky-cta.hidden {
  opacity: 0;
}
.sticky-cta .button-primary {
  min-width: initial !important;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1019607843), 0px 13px 13px 0px rgba(0, 0, 0, 0.0901960784), 0px 30px 18px 0px rgba(0, 0, 0, 0.0509803922), 0px 53px 21px 0px rgba(0, 0, 0, 0.0117647059), 0px 83px 23px 0px rgba(0, 0, 0, 0) !important;
}
.sticky-cta .button-primary:hover {
  background-color: #2d2826 !important;
  color: #ffffff !important;
}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./components/_paginator/style.scss ***!
  \***********************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.pagination {
  margin: 90px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
@media (max-width: 767px) {
  .pagination {
    margin: 60px 0;
    gap: 10px;
  }
}
.pagination a.page-link {
  color: #2d2826;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: color cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.2s;
}
.pagination a.page-link svg {
  width: 24px;
  height: 24px;
  fill: #e5554f;
  transition: color cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.2s;
}
.pagination a.page-link.text {
  color: #2d2826;
}
.pagination .dots {
  color: #e5554f;
}
.pagination .page-item {
  font-weight: 600;
  color: #2d2826;
  padding: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
}
.pagination .page-item.active {
  border: 1px solid #2d2826;
}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./components/shop-modal/style.scss ***!
  \***********************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.shop-modal {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
  transition: visibility 0s linear 0.2s, opacity 0.2s ease-in-out;
}
.shop-modal.open {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear, opacity 0.2s ease-in-out;
}
.shop-modal__background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(45, 40, 38, 0.8);
  z-index: 1;
}
.shop-modal__wrapper {
  position: relative;
  position: absolute;
  top: 50%;
  bottom: initial;
  left: 50%;
  right: initial;
  transform: translate(-50%, -50%);
  background-color: #F3F3F3;
  max-height: 100%;
  overflow-y: auto;
  z-index: 2;
  border-radius: 16px;
  padding: 50px 4%;
}
@media (max-width: 767px) {
  .shop-modal__wrapper {
    width: 90%;
    height: auto;
    max-height: 90vh;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .shop-modal__wrapper {
    width: 80%;
    height: auto;
  }
}
@media (min-width: 1025px) {
  .shop-modal__wrapper {
    width: 80%;
    height: auto;
    max-width: 1090px;
  }
}
.shop-modal__content {
  text-align: center;
  margin-bottom: 90px;
}
@media (max-width: 767px) {
  .shop-modal__content {
    margin-bottom: 40px;
  }
}
.shop-modal__content .button-primary {
  margin: 30px auto;
}
.shop-modal__image {
  max-width: 330px;
  margin: 0 auto;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .shop-modal__image {
    margin-bottom: 30px;
  }
}
.shop-modal__image img {
  width: 100%;
  height: auto;
  padding: 20px;
}
.shop-modal__title {
  margin-bottom: 30px;
  text-align: center;
}
@media (max-width: 767px) {
  .shop-modal__title {
    margin-bottom: 20px;
  }
}
.shop-modal__banner {
  padding: 30px;
  border: 1px solid #2d2826;
  border-radius: 16px;
  text-align: center;
}
.shop-modal__close {
  cursor: pointer;
  position: absolute;
  padding: 2px;
  z-index: 2;
}
@media (max-width: 767px) {
  .shop-modal__close {
    top: 10px;
    right: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .shop-modal__close {
    top: 15px;
    right: 15px;
  }
}
@media (min-width: 1025px) {
  .shop-modal__close {
    top: 25px;
    right: 25px;
  }
}
.shop-modal__close svg {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

/*# sourceMappingURL=app.css.map*/