.slider-container {
            position: relative;
            width: 100vw;
            height: 82vh;
            overflow: hidden;
        }

.ovrlyWrpr{
	position: absolute;
	width: 1320px;
	max-width: 100%; 
	bottom: 30px; 
	margin:0px auto; 
	left:0; 
	right:0;
	min-height: 150px;

}
.hdSldr {
  display: none !important;
}
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: opacity 3s ease-in-out;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 1;
        }

        .slide.active {
            transition: opacity 8s ease-in-out;
            z-index: 2;
        }

        /* Fade out transition for slides being hidden */
        .slide.fade-out {
            opacity: 0;
            transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        /* Ken Burns effect animations - optimized for smooth transitions */
        .slide.kenburn-1.active {
            animation: kenburn1 8s ease-out forwards;
        }

        .slide.kenburn-2.active {
            animation: kenburn1 8s ease-out forwards;
        }

        .slide.kenburn-3.active {
            animation: kenburn1 8s ease-out forwards;
        }

        .slide.kenburn-4.active {
            animation: kenburn1 8s ease-out forwards;
        }

@keyframes kenburn1 {
    0% {
        transform: scale(1.05) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.15) translate3d(0, 0, 0);
    }
}
        

/* Overlay content - now positioned directly within slider-container */
        .overlay-content {
position: absolute;
    bottom: 0;
    left: 10px;
    text-align: left;
    color: white;
    z-index: 10;
    background: #ae0352;
    padding: 16px 30px 10px;
    border-radius: 15px;
    opacity: 0;
    pointer-events: none;
    max-width: 50%;
    box-sizing: border-box;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
        }

        .overlay-content.active {
            pointer-events: auto;
            opacity: 1;
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
    .overlay-content h2 {
            font-size: 3rem;
            margin-bottom: 20px;
            letter-spacing: 1px;
		   color: white;
        }




        /* Navigation dots */
        .nav-dots {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 20;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background: white;
            transform: scale(1.2);
        }

        .dot:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: scale(1.1);
        }

        /* Navigation arrows */
        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 20;
            backdrop-filter: blur(5px);
        }

        .nav-arrow:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.1);
        }

        .nav-arrow.prev {
            left: 30px;
        }

        .nav-arrow.next {
            right: 30px;
        }

        /* Progress bar */
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            z-index: 20;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #00f5ff, #ff00f5);
            width: 0%;
            transition: width 0.1s ease;
        }

        /* Responsive design */
        @media (max-width: 768px) {
			.overlay-content{
			max-width: 85%;
			}


            .slide-content h2 {
                font-size: 20px !important;
            }
            
 
            .slide-content {
                padding: 20px;
            }
            
            .nav-arrow {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
        }