/* ==========================================================================
   NTR Vikasa Jobs — Full Design System
   ========================================================================== */
:root {
    --deep-navy: #0B2046;
    --navy-light: #153A7A;
    --navy-dark: #051024;
    --rich-gold: #FFD700;
    --gold-light: #FFE033;
    --emerald-green: #00A65A;
    --green-hover: #008D4C;
    --crimson-red: #DC3545;
    --teal-accent: #17A2B8;
    --white: #FFFFFF;
    --off-white: #F8F9FA;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-600: #6C757D;
    --gray-800: #343A40;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --font-primary: 'Inter', system-ui, sans-serif;
    --transition: 0.2s ease-in-out;
    --radius: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size: 16px; }
@media (min-width: 1024px) { html { font-size: 18px; } }
body { font-family:var(--font-primary); color:var(--gray-800); line-height:1.65; background:#fff; overflow-x:hidden; }
a { text-decoration:none; color:inherit; transition:var(--transition); }
ul { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:1536px; margin:0 auto; padding:0 1.5rem; width: 100%; }

/* Utilities */
.text-center { text-align:center; }
.text-navy { color:var(--deep-navy); }
.text-gold { color:var(--rich-gold); }
.text-white { color:var(--white); }
.text-gray { color:var(--gray-600); }
.bg-gray { background:var(--off-white); }
.bg-white { background:#fff; }
.mb-1 { margin-bottom:1rem; }
.mb-2 { margin-bottom:2rem; }
.mt-1 { margin-top:1rem; }
.mt-2 { margin-top:2rem; }
.highlight-gold-text { color:var(--rich-gold); font-weight:600; }
.section-title { font-size:2.1rem; font-weight:800; }
.section-sub { font-size:1.1rem; }

/* Buttons */
.btn { display:inline-block; padding:0.6rem 1.2rem; border-radius:5px; font-weight:600; text-align:center; cursor:pointer; transition:var(--transition); border:none; font-size:1rem; }
.btn-green { background:var(--emerald-green); color:#fff; }
.btn-green:hover { background:var(--green-hover); color:#fff; }

/* Tags */
.tag { font-size:0.82rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:999px; }
.tag-red { background:#fee2e2; color:#dc2626; }
.tag-blue { background:#e0f2fe; color:#0284c7; }
.tag-green { background:#dcfce3; color:#16a34a; }

/* ==========================================================================
   Top Nav Bar
   ========================================================================== */
.top-nav-bar { background:#125db3; color:#fff; font-size:0.95rem; font-weight:500; position:sticky; top:0; z-index:200; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.top-nav-bar .container { max-width: 100%; padding: 0 1.5rem; }
.top-nav-content { display:flex; justify-content:space-between; align-items:center; }
.nav-links-left, .nav-links-right { display:flex; align-items:stretch; }
.nav-links-left li a { display:block; padding:0.75rem 1rem; border-right:1px solid rgba(255,255,255,0.12); }
.nav-links-left li:first-child a { border-left:1px solid rgba(255,255,255,0.12); }
.nav-links-left li a:hover, .nav-links-left li a.active { background:rgba(255,255,255,0.12); }
.nav-links-right a { display:flex; align-items:center; gap:0.4rem; padding:0.75rem 1rem; border-left:1px solid rgba(255,255,255,0.12); }
.nav-links-right a:hover { background:rgba(255,255,255,0.12); }
.btn-register { background:var(--rich-gold); color:var(--deep-navy) !important; font-weight:700; }
.btn-register:hover { background:var(--gold-light); }
.btn-admin-link { color:rgba(255,255,255,0.75) !important; font-size:0.8rem; }

/* ==========================================================================
   Branding Header
   ========================================================================== */
.branding-header { background:#fff; padding:0.75rem 0; box-shadow:var(--shadow-sm); position:relative; z-index:10; border-bottom:3px solid var(--rich-gold); }
.branding-header .container { max-width: 100%; padding: 0 1.5rem; }
.branding-inner { display:flex; justify-content:space-between; align-items:center; }
.officials { display:flex; gap:1rem; }
.official-wrap { display:flex; flex-direction:column; align-items:center; gap:0.2rem; }
.official-img { width:120px; height:120px; border-radius:50%; border:2px solid var(--rich-gold); object-fit:cover; }
.official-label { font-size:0.85rem; font-weight:700; color:var(--gray-800); text-align:center; white-space:nowrap; }
.logo-center { display:flex; align-items:center; gap:0.75rem; }
.logo-icon { width:52px; height:52px; background:var(--deep-navy); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-text-block { display:flex; flex-direction:column; }
.logo-main { font-size:1.5rem; font-weight:900; color:var(--deep-navy); letter-spacing:0.5px; line-height:1.1; }
.logo-sub { font-size:0.85rem; color:var(--gray-600); font-weight:500; }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-bar-new { background:#fff; padding:0; border-bottom:2px solid var(--rich-gold); border-top:1px solid var(--gray-200); overflow:hidden; width: 100%; }
.marquee-inner { display:flex; align-items:center; width: 100%; }
.marquee-label { background:var(--deep-navy); color:var(--rich-gold); padding:0.45rem 1rem; font-size:0.9rem; font-weight:700; white-space:nowrap; flex-shrink:0; position:relative; z-index:2; }
.marquee-scroll-container { flex-grow:1; overflow:hidden; white-space:nowrap; display:flex; align-items:center; width: 100%; }
.marquee-content { display:inline-block; padding-left:100%; animation:marquee 25s linear infinite; font-size:1rem; white-space:nowrap; }
.marquee-content:hover { animation-play-state:paused; }
.marquee-cta { background:var(--rich-gold); color:var(--deep-navy); padding:0.45rem 1rem; font-size:0.9rem; font-weight:700; flex-shrink:0; white-space:nowrap; position:relative; z-index:2; text-decoration: none; }
.marquee-cta:hover { background:var(--gold-light); }
.btn-apply-marquee { background: var(--emerald-green); color: white; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; text-decoration: none; margin-left: 0.5rem; transition: var(--transition); }
.btn-apply-marquee:hover { background: var(--green-hover); }
.marquee-job-item { display: inline-flex; align-items: center; }
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-100%); } }

/* ==========================================================================
   Flash Messages
   ========================================================================== */
.flash-container { max-width:1280px; margin:0.75rem auto; padding:0 1.5rem; display:flex; flex-direction:column; gap:0.5rem; }
.flash { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1.25rem; border-radius:6px; font-size:0.9rem; font-weight:500; }
.flash-success { background:#d4edda; color:#155724; border-left:4px solid var(--emerald-green); }
.flash-danger { background:#f8d7da; color:#721c24; border-left:4px solid var(--crimson-red); }
.flash-info { background:#cce5ff; color:#004085; border-left:4px solid var(--teal-accent); }
.flash-close { background:none; border:none; cursor:pointer; font-size:1rem; color:inherit; opacity:0.6; padding:0 0.25rem; }
.flash-close:hover { opacity:1; }

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section { position:relative; padding:3.5rem 0; overflow:hidden; }
.hero-background-slider { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.hero-slide { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:opacity 1.5s ease-in-out; }
.hero-slide.active { opacity:1; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(rgba(11,32,70,0.78), rgba(11,32,70,0.88)); z-index:1; }
.hero-content-wrapper { position:relative; z-index:2; }
.hero-content { max-width:700px; }
.hero-badge { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.4); color:var(--rich-gold); padding:0.4rem 1.1rem; border-radius:999px; font-size:0.95rem; font-weight:600; margin-bottom:1.5rem; }
.hero-title { font-size:3.5rem; font-weight:900; color:#fff; line-height:1.1; margin-bottom:1.25rem; }
.hero-highlight { color:var(--rich-gold); display:block; }
.hero-desc { color:rgba(255,255,255,0.85); font-size:1.25rem; margin-bottom:2rem; max-width:580px; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.btn-hero { display:inline-flex; align-items:center; gap:0.5rem; padding:0.85rem 1.75rem; border-radius:6px; font-size:1.05rem; font-weight:700; transition:var(--transition); border:none; cursor:pointer; }
.btn-hero-primary { background:var(--rich-gold); color:var(--deep-navy); }
.btn-hero-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,215,0,0.3); }
.btn-hero-secondary { background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.4); backdrop-filter:blur(4px); }
.btn-hero-secondary:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }
.hero-stats { display:flex; align-items:center; gap:2rem; }
.hero-stat strong { display:block; font-size:1.75rem; font-weight:800; color:var(--rich-gold); line-height:1; }
.hero-stat span { display:block; font-size:0.9rem; color:rgba(255,255,255,0.8); font-weight:500; margin-top:2px; }
.hero-stat-divider { width:1px; height:36px; background:rgba(255,255,255,0.2); }

/* ==========================================================================
   Industry Filter Bar
   ========================================================================== */
.industry-bar { background:var(--deep-navy); padding:0.75rem 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.industry-pills { display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.industry-pills::-webkit-scrollbar { display:none; }
.industry-pill { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 0.9rem; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.12); border-radius:999px; font-size:0.8rem; font-weight:500; white-space:nowrap; transition:var(--transition); flex-shrink:0; }
.industry-pill svg { width:14px; height:14px; flex-shrink:0; }
.industry-pill:hover, .industry-pill.active { background:var(--rich-gold); color:var(--deep-navy); border-color:var(--rich-gold); font-weight:700; }

/* ==========================================================================
   Categories Section
   ========================================================================== */
.categories-section-new { padding:2rem 0; }
.categories-layout { display:grid; grid-template-columns:1fr 260px; gap:2.5rem; align-items:start; }
.director-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border-top:4px solid var(--rich-gold); padding:1.75rem 1.25rem; text-align:center; }
.director-img { width:150px; height:150px; border-radius:50%; border:4px solid var(--gray-200); object-fit:cover; margin:0 auto 1rem; box-shadow:var(--shadow); }
.director-name { font-size:1.2rem; font-weight:700; color:var(--deep-navy); margin-bottom:0.2rem; }
.director-role { font-size:1rem; font-weight:600; color:var(--teal-accent); margin-bottom:0.15rem; }
.director-dept { font-size:0.9rem; color:var(--gray-600); margin-bottom:1rem; }
.director-quote { background:var(--off-white); border-left:3px solid var(--rich-gold); border-radius:4px; padding:0.75rem; }
.director-quote span { font-size:0.9rem; font-style:italic; color:var(--gray-800); }
.categories-circle-grid { display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1.5rem; }
.category-circle-item { display:flex; flex-direction:column; align-items:center; width:115px; transition:var(--transition); overflow:hidden; }
.circle-icon { width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:0.6rem; transition:var(--transition); flex-shrink:0;}
.circle-icon svg { width:46px; height:46px; }
.category-circle-item:hover .circle-icon { transform:scale(1.08); box-shadow:var(--shadow); }

.highlight-gold-text { color: red !important; }
.cat-title { font-size:0.9rem; font-weight:600; text-align:center; color:var(--deep-navy); line-height:1.2; margin-bottom:0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; }
.cat-count { font-size:0.82rem; color:var(--gray-600); }

/* ==========================================================================
   Jobs & Bulletin Split
   ========================================================================== */
.split-content-section { padding:2rem 0; background:var(--off-white); }
.split-grid { display:grid; grid-template-columns:2fr 1fr; gap:2rem; }

/* Job Tabs */
.jobs-column { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--gray-200); overflow:hidden; }
.jobs-header-row { display:flex; border-bottom:2px solid var(--gray-200); }
.job-tab { flex:1; padding:1rem 1.25rem; background:none; border:none; font-size:1rem; font-weight:700; color:var(--gray-600); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.5rem; transition:var(--transition); border-bottom:3px solid transparent; margin-bottom:-2px; }
.job-tab:hover { color:var(--deep-navy); background:var(--off-white); }
.job-tab.active { color:var(--rich-gold); border-bottom-color:var(--rich-gold); background:#fff; }
.jobs-list-container { padding:1.25rem; display:flex; flex-direction:column; gap:0.75rem; min-height:200px; }
.job-list-card { border:1px solid var(--gray-200); border-radius:6px; padding:1rem 1.25rem; transition:var(--transition); }
.job-list-card:hover { border-color:var(--rich-gold); box-shadow:var(--shadow-sm); }
.job-list-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.4rem; }
.job-list-header h4 { font-size:1.1rem; color:var(--navy-light); font-weight:700; }
.job-list-header .company { font-size:0.95rem; color:var(--gray-600); margin-top:0.15rem; }
.job-list-meta { display:flex; gap:1rem; flex-wrap:wrap; color:var(--gray-600); font-size:0.9rem; margin-bottom:0.5rem; }
.job-list-meta .location { display:flex; align-items:center; gap:0.2rem; }
.industry-badge { background:var(--gray-100); color:var(--deep-navy); padding:0.15rem 0.6rem; border-radius:999px; font-size:0.82rem; font-weight:600; }
.salary { color:var(--emerald-green); font-weight:600; }
.job-list-footer { border-top:1px dashed var(--gray-200); padding-top:0.5rem; display:flex; justify-content:space-between; font-size:0.88rem; }
.posted-date { color:var(--gray-600); }
.job-list-footer span:first-child { color:var(--emerald-green); font-weight:600; }
.view-all-link { color:var(--navy-light); font-weight:600; font-size:1rem; text-decoration:underline; }
.no-jobs-msg { text-align:center; color:var(--gray-600); padding:2rem; font-size:1rem; }

/* Bulletin */
.bulletin-column { position:sticky; top:80px; }
.bulletin-card { border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.bulletin-header { background:var(--deep-navy); padding:1rem 1.25rem; }
.bulletin-header h3 { font-size:1.1rem; color:#fff; font-weight:700; }
.bulletin-tabs { display:flex; border-bottom:1px solid var(--gray-200); }
.b-tab { flex:1; padding:0.75rem; background:var(--off-white); border:none; font-size:0.95rem; font-weight:600; color:var(--gray-600); cursor:pointer; transition:var(--transition); }
.b-tab.active { background:#fff; color:var(--deep-navy); border-bottom:2px solid var(--deep-navy); }
.bulletin-content { padding:1rem; display:flex; flex-direction:column; gap:0.75rem; max-height:420px; overflow-y:auto; }
.b-item { border-left:3px solid var(--teal-accent); padding-left:0.75rem; }
.b-item-archived { border-left-color:var(--gray-300); opacity:0.7; }
.b-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.2rem; }
.b-date { font-size:0.82rem; font-weight:700; color:var(--navy-light); }
.b-industry-tag { font-size:0.75rem; font-weight:600; background:var(--gray-100); color:var(--deep-navy); padding:0.1rem 0.5rem; border-radius:999px; }
.b-title { font-size:0.95rem; font-weight:700; color:var(--deep-navy); display:block; margin-bottom:0.2rem; }
.b-item p { font-size:0.9rem; color:var(--gray-800); line-height:1.55; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-section { padding:2.5rem 0; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1.5rem; margin-top:2rem; }
.gallery-img { width:100%; height:220px; object-fit:cover; border-radius:12px; transition:all 0.4s ease; cursor:pointer; box-shadow:var(--shadow-sm); }
.gallery-img:hover { transform:scale(1.02) translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.15); z-index:2; position:relative; }

/* Lightbox Modal */
.lightbox-modal { display:none; position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; background-color:rgba(11, 32, 70, 0.95); align-items:center; justify-content:center; padding:2rem; backdrop-filter: blur(8px); }
.lightbox-modal.active { display:flex; animation: fadeIn 0.3s ease; }
.lightbox-content { max-width:90vw; max-height:85vh; border-radius:8px; box-shadow:0 15px 30px rgba(0,0,0,0.5); object-fit:contain; transform:scale(0.95); transition:transform 0.3s ease; }
.lightbox-modal.active .lightbox-content { transform:scale(1); }
.lightbox-close { position:absolute; top:2rem; right:2rem; color:#fff; font-size:2.5rem; font-weight:bold; cursor:pointer; background:none; border:none; line-height:1; opacity:0.8; transition:0.2s; }
.lightbox-close:hover { opacity:1; transform:scale(1.1); color:var(--rich-gold); }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ==========================================================================
   Milestones
   ========================================================================== */
.milestones-section { background:#0d2b5e; padding:3.5rem 0; border-top:4px solid var(--rich-gold); }
.milestones-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:2rem; margin-top:1.5rem; }
.milestone-item { display:flex; flex-direction:column; align-items:center; }
.m-number { font-size:2.25rem; font-weight:800; line-height:1.1; margin-bottom:0.4rem; }
.m-label { font-size:0.85rem; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; opacity:0.85; }

/* ==========================================================================
   Features
   ========================================================================== */
.features-section { padding:2.5rem 0; }
.features-grid { display:grid; grid-template-columns:1fr 2fr; gap:2rem; }
.feature-box { background:#fff; border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm); border:1px solid var(--gray-200); display:flex; flex-direction:column; justify-content:center; }
.employer-icon { width:64px; height:64px; background:var(--deep-navy); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.employer-cta h3 { font-size:1.4rem; color:var(--navy-light); font-weight:800; margin-bottom:0.5rem; }
.employer-cta p { color:var(--gray-600); font-size:0.9rem; margin-bottom:1rem; }
.emp-stats { display:flex; gap:2.5rem; padding-top:1.25rem; border-top:1px solid var(--gray-200); margin-top:auto; }
.emp-stats h4 { font-size:1.25rem; font-weight:800; margin-bottom:0.2rem; }
.emp-stats span { font-size:0.8rem; color:var(--gray-600); }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem 1rem; margin-top:2rem; }
.why-item { text-align:center; padding: 0.5rem; }
.why-item svg { color:var(--teal-accent); margin-bottom:0.75rem; width: 32px; height: 32px; }
.why-item span { display:block; font-size:0.85rem; font-weight:600; color:var(--deep-navy); line-height:1.4; }

/* ==========================================================================
   Partners & Testimonials
   ========================================================================== */
.partners-section { padding:2rem 0; }
.partners-logo-grid { display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; align-items:center; margin-top:1.5rem; }
.partners-logo-grid img { max-height:38px; filter:none; opacity:1; transition:var(--transition); }
.partners-logo-grid img:hover { transform: scale(1.05); }
.testimonials-section { padding:2.5rem 0; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.5rem; }
.testimonial-card { background:#fff; padding:1.5rem; border-radius:var(--radius); border-top:3px solid var(--deep-navy); box-shadow:var(--shadow-sm); position:relative; }
.quote-icon { font-size:3rem; font-family:serif; position:absolute; top:0; right:1rem; opacity:0.2; }
.testimonial-text { font-size:0.9rem; font-style:italic; color:var(--gray-800); margin-bottom:1.25rem; position:relative; z-index:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.candidate-info { display:flex; align-items:center; gap:0.75rem; border-top:1px solid var(--gray-200); padding-top:1rem; }
.candidate-img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.candidate-info h4 { font-size:0.9rem; margin-bottom:0.1rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.main-footer { background:var(--deep-navy); color:#fff; padding-top:4rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:2rem; margin-bottom:3rem; }
.footer-heading { font-size:1rem; font-weight:700; margin-bottom:1.25rem; color:var(--rich-gold); }
.footer-desc { font-size:0.875rem; opacity:0.85; line-height:1.6; }
.social-links a { color:#fff; margin-right:1rem; opacity:0.7; }
.social-links a:hover { color:var(--rich-gold); opacity:1; }
.footer-links li { margin-bottom:0.6rem; }
.footer-links a { font-size:0.875rem; opacity:0.8; }
.footer-links a:hover { opacity:1; color:var(--rich-gold); padding-left:5px; }
.footer-contact li { display:flex; align-items:flex-start; gap:0.6rem; margin-bottom:0.9rem; font-size:0.875rem; opacity:0.85; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0; font-size:0.85rem; opacity:0.8; }

/* ==========================================================================
   Jobs Page
   ========================================================================== */
.jobs-page-header { background:var(--deep-navy); padding:2.5rem 0; }
.jobs-page-header h1 { color:#fff; font-size:2rem; font-weight:800; }
.jobs-page-header p { color:rgba(255,255,255,0.75); margin-top:0.4rem; }
.jobs-page-body { padding:2.5rem 0; background:var(--off-white); min-height:60vh; }
.jobs-page-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem; }
.job-card { background:#fff; border-radius:var(--radius); border:1px solid var(--gray-200); padding:1.25rem; box-shadow:var(--shadow-sm); transition:var(--transition); }
.job-card:hover { border-color:var(--rich-gold); box-shadow:var(--shadow); transform:translateY(-2px); }
.job-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.75rem; }
.job-card-title { font-size:1rem; font-weight:700; color:var(--navy-light); margin-bottom:0.15rem; }
.job-card-company { font-size:0.85rem; color:var(--gray-600); }
.job-card-meta { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.75rem; }
.job-card-meta span { font-size:0.78rem; color:var(--gray-600); display:flex; align-items:center; gap:0.2rem; }
.job-card-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--gray-200); padding-top:0.75rem; font-size:0.78rem; }
.no-results { text-align:center; padding:4rem 2rem; color:var(--gray-600); }
.no-results h3 { font-size:1.25rem; margin-bottom:0.5rem; color:var(--deep-navy); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px) {
    .features-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .jobs-page-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
    .split-grid { grid-template-columns:1fr; }
    .categories-layout { grid-template-columns:1fr; }
    .director-panel { display:none; }
}
@media (max-width:768px) {
    .top-nav-content { flex-direction: column; }
    .nav-links-left { display:flex; overflow-x:auto; white-space:nowrap; width:100%; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:0.25rem; }
    .nav-links-left::-webkit-scrollbar { display:none; }
    .nav-links-right { width: 100%; justify-content: space-around; padding-top: 0.25rem;}
    .hero-stats { gap:1rem; }
    .why-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr; }
    .jobs-page-grid { grid-template-columns:1fr; }
    .kpi-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .hero-actions { flex-direction:column; }
    .hero-stats { flex-direction:column; gap:0.75rem; }
    .hero-stat-divider { display:none; }
}

/* Job Alert Nav Button */
.btn-job-alert {
    display:inline-flex; align-items:center; gap:0.35rem;
    background:var(--rich-gold); color:var(--deep-navy);
    padding:0.4rem 0.85rem; border-radius:5px; font-weight:700;
    font-size:0.8rem; transition:var(--transition); white-space:nowrap;
    border: none; text-decoration: none; cursor: pointer;
}
.btn-job-alert:hover { background:var(--gold-light); transform:translateY(-1px); }
.marquee-job-alert { margin-left: auto; border-radius: 0; padding: 0.45rem 1rem; font-size: 0.9rem; height: 100%; }

/* Video Gallery Section */
.video-gallery-section { padding:3.5rem 0; background:var(--gray-100); }
.video-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-top:1.5rem; }
.video-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.video-embed-wrap { position:relative; padding-top:56.25%; background:#000; }
.video-embed-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.video-title { padding:0.75rem 1rem; font-weight:600; font-size:0.875rem; color:var(--deep-navy); text-align:left; }

/* Google Maps Embed */
.maps-embed-wrap { margin-top:1rem; border-radius:8px; overflow:hidden; }
.maps-embed-wrap iframe { width:100%; height:200px; border:none; display:block; }

/* Admin badge-info */
.badge-info { background:#cce5ff; color:#004085; }

@media (max-width:768px) {
    .video-grid { grid-template-columns:1fr; }
}
@media (max-width:1024px) {
    .video-grid { grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   Floating Help Desk
   ========================================================================== */
.floating-help-desk {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    transform: translateY(-50%);
}
.help-desk-wrapper {
    position: relative;
    display: flex;
    transform: translateX(-100%);
    transition: transform 0.4s ease-out;
}
.floating-help-desk.active .help-desk-wrapper {
    transform: translateX(0);
}
.help-desk-content {
    background: #fff;
    padding: 1.5rem 1.8rem 1.5rem 1.5rem;
    border: 1px solid var(--gray-300);
    border-left: none;
    min-width: 250px;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.15);
}
.help-desk-title {
    color: #E22D2D;
    font-size: 1.15rem;
    font-weight: 900;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.help-desk-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    color: var(--navy-dark);
    font-size: 0.95rem;
    font-weight: 600;
    font-style: italic;
}
.help-desk-item:last-child {
    margin-bottom: 0;
}
.help-desk-item svg {
    color: var(--gray-800);
    flex-shrink: 0;
}
.help-desk-tab {
    position: absolute;
    right: -42px;
    top: -1px;
    background: #174E7E; 
    color: #fff;
    width: 42px;
    padding: 1rem 0;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.25;
    border: 1px solid #174E7E;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* ========== Custom Carousels ========== */
.carousel-wrapper { position: relative; width: 100%; margin-top: 1.5rem; }
.carousel-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--deep-navy); color: #fff;
    border: none; font-size: 1.25rem; font-weight: bold;
    cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: 0.2s ease;
}
.carousel-nav-btn:hover { background: var(--rich-gold); color: var(--deep-navy); }
.carousel-nav-btn.left { left: -20px; }
.carousel-nav-btn.right { right: -20px; }

.gallery-carousel, .video-carousel {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 320px;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 2rem;
    scrollbar-width: none; /* Firefox */
}
.gallery-carousel::-webkit-scrollbar, .video-carousel::-webkit-scrollbar { display: none; }
.gallery-carousel > *, .video-carousel > * { scroll-snap-align: start; }

@media(max-width: 768px) {
    .gallery-carousel, .video-carousel {
        grid-template-rows: 1fr;
        grid-auto-columns: 280px;
    }
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL
   ========================================================================== */

/* --- Branding Header on Mobile --- */
@media (max-width: 768px) {
    .branding-header { padding: 0.5rem 0; }
    .branding-inner { flex-direction: column; gap: 0.5rem; align-items: center; }
    .officials { gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
    .official-img { width: 60px; height: 60px; }
    .official-label { font-size: 0.65rem; max-width: 65px; white-space: normal; text-align: center; }
    .logo-center { justify-content: center; }
    .logo-main { font-size: 1.1rem; }
    .logo-sub { font-size: 0.75rem; }
    .logo-icon img { max-height: 40px !important; }
}

/* --- Top Nav Bar on Mobile --- */
@media (max-width: 768px) {
    .top-nav-bar { font-size: 0.78rem; }
    .nav-links-left li a { padding: 0.5rem 0.6rem; font-size: 0.78rem; }
    .nav-links-right a { padding: 0.5rem 0.6rem; font-size: 0.78rem; }
    .btn-register { padding: 0.4rem 0.6rem !important; font-size: 0.78rem; }
    .btn-admin-link { display: none; }
}

/* --- Hero Section on Mobile --- */
@media (max-width: 768px) {
    .hero-section { padding: 2rem 0; }
    .hero-title { font-size: 1.9rem; }
    .hero-desc { font-size: 1rem; }
    .hero-badge { font-size: 0.8rem; padding: 0.3rem 0.8rem; }
    .hero-stat strong { font-size: 1.3rem; }
    .hero-stat span { font-size: 0.8rem; }
}

/* --- Industry Bar on Mobile --- */
@media (max-width: 768px) {
    .industry-pill { font-size: 0.72rem; padding: 0.3rem 0.65rem; }
}

/* --- Section layout on Mobile --- */
@media (max-width: 768px) {
    .section-title { font-size: 1.5rem; }
    .section-sub { font-size: 0.95rem; }
    .categories-circle-grid { gap: 0.75rem; justify-content: center; }
    .category-circle-item { width: 90px; }
    .circle-icon { width: 80px; height: 80px; }
    .circle-icon svg { width: 34px; height: 34px; }
    .cat-title { font-size: 0.75rem; }
}

/* --- Job cards on Mobile --- */
@media (max-width: 768px) {
    .jobs-list-container { padding: 0.75rem; }
    .job-list-card { padding: 0.75rem; }
    .job-list-header h4 { font-size: 0.95rem; }
    .job-list-meta { gap: 0.5rem; font-size: 0.8rem; }
    .job-list-footer { font-size: 0.8rem; flex-wrap: wrap; gap: 0.25rem; }
    .bulletin-content { max-height: 300px; }
}

/* --- Gallery Carousel on Mobile --- */
@media (max-width: 768px) {
    .carousel-wrapper { overflow: hidden; }
    .carousel-nav-btn { width: 36px; height: 36px; font-size: 1rem; }
    .carousel-nav-btn.left { left: 0; }
    .carousel-nav-btn.right { right: 0; }
    .gallery-carousel, .video-carousel { grid-auto-columns: calc(100vw - 80px); gap: 0.75rem; padding-bottom: 1rem; }
    .gallery-img { height: 180px; }
}

/* --- Milestones on Mobile --- */
@media (max-width: 768px) {
    .milestones-section { padding: 2rem 0; }
    .milestones-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .m-number { font-size: 1.75rem; }
}

/* --- Testimonials on Mobile --- */
@media (max-width: 768px) {
    .testimonials-grid { grid-template-columns: 1fr; }
    .testimonial-card { padding: 1rem; }
}

/* --- Partners on Mobile --- */
@media (max-width: 768px) {
    .partners-logo-grid { gap: 1.5rem; }
    .partners-logo-grid img { max-height: 28px; }
}

/* --- Footer on Mobile --- */
@media (max-width: 768px) {
    .main-footer { padding-top: 2.5rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
    .footer-bottom { font-size: 0.8rem; text-align: center; line-height: 1.6; }
}

/* --- Bulletin on Mobile --- */
@media (max-width: 900px) {
    .split-grid { grid-template-columns: 1fr; }
    .bulletin-column { position: relative; top: 0; }
}

/* --- Jobs Page on Mobile --- */
@media (max-width: 640px) {
    .jobs-page-grid { grid-template-columns: 1fr; }
    .job-card { padding: 1rem; }
    .job-card-title { font-size: 0.9rem; }
}

/* --- Features on Mobile --- */
@media (max-width: 768px) {
    .features-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .emp-stats { gap: 1.5rem; }
}

/* --- Floating Help Desk on Mobile --- */
@media (max-width: 480px) {
    .help-desk-content { min-width: 200px; padding: 1rem; }
    .help-desk-title { font-size: 1rem; }
    .help-desk-item { font-size: 0.85rem; }
}

/* --- General small screen tweaks --- */
@media (max-width: 480px) {
    .container { padding: 0 0.75rem; }
    .btn-hero { padding: 0.7rem 1.2rem; font-size: 0.95rem; }
    .hero-actions { flex-direction: column; gap: 0.75rem; }
    .hero-stats { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .hero-stat-divider { display: none; }
    .official-img { width: 50px; height: 50px; }
    .official-label { font-size: 0.6rem; }
}

/* Prevent horizontal scroll on all devices */
html, body { max-width: 100%; overflow-x: hidden; }