/* ==== Slider Outer Wrapper ==== */
.slider-main { width: 100%; overflow: hidden; position: relative; }
.slider-main .container{ position: relative; height: 100%; }

/* ==== Swiper Container ==== */
.swiper-main { width: 100%; position: relative; }

/* ==== Swiper Slide ==== */
.swiper-slide { position: relative; width: 100%; height: 100%; }

/* ==== Overlay layer ==== */
.slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 2; }

/* ==== Slide Caption Wrapper ==== */
.slide-caption { position: absolute; top: 50%; z-index: 8; max-width: 820px; margin: 0 auto; padding: 20px; color: #ffffff; }

/* ==== Text Alignment Based on Class ==== */
.caption-text-left .slide-caption { text-align: left; left: 16%; transform: translate(-16%, -50%); }
.caption-text-center .slide-caption{ text-align: center; right: 0; left: 0; transform: translateY(-50%); margin: 0 auto; }
.caption-text-right .slide-caption { text-align: right; right: 16%; transform: translate(16%, -50%); }

/* ==== Caption Elements ==== */
.slide-caption h4 { font: 500 16px/1 'Work Sans', sans-serif; color: #ffffff; margin: 0 0 30px 0; letter-spacing: 1px; text-transform: uppercase; }
.slide-caption h2 { font: 700 68px/1.2 'Space Grotesk', sans-serif; margin: 10px 0; }
.slide-caption h2 a{ color: #ffffff; text-decoration: none; }
.slide-caption p { font-size: 16px; margin: 10px 0; color: #dddddd; max-width: 800px; }
.scroll-border { position: relative; display: inline-block; padding: 0 12px 16px 12px; letter-spacing: 2px; font-weight: 700; }
.scroll-border::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #ff4000, transparent); background-size: 200% 100%; animation: scroll-border 4s linear infinite; }
@keyframes scroll-border {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==== Slider Button ==== */
.slider-button-wrapper { margin-top: 50px; }

/* ==== Swiper Navigation Buttons ==== */
.slider-swiper-button-prev, .slider-swiper-button-next { position: absolute; width: 60px; height: 60px; border-radius: 50px; background-color: #ff4000; transition: all 200ms ease-in-out; z-index: 10; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.slider-swiper-button-prev i, .slider-swiper-button-next i{ color: #ffffff; font-size: 20px; text-align: center; display: block; position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

/* Positioning */
.slider-swiper-button-prev { left: 20px; }
.slider-swiper-button-next { right: 20px; }

/* Default Swiper arrows */
.slider-swiper-button-prev::after, .slider-swiper-button-next::after { font-size: 24px; color: #ffffff; }

/* Optional: Hover effect */
.slider-swiper-button-prev:hover, .slider-swiper-button-next:hover { background-color: #131112; }

/* ==== Swiper Pagination ==== */
.slider-swiper-pagination { position: absolute; bottom: 50px !important; z-index: 1; right: 0; text-align: center; }
.slider-swiper-pagination .swiper-pagination-bullet { background: #131112; opacity: 0.8; width:32px; height:16px; border-radius: 20px; }
.slider-swiper-pagination .swiper-pagination-bullet-active { background: #ff4000; opacity: 1; }