/* ==============================
   STYLE.CSS (BASE)
   Progetto: Base Website (riutilizzabile)
   Ultimo aggiornamento: 2025-12-17
   Richiede: reset.css + variables.css + typography.css
   ============================== */

/* #region MAIN */
/* #region hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(5rem + 2rem);
  padding-bottom: 7rem;
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2rem;
}

.hero__content {
  align-items: flex-start;
}

.hero__description {
  max-width: 38rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  align-items: stretch;
}

.hero__button {
  width: 100%;
}

/* #endregion hero */
/* #region sistemare */
/* #region Inizio Hero */

.hero h6 {
  letter-spacing: 0.0175rem;
}
/* #region Inizio Animazione*/

.inner-header {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.hero-cnt-waves {
  position: relative;
}

.waves-wrapper {
  z-index: 1;
  width: 100%;
  line-height: 0; /* elimina gap sotto SVG */
}

.hero .waves-wrapper,
.header .waves-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.waves-wrapper--approach {
  position: relative;
  margin-top: -1px;
}

.waves-wrapper--approach .waves {
  --wave-color: 235, 235, 235;
}

.waves {
  display: block;
  width: 100%;
  height: 20vh;
  min-height: 100px;
  max-height: 180px;
}

.waves-wrapper--bottom .waves {
  transform: rotate(180deg);
}

/* Animation */

.parallax > use {
  animation: move-forever 40s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 18s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 24s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 30s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 42s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 60px;
    min-height: 60px;
  }
  .content {
    height: 30vh;
  }
  h1 {
    font-size: 24px;
  }
}
/* #endregion Fine Animazione */

/* #endregion sistemare */
/* #endregion MAIN */

/* #region about */
.aboutme {
  display: flex;
  flex-direction: column;

  align-items: center;
}

.aboutme img {
  width: clamp(12.6875rem, 8.25rem + 13.85vw, 25rem);
  height: clamp(12.6875rem, 8.25rem + 13.85vw, 25rem);
}

.aboutme div span {
  display: none;
}

/* #endregion about */

/* #region approach */
.approccio-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.approccio {
  position: relative;
  background-color: var(--color-muted);
  display: flex;
  gap: 2.5rem;
}

.approach {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  justify-content: space-between;
}

.bg-blobs__item--6 {
  height: 42 rem;
}

/* #endregion approach */

/* #region process */

.road-card {
  border-radius: 1.5625rem;
  background: rgba(235, 235, 235, 0.57);
  padding: 1.875rem;
}

.road {
  position: relative;
  border-radius: 1.5625rem;
  overflow: hidden;
}
/* #endregion process */

/* #region cta */
.cta-section {
  margin-bottom: 6rem;
}

.questionario {
  overflow: hidden;
  padding-bottom: 0;
}

.foto-1 {
  width: 7.95913rem;
  height: 8.36538rem;
}

.foto-2 {
  width: 9.78131rem;
  height: 11.10363rem;
}

.questionario a {
  padding: 1rem 2rem;
  border-radius: 1.5625rem;
  background: #1c162f;
  color: var(--color-bg);
  max-width: 27.875rem;
  margin: auto;
}

.container-foto-questionario {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.waves-type {
  position: relative;
}

.waves-container svg {
  z-index: 1;
  position: relative;
}

.waves-container {
  overflow: hidden;
  padding-top: 9rem;
}

.cta-blobs {
  display: flex;
  width: 100%;
  height: 100%;
}

.cta-blobs svg {
  flex: 1 1 33.33%;
  width: 100%;
  height: auto;
  display: block;
}

.cta-blobs svg + svg {
  margin-left: -0.75rem;
}

/* #endregion cta */

/* #region reviews */
.header-reviews-card img {
  width: 6.125rem;
  height: 0.95706rem;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.875rem;
  column-gap: 30px;
  grid-auto-rows: 1fr;
  padding: 2.5rem 0;
  z-index: 3;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
  /* padding: 1.875rem; */
  height: 100%;
}

.header-reviews-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 1.5rem;
}

