/* ==========================================================================
   GULF STARS TECHNICAL TRAINING CENTER — GLOBAL DESIGN SYSTEM
   ==========================================================================
   Table of Contents:
   1. Design Tokens (Colors, Type, Spacing, Radius, Shadow)
   2. Base / Reset
   3. Typography
   4. Layout & Section Rules
   5. Buttons
   6. Cards
   7. Header / Navigation
   8. Footer
   9. Components (Badges, Timeline, Accordion, Stats, Forms, Testimonials)
   10. Animations
   11. Utilities
   12. Responsive Overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --gs-navy-950: #081729;
  --gs-navy-900: #0b2039;
  --gs-navy-800: #0f2a4d;
  --gs-navy-700: #16375f;
  --gs-navy-600: #1f4877;

  --gs-gold-600: #c08829;
  --gs-gold-500: #d9a441;
  --gs-gold-400: #e6ba63;
  --gs-gold-100: #faf1de;

  --gs-white: #ffffff;
  --gs-cream: #f8f9fb;
  --gs-cloud: #f1f4f8;
  --gs-border: #e6eaf1;

  --gs-ink-900: #101d30;
  --gs-ink-700: #33445c;
  --gs-ink-500: #64748b;
  --gs-ink-300: #a7b1c2;

  --gs-success: #1f9d5b;

  /* Typography */
  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --fs-display-xl: clamp(2.4rem, 4vw + 1rem, 4rem);
  --fs-display-lg: clamp(2rem, 2.6vw + 1rem, 3rem);
  --fs-display-md: clamp(1.6rem, 1.6vw + 1rem, 2.25rem);
  --fs-display-sm: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.9rem;
  --fs-eyebrow: 0.8rem;

  /* Spacing scale (8px base) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  --section-pad-y: clamp(3.5rem, 6vw, 6rem);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(11, 32, 57, 0.06);
  --shadow-md: 0 12px 30px rgba(11, 32, 57, 0.1);
  --shadow-lg: 0 24px 60px rgba(11, 32, 57, 0.16);
  --shadow-gold: 0 10px 24px rgba(201, 143, 41, 0.28);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.2s var(--ease);
  --t-med: 0.4s var(--ease);
  --t-slow: 0.7s var(--ease);

  --container-max: 1240px;
}

/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-body);
  color: var(--gs-ink-700);
  background-color: var(--gs-white);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--t-fast);
}

img {
  max-width: 100%;
  display: block;
}

.container-gs {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

:focus-visible {
  outline: 3px solid var(--gs-gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5,
.font-display {
  font-family: var(--font-display);
  color: var(--gs-navy-950);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--fs-display-xl); }
h2 { font-size: var(--fs-display-lg); }
h3 { font-size: var(--fs-display-md); }
h4 { font-size: var(--fs-display-sm); }

p {
  margin: 0;
}

.text-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-gold-600);
}

.text-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gs-gold-500);
  display: inline-block;
}

.text-eyebrow--center {
  justify-content: center;
}

.text-lede {
  font-size: var(--fs-body-lg);
  color: var(--gs-ink-500);
  line-height: 1.75;
}

.text-on-dark { color: var(--gs-white); }
.text-on-dark h1, .text-on-dark h2, .text-on-dark h3, .text-on-dark h4 { color: var(--gs-white); }
.text-on-dark .text-lede { color: rgba(255,255,255,0.75); }

.section-heading {
  max-width: 720px;
  margin-bottom: var(--sp-5);
}
.section-heading.mx-auto { margin-inline: auto; text-align: center; }

.section-heading .text-eyebrow { margin-bottom: var(--sp-2); }
.section-heading h2 { margin-top: var(--sp-1); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   4. LAYOUT & SECTION RULES
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-pad-y);
  position: relative;
}

.section--tight { padding-block: calc(var(--section-pad-y) * 0.6); }

.bg-navy {
  background: linear-gradient(160deg, var(--gs-navy-950), var(--gs-navy-800));
  color: var(--gs-white);
}

/* Headings have their own explicit color rule (h1-h5 default to dark navy
   ink for light backgrounds), which otherwise wins over the inherited
   .bg-navy text color and renders near-invisible dark-on-dark text.
   This guarantees every heading inside a dark section stays readable,
   even if a page's markup forgot to add the .text-on-dark class. */
