.hero-carousel { position: relative; width: 100%; height: 480px; overflow: hidden; background-color: #111111; }
.carousel-container { width: 100%; height: 100%; position: relative; }
.carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; z-index: 1; transition: opacity 0.8s ease-in-out; display: flex; align-items: center; justify-content: center; }
.carousel-slide.active { opacity: 1; z-index: 2; }
.carousel-caption { width: 80%; max-width: 800px; text-align: center; z-index: 3; }
.carousel-caption h2 { color: var(--color-light); font-size: 34px; font-weight: 700; background-color: rgba(0, 0, 0, 0.65); padding: 20px 30px; border-radius: 4px; text-transform: uppercase; display: inline-block; border-left: 5px solid var(--color-accent); border-right: 5px solid var(--color-accent); }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(241, 184, 74, 0.8); color: var(--color-light); border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; z-index: 10; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; }
.carousel-arrow:hover { background-color: var(--color-accent-hover); }
.prev-arrow { left: 25px; } .next-arrow { right: 25px; }

@media (max-width: 992px) { .carousel-caption h2 { font-size: 24px; padding: 15px 20px; } .hero-carousel { height: 350px; } }
@media (max-width: 576px) { .carousel-arrow { width: 35px; height: 35px; font-size: 14px; } }