/* Navbar styles */
.navbar {
    display: flex;
    /* Align items in a single row by default */
    align-items: center;
    /* Vertically align items */
    justify-content: space-between;
    /* Space between heading and links */
    padding: 0;
    padding-top: 4rem;
}

.navbar h2 {
    margin: 0;
    font-size: 20px;
    text-align: center;
}

/* Navigation links */
.nav-links {
    display: flex;
    /* Align links in a single row */
    gap: 15px;
    /* Add space between links */
}

.nav-links a {
    color: black;
    /* Adjust text color */
    text-decoration: none;
    font-size: 16px;
    transition: color 0.15s ease-in-out;
    /* Smooth transition for color */
}

.nav-links a:hover {
    color: #f0a500;
}

/* Media query for smaller screens */
@media (max-width: 1080px) {
    .navbar {
        flex-direction: column;
        /* Stack items vertically */
        align-items: center;
        /* Center items horizontally */
        text-align: center;
        /* Align text in the center */
    }

    .nav-links {
        margin-top: 1rem;
        /* Add some space between logo and links */
        gap: 10px;
        /* Adjust gap for smaller screens */
    }

    .nav-links a {
        font-size: 20px;
        /* Adjust font size for smaller screens */
    }
}

.nav-icon {
    height: 22px;
    transition: filter 0.15s ease-in-out;
    /* Smooth transition */
}

a:hover .nav-icon {
    filter: brightness(0) saturate(100%) invert(46%) sepia(95%) saturate(600%) hue-rotate(1deg) brightness(110%) contrast(90%);
}

.navbar-line {
    height: 1.5px; /* Thickness of the line */
    width: 100%; /* Make it span the entire width of the navbar */
    background-color: black; /* Black color for the bar */
    margin-top: 1rem; /* Space above the line (optional) */
}