.bg-navy h1,
.bg-navy h2,
.bg-navy h3,
.bg-navy h4,
.bg-navy h5 {
  color: var(--gs-white);
}

.bg-cream { background-color: var(--gs-cream); }
.bg-cloud { background-color: var(--gs-cloud); }
.bg-white { background-color: var(--gs-white); }

/* Eyebrow labels need a brighter gold on dark sections — gs-gold-600 was
   designed for light backgrounds and reads as dull/low-contrast on navy. */
.bg-navy .text-eyebrow {
  color: var(--gs-gold-400);
}
.bg-navy .text-eyebrow::before {
  background: var(--gs-gold-400);
}

/* Clear separation between any dark section and the footer that follows it —
   without this, adjoining navy tones can visually run together. */
.gs-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 12px 24px -20px rgba(0, 0, 0, 0.5);
}

.divider-gold {
  width: 64px;
  height: 4px;
  background: var(--gs-gold-500);
  border-radius: var(--radius-pill);
  margin-block: var(--sp-2);
}

.section-divider-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn-gs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.btn-gs svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.btn-gs:hover svg { transform: translateX(4px); }

.btn-gold {
  background: var(--gs-gold-500);
  color: var(--gs-navy-950);
  border-color: var(--gs-gold-500);
}
.btn-gold:hover {
  background: var(--gs-gold-600);
  border-color: var(--gs-gold-600);
  color: var(--gs-navy-950);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-navy {
  background: var(--gs-navy-950);
  color: var(--gs-white);
  border-color: var(--gs-navy-950);
}
.btn-navy:hover {
  background: var(--gs-navy-700);
  border-color: var(--gs-navy-700);
  color: var(--gs-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-light {
  background: transparent;
  color: var(--gs-white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--gs-white);
  color: var(--gs-white);
  transform: translateY(-2px);
}

.btn-outline-navy {
  background: transparent;
  color: var(--gs-navy-950);
  border-color: var(--gs-navy-950);
}
.btn-outline-navy:hover {
  background: var(--gs-navy-950);
  color: var(--gs-white);
  transform: translateY(-2px);
}

.btn-sm { padding: 0.6rem 1.3rem; font-size: 0.8rem; }

.btn-round {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 0;
}

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card-gs {
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  height: 100%;
}

.card-gs:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card-gs .card-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gs-gold-100);
  color: var(--gs-gold-600);
  margin-bottom: var(--sp-3);
  transition: background var(--t-med), color var(--t-med);
}

.card-gs .card-icon svg { width: 30px; height: 30px; }

.card-gs:hover .card-icon {
  background: var(--gs-gold-500);
  color: var(--gs-navy-950);
}

.card-gs h4 { margin-bottom: var(--sp-1); font-size: 1.15rem; }
.card-gs p { color: var(--gs-ink-500); font-size: var(--fs-body-sm); }

.card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  color: var(--gs-white);
  height: 100%;
  transition: background var(--t-med), transform var(--t-med);
}
.card-dark:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); }

/* .card-dark's height:100% is meant for grid-cell usage (e.g. the
   Employment Benefits cards, which stretch to match their row). When the
   same class is reused as a standalone flex row (Salary Information list),
   there is no defined-height ancestor for 100% to resolve against, and it
   inflates each row to match the tall sibling column instead of staying a
   compact single line. */
