/* ===== FINAL HERO FIXES - User Adjustments ===== */

/* Remove Red Overlay - Make it Very Subtle or Transparent */
.hero-image-overlay {
    background: linear-gradient(135deg, 
                rgba(0, 0, 0, 0.15) 0%, 
                rgba(0, 0, 0, 0.10) 100%) !important;
    /* Changed from red-orange to subtle dark overlay */
}

/* Alternative: Completely Remove Overlay */
/* Uncomment below if you want NO overlay at all */
/*
.hero-image-overlay {
    display: none !important;
}
*/

/* Stats - Remove Text Labels, Keep Only Icons and Numbers */
.stat-item p {
    display: none !important;
}

/* Stats - Fix Alignment and Spacing */
.hero-stats {
    display: flex !important;
    gap: 2rem !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    padding: 1.5rem 1.8rem !important;
    border-radius: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.4s ease !important;
    min-width: 140px !important;
    width: 140px !important;
    text-align: center !important;
}

/* Ensure 4th stat aligns properly */
.stat-item:nth-child(4) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.stat-icon {
    font-size: 2.8rem !important;
    color: #DC143C !important;
    margin-bottom: 0.8rem !important;
    display: block !important;
    filter: drop-shadow(0 2px 6px rgba(220, 20, 60, 0.3)) !important;
}

.stat-item h3 {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #0A0A0A !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Move Slider Dots to LEFT Side */
.hero-slider-dots {
    display: flex !important;
    position: absolute !important;
    left: 2rem !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex-direction: column !important;
    gap: 1rem !important;
    z-index: 20 !important;
}

/* Scroll Indicator - Move to RIGHT Side (opposite of slider) */
.scroll-indicator {
    position: absolute !important;
    right: 2rem !important;
    left: auto !important;
    bottom: 3rem !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    animation: bounceAnimation 2s infinite !important;
    z-index: 20 !important;
}

/* Fix WhatsApp, Call, Email Icon Colors */
/* These are typically in header or contact section */

/* Header Icons - Remove Red, Use Neutral Colors */
.header .social-icons a,
.header .contact-icons a {
    color: #333333 !important;
    background: transparent !important;
}

.header .social-icons a:hover,
.header .contact-icons a:hover {
    color: #25D366 !important; /* WhatsApp green */
}

/* Specific Icon Colors - Natural Colors */
.fa-whatsapp {
    color: #25D366 !important; /* WhatsApp green */
}

.fa-phone,
.fa-phone-alt {
    color: #4CAF50 !important; /* Call green */
}

.fa-envelope {
    color: #2196F3 !important; /* Email blue */
}

/* Footer Icons - Remove Red Mixing */
.footer .social-links a {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.footer .social-links a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

/* Contact Section Icons - Natural Colors */
.contact-info i.fa-whatsapp {
    color: #25D366 !important;
}

.contact-info i.fa-phone,
.contact-info i.fa-phone-alt {
    color: #4CAF50 !important;
}

.contact-info i.fa-envelope {
    color: #2196F3 !important;
}

/* Contact Links - Remove Red */
.contact-info a {
    color: #333333 !important;
}

.contact-info a:hover {
    color: #25D366 !important; /* Green on hover */
}

/* Ensure No Red Mixing on These Icons Anywhere */
a[href^="tel:"] i,
a[href^="mailto:"] i,
a[href*="whatsapp"] i {
    color: inherit !important;
}

a[href^="tel:"] {
    color: #4CAF50 !important;
}

a[href^="mailto:"] {
    color: #2196F3 !important;
}

a[href*="whatsapp"] {
    color: #25D366 !important;
}

/* Remove any gradient backgrounds that might mix red */
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
a[href*="whatsapp"]:hover {
    background: transparent !important;
    opacity: 0.8 !important;
}

/* Floating Contact Buttons - Specific Natural Colors */
.floating-buttons .float-btn {
    transition: all 0.3s ease !important;
}

.floating-buttons .float-btn.whatsapp {
    background: #25D366 !important;
    color: #FFFFFF !important;
}

.floating-buttons .float-btn.whatsapp:hover {
    background: #20BA5A !important;
    transform: scale(1.1) !important;
}

.floating-buttons .float-btn.phone {
    background: #4CAF50 !important;
    color: #FFFFFF !important;
}

.floating-buttons .float-btn.phone:hover {
    background: #45A049 !important;
    transform: scale(1.1) !important;
}

.floating-buttons .float-btn.email {
    background: #2196F3 !important;
    color: #FFFFFF !important;
}

.floating-buttons .float-btn.email:hover {
    background: #1976D2 !important;
    transform: scale(1.1) !important;
}

/* Ensure icons inside floating buttons are white */
.floating-buttons .float-btn i {
    color: #FFFFFF !important;
}

/* Footer Contact Info - Natural Colors */
.footer .contact-info li i {
    color: #FFFFFF !important;
    opacity: 0.9 !important;
}

.footer .contact-info li a {
    color: #CCCCCC !important;
}

.footer .contact-info li a:hover {
    color: #FFFFFF !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .hero-slider-dots {
        left: 1rem !important;
    }
    
    .scroll-indicator {
        right: 1rem !important;
        bottom: 2rem !important;
    }
    
    .hero-stats {
        gap: 1rem !important;
    }
    
    .stat-item {
        min-width: 120px !important;
        width: 120px !important;
    }
}

@media (max-width: 767px) {
    .hero-stats {
        flex-wrap: wrap !important;
        gap: 0.8rem !important;
    }
    
    .stat-item {
        flex: 1 1 calc(50% - 0.8rem) !important;
        min-width: 110px !important;
        width: auto !important;
    }
}

@media (max-width: 430px) {
    .hero-stats {
        flex-direction: column !important;
    }
    
    .stat-item {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}