/* ===== Base / Layout ===== */
* { box-sizing: border-box; margin:0; padding:0; }
body {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    background: linear-gradient(to bottom, #f0f4ff, #ffffff);
    color: #222;
    line-height: 1.6;
    padding-top: 290px; /* space for hero + desktop menu */
}

/* ===== Hero Section ===== */
.hero {
    background: linear-gradient(135deg, #004aad, #003377);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px clamp(16px, 4vw, 40px);
    height: 220px;
    position: fixed;
    inset: 0 0 auto 0; 
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border-bottom: 5px solid #00275a;
}
.hero-left { flex: 0 0 auto; }
.hero-right { flex: 1 1 auto; min-width: 220px; }
.hero-right h1 { margin: 0 0 6px 0; font-size: clamp(1.5rem,2.5vw,2rem); letter-spacing: .5px; }
.hero-right p { margin:0; font-size: clamp(0.95rem,1.7vw,1.05rem); opacity:0.95; }
.profile-pic-large { width:150px; height:150px; object-fit:cover; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,0.4); }

/* ===== Top Navigation ===== */
.top-menu {
    position: fixed;
    top: 220px; 
    left: 0;
    width: 100%;
    background:#f8f8f8;
    border-top:1px solid #ddd;
    border-bottom:2px solid #ccc;
    text-align:center;
    z-index:99;
    padding:10px 0;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.top-menu ul { list-style:none; }
.top-menu li { display:inline-block; margin:0 18px; }
.top-menu a { color:#333; text-decoration:none; font-weight:700; font-size:1rem; padding:5px 8px; transition: color .2s ease, border-color .2s ease; }
.top-menu a.active, .top-menu a:hover { border-bottom:2px solid #333; }

/* ===== Hamburger Toggle ===== */
.menu-toggle {
    display: none;
    background:none;
    border:none;
    font-size:2rem;
    cursor:pointer;
    margin:0 16px;
    color:#333;
    z-index:101;
    padding:8px;
    transition: transform 0.3s ease;
}
.menu-toggle.open { transform: rotate(90deg); }

/* ===== Main Content ===== */
main { max-width:900px; margin:30px auto; padding:30px; background:#fff; border-radius:15px; box-shadow:0 6px 15px rgba(0,0,0,0.1); }
main section { background:#fff; border-radius:12px; padding:20px; margin-bottom:20px; box-shadow:0 3px 8px rgba(0,0,0,0.05); transition: transform .2s ease, box-shadow .2s ease; }
main section:hover { transform: translateY(-3px); box-shadow:0 6px 12px rgba(0,0,0,0.1); }
.highlight { background-color:#fff8dc; border-left:4px solid #ffc107; padding:10px; border-radius:6px; }
.important { border:2px solid #004aad; background-color:#eaf2ff; padding:15px; border-radius:10px; }

/* ===== Dream Job Section ===== */
#dream-job {
    border:3px solid #004aad;
    border-radius:16px;
    padding:28px;
    margin:30px 0;
    background:linear-gradient(145deg,#eaf3ff,#ffffff);
    box-shadow:0 8px 20px rgba(0,74,173,0.18);
    position:relative;
    overflow:hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#dream-job::before { content:""; position:absolute; top:-2px; left:-2px; right:-2px; height:6px; background:linear-gradient(to right,#66a6ff,#004aad); border-radius:16px 16px 0 0; }
#dream-job::after { content:""; position:absolute; width:180px; height:180px; right:-90px; bottom:-90px; background:radial-gradient(circle at center, rgba(0,74,173,0.15), rgba(0,74,173,0) 60%); pointer-events:none; }
#dream-job:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,74,173,0.28); border-color:#003377; }
#dream-job h2 { margin:0 0 12px 0; text-align:center; font-size:1.85rem; color:#004aad; letter-spacing:.3px; }
#dream-job.bg-image { background: linear-gradient(rgba(0,74,173,0.25), rgba(0,74,173,0.25)), url('DreamJobBG.png') center/cover no-repeat; color:#fff; }
#dream-job.bg-image h2 { color:#fff; }

/* ===== Footer ===== */
footer { text-align:center; padding:12px; background:#003377; color:#fff; font-size:0.9rem; margin-top:20px; }

/* ===== Mobile Styles ===== */
@media (max-width: 640px) {
    body { padding-top:240px; }
    .hero { flex-direction: column; height:auto; text-align:center; padding-block:16px 20px; }
    .top-menu { position: static; flex-direction: column; align-items: flex-start; padding:10px 16px; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
    .menu-toggle { display:block; margin-bottom:8px; align-self:flex-end; }
    .top-menu ul { display:none; flex-direction:column; width:100%; margin-top:0; }
    .top-menu ul.show { display:flex; }
    .top-menu li { display:block; margin:8px 0; }
    .top-menu a { display:block; padding:8px 0; font-size:1.1rem; }
}