/* Header and navigation */
header {
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 198, 255, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo { display: flex; align-items: center; }
.logo h1 { font-size: 1.8rem; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; letter-spacing: 1px; }

/* Logo image styling (keeps original sizing/placement) */
.logo a { display:flex; align-items:center; gap:10px; text-decoration: none; }

/* Logo wrapper and placeholder to reserve space and render the image with full quality */
.logo-wrapper { width: 220px; height: 48px; display: flex; align-items: center; }
.logo-placeholder { width: 100%; height: 300%; background-image: url('../Images/iYugamLogo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; display: block; }

/* Keep an inline image available for assistive tech if needed (hidden visually) */
.logo-img { display: none; }

@media (max-width: 900px) {
    .logo-wrapper { width: 180px; height: 40px; }
    .logo-placeholder { background-size: contain; }
}

@media (max-width: 720px) {
    .logo-wrapper { width: 150px; height: 34px; }
}

/* Reserve header height so adjacent elements remain stable when logo changes */
.header-container { min-height: 164px; }

.nav-menu { display: flex; list-style: none; }
.nav-menu li { margin-left: 30px; }
.nav-menu a { text-decoration: none; color: var(--light); font-weight: 500; transition: color 0.3s; position: relative; padding: 5px 0; }
.nav-menu a:hover { color: var(--digital-blue); }
.nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.3s; }
.nav-menu a:hover::after { width: 100%; }

.mobile-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: var(--light); }