#main.site-main,
.site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.slider-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: transparent !important;
}

.slide {
  width: 100%;
  height: 80vh;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transform: none;
}
.slide.active {
  display: block;
}
/* Video necessary for good UI START 1 of 2 */
.video-wrapper {
  position: relative;
  height: 70vh; /* Set max height to avoid overflow */
  width: calc(70vh * 16 / 9);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
}
/* Video necessary for good UI END 1 of 2 */

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: contain;
}
@media (max-width: 768px) {
  .video-wrapper {
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }
}

/* All slides stack and fill */
/* Video necessary for good UI START 2 of 2 */
.slider-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Ensures child (.video-wrapper) sticks to the top */
  height: 70vh; /* or let JS continue setting it */
  padding: 0;
  margin: 0;
  background: transparent !important;
}
/* Video necessary for good UI END 2 of 2 */

.slider-slide,
.image-slide {
  height: 80vh !important;
}

/* Only show active slide */
.slider-slide.active {
  visibility: visible;
  display: flex;
  opacity: 1;
  z-index: 2;
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Optional image background style */
.slider-slide:not(:has(iframe)) {
  background-size: cover;
  background-position: center;
  background-color: transparent !important;
}

/* Image settings */
/* Image slide styling */
.image-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 0;
}
.image-slide.active {
  visibility: visible;
  opacity: 1;
  z-index: 2;
}
@keyframes parallaxZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* Adjust zoom level */
  }
}
.parallax-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.parallax-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: parallaxZoom 9s ease-in-out forwards;
  animation: none;
}

.image-slide.active .parallax-image {
  animation: parallaxZoom 9s ease-in-out forwards;
}

.image-slide.active .parallax-image {
  opacity: 1;
}
/* SLider image Overlays */
.slide-overlay {
  position: absolute;
  background-color: rgba(83, 176, 215, 0.9); /* #53b0d7 @ 90% */
  color: white;
  padding: 0.5rem 1rem; /* ↓ tighter padding: top/bottom 1rem, left/right 1.5rem */
  max-width: 90%;
  width: fit-content;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.slide-headline {
  font-size: 2rem;
  font-weight: 700; /* Bold */
  line-height: 1.2;
  margin: 0 0 0rem;
  color: white !important;
}

.slide-subtext {
  font-size: 1.25rem; /* Increased from 1rem */
  font-weight: 600; /* Semi-Bold */
  line-height: 1.5;
  color: #222; /* Dark gray */
  margin: 0;
}

/* Responsive scaling */
@media (max-width: 768px) {
  .slide-headline {
    font-size: 1.5rem;
  }

  .slide-subtext {
    font-size: 1rem;
  }

  .slide-overlay {
    padding: 1rem;
  }
}
/* slider blue-box/text positioning */
/* slider box posiiton LEFT */
.slide-overlay--top-left {
  top: 10%;
  left: 5%;
}
/* slider box posiiton RIGHT */
.slide-overlay--top-right {
  top: 10%;
  right: 5%;
  text-align: right;
  align-items: flex-end;
  max-width: 100vw;
  white-space: nowrap; /* Stay on one line when possible */
  overflow-wrap: normal;
}
@media (max-width: 1024px) {
  .slide-overlay--top-right {
    white-space: normal;
    max-width: 90vw;
  }
}

/* slider box posiiton CENTER */
.slide-overlay--center {
  top: 6%;
  left: 30%;
  transform: translateX(-50%);
  text-align: center;
  align-items: center;
}
/* image slider text ease in animation */
@keyframes fadeInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInFromRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Reset all */
.slide-overlay,
.slide-headline,
.slide-subtext {
  opacity: 0;
}

/* Animate only active slide content */
.image-slide.active .slide-overlay {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.2s;
}

.image-slide.active .slide-headline {
  animation: fadeInFromTop 1s ease-out forwards;
  animation-delay: 0.4s;
}

.image-slide.active .slide-subtext {
  animation: fadeInFromTop 1.2s ease-out forwards;
  animation-delay: 0.6s;
}
.image-slide.active .slide-overlay.slide-overlay--top-left {
  animation-name: fadeInFromRight;
}

.image-slide.active .slide-overlay.slide-overlay--top-right {
  animation-name: fadeInFromLeft;
}

.image-slide.active .slide-overlay.slide-overlay--center {
  animation-name: fadeInFromTop;
}
/* Image SLide css END */

/* Slider controls Start */
.slider-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 75px;
  height: 75px;
  background: rgba(0,0,0,0.4);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.5s ease, background-color 0.4s ease;
}

.slider-wrapper:hover .slider-control {
  opacity: 0.4;
}

.slider-control:hover {
  opacity: 1;
  background-color: rgba(0,0,0,0.7);
}

.slider-control.prev {
  left: 1rem;
}

.slider-control.next {
  right: 1rem;
}
/* Slider Controls End */

.ytp-fit-cover-video {
  transform: translateY(0px) !important;
}
/* Hides video when it is not the active slide start */
.slider-slide:not(.active) .video-wrapper {
  display: none;
}
/* Hides video when it is not the active slide end */