/* WiseLeaf Hero Consolidated - Clean professional hero slider */
/* Combines functionality from multiple hero CSS files for better maintainability */

/* FORCE clean hero display - Remove all effects and overlays */
.hero,
.hero *,
.hero::before,
.hero::after {
    opacity: 1 !important;
    filter: none !important;
}

/* Clean hero setup */
.hero {
    background-color: #0c4a60 !important; /* Fallback color during transitions */
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    min-height: 48vh !important;
    border: none !important;
    transition: none !important; /* Prevent CSS transitions that could cause flashes */
}

/* Remove any white background from parent elements */
.hero,
.hero-content,
section.hero {
    background-color: transparent !important;
    background: transparent !important;
}

/* Force any gradient backgrounds to be transparent */
.hero[style*="gradient"],
.hero[class*="gradient"] {
    background: transparent !important;
}

/* Hide any pseudo-elements that might add effects */
.hero::before,
.hero::after {
    display: none !important;
}

/* Hide all text elements completely - clean image only */
.hero-quote,
.hero-subtitle, 
.hero-description,
.hero-content h1,
.hero-content p,
.hero-content .btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure crisp image rendering */
.hero {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smoothing: subpixel-antialiased;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
}

/* DISABLED - This was removing background images */
/*
.hero[style*="background-image"] {
    background-color: transparent !important;
    background: none !important;
}
*/

/* Navigation Dots - Professional Design */
.force-slider-dots, .hero-slider-dots {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 15px !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dot styling */
.force-dot, .hero-slider-dot {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: 3px solid rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.force-dot.active, .hero-slider-dot.active {
    background: #ffffff !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.force-dot:hover, .hero-slider-dot:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.1) !important;
}