.custom-slider {position: relative;width: 100%;height: 600px;overflow: hidden;}
.slide {position: absolute;width: 100%;height: 100%;background-size: cover;background-position: center;opacity: 0;transition: opacity 2s ease;}
.slide.active {opacity: 1;}
.overlay {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);
    width: 700px;
    height: 260px;
    border-top-left-radius: 10px ;
    border-top-right-radius: 10px ;
    background: rgba(0,0,0,0.5);color: #fff;text-align: center;padding: 20px;display:flex;flex-direction:column;justify-content:center;opacity:0;
    transition: opacity 1s ease;}
.overlay-title {opacity:0;transform: translateY(20px);transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s;}
.overlay-subtitle {opacity:0;transform: translateY(20px);transition: opacity 0.6s ease 1.2s, transform 0.6s ease 1.2s;}
.slide.active .overlay {opacity:1;}
.slide.active .overlay-title {opacity:1; transform: translateY(0);}
.slide.active .overlay-subtitle {opacity:1; transform: translateY(0);}
.pixel-effect {display: grid;grid-template-columns: repeat(20, 1fr);grid-template-rows: repeat(10, 1fr);width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.pixel {background-size: cover;background-position: center;opacity: 0;transition: opacity 0.25s ease;}