/* 
======================================================
  TOP SKILLS CONSULTING — REFINED CORPORATE STYLESHEET V5
  1. Horizontal 3-column modal lightbox for desktop (zero vertical scroll required)
  2. About section with multiply blend industrial boardroom background
  3. Mobile drawer navigation animated smoothly like privy.io
  4. Services feature points clean layout (title on one line, desc underneath)
  5. Single-line descriptions for section headers
  6. Mobile hero matching privy.io style with high aesthetic impact
======================================================
*/

:root {
  /* Brand Corporate Colors */
  --brand-navy: #182B63;
  --brand-navy-dark: #0f1c42;
  --brand-navy-button: #182B63;
  --brand-gold: #C3992D;
  --brand-gold-hover: #b08722;

  /* Architectural Neutrals & Section Backgrounds */
  --bg-white: #ffffff;
  --bg-sand: #fcfcfb;
  --bg-slate: #f2f5f9;
  --bg-dark-section: #0c1633;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  /* Sharp Corners (as defined in Top Skills brand geometry) */
  --radius-sharp: 2px;
  --radius-none: 0px;
  --radius-circle: 50%;

  /* Borders & Shadows */
  --border-light: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.16);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 10px 25px -5px rgba(24, 43, 99, 0.08);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.2);

  --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Universal Mobile Guard */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--text-primary);
}

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

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

/* ======================================================
   TOP CONTACT BAR (Phone & Email only)
====================================================== */
.top-contact-bar {
  background: #0d1733;
  color: #cbd5e1;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-contact-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}

.top-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #cbd5e1;
  white-space: nowrap;
}

.top-contact-item i {
  color: var(--brand-gold);
  font-size: 0.85rem;
}

.top-contact-item a:hover {
  color: #ffffff;
}

/* ======================================================
   HEADER & NAVIGATION BAR (2X Logo, Clean CTA)
====================================================== */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  z-index: 99;
  height: 84px;
  display: flex;
  align-items: center;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo-brand {
  display: flex;
  align-items: center;
}

.logo-svg-img {
  height: 52px;
  width: auto;
  display: block;
}

.nav-right-group {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.4rem 0;
  position: relative;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--brand-navy);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-sharp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-sharp);
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-sharp-primary {
  background: var(--brand-navy);
  color: #ffffff;
  border-color: var(--brand-navy);
}

.btn-sharp-primary:hover {
  background: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
}

.btn-sharp-ghost {
  background: var(--bg-white);
  color: var(--brand-navy);
  border-color: var(--border-medium);
}

.btn-sharp-ghost:hover {
  background: var(--bg-slate);
  border-color: var(--brand-navy);
}

.btn-sharp-gold {
  background: var(--brand-gold);
  color: #ffffff;
  border-color: var(--brand-gold);
}

.btn-sharp-gold:hover {
  background: var(--brand-gold-hover);
}

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sharp);
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 1.25rem;
}

/* ======================================================
   MOBILE DRAWER (Privy.io Animated Fullscreen Overlay)
====================================================== */
.mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.mobile-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 2px solid var(--brand-navy);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.5rem 1.75rem 2.5rem;
}

.mobile-drawer-overlay.active .mobile-drawer {
  transform: translateY(0);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 1rem;
}

.mobile-drawer-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
}

.mobile-drawer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-drawer-links a {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-drawer-links a i {
  font-size: 0.85rem;
  color: var(--brand-gold);
}

.mobile-drawer-cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ======================================================
   HERO SECTION (Background image right + gradient blend)
====================================================== */
.hero {
  position: relative;
  padding: 5.5rem 0 4.5rem;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 100%;
  background-image: url('hero_manufacturing.jpg');
  background-size: cover;
  background-position: center right;
  opacity: 1;
  z-index: 1;
  /* Smooth dissolve right past the headline */
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 12%, black 28%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 12%, black 28%);
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  bottom: 0;
  background: linear-gradient(to right, #ffffff 65%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 700px;
}

.hero-headline {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--brand-navy);
  margin-bottom: 1.35rem;
}

.hero-headline span.gold-highlight {
  color: var(--brand-gold);
}

