body{
    background-color:#cccccc;
}

/* Navigation */
.navbar {
    --navbar-height: 3rem;
    height:var(--navbar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #cccccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links > li {
    padding: 0 1rem;
    /*hover event need not applied to margin area*/
    height:inherit;
    display:block;
}

.nav-links > li:hover {
    background-color: #aaccff;
}

.nav-links a {
    height:inherit;
    line-height:var(--navbar-height);
    vertical-align: middle;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    display: block;
}

.nav-links > li > a {

}

.nav-links a:hover {
    background-color: #aaccff;
    color: #007bff;
}

.dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute;  /* Important for overlaying the navbar */
    list-style:none;
    background-color: #aaa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1001; /* Ensure it's above other content */
    /* Add more styling as needed (e.g., width, padding, etc.) */
    margin-left:-1rem;
    width: inherit;
    min-width:5rem;
}

.dropdown-menu li {
    padding:0 1rem;
}

.dropdown-menu li:hover {
    background-color: #aaccff;
}

.country-selector select {
    padding: 0.5rem;
    border: none;
    background: #f8f8f8;
    cursor: pointer;
}




/* Footer */
footer {
    background: #333;
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.footer-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

}