/* Custom styles for the hero section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: #0a0a0c;
}

/* Fallback image if video doesn't load */
.hero-fallback-image {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 0;
    display: none;
}

/* Show fallback image when video fails */
.hero-fallback-image.show {
    display: block;
}

#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 0;
}

/* Hero Content - ensure it's above video and overlay */
.hero-content {
    position: relative;
    z-index: 3 !important;
    max-width: 900px;
    padding: 0 20px;
}

.hero-content * {
    position: relative;
    z-index: 3;
}

/* Ensure button is visible */
.hero .btn {
    opacity: 1 !important;
}

.hero-content .btn-primary {
    opacity: 1 !important;
    position: relative;
    z-index: 10;
}

/* ========== BLUE ACCENT COLOR ADDITIONS ========== */

/* Option 1: Trust Badges + Contact Icons - Subtle Blue Accents */
/* Make the middle trust badge icon blue */
.badge:nth-child(2) i {
    color: #0066B3 !important;
}

/* Blue icons in contact section */
.contact-info i {
    color: #0066B3 !important;
}

/* Option 2: Alternating Section Headers - Bold Look */
/* Services section header in blue */
#services .section-header h2 span {
    color: #0066B3 !important;
}

/* Contact section header in blue */
#contact .section-header h2 span {
    color: #0066B3 !important;
}

/* Careers section header in blue */
#careers .section-header h2 span {
    color: #0066B3 !important;
}

/* Option 3: Dual-Color Separator - Elegant */
/* Make all separators dual-color (orange to blue gradient) */
.separator {
    background: linear-gradient(to right, #ff6b35 0%, #ff6b35 50%, #0066B3 50%, #0066B3 100%) !important;
    height: 3px;
}