/* Base styles */
.navbar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.navbar-toggle {
    display: none;
}

.navbar img {
    width: 60px;
    height: 60px;
    display: block; /* Center the image */
    margin: 0 auto; /* Centering the image horizontally */
}

.links {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Responsive styles */
.links a {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: white;
    text-decoration: none;
}

@media (max-width: 768px) {
    .links {
        display: none; /* Hide links by default */
        flex-direction: column; /* Stack links vertically */
        position: fixed; /* Use fixed positioning */
        top: 0; /* Position at the top of the screen */
        left: 0; /* Position at the left edge */
        width: 70vw;
        max-width: 360px; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        background-color: rgba(2, 40, 99, 0.9); /* Semi-transparent background */
        justify-content: center; /* Center links vertically */
        align-items: center; /* Center links horizontally */
        z-index: 1; /* Ensure links are above other content */
        transition: all 0.3s ease; /* Smooth transition */
    }

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

    .logo {
        top: 1px;
        position: absolute; /* Position logo in the center */ /* Space from the top */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust for the width of the logo */
    }

    .navbar-toggle {
        top: 15px;
        display: block;
        position: absolute; /* Position toggle on the left */
        left: 0; /* Space from the left */
        font-size: 1.3rem;
        color: white;
        cursor: pointer;
    }
}