@media (max-width: 576px) {
        .btn-responsive-mobile {
            font-size: 0.8rem !important;
            padding: 0.5rem 0.75rem !important;
        }
        .btn-responsive-mobile i {
            font-size: 0.9rem !important;
        }
    }

    /* Custom Style Banner Promo Full Gambar (Desktop & Mobile) */
.promo-slider-wrapper {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
width: 100%;
}

.promo-banner-link {
display: block;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 1.5rem;
}

.promo-banner-img {
width: 100%;
height: auto; /* Mengikuti tinggi rasio asli gambar tanpa dipotong */
display: block;
transition: transform 0.4s ease, filter 0.3s ease;
}

.promo-banner-link:hover .promo-banner-img {
transform: scale(1.02);
filter: brightness(1.03);
}

/* Custom Navigation Buttons */
.promo-nav-btn {
width: 48px;
height: 48px;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #084c38;
top: 50%;
transform: translateY(-50%);
opacity: 0.9;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.promo-nav-btn:hover {
background-color: #84cc16;
color: #000;
opacity: 1;
}

/* Custom Indicator Dots */
.promo-carousel-indicators {
bottom: 12px;
margin-bottom: 0;
}

.promo-carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ffffff;
opacity: 0.5;
transition: all 0.3s ease;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.promo-carousel-indicators .active {
width: 28px;
border-radius: 10px;
background-color: #84cc16;
opacity: 1;
}

/* Penyesuaian Responsif Layar Mobile */
@media (max-width: 768px) {
.promo-slider-wrapper,
.promo-banner-link {
    border-radius: 1rem;
}

.promo-nav-btn {
    width: 36px;
    height: 36px;
}

.promo-nav-btn i {
    font-size: 1rem !important;
}
}