/* Slider Container */
.custom-about-slider-container {
    position: relative;
    width: 100%;
    /* Aspect ratio height ko fix rakhne ke liye. Agar height adjust karni ho to yahan se kar sakte hain */
    aspect-ratio: 4 / 5;
    min-height: 500px;
    border-radius: 12px; /* Screenshot ke mutabiq rounded corners */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Halki si shadow premium look ke liye */
}

/* Individual Slides */
.custom-about-slider-container .about-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image stretch na ho balkay area fill kare */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out, transform 4s ease;
    transform: scale(1.05); /* Halki si zoom-out animation ke liye */
    z-index: 1;
}

/* Active Slide */
.custom-about-slider-container .about-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .custom-about-slider-container {
        aspect-ratio: 1 / 1; /* Mobile par thora square look behtar rehta hai */
        min-height: 350px;
    }
}