/* ================================================= */
/* GLOBAL STYLES & TYPOGRAPHY */
/* ================================================= */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

.section-spacing {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-title {
    font-weight: 700;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-size: 2.25rem;
}

/* Custom Red Underline Effect */
.section-title::after {
    content: '';
    position: absolute;
    left: 50%; /* Center the line */
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background: #FF0000; /* Primary brand color */
    border-radius: 5px;
}
.section-title.text-start::after {
    left: 0;
    transform: none;
}

.lead-text {
    font-size: 1.15rem;
    color: #555;
}


/* ================================================= */
/* CARD & HOVER EFFECTS (Services) */
/* ================================================= */

.service-card {
    border: none;
    border-radius: 15px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
    background-color: white;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 300px; /* Ensure even height */
}

/* "Lift" and "Glow" effect on hover */
.service-card.hover-lift:hover {
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); 
    /* Add a subtle highlight border on hover */
    border-bottom: 5px solid #FF0000;
}

.service-icon {
    color: #FF0000; /* Use brand color for icons */
}

/* ================================================= */
/* ANIMATIONS (Simple CSS Keyframes) */
/* ================================================= */

/* Hero Text Fade In (Better than simple Bootstrap classes) */
.animate-fadein {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
}
.delay-1s { animation-delay: 1s; }
.delay-2s { animation-delay: 1.5s; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-slidein-down {
    animation: slideInDown 1s ease-out forwards;
    opacity: 0;
}
@keyframes slideInDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-slidein-up {
    animation: slideInUp 1s ease-out forwards 0.5s; /* 0.5s delay */
    opacity: 0;
}
@keyframes slideInUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Subtle Pulse for 'Why Choose Us' Icons */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); color: #FF3333; }
    100% { transform: scale(1); }
}
.animate-pulse {
    animation: pulse 2s infinite ease-in-out;
}
/* ================================================= */
/* PAGE HEADER STYLES (Used on About, Services, etc.) */
/* ================================================= */
.page-header {
    /* Subtle version of the hero gradient */
    background: linear-gradient(135deg, #FF3333 0%, #333333 100%);
    position: relative;
    padding-top: 6rem;
    padding-bottom: 6rem;
    color: white;
    /* Optional: Small animation for consistency */
    background-size: 200% 200%;
    animation: GradientShift 10s ease infinite alternate;
}

/* Ensure the underline for section-title is white on dark backgrounds */
.page-header .display-3 {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* Ensure images lift on hover for consistency */
.intro-image-container img,
.hover-lift {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Animated link style for use on a LIGHT background (black text) */
.animated-nav-link-dark {
    position: relative;
    /* Explicitly set color to black/dark for light header */
    color: #212529 !important; 
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Red line effect that grows from the center on hover/active */
.animated-nav-link-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Start the line in the center */
    width: 0;
    height: 3px;
    background-color: #FF0000; /* Brand red color */
    transition: width 0.3s ease, left 0.3s ease;
}

/* Hover/Active State: Text turns red, line grows */
.animated-nav-link-dark:hover,
.animated-nav-link-dark.active {
    color: #FF0000 !important; /* Text turns red */
}

.animated-nav-link-dark:hover::after,
.animated-nav-link-dark.active::after {
    width: 100%;
    left: 0;
}
/* 1. HERO SECTION CONTAINER */
.hero-banner {
    /* Full height of the viewport */
    height: 90vh; 
    /* Essential: Sets context for absolutely positioned children (video/overlay) */
    position: relative; 
    /* Ensures no overflow outside the header area */
    overflow: hidden; 
    /* Vertically centers the content */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0; 
    padding: 0;
}

/* 2. VIDEO STYLING FOR FULL COVERAGE */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Key for maintaining aspect ratio and covering the container */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    /* Move video to the background */
    z-index: -2; 
    /* Centers the video */
    transform: translate(-50%, -50%);
    /* Ensures the video is cropped to cover the area */
    object-fit: cover;
}

/* 3. OVERLAY FOR TEXT READABILITY */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Dark, semi-transparent background for text clarity */
    background: rgba(0, 0, 0, 0.5); 
    /* Place between content (z-1) and video (z-2) */
    z-index: -1; 
}

/* 4. CONTENT Positioning */
.hero-content {
    /* Ensures content is visibly above the video and overlay */
    z-index: 1;
    /* Responsive padding */
    padding: 3rem 1rem !important; 
}