/* Header Styles */
header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    font-family: 'Fraunces', sans-serif;
    height: 150px;
    box-sizing: border-box;
    
    /* Sophisticated layered background - Override body background for header */
    background-color: #f6f9ff !important; /* Base color: Very light blue-tinted white */
    background-image: 
        /* Overlay gradient: Linear from top to bottom */
        linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.7) 0%, 
            rgba(255, 255, 255, 0.9) 100%),
        /* Primary radial gradient: Large blue glow at top-right */
        radial-gradient(ellipse 1200px 600px at 80% -10%, 
            rgba(27, 77, 228, 0.08) 0%, 
            transparent 60%),
        /* Secondary radial gradient: Smaller blue accent at bottom-left */
        radial-gradient(ellipse 800px 400px at 20% 120%, 
            rgba(27, 77, 228, 0.03) 0%, 
            transparent 50%),
        /* Grid pattern: Very fine repeating lines */
        linear-gradient(rgba(28, 45, 90, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 45, 90, 0.04) 1px, transparent 1px) !important;
    background-size: 
        100% 100%,  /* Overlay gradient */
        1200px 600px,  /* Primary radial gradient */
        800px 400px,   /* Secondary radial gradient */
        48px 48px,     /* Grid pattern horizontal */
        48px 48px !important;     /* Grid pattern vertical */
    background-position: 
        0 0,        /* Overlay gradient */
        80% -10%,   /* Primary radial gradient */
        20% 120%,   /* Secondary radial gradient */
        0 0,        /* Grid pattern horizontal */
        0 0 !important;        /* Grid pattern vertical */
    background-attachment: fixed !important;
}

.logo {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #333;
    text-decoration: none;
    display: inline-block;
    margin-top: 100px;
}


/* Mobile responsive adjustments for header */
@media (max-width: 768px) {
    header {
        padding: 10px 20px !important;
        height: 60px !important;
    }
    
    header img {
        height: 130px !important;
        width: 165px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {
    header {
        padding: 8px 15px !important;
        height: 50px !important;
    }
}