.hero-description {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 2.25rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.hero-stats-row {
  display: flex;
  gap: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.hero-stat-item strong {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.1;
}

.hero-stat-item span {
  font-size: 0.825rem;
  color: var(--text-muted);
}

.hero-mobile-photo-wrap {
  display: none;
}

/* ======================================================
   INFINITE CLIENT LOGOS MARQUEE (Continuous, Floating Logos)
====================================================== */
.marquee-section {
  padding: 1.75rem 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
  position: relative;
}

.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
  animation: marqueeScroll 36s linear infinite;
}

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Clean floating logos: no borders, matching background */
.client-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: transparent;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  padding: 0;
}

.client-logo-card img {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ======================================================
   SECTION ARCHITECTURE & SINGLE-LINE DESCRIPTIONS
====================================================== */
.section {
  padding: 5.5rem 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.section-white {
  background: var(--bg-white);
}

.section-slate {
  background: var(--bg-slate);
}

.section-sand {
  background: var(--bg-sand);
}

.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-gold);
  margin-bottom: 0.65rem;
}

.section-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
}

/* Single-line description (prevents awkward 2-line break) */
.section-description-single {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 1100px;
  /* Allows full single line */
  margin-bottom: 3.25rem;
}

/* ======================================================
   BENTO SERVICES GRID (Organized Point + Description under)
====================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.bento-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sharp);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.bento-card:hover {
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-card);
}

.bento-card-colored {
  background: #fdfdfc;
  border-left: 4px solid var(--brand-gold);
}

.bento-card-navy {
  background: #f8fafc;
  border-left: 4px solid var(--brand-navy);
}

.bento-col-6 {
  grid-column: span 6;
}

.bento-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sharp);
  background: var(--brand-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.bento-title {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}

.bento-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Clean stacked layout: Point on line 1, description underneath */
.bento-feature-list {
  list-style: none;
  border-top: 1px solid var(--border-light);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bento-feature-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bento-feature-item .point-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--brand-navy);
}

.bento-feature-item .point-title i {
  color: var(--brand-gold);
  font-size: 0.8rem;
}

.bento-feature-item .point-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding-left: 1.35rem;
  /* Aligns neatly under point title */
  line-height: 1.55;
}

/* ======================================================
   COURSE CATALOG (Tabs & Cards)
====================================================== */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.25rem;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sharp);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.catalog-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sharp);
  color: var(--text-secondary);
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn:hover {
  background: var(--bg-slate);
  color: var(--brand-navy);
}

.tab-btn.active {
  background: var(--brand-navy);
  color: #ffffff;
}

.catalog-mobile-select-wrap {
  display: none;
}

.search-box-wrap {
  position: relative;
  min-width: 300px;
}

.search-box-wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  background: var(--bg-slate);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sharp);
  font-size: 0.875rem;
  outline: none;
  font-family: inherit;
  transition: var(--transition);
}

.search-input:focus {
  background: var(--bg-white);
  border-color: var(--brand-navy);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
}

.course-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sharp);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.course-card:hover {
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.course-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-sharp);
  margin-bottom: 0.75rem;
}

.cat-estrategico {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.cat-formacion {
  background: #fefce8;
  color: #854d0e;
  border: 1px solid #fef08a;
}

.cat-competencias {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.cat-desempeno {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.course-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}

.course-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
  padding-top: 1rem;
}

/* ======================================================
   HORIZONTAL 3-COLUMN MODAL LIGHTBOX (Zero Scroll on Desktop)
====================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 24, 56, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  padding: 1.5rem;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Wide Horizontal Card for Desktop */
.modal-card {
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sharp);
  width: 100%;
  max-width: 1080px;
  /* Wide format */
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.45);
  position: relative;
  transform: translateY(16px) scale(0.99);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.modal-overlay.active .modal-card {
  transform: translateY(0) scale(1);
}

/* 2-Column Grid on Desktop: 1/3 Cover Image, 2/3 Unified Content */
.modal-grid-2col {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 480px;
}

.modal-col-img {
  position: relative;
  background: #0d1733;
}

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

.modal-col-main {
  padding: 2.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
}

