/* ======================================================
   GULFJOBSINDIA — FINAL RESPONSIVE THEME
   ====================================================== */

:root {
  --green: #064e3b;
  --green-dark: #032c21;
  --green-light: #087454;
  --mint: #eaf6ef;
  --gold: #f4d477;
  --saffron: #ff9933;
  --india-green: #138808;
  --ink: #182a23;
  --muted: #66766f;
  --line: #e2ebe5;
  --shadow: 0 14px 38px rgba(8,54,39,.09);
}

* { box-sizing: border-box; }

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
}

img,svg,video,canvas { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.container {
  width: min(1120px,calc(100% - 36px));
  max-width: 100%;
  margin-inline: auto;
}

.gold { color: var(--gold); }
.hidden { display: none !important; }

/* HEADER */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(5,47,36,.06);
  backdrop-filter: blur(12px);
}

.site-header .nav {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.7px;
}

.brand > span:last-child { min-width: 0; }

.brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .8px;
}

.brand-mark {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d9bf69;
  border-radius: 12px;
  background: linear-gradient(145deg,var(--green),#0a8a60);
  color: var(--gold);
  box-shadow: 0 5px 14px #064e3b20;
}

.brand-mark svg { width: 35px; height: 35px; }

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  font-size: 11px;
  font-weight: 750;
}

.site-header nav > a {
  flex-shrink: 0;
  transition: .2s;
}

.site-header nav > a:not(.nav-apply):not(.nav-login):hover {
  color: var(--green-light);
}

