/* Production Server Compatibility Fix for Hero Carousel Navigation */
.hero-carousel-section .hero-carousel-nav {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    z-index: 15 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(5px) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero-carousel-section .hero-carousel-nav-button {
    all: unset !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero-carousel-section .hero-carousel-nav-button.active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

.hero-carousel-section .hero-carousel-nav-button:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.1) !important;
}