/***********************************************
         * Header
         ***********************************************/
.header-main {
    width: 100%; /* Ensure it spans the full width */
    position: relative;
    text-align: center; /* Center text horizontally */
    padding: 0.5rem 0; /* Reduce vertical padding */
}


.header-line {
    position: absolute;
    bottom: -10px; /* Ensure it stays close to the related header element */
    left: 50%; /* Move to the center horizontally */
    transform: translateX(-50%); /* Adjust to ensure it is truly centered */
    width: 80%; /* Set the width of the line (adjust as needed) */
    height: 4px; /* Thin line */
    background: linear-gradient(to right, #4d0eb3, #1a1a1a, #4d0eb3),
                linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    background-size: 400% 100%;
    animation: headerPulse 30s ease-in-out infinite; /* Keep your animation */
    z-index: 1; /* Ensure it appears above/unobstructed if necessary */
}



        @keyframes headerPulse {
          0% { background-position: 0 0; }
          50% { background-position: 100% 0; }
          100% { background-position: 0 0; }
        }

.header-container {
    display: flex;
    align-items: center; /* Vertically aligns children */
    justify-content: space-between; /* Keep space between logo and nav */
    max-width: 1200px;
    margin: 0 auto; /* Center align the container */
    padding: 0.5rem 1rem; /* Compact padding for a tighter layout */
    gap: 1rem; /* Slightly reduce the gap */
}


        /*********** Navigation *********/
        .nav {
            display: flex;
            flex-grow: 1;
            justify-content: center;
        }
.nav-logo {
    margin: 0; /* Remove unnecessary margins on the logo */
    padding: 0; /* Remove any extra padding */
    display: block;
    width: 70px; /* Slightly smaller logo */
    height: auto; /* Maintain the aspect ratio */
}