*{
    font-family: "Outfit", sans-serif;
}

/* --- Centering the Nav Items on Large Screens --- */
.navbar {
    background-color: #a4c9ff !important;
}

/* On larger screens (lg breakpoint and up) */
@media (min-width: 992px) {

    /* Set the navigation list to display as a block */
    .navbar-nav {
        display: block;
    }

    /* Center the individual list items inside the centered 'collapse' container */
    .navbar-nav .nav-item {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    /* If you want the items to be centered on their own line: */
    /* .navbar-nav { width: fit-content; margin: 0 auto; } */
}



/* --- Animated Mobile Menu Button (Hamburger to X) --- */

/* Resetting default toggler icon to use custom bars */
.navbar-toggler {
    padding: 0.5rem;
    /* Standard padding */
    border: none;
    box-shadow: none !important;
}

/* Base style for the individual bar lines */
.toggler-icon {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #333;
    /* Color of the bars */
    transition: all 0.3s ease-in-out;
    margin: 5px 0;
    /* Space between bars */
    border-radius: 1px;
}

/* When the menu is open (Bootstrap applies 'show' class to the target div) */
/* We target the button when its controlled element has the 'show' class via aria-expanded='true' */
.navbar-toggler[aria-expanded="true"] .top-bar {
    transform: rotate(45deg) translate(5px, 6px);
}

.navbar-toggler[aria-expanded="true"] .middle-bar {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .bottom-bar {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* Style the select inside navbar */
.navbar .form-select {
    background-color: #a4c9ff;
    color: #000000;
    /* border: 1px solid #ffffff70; */
    /* border-radius: 8px; */
    padding: 6px 30px 6px 12px; /* left padding 12px, right padding 30px for space for arrow */
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    appearance: none; /* removes default arrow (optional if custom icon used) */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

/* Add a custom arrow inside select (optional) */
.navbar .form-select::after {
    content: "▼"; /* or use a unicode icon */
    color: #000000;
    position: absolute;
    right: 10px; /* distance from right edge */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Hover and focus */
.navbar .form-select:hover,
.navbar .form-select:focus {
    background-color: #90bafc;
    /* border-color: #fff; */
    box-shadow: none;
}

/* Option styling */
.navbar .form-select option {
    background-color: #ffffff;
    color: #333;
    padding: 20px;
}


/* Highlight hovered option (for Chrome/Edge/Safari) */
.navbar .form-select option:hover {
    background-color: #a4c9ff;
}