.hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0 !important;
    transition: opacity 1s ease-in-out !important;
    z-index: 1 !important;
    visibility: hidden !important;
}

.hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-content {
    position: absolute !important;
    top: 150px !important;
    left: 0 !important;
    right: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease-in-out !important;
}

.hero-content.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.hero-indicator.active {
    background-color: var(--primary-color) !important;
    transform: scale(1.2) !important;
}