/* Header and Footer Component Styles - Override for Dynamic Loading */

/* Ensure header is properly styled when loaded dynamically */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: var(--primary-blue) !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Ensure footer is properly styled when loaded dynamically */
.footer {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    padding: 3rem 0 1rem !important;
    margin-top: 4rem !important;
}

/* Ensure back to top button is visible */
.back-to-top.visible {
    display: flex !important;
}

/* Mobile menu functionality */
.hamburger.active .bar:nth-child(2) {
    opacity: 0 !important;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
}

.nav-menu.active {
    left: 0 !important;
}