/* -------------------- TOP BAR --------------------  */
/* Makes all of top bar black */
.top-bar,
.top-bar ul {
    background-color: #000 !important;
    /* Force black background */
}

.top-bar-left img {
    height: 70px;
    width: auto;
    /* Maintain aspect ratio */
}

/* Style for menu items */
.top-bar-right ul.menu li a {
    font-size: 16px;
    /* Default font size */
    padding: 10px 15px;
    /* Adjust padding to control spacing */
    color: #fff;
    /* White text */
    text-decoration: none;
}

.top-bar-right ul.menu li a:hover {
    color: #ddd;
    /* Lighter color on hover */
}

/* Sticky Top Bar */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #000 !important;
    /* Ensures the top bar is completely black */
    color: #fff;
    /* White text */
    transition: top 0.3s ease;
    /* Smooth hide/show transition */
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional: Add shadow */
}

/* Hide top bar when scrolling */
.top-bar.hidden {
    top: -100px;
    /* Move it out of view */
}

/* Media query to reduce font size for laptop screens (1024px - 1440px) */
@media (max-width: 1440px) {
    .top-bar-right ul.menu li a {
        font-size: 14px;
        /* Reduce font size for laptop screens */
        padding: 8px 10px;
        /* Adjust padding for medium screens */
    }
}

/* Media query for smaller laptops (below 1024px) */
@media (max-width: 1024px) {
    .top-bar-right ul.menu li a {
        font-size: 12px;
        /* Further reduce font size for smaller laptops */
        padding: 6px 8px;
        /* Reduce padding to fit content */
    }

    .top-bar-left img {
        height: 50px;
        /* Reduce logo size on smaller screens */
    }
}