/* Header and Contact Bar Positioning Fix */

/* Contact bar styling */
.contact-bar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    height: auto;
    background-color: var(--dark-blue);
    padding: 8px 0;
}

/* Adjust header position to prevent overlap with contact bar */
.header {
    position: fixed;
    width: 100%;
    top: 40px; /* Height of contact bar */
    left: 0;
    z-index: 9998; 
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 80px; /* Set a fixed height for the header */
    display: flex;
    align-items: center;
}

/* Fix for middle bar to ensure proper layout */
.header .middle_bar {
    width: 100%;
}

/* Ensure logo and navigation are properly aligned */
.middle_bar_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Base spacing for main content - mobile-specific overrides are in mobile-fix.css */
.banner-one {
    padding-top: 150px; /* Account for contact bar (40px) + header height (80px) + extra spacing */
    position: relative;
}

/* Make sure menu items are properly visible */
.header .mainnav ul.main_menu > li > a {
    color: var(--dark-blue) !important; 
    text-shadow: none !important;
    padding: 5px 10px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.header .mainnav ul.main_menu > li > a:hover {
    color: var(--orange) !important;
}

/* Make sure navigation is properly displayed */
.header .mainnav {
    display: flex;
    align-items: center;
    height: 100%;
}

.header .main_menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .contact-bar {
        height: auto; /* Allow height to adjust based on content */
    }
    
    .header {
        top: 60px; /* Increase top position for smaller screens where contact bar might be taller */
        height: 70px; /* Slightly reduce header height on mobile */
    }
}

/* For very small screens where contact bar stacks items */
@media (max-width: 575px) {
    .header {
        top: 70px; /* Further increase for very small screens */
    }
}