.card-dark.d-flex.flex-row {
  height: auto;
}
.card-dark .card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gs-gold-500); color: var(--gs-gold-500);
  margin-bottom: var(--sp-2);
}
.card-dark .card-icon svg { width: 26px; height: 26px; }
.card-dark h4 { color: var(--gs-white); font-size: 1.05rem; margin-bottom: 0.4rem; }
.card-dark p { color: rgba(255,255,255,0.65); font-size: var(--fs-body-sm); margin: 0; }

.card-stat {
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
}
.card-stat .stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  font-weight: 700;
  color: var(--gs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.card-stat .stat-label {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-body-sm);
  margin-top: 0.25rem;
}
.card-stat .stat-icon { color: var(--gs-gold-500); margin-bottom: 0.5rem; }
.card-stat .stat-icon svg { width: 34px; height: 34px; }

/* Image placeholder blocks (for client photos to be inserted later) */
.img-placeholder {
  background: linear-gradient(135deg, var(--gs-navy-800), var(--gs-navy-600));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--sp-3);
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.img-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
}
.img-placeholder span { position: relative; z-index: 1; max-width: 220px; }
.img-placeholder.light {
  background: linear-gradient(135deg, var(--gs-cloud), var(--gs-border));
  color: var(--gs-ink-500);
}

/* --------------------------------------------------------------------------
   7. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.gs-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding-block: 1.25rem;
  background: transparent;
  transition: background-color var(--t-med), padding var(--t-med), box-shadow var(--t-med);
}

.gs-header.is-scrolled {
  background: var(--gs-navy-950);
  padding-block: 0.75rem;
  box-shadow: var(--shadow-md);
}

.gs-header .container-gs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.gs-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gs-white);
  line-height: 1.1;
}
.gs-brand .brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.gs-brand .brand-name {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.gs-brand .brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gs-gold-400);
  text-transform: uppercase;
}

.gs-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.gs-nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gs-nav-links a {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gs-white);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  position: relative;
}

.gs-nav-links a:hover,
.gs-nav-links a.active {
  color: var(--gs-gold-400);
  border-color: var(--gs-gold-500);
}

.gs-header-cta { display: flex; align-items: center; gap: var(--sp-2); }

.gs-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--gs-white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.gs-nav-toggle:hover {
  border-color: var(--gs-gold-500);
  background: rgba(217, 164, 65, 0.08);
}
.gs-nav-toggle .hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.gs-nav-toggle[aria-expanded="true"] {
  border-color: var(--gs-gold-500);
}
.gs-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.gs-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.gs-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Drawer */
.gs-mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--gs-navy-950);
  z-index: 1100;
  padding: var(--sp-4);
  transform: translateX(100%);
  transition: transform var(--t-med);
  overflow-y: auto;
  box-shadow: -16px 0 48px rgba(0,0,0,0.35);
}
.gs-mobile-nav.is-open { transform: translateX(0); }

.gs-mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}

.gs-mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gs-mobile-nav a {
  display: block;
  padding: 0.9rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gs-white);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gs-mobile-nav a.active,
.gs-mobile-nav a:hover { color: var(--gs-gold-400); }

.gs-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 24, 0.6);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med);
}
.gs-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.gs-footer {
  background: var(--gs-navy-950);
  color: rgba(255,255,255,0.7);
  padding-top: var(--sp-7);
}

.gs-footer h5 {
  color: var(--gs-white);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: var(--sp-3);
}

.gs-footer .brand-sub { color: var(--gs-gold-400); }

.gs-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.gs-footer ul a {
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.gs-footer ul a:hover { color: var(--gs-gold-400); padding-left: 4px; }

.gs-footer .footer-contact li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
}
.gs-footer .footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gs-gold-500); margin-top: 2px; }

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--sp-2);
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gs-white);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover { background: var(--gs-gold-500); border-color: var(--gs-gold-500); color: var(--gs-navy-950); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: var(--sp-6);
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover { color: var(--gs-gold-400); }

/* Floating WhatsApp button */
.gs-float-whatsapp {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
   background: #23bd5c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 900;
  transition: transform var(--t-fast);
}
.gs-float-whatsapp:hover { transform: scale(1.08); color: #fff; }
.gs-float-whatsapp svg { width: 30px; height: 30px; }

/* Back to top */
.gs-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 6rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gs-navy-950);
  color: var(--gs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--t-fast);
  z-index: 900;
  cursor: pointer;
}
.gs-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.gs-back-to-top svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   9. COMPONENTS
   -------------------------------------------------------------------------- */

