.hero-carousel{

position:relative;

height:500px;

overflow:hidden;

background:#041E42;

}

#carouselTrack{

display:flex;

height:100%;

transition:transform .6s ease;

}

.carousel-slide{

min-width:100%;

position:relative;

}

.carousel-slide img{

width:100%;

height:100%;

object-fit:cover;

}

.slide-overlay{

position:absolute;

left:80px;

bottom:80px;

width:450px;

background:rgba(0,0,0,.45);

padding:30px;

border-radius:20px;

backdrop-filter:blur(10px);

}

.slide-overlay h2{

font-size:48px;

margin-bottom:15px;

}

.slide-overlay p{

margin-bottom:20px;

line-height:1.5;

}

.slide-overlay button{

font-size:18px;

}

.carousel-arrow{

position:absolute;

top:50%;

transform:translateY(-50%);

width:60px;

height:60px;

border-radius:50%;

font-size:28px;

background:rgba(0,0,0,.5);

color:white;

cursor:pointer;

z-index:5;

}

.left{

left:20px;

}

.right{

right:20px;

}

.carousel-dots{

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:12px;

}

.dot{

width:15px;

height:15px;

border-radius:50%;

background:#888;

cursor:pointer;

}

.dot.active{

background:#FFD700;

}