/* Navigation - Fixed & Organized */
nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 5%; 
    background: #ffffff; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 1px solid #eaeaea; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.logo-container { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    text-decoration: none;
}

/* 🚨 THIS FIXES THE MASSIVE LOGO 🚨 */
.logo-container img { 
    max-width: 60px; /* Forces width to be small */
    height: 60px;    /* Forces height to match */
    object-fit: contain; /* Ensures the logo doesn't stretch */
    border-radius: 50%; /* Optional: Makes the logo perfectly round if it has a background */
}

.brand-text { 
    font-size: 22px; 
    font-weight: 700; 
    color: #362d85; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

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

.nav-links a {
    font-size: 14px; 
    font-weight: 500; 
    text-transform: uppercase; 
    color: #333;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.nav-links a:hover { 
    color: #362d85; 
}

/* Mobile Fixes for Disorganization */
@media (max-width: 850px) {
    nav {
        flex-direction: column;
        padding: 15px 20px;
        gap: 15px;
    }
    .logo-container img {
        max-width: 50px;
        height: 50px;
    }
    .brand-text {
        font-size: 20px;
    }
    .nav-links { 
        gap: 15px; 
        flex-wrap: wrap; /* Prevents links from breaking off screen */
        justify-content: center;
    }
}