/* ==================================================
   MAIN HEADER / HERO MODULE
   ================================================== */

.main_header_module {
  position: relative;
  width: 100%;
 /* height: 90vh;
  min-height: 620px;*/

  padding: 0;

  overflow: hidden;

  color: var(--ib-bg);
  background: var(--ib-secundary);
}


/* ==================================================
   Slider
   ================================================== */

.main_header_slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.main_header_slider .splide__track {
  width: 100%;
  height: 100%;
}

.main_header_slider .splide__list {
  width: 100%;
  height: 100%;
}

.main_header_slider .splide__slide {
  position: relative;

  width: 100%;
  height: 100%;
}


/* ==================================================
   Slide
   ================================================== */

.main_header_slide {
  position: relative;

  width: 100%;
  height: 90vh;
  min-height: 620px;

  display: flex;
  align-items: stretch;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Fullscreen */

.main_header_module--fullscreen {
  height: 90vh;
  min-height: 620px;
}

.main_header_module--fullscreen .main_header_slide {
  height: 90vh;
  min-height: 620px;
}


/* ==================================================
   Overlay
   ================================================== */

.main_header_overlay {
  position: absolute;
  inset: 0;

  z-index: 1;
}


/* ==================================================
   Content
   ================================================== */

.main_header_content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: var(--ib-container);

  height: 100%;

  margin-inline: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;

  color: var(--ib-bg);
}


/* ==================================================
   Eyebrow
   ================================================== */

.main_header_eyebrow {
  margin: 0;

  color: var(--ib-accent-gold);

  font-family: var(--ib-font);
  font-size: 12px;
  font-weight: 700;

  line-height: 1.2;
  letter-spacing: 3px;

  text-transform: uppercase;
}


/* ==================================================
   Heading
   ================================================== */

.main_header_title {
  max-width: 740px;

  margin: 0;

  color: var(--ib-bg);

  font-family: var(--ib-heading-font);
  font-size: var(--ib-h1-size);
  font-weight: 400;

  line-height: 1.05;
  letter-spacing: -1px;
}


/* ==================================================
   Subtitle
   ================================================== */

.main_header_subtitle {
  max-width: 560px;

  margin: 26px 0 0;

  color: #E6EFE8;

  font-family: var(--ib-font);
  font-size: 20px;
  font-weight: 500;

  line-height: 1.45;
}


/* ==================================================
   Buttons wrapper
   ================================================== */

.main_header_actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}


/* ==================================================
   Buttons
   ================================================== */

.main_header_button,
.hero_module__button__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 15px 28px;

  border-radius: 2px;
  border: 1.5px solid transparent;

  font-family: var(--ib-font);
  font-size: 15px;
  font-weight: 700;

  line-height: 1;
  text-decoration: none;

  cursor: pointer;

  transition: opacity var(--ib-transition);
}


/* Primary button */

.main_header_button {
  background: var(--ib-primary);
  color: var(--ib-cream);
}

.main_header_button:hover {
  opacity: 0.88;
  color: var(--ib-cream);
}


/* Secondary button */

.hero_module__button__secondary {
  background: transparent;

  color: var(--ib-bg);

  border-color: rgba(243, 236, 221, 0.55);
}

.hero_module__button__secondary:hover {
  opacity: 0.88;

  background: transparent;
  color: var(--ib-bg);
}


/* ==================================================
   Splide arrows
   ================================================== */

.main_header_slider .splide__arrows {
  position: absolute;
  inset: 0;

  z-index: 6;

  pointer-events: none;
}

.main_header_slider .splide__arrow {
  position: absolute;

  top: 50%;

  width: 52px;
  height: 52px;

  margin: 0;

  border: 1.5px solid rgba(243, 236, 221, 0.5);
  border-radius: 50%;

  background: rgba(11, 31, 23, 0.35);

  opacity: 1;

  transform: translateY(-50%);

  backdrop-filter: blur(2px);

  pointer-events: auto;

  transition:
    background var(--ib-transition),
    opacity var(--ib-transition);
}

.main_header_slider .splide__arrow:hover {
  opacity: 1;

  background: rgba(11, 31, 23, 0.5);
}

.main_header_slider .splide__arrow--prev {
  left: 24px;
}

.main_header_slider .splide__arrow--next {
  right: 24px;
}

.main_header_slider .splide__arrow svg {
  width: 20px;
  height: 20px;

  fill: var(--ib-bg);
}


/* ==================================================
   Splide pagination / dots
   ================================================== */

.main_header_slider .splide__pagination {
  position: absolute;

  bottom: 28px;
  left: 0;
  right: 0;

  z-index: 6;

  display: flex;
  justify-content: center;

  gap: 11px;

  margin: 0;
  padding: 0;
}

.main_header_slider .splide__pagination__page {
  width: 11px;
  height: 11px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 999px;

  background: rgba(243, 236, 221, 0.5);

  opacity: 1;

  transform: none;

  transition: all 300ms ease;
}

.main_header_slider .splide__pagination__page.is-active {
  width: 30px;

  background: var(--ib-accent-gold);

  opacity: 1;

  transform: none;
}


/* ==================================================
   Tablet
   ================================================== */

@media (max-width: 860px) {

  .main_header_module--fullscreen {
    height: 90vh;
    min-height: 620px;
  }

  .main_header_slide,
  .main_header_module--fullscreen .main_header_slide {
    height: 90vh;
    min-height: 620px;
  }

  .main_header_content {
    padding: 0 40px;
            padding-left: 72px;
  }

  .main_header_title {
    font-size: 56px;
  }

  .main_header_subtitle {
    font-size: 19px;
  }
  .main_header_slider .splide__arrow {
    width: 44px;
    height: 44px;
  }

}


/* ==================================================
   Mobile
   ================================================== */

@media (max-width: 600px) {

  .main_header_module--fullscreen {
    height: 100svh;
    min-height: 620px;
  }

  .main_header_slide,
  .main_header_module--fullscreen .main_header_slide {
    height: 100svh;
    min-height: 620px;
  }

  .main_header_content {
    padding: 0 24px;
  }

  .main_header_eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .main_header_title {
    max-width: 100%;

    font-size: clamp(42px, 10vw, 56px);

    line-height: 1.05;
  }

  .main_header_subtitle {
    max-width: 560px;

    margin-top: 20px;

    font-size: 18px;
    line-height: 1.45;
  }

  .main_header_actions {
    margin-top: 28px;

    gap: 12px;
  }

  .main_header_button,
  .hero_module__button__secondary {
    padding: 15px 24px;
  }

  .main_header_slider .splide__arrow {
    width: 44px;
    height: 44px;
  }

  .main_header_slider .splide__arrow--prev {
    left: 12px;
  }

  .main_header_slider .splide__arrow--next {
    right: 12px;
  }

}


/* ==================================================
   Small mobile
   ================================================== */

@media (max-width: 480px) {

  .main_header_content {
    padding: 0 60px;
  }

  .main_header_actions {
    width: 100%;

    flex-direction: column;
    align-items: stretch;
  }

  .main_header_button,
  .hero_module__button__secondary {
    width: 100%;
  }

}