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

/* ==== Swiper Container ==== */
.swiper-main { width: 100%; height: 100vh; /* Full screen by default */ position: relative;}

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

/* ==== Background Image ==== */
.slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1;}

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

/* ==== Slide Caption Wrapper ==== */
.slide-caption { position: relative; z-index: 8; max-width:70%; margin: 0 auto; height: 100%; display:inline-flex; flex-direction:column; justify-content:center; /* vertical center */ padding: 20px; color: #ffffff;}

/* ==== Text Alignment Based on Class ==== */
.caption-text-left { text-align: left;}
.caption-text-left .slide-caption { position:relative; max-width:70%; margin:0; padding-left:7%; padding-right:2%;}
.caption-text-left .slide-caption h4 { position:relative; display:inline-block;}
.caption-text-left .slide-caption h4:before { content:''; width:25%; height:100%; position:absolute; left:0; top:0; bottom:0; background-color:#b68bdb; z-index:-1; border-radius:7px; margin-left:0;}
.caption-text-left .slide-caption h4:after { content:''; position:absolute; width:7%; height:100%; margin-left:0; left:9%; top:0; bottom:0; background-color:#000000; z-index:-1;}

.caption-text-center { text-align: center;}

.caption-text-right { text-align: right;}
.caption-text-right .slide-caption { position:relative; max-width:70%; margin-right:0; padding-right:7%; padding-left:2%;}
.caption-text-right .slide-caption h4 { position:relative; display:inline-block;}
.caption-text-right .slide-caption h4:before { content:''; width:25%; height:100%; position:absolute; right:0; top:0; bottom:0; background-color:#b68bdb; z-index:-1; border-radius:7px; margin-right:0;}
.caption-text-right .slide-caption h4:after { content:''; position:absolute; width:7%; height:100%; margin-right:0; right:9%; top:0; bottom:0; background-color:#000000; z-index:-1;}

/* ==== Caption Elements ==== */
.slide-caption h2 { font:500 68px/1.1 'Fira Sans Condensed'; margin: 10px 0; text-transform:capitalize;}

.slide-caption h2 a { color: #ffffff; text-decoration: none;}

.slide-caption h4 { position:relative; font:500 16px/1 'Fira Sans Condensed'; color:#ffffff; margin:0 0 10px 0; padding:10px 15px; letter-spacing:1px; text-transform:uppercase; z-index:9; display:inline-block;}
.slide-caption h4:before { content:''; width:22%; height:100%; margin:0 auto; position:absolute; left:0; right:0; top:0; bottom:0; background-color:#b68bdb; z-index:-1; border-radius:7px;}
.slide-caption h4:after { content:''; width:7%; height:100%; margin:0 auto; position:absolute; left:0; right:0; top:0; bottom:0; background-color:#000000; z-index:-1;}

.slide-caption p { font-size:18px; margin: 10px 0; color: #ffffff; max-width:800px;}

/* ==== Swiper Navigation Buttons ==== */
.swiper-button-prev, .swiper-button-next { width: 60px; height: 60px; border-radius: 8px; background-color:#000000; /* Optional background */ transition: all 200ms ease-in-out; z-index: 10; top: 50%; transform: translateY(-50%);}

/* Positioning */
.swiper-button-prev { left: 15px;}

.swiper-button-next { right: 15px;}

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

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

/* ==== Swiper Pagination ==== */
.swiper-main .swiper-pagination { bottom: 80px;}

.swiper-pagination-bullet { background-color:#ffffff; opacity: 0.8; width:35px; height:10px; border-radius: 20px;}

.swiper-pagination-bullet-active { background-color:#b68bdb; opacity: 1;}

/* ==== Responsive Adjustments ==== */
@media (max-width: 1024px) {
    .slide-caption h2 { font-size:50px !important;}
    .slide-caption p { font-size: 16px;}
}

@media (max-width: 768px) {
    .slider-main .swiper-slide .slide-caption { max-width:85%;}
    .slider-main .swiper-slide .slide-caption h2 { font-size:50px !important; margin-top:0;}
    .slider-main .swiper-slide .slide-caption h4 { font-size:16px;}
    .slider-main .swiper-slide .slide-caption h4:before { width:35%;}
    .slider-main .swiper-slide .slide-caption h4:after { width:15%;}
    .slider-main .swiper-slide .sliderbtn { font-size:14px;}
}

@media (max-width: 480px) {
    .slide-caption { text-align:center !important; padding: 10px; width:100%; max-width:100%;}
    .slide-caption h4:before { width:50%;}
    .slide-caption h4:after { width:20%;}
    .caption-text-left .slide-caption { max-width:100%; padding-left:10px;}
    .caption-text-right .slide-caption { max-width:100%; padding-right:10px;}
    .caption-text-left, .caption-text-right { text-align:center; /* Force center on mobile */ }
    .slider-main .swiper-slide .sliderbtn { display:none;}
}