/* Common Header CSS */

/* Announcement Banner */
.announcement-banner {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px 0;
    font-weight: 500;
    position: relative;
    z-index: 9001;
}

.announcement-banner p {
    margin: 0;
    padding: 0;
}

/* Header Container */
header .container,
.header .container,
.main-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 20px !important;
}

/* Logo styling */
header .logo,
header a.logo,
.header .logo,
.header a.logo,
.main-header .logo,
.main-header a.logo {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #0078ff !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* Navigation styling */
header nav,
.header nav,
.main-header nav {
    display: flex !important;
    align-items: center !important;
}

header nav ul,
.header nav ul,
.main-header nav ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

header nav ul li,
.header nav ul li,
.main-header nav ul li {
    margin-left: 20px !important;
}

header nav ul li a,
.header nav ul li a,
.main-header nav ul li a {
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

header nav ul li a:hover,
.header nav ul li a:hover,
.main-header nav ul li a:hover {
    color: #0078ff !important;
}

header nav ul li a.active,
.header nav ul li a.active,
.main-header nav ul li a.active {
    color: #0078ff !important;
    font-weight: 700 !important;
}

/* CTA Button */
.cta-button {
    background-color: #0078ff !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    transition: background-color 0.3s ease !important;
}

.cta-button:hover {
    background-color: #0056b3 !important;
    color: white !important;
}

/* Hamburger Menu */
.hamburger {
    display: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px !important;
}

.hamburger span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background-color: #333 !important;
    margin: 5px 0 !important;
    transition: all 0.3s ease !important;
}

/* Mobile Styles */
@media (max-width: 900px) {
    /* Container positioning */
    header .container,
    .header .container,
    .main-header .container {
        justify-content: center !important;
        position: relative !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Logo positioning */
    header .logo,
    header a.logo,
    .header .logo,
    .header a.logo,
    .main-header .logo,
    .main-header a.logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        z-index: 999 !important;
    }
    
    /* Hamburger positioning */
    .hamburger {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
    }
    
    /* Navigation menu */
    header nav ul,
    .header nav ul,
    .main-header nav ul {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: white !important;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
    }
    
    header nav ul.open,
    .header nav ul.open,
    .main-header nav ul.open {
        display: flex !important;
    }
    
    header nav ul li,
    .header nav ul li,
    .main-header nav ul li {
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    header nav ul li a,
    .header nav ul li a,
    .main-header nav ul li a {
        display: block !important;
        padding: 15px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    /* Hamburger animation */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px) !important;
    }
}