/* Hero */
.gs-hero {
  padding-top: clamp(7rem, 12vw, 9rem);
  padding-bottom: var(--sp-6);
  background: linear-gradient(180deg, #eef2f7 0%, #f7f9fc 60%, #ffffff 100%);
  overflow: hidden;
  position: relative;
}
.gs-hero .hero-copy { max-width: 560px; }
.gs-hero h1 { margin-block: var(--sp-2); }
.gs-hero .hero-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Page hero (interior pages) */
.gs-page-hero {
  padding-top: clamp(7.5rem, 10vw, 9.5rem);
  padding-bottom: var(--sp-5);
  background: linear-gradient(160deg, var(--gs-navy-950), var(--gs-navy-800));
  position: relative;
  overflow: hidden;
}
.gs-page-hero .breadcrumb-gs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-top: var(--sp-2);
}
.gs-page-hero .breadcrumb-gs a { color: var(--gs-gold-400); }

/* Stat strip */
.stat-strip {
  background: var(--gs-navy-950);
  border-block: 1px solid rgba(255,255,255,0.08);
}
.stat-strip .col-divider {
  border-left: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 767.98px) {
  .stat-strip .col-divider { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--sp-3); margin-top: var(--sp-1); }
}

/* Timeline */
.gs-timeline { position: relative; padding-left: 2.5rem; }
.gs-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--gs-border);
}
.gs-timeline-item { position: relative; padding-bottom: var(--sp-5); }
.gs-timeline-item:last-child { padding-bottom: 0; }
.gs-timeline-item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gs-white);
  border: 3px solid var(--gs-gold-500);
}
.gs-timeline-item .step-number {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gs-gold-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gs-timeline-item h4 { margin-top: 0.25rem; margin-bottom: 0.4rem; }
.gs-timeline-item p { color: var(--gs-ink-500); font-size: var(--fs-body-sm); }

/* Accordion (FAQ) */
.gs-accordion-item {
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-2);
  overflow: hidden;
  background: var(--gs-white);
}
.gs-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 1.15rem 1.4rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--gs-navy-950);
  cursor: pointer;
}
.gs-accordion-trigger .plus-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gs-cloud);
  color: var(--gs-navy-950);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.gs-accordion-item.is-open .gs-accordion-trigger .plus-icon {
  transform: rotate(135deg);
  background: var(--gs-gold-500);
  color: var(--gs-navy-950);
}
.gs-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-med) ease;
}
.gs-accordion-panel-inner {
  padding: 0 1.4rem 1.3rem;
  color: var(--gs-ink-500);
  font-size: var(--fs-body-sm);
}

/* Testimonials / Carousel */
.gs-carousel-track-wrap { overflow: hidden; }
.gs-carousel-track {
  display: flex;
  transition: transform var(--t-slow);
}
.gs-carousel-slide {
  flex: 0 0 100%;
  padding-inline: 0.5rem;
}
@media (min-width: 768px) {
  .gs-carousel-slide { flex: 0 0 50%; }
}
@media (min-width: 992px) {
  .gs-carousel-slide { flex: 0 0 33.3333%; }
}
.gs-carousel-controls {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.testimonial-card {
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  height: 100%;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.testimonial-quote-icon { color: var(--gs-gold-400); width: 32px; height: 32px; margin-bottom: var(--sp-2); }
.testimonial-stars { color: var(--gs-gold-500); display: flex; gap: 2px; margin-top: var(--sp-3); }
.testimonial-stars svg { width: 16px; height: 16px; }
.testimonial-person { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--sp-3); }
.testimonial-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gs-cloud);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--gs-navy-800);
}
.testimonial-person strong { font-family: var(--font-display); font-size: 0.9rem; color: var(--gs-navy-950); display: block; }
.testimonial-person span { font-size: 0.78rem; color: var(--gs-ink-500); }

