/* Navbar Customization */
.navbar {
    background-color: #FFFFFF !important;
}

.navbar-brand img {
    height: 60px;
}

.nav-link {
    color: #000000 !important;
    font-weight: 400;
    font-size: 1.13rem;
}

.btn-red {
    background-color: var(--primary-red);
    color: white !important;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 6px;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-red:hover {
    background-color: #c11f16;
}

.navbar {
    border-bottom: 1px solid #EAEAEA;
    /* Crisp light gray divider line */
    background-color: #FFFFFF;
    /* Ensures a solid white backdrop */
    padding-top: 15px;
    /* Optional: standard layout balancing spacing */
    padding-bottom: 15px;
}

/* 1. Base style for all navbar links */
#mainNavbar .navbar-nav .nav-link {
    color: #505d6f;
    /* A clean gray for unselected links */
    font-weight: 400;
    position: relative;
    transition: color 0.2s ease-in-out;
    /* Smoothly fades color change on hover */
}

/* 2. Highlight style when HOVERING over a link */
#mainNavbar .navbar-nav .nav-link:hover {
    color: #FF2E44 !important;
    /* Highlights using your accent red color */
    cursor: pointer;
}

/* 3. Optional: Add a subtle underline animation on hover */
#mainNavbar .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #FF2E44;
    transition: width 0.2s ease-in-out;
    /* Animates the line sliding out */
}

#mainNavbar .navbar-nav .nav-link:hover::after {
    width: 100%;
    /* Expands the line to full width on hover */
}

/* 4. Keep the active link permanently highlighted (Scrollspy state) */
#mainNavbar .navbar-nav .nav-link.active {
    color: #FF2E44 !important;
    font-weight: 700;
}

#mainNavbar .navbar-nav .nav-link.active::after {
    width: 100%;
    /* Keeps underline visible for the currently active section */
}

/* Responsive styles can be added here if needed */
@media screen and (max-width: 380px) {
    .navbar-brand {
        padding: 0 10px;
    }
}