/* Medium devices (landscape tablets, 768px) */
@media only screen and (max-width: 768px) {
    .navbar {
        background-color: var(--primary-color) !important;
        position: sticky !important;
        top: 0;
        z-index: 1020;
    }

    .navbar-toggler {
        background-color: var(--text-color);
        padding: 0.25rem 0.75rem; /* Adjust padding as needed */
        font-size: 1.25rem; /* Adjust icon size */
        line-height: 1;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        width: auto;
        margin-left: auto;
    }

    .navbar-toggler-icon {
        background-color: var(--text-color);

        width: 1.5em; /* Adjust width as needed */
        height: 1.5em; /* Adjust height as needed */
    }
    .navbar-toggler:hover,
    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none; /* Removes focus outline */
        box-shadow: none; /* Removes any hover/focus shadows */
        background-color: var(
            --secondartext-color
        ); /* Keeps consistent styling */
    }

    /* Target the links inside the Menu for smaller screens */
    .nav-link-small {
        color: var(--primary-color); /* Set link color */
        text-decoration: none; /* Remove underline */
        font-weight: 600; /* Thicker font for all links */
        font-size: large;
        position: relative; /* Required for pseudo-element underline */
    }

    /* Optional: Add hover effect for links */
    .nav-link-small:hover {
        color: var(--secondary-color); /* Change color on hover */
    }

    /* Optional: Active state styling */
    .nav-link-small.active {
        font-weight: 700; /* Emphasize active link */
    }

    /* Add a custom thick underline */
    .nav-link-small.active::after {
        content: ''; /* Pseudo-element for underline */
        position: absolute;
        left: 0;
        bottom: -2px; /* Adjust distance from text */
        width: 100%;
        height: 3px; /* Thickness of the underline */
        background-color: var(--secondary-color); /* Underline color */
    }
}

/* Horizontal menu (Medium screens and up) */
@media (min-width: 769px) {
    .navbar {
        background-color: var(--primary-color) !important;
        position: sticky; /* Ensure stickiness for larger screens */
        top: 0;
        z-index: 1020;
    }

    /* Target the links inside the navbar for larger screens */
    .nav-link-large {
        color: var(--text-color); /* Set link color */
        text-decoration: none; /* Remove underline */
        font-weight: 600; /* Thicker font for all links */
        position: relative; /* Required for pseudo-element underline */
    }

    /* Optional: Add hover effect for links */
    .nav-link-large:hover {
        color: var(--secondary-color); /* Change color on hover */
    }

    /* Optional: Active state styling */
    .nav-link-large.active {
        font-weight: 700; /* Emphasize active link */
    }

    /* Add a custom thick underline */
    .nav-link-large.active::after {
        content: ''; /* Pseudo-element for underline */
        position: absolute;
        left: 0;
        bottom: -2px; /* Adjust distance from text */
        width: 100%;
        height: 3px; /* Thickness of the underline */
        background-color: var(--secondary-color); /* Underline color */
    }
}