.modal-header-meta {
  margin-bottom: 1.25rem;
}

.modal-body-section {
  margin-bottom: 1.25rem;
}

.modal-actions-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 1.1rem;
  transition: var(--transition);
  z-index: 10;
}

.modal-close-btn:hover {
  background: var(--brand-navy);
  color: #ffffff;
}

.modal-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--brand-navy);
  margin-top: 0.5rem;
  line-height: 1.25;
}

.modal-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-gold);
  margin-bottom: 0.4rem;
}

.modal-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.modal-highlight-box {
  background: var(--bg-slate);
  border-left: 3px solid var(--brand-navy);
  border: 1px solid var(--border-light);
  border-left-width: 3px;
  padding: 1.15rem 1.25rem;
}

/* ======================================================
   SECTORS SECTION (With Sector Icons)
====================================================== */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.sector-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--brand-navy);
  border-radius: var(--radius-sharp);
  padding: 2.25rem 1.75rem;
  transition: var(--transition);
}

.sector-card:hover {
  border-top-color: var(--brand-gold);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.sector-naked-icon {
  font-size: 2.25rem;
  color: var(--brand-navy);
  margin-bottom: 1.25rem;
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.sector-card:hover .sector-naked-icon {
  color: var(--brand-gold);
  transform: translateY(-2px);
}

.sector-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--brand-gold);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.sector-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}

.sector-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ======================================================
   ABOUT SECTION WITH MULTIPLY BLEND BACKGROUND IMAGE
====================================================== */
.section-about {
  position: relative;
  background-color: #0c1633;
  color: #ffffff;
  overflow: hidden;
  padding: 6.5rem 0;
}

/* Background image with multiply blend effect */
.section-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('about_team.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.60;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 1;
}

.section-about::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(12, 22, 51, 0.95) 0%, rgba(15, 28, 66, 0.88) 100%);
  pointer-events: none;
  z-index: 2;
}

.about-content-wrap {
  position: relative;
  z-index: 3;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: center;
}

/* ======================================================
   CONTACT & FORM SECTION
====================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2.5rem;
}

.contact-info-panel {
  background: var(--brand-navy);
  color: #ffffff;
  border-radius: var(--radius-sharp);
  padding: 3rem 2.5rem;
  border-top: 4px solid var(--brand-gold);
}

.contact-info-panel h3 {
  color: #ffffff;
  font-size: 1.85rem;
  margin-bottom: 0.85rem;
}

.contact-info-panel p {
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.contact-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin-bottom: 2.5rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon-box {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.contact-text-box span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.contact-text-box a,
.contact-text-box strong {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 600;
}

.form-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sharp);
  padding: 2.75rem;
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.form-group label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-slate);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sharp);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--brand-navy);
  background: var(--bg-white);
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
}

/* ======================================================
   FOOTER (Button Navy Blue Background #182B63, 3X Logo)
====================================================== */
.site-footer {
  background-color: var(--brand-navy-button);
  color: #cbd5e1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4.5rem 0 2.5rem;
  font-size: 0.875rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.logo-footer-img {
  height: 88px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: #cbd5e1;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--brand-gold);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 2rem;
  font-size: 0.8125rem;
  color: #94a3b8;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ======================================================
   FLOATING WHATSAPP BUTTON (With Auto-fade CTA Balloon)
====================================================== */
.floating-whatsapp-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 999;
}

.whatsapp-balloon {
  background: #ffffff;
  color: #0f172a;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-size: 0.825rem;
  font-weight: 600;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border-light);
  white-space: nowrap;
  position: relative;
  animation: floatBubble 3s ease-in-out infinite alternate;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.whatsapp-balloon::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ffffff;
}

.floating-whatsapp-btn {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-circle);
  background: #25D366;
  color: #ffffff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  border: 2px solid #ffffff;
}

.floating-whatsapp-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55);
}

@keyframes floatBubble {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-4px);
  }
}

