/* Navbar Fixes CSS */

/* Make the navbar fixed at the top */
.main-header {
    position: fixed !important;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Adjust the header span to prevent content from hiding behind fixed navbar */
.header-span {
    height: 150px; /* Adjust based on your header height */
}

/* Ensure the main box has proper styling */
.main-header .main-box {
    position: relative;
    padding: 0 15px;
    transition: all 300ms ease;
}

/* Style for fixed header state */
.main-header.fixed-header .main-box {
    padding: 0px 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Adjust logo size when header is fixed */
.main-header.fixed-header .logo img {
    height: 60px;
    transition: all 300ms ease;
}

/* Ensure proper spacing in navigation */
.main-header .nav-outer {
    position: relative;
    float: right;
}

/* Responsive adjustments */
@media only screen and (max-width: 1023px) {
    .main-header {
        position: relative !important;
    }
    
    .header-span {
        height: auto;
    }
}