:root{--navy:#0b1f3a;--blue:#1f5eff;--gold:#d6a84b;--ink:#132238;--muted:#667085;--soft:#f3f7fb;--border:#dfe7f0} body{background:radial-gradient(circle at 10% 0%,rgba(31,94,255,.08),transparent 30%),radial-gradient(circle at 90% 10%,rgba(214,168,75,.08),transparent 28%),#f7f9fc;color:var(--ink)} .topbar{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(14px);border-bottom:1px solid var(--border)!important;box-shadow:0 6px 24px rgba(11,31,58,.06)} .brand strong{color:var(--navy)!important}.brand span{color:#7a8494!important} nav a{color:var(--ink)!important;font-weight:700!important;transition:.2s ease} nav a:hover{color:var(--blue)!important} nav a.candidate-register-link{background:linear-gradient(135deg,var(--navy),var(--blue))!important;color:#fff!important;border:0!important;box-shadow:0 8px 22px rgba(31,94,255,.2)} nav a.candidate-login-link{background:#fff!important;color:var(--navy)!important;border:1px solid rgba(11,31,58,.22)!important} .hero{position:relative;overflow:hidden} .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.78),rgba(255,255,255,.42) 48%,rgba(11,31,58,.08));pointer-events:none} .hero .container{position:relative;z-index:2}.hero h1,.page-hero h1,.section h2{color:var(--navy)!important}.hero p,.page-hero p{color:#4d5a70!important} .hero-card{background:rgba(255,255,255,.9)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 25px 70px rgba(11,31,58,.18)!important;backdrop-filter:blur(14px)} .hero-card .stats div{background:linear-gradient(135deg,#f7f9fc,#eef4ff)!important;border:1px solid #e4eaf2} .btn{transition:.2s ease!important}.btn.primary{background:linear-gradient(135deg,var(--navy),var(--blue))!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(31,94,255,.18)} .btn.primary:hover,.btn.ghost:hover{transform:translateY(-2px)}.btn.ghost{background:#fff!important;color:var(--navy)!important;border:1px solid rgba(11,31,58,.22)!important} .section.soft{background:linear-gradient(135deg,#f0f5fb,#f8fafc 55%,#fff7e8)!important} .page-hero{background:radial-gradient(circle at 20% 20%,rgba(31,94,255,.12),transparent 30%),radial-gradient(circle at 85% 15%,rgba(214,168,75,.16),transparent 28%),linear-gradient(135deg,#edf4ff,#fff9ef)!important} .cards article,.project-grid>div,.info-box,.cta-box,.job,.vacancy-category-panel,.form,.contact-details,body .wrap .card{background:rgba(255,255,255,.96)!important;border:1px solid var(--border)!important;box-shadow:0 12px 32px rgba(11,31,58,.08)!important;border-radius:18px!important} .cards article,.project-grid>div,.job{transition:.25s ease!important}.cards article:hover,.project-grid>div:hover,.job:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(11,31,58,.12)!important} .cards article .icon{background:linear-gradient(135deg,var(--navy),var(--blue))!important;color:#fff!important;border-radius:10px} .category-filter-btn{background:#fff!important;border:1px solid #d7e0ec!important;color:var(--navy)!important} .category-filter-btn.active{background:linear-gradient(135deg,var(--navy),var(--blue))!important;color:#fff!important;border-color:transparent!important} .job-category-badge{background:#fff6df!important;border-color:#eed6a3!important;color:#90600d!important} input,select,textarea{background:#fbfcfe!important;border:1px solid #d7e0ec!important} input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--blue)!important;box-shadow:0 0 0 4px rgba(31,94,255,.1)!important} footer{background:radial-gradient(circle at 10% 0%,rgba(31,94,255,.2),transparent 35%),linear-gradient(135deg,#08172c,#102a4f)!important;color:#eaf1fb!important} footer p,footer a,.copyright{color:#c8d3e2!important}footer a:hover{color:#f0c978!important} body .wrap .btn{background:linear-gradient(135deg,var(--navy),var(--blue))!important;color:#fff!important;border:0!important} body .wrap .btn.alt{background:#fff!important;color:var(--navy)!important;border:1px solid rgba(11,31,58,.22)!important} .fee-box{background:linear-gradient(135deg,#fff9ed,#f6f9ff)!important;border:1px solid #ead9b7!important}.fee{color:#9d6811!important} @media(max-width:900px){.topbar{position:sticky;top:0;z-index:100}.hero:before{background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.72))}} /* ===== PREMIUM HERO HEADING ANIMATION ===== */ .animated-hero-title{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.02; overflow:visible; } .animated-hero-title .hero-line{ display:block; opacity:0; transform:translateY(30px); animation:heroReveal .8s ease forwards; } .animated-hero-title .hero-line-1{ animation-delay:.15s; } .animated-hero-title .hero-line-2{ animation-delay:.45s; } .animated-hero-title .hero-line-3{ animation-delay:.75s; color:#b77916; position:relative; } .animated-hero-title .hero-line-3::after{ content:""; position:absolute; left:0; bottom:-7px; width:0; height:4px; border-radius:20px; background:linear-gradient(90deg,#9b6510,#e9b94e,#ffd982); animation:goldLine 1.1s ease forwards; animation-delay:1.35s; } @keyframes heroReveal{ 0%{ opacity:0; transform:translateY(30px); filter:blur(5px); } 100%{ opacity:1; transform:translateY(0); filter:blur(0); } } @keyframes goldLine{ from{ width:0; opacity:0; } to{ width:100%; opacity:1; } } @media(max-width:600px){ .animated-hero-title .hero-line-3::after{ height:3px; bottom:-4px; } }