/* Hero Section - Complete Styles */

/* Main Hero Section */
.hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 100vh !important;
    background-image: image-set( url('/carousel/main-hero.webp') type('image/webp') );
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
}

    /* Gradient Overlay */
    .hero-section .hero-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient( to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100% ) !important;
        z-index: 1 !important;
    }

    /* Hero Content */
    .hero-section .hero-content {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        padding: 2rem 0 !important;
    }

        /* Content Box */
        .hero-section .hero-content > .container > .row > .col-lg-8,
        .hero-section .hero-content > .container > .row > .col-xl-7 {
            background: rgba(0, 0, 0, 0.5) !important;
            padding: 3rem !important;
            border-radius: 20px !important;
            backdrop-filter: blur(10px) !important;
        }

    /* Phone Badge */
    .hero-section .hero-phone {
        display: inline-block !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-section .phone-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        padding: 12px 24px !important;
        border-radius: 50px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
    }

        .hero-section .phone-badge i.bi-telephone-fill {
            font-size: 1.3rem !important;
            color: #7B61FF !important;
            background: white !important;
            padding: 8px !important;
            border-radius: 50% !important;
        }

    .hero-section .phone-number {
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }

    .hero-section .availability-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.9rem !important;
        padding-left: 12px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

        .hero-section .availability-badge i {
            color: #4ade80 !important;
        }

    /* Hero Title */
    .hero-section .hero-title {
        font-size: 3.5rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5) !important;
    }

    /* Hero Subtitle */
    .hero-section .hero-subtitle {
        font-size: 1.4rem !important;
        line-height: 1.6 !important;
        margin-bottom: 2.5rem !important;
        max-width: 600px !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) !important;
    }

    /* CTA Buttons */
    .hero-section .hero-cta-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
        margin-bottom: 3rem !important;
    }

    .hero-section .hero-btn-primary {
        background: white !important;
        border: none !important;
        padding: 16px 40px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

        .hero-section .hero-btn-primary:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
        }

    .hero-section .hero-btn-secondary {
        background: transparent !important;
        border: 2px solid white !important;
        padding: 16px 40px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

        .hero-section .hero-btn-secondary:hover {
            background: white !important;
            color: #7B61FF !important;
            transform: translateY(-2px) !important;
        }

    /* Social Icons */
    .hero-section .hero-social-icons {
        display: flex !important;
        gap: 1rem !important;
    }

    .hero-section .social-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        font-size: 1.3rem !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }

        .hero-section .social-icon:hover {
            background: white !important;
            color: #7B61FF !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
        }

    /* Force White Text - Override MudBlazor Dark Theme */
    .hero-section h1,
    .hero-section p,
    .hero-section span,
    .hero-section .hero-title,
    .hero-section .hero-subtitle,
    .hero-section .phone-number,
    .hero-section .availability-badge,
    .hero-section .phone-badge {
        color: white !important;
    }

    .hero-section .hero-btn-primary,
    .hero-section .hero-btn-primary i {
        color: #7B61FF !important;
    }

    .hero-section .hero-btn-secondary,
    .hero-section .hero-btn-secondary i {
        color: white !important;
    }

    .hero-section .social-icon,
    .hero-section .social-icon i {
        color: white !important;
    }

        .hero-section .social-icon:hover,
        .hero-section .social-icon:hover i {
            color: #7B61FF !important;
        }

/* Responsive Design */
@media (max-width: 1199px) {
    .hero-section .hero-title {
        font-size: 3rem !important;
    }

    .hero-section .hero-subtitle {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 991px) {
    .hero-section .hero-content > .container > .row > .col-lg-8 {
        padding: 2rem !important;
    }

    .hero-section .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-section .hero-subtitle {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        min-height: auto !important;
    }

        .hero-section .hero-content {
            padding: 3rem 0 !important;
        }

            .hero-section .hero-content > .container > .row > .col-lg-8,
            .hero-section .hero-content > .container > .row > .col-xl-7 {
                padding: 2rem 1.5rem !important;
                border-radius: 15px !important;
            }

        .hero-section .hero-title {
            font-size: 2rem !important;
            margin-bottom: 1rem !important;
        }

        .hero-section .hero-subtitle {
            font-size: 1rem !important;
            margin-bottom: 2rem !important;
        }

        .hero-section .phone-badge {
            font-size: 0.95rem !important;
            padding: 10px 20px !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            gap: 8px !important;
        }

            .hero-section .phone-badge i.bi-telephone-fill {
                font-size: 1.1rem !important;
                padding: 6px !important;
            }

        .hero-section .availability-badge {
            padding-left: 0 !important;
            border-left: none !important;
            width: 100% !important;
            justify-content: center !important;
            font-size: 0.85rem !important;
        }

        .hero-section .hero-cta-buttons {
            flex-direction: column !important;
            margin-bottom: 2rem !important;
        }

        .hero-section .hero-btn-primary,
        .hero-section .hero-btn-secondary {
            width: 100% !important;
            padding: 14px 32px !important;
            font-size: 1rem !important;
        }

        .hero-section .hero-social-icons {
            justify-content: center !important;
        }
}

@media (max-width: 575px) {
    .hero-section .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-section .hero-subtitle {
        font-size: 0.95rem !important;
    }

    .hero-section .phone-badge {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }

    .hero-section .social-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }
}