/* ======================================================
   RESPONSIVE DESIGN (Privy.io Mobile Perfection)
====================================================== */
@media (max-width: 1024px) {
  .hero::before {
    width: 60%;
    opacity: 0.4;
  }

  .bento-col-6 {
    grid-column: span 12;
  }

  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  /* Modal switches to clean vertical on tablet/mobile */
  .modal-grid-2col {
    grid-template-columns: 1fr;
  }

  .modal-col-img {
    height: 200px;
  }

  .modal-col-main {
    padding: 1.75rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }

  .top-contact-bar {
    padding: 0.45rem 0;
  }

  .top-contact-inner {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  .top-contact-item {
    font-size: 0.775rem;
  }

  .site-header {
    height: 72px;
  }

  .logo-svg-img {
    height: 44px;
    max-width: 180px;
  }

  .nav-menu {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .nav-actions .btn-sharp {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
  }

  /* Hero Mobile Exactly Matching Mockup with Visible Marquee on 1st Screen */
  .hero {
    padding: 1.5rem 0 0;
    position: relative;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .hero::before,
  .hero::after {
    display: none !important;
  }

  .hero-inner {
    position: relative;
    z-index: 3;
    padding-bottom: 0;
  }

  .hero-headline {
    font-size: 1.7rem;
    line-height: 1.15;
    margin-bottom: 0.65rem;
    letter-spacing: -0.035em;
  }

  .hero-description {
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 1rem;
    color: var(--text-secondary);
  }

  .hero-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 1.15rem;
  }

  .hero-actions .btn-sharp {
    flex: 1;
    padding: 0.65rem 0.5rem;
    font-size: 0.775rem;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
  }

  /* Compact horizontal stats row */
  /* Compact horizontal stats row with translucent glass letting the photo show subtly behind */
  .hero-stats-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 0.35rem;
    padding: 0.95rem 0.25rem 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    position: relative;
    z-index: 4;
    background: transparent;
  }

  .hero-stat-item {
    flex: 1;
    text-align: center;
  }

  .hero-stat-item strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1.1;
  }

  .hero-stat-item span {
    font-size: 0.65rem;
    color: var(--text-secondary);
    line-height: 1.15;
    display: block;
    margin-top: 0.15rem;
  }

  /* Photo extended upwards behind the stats row with soft fade */
  .hero-mobile-photo-wrap {
    display: block;
    width: 100%;
    height: 380px;
    margin-top: -70px;
    /* Pulls the photo up behind the stats */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .hero-mobile-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    /* Soft fade starting right behind the stats */
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 10%,
        rgba(0, 0, 0, 0.45) 22%,
        rgba(0, 0, 0, 0.8) 32%,
        black 45%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 10%,
        rgba(0, 0, 0, 0.45) 22%,
        rgba(0, 0, 0, 0.8) 32%,
        black 45%);
  }

  /* Marquee situated exactly at the bottom border of the viewport */
  .marquee-section {
    padding: 1.35rem 0;
  }

  .client-logo-card img {
    max-height: 32px;
  }

  /* Catalog: Replace messy tabs with sleek dropdown selector on mobile */
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 1.15rem;
    gap: 1rem;
  }

  .catalog-tabs {
    display: none;
    /* Hidden on mobile in favor of the clean dropdown */
  }

  .catalog-mobile-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
  }

  .catalog-mobile-select-label {
    font-size: 0.775rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .custom-select-box {
    position: relative;
    width: 100%;
  }

  .catalog-mobile-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1.5px solid var(--brand-navy);
    border-radius: var(--radius-sharp);
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--brand-navy);
    cursor: pointer;
    outline: none;
    box-shadow: var(--shadow-sm);
    font-family: inherit;
  }

  .select-chevron {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-navy);
    font-size: 0.85rem;
    pointer-events: none;
  }

  .search-box-wrap {
    min-width: 100%;
  }

  .courses-grid {
    grid-template-columns: 1fr;
  }

  .sectors-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 1.5rem;
  }

  .contact-info-panel {
    padding: 2rem 1.5rem;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .logo-footer-img {
    height: 64px;
  }

  .floating-whatsapp-wrap {
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-balloon {
    display: none;
  }

  .floating-whatsapp-btn {
    width: 52px;
    height: 52px;
    font-size: 1.75rem;
  }
}