@charset "utf-8";
/* ===============================
   HERO SLIDER STYLES (standalone)
   =============================== */

/* 1) Core container setup */
.home { height: auto !important; }

.hero_slider_container {
  position: relative;
  margin-top: 0 !important;
}

.hero_slider {
  height: auto !important;
}

/* Each slide */
.hero_slide {
  position: relative;
  min-height: 70vh;           /* large screens */
  height: auto !important;
}

/* Background layer */
.hero_slide_background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center top !important;  /* show more of top, not crop heads */
  background-repeat: no-repeat !important;
  background-size: cover !important;           /* immersive fill */
}

/* Slide content */
.hero_slide_container {
  min-height: 70vh;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  z-index: 2;
}

.hero_slide_content {
  max-width: 80%;
  transform: translateY(30px);
  text-align: center;
}

.hero_slide_content h1 {
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
}

.hero_slide_content h1 span {
  background: #081a42;
  color: #fff;
  padding: 0 12px;
  margin: 0 -12px;
}

/* Nav arrows */
.hero_slider_nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 52px;
  height: 52px;
  background: #fff;
  z-index: 9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.3s ease;
}

.hero_slider_nav:hover {
  background: #081a42;
}

.hero_slider_nav:hover span {
  color: #fff;
}

.hero_slider_nav span {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: #081a42;
  line-height: 1;
}

.hero_slider_left { left: 16px !important; }
.hero_slider_right { right: 16px !important; }

/* Owl height fix */
.hero_slider.owl-carousel,
.hero_slider.owl-carousel .owl-stage-outer,
.hero_slider.owl-carousel .owl-stage,
.hero_slider.owl-carousel .owl-item,
.hero_slider.owl-carousel .owl-height {
  height: auto !important;
}

/* Optional: adjust one slide’s focal point manually */
.hero_slide_background[data-pos] {
  background-position: var(--pos, center top) !important;
}

/* 2) Mobile responsiveness */
@media (max-width: 575.98px) {
  .hero_slide_container {
    min-height: 52vh;
    padding: 2.5rem 1rem;
  }
  .hero_slide_background {
    background-size: contain !important; /* show entire image on small screens */
    background-color: #0d1b2a;           /* dark filler behind letterbox */
  }
  .hero_slider_nav {
    width: 42px;
    height: 42px;
  }
}