/* ==========================================
   KIMIA NATURIS
   HERO.CSS
========================================== */


/* ==========================================
   HOME PAGE
========================================== */

.home #content.site-main {
  width: 100%;
  max-width: none;
  margin: 0;
}


/* ==========================================
   HERO CONTAINER
========================================== */

.home #content .page-content {
  width: 100%;
  max-width: none;
  margin: 0;

  padding:
    18px
    clamp(32px, 4vw, 72px)
    120px;
}

/* ==========================================
   HERO CONTENT
========================================== */

.home .gb-element-59504e85 {
  width: 100%;
  max-width: none;
}


/* ==========================================
   HERO TITLE
========================================== */

.home .gb-element-59504e85 > h1 {
  margin: 0 0 24px;

  font-size: clamp(58px, 4.5vw, 82px);
  line-height: 1.04;
  font-weight: 700;

  letter-spacing: -0.04em;
}


/* ==========================================
   HERO DESCRIPTION
========================================== */

.home .gb-element-59504e85 > p {
  width: 100%;
  max-width: 1450px;

  margin: 0;

  font-size: clamp(21px, 1.4vw, 26px);
  line-height: 1.65;
}


/* ==========================================
   HERO BUTTONS
========================================== */

.home #content .page-content > .wp-block-buttons {
  margin-top: 34px;
}

.home #content .wp-block-button__link {
  min-height: 60px;

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

  padding: 16px 32px;

  border: 1px solid var(--color-primary);
  border-radius: 14px;

  font-size: 18px;
  line-height: 1;
  font-weight: 600;

  background: transparent;

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

.home #content .wp-block-button__link:hover {
  color: #ffffff;
  background: var(--color-primary);
  transform: translateY(-2px);
}


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

@media (max-width: 1024px) {

  .home #content .page-content {
    padding:
      48px
      32px
      90px;
  }

  .home .gb-element-59504e85 > h1 {
    font-size: clamp(48px, 7vw, 64px);
  }

  .home .gb-element-59504e85 > p {
    font-size: 19px;
  }

}


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

@media (max-width: 767px) {

  .home #content .page-content {
    padding:
      36px
      20px
      64px;
  }

  .home .gb-element-59504e85 > h1 {
    margin-bottom: 18px;

    font-size: clamp(40px, 12vw, 52px);
    line-height: 1.06;
  }

  .home .gb-element-59504e85 > p {
    font-size: 17px;
    line-height: 1.65;
  }

  .home #content .page-content > .wp-block-buttons {
    margin-top: 26px;
  }

  .home #content .wp-block-button__link {
    min-height: 54px;

    padding: 14px 24px;

    font-size: 16px;
  }

}