/* Navbar Styling */
.header {
    background-color: #60a0e5; /* Navbar background color */
    color: #fff; /* Text color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    position: sticky; /* Make the navbar sticky */
    top: 0;
    z-index: 1000; /* Ensure navbar is above other elements */
}

.top-bar {
    background-color: #2a5a8a; /* Darker background for the top bar */
    padding: 10px 20px;
}

.top-bar .contact-info a {
    color: #fff; /* White text for contact info */
    text-decoration: none; /* Remove underline */
    margin-right: 15px; /* Add spacing between links */
    font-size: 0.9rem;
}

.top-bar .contact-info a:hover {
    color: #e0e0e0; /* Slightly lighter color on hover */
}

/* Navbar Container */
.nav-container {
    display: flex;
    justify-content: space-between; /* Space between logo and links */
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* Logo Container */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-container img {
    height: 50px; /* Adjust logo size */
    width: auto;
}

/* Navigation Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Add spacing between links */
}

.nav-links a {
    color: #f0f0f0; /* Light grey for better visibility */
    text-decoration: none; /* Remove underline */
    font-weight: 500;
    padding: 5px 10px; /* Add padding for clickable area */
    border-radius: 5px; /* Add rounded corners for hover effect */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effect */
}

.nav-links a:hover {
    background-color: #2a5a8a; /* Darker background on hover */
    color: #fff; /* White text on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Hamburger Icon */
.nav-toggle {
    display: none; /* Hide by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 1100; /* Ensure toggle is above other elements */
    position: absolute; /* Position the hamburger icon */
    right: 20px; /* Align to the right side of the screen */
    top: 15px; /* Adjust vertical alignment */
}

.nav-toggle i {
    font-size: 1.5rem;
    color: #fff;
}

/* Mobile Navbar */
@media (max-width: 910px) {
    .nav-links {
        display: none; /* Hide links by default */
        flex-direction: column; /* Stack links vertically */
        position: absolute;
        top: 100%; /* Position below the navbar */
        right: 0;
        background-color: #3a6ea5; /* Same as navbar background */
        width: 100%; /* Full width */
        padding: 10px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    }

    .nav-links.active {
        display: flex; /* Show links when active */
    }

    .nav-links a {
        padding: 10px 20px; /* Add padding for mobile links */
        text-align: center; /* Center-align links */
    }

    .nav-toggle {
        display: flex; /* Show hamburger icon on mobile */
    }
}