.nav-apply,.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 35px;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.nav-apply {
  color: #33280a;
  background: linear-gradient(135deg,#ffe8a0,var(--gold));
  box-shadow: 0 4px 12px #d6ae4430;
}

.nav-agent {
  color: #07543d;
  background: linear-gradient(135deg,#eff9f1,#d9efe1);
  border: 1px solid #dce9e0;
}

.nav-admin {
  color: #fff;
  background: linear-gradient(135deg,#07503a,#032e23);
  border: 1px solid #07503a;
  box-shadow: 0 4px 13px #064e3b24;
}

.nav-apply:hover,.nav-agent:hover,.nav-admin:hover {
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--mint);
  color: var(--green);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 22px;
  cursor: pointer;
}

/* HERO */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 31px 0 40px;
  color: #fff;
  background:
    radial-gradient(ellipse at 80% 14%,rgba(20,157,105,.35),transparent 34%),
    radial-gradient(ellipse at 7% 100%,rgba(255,153,51,.11),transparent 36%),
    linear-gradient(120deg,#031f18,#064a36 57%,#07513b);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 18px;
  right: -22px;
  width: 210px;
  height: 135px;
  opacity: .1;
  border-radius: 10px;
  background: linear-gradient(to bottom,#ff9933 0 33.33%,#fff 33.33% 66.66%,#138808 66.66%);
  transform-origin: left center;
  animation: gjFlagWave 6s ease-in-out infinite;
}

.hero::after {
  content: "☾";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 7%;
  color: #f4d47733;
  font-size: 130px;
  line-height: 1;
  pointer-events: none;
  animation: gjMoonFloat 7s ease-in-out infinite;
}

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-decor::before {
  content: "";
  position: absolute;
  top: 11%;
  right: 5%;
  width: 150px;
  height: 96px;
  border-radius: 4px 10px 10px 4px;
  opacity: .1;
  background: linear-gradient(to bottom,#ff9933 0 33.33%,#fff 33.33% 66.66%,#138808 66.66%);
  transform-origin: left center;
  animation: gjBackgroundFlagWave 5s ease-in-out infinite;
}

.hero-decor::after {
  content: "✺";
  position: absolute;
  top: 15%;
  right: 11%;
  color: #8eb9e7;
  opacity: .7;
  font-size: 19px;
  animation: gjChakraSpin 18s linear infinite;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
  align-items: center;
  gap: clamp(22px,4vw,45px);
}

.hero-content { min-width: 0; }

.eyebrow {
  display: inline-block;
  color: var(--green-light);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.7px;
}

.hero .eyebrow {
  padding: 7px 11px;
  color: #ffe8a7;
  border: 1px solid #f4d47740;
  border-radius: 30px;
  background: #ffffff0d;
}

.hero h1 {
  max-width: 100%;
  margin: 12px 0;
  font-size: clamp(32px,4vw,48px);
  font-weight: 850;
  letter-spacing: -1.9px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.hero h1 .gold {
  background: linear-gradient(90deg,#fff0b7,#f4ce72,#e8b64c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  max-width: 510px;
  margin: 10px 0;
  color: #d2e8dd;
  font-size: 13px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 17px 0 12px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 41px;
  padding: 10px 15px;
  border: 0;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
  transition: transform .2s,box-shadow .2s,background .2s;
}

.btn:hover { transform: translateY(-2px); }

.btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.btn-gold {
  color: #33280a;
  background: linear-gradient(135deg,#ffe8a0,var(--gold));
  box-shadow: 0 8px 20px #e7b84a25;
}

.btn-outline {
  color: #fff;
  border: 1px solid #ffffff65;
  background: #ffffff0c;
}

.btn-green {
  color: #fff;
  background: var(--green);
}

.btn-green:hover { background: var(--green-light); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  color: #d5e9df;
  font-size: 10px;
}

.trust-row span {
  padding: 5px 7px;
  border: 1px solid #ffffff19;
  border-radius: 8px;
  background: #ffffff06;
}

/* HERO VISUAL */

.hero-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid #f4d47766;
  border-radius: 21px;
  background: linear-gradient(145deg,#033325e8,#096848b8);
  box-shadow: 0 18px 44px #0003,inset 0 0 25px #f4d47708;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #f4d47720;
  border-radius: 16px;
  pointer-events: none;
}

.hero-card-top {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #e2f0e7;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1px;
}

.live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #57d89b;
  box-shadow: 0 0 0 4px #57d89b20;
  animation: gjLivePulse 2s ease-in-out infinite;
}

.hero-card-tag {
  margin-left: auto;
  padding: 5px 7px;
  border: 1px solid #ffffff24;
  border-radius: 25px;
  color: var(--gold);
  font-size: 8px;
  white-space: nowrap;
}

.hero-visual {
  position: relative;
  height: 102px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #ffffff13;
  border-radius: 14px;
  background: radial-gradient(circle at 70% 20%,#f4d47720,transparent 24%),linear-gradient(180deg,#021f1820,#01140f75);
}

.hero-orbit {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 130px;
  height: 130px;
  border: 1px solid #f4d47727;
  border-radius: 50%;
  transform: translateX(-50%);
}

.orbit-two {
  top: -10px;
  width: 170px;
  height: 170px;
  border-style: dashed;
  opacity: .55;
}

.hero-moon {
  position: absolute;
  top: 7px;
  right: 23%;
  color: var(--gold);
  font-size: 38px;
  text-shadow: 0 0 20px #f4d47755;
  animation: gjMoonFloat 5s ease-in-out infinite;
}

.hero-skyline {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 73px;
  padding: 0 14px;
}

.hero-skyline i {
  display: block;
  width: 11%;
  height: 32px;
  border: 1px solid #f4d47735;
  border-bottom: 0;
  background: linear-gradient(#f4d47720,#f4d47705);
}

.hero-skyline i:nth-child(2) { height: 52px; }
.hero-skyline i:nth-child(3) { height: 41px; }
.hero-skyline i:nth-child(4) { height: 72px; border-radius: 45% 45% 0 0; }
.hero-skyline i:nth-child(5) { height: 48px; }
.hero-skyline i:nth-child(6) { height: 60px; }
.hero-skyline i:nth-child(7) { height: 34px; }

.hero-flag {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 43px;
  height: 27px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 4px 12px #0003;
  transform-origin: left center;
  animation: gjFlagWave 4s ease-in-out infinite;
}

.hero-flag b {
  display: block;
  height: 33.333%;
  background: #ff9933;
}

.hero-flag b:nth-child(2) { background: #fff; }
.hero-flag b:nth-child(3) { background: #138808; }

.hero-card h2 {
  position: relative;
  margin: 11px 0 5px;
  font-size: clamp(21px,2.2vw,27px);
  line-height: 1.18;
  letter-spacing: -.8px;
}

.hero-card h2 .gold { color: var(--gold); }
.hero-card p { margin: 5px 0; font-size: 10px; }

.text-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 850;
}

.hero-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.hero-card-foot span {
  padding: 5px 7px;
  border: 1px solid #ffffff18;
  border-radius: 7px;
  color: #d6e9df;
  font-size: 8px;
}

.decor-mosque {
  position: absolute;
  right: 25%;
  bottom: -18px;
  font-size: clamp(75px,10vw,125px);
  opacity: .12;
  filter: drop-shadow(0 0 16px #f4d477);
  animation: gjEmblemFloat 7s ease-in-out infinite;
}

.decor-plane {
  position: absolute;
  top: 23%;
  right: -55px;
  color: #fff2c2;
  font-size: 26px;
  text-shadow: 0 0 14px #f4d477;
  animation: gjPlaneFly 17s linear infinite;
}

.decor-star {
  position: absolute;
  color: #ffe8a0;
  text-shadow: 0 0 12px #f4d477;
  animation: gjTwinkle 2.8s ease-in-out infinite;
}

.star-one { top: 22%; right: 43%; font-size: 20px; }
.star-two { top: 65%; right: 6%; font-size: 25px; animation-delay: 1s; }

.decor-lantern {
  position: absolute;
  top: 15%;
  left: 4%;
  color: var(--gold);
  opacity: .6;
  font-size: 29px;
  transform-origin: top center;
  animation: gjLanternSwing 4s ease-in-out infinite;
}

/* SEARCH */

.search-section {
  position: relative;
  z-index: 5;
  margin-top: -18px;
}

.search-box {
  padding: 15px 19px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 42px #063e2c16;
}

.search-label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 850;
}

.search-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) 210px 125px;
  gap: 9px;
}

.search-controls input,.search-controls select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #dce6df;
  border-radius: 10px;
  outline: none;
  background: #fbfdfb;
  color: var(--ink);
  font-size: 12px;
}

.search-controls input:focus,.search-controls select:focus {
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px #08745415;
}

/* GENERAL SECTIONS */

.section { padding: 48px 0; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 21px;
}

.section-heading > div { min-width: 0; }

.section-heading h2,.apply-layout h2 {
  margin: 7px 0 0;
  font-size: clamp(25px,3vw,35px);
  line-height: 1.2;
  letter-spacing: -1.1px;
}

.section-heading h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 9px;
  border-radius: 8px;
  background: linear-gradient(90deg,#ff9933 0 33.33%,#fff 33.33% 66.66%,#138808 66.66%);
}

.section-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.section-intro { max-width: 590px; }

.pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 30px;
  background: #e4f3e9;
  color: var(--green);
  font-size: 10px;
  font-weight: 850;
}

/* COUNTRIES */

.country-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 11px;
}

.country-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: .2s;
}

.country-card:hover {
  border-color: #83b79b;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.flag { margin-bottom: 9px; font-size: 27px; }

.country-card strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.country-card small {
  margin-top: 7px;
  color: var(--green-light);
  font-size: 10px;
  font-weight: 800;
}

/* LATEST JOBS — 4 COLUMNS DESKTOP */

.jobs-section {
  background: radial-gradient(circle at 0 0,#dff3e6 0,transparent 35%),#f6faf7;
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 13px;
  align-items: stretch;
}

.job-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 16px #063e2c06;
  transition: .2s;
}

.job-card:hover {
  border-color: #c6dfd0;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.job-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.job-card-top > div { min-width: 0; }

.job-card h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
}

.job-company {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.job-country {
  flex: 0 0 auto;
  max-width: 44%;
  padding: 4px 6px;
  border-radius: 7px;
  background: #eaf6ef;
  color: var(--green);
  font-size: 9px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 11px 0;
}

.job-meta span {
  padding: 5px 6px;
  border: 1px solid #e8efea;
  border-radius: 7px;
  background: #f5f8f6;
  color: #41534a;
  font-size: 9px;
  overflow-wrap: anywhere;
}

.job-description {
  color: #5b6d63;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.job-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 35px;
  padding: 8px 7px;
  font-size: 10px;
}

.btn-whatsapp {
  color: #087344;
  background: #e4f8ec;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 25px 15px;
  border: 1px dashed #cbd9d0;
  border-radius: 13px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* SELECTED CANDIDATES — 5 COLUMNS DESKTOP */

.success-section {
  background: linear-gradient(180deg,#fff,#fffdf6);
}

.success-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 11px;
  align-items: stretch;
}

.success-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 12px 9px 10px;
  border: 1px solid #e2e8df;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 17px #063e2c0b;
  transition: transform .2s,box-shadow .2s;
}

.success-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.success-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,#ff9933,#fff,#138808);
}

.story-green { background: linear-gradient(155deg,#f0fff4,#d5f6df); }
.story-gold { background: linear-gradient(155deg,#fffdf0,#fff0b9); }
.story-blue { background: linear-gradient(155deg,#f0f8ff,#dceeff); }
.story-purple { background: linear-gradient(155deg,#fcf3ff,#eedcff); }
.story-orange { background: linear-gradient(155deg,#fff7ef,#ffe0c5); }

.success-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.success-confetti {
  color: #c18d17;
  font-size: 17px;
}

.success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 20px;
  background: #087344;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .3px;
}

.success-avatar {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin: 10px auto 7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg,#087454,#032c21);
  color: #ffe8a0;
  box-shadow: 0 3px 10px #064e3b24;
  font-size: 21px;
  font-weight: 900;
}

.success-card-body {
  width: 100%;
  min-width: 0;
}

.success-card h3 {
  margin: 0 0 5px;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.success-card p {
  margin: 4px 0;
  color: #53665b;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.success-job {
  font-weight: 750;
}

.success-congrats {
  width: 100%;
  margin-top: 9px;
  padding: 6px 3px;
  border-radius: 8px;
  background: #ffffffb8;
  color: #087344;
  font-size: 10px;
  font-weight: 900;
}

.show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.show-more {
  min-width: 205px;
  border-radius: 30px;
  box-shadow: 0 5px 15px #064e3b20;
}

/* HOW TO APPLY */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 13px;
}

.step {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  transition: .2s;
}

.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.step > span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--mint);
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.step h3 { margin: 13px 0 6px; font-size: 15px; }
.step p { margin: 0; color: var(--muted); font-size: 11px; }

/* APPLICATION FORM */

.apply-section {
  background:
    radial-gradient(circle at 5% 90%,#ff993318,transparent 25%),
    radial-gradient(circle at 95% 5%,#13880812,transparent 25%),
    linear-gradient(135deg,#eff8f2,#f8fbf9);
}

.apply-layout {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  align-items: start;
  gap: 35px;
}

.apply-layout > div { min-width: 0; }

.apply-layout > div > p {
  max-width: 390px;
  color: var(--muted);
  font-size: 13px;
}

.secure-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 21px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.secure-note > span { font-size: 21px; }
.secure-note strong { font-size: 12px; }

.secure-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.form-card,.admin-card {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.form-card h3,.admin-card h3 {
  margin: 0 0 17px;
  font-size: 19px;
  letter-spacing: -.4px;
}

.form-card label,.admin-card label {
  display: block;
  margin-bottom: 13px;
  font-size: 11px;
  font-weight: 800;
}

.form-card label > span { color: #b44337; }
.form-card label small { color: var(--muted); font-weight: 500; }

.form-card input,.form-card select,.form-card textarea,
.admin-card input,.admin-card select,.admin-card textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  padding: 11px;
  border: 1px solid #dce6df;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
}

.form-card input:focus,.form-card select:focus,
.form-card textarea:focus,.admin-card input:focus,
.admin-card select:focus,.admin-card textarea:focus {
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px #08745415;
}

.form-card input[type="file"] {
  padding: 9px;
  font-size: 10px;
}

.form-card label > small:last-child {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.5;
}

.full { width: 100%; }

.form-message,.admin-message {
  margin: 10px 0;
  font-size: 12px;
}

.form-message.success,.admin-message.success { color: #087344; }
.form-message.error,.admin-message.error { color: #b42318; }

/* FOOTER */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  background: #052f24;
  color: #d7e7df;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,#ff9933 0 33.33%,#fff 33.33% 66.66%,#138808 66.66%);
}

.footer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
}

.footer-brand { color: #fff; font-size: 16px; }

.footer-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
  font-size: 10px;
}

.footer-row > div a:hover { color: var(--gold); }

.footer-row p {
  width: 100%;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid #ffffff20;
  color: #9cb8aa;
  font-size: 10px;
}

/* WHATSAPP */

.floating-whatsapp {
  position: fixed;
  right: 17px;
  bottom: 17px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 15px;
  border-radius: 40px;
  background: #16834b;
  color: #fff;
  box-shadow: 0 8px 24px #064e3b30;
  font-size: 12px;
  font-weight: 850;
  animation: gjWhatsappPulse 2.8s ease-in-out infinite;
}

/* ADMIN AND AGENT PAGE SUPPORT */

.admin-page {
  min-height: 100vh;
  background: #f4f8f5;
}

.admin-header {
  padding: 22px 0;
  background: var(--green);
  color: #fff;
}

.admin-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-main { padding: 27px 0 60px; }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 17px 0;
}

.admin-tabs button {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.admin-tabs button.active {
  background: var(--green);
  color: #fff;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 15px;
}

.admin-card {
  margin-bottom: 15px;
  box-shadow: none;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.admin-table th,.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.admin-table th { background: #f5f8f6; }

.small-btn {
  margin: 2px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: #eaf6ef;
  color: var(--green);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.small-btn.danger {
  background: #fff0ef;
  color: #a52c24;
}

/* ANIMATIONS */

@keyframes gjFlagWave {
  0%,100% { transform: perspective(450px) rotate(-5deg) skewY(-1deg); }
  50% { transform: perspective(450px) rotate(-2deg) skewY(2deg) translateY(3px); }
}

@keyframes gjBackgroundFlagWave {
  0%,100% { transform: perspective(500px) rotateY(-12deg) rotateZ(-2deg); }
  50% { transform: perspective(500px) rotateY(9deg) rotateZ(2deg) translateY(3px); }
}

@keyframes gjChakraSpin { to { transform: rotate(360deg); } }

@keyframes gjMoonFloat {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

@keyframes gjEmblemFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes gjPlaneFly {
  0% { transform: translateX(0) translateY(8px) rotate(-5deg); }
  100% { transform: translateX(-120vw) translateY(-28px) rotate(-5deg); }
}

@keyframes gjTwinkle {
  0%,100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes gjLanternSwing {
  0%,100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

@keyframes gjLivePulse {
  0%,100% { box-shadow: 0 0 0 4px #57d89b20; }
  50% { box-shadow: 0 0 0 7px #57d89b12; }
}

@keyframes gjWhatsappPulse {
  0%,100% { box-shadow: 0 8px 24px #064e3b30; }
  50% { box-shadow: 0 8px 28px #16834b55,0 0 0 6px #16834b10; }
}

/* TABLET */

@media (min-width:761px) and (max-width:1050px) {
  .site-header .nav { gap: 9px; }
  .brand { gap: 7px; font-size: 17px; }
  .brand-mark { flex-basis: 36px; width: 36px; height: 36px; }
  .brand-mark svg { width: 31px; height: 31px; }
  .site-header nav { gap: 7px; font-size: 10px; }
  .nav-apply,.nav-login { padding: 7px 8px; font-size: 9px; }
  .hero-grid { gap: 22px; }
  .job-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .success-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* MOBILE */

@media (max-width:760px) {
  html,body { width: 100%; max-width: 100%; overflow-x: clip; }

  .container {
    width: calc(100% - 32px);
    max-width: 560px;
    margin-inline: auto;
  }

  .site-header .nav {
    position: relative;
    min-height: 59px;
    height: auto;
    gap: 8px;
  }

  .brand { gap: 7px; font-size: 16px; }
  .brand small { font-size: 8px; letter-spacing: .5px; }

  .brand-mark {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .brand-mark svg { width: 31px; height: 31px; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    padding: 5px;
  }

  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    width: auto;
    max-height: calc(100vh - 75px);
    overflow-y: auto;
    padding: 15px 18px 18px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 13px;
  }

  .site-header nav.open { display: flex; }

  .site-header nav > a {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 9px;
    white-space: normal;
  }

  .site-header nav > .nav-apply,
  .site-header nav > .nav-login {
    justify-content: center;
  }

  .hero { min-height: 0; padding: 26px 0 34px; }

  .hero::before {
    top: 10px;
    right: -25px;
    width: 130px;
    height: 84px;
    opacity: .08;
  }

  .hero::after {
    top: 2px;
    right: 3%;
    font-size: 83px;
    opacity: .45;
  }

  .hero-grid {
    width: calc(100% - 32px);
    grid-template-columns: minmax(0,1fr);
    gap: 18px;
  }

  .hero-content { width: 100%; min-width: 0; }

  .hero .eyebrow {
    max-width: 100%;
    font-size: 9px;
    letter-spacing: 1.1px;
  }

  .hero h1 {
    max-width: 100%;
    margin: 11px 0;
    font-size: clamp(32px,8.7vw,43px);
    letter-spacing: -1.5px;
    overflow-wrap: normal;
  }

  .hero p { max-width: 100%; font-size: 12px; line-height: 1.7; }
  .hero-actions { gap: 9px; margin: 15px 0 12px; }

  .hero-actions .btn {
    min-height: 40px;
    padding: 10px 12px;
    font-size: 11px;
  }

  .trust-row { gap: 6px; font-size: 9px; }
  .trust-row span { padding: 5px 6px; }

  .hero-card {
    width: 100%;
    padding: 14px;
    border-radius: 17px;
  }

  .hero-card-top { gap: 6px; font-size: 8px; }
  .hero-card-tag { font-size: 7px; }
  .hero-visual { height: 92px; margin-top: 8px; }
  .hero-card h2 { font-size: 23px; }
  .hero-card p { font-size: 10px; }
  .hero-card-foot span { font-size: 8px; }

  .decor-mosque {
    right: 3%;
    bottom: 29%;
    font-size: 75px;
  }

  .decor-plane { top: 9%; font-size: 20px; }

  .decor-lantern {
    top: 38%;
    right: 4%;
    left: auto;
    font-size: 23px;
  }

  .decor-star { font-size: 17px; }

  .hero-decor::before {
    top: 4%;
    right: 3%;
    width: 85px;
    height: 55px;
    opacity: .07;
  }

  .hero-decor::after {
    top: 7%;
    right: 34px;
    font-size: 12px;
  }

  .search-section { margin-top: -12px; }
  .search-box { padding: 13px; border-radius: 14px; }

  .search-controls {
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
  }

  .search-controls input,.search-controls select {
    min-height: 43px;
    font-size: 13px;
  }

  .search-controls .btn { width: 100%; }

  .section { padding: 37px 0; }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 17px;
  }

  .section-heading h2,.apply-layout h2 { font-size: 27px; }
  .section-heading p { font-size: 11px; }

  .country-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }

  .country-card { padding: 12px; border-radius: 12px; }
  .flag { font-size: 25px; }
  .country-card strong { font-size: 12px; }

  /* Jobs: one column on mobile */
  .job-grid { grid-template-columns: minmax(0,1fr); gap: 11px; }
  .job-card { padding: 15px; }
  .job-card h3 { font-size: 16px; }
  .job-company { font-size: 11px; }
  .job-meta span { font-size: 10px; }
  .job-description { font-size: 12px; }

  .job-actions .btn { min-height: 37px; font-size: 11px; }

  /* Candidates: two compact columns on mobile */
  .success-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }

  .success-card { padding: 10px 7px; border-radius: 12px; }
  .success-badge { padding: 4px 5px; font-size: 7px; }
  .success-confetti { font-size: 14px; }
  .success-avatar { width: 40px; height: 40px; font-size: 19px; }
  .success-card h3 { font-size: 11px; }
  .success-card p { font-size: 9px; }
  .success-congrats { font-size: 9px; }

  .steps-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .step { padding: 16px; }

  .apply-layout {
    grid-template-columns: minmax(0,1fr);
    gap: 21px;
  }

  .form-card { padding: 16px; }
  .form-card h3 { font-size: 18px; }

  .footer-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .footer-row > div {
    margin-left: 0;
    gap: 10px 14px;
  }

  .footer-row p { line-height: 1.6; }

  .floating-whatsapp {
    right: 12px;
    bottom: 12px;
    padding: 10px 13px;
    font-size: 11px;
  }

  .admin-header .container { flex-wrap: wrap; }
  .admin-form-grid { grid-template-columns: minmax(0,1fr); }

  .admin-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 5px;
  }

  .admin-tabs button { flex: 0 0 auto; }
  .admin-card { padding: 15px; }
}

/* SMALL MOBILE */

@media (max-width:360px) {
  .container { width: calc(100% - 24px); }

  .site-header .nav { min-height: 55px; }
  .brand { font-size: 14px; }

  .brand-mark {
    flex-basis: 33px;
    width: 33px;
    height: 33px;
  }

  .brand-mark svg { width: 28px; height: 28px; }
  .hero h1 { font-size: 31px; }

  .hero-actions .btn {
    padding-inline: 9px;
    font-size: 10px;
  }

  .hero-card-tag { margin-left: 0; }
  .floating-whatsapp { padding: 9px 11px; }
}

/* REDUCED MOTION ACCESSIBILITY */

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* FORCE SHARE BUTTON COLOR */
button.share-btn,
.share-btn,
.card-actions button.share-btn {
    background: #25D366 !important;
    background-color: #25D366 !important;
    color: #ffffff !important;
    border: 2px solid #25D366 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

button.share-btn:hover,
.share-btn:hover {
    background: #128C7E !important;
    background-color: #128C7E !important;
    color: #ffffff !important;
}

/* GulfJobsIndia Agent Dashboard - Color Fix */

.agent-topbar,
.admin-header {
  background: #032c21 !important;
  color: #ffffff !important;
}

/* Dashboard welcome area */
.agent-wrap {
  background: #eaf6ef !important;
}

/* Refresh and Logout buttons */
.agent-actions .btn,
.agent-actions button {
  background: #f4d477 !important;
  color: #032c21 !important;
  border: 1px solid #d6b84e !important;
  font-weight: 700 !important;
}

/* Button hover */
.agent-actions .btn:hover,
.agent-actions button:hover {
  background: #ff9933 !important;
  color: #ffffff !important;
}

/* View Website button */
.admin-header .btn,
.agent-topbar .btn {
  background: #f4d477 !important;
  color: #032c21 !important;
  border-color: #f4d477 !important;
}

/* Candidate form card */
.agent-card {
  background: #ffffff !important;
  border-color: #dcebe1 !important;
}

/* GulfJobsIndia Job Share Button */

.btn-share {
  background: #f4d477 !important;
  color: #032c21 !important;
  border: 1px solid #d6b84e !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

.btn-share:hover {
  background: #ff9933 !important;
  color: #ffffff !important;
}



/* ==========================================================
   GULFJOBSINDIA — PREMIUM NAVY & GOLD VISUAL REFRESH
   Design-only layer. Existing HTML IDs, forms, links and JS
   hooks are intentionally preserved.
   ========================================================== */
:root {
  --green: #10233f;
  --green-dark: #08172b;
  --green-light: #1d4775;
  --mint: #eef3f9;
  --gold: #d9b66f;
  --saffron: #d9b66f;
  --india-green: #1d4775;
  --ink: #152238;
  --muted: #69778b;
  --line: #e3e9f1;
  --shadow: 0 18px 48px rgba(12, 29, 54, .09);
}

body {
  color: #17243a;
  background: #f8fafd;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: .005em;
}

.container { width: min(1160px, calc(100% - 42px)); }

/* Header */
.site-header {
  background: rgba(8, 23, 43, .97);
  border-bottom: 1px solid rgba(217,182,111,.22);
  box-shadow: 0 8px 28px rgba(4, 15, 31, .16);
}
.site-header .nav { min-height: 76px; }
.brand { color: #fff; font-size: 21px; letter-spacing: -.8px; }
.brand small { color: #b9c5d5; letter-spacing: 1.15px; font-size: 9px; }
.brand-mark {
  border: 1px solid rgba(217,182,111,.75);
  border-radius: 14px;
  background: linear-gradient(145deg,#1d4775,#0b1d35);
  color: #f2d79d;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.site-header nav { gap: 17px; color: #e7edf5; font-size: 12px; }
.site-header nav > a:not(.nav-apply):not(.nav-login) { color: #d7e0ec; }
.site-header nav > a:not(.nav-apply):not(.nav-login):hover { color: #f2d79d; }
.nav-apply, .nav-login {
  min-height: 39px;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 11px;
}
.nav-apply {
  color: #17243a;
  background: linear-gradient(135deg,#f3dfb3,#d9b66f);
  box-shadow: 0 6px 18px rgba(217,182,111,.22);
}
.nav-agent {
  color: #f4f7fb;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
}
.nav-admin {
  color: #17243a;
  background: #f3dfb3;
  border: 1px solid #d9b66f;
  box-shadow: 0 6px 18px rgba(217,182,111,.16);
}
.menu-toggle {
  color: #f2d79d;
  border-color: rgba(217,182,111,.35);
  background: rgba(255,255,255,.07);
}

/* Hero */
.hero {
  padding: 66px 0 78px;
  background:
    radial-gradient(ellipse at 83% 12%,rgba(71,112,164,.34),transparent 34%),
    radial-gradient(ellipse at 4% 100%,rgba(217,182,111,.13),transparent 38%),
    linear-gradient(122deg,#08172b 0%,#102b4c 55%,#163d64 100%);
}
.hero::before { opacity: .06; }
.hero::after { color: rgba(217,182,111,.16); }
.hero .eyebrow {
  color: #f3dfb3;
  background: rgba(217,182,111,.09);
  border: 1px solid rgba(217,182,111,.35);
  border-radius: 999px;
  padding: 8px 13px;
  letter-spacing: 1.8px;
}
.hero h1 {
  max-width: 650px;
  margin: 18px 0 15px;
  font-size: clamp(38px,5vw,61px);
  line-height: 1.04;
  letter-spacing: -2.7px;
}
.hero h1 .gold {
  background: linear-gradient(90deg,#fff0cc,#e6c77f 55%,#c99d4c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p { color: #c8d5e5; font-size: 15px; max-width: 530px; }
.hero-actions { gap: 12px; margin: 25px 0 18px; }
.btn { min-height: 45px; padding: 12px 18px; border-radius: 11px; font-size: 12px; }
.btn-gold {
  color: #14233a;
  background: linear-gradient(135deg,#f4e3bd,#d9b66f);
  box-shadow: 0 12px 26px rgba(217,182,111,.22);
}
.btn-outline { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.06); }
.btn-green {
  color: #fff;
  background: linear-gradient(135deg,#1d4775,#10233f);
  box-shadow: 0 8px 20px rgba(16,35,63,.16);
}
.btn-green:hover { background: linear-gradient(135deg,#28598d,#163557); }
.trust-row { color: #d4deea; gap: 9px; }
.trust-row span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}
.hero-card {
  padding: 20px;
  border: 1px solid rgba(217,182,111,.5);
  border-radius: 24px;
  background: linear-gradient(150deg,rgba(17,43,73,.96),rgba(9,25,46,.93));
  box-shadow: 0 28px 70px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07);
}
.hero-card::before { border-color: rgba(217,182,111,.17); border-radius: 19px; }
.hero-card-top { color: #e1e9f2; font-size: 10px; }
.hero-card-tag { color: #f1d9a4; border-color: rgba(217,182,111,.3); }
.hero-visual {
  height: 145px;
  margin-top: 15px;
  border-color: rgba(255,255,255,.12);
  background: radial-gradient(circle at 68% 15%,rgba(217,182,111,.2),transparent 25%),linear-gradient(180deg,#173b60,#0a1b31);
}
.hero-orbit { border-color: rgba(217,182,111,.28); }
.hero-moon { color: #e9cb8b; }
.hero-skyline i { border-color: rgba(217,182,111,.4); background: linear-gradient(#d9b66f26,#d9b66f06); }
.hero-card h2 { font-size: clamp(24px,2.5vw,31px); }
.hero-card h2 .gold { color: #e8ca8c; }
.hero-card p { color: #c7d5e4; font-size: 11px; }
.text-link { color: #efd69f; }
.hero-card-foot span { color: #d5dfeb; border-color: rgba(255,255,255,.14); }

/* Search panel */
.search-section { margin-top: -27px; }
.search-box {
  padding: 22px 24px;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(14,34,61,.12);
}
.search-label { color: #1b2c46; font-size: 13px; }
.search-controls input, .search-controls select {
  min-height: 48px;
  padding: 12px 14px;
  border-color: #dce4ee;
  border-radius: 11px;
  background: #f9fbfd;
  font-size: 13px;
}
.search-controls input:focus, .search-controls select:focus {
  border-color: #527ba8;
  box-shadow: 0 0 0 4px rgba(50,94,143,.1);
}

/* Sections and headings */
.section { padding: 65px 0; }
.section-heading { margin-bottom: 24px; }
.eyebrow { color: #8a6a31; font-size: 10px; letter-spacing: 1.9px; }
.section-heading h2, .apply-section h2 {
  color: #14243b;
  font-size: clamp(26px,3vw,35px);
  letter-spacing: -1.1px;
}
.section-heading > p, .section-intro { color: #718096; font-size: 13px; }
.pill {
  border: 1px solid #e5d6b6;
  border-radius: 999px;
  background: #fbf6eb;
  color: #765b2c;
  padding: 7px 12px;
}

/* Country destination cards */
.country-grid { gap: 14px; }
.country-card {
  min-height: 145px;
  padding: 20px 17px;
  border: 1px solid #e2e8f0;
  border-radius: 17px;
  background: linear-gradient(150deg,#fff,#f8fafd);
  box-shadow: 0 8px 24px rgba(15,35,62,.045);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.country-card:hover {
  border-color: #d6b66f;
  transform: translateY(-5px);
  box-shadow: 0 18px 35px rgba(15,35,62,.1);
}
.flag { font-size: 31px; }
.country-card strong { color: #172a45; font-size: 13px; }
.country-card small { color: #98763b; font-size: 11px; }

/* Jobs */
.jobs-section {
  background:
    radial-gradient(circle at 100% 0,rgba(217,182,111,.08),transparent 30%),
    linear-gradient(180deg,#f3f6fa,#f8fafd);
  border-top: 1px solid #e8edf4;
  border-bottom: 1px solid #e8edf4;
}
.job-grid { gap: 17px; }
.job-card {
  padding: 19px;
  border: 1px solid #e1e8f0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(14,34,61,.055);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  border-color: #d7bd83;
  box-shadow: 0 20px 38px rgba(14,34,61,.11);
}
.job-card h3 { color: #172a45; font-size: 16px; letter-spacing: -.25px; }
.job-company { color: #77859a; font-size: 11px; }
.job-country {
  background: #f7f1e5;
  color: #775c2d;
  border: 1px solid #eadbb9;
  border-radius: 999px;
}
.job-meta { color: #5e6d82; gap: 7px; }
.job-meta span {
  border-radius: 8px;
  background: #f5f7fa;
  border: 1px solid #e9edf3;
  padding: 6px 8px;
}
.job-description { color: #66758a; line-height: 1.65; }
.job-actions { gap: 7px; }
.job-actions .btn { min-height: 38px; border-radius: 9px; }
.job-actions .btn-what, .job-actions .btn-whatsapp {
  background: #edf7f2;
  color: #16704c;
  border: 1px solid #d6eadf;
}
.job-actions .btn-share {
  background: #f5f7fa;
  color: #334b69;
  border: 1px solid #e1e7ef;
}

/* Selected candidates */
.success-section { background: #fff; }
.success-card {
  border: 1px solid #e5eaf1;
  border-radius: 16px;
  box-shadow: 0 9px 24px rgba(14,34,61,.055);
}
.success-card::before { background: linear-gradient(90deg,#d9b66f,#f4e6c5,#1d4775); }
.success-badge { background: #1d4775; color: #fff; }
.success-avatar { background: linear-gradient(145deg,#1d4775,#10233f); color: #f2d79d; }
.success-card h3 { color: #172a45; }
.success-card p { color: #68778c; }

/* How to apply */
.how-section { background: #f5f7fa; }
.steps-grid { gap: 16px; }
.step {
  padding: 23px;
  border: 1px solid #e2e8f0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(14,34,61,.045);
}
.step > span {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: #f7f0e2;
  color: #87662f;
  font-size: 13px;
  font-weight: 900;
}
.step h3 { color: #172a45; font-size: 16px; }
.step p { color: #6b7a8e; font-size: 12px; line-height: 1.7; }

/* Application */
.apply-section {
  background:
    radial-gradient(circle at 0 0,rgba(217,182,111,.11),transparent 32%),
    linear-gradient(130deg,#edf2f8,#f8fafd);
}
.apply-section h2 { color: #14243b; }
.apply-section > .container > div > p { color: #65748a; font-size: 14px; line-height: 1.8; }
.secure-note {
  border: 1px solid #e3e9f0;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  padding: 15px;
}
.secure-note strong { color: #1b3555; }
.secure-note p { color: #718096; }
.form-card, .admin-card {
  padding: 25px;
  border: 1px solid #e1e7ef;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(14,34,61,.09);
}
.form-card h3, .admin-card h3 { color: #172a45; font-size: 21px; }
.form-card label, .admin-card label { color: #344761; font-size: 12px; }
.form-card input, .form-card select, .form-card textarea,
.admin-card input, .admin-card select, .admin-card textarea {
  min-height: 44px;
  padding: 12px 13px;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: #f9fbfd;
  color: #172a45;
  font-size: 13px;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.admin-card input:focus, .admin-card select:focus, .admin-card textarea:focus {
  border-color: #527ba8;
  box-shadow: 0 0 0 4px rgba(50,94,143,.1);
}
.form-card small { color: #78869a; }

/* Footer and floating contact */
.site-footer {
  background: #08172b;
  border-top: 1px solid rgba(217,182,111,.3);
  color: #d5deea;
}
.footer-brand { color: #fff; }
.footer-row > div a { color: #c6d2e0; }
.footer-row > div a:hover { color: #f0d69e; }
.footer-row p { color: #9eacc0; }
.floating-whatsapp {
  background: #14845b;
  border: 1px solid #4bb98a;
  box-shadow: 0 12px 30px rgba(10,91,61,.3);
}

/* Informational pages */
body:not(.admin-page) main > .container,
body:not(.admin-page) .page-container { color: #24354d; }
body:not(.admin-page) main h1,
body:not(.admin-page) main h2,
body:not(.admin-page) main h3 { color: #172a45; }

/* Admin/agent visual skin only — no form or dashboard behavior changed */
.admin-page, .agent-page, body:has(.agent-wrap) {
  background: #f2f5f9;
}
.admin-header, .agent-topbar {
  background: linear-gradient(115deg,#08172b,#173b61) !important;
  border-bottom: 1px solid rgba(217,182,111,.4);
  box-shadow: 0 8px 24px rgba(8,23,43,.15);
}
.admin-header h1, .admin-header .brand, .agent-topbar, .agent-topbar h1 { color: #fff; }
.admin-tabs button, .admin-tabs a {
  border-radius: 10px;
}
.admin-card, .agent-card {
  border: 1px solid #e1e7ef !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(14,34,61,.07) !important;
}
.agent-wrap { background: #f2f5f9 !important; }
.agent-actions .btn, .agent-actions button {
  background: linear-gradient(135deg,#f4e3bd,#d9b66f) !important;
  color: #17243a !important;
  border: 1px solid #d2b16b !important;
}
.admin-header .btn, .agent-topbar .btn {
  background: #f3dfb3 !important;
  color: #17243a !important;
  border-color: #d9b66f !important;
}

/* Focus visibility and reduced motion */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(217,182,111,.7);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .site-header .nav { min-height: 68px; }
  .site-header nav { gap: 9px; }
  .nav-apply, .nav-login { padding-inline: 9px; font-size: 10px; }
  .hero { padding: 52px 0 66px; }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 30px); }
  .site-header .nav { min-height: 62px; }
  .brand { color: #fff; font-size: 17px; }
  .hero { padding: 43px 0 55px; }
  .hero-grid { gap: 25px; }
  .hero h1 { font-size: clamp(35px,10vw,47px); letter-spacing: -1.7px; }
  .hero p { font-size: 13px; }
  .hero-card { padding: 16px; border-radius: 19px; }
  .hero-visual { height: 120px; }
  .search-section { margin-top: -20px; }
  .search-box { padding: 17px; border-radius: 15px; }
  .search-controls { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .search-controls .btn { width: 100%; }
  .section { padding: 48px 0; }
  .section-heading { gap: 10px; align-items: flex-start; }
  .section-heading h2, .apply-section h2 { font-size: 27px; }
  .country-card { min-height: 125px; padding: 15px 12px; }
  .job-card { padding: 16px; border-radius: 15px; }
  .job-actions { flex-wrap: wrap; }
  .job-actions .btn { flex: 1 1 auto; }
  .form-card, .admin-card { padding: 18px; border-radius: 16px; }
  .footer-row { gap: 17px; }
  .floating-whatsapp { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ===== GULFJOBSINDIA PREMIUM NAVY + GOLD REDESIGN ===== */
:root{--green:#071a35;--green-dark:#031126;--green-light:#123d70;--gold:#ffc83d;--mint:#eef5fb;--ink:#101d39;--muted:#64718a;--line:#e6eaf1;--shadow:0 14px 38px rgba(5,22,48,.10)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff;color:var(--ink)}
.top-ticker{height:29px;display:flex;align-items:center;gap:12px;padding:0 22px;background:linear-gradient(90deg,#020b1b,#092957,#020b1b);color:#fff;border-bottom:1px solid #244b80;overflow:hidden;font-size:11px;font-weight:800;letter-spacing:.25px}
.ticker-arrow{color:var(--gold);font-size:18px;line-height:1;flex:none}.ticker-window{overflow:hidden;flex:1;white-space:nowrap}.ticker-track{display:inline-flex;align-items:center;gap:20px;min-width:max-content;animation:gjTicker 36s linear infinite}.ticker-track b{color:var(--gold)}.top-ticker:hover .ticker-track{animation-play-state:paused}@keyframes gjTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.site-header{background:#04152d;border-bottom:1px solid #18385f;box-shadow:0 5px 24px #06152b30}.site-header .nav{min-height:78px}.brand{color:#fff;font-size:22px;gap:10px}.brand-mark{width:48px;height:48px;color:var(--gold);background:transparent;border:0}.brand small{color:#d4deed;font-size:9px;letter-spacing:.1px}.gold{color:var(--gold)}#mainNav{gap:20px}#mainNav a{color:#f2f5fb;font-size:12px;font-weight:750;padding:10px 0}#mainNav a:hover,#mainNav a.active{color:var(--gold)}#mainNav .nav-login{padding:10px 15px;border:1px solid #d8e0ed;border-radius:24px}#mainNav .nav-agent{background:linear-gradient(135deg,#ffe17b,#f5b91f);border-color:#f5c442;color:#111d35}.menu-toggle{color:#fff;border-color:#ffffff50}
.hero-premium{position:relative;overflow:hidden;padding:50px 0 42px;background:radial-gradient(ellipse at 80% 45%,#153e70 0,#061a36 42%,#020e22 100%);color:#fff;min-height:390px}.hero-premium:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff18 1px,transparent 1px);background-size:24px 24px;opacity:.23;mask-image:linear-gradient(90deg,transparent,#000)}.hero-premium .hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:22px}.hero-premium .hero-content{max-width:720px}.hero-kicker{display:inline-flex;padding:9px 18px;border-radius:14px;background:linear-gradient(135deg,#ffe27b,#f4b91f);color:#101b31;font-weight:900;font-size:13px;box-shadow:0 7px 24px #f8c43c35}.hero-premium h1{font-size:clamp(30px,4vw,49px);line-height:1.08;letter-spacing:-1.7px;margin:18px 0 12px;color:#fff}.hero-premium h1 .gold{color:#ffc83d}.hero-premium .hero-content>p{font-size:16px;color:#dce6f5;margin:0 0 17px}.hero-premium .trust-row{gap:10px 18px;margin:0 0 22px;color:#f7f9fd;font-size:12px}.hero-premium .trust-row span{border:0;background:transparent;padding:0;font-size:12px}.hero-premium .hero-actions{gap:13px}.hero-premium .btn{min-height:48px;padding:0 23px;border-radius:15px;font-size:14px;font-weight:850}.hero-premium .btn-gold{background:linear-gradient(135deg,#ffe17b,#f3b91e);color:#111b30;border:1px solid #ffda58}.hero-premium .btn-outline{border:1px solid #f4d477;background:#071a35;color:#fff}
.hero-scene{height:330px;position:relative;overflow:hidden;border-radius:46% 0 0 46%/100% 0 0 100%;border-left:9px solid #f5c12e;background:linear-gradient(180deg,#2d83b8 0%,#b9d6df 54%,#f2d5a5 100%);box-shadow:-12px 0 0 #f5c12e35,inset 0 -30px 60px #0b315c55}.scene-sun{position:absolute;width:170px;height:170px;right:20%;top:30px;border-radius:50%;background:#ffe6b5;filter:blur(1px);opacity:.85}.scene-plane{position:absolute;top:50px;left:32%;font-size:42px;color:#fff;text-shadow:0 4px 10px #173d62;transform:rotate(-12deg);animation:planeFloat 5s ease-in-out infinite}@keyframes planeFloat{50%{transform:translate(24px,-10px) rotate(-8deg)}}.scene-city{position:absolute;bottom:28px;left:5%;right:6%;height:140px;display:flex;align-items:end;gap:7px}.scene-city i{display:block;flex:1;background:linear-gradient(90deg,#244a68,#7894a2 50%,#173b5b);border:1px solid #ffffff55;box-shadow:inset 5px 0 #ffffff14}.scene-city i:nth-child(1){height:50%}.scene-city i:nth-child(2){height:78%}.scene-city i:nth-child(3){height:62%}.scene-city i:nth-child(4){height:90%}.scene-city i:nth-child(5){height:56%}.scene-city i:nth-child(6){height:72%}.scene-city i:nth-child(7){height:45%}.scene-city i:nth-child(8){height:64%}.scene-burj{position:absolute;bottom:28px;left:53%;height:245px;width:30px;background:linear-gradient(90deg,#d9e6e5,#5c8499,#d7e7e8);clip-path:polygon(43% 0,55% 0,57% 18%,72% 34%,66% 55%,84% 72%,100% 100%,0 100%,18% 70%,34% 51%,31% 30%,42% 18%);filter:drop-shadow(0 4px 8px #183a59)}.scene-worker{position:absolute;right:4%;bottom:0;width:145px;height:240px}.worker-head{position:absolute;right:38px;top:45px;width:56px;height:72px;border-radius:45% 45% 35% 35%;background:linear-gradient(90deg,#70452e,#bd8052);z-index:2}.worker-helmet{position:absolute;right:24px;top:30px;width:82px;height:30px;border-radius:50% 50% 20% 20%;background:linear-gradient(#ffe45c,#eaa900);z-index:3;box-shadow:0 5px 8px #15364c66}.worker-body{position:absolute;right:0;bottom:-30px;width:140px;height:170px;border-radius:45% 45% 0 0;background:linear-gradient(90deg,#142b42,#07182a)}.worker-vest{position:absolute;right:16px;bottom:0;width:100px;height:140px;background:linear-gradient(90deg,#d8e62a 0 15%,#b7d51d 15% 78%,#d8e62a 78%);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);opacity:.95}.scene-caption{position:absolute;left:12%;bottom:12px;color:#fff;font-size:10px;font-weight:900;letter-spacing:1.4px;text-shadow:0 2px 5px #102e4d}.scene-caption span{margin-left:10px;color:#ffdf69}
.search-section{background:#f5f7fb;padding:18px 0}.search-box{border:1px solid #e5eaf2;box-shadow:0 10px 30px #10284a0d;border-radius:15px}.btn-green{background:linear-gradient(135deg,#09254a,#164779)}.btn-green:hover{background:#174c80}.section{padding:44px 0}.section-heading h2{color:#0a1b3c}.eyebrow{color:#b7830d}.country-grid{gap:14px}.country-card{border-radius:17px;border:1px solid #e7ebf2;box-shadow:0 8px 22px #0a1d3a0d;background:linear-gradient(135deg,#fff,#f4f7fb);transition:transform .25s,box-shadow .25s}.country-card:hover{transform:translateY(-5px);box-shadow:0 14px 28px #10284a18}.jobs-section{background:#f7f9fc}.job-card,.form-card,.admin-card,.agent-card{border-radius:17px;box-shadow:0 10px 30px #10284a0c}.success-section{background:#fff}.how-section{background:#f7f9fc}.site-footer{background:#04152d;color:#e4eaf4}.site-footer a{color:#e4eaf4}.floating-whatsapp{box-shadow:0 8px 22px #0c6b3d35}
@media(max-width:850px){.site-header .nav{min-height:68px}#mainNav{background:#061a35;border:1px solid #ffffff20;border-radius:14px;padding:12px;box-shadow:0 16px 35px #0005}#mainNav a{padding:10px}.hero-premium{padding:34px 0 28px}.hero-premium .hero-grid{grid-template-columns:1fr}.hero-scene{height:230px;border-radius:26px;border:2px solid #f5c12e}.hero-premium h1{font-size:34px}.scene-worker{transform:scale(.82);transform-origin:bottom right}.scene-burj{height:180px}.top-ticker{padding:0 10px}.ticker-arrow:last-child{display:none}}
@media(max-width:520px){.brand{font-size:18px}.brand-mark{width:40px;height:40px}.brand small{font-size:8px}.hero-premium h1{font-size:30px;letter-spacing:-1px}.hero-premium .hero-content>p{font-size:14px}.hero-premium .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hero-premium .hero-actions{display:grid;grid-template-columns:1fr}.hero-premium .btn{width:100%;justify-content:center}.hero-scene{height:190px}.scene-worker{transform:scale(.66)}.scene-burj{height:145px}.scene-city{height:95px}.section{padding:34px 0}.top-ticker{height:27px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.ticker-track,.scene-plane,.country-card{animation:none!important;transition:none!important}}

/* CSS-only brand mark: avoids SVG upload/rendering issues */
.brand-mark{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:34px;line-height:1;color:#f4d477;background:linear-gradient(135deg,#102c50,#061326);border:1px solid rgba(244,212,119,.65);box-shadow:0 0 18px rgba(244,212,119,.22);}