/* Add the black divider line */
 .divider-line {
    width: 100%;
    height: 5px;
    /* Adjust thickness as needed */
    background-color: #333;
    margin: 0px 0;
    /* Add some space above and below the divider line */
}

/* Navbar text styles */
.navbar-light .navbar-nav .nav-link {
    position: relative;
    margin-left: 30px;
    padding: 20px 0;
    /* Add padding to the top and bottom */
    font-size: 17px;
    font-weight: 500;
    color: black;
    outline: none;
    opacity: 0;
    transition: opacity 0.5s, color 0.5s, transform 0.4s;
    /* Adjust the duration as needed */
}

/* Navbar text hover effect */
.navbar-light .navbar-nav .nav-link:hover {
    color: darkgray;
    transform: translateY(-3px);
    transition: color 0.5s, transform 0.4s;
    /* Adjust the duration as needed */
}

/* Dropdown submenu styles */
.navbar-light .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    transition: background-color 0.3s;
}

/* Dropdown submenu hover effect */
.navbar-light .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: grey;
    color: white;
    /* Change text color on hover if needed */
}

/* Open "Get Involved" dropdown on hover */
.navbar-light .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

.navbar {
    background-color: #DCDCDC;
    background-image: linear-gradient(to right);
    
}

.fade-in {
    opacity: 1 !important;
    /* Override initial opacity */
}