/* CRITICAL FIXES FOR ALL PAGES */

/* Ensure body has no top padding */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Page headers MUST stay below navbar with solid background */
.page-header {
    margin-top: 0 !important;
    padding-top: 180px !important;
    padding-bottom: 100px !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    position: relative !important;
    z-index: 10 !important;
    color: #ffffff !important;
}

.page-header .header-content {
    color: #ffffff !important;
}

.page-header .header-tag {
    color: rgba(255, 255, 255, 0.8) !important;
}

.page-header .page-title {
    color: #ffffff !important;
}

.page-header .page-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Navbar MUST be on top */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: rgba(15, 23, 42, 0.98) !important;
}

/* Filter sections must have background */
.projects-filter-section,
.blog-filter-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    background: #f1f5f9 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Courses hero fix */
.courses-hero {
    padding: 180px 0 100px !important;
    margin-top: 0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* All sections need proper z-index */
.section,
.services-preview,
.featured-projects,
.blog-section,
.projects-grid-section {
    position: relative !important;
    z-index: 10 !important;
}

/* MOBILE FIXES */
@media (max-width: 768px) {
    .page-header {
        padding-top: 140px !important;
        padding-bottom: 60px !important;
    }
    
    .page-title {
        font-size: 42px !important;
    }
    
    .courses-hero {
        padding: 140px 0 60px !important;
    }
    
    .courses-hero h1 {
        font-size: 48px !important;
    }
    
    .hero-title {
        font-size: 40px !important;
    }
}