@import url('https://fonts.googleapis.com/css?family=Inter:wght@400;600;900&display=swap');

:root {
  --primary: #1976d2;
  --primary-dark: #133e7c;
  --secondary: #ff7043;
  --surface: #ffffffcc;
  --bg: #f6f8fb;
  --text: #213456;
  --radius: 20px;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  transition: background .4s, color .3s;
}

/* --- Navbar --- */
.navbar {
  background: var(--primary-dark);
  color: #fff;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 4px 18px 0 rgba(25, 61, 124, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.2em 0 1.5em;
  height: 74px;
  position: relative;
  z-index: 10;
}
.navbar strong { font-size: 2em; font-weight: 900; letter-spacing: 1px; }
.nav-links {
  display: flex;
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 12px;
  transition: background .2s;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--secondary);
  color: #fff;
}
#themeToggle { background: none; border: none; font-size:1.5em; color:#fff; cursor: pointer; margin-left: 15px;}
#mobileMenu { display: none; background: none; border: none; color:#fff; font-size: 2em; margin-left: 12px;}

/* --- HERO SECTION --- */
.hero-banner {
  text-align: center;
  padding: 4.2em 0 8.5em 0;
  background: linear-gradient(120deg, #1976d2 62%, #57b7fa 100%);
  color: #23344e;
  position: relative;
  overflow: hidden;
}
.hero-banner h1 {
  font-size: 2.8em;
  font-weight: 900;
  color: #23344e;
  margin: 0 0 10px 0;
  letter-spacing: 1px;
}
.hero-banner p {
  font-size: 1.2em;
  margin: 10px 0 38px 0;
  color: #1d2b3a;
  font-weight: 500;
}
.hero-search {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: 0 8px 34px 0 rgba(19,62,124,0.14);
  background: #fff;
  border-radius: 18px;
  padding: 7px;
  z-index: 2;
  position: relative;
}
.hero-search input[type="text"] {
  border: none;
  padding: 16px 18px;
  border-radius: 12px 0 0 12px;
  font-size: 1.14em;
  width: 70%;
  background: transparent;
  color: #213456;
  outline: none;
}
.hero-search button {
  border: none;
  border-radius: 0 12px 12px 0;
  padding: 16px 34px;
  background: #1976d2;
  color: #fff;
  font-weight: 700;
  font-size: 1.12em;
  cursor: pointer;
  transition: background .22s;
}
.hero-search button:hover {
  background: #1256a2;
}

/* --- SVG/Wave --- */
.hero-wave-svg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
}
.state-bar-bg {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 4px 34px 0 rgba(19,62,124,0.08);
  border-radius: 0 0 40px 40px;
  max-width: 1180px;
  margin: -45px auto 36px auto;
  padding: 20px 10px 12px 10px;
  position: relative;
  z-index: 5;
}

/* --- Chip Buttons Bar --- */
.top-btn-bar, .state-btn-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 0 auto 6px auto;
  max-width: 1100px;
  padding: 6px 0 0 0;
}
.cat-btn, .state-btn {
  display: inline-block;
  padding: 10px 22px;
  background: rgba(255,255,255,0.9);
  color: #1366cc;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.04em;
  box-shadow: 0 2px 10px #1976d223;
  border: 2px solid #e6effa;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  transition: background 0.17s, color 0.2s, border .17s, box-shadow .17s;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.cat-btn:hover, .state-btn:hover, .cat-btn.active, .state-btn.active {
  background: linear-gradient(90deg, #1976d2 70%, #57b7fa 100%);
  color: #fff;
  border: 2px solid #1976d2;
  box-shadow: 0 4px 18px #1976d235;
  text-decoration: none;
}
.cat-btn.special-btn {
  background: linear-gradient(90deg, #ff7043 70%, #ffbe76 100%);
  color: #fff;
  border: 2px solid #ff7043;
}
.cat-btn.special-btn:hover {
  background: linear-gradient(90deg, #1976d2 80%, #57b7fa 120%);
  color: #fff;
  border: 2px solid #1976d2;
}
/* Responsive: mobile scroll bar if needed */
.top-btn-bar, .state-btn-bar {
  overflow-x: auto;
  scrollbar-width: thin;
}
.top-btn-bar::-webkit-scrollbar, .state-btn-bar::-webkit-scrollbar {
  height: 7px;
  background: #e6effa;
}
.top-btn-bar::-webkit-scrollbar-thumb, .state-btn-bar::-webkit-scrollbar-thumb {
  background: #b7ccf9;
  border-radius: 4px;
}

/* --- Main Content + Sidebar --- */
main {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  max-width: 1200px;
  margin: 46px auto;
  padding: 0 18px;
}
@media (max-width: 900px) {
  main { flex-direction: column; }
  .sidebar { margin-top: 0; }
  .filter-form { flex-direction: column; gap:0.6em; }
}
@media (max-width: 700px) {
  .top-btn-bar, .state-btn-bar { padding: 8px 0 0 0; gap: 7px; }
  .cat-btn, .state-btn { font-size: .97em; padding: 8px 12px; }
}
@media (max-width: 600px) {
  .navbar { border-radius: 0 0 14px 14px; flex-direction: column; height: auto; padding: 0.5em 0;}
  .nav-links { flex-direction: column; gap: 1em; }
  #mobileMenu { display: block; }
  main { padding: 0 6px;}
  .card, .sidebar, .filter-form { padding: 1em; }
}

/* --- Cards --- */
.card {
  background: #fff;
  color: #213456;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px #0001;
  margin-bottom: 2.5em;
  padding: 1.8em 2em;
  transition: box-shadow 0.32s, transform 0.22s;
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.card:hover { box-shadow: 0 8px 32px 0 rgba(31,38,135,0.14); transform: translateY(-6px) scale(1.015);}
.card .badge {
  display: inline-block;
  background: var(--secondary);
  color: #fff;
  border-radius: 999px;
  font-size: 0.95em;
  padding: 5px 16px;
  margin-bottom: 8px;
  font-weight: 600;
}
.job-card h3, .result-card h4, .admit-card h4 {
  margin-top: 0;
  font-size: 1.32em;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.card a, .card a:visited {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}
.card a:hover { color: var(--secondary); text-decoration: underline;}
/* --- Fade-in effect --- */
body { opacity:0; transition:opacity 0.6s; }
body.loaded { opacity:1; }


.section-heading {
  background-color: #337ab7;
  color: white;
  font-weight: bold;
  font-size: 1.6em;
  text-align: center;
  padding: 12px 20px;
  border: 1px solid #000;
  margin-bottom: 20px;
}
h2 {
  width: 100%;
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 12px 20px;
  background: linear-gradient(to right, #f5faff, #e1ecff);
  border-left: 6px solid #1976d2;
  border-radius: 8px;
  color: #1a2540;
  margin: 30px 0 20px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

h1 {
  background: linear-gradient(to right, #2196f3, #00bcd4); /* beautiful blue gradient */
  color: #fff;
  width: 100%;
  display: inline-block;
  padding: 0.6em 1em;
  border-radius: 12px;
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
}