/* Base Reset and Typography */
:root {
    /* MOCKUP COLOR REFINEMENT */
    --primary-color: #f7a400; 
    --dark-bg: #151a24; 
    --dark-secondary: #1f2735; 
    --text-color: #343a40;
    --light-text: #e9ecef;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    
    /* FIX: Keep the padding-top fix for the main content block */
    padding-top: 85px !important; 
}

/* ------------------------------------------- */
/* CRITICAL: HEADER BLEED/GAP FIXES (FINAL) */
/* ------------------------------------------- */

/* 1. Define a definitive, stable height for the fixed header */
.custom-dark-header {
    height: 85px !important;
    padding-top: 15px !important; 
    padding-bottom: 15px !important; 
}

/* 2. CRITICAL FIX: Push the main headline down to clear the fixed navbar */
.first-hero-headline {
    margin-top: 20px !important; /* Adding extra space below the fixed header */
}

/* ------------------------------------------- */
/* CRITICAL: NAVIGATION LAYOUT FIXES (IMAGE f4377f) */
/* ------------------------------------------- */

/* FIX FOR BROKEN DESKTOP NAV LAYOUT: Force navbar links to display inline on large screens and up, overriding any accidental mobile collapse state. */
@media (min-width: 992px) {
    .custom-dark-header .navbar-collapse {
        display: flex !important; /* Forces the navigation wrapper to display */
    }
    .custom-dark-header .navbar-nav {
        flex-direction: row !important; /* Forces the list items to be inline */
    }
}


/* ------------------------------------------- */
/* Custom Color Overrides */
/* ------------------------------------------- */

.custom-dark-header, .custom-bg-dark {
    background-color: var(--dark-bg) !important;
}

.custom-dark-secondary, .custom-bg-secondary {
    background-color: var(--dark-secondary) !important;
}

.custom-bg-footer {
    background-color: #333 !important;
    color: #bbb !important;
}

.custom-text-primary {
    color: var(--primary-color) !important;
}

.custom-border-primary {
    border-color: var(--primary-color) !important;
}


/* ------------------------------------------- */
/* VISIBILITY FIXES (UNBREAKABLE COLOR & HAMBURGER) */
/* ------------------------------------------- */

/* Set text content in the dark header/sidebar to white/light */
.custom-dark-header .navbar-brand,
.custom-dark-header .nav-link, 
.custom-bg-dark,
.custom-bg-dark h3,
.custom-bg-dark p,
.custom-bg-dark li {
    color: white !important; 
}

/* CRITICAL LINK FIX: Target links inside dark containers */
.custom-bg-dark a,
.custom-dark-secondary a {
    color: white !important;
}

/* Ensure the hero section text is white */
.hero {
    color: white !important;
}

/* Re-apply primary color only to icons and elements where intended */
.custom-text-primary {
    color: var(--primary-color) !important;
}

/* CRITICAL FIX FOR INVISIBLE HAMBURGER (image_ea3e62.png) */
.custom-dark-header .navbar-toggler-icon { 
    /* The SVG data forces the three lines to be white/light */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2) !important;
}


/* Fixes the close button icon color inside the mobile offcanvas menu */
.offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); 
    opacity: 1; 
}


/* Buttons and Custom Styles (No changes here) */

.custom-btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--dark-bg) !important; 
    font-weight: 600;
}
/* ... rest of buttons and custom card styles ... */
.custom-btn-primary:hover {
    background-color: #e69600 !important;
    border-color: #e69600 !important;
}
.custom-btn-secondary {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid white !important;
    font-weight: 600;
}
.custom-btn-secondary:hover {
    background-color: white !important;
    color: var(--dark-bg) !important;
}
.custom-btn-tertiary {
    background-color: var(--dark-bg) !important;
    color: white !important;
    border: 2px solid var(--dark-bg) !important;
    padding: 10px 25px;
    font-weight: 600;
}
.custom-btn-tertiary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.custom-card-pain-point {
    background-color: #f8f9fa;
    border-left: 4px solid var(--primary-color);
    border-radius: 4px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.custom-icon-circle {
    font-size: 1.1rem;
    color: var(--primary-color);
    background-color: var(--dark-secondary);
    border-radius: 50%;
    padding: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Global Container --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Main Header/Navbar --- */
.main-header {
    background-color: #212529; /* Dark background */
    color: white;
    padding: 15px 0;
    border-bottom: 3px solid #007bff; /* Accent color */
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
    color: white;
    text-decoration: none;
}

/* Navigation Links */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.main-nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    transition: background-color 0.3s;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    background-color: #007bff; /* Highlight active/hovered link */
    border-radius: 4px;
}

/* Mobile Toggle Button */
.menu-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Show the hamburger on small screens */
    }

    .main-nav {
        /* Hide menu off-screen by default */
        position: absolute;
        top: 65px; /* Adjust based on header height */
        left: 0;
        width: 100%;
        height: 0; /* Starts collapsed */
        overflow: hidden;
        background-color: #212529;
        transition: height 0.3s ease-in-out;
        z-index: 10;
    }

    .main-nav.open {
        /* When toggled, show full menu */
        height: auto; 
        max-height: 300px; /* Set a max height */
        padding-bottom: 10px;
    }

    .main-nav ul {
        flex-direction: column; /* Stack links vertically */
        text-align: center;
        padding-top: 10px;
    }
    
    .main-nav ul li a {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}