@charset "UTF-8";
/* Homepage Hero slider presentation styles
   - Dark overlay with ::before on each slide
   - Max slider height 800px
   - Images always centered and cover the area
*/
/* Root: constrain overall slider height and scope all descendants */
#hero_slider {
  /* Give Splide a definite height so descendants using height:100% can resolve correctly. */
  height: 76vh;
  max-height: 800px;
  min-height: 650px;
  overflow: hidden; /* ensure no child exceeds the cap */
}
@media (max-width: 650px) {
  #hero_slider {
    min-height: 700px;
  }
}
@media (max-width: 450px) {
  #hero_slider {
    min-height: 750px;
  }
}
#hero_slider {
  /* Make slides positioning predictable (Splide) */
}
#hero_slider .splide__track {
  align-items: stretch; /* keep slides same height */
  height: 100%;
  /* Ensure the list and slides inherit full height from the container */
}
#hero_slider .splide__track .splide__list {
  height: 100%;
}
#hero_slider .splide__track .splide__list .splide__slide {
  position: relative; /* anchor for the overlay */
  height: 100%;
  /* Dark overlay above image, below text */
}
#hero_slider .splide__track .splide__list .splide__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 2, 23, 0.65); /* subtle dim */
  z-index: 1;
  pointer-events: none; /* don't block interactions */
}
#hero_slider .splide__track .splide__list .splide__slide {
  /* Image behavior: fill the slider height, cover, centered */
}
#hero_slider .splide__track .splide__list .splide__slide > img {
  display: block;
  width: 100%;
  /* Match parent (slide) height which is defined by #hero_slider. */
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#hero_slider .splide__track .splide__list .splide__slide {
  /* Text/content layer */
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content {
  z-index: 2; /* above overlay */
}
@media (max-width: 1450px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
@media (max-width: 1250px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container {
    padding-left: 11rem;
    padding-right: 11rem;
  }
}
@media (max-width: 900px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 650px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (max-width: 420px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h1, #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h2, #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container p, #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container span {
  text-shadow: 0 0 45px rgba(0, 0, 0, 0.8);
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h1 {
  font-size: 6rem;
  line-height: 6rem;
}
@media (max-width: 1450px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h1 {
    font-size: 5rem;
    line-height: 5rem;
  }
}
@media (max-width: 1023px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h1 {
    font-size: 4rem;
    line-height: 4rem;
  }
}
@media (max-width: 650px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h1 {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container {
  /* H2: fixed simple scale (H1 ~6rem in Tailwind utilities, H2 exactly 5rem) */
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h2 {
  font-size: 5rem;
  line-height: 5rem;
}
@media (max-width: 1450px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h2 {
    font-size: 4rem;
    line-height: 4rem;
  }
}
@media (max-width: 1023px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h2 {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}
@media (max-width: 650px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container h2 {
    font-size: 3rem;
    line-height: 3rem;
  }
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container span {
  font-size: 2.5rem;
  line-height: 3rem;
  margin: 1.5rem 0 2.5rem 0;
}
@media (max-width: 1450px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container span {
    font-size: 2.3rem;
    line-height: 2.8rem;
  }
}
@media (max-width: 1023px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container span {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
@media (max-width: 650px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container span {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container {
  /* CTA buttons (only in hero): fixed size & padding as requested */
}
#hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container .btn.btn-big {
  padding: 1.25rem 4rem;
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 0 0 15px #6a274e;
  white-space: nowrap;
}
@media (max-width: 650px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container .btn.btn-big {
    padding: 1rem 3.25rem;
  }
}
@media (max-width: 540px) {
  #hero_slider .splide__track .splide__list .splide__slide .hero-slide-content .container div.flex.items-center {
    flex-direction: column;
  }
}
#hero_slider {
  /* ----------------------------------------- */
  /* Splide arrows & pagination custom styling */
  /* ----------------------------------------- */
  /* Position arrows with larger hit area and offsets */
}
#hero_slider .splide__arrows {
  pointer-events: none; /* allow underlying clicks but keep buttons clickable */
}
@media (max-width: 900px) {
  #hero_slider .splide__arrows {
    display: none;
  }
}
#hero_slider .splide__arrows .splide__arrow {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 9999px; /* fully rounded */
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
  transition: opacity 180ms ease, background-color 180ms ease, transform 180ms ease;
  opacity: 0.9;
  z-index: 3;
  /* Arrow icon – force visible chevrons regardless of built‑in SVG */
}
#hero_slider .splide__arrows .splide__arrow svg {
  display: none;
}
#hero_slider .splide__arrows .splide__arrow::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* white chevron (right) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'><path d='M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.41 1.41l4.59-4.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41.01z'/></svg>");
  opacity: 0.95;
}
#hero_slider .splide__arrows .splide__arrow:hover, #hero_slider .splide__arrows .splide__arrow:focus {
  opacity: 1;
  background: rgba(255, 255, 255, 0.32);
}
#hero_slider .splide__arrows .splide__arrow--prev {
  left: 36px;
  /* Flip chevron for the left arrow */
}
#hero_slider .splide__arrows .splide__arrow--prev::before {
  transform: scaleX(-1);
}
#hero_slider .splide__arrows .splide__arrow--next {
  right: 36px;
}
#hero_slider {
  /* Pagination dots – bigger and white theme */
}
#hero_slider .splide__pagination {
  bottom: 34px;
}
#hero_slider .splide__pagination__page {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.6);
  margin: 10px 10px;
  transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
}
#hero_slider .splide__pagination__page:hover, #hero_slider .splide__pagination__page:focus {
  background: rgba(255, 255, 255, 0.9);
}
#hero_slider .splide__pagination__page.is-active {
  background: #ffffff;
  transform: scale(1.15);
}

/*# sourceMappingURL=homepage-hero.css.map */