.reviews .header-reviews-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.5rem;
}

.rececensioni-text {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
}

.recensioni-text p {
  flex: 1;
}
/* #endregion reviews */

/* #endregion MAIN */
/* #region FOOTER */
footer {
  border-radius: 1.5625rem 1.5625rem 0 0;
  background: #1c162f;
  padding: 3.75rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* #region INIZIO SOCIAL */

footer .social-links {
  z-index: 0;
}

/* instagram*/

.circle-container:active {
  transform: scale(0.9);
  transition-duration: 0.3s;
}

/* dimensiona e uniforma tutte le icone dentro i cerchi */

/* per le icone a riempimento (IG/LinkedIn ecc.) */
.socialSvg path {
  fill: var(--color-text);
}

/* anima QUALSIASI svg dentro il container hover (include containerFour) */
.circle-container:hover svg {
  animation: slide-in-top 0.3s both;
}

.containerFour path {
  fill: var(--color-text);
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

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

/* #endregion FINE SOCIAL */

.footer-top {
  flex-direction: column;
  display: flex;
  gap: 2.8125rem;
}

.footer-title {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.footer-divider {
  width: 100%;
}

.footer-block {
  padding: 0.9375rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.container-legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer a:hover {
  text-decoration-line: underline;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.footer-bottom img {
  margin: auto;
}

.footer-pimu p {
  padding-top: 0.56rem;
}

footer .circle-container {
  background: var(--color-bg);
}

footer .circle-container svg path {
  fill: var(--color-text);
}
/* #endregion FOOTER */

/* #region ABOUT-PAGE */
/* #region About Intro */
.about-intro {
  margin-top: 6rem;
}

.about-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-structure {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about-divider {
  width: 100%;
  height: 1px;
  background: rgba(28, 22, 47, 0.14);
}

.about-page h1 {
  letter-height: 36px;
  margin-bottom: 4.5rem;
}
/* #endregion About Intro */
/* #region About Structure */
/* #endregion About Structure */

/* #region Team */
.team-slider {
  position: relative;
  background: #ebebeb;
  border-radius: 1.875rem;
  padding: 2.5rem 1.25rem 2rem;
  overflow: hidden;
}

.team-slider__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.team-slider__track::-webkit-scrollbar {
  display: none;
}

.team-card {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  scroll-snap-align: start;
}

.team-card__image {
  border-radius: 1.5625rem;
  width: clamp(12.6875rem, 8rem + 15vw, 20.5rem);
  height: clamp(12.6875rem, 8rem + 15vw, 20.5rem);
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

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

.team-slider__arrow {
  position: absolute;
  top: 11.25rem;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.team-slider__arrow--prev {
  left: 0.375rem;
}

.team-slider__arrow--next {
  right: 0.375rem;
}

/* #endregion Team */
/* #region About CTA */
/* #endregion About CTA */
/* #endregion ABOUT-PAGE */

/* #region METHOD-PAGE */
/* =========================
   METHOD SECTION
   ========================= */

.method-section {
  background-color: var(--color-bg);
  margin-top: 5rem;
}

.method-section__intro {
  margin-bottom: 3rem;
}

.section-eyebrow {
  margin: 0 0 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}

.method-section__title {
  margin: 0;
  max-width: 42rem;
  line-height: 1.35;
  color: var(--color-text);
}

.method-section__steps {
  display: grid;
  margin-bottom: 3rem;
}

.method-step {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(28, 22, 47, 0.14);
}

.method-step:last-child {
  border-bottom: 1px solid rgba(28, 22, 47, 0.14);
}

.method-step__title {
  margin: 0;
  line-height: 1.2;
  color: var(--color-text);
}

.method-step__text {
  margin: 0;
  max-width: 36rem;
  line-height: 1.65;
  color: var(--color-text);
}

.method-section__closing {
  max-width: 48rem;
}

.method-section__closing p {
  margin: 0;
  line-height: 1.4;
  color: var(--color-text);
}

/* =========================
   AREAS SECTION
   ========================= */

.areas-section {
  padding-top: 0;
  padding-bottom: 5rem;
  background-color: var(--color-bg);
}

.areas-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.areas-section__header {
  margin-bottom: 2rem;
  text-align: center;
}

.areas-section__title {
  margin: 0;
  line-height: 1.2;
  color: var(--color-text);
}

.areas-section__tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  width: 100%;
}

.area-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 1.875rem;

  width: 100%;
  border-radius: 1rem;
  line-height: 1;
  color: var(--color-text);
}

.area-tag--cream {
  background-color: var(--color-primary);
}

.area-tag--peach {
  background-color: var(--color-secondary);
}

.area-tag--violet {
  background-color: var(--color-accent);
}

.areas-card {
  max-width: 20rem;
  padding: 3rem;
  border: 1px solid transparent;
  border-radius: 1.25rem;
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(
        90deg,
        var(--color-accent) 0%,
        var(--color-secondary) 50%,
        var(--color-primary) 100%
      )
      border-box;
}

.areas-card__title {
  margin: 0 0 1rem;
  line-height: 1.2;
  color: var(--color-text);
}

.areas-card__list {
  margin: 0;
}

.areas-card__list li {
  line-height: 1.55;
  color: var(--color-text);
  margin: 1rem 0;
}

/* =========================
   BENEFITS SECTION
   ========================= */

.benefits-section {
  position: relative;
  overflow: hidden;
  background-color: var(--color-muted);
}

.benefits-section__wave {
  width: 100%;
  height: 4.5rem;
  background-color: var(--color-bg);
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
}

.benefits-section__content {
  padding: 0 0 5rem;
}

.benefits-section__header {
  margin-bottom: 3rem;
  text-align: center;
}

.benefits-section__title {
  margin: 0;
  line-height: 1.2;
  color: var(--color-text);
}

.benefits-grid {
  display: grid;
  gap: 2.5rem;
}

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

.benefit-card__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.benefit-card__icon img,
.benefit-card__icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.benefit-card__title {
  margin: 0 0 0.75rem;
  line-height: 1.3;
  color: var(--color-text);
}

.benefit-card__text {
  max-width: 20rem;
  margin: 0 auto;
  line-height: 1.65;
  color: var(--color-text);
}

/* =========================
   TABLET
   ========================= */

@media (min-width: 48rem) {
  .method-step {
    grid-template-columns: 12rem 1fr;
    gap: 2rem;
    align-items: start;
  }

  .areas-section__tags {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* =========================
   DESKTOP
   ========================= */

@media (min-width: 64rem) {
  .method-section {
    padding: 6rem 0 5rem;
  }

  .method-section__intro {
    margin-bottom: 4rem;
  }

  .method-section__closing {
    margin-top: 4rem;
  }

  .areas-section {
    padding-bottom: 6rem;
  }

  .areas-section__tags {
    justify-content: space-between;
    gap: 1.5rem;
  }

  .benefits-section__wave {
    height: 6rem;
  }

  .benefits-section__content {
    padding: 4.5rem 0 5.5rem;
  }
}
/* #endregion METHOD-PAGE */

/* #region CONTACT-PAGE */

/* #region Contact FAQ */
.contact-faq {
  position: relative;
  overflow: hidden;
  margin-top: 5rem;
}

.contact-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.contact-faq__label {
  color: var(--color-text);
}

.contact-faq__info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  line-height: 1;
}

.contact-card__body {
  line-height: 1.6;
}

.contact-card__link {
  word-break: break-word;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid rgba(28, 22, 47, 0.2);
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(28, 22, 47, 0.2);
}

.faq-item__trigger {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}

.faq-item__question {
  display: block;
  max-width: 90%;
}

.faq-item__icon {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 0.125rem;
  background: var(--color-text);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__content {
  display: none;
}

.faq-item.is-open .faq-item__content {
  display: block;
}

.faq-item__answer {
  padding: 0 2.5rem 1.5rem 0;
  line-height: 1.6;
}

/* Desktop */
@media (min-width: 1024px) {
  .contact-faq__grid {
    grid-template-columns: 10rem 1fr;
    column-gap: 6rem;
    row-gap: 6rem;
    align-items: start;
  }

  .contact-faq__info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 1rem + 3vw, 5rem);
  }

  .faq-item__trigger {
    padding: 1.75rem 0;
  }

  .faq-item__answer {
    max-width: 52rem;
    padding: 0 3rem 1.75rem 0;
  }
}
/* #endregion Contact FAQ */

/* #region Contact Info */

/* #endregion Contact Info */

/* #region FAQ */
/* #endregion FAQ */

/* #endregion CONTACT-PAGE */

/* #region ==== DESKTOP */
@media (min-width: 1024px) {
  /* #region GLOBAL */
  .section {
    padding: 6.25rem 6.5rem;
  }

  .mobile {
    display: none;
  }

  .desktop {
    display: flex;
  }
  /* #endregion GLOBAL */
  /* #region HEADER */

  .site-nav {
    padding: 0 6.25rem;
  }

  .nav-desktop__link {
    display: inline-block;
    transition: text-shadow 0.25s ease;
  }

  .nav-desktop__link:hover {
    text-shadow:
      0.02em 0 0 currentColor,
      -0.02em 0 0 currentColor,
      0 0.02em 0 currentColor,
      0 -0.02em 0 currentColor;
  }

  /* #region navbar */

  .nav__list {
    display: flex;
    gap: 2.5rem;
  }

  /* #endregion navbar */

  /* #endregion HEADER ====  */

  /* #region MAIN */
  /* #region hero */

  .hero__inner {
    gap: 2.5rem;
  }

  .hero {
    min-height: 56rem;
  }

  .hero__actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .hero__button {
    width: auto;
  }

  .bg-blobs__item--1 {
    width: 42rem;
    height: 30rem;
    top: -8rem;
    left: -10rem;
  }

  .bg-blobs__item--2 {
    width: 52rem;
    height: 40rem;
    top: -6rem;
    left: 18rem;
    transform: rotate(0.429deg);
  }

  .bg-blobs__item--3 {
    width: 32rem;
    height: 44rem;
    top: -14rem;
    left: 62rem;
  }

  .bg-blobs__item--4 {
    width: 34rem;
    height: 55rem;
    top: 10rem;
    left: -12rem;
  }

  .bg-blobs__item--5 {
    width: 34rem;
    height: 50 rem;
    top: 18rem;
    left: 20rem;
  }

  .bg-blobs__item--6 {
    width: 69rem;
    height: 28rem;
    top: 33rem;
    left: 39rem;
  }

  .bg-blobs__item--12 {
    width: 34rem;
    height: 20rem;
    top: 31rem;
    left: -10rem;
  }

  .bg-blobs__item--13 {
    width: 30rem;
    height: 18rem;
    top: 33rem;
    right: -8rem;
  }

  .bg-blobs__item--7 {
    width: 26rem;
    height: 18rem;
    top: -5rem;
    left: -8rem;
  }

  .bg-blobs__item--8 {
    width: 20rem;
    height: 14rem;
    top: -3rem;
    left: 14rem;
  }

  .bg-blobs__item--14 {
    width: 18rem;
    height: 14rem;
    top: -4rem;
    right: 12rem;
  }

  .bg-blobs__item--15 {
    width: 16rem;
    height: 12rem;
    top: -3rem;
    right: -4rem;
  }

  /* #region questionario desktop */
  .questionario .foto-1 {
    width: 22.08031rem;
    height: 23.20731rem;
    margin-left: -10rem;
    margin-top: 1rem;
  }

  .questionario .foto-2 {
    margin-left: 51rem;
    margin-top: -6rem;
    width: 22.44713rem;
    height: 25.48169rem;
  }

  .container-foto-questionario {
    display: flex;
    position: absolute;
    z-index: -1;
    height: auto;
  }

  .container-foto-questionario img {
    display: inline;
  }

  .cta-section h4 {
    max-width: 40.9375rem;
    margin: auto;
  }

  /* #endregion questionario desktop */
  /* #endregion hero */
  /* #region about */
  .aboutme {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .aboutme img {
    width: clamp(12.6875rem, 8.25rem + 13.85vw, 25rem);
    height: clamp(12.6875rem, 8.25rem + 13.85vw, 25rem);
    order: 2;
  }

  .aboutme p {
    max-width: 38rem;
  }

  .aboutme div {
    order: 1;
  }

  .about-cta__text {
    max-width: 39.5rem;
    text-align: center;
  }

  .about-cta__inner {
    justify-content: center;
    align-items: center;
  }

  .about-structure {
    margin-left: 26rem;
  }

  .aboutme div span {
    display: inline;
    margin: 0 3px;
  }

  /* #endregion about */
  /* #region approach */
  .approccio-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  .approccio {
    gap: 3.5rem;
  }

  .approach {
    display: flex;
    flex-direction: row;
    gap: 7.5rem;
    justify-content: space-between;
  }
  /* #endregion approach */
  /* #region reviews */
  .header-reviews-card img {
    width: 6.125rem;
    height: 0.95706rem;
  }

  .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 1.875rem;
    column-gap: 4rem;
    grid-auto-rows: 1fr;
    padding: 2.5rem 0;
    z-index: 3;
  }

  .card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.25rem;
    /* padding: 1.875rem; */
    height: 100%;
  }

  .header-reviews-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1.5rem;
  }

  .reviews .header-reviews-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
  }

  .rececensioni-text {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: 100%;
  }

  .recensioni-text p {
    flex: 1;
  }
  /* #endregion reviews */

  /* #endregion MAIN  */

  /* #region FOOTER */
  footer {
    border-radius: 1.5625rem 1.5625rem 0 0;
    background: #1c162f;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* #region INIZIO SOCIAL */

  footer .social-links {
    z-index: 0;
  }

  .circle-container:active {
    transform: scale(0.9);
    transition-duration: 0.3s;
  }

  /* dimensiona e uniforma tutte le icone dentro i cerchi */

  /* per le icone a riempimento (IG/LinkedIn ecc.) */
  .socialSvg path {
    fill: var(--color-text);
  }

  /* anima QUALSIASI svg dentro il container hover (include containerFour) */
  .circle-container:hover svg {
    animation: slide-in-top 0.3s both;
  }

  .containerFour path {
    fill: var(--color-text);
  }

  @keyframes slide-in-top {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }

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

  /* #endregion FINE SOCIAL */
  /* #region footer-top */

  footer {
    padding: 5.625rem 6.25rem 2.6875rem 6.25rem;
  }

  .footer-top {
    flex-direction: row;
    display: flex;
    gap: 2.8125rem;
    justify-content: space-between;
  }

  .footer-title {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
  }

  .footer-main {
    display: flex;
    flex-direction: row;
    gap: 5rem;
  }

  .footer-divider {
    width: 100%;
  }

  .footer-block {
    padding: 0.9375rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* #endregion footer-top */

  /* #region footer-bottom */

  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }

  .container-legal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-legal {
    gap: 1rem;
    display: flex;
    flex-direction: row;
  }

  .footer-bottom img {
    margin: auto;
  }

  .footer-pimu p {
    padding-top: 0.56rem;
  }

  footer .circle-container {
    background: var(--color-bg);
  }

  footer .circle-container svg path {
    fill: var(--color-text);
  }
  /* #endregion footer-bottom */
  /* #endregion FOOTER */

  /* #region ABOUT-PAGE */
  /* #region About Intro */
  /* #endregion About Intro */
  /* #region About Structure */
  /* #endregion About Structure */
  /* #region Team */
  .team-slider {
    padding: 3.5rem 4.5rem;
  }

  .team-card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }

  .team-card__image {
    width: 20.5rem;
    height: 20.5rem;
    margin: 0;
    flex-shrink: 0;
  }

  .team-card__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    max-width: 32rem;
  }

  .team-slider__arrow {
    top: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 3.5rem;
  }

  .team-slider__arrow--prev {
    left: 1rem;
  }

  .team-slider__arrow--next {
    right: 1rem;
  }

  /* #endregion Team */
  /* #region About CTA */
  /* #endregion About CTA */
  /* #endregion ABOUT-PAGE */

  /* #region METHOD-PAGE */
  /* =========================
   METHOD SECTION
   ========================= */

  .method-section {
    background-color: var(--color-bg);
    margin-top: 6rem;
  }

  .method-section__intro {
    margin-bottom: 3rem;
  }

  .section-eyebrow {
    margin: 0 0 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
  }

  .method-section__title {
    margin: 0;
    max-width: 100%;
    line-height: 1.35;
    color: var(--color-text);
  }

  .method-section__steps {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    margin-left: 26rem;
  }

  .method-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(28, 22, 47, 0.14);
  }

  .method-step:last-child {
    border-bottom: 1px solid rgba(28, 22, 47, 0.14);
  }

  .method-step__title {
    line-height: 1.2;
    color: var(--color-text);
  }

  .method-step__text {
    margin: 0;
    max-width: 36rem;
    line-height: 1.65;
    color: var(--color-text);
  }

  .method-section__closing {
    max-width: 48rem;
  }

  .method-section__closing p {
    margin: 0;
    line-height: 1.4;
    color: var(--color-text);
  }

  /* =========================
   AREAS SECTION
   ========================= */

  .areas-section {
    padding-top: 0;
    padding-bottom: 5rem;
    background-color: var(--color-bg);
  }

  .areas-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .areas-section__header {
    margin-bottom: 2rem;
    text-align: center;
  }

  .areas-section__title {
    margin: 0;
    line-height: 1.2;
    color: var(--color-text);
  }

  .areas-section__tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 9rem;
    margin-bottom: 2.5rem;
    width: 100%;
  }

  .area-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 1.875rem;
    width: auto;
    flex: 0 0 auto;
    border-radius: 1rem;
    line-height: 1;
    color: var(--color-text);
    white-space: nowrap;
  }

  .area-tag--cream {
    background-color: var(--color-primary);
  }

  .area-tag--peach {
    background-color: var(--color-secondary);
  }

  .area-tag--violet {
    background-color: var(--color-accent);
  }

  .areas-card {
    max-width: 32rem;
    padding: 3rem;
    margin-right: auto;
    border: 1px solid transparent;
    border-radius: 1.25rem;
    background:
      linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
      linear-gradient(
          90deg,
          var(--color-accent) 0%,
          var(--color-secondary) 50%,
          var(--color-primary) 100%
        )
        border-box;
  }

  .areas-card__title {
    margin: 0 0 1rem;
    line-height: 1.2;
    color: var(--color-text);
  }

  .areas-card__list {
    margin: 0;
  }

  .areas-card__list li {
    line-height: 1.55;
    color: var(--color-text);
  }

  /* =========================
   BENEFITS SECTION
   ========================= */

  .benefits-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-muted);
  }

  .benefits-section__wave {
    width: 100%;
    height: 4.5rem;
    background-color: var(--color-bg);
    border-bottom-left-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
  }

  .benefits-section__content {
    padding: 0 0 5rem;
  }

  .benefits-section__header {
    margin-bottom: 3rem;
    text-align: center;
  }

  .benefits-section__title {
    margin: 0;
    line-height: 1.2;
    color: var(--color-text);
  }

  .benefits-grid {
    display: grid;
    gap: 2.5rem;
  }

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

  .benefit-card__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }

  .benefit-card__icon img,
  .benefit-card__icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .benefit-card__title {
    margin: 0 0 0.75rem;
    line-height: 1.3;
    color: var(--color-text);
  }

  .benefit-card__text {
    max-width: 20rem;
    margin: 0 auto;
    line-height: 1.65;
    color: var(--color-text);
  }

  /* =========================
   TABLET
   ========================= */

  /* =========================
   DESKTOP
   ========================= */

  /* #endregion METHOD-PAGE */
}

/* #endregion ==== DESKTOP */