/* =========================================================
   ZERLAB STUDIO — VANTAGGI
   ========================================================= */

.advantages {
  width: 100%;

  padding:
    clamp(100px, 9vw, 145px)
    var(--page-padding)
    clamp(105px, 9vw, 145px);

  background: #ffffff;

  overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.advantages-heading {
  margin-bottom:
    clamp(70px, 8vw, 115px);
}


.advantages-title-row {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 70px;
}


.advantages-title-row h2 {
  margin: 0;

  color: var(--ink);

  font-size:
    clamp(55px, 5.7vw, 88px);

  font-weight: 500;

  line-height: 0.94;

  letter-spacing: -5px;
}


.advantages-title-row h2 strong {
  color: var(--blue);

  font-weight: 700;
}


.advantages-title-row > p {
  max-width: 380px;

  margin: 0;

  padding-bottom: 8px;

  color: #68717d;

  font-size: 15px;

  line-height: 1.7;
}


/* =========================================================
   LISTA
   ========================================================= */

.advantages-list {
  width: 100%;

  border-top:
    1px solid
    rgba(7, 24, 44, 0.13);
}


/* =========================================================
   ITEM
   ========================================================= */

.advantage-item {
  position: relative;

  min-height: 250px;

  padding:
    42px
    0;

  display: grid;

  grid-template-columns:
    minmax(150px, 0.65fr)
    minmax(180px, 0.75fr)
    minmax(350px, 1.6fr);

  gap:
    clamp(30px, 5vw, 90px);

  align-items: center;

  border-bottom:
    1px solid
    rgba(7, 24, 44, 0.13);

  overflow: hidden;

  transition:
    padding-left 0.35s ease,
    background 0.35s ease;
}


.advantage-item:hover {
  padding-left: 22px;

  background:
    rgba(7, 73, 132, 0.025);
}


/* =========================================================
   NUMERO
   ========================================================= */

.advantage-big-number {
  color:
    rgba(7, 24, 44, 0.07);

  font-size:
    clamp(80px, 9vw, 145px);

  font-weight: 700;

  line-height: 0.8;

  letter-spacing: -8px;

  transition:
    color 0.35s ease;
}


.advantage-item:hover
.advantage-big-number {
  color:
    rgba(7, 73, 132, 0.12);
}


/* =========================================================
   LABEL
   ========================================================= */

.advantage-label {
  align-self: start;

  padding-top: 10px;

  color: var(--blue);

  font-size: 8px;
  font-weight: 700;

  line-height: 1.5;

  letter-spacing: 2px;

  text-transform: uppercase;
}


/* =========================================================
   TESTO
   ========================================================= */

.advantage-content {
  display: grid;

  grid-template-columns:
    minmax(220px, 1fr)
    minmax(220px, 0.8fr);

  gap:
    clamp(35px, 5vw, 80px);

  align-items: center;
}


.advantage-content h3 {
  margin: 0;

  color: var(--ink);

  font-size:
    clamp(29px, 3vw, 46px);

  font-weight: 600;

  line-height: 1.02;

  letter-spacing: -2.2px;
}


.advantage-content p {
  max-width: 330px;

  margin: 0;

  color: #747d87;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================================
   FINALE
   ========================================================= */

.advantages-finale {
  margin-top:
    clamp(85px, 9vw, 140px);

  padding-top:
    clamp(55px, 6vw, 85px);

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 60px;

  border-top:
    1px solid
    rgba(7, 24, 44, 0.13);
}


.advantages-finale h3 {
  max-width: 950px;

  margin: 0;

  color: var(--ink);

  font-size:
    clamp(38px, 4.3vw, 67px);

  font-weight: 500;

  line-height: 1.03;

  letter-spacing: -3.5px;
}


.advantages-finale h3 strong {
  color: var(--blue);

  font-weight: 700;
}


/* =========================================================
   CTA
   ========================================================= */

.advantages-cta {
  min-width: 220px;
  height: 58px;

  padding:
    0
    20px;

  flex-shrink: 0;

  display: flex;

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

  gap: 30px;

  border-radius: 6px;

  color: var(--white);

  background: var(--blue);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1px;

  text-decoration: none;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}


.advantages-cta:hover {
  background: var(--blue-hover);

  transform:
    translateY(-3px);
}


.advantages-cta span {
  font-size: 18px;
}


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

@media (max-width: 1050px) {

  .advantage-item {
    grid-template-columns:
      120px
      150px
      1fr;

    gap: 30px;
  }


  .advantage-content {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .advantages-finale {
    align-items: flex-start;

    flex-direction: column;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .advantages {
    padding:
      80px
      20px
      95px;
  }


  /* HEADER */

  .advantages-heading {
    margin-bottom: 55px;
  }


  .advantages-title-row {
    align-items: flex-start;

    flex-direction: column;

    gap: 25px;
  }


  .advantages-title-row h2 {
    font-size:
      clamp(48px, 13.5vw, 63px);

    line-height: 0.98;

    letter-spacing: -3.5px;
  }


  .advantages-title-row > p {
    max-width: 300px;

    padding-bottom: 0;

    font-size: 13px;
  }


  /* ITEM */

  .advantage-item {
    min-height: 0;

    padding:
      35px
      0;

    display: grid;

    grid-template-columns:
      65px
      1fr;

    gap:
      10px
      20px;

    align-items: start;
  }


  .advantage-item:hover {
    padding-left: 0;

    background: transparent;
  }


  .advantage-big-number {
    grid-row:
      1 / 3;

    font-size: 55px;

    letter-spacing: -4px;
  }


  .advantage-label {
    padding-top: 0;
  }


  .advantage-content {
    grid-column: 2;

    display: block;
  }


  .advantage-content h3 {
    margin-top: 12px;

    font-size: 30px;

    letter-spacing: -1.5px;
  }


  .advantage-content p {
    margin-top: 15px;

    font-size: 12px;
  }


  /* FINALE */

  .advantages-finale {
    margin-top: 65px;

    padding-top: 45px;

    gap: 35px;
  }


  .advantages-finale h3 {
    font-size:
      clamp(34px, 10vw, 47px);

    letter-spacing: -2.5px;
  }


  .advantages-cta {
    width: 100%;
  }

}