/* ==== Slider Outer Wrapper ==== */
.slider-main { width: 100%; overflow: hidden; position: relative; max-width: calc(100% - 48px); margin: 0 auto 24px; border-radius: 14px; }
.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; color: #ffffff; }

/* ==== Text Alignment Based on Class ==== */
.caption-text-left .slide-caption { text-align: left; left: 0; padding: 10px 0 10px 80px; transform: translateY(-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: 0; padding: 10px 80px 10px 0; transform: translateY(-50%); }

/* ==== Caption Elements ==== */
.slide-caption h4 { font: 400 60px/1 'Bebas Neue', sans-serif; color: #DEFB02; margin: 0 0 30px 0; letter-spacing: 1px; text-transform: uppercase; letter-spacing: 2px;; }
.slide-caption h2 { font: 700 86px/1 'Bebas Neue', sans-serif; display: inline-block; margin: 0; padding: 18px 26px 6px 0; letter-spacing: .5px; position: relative; z-index: 1; }
.slide-caption h2 a{ color: #111827; text-decoration: none; display: block; }
.slide-caption h2::before{ content: ""; position: absolute; top: 0; bottom: 0; background-color: var( --primary-bg ); z-index: -1; }
.slide-caption h2::after{ content: ''; position: absolute; top: 0; height: 100%; width: 50px; background-color: var( --primary-bg ); clip-path: polygon(-1% 0, 101% 101%, -1% 101%); transform: translateX(100%); z-index: -1; }
.slide-caption p { font-size: 16px; margin: 10px 0; color: #dddddd; max-width: 800px; }

.caption-text-left .slide-caption h2::before{ left: calc(-1 * 80px); right: 0; }
.caption-text-left .slide-caption h2::after{ right: 0; }

.caption-text-right .slide-caption h2::before{ right: calc(-1 * 80px); left: 0; }
.caption-text-right .slide-caption h2::after{ left: 0; transform: translateX(-100%); clip-path: polygon(100% 0, 101% 101%, -1% 101%); }

.caption-text-center .slide-caption h2{ padding: 18px 26px; }
.caption-text-center .slide-caption h2::before{ right: 0; left: 0; }
.caption-text-center .slide-caption h2::after{ content: none; }

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

/* ==== Swiper Navigation Buttons ==== */
.slider-swiper-button-prev, .slider-swiper-button-next { position: absolute; width: 60px; height: 60px; border-radius: 50px; background-color: var( --primary-bg ); 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; }