/* Country / destination cards */
.country-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
  color: var(--gs-white);
  background: linear-gradient(180deg, transparent, rgba(8,23,41,0.9)), linear-gradient(135deg, var(--gs-navy-700), var(--gs-navy-950));
  transition: transform var(--t-med);
}
.country-card:hover { transform: translateY(-6px); }
.country-card .flag-chip {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}
.country-card h4 { color: var(--gs-white); margin-bottom: 0.15rem; }
.country-card span { font-size: 0.8rem; color: rgba(255,255,255,0.7); }

/* Forms */
.gs-form-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gs-navy-950);
  margin-bottom: 0.4rem;
  display: block;
}
.gs-form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--gs-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gs-navy-950);
  background: var(--gs-white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.gs-form-control:focus {
  outline: none;
  border-color: var(--gs-gold-500);
  box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.18);
}
textarea.gs-form-control { resize: vertical; min-height: 130px; }

.form-card {
  background: var(--gs-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
}

.gs-toast {
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  background: rgba(31, 157, 91, 0.1);
  border: 1px solid rgba(31, 157, 91, 0.3);
  color: var(--gs-success);
  font-size: 0.9rem;
  display: none;
  align-items: center;
  gap: 0.6rem;
}
.gs-toast.is-visible { display: flex; }

/* Process step badge (numbered — used only for the real sequential recruitment journey) */
.process-step {
  text-align: center;
  position: relative;
}
.process-step .step-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gs-navy-950);
  color: var(--gs-gold-400);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-2);
  border: 2px solid var(--gs-gold-500);
}
.process-step h4 { font-size: 1rem; margin-bottom: 0.35rem; }
.process-step p { font-size: 0.85rem; color: var(--gs-ink-500); }

/* Gallery */
.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 180px;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.gallery-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-med);
}
.gallery-item:hover img {
  transform: scale(1.06);
}

/* Badge chips (industries, categories) */
.chip-gs {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--gs-cloud);
  border: 1px solid var(--gs-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gs-navy-800);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip-gs:hover { background: var(--gs-navy-950); color: var(--gs-white); border-color: var(--gs-navy-950); }

/* Themed active state for chip-style tab pills (e.g. Careers > Jobs by Country).
   Needed because Bootstrap's .nav-pills .nav-link.active ships its own blue
   background at higher specificity — this restores the site's gold/navy look. */
#jobsTab .nav-link.chip-gs.active {
  background: var(--gs-gold-500);
  color: var(--gs-navy-950);
  border-color: var(--gs-gold-500);
}

/* --------------------------------------------------------------------------
   10. ANIMATIONS
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(0.92); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.float-anim { animation: float-y 5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   11. UTILITIES
   -------------------------------------------------------------------------- */
.text-gold { color: var(--gs-gold-500) !important; }
.text-navy { color: var(--gs-navy-950) !important; }
.text-muted-gs { color: var(--gs-ink-500) !important; }
.rounded-gs-lg { border-radius: var(--radius-lg) !important; }
.rounded-gs-md { border-radius: var(--radius-md) !important; }
.shadow-gs-md { box-shadow: var(--shadow-md) !important; }
.icon-circle-outline {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--gs-gold-500);
  display: flex; align-items: center; justify-content: center;
  color: var(--gs-gold-500);
  flex-shrink: 0;
}
.icon-circle-outline svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .gs-nav-links,
  .gs-header-cta .btn-gs.d-desktop-only { display: none; }
  .gs-nav-toggle { display: flex; }
  .gs-hero { text-align: left; }
}

