/* Header container styling */
.header-container {
    width: 100%;
    background-color: #6200ea; /* Primary theme color */
    color: white;
    padding: 15px 0; /* Adjust the padding as needed */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: Adds depth */
}

/* Logo and navigation styling */
.logo {
    float: left; /* Aligns logo to the left */
    padding-left: 20px; /* Space from the left edge */
}

.navigation {
    float: right; /* Aligns navigation to the right */
    padding-right: 20px; /* Space from the right edge */
    display: flex;
    align-items: center;
}

/* Navigation link styling */
.nav-link {
    margin-left: 20px; /* Spacing between links */
    text-decoration: none; /* Removes underline */
    color: white; /* Text color */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.nav-link:hover {
    color: #9b7ede; /* Lighter purple on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    .logo, .navigation {
        float: none;
        padding: 0;
    }

    .navigation {
        flex-wrap: wrap; /* Allows navigation items to wrap */
    }

    .nav-link {
        margin: 5px 10px; /* Adjusts spacing for a compact layout */
    }
}

/* Clears floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
    .navigation {
        display: none; /* Optional: Hide navigation on very small screens */
    }

    /* Show a menu icon or similar solution for toggling navigation on small screens */
}