@media (max-width: 575.98px) {
  .gs-float-whatsapp { width: 50px; height: 50px; right: 1rem; bottom: 1rem; }
  .gs-back-to-top { right: 1rem; bottom: 5rem; width: 42px; height: 42px; }
}

.about-image-wrapper{
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(15,23,42,.12);
}

.about-image{
    width:100%;
    height:340px;
    object-fit:cover;
    display:block;
}

.country-card{
    position:relative;
    height:290px;
    border-radius:24px;
    overflow:hidden;
    cursor:pointer;
}

.country-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:0.5s;
}

.country-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(7,20,38,.88),
        rgba(7,20,38,.45),
        rgba(7,20,38,.15)
    );
}

.flag-chip{
    position:absolute;
    top:20px;
    right:20px;
    z-index:3;
}

.country-content{
    position:absolute;
    left:30px;
    bottom:30px;
    z-index:3;
    color:#fff;
}

.country-content h4{
    margin-bottom:8px;
    font-size:30px;
    font-weight:700;
}

.country-content span{
    color:#f3f3f3;
    font-size:15px;
}

.country-card:hover img{
    transform:scale(1.08);
}

.about-image{
    height:360px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.about-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.section-image{
    min-height:340px;
    height:340px;
    overflow:hidden;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.section-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ==========================================================================
   13. RESPONSIVE — FULL DEVICE COVERAGE (MOBILE / TABLET / LAPTOP)
   ==========================================================================
   Nothing above this line has been changed — colors, fonts, base font
   sizes and the desktop layout are exactly as before. Everything below
   only adapts spacing, image heights and layout at smaller breakpoints
   so the site works cleanly on phones, tablets and small laptops too.
   ========================================================================== */

/* Safety net: stop any stray element from creating horizontal scroll */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}
* {
  max-width: 100%;
}
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

/* -------------------- ≤1199.98px — small laptops / large tablets -------------------- */
@media (max-width: 1199.98px) {
  .container-gs {
    padding-inline: clamp(1.1rem, 3.5vw, 2rem);
  }
  .gs-nav-links {
    gap: var(--sp-3);
  }
}

/* -------------------- ≤991.98px — tablets -------------------- */
@media (max-width: 991.98px) {
  /* Header / navigation: real hamburger menu now drives mobile nav.
     .gs-nav-links stays hidden here (see rule in section 12 above);
     .gs-nav-toggle becomes visible; .gs-mobile-nav is the slide-out
     drawer opened by js/script.js. */
  .gs-header .container-gs {
    justify-content: space-between;
  }
  .gs-nav-toggle {
    display: flex;
  }

  /* Hero */
  .gs-hero {
    padding-top: clamp(6rem, 13vw, 8rem);
  }
  .gs-hero .hero-copy {
    max-width: 100%;
  }
  .hero-visual img {
    height: 320px !important;
  }

  /* Media blocks that had fixed pixel heights */
  .about-image {
    height: 300px;
  }
  .section-image {
    height: 280px;
    min-height: 280px;
  }
  .country-card {
    height: 240px;
  }
  .country-content {
    left: 22px;
    bottom: 22px;
    right: 22px;
  }
  .country-content h4 {
    font-size: 22px;
  }

  .form-card {
    padding: var(--sp-4);
  }

  .process-step .step-circle {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* -------------------- ≤767.98px — large phones / small tablets -------------------- */
@media (max-width: 767.98px) {
  .gs-brand .brand-mark {
    width: 36px;
    height: 36px;
  }
  .gs-logo {
    width: 44px;
    height: 44px;
    margin-right: 8px;
  }
  .gs-brand .brand-name {
    font-size: 0.92rem;
  }
  .gs-brand .brand-sub {
    font-size: 0.56rem;
  }

  .gs-hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .gs-hero .hero-actions .btn-gs {
    width: 100%;
  }
  .hero-visual img {
    height: 260px !important;
  }

  .about-image {
    height: 260px;
  }
  .section-image {
    height: 240px;
    min-height: 240px;
  }
  .country-card {
    height: 220px;
  }

  /* Job-rate rows on the Careers page */
  .card-dark.d-flex.flex-row {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .form-card {
    padding: var(--sp-3);
  }
  .testimonial-card {
    padding: var(--sp-3);
  }

  .gs-carousel-controls {
    gap: var(--sp-1);
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* -------------------- ≤575.98px — phones -------------------- */
@media (max-width: 575.98px) {
  .container-gs {
    padding-inline: 1.1rem;
  }

  .gs-header {
    padding-block: 0.85rem;
  }
  .gs-header.is-scrolled {
    padding-block: 0.6rem;
  }
  .gs-logo {
    width: 38px;
    height: 38px;
    margin-right: 8px;
  }

  .gs-hero {
    padding-top: clamp(5.25rem, 20vw, 7rem);
    padding-bottom: var(--sp-4);
  }
  .hero-visual img {
    height: 220px !important;
  }

  .card-stat .stat-icon svg {
    width: 26px;
    height: 26px;
  }
  .card-stat .stat-number {
    font-size: 1.5rem;
  }

  .about-image {
    height: 220px;
  }
  .section-image {
    height: 200px;
    min-height: 200px;
  }
  .country-card {
    height: 200px;
  }
  .country-content {
    left: 16px;
    bottom: 16px;
    right: 16px;
  }
  .country-content h4 {
    font-size: 19px;
  }
  .country-content span {
    font-size: 13px;
  }
  .flag-chip {
    top: 12px;
    right: 12px;
  }

  .process-step .step-circle {
    width: 50px;
    height: 50px;
    font-size: 1rem;
    margin-bottom: var(--sp-1);
  }
  .process-step h4 {
    font-size: 0.92rem;
  }
  .process-step p {
    font-size: 0.8rem;
  }

  .form-card {
    padding: var(--sp-3) var(--sp-2);
  }

  .gs-float-whatsapp {
    width: 50px;
    height: 50px;
    right: 1rem;
    bottom: 1rem;
  }
  .gs-back-to-top {
    right: 1rem;
    bottom: 5rem;
    width: 42px;
    height: 42px;
  }
}

/* -------------------- ≤399.98px — very small phones -------------------- */
@media (max-width: 399.98px) {
  .gs-brand .brand-sub {
    display: none;
  }
  .hero-visual img {
    height: 190px !important;
  }
  .country-card {
    height: 180px;
  }
  .about-image {
    height: 200px;
  }
  .btn-gs {
    padding: 0.8rem 1.4rem;
    font-size: 0.85rem;
  }
}

/* -------------------- Landscape phones (short viewport height) -------------------- */
@media (max-width: 991.98px) and (max-height: 480px) and (orientation: landscape) {
  .gs-hero {
    padding-top: 5.5rem;
    padding-bottom: var(--sp-3);
  }
  .hero-visual img {
    height: 200px !important;
  }
}

/* ================= LOGO ================= */

.gs-logo{
    width:60px;
    height:60px;
    object-fit:contain;
    margin-right:12px;
    flex-shrink:0;
    border-radius:14px;

}

.gs-logo-mobile{
    width:48px;
    height:48px;
    object-fit:contain;
    margin-right:10px;
    flex-shrink:0;
}

.gs-brand{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    min-width:0;
    text-decoration:none;
}

.brand-name{
    display:block;
}

.brand-sub{
    display:flex;
}

/* ================= FOOTER LOGO ================= */

.gs-footer .footer-logo{
    width: 60px;      /* adjust 120-150px if needed */
    height: 60px;
    object-fit: contain;
    display: block;
    margin-bottom: 10px;
    border-radius: 12px;
}

/* Mobile */
@media (max-width:768px){
    .gs-footer .footer-logo{
        width:110px;
        height:110px;
        margin:0 auto 20px;
    }

    .gs-footer .col-lg-4{
        text-align:center;
    }
}