/* ==========================================================================
   4Achievers - Creative Design Course Platform
   Master Stylesheet - 100% Authentic PDF Replication
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

:root {
  /* Brand Theme Colors */
  --color-primary: #583CE8;
  --color-primary-dark: #472DC4;
  --color-primary-light: #F0EDFE;
  
  --color-accent-purple: #7C3AED;
  --color-accent-magenta: #D946EF;
  --color-accent-pink: #FF2A6D;
  --color-accent-cyan: #06B6D4;
  --color-accent-blue: #2065F5;
  --color-accent-amber: #F59E0B;
  --color-accent-green: #10B981;

  /* Gradients */
  --grad-ai-title: linear-gradient(135deg, #7C3AED 0%, #D946EF 100%);
  --grad-primary-btn: linear-gradient(135deg, #6A36E8 0%, #3B54E6 100%);
  --grad-counsel-btn: linear-gradient(90deg, #FF2A6D 0%, #8A2BE2 100%);
  --grad-dark-bg: radial-gradient(circle at 50% 30%, #1A1448 0%, #0E0C26 70%, #080718 100%);

  /* Neutrals */
  --bg-page: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-dark-section: #0E0C26;
  --bg-dark-card: #17133D;
  
  --border-light: #EBF0F7;
  --border-medium: #E2E8F0;
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-purple-glow: rgba(168, 85, 247, 0.35);

  /* Fonts */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', var(--font-body);
  --font-accent: 'Architects Daughter', cursive, sans-serif;

  /* Text Colors */
  --text-heading: #0F172A;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-light-heading: #FFFFFF;
  --text-light-body: #CBD5E1;
  --text-light-muted: #94A3B8;

  /* Layout */
  --container-max-w: 1380px;
  --section-pad-y: 50px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--text-body);
  line-height: 1.6;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  position: relative;
}

.section-dark {
  background: var(--grad-dark-bg);
  color: var(--text-light-body);
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6366F1;
  margin-bottom: 8px;
}

.section-dark .section-label {
  color: #A78BFA;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--text-heading);
  letter-spacing: -0.025em;
}

.section-dark .section-title {
  color: var(--text-light-heading);
}

.section-subtitle {
  font-size: 1.02rem;
  color: var(--text-muted);
  max-width: 660px;
  margin: 10px auto 0;
}

.gradient-text {
  background: var(--grad-ai-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: 9999px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--grad-primary-btn);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(106, 54, 232, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(106, 54, 232, 0.45);
}

.btn-blue {
  background-color: var(--color-accent-blue);
  color: #FFFFFF;
}

.btn-blue:hover {
  background-color: #1A52CC;
  transform: translateY(-2px);
}

.btn-demo {
  background-color: #FFFFFF;
  color: #0F172A;
  border: 1.5px solid #0F172A;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn-demo:hover {
  background-color: #F8FAFC;
  transform: translateY(-2px);
}

.play-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #0F172A;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.play-circle svg {
  width: 10px;
  height: 10px;
  margin-left: 2px;
}

.btn-counsel {
  background: var(--grad-counsel-btn);
  color: #FFFFFF;
  box-shadow: 0 8px 25px rgba(255, 42, 109, 0.35);
}

.btn-counsel:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 42, 109, 0.45);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #F1F5F9;
  transition: box-shadow 0.25s ease;
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.brand-logo img,
.logo-wrapper img,
.logo-img {
  height: 44px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-accent-blue);
}

.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 280px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 100;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 0.9rem;
  color: #334155;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #F1F5F9;
  color: var(--color-accent-blue);
  padding-left: 24px;
}

.dropdown-item.active-course {
  background-color: #EFF6FF;
  color: var(--color-accent-blue);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  transition: all 0.2s ease;
}

.search-btn:hover {
  color: #0F172A;
  border-color: #CBD5E1;
}

.mobile-toggle {
  display: none;
  font-size: 1.5rem;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  padding-top: 48px;
  padding-bottom: 32px;
  background: radial-gradient(circle at 85% 25%, rgba(168, 85, 247, 0.16) 0%, rgba(217, 70, 239, 0.06) 40%, rgba(255, 255, 255, 0) 70%), #FFFFFF;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  align-items: center;
  gap: 52px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #583CE8 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 8px 20px;
  border-radius: 9999px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(88, 60, 232, 0.25);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 4.4vw, 4.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #0F172A;
  margin-bottom: 18px;
}

.hero-title .title-black {
  display: block;
  color: #090D16;
}

.hero-title .title-gradient {
  background: linear-gradient(135deg, #6A36E8 0%, #D946EF 60%, #FF2A6D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.hero-subtitle {
  font-size: 1.32rem;
  font-weight: 800;
  color: #1E293B;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.hero-desc {
  font-size: 1.06rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: 34px;
  max-width: 560px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Multi-layered Hero Stage */
.hero-stage-container {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.hero-main-frame {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(106, 54, 232, 0.35), 0 0 0 1px rgba(168, 85, 247, 0.25);
  background: #0F172A;
  transition: transform 0.4s ease;
}

.hero-main-frame:hover {
  transform: scale(1.01);
}

.hero-main-art {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  display: block;
}

/* Floating Badges & Cards on Hero */
.hero-float-chip {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 800;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease;
}

.chip-generate {
  top: 24px;
  left: -20px;
  background: rgba(255, 255, 255, 0.92);
  color: #1E1B4B;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  animation: floatSlow 5s ease-in-out infinite alternate;
}

.chip-sparkle {
  color: #7C3AED;
  font-size: 1rem;
}

.chip-ai-glow {
  bottom: 24px;
  left: 45%;
  background: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  color: #FFFFFF;
  padding: 10px 22px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  animation: floatSlow 4s ease-in-out 1s infinite alternate;
}

.chip-ai-glow .ai-text {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}

.hero-float-card {
  position: absolute;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.hero-float-card:hover {
  transform: translateY(-4px) scale(1.03);
}

.card-video {
  top: 36px;
  right: -24px;
  width: 175px;
  border: 2px solid #A855F7;
  animation: floatSlow 4.5s ease-in-out 0.5s infinite alternate;
}

.card-video .float-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
}

.card-video .float-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.float-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.85);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.float-play-btn svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.card-edit {
  bottom: 36px;
  left: -24px;
  width: 145px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  animation: floatSlow 5.5s ease-in-out 1.5s infinite alternate;
}

.card-edit .float-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
}

.card-edit .float-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-enhance {
  bottom: 20px;
  right: -14px;
  width: 140px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  animation: floatSlow 4.8s ease-in-out 2s infinite alternate;
}

.card-enhance .float-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}

.card-enhance .float-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.float-card-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0F172A;
  text-align: center;
  padding: 6px 4px 2px;
  letter-spacing: 0.02em;
}

@keyframes floatSlow {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* Feature Badges Bar */
.trust-bar {
  margin-top: 36px;
  padding: 22px 32px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  padding: 0 20px;
}

.trust-item:not(:last-child) {
  border-right: 1px solid #EDF2F7;
}

.trust-icon-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #A855F7;
  color: #7C3AED;
  background-color: #FAF5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

.trust-text h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
}

.trust-text p {
  font-size: 0.84rem;
  color: #64748B;
  margin-top: 3px;
}

/* ==========================================================================
   About The Program Section
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr;
  align-items: center;
  gap: 60px;
}

.about-desc {
  font-size: 1.08rem;
  color: #475569;
  line-height: 1.72;
  margin: 18px 0 32px;
}

/* Authentic 5-Card About Collage Grid */
.about-collage-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  grid-template-rows: 210px 210px;
  gap: 16px;
}

.about-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #0F172A;
}

.about-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.about-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.about-card:hover img {
  transform: scale(1.05);
}

.card-nature {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.card-sneaker {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.card-tower {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.card-cyber {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.card-robot {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.about-card-overlay {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
}

.about-card-overlay h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Workflow Pipeline (Dark Section)
   ========================================================================== */
.workflow-pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.workflow-card {
  background-color: var(--bg-dark-card);
  border: 1px solid var(--border-dark);
  border-radius: 18px;
  padding: 24px 18px;
  position: relative;
  transition: all 0.25s ease;
}

.workflow-card:hover {
  border-color: var(--border-purple-glow);
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.workflow-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.workflow-icon-1 { background-color: rgba(59, 130, 246, 0.15); border: 1.5px solid #3B82F6; color: #60A5FA; }
.workflow-icon-2 { background-color: rgba(16, 185, 129, 0.15); border: 1.5px solid #10B981; color: #34D399; }
.workflow-icon-3 { background-color: rgba(6, 182, 212, 0.15); border: 1.5px solid #06B6D4; color: #22D3EE; }
.workflow-icon-4 { background-color: rgba(168, 85, 247, 0.15); border: 1.5px solid #A855F7; color: #C084FC; }
.workflow-icon-5 { background-color: rgba(99, 102, 241, 0.15); border: 1.5px solid #6366F1; color: #818CF8; }

.workflow-card-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.workflow-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #0E0C26;
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.workflow-text h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.workflow-text p {
  font-size: 0.82rem;
  color: #CBD5E1;
  line-height: 1.4;
}

.workflow-connector {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  z-index: 2;
}

/* ==========================================================================
   Tools Section
   ========================================================================== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.tool-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: 18px;
  padding: 26px 16px;
  text-align: center;
  transition: all 0.25s ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: #A5B4FC;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.tool-svg {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
}

.tool-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.tool-card p {
  font-size: 0.8rem;
  color: #64748B;
  line-height: 1.45;
}

/* ==========================================================================
   Student Projects
   ========================================================================== */
.projects-header {
  text-align: center;
  margin-bottom: 20px;
}

.projects-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-pills-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto;
  max-width: 100%;
}

.filter-pill {
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 600;
  background-color: #F8FAFC;
  border: 1px solid var(--border-medium);
  color: #334155;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  background-color: #F1F5F9;
}

.filter-pill.active {
  background-color: #583CE8;
  border-color: #583CE8;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(88, 60, 232, 0.3);
}

.view-more-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  border-radius: 9999px;
  border: 1.5px solid #2563EB;
  color: #2563EB;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}

.view-more-pill:hover {
  background-color: #EFF6FF;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.project-card {
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-6px);
}

.project-thumb {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  aspect-ratio: 1 / 1;
  position: relative;
  background: #0F172A;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-card:hover .project-thumb img {
  transform: scale(1.06);
}

/* Card 3: Social Media Typography Badge */
.project-overlay-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}

.project-overlay-badge h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
  color: #FCD34D;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.7);
  letter-spacing: -0.01em;
}

/* Card 4: Video Play Button */
.project-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.85);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, background-color 0.25s ease;
  z-index: 2;
}

.project-card:hover .project-play-btn {
  transform: scale(1.12);
  background: rgba(106, 54, 232, 0.95);
}

.project-play-btn svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.project-card h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0F172A;
  margin-top: 14px;
  text-align: center;
}

/* ==========================================================================
   Curriculum Section
   ========================================================================== */
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 26px;
}

.curriculum-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.25s ease;
}

.curriculum-card:hover {
  transform: translateY(-4px);
  border-color: #C7D2FE;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.curr-squircle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.curr-squircle-1 { background-color: #FEF3C7; color: #D97706; }
.curr-squircle-2 { background-color: #D1FAE5; color: #059669; }
.curr-squircle-3 { background-color: #DBEAFE; color: #2563EB; }
.curr-squircle-4 { background-color: #CFFAFE; color: #0891B2; }
.curr-squircle-5 { background-color: #FFE4E6; color: #E11D48; }
.curr-squircle-6 { background-color: #EDE9FE; color: #7C3AED; }

.curr-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.curr-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #94A3B8;
}

.curr-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0F172A;
}

.curr-desc {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.48;
}

/* ==========================================================================
   Career Section
   ========================================================================== */
.career-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
}

.career-roles-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.career-pill {
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.career-pill:hover {
  border-color: #818CF8;
  color: var(--color-primary);
  transform: translateY(-2px);
}

.career-chevron {
  color: #94A3B8;
  font-size: 0.85rem;
}

.career-dual-images {
  display: flex;
  gap: 20px;
  align-items: stretch;
  height: 420px;
}

.career-img-col-left {
  flex: 0 0 34%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
  background: #0F172A;
}

.career-img-col-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  transition: transform 0.4s ease;
}

.career-img-col-left:hover img {
  transform: scale(1.05);
}

.career-img-col-right {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
  background: #0F172A;
}

.career-img-col-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.career-img-col-right:hover img {
  transform: scale(1.05);
}

.career-revolution-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, rgba(20, 14, 52, 0.95) 0%, rgba(88, 60, 232, 0.95) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 14px 22px;
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
  transition: transform 0.25s ease;
}

.career-revolution-badge:hover {
  transform: translateY(-3px) scale(1.02);
}

.career-revolution-badge p {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
}

.career-revolution-badge .arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1E164D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* ==========================================================================
   Why Choose 4Achievers (Row Layout - No cards)
   ========================================================================== */
.why-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 52px;
  text-align: center;
}

.why-icon-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.why-circle-1 { background-color: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.why-circle-2 { background-color: rgba(244, 63, 94, 0.2); color: #FB7185; }
.why-circle-3 { background-color: rgba(6, 182, 212, 0.2); color: #22D3EE; }
.why-circle-4 { background-color: rgba(168, 85, 247, 0.2); color: #C084FC; }
.why-circle-5 { background-color: rgba(16, 185, 129, 0.2); color: #34D399; }

.why-row h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.why-row p {
  font-size: 0.86rem;
  color: #CBD5E1;
  line-height: 1.45;
}

/* ==========================================================================
   Pre-Footer CTA Banner (Authentic High-End Responsive Component)
   ========================================================================== */
.cta-banner-section {
  padding: 56px 0;
  background: linear-gradient(135deg, #090620 0%, #160D42 50%, #0A0622 100%);
  position: relative;
  overflow: hidden;
}

.cta-banner-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.cta-banner-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 2;
}

.cta-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.14;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}

.cta-content p {
  font-size: 1.12rem;
  color: #CBD5E1;
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 32px;
}

.cta-btn-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.btn-cta-enquire {
  background: linear-gradient(135deg, #FF2A6D 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1rem;
  padding: 15px 36px;
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(255, 42, 109, 0.4);
  transition: all 0.25s ease;
}

.btn-cta-enquire:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(255, 42, 109, 0.55);
}

.btn-cta-brochure {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 30px;
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}

.btn-cta-brochure:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.cta-slogan-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: rotate(-3deg);
  user-select: none;
}

.cta-slogan-word {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 35px rgba(168, 85, 247, 0.5), 0 2px 10px rgba(0,0,0,0.4);
}

/* ==========================================================================
   FAQ & Free Counselling Split Section
   ========================================================================== */
.faq-counsel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.faq-pill {
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  background-color: #FFFFFF;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-summary {
  padding: 18px 22px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0F172A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-toggle-plus {
  font-size: 1.4rem;
  font-weight: 400;
  color: #0F172A;
  transition: transform 0.2s ease;
  line-height: 1;
}

.faq-pill[open] .faq-toggle-plus {
  transform: rotate(45deg);
}

.faq-body {
  padding: 0 22px 18px;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
}

/* Counselling Card */
.counselling-box {
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.counselling-box h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.counselling-box p {
  font-size: 0.9rem;
  color: #64748B;
  margin-bottom: 24px;
}

.form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-item label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

.form-item .star {
  color: #FF2A6D;
}

.form-field {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: 0.9rem;
  background-color: #FFFFFF;
  color: #0F172A;
  transition: border-color 0.2s ease;
}

.form-field:focus {
  border-color: #6366F1;
}

.counsel-submit {
  width: 100%;
  margin-top: 8px;
  padding: 15px;
  font-size: 1rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: #080718;
  color: #94A3B8;
  padding: 40px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.88rem;
}

.footer-nav a:hover {
  color: #FFFFFF;
}

/* Dialog Modal */
dialog.custom-modal {
  margin: auto;
  border: none;
  border-radius: 20px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  position: relative;
}

dialog.custom-modal::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Toast */
.toast-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #0F172A;
  color: #FFFFFF;
  padding: 14px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-grid,
  .about-grid,
  .career-grid,
  .cta-banner-grid,
  .faq-counsel-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .workflow-pipeline,
  .tools-grid,
  .why-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .curriculum-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-bar {
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
  }
  .trust-item {
    flex: 1 1 45%;
    padding: 0;
  }
  .trust-item:not(:last-child) {
    border-right: none;
  }
  .workflow-connector {
    display: none;
  }
  .about-collage-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px 180px;
  }
  .card-nature { grid-column: 1 / 2; grid-row: 1 / 2; }
  .card-sneaker { grid-column: 2 / 3; grid-row: 1 / 2; }
  .card-tower { grid-column: 1 / 2; grid-row: 2 / 3; }
  .card-cyber { grid-column: 2 / 3; grid-row: 2 / 3; }
  .card-robot { grid-column: 1 / 3; grid-row: 3 / 4; }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .mobile-toggle {
    display: block;
    background: transparent;
    color: #0F172A;
  }
  .tools-grid,
  .workflow-pipeline,
  .why-row,
  .curriculum-grid,
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .career-roles-3col {
    grid-template-columns: 1fr;
  }
  .form-2col {
    grid-template-columns: 1fr;
  }
  .career-dual-images {
    flex-direction: column;
    height: auto;
  }
  .career-img-col-left,
  .career-img-col-right {
    width: 100%;
    height: 280px;
  }
  .about-collage-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .about-card {
    height: 220px;
  }
  .hero-float-chip,
  .hero-float-card {
    display: none;
  }
  .cta-slogan-col {
    display: none;
  }
  .cta-content {
    text-align: center;
  }
  .cta-btn-group {
    justify-content: center;
  }
}

/* ==========================================================================
   Video Editing & Post Production Landing Page Styles
   ========================================================================== */

/* Dark Cinematic Theme Sections */
.video-dark-suite {
  background: #09080F;
  color: #F8FAFC;
  position: relative;
  overflow: hidden;
}

.video-dark-suite::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 600px;
  background: radial-gradient(circle at 60% 30%, rgba(255, 56, 92, 0.12) 0%, rgba(255, 87, 34, 0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.video-hero-section {
  padding: 50px 0 30px;
  position: relative;
  z-index: 1;
}

.video-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 56, 92, 0.1);
  border: 1px solid rgba(255, 56, 92, 0.35);
  color: #FF5722;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 20px;
}

.video-hero-title {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #FFFFFF;
}

.title-gradient-video {
  background: linear-gradient(135deg, #FF385C 0%, #FF5722 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.video-hero-subtitle {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.video-hero-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #94A3B8;
  max-width: 580px;
  margin-bottom: 26px;
}

/* Hero Feature Pills (3 cols x 2 rows) */
.video-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
  max-width: 620px;
}

.video-feature-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  color: #E2E8F0;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.video-feature-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 56, 92, 0.3);
  transform: translateY(-2px);
}

.video-pill-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 6px;
  background: rgba(255, 56, 92, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5722;
}

/* Video Buttons */
.btn-video-primary {
  background: linear-gradient(135deg, #FF385C 0%, #FF5722 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: 9999px;
  padding: 13px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(255, 56, 92, 0.35);
  transition: all 0.25s ease;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.btn-video-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 56, 92, 0.5);
}

.btn-video-outline {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: 9999px;
  padding: 13px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  text-decoration: none;
  cursor: pointer;
}

.btn-video-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

/* Hero Right Visual */
.video-hero-visual-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-hero-stage-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 56, 92, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0E0C17;
  transition: transform 0.3s ease;
}

.video-hero-stage-card:hover {
  transform: scale(1.01);
}

.video-hero-stage-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
}

/* Dark Trust Bar */
.video-trust-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.video-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 18px;
  transition: all 0.25s ease;
}

.video-trust-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 56, 92, 0.25);
  transform: translateY(-2px);
}

.video-trust-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.video-trust-text h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.video-trust-text p {
  font-size: 0.8rem;
  color: #94A3B8;
  margin: 0;
}

/* About Section (Dark) */
.video-about-section {
  padding: 50px 0;
  background: #0A0910;
  position: relative;
}

.video-section-label {
  display: inline-block;
  color: #FF385C;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.video-section-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.video-section-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 28px;
}

.video-about-showcase {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0E0C17;
  transition: transform 0.3s ease;
}

.video-about-showcase:hover {
  transform: translateY(-4px);
}

.video-about-showcase-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Key Skills Section (Dark) */
.video-skills-section {
  padding: 50px 0;
  background: #0B0A12;
}

.video-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 32px;
}

.video-section-subtitle {
  font-size: 1.05rem;
  color: #94A3B8;
  margin-top: 8px;
}

.video-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.video-skill-card {
  background: rgba(18, 16, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.video-skill-card:hover {
  border-color: rgba(255, 56, 92, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.video-skill-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.video-skill-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.video-skill-card p {
  font-size: 0.88rem;
  color: #94A3B8;
  line-height: 1.5;
  margin: 0;
}

/* Industry Tools Section (Dark) */
.video-tools-section {
  padding: 44px 0 50px;
  background: #0D0B16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.video-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.video-tool-card {
  background: rgba(18, 16, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all 0.3s ease;
}

.video-tool-card:hover {
  border-color: rgba(255, 56, 92, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.video-tool-icon-box {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-tool-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.video-tool-card p {
  font-size: 0.8rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.35;
}

/* Student Projects Section (Light) */
.video-projects-section {
  padding: 50px 0;
  background: #FFFFFF;
}

.video-projects-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.video-projects-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  width: 100%;
}

.video-project-card {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid #E2E8F0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: block;
}

.video-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  border-color: #FF385C;
}

.video-project-thumb {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #000;
}

.video-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-project-card:hover .video-project-thumb img {
  transform: scale(1.06);
}

.video-play-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF385C;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.video-project-card:hover .video-play-center {
  background: #FF385C;
  color: #FFFFFF;
  transform: translate(-50%, -50%) scale(1.12);
}

.video-project-details {
  padding: 14px 16px;
}

.video-project-details h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 3px;
}

.video-project-details p {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
}

/* Career Section (Light) */
.video-career-section {
  padding: 50px 0;
  background: #F8FAFC;
}

.video-career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.video-career-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.video-career-pill-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1E293B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  text-align: center;
  transition: all 0.25s ease;
}

.video-career-pill-item:hover {
  border-color: #FF385C;
  color: #FF385C;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 56, 92, 0.12);
}

.video-career-visual-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #E2E8F0;
}

.video-career-visual-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Why Choose 4Achievers Section (Light) */
.video-why-section {
  padding: 50px 0;
  background: #FFFFFF;
}

.video-why-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.video-why-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: #FF385C;
}

.video-why-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.video-why-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
  line-height: 1.3;
}

.video-why-card p {
  font-size: 0.78rem;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

/* CTA Banner Section */
.video-cta-banner-section {
  padding: 0;
  background: #0A0910;
  overflow: hidden;
}

.video-cta-banner-wrapper {
  position: relative;
  width: 100%;
}

.video-cta-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive Rules for Video Page */
@media (max-width: 1200px) {
  .video-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-trust-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .video-skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-projects-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .video-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .video-hero-title {
    font-size: 2.4rem;
  }
  .video-trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-career-grid {
    grid-template-columns: 1fr;
  }
  .video-projects-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .video-hero-title {
    font-size: 1.95rem;
  }
  .video-features-grid {
    grid-template-columns: 1fr;
  }
  .video-trust-bar {
    grid-template-columns: 1fr;
  }
  .video-skills-grid {
    grid-template-columns: 1fr;
  }
  .video-tools-grid {
    grid-template-columns: 1fr;
  }
  .video-projects-row {
    grid-template-columns: 1fr;
  }
  .video-why-grid {
    grid-template-columns: 1fr;
  }
  .video-career-pills-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Branding & Creative Design Landing Page Styles
   ========================================================================== */

/* Page Warm Luxury Canvas */
.branding-page-wrapper {
  background-color: #FAF7F2;
  color: #1E293B;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

.branding-page-wrapper .container {
  max-width: 1340px;
  padding-left: 28px;
  padding-right: 28px;
}

.branding-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Header Adjustments for Branding */
.branding-page-wrapper .site-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(15, 47, 36, 0.08);
}

/* Hero Section */
.branding-hero-section {
  padding: 60px 0 40px;
  background-color: #FAF7F2;
  position: relative;
  overflow: hidden;
}

.branding-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 900px;
  height: 700px;
  background: radial-gradient(circle at 80% 20%, rgba(255, 87, 51, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.branding-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

.branding-hero-content {
  max-width: 620px;
}

.branding-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 87, 51, 0.08);
  border: 1px solid rgba(255, 87, 51, 0.28);
  color: #FF5733;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 9999px;
  margin-bottom: 22px;
}

.branding-hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.08;
  color: #0F2F24;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.branding-title-dark {
  color: #0F2F24;
}

.branding-title-coral {
  color: #FF5733;
}

.branding-hero-subtitle {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F2F24;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.branding-hero-desc {
  font-size: 1.05rem;
  line-height: 1.68;
  color: #4A5568;
  margin-bottom: 30px;
}

/* Branding Buttons */
.btn-branding-primary {
  background: linear-gradient(135deg, #FF5733 0%, #FF6F43 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: 9999px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(255, 87, 51, 0.32);
  transition: all 0.25s ease;
  border: none;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-branding-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 87, 51, 0.45);
}

.btn-branding-outline {
  background: #FAF7F2;
  border: 1.5px solid #0F2F24;
  color: #0F2F24 !important;
  font-weight: 700;
  border-radius: 9999px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-branding-outline:hover {
  background: #0F2F24;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* Hero Right Visual */
.branding-hero-visual-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.branding-hero-img-card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 47, 36, 0.1);
  border: 1px solid rgba(15, 47, 36, 0.06);
  background: #FAF7F2;
  width: 100%;
  transition: transform 0.3s ease;
}

.branding-hero-img-card:hover {
  transform: scale(1.01);
}

.branding-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 23px;
}

/* Floating Trust Bar */
.branding-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 50px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 47, 36, 0.08);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 8px 30px rgba(15, 47, 36, 0.05);
}

.branding-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 16px;
}

.branding-trust-item:not(:last-child) {
  border-right: 1px solid #EAE4DA;
}

.branding-trust-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(255, 87, 51, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5733;
}

.branding-trust-text h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F2F24;
  margin: 0;
  line-height: 1.35;
}

/* About Section */
.branding-about-section {
  padding: 50px 0;
  background-color: #FAF7F2;
}

.branding-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 50px;
  align-items: center;
}

.branding-section-label {
  display: inline-block;
  color: #FF5733;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.branding-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.7rem;
  font-weight: 900;
  color: #0F2F24;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.branding-section-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4A5568;
  margin-bottom: 30px;
}

.branding-about-collage-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 47, 36, 0.1);
  border: 1px solid rgba(15, 47, 36, 0.08);
  background: #FFFFFF;
  transition: transform 0.3s ease;
}

.branding-about-collage-card:hover {
  transform: translateY(-4px);
}

.branding-about-collage-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Key Skills Section (6 Columns) */
.branding-skills-section {
  padding: 40px 0 50px;
  background-color: #FAF7F2;
}

.branding-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 28px;
}

.branding-skills-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.branding-skill-card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 47, 36, 0.07);
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(15, 47, 36, 0.03);
}

.branding-skill-card:hover {
  border-color: #FF5733;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 47, 36, 0.08);
}

.branding-skill-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 87, 51, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5733;
  margin-bottom: 14px;
}

.branding-skill-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F2F24;
  margin-bottom: 6px;
}

.branding-skill-card p {
  font-size: 0.8rem;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

/* Tools You Will Use Section (5 Columns) */
.branding-tools-section {
  padding: 40px 0 50px;
  background-color: #FAF7F2;
}

.branding-tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.branding-tool-card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 47, 36, 0.07);
  border-radius: 16px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(15, 47, 36, 0.03);
}

.branding-tool-card:hover {
  border-color: #FF5733;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 47, 36, 0.08);
}

.branding-tool-icon-box {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.branding-tool-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.branding-tool-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F2F24;
  margin-bottom: 4px;
}

.branding-tool-card p {
  font-size: 0.78rem;
  color: #64748B;
  margin: 0;
  line-height: 1.35;
}

/* Student Projects Section (5 Columns, 4:3 Uncropped) */
.branding-projects-section {
  padding: 50px 0;
  background-color: #FAF7F2;
}

.branding-projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}

.branding-slider-controls {
  display: flex;
  gap: 10px;
}

.branding-slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #EAE4DA;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F2F24;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(15, 47, 36, 0.04);
}

.branding-slider-btn:hover {
  background: #FF5733;
  color: #FFFFFF;
  border-color: #FF5733;
}

.branding-projects-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

.branding-project-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 47, 36, 0.04);
  border: 1px solid rgba(15, 47, 36, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: block;
}

.branding-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(15, 47, 36, 0.12);
  border-color: #FF5733;
}

.branding-project-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F4EFE6;
}

.branding-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.branding-project-card:hover .branding-project-thumb img {
  transform: scale(1.04);
}

.branding-project-details {
  padding: 16px 18px;
}

.branding-project-details h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F2F24;
  margin-bottom: 4px;
}

.branding-project-details p {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

/* Career Opportunities Section */
.branding-career-section {
  padding: 50px 0;
  background-color: #FAF7F2;
}

.branding-career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.branding-career-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.branding-career-card-item {
  background: #FFFFFF;
  border: 1px solid rgba(15, 47, 36, 0.08);
  border-radius: 14px;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(15, 47, 36, 0.02);
  transition: all 0.25s ease;
}

.branding-career-card-item:hover {
  border-color: #FF5733;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 87, 51, 0.1);
}

.branding-career-card-item.span-2 {
  grid-column: span 2;
}

.branding-career-card-item.span-3 {
  grid-column: span 3;
}

.branding-career-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 87, 51, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5733;
}

.branding-career-card-item span {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F2F24;
  line-height: 1.3;
}

/* Career Banner Inside Card */
.branding-career-banner {
  background: linear-gradient(135deg, #0C281E 0%, #16382B 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12, 40, 30, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: stretch;
  min-height: 340px;
}

.branding-career-banner-visual {
  flex: 0 0 38%;
  position: relative;
  overflow: hidden;
}

.branding-career-banner-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.branding-career-banner-content {
  flex: 1;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.branding-career-banner-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #FFFDF9;
  line-height: 1.25;
  margin-bottom: 20px;
}

.branding-career-banner-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branding-career-banner-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #E2ECE7;
  font-size: 0.92rem;
  font-weight: 500;
}

.branding-career-check-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0C281E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Why Choose 4Achievers Section (5 Columns) */
.branding-why-section {
  padding: 50px 0;
  background-color: #FAF7F2;
}

.branding-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.branding-why-card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 47, 36, 0.07);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 16px rgba(15, 47, 36, 0.03);
}

.branding-why-card:hover {
  background: #FFFFFF;
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(15, 47, 36, 0.08);
  border-color: #FF5733;
}

.branding-why-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 87, 51, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5733;
  margin-bottom: 14px;
}

.branding-why-card h4 {
  font-size: 0.96rem;
  font-weight: 800;
  color: #0F2F24;
  margin: 0;
  line-height: 1.35;
}

/* FAQ & Counselling Section */
.branding-faq-section {
  padding: 50px 0;
  background-color: #FAF7F2;
}

.branding-faq-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}

.branding-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.branding-faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(15, 47, 36, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(15, 47, 36, 0.02);
}

.branding-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: none;
  border: none;
  font-size: 0.96rem;
  font-weight: 700;
  color: #0F2F24;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.branding-faq-question:hover {
  color: #FF5733;
}

.branding-faq-icon {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FF5733;
  transition: transform 0.25s ease;
  line-height: 1;
}

.branding-faq-item.active .branding-faq-icon {
  transform: rotate(45deg);
}

.branding-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 20px;
  color: #5A6A64;
  font-size: 0.88rem;
  line-height: 1.6;
}

.branding-faq-item.active .branding-faq-answer {
  max-height: 300px;
  padding: 0 20px 18px;
}

/* Counselling Card */
.branding-counselling-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 12px 36px rgba(15, 47, 36, 0.06);
  border: 1px solid rgba(15, 47, 36, 0.08);
  position: relative;
}

.branding-counsel-badge {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FF5733;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.branding-counselling-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #0F2F24;
  margin-bottom: 6px;
}

.branding-counselling-card p {
  font-size: 0.88rem;
  color: #64748B;
  margin-bottom: 20px;
  line-height: 1.5;
}

.branding-counsel-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.branding-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.branding-input {
  width: 100%;
  padding: 12px 16px;
  background: #FAF7F2;
  border: 1px solid #EAE4DA;
  border-radius: 10px;
  font-size: 0.88rem;
  color: #0F2F24;
  font-family: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.branding-input:focus {
  outline: none;
  border-color: #FF5733;
  background: #FFFFFF;
}

.btn-branding-submit {
  width: 100%;
  padding: 14px;
  background: #FF5733;
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 6px;
}

.btn-branding-submit:hover {
  background: #E64A19;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 87, 51, 0.35);
}

/* Dark Emerald Green Footer */
.branding-footer {
  background-color: #0C281E;
  color: #A7B6AF;
  padding: 40px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.branding-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.branding-footer-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.88rem;
}

.branding-footer-nav a {
  color: #A7B6AF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.branding-footer-nav a:hover {
  color: #FFFFFF;
}

.branding-footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.branding-footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.2s ease;
}

.branding-footer-socials a:hover {
  background: #FF5733;
  transform: translateY(-2px);
}

/* Responsive Rules for Branding Page */
@media (max-width: 1200px) {
  .branding-hero-title {
    font-size: 3rem;
  }
  .branding-trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .branding-skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .branding-tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .branding-projects-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .branding-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .branding-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .branding-hero-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .branding-about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .branding-about-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .branding-career-grid {
    grid-template-columns: 1fr;
  }
  .branding-faq-grid {
    grid-template-columns: 1fr;
  }
  .branding-projects-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .branding-hero-title {
    font-size: 2.2rem;
  }
  .branding-section-title {
    font-size: 2rem;
  }
  .branding-trust-bar {
    grid-template-columns: 1fr;
  }
  .branding-trust-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #EAE4DA;
    padding-bottom: 12px;
  }
  .branding-skills-grid {
    grid-template-columns: 1fr;
  }
  .branding-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .branding-projects-row {
    grid-template-columns: 1fr;
  }
  .branding-why-grid {
    grid-template-columns: 1fr;
  }
  .branding-career-cards-grid {
    grid-template-columns: 1fr;
  }
  .branding-career-card-item.span-2,
  .branding-career-card-item.span-3 {
    grid-column: span 1;
  }
  .branding-career-banner {
    flex-direction: column;
  }
  .branding-career-banner-visual {
    height: 180px;
  }
  .branding-form-row {
    grid-template-columns: 1fr;
  }
  .branding-footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .branding-footer-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}




/* ==========================================================================
   Graphic Design & Visual Communication Page Styles (100% PDF Fidelity)
   ========================================================================== */

.graphic-page-wrapper {
  background-color: #FFFFFF;
  color: #334155;
  font-family: var(--font-body);
}

.graphic-page-wrapper .container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header Adjustments */
.graphic-page-wrapper .site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* Hero Section */
.graphic-hero-section {
  padding: 44px 0 56px;
  background: #FFFFFF;
}

.graphic-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

.graphic-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #165DFB;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.graphic-hero-title {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1.12;
  color: #0A1128;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.graphic-hero-subtitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A1128;
  margin-bottom: 12px;
}

.graphic-hero-subtitle .highlight-create {
  color: #F59E0B;
}

.graphic-hero-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 24px;
  max-width: 580px;
}

.graphic-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.graphic-hero-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #0A1128;
}

.graphic-hero-pill-icon {
  color: #165DFB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-graphic-primary {
  background: #165DFB;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(22, 93, 251, 0.35);
  cursor: pointer;
  border: none;
}

.btn-graphic-primary:hover {
  background: #0F4BD8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 93, 251, 0.45);
  color: #FFFFFF;
}

.btn-graphic-outline {
  background: #FFFFFF;
  color: #0A1128;
  border: 1.5px solid #CBD5E1;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-graphic-outline:hover {
  border-color: #0A1128;
  background: #F8FAFC;
  transform: translateY(-2px);
}

.graphic-hero-img-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.1);
}

.graphic-hero-img-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating Trust Bar */
.graphic-trust-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 20px 24px;
  margin-top: 48px;
}

.graphic-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.graphic-trust-item:not(:last-child) {
  border-right: 1px solid #F1F5F9;
  padding-right: 12px;
}

.graphic-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EFF6FF;
  color: #165DFB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.graphic-trust-text h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0A1128;
  line-height: 1.2;
}

.graphic-trust-text p {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748B;
  margin-top: 2px;
}

/* About Section */
.graphic-about-section {
  padding: 50px 0;
  background: #FFFFFF;
}

.graphic-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.graphic-eyebrow {
  font-size: 0.85rem;
  font-weight: 800;
  color: #165DFB;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.graphic-section-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.16;
  color: #0A1128;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.graphic-section-title .text-blue {
  color: #165DFB;
}

.graphic-about-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 28px;
}

.graphic-about-img-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.graphic-about-img-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Skills Section */
.graphic-skills-section {
  padding: 50px 0;
  background: #F8FAFC;
}

.graphic-skills-header {
  text-align: center;
  margin-bottom: 44px;
}

.graphic-skills-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.graphic-skill-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: left;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.graphic-skill-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(22, 93, 251, 0.1);
  border-color: #BFDBFE;
}

.graphic-skill-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.graphic-skill-card h3 {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0A1128;
  margin-bottom: 8px;
  line-height: 1.25;
}

.graphic-skill-card p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #64748B;
}

/* Creative Tools Banner */
.graphic-tools-banner {
  background: #081225;
  border-radius: 22px;
  padding: 32px 36px;
  margin-top: 48px;
  display: grid;
  grid-template-columns: 0.85fr 1.65fr;
  gap: 36px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(8, 18, 37, 0.25);
}

.graphic-tools-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.graphic-tools-title {
  color: #FFFFFF;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}

.graphic-tools-desc {
  color: #94A3B8;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 22px;
}

.btn-graphic-yellow {
  background: #FFC107;
  color: #0A1128;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 12px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(255, 193, 7, 0.3);
  cursor: pointer;
  border: none;
}

.btn-graphic-yellow:hover {
  background: #E5AC00;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 193, 7, 0.4);
}

.graphic-tools-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.graphic-tool-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 16px 10px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease;
}

.graphic-tool-card:hover {
  transform: translateY(-4px);
}

.graphic-tool-card img {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  object-fit: contain;
}

.graphic-tool-card h4 {
  font-size: 0.86rem;
  font-weight: 800;
  color: #0A1128;
  line-height: 1.2;
}

.graphic-tool-card p {
  font-size: 0.72rem;
  color: #64748B;
  margin-top: 3px;
  white-space: nowrap;
}

/* Student Projects Section */
.graphic-projects-section {
  padding: 50px 0;
  background: #FFFFFF;
}

.graphic-projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}

.graphic-carousel-controls {
  display: flex;
  gap: 10px;
}

.graphic-ctrl-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #165DFB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.graphic-ctrl-btn:hover {
  background: #165DFB;
  color: #FFFFFF;
  border-color: #165DFB;
}

.graphic-projects-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.graphic-project-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.graphic-project-card:hover {
  transform: translateY(-6px);
}

.graphic-project-thumb {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #F1F5F9;
  aspect-ratio: 531 / 757;
}

.graphic-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.graphic-project-card:hover .graphic-project-thumb img {
  transform: scale(1.05);
}

.graphic-project-meta {
  padding: 14px 4px 4px;
}

.graphic-project-meta h3 {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0A1128;
  margin-bottom: 2px;
  line-height: 1.25;
}

.graphic-project-meta p {
  font-size: 0.82rem;
  color: #64748B;
  font-weight: 500;
}

/* Career Opportunities Section */
.graphic-career-section {
  padding: 50px 0;
  background: #F8FAFC;
}

.graphic-career-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 56px;
  align-items: start;
}

.graphic-career-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.graphic-career-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.graphic-career-card:hover {
  border-color: #165DFB;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(22, 93, 251, 0.08);
}

.graphic-career-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #EFF6FF;
  color: #165DFB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.graphic-career-info h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0A1128;
  margin-bottom: 4px;
  line-height: 1.25;
}

.graphic-career-info p {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.45;
}

/* Why Choose 4Achievers Banner */
.graphic-why-banner {
  background: #00329F;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.95fr 1.4fr;
  gap: 40px;
  align-items: center;
  margin: 40px 0 85px;
  color: #FFFFFF;
  padding: 0 48px 0 0;
  position: relative;
  box-shadow: 0 16px 45px rgba(0, 50, 159, 0.25);
}

.graphic-why-visual {
  position: relative;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.graphic-why-visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

.graphic-why-content {
  padding: 40px 0;
}

.graphic-why-tag {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.graphic-why-title {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.18;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}

.graphic-why-desc {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.graphic-why-features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.graphic-why-feat-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.graphic-why-feat h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 4px;
}

.graphic-why-feat p {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.35;
}

/* FAQ & Counselling Section */
.graphic-faq-counselling-section {
  padding: 50px 0;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.graphic-faq-decor-circle-1 {
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #EF4444;
  opacity: 0.9;
  pointer-events: none;
}

.graphic-faq-decor-circle-2 {
  position: absolute;
  top: 40px;
  right: 15%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #EF4444;
  opacity: 0.9;
  pointer-events: none;
}

.graphic-faq-counsel-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.95fr;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 2;
}

.graphic-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.graphic-faq-item {
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  transition: all 0.2s ease;
}

.graphic-faq-item[open] {
  border-color: #BFDBFE;
  box-shadow: 0 6px 18px rgba(22, 93, 251, 0.06);
}

.graphic-faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.02rem;
  color: #0A1128;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.graphic-faq-summary::-webkit-details-marker {
  display: none;
}

.graphic-faq-icon {
  font-size: 1.3rem;
  color: #165DFB;
  font-weight: 700;
  line-height: 1;
}

.graphic-faq-item[open] .graphic-faq-icon {
  transform: rotate(45deg);
}

.graphic-faq-content {
  padding: 0 22px 18px 22px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
}

/* Counselling Card */
.graphic-counselling-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

.graphic-counselling-card h3 {
  font-size: 1.8rem;
  font-weight: 900;
  color: #0A1128;
  margin-bottom: 8px;
  line-height: 1.2;
}

.graphic-counselling-card .card-subtitle {
  font-size: 0.92rem;
  color: #64748B;
  margin-bottom: 24px;
  line-height: 1.5;
}

.graphic-counselling-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.graphic-input {
  width: 100%;
  padding: 13px 18px;
  border-radius: 10px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  font-size: 0.92rem;
  color: #0A1128;
  transition: all 0.2s ease;
}

.graphic-input:focus {
  border-color: #165DFB;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.12);
}

.graphic-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}

/* Responsive Rules for Graphic Design Page */
@media (max-width: 1200px) {
  .graphic-hero-title {
    font-size: 2.9rem;
  }
  .graphic-trust-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .graphic-skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .graphic-tools-banner {
    grid-template-columns: 1fr;
  }
  .graphic-tools-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .graphic-projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .graphic-why-banner {
    grid-template-columns: 1fr;
    padding: 0 32px 32px;
  }
  .graphic-why-visual {
    order: 2;
  }
  .graphic-why-content {
    order: 1;
    padding: 32px 0 0;
  }
}

@media (max-width: 992px) {
  .graphic-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .graphic-hero-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .graphic-hero-pills {
    justify-content: center;
  }
  .graphic-hero-section .hero-cta-group {
    justify-content: center;
  }
  .graphic-about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .graphic-about-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .graphic-career-grid {
    grid-template-columns: 1fr;
  }
  .graphic-faq-counsel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .graphic-hero-title {
    font-size: 2.2rem;
  }
  .graphic-section-title {
    font-size: 2rem;
  }
  .graphic-trust-bar {
    grid-template-columns: 1fr;
  }
  .graphic-trust-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 12px;
  }
  .graphic-skills-grid {
    grid-template-columns: 1fr;
  }
  .graphic-tools-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .graphic-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .graphic-career-cards-grid {
    grid-template-columns: 1fr;
  }
  .graphic-why-features-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   MOTION GRAPHICS & ANIMATION PAGE STYLES (100% PDF Fidelity)
   ========================================================================== */

/* Motion Hero Dark Suite */
.motion-hero-section {
  background: radial-gradient(circle at 80% 30%, #201340 0%, #0D0A1C 55%, #080612 100%);
  padding: 60px 0 70px;
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
}

.motion-hero-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -50px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.15) 0%, rgba(124, 58, 237, 0.05) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.motion-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}

.motion-hero-content {
  max-width: 620px;
}

.motion-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.25);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #E9D5FF;
  padding: 7px 18px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.motion-hero-title {
  font-size: 3.3rem;
  line-height: 1.15;
  font-weight: 900;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.motion-title-white {
  color: #FFFFFF;
  display: block;
}

.motion-title-gradient {
  background: linear-gradient(135deg, #D946EF 0%, #FB923C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.motion-hero-subtitle {
  font-size: 1.28rem;
  font-weight: 600;
  color: #CBD5E1;
  margin-bottom: 14px;
}

.motion-hero-desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #94A3B8;
  margin-bottom: 26px;
}

.motion-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.motion-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.motion-hero-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(217, 70, 239, 0.4);
  transform: translateY(-2px);
}

.motion-hero-pill-icon {
  width: 16px;
  height: 16px;
  color: #FB923C;
}

.motion-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.btn-motion-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #F43F5E 0%, #FB923C 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 28px;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.4);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
}

.btn-motion-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(244, 63, 94, 0.6);
  color: #FFFFFF;
}

.btn-motion-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 26px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-motion-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.motion-hero-visual-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.motion-hero-visual-img {
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.35), 0 0 40px rgba(217, 70, 239, 0.15);
  display: block;
}

/* Floating Trust Bar */
.motion-trust-wrapper {
  margin-top: -36px;
  position: relative;
  z-index: 20;
}

.motion-trust-bar {
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: center;
  border: 1px solid #EDF2F7;
}

.motion-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.motion-trust-item:not(:last-child) {
  border-right: 1px solid #E2E8F0;
  padding-right: 18px;
}

.motion-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EFF6FF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563EB;
  flex-shrink: 0;
}

.motion-trust-text h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 2px 0;
}

.motion-trust-text p {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
  font-weight: 500;
}

/* About Section */
.motion-about-section {
  padding: 50px 0 46px;
}

.motion-about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 50px;
  align-items: center;
}

.motion-section-label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7C3AED;
  margin-bottom: 12px;
}

.motion-section-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.motion-about-desc {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 28px;
}

.btn-motion-blue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2563EB;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.35);
}

.btn-motion-blue:hover {
  background: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -4px rgba(37, 99, 235, 0.45);
  color: #FFFFFF;
}

.motion-about-collage-img {
  width: 100%;
  max-width: 699px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12);
  display: block;
}

/* Tools Section */
.motion-tools-section {
  padding: 36px 0 48px;
  text-align: center;
}

.motion-tools-header {
  max-width: 700px;
  margin: 0 auto 44px;
}

.motion-tools-subtitle {
  font-size: 1rem;
  color: #64748B;
  margin-top: 8px;
}

.motion-tools-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  justify-items: center;
}

.motion-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s ease;
}

.motion-tool-item:hover {
  transform: translateY(-4px);
}

.motion-tool-icon-wrapper {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.08);
  padding: 6px;
  transition: all 0.2s ease;
}

.motion-tool-item:hover .motion-tool-icon-wrapper {
  box-shadow: 0 12px 28px -6px rgba(124, 58, 237, 0.25);
}

.motion-tool-icon-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.motion-tool-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.motion-tool-desc {
  font-size: 0.75rem;
  color: #94A3B8;
  margin: 0;
}

/* Curriculum Dark Suite */
.motion-curriculum-section {
  background: radial-gradient(circle at 50% 20%, #171030 0%, #0D0A1C 60%, #080612 100%);
  padding: 56px 0 52px;
  color: #FFFFFF;
}

.motion-curriculum-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 56px;
}

.motion-curriculum-header .motion-section-title {
  color: #FFFFFF;
}

.motion-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.motion-curr-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-curr-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(217, 70, 239, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(124, 58, 237, 0.2);
}

.motion-curr-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.3);
}

.motion-curr-badge-yellow { background: #EAB308; color: #1E1B4B; }
.motion-curr-badge-pink   { background: #EC4899; color: #FFFFFF; }
.motion-curr-badge-purple { background: #A855F7; color: #FFFFFF; }
.motion-curr-badge-blue   { background: #38BDF8; color: #0F172A; }
.motion-curr-badge-teal   { background: #10B981; color: #FFFFFF; }
.motion-curr-badge-orange { background: #F97316; color: #FFFFFF; }

.motion-curr-info h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 8px 0;
}

.motion-curr-info p {
  font-size: 0.88rem;
  color: #94A3B8;
  line-height: 1.55;
  margin: 0;
}

/* Student Projects Section */
.motion-projects-section {
  padding: 50px 0 46px;
  background: #F8FAFC;
  overflow: hidden;
}

.motion-projects-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}

.motion-projects-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.motion-projects-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

.motion-project-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.08);
  border: 1px solid #EDF2F7;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.motion-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px -10px rgba(124, 58, 237, 0.2);
  border-color: #DDD6FE;
}

.motion-project-img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0D0A1C;
}

.motion-project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.motion-project-card:hover .motion-project-img {
  transform: scale(1.05);
}

.motion-project-body {
  padding: 16px 18px;
}

.motion-project-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px 0;
}

.motion-project-category {
  font-size: 0.8rem;
  color: #64748B;
  font-weight: 600;
  margin: 0;
}

.motion-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F172A;
  cursor: pointer;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  transition: all 0.2s ease;
}

.motion-carousel-btn:hover {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.4);
}

.motion-carousel-prev { left: -22px; }
.motion-carousel-next { right: -22px; }

/* Career Section */
.motion-career-section {
  padding: 50px 0 46px;
}

.motion-career-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: center;
}

.motion-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.motion-role-pill {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1E293B;
  text-align: center;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.motion-role-pill:hover {
  border-color: #7C3AED;
  color: #7C3AED;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -4px rgba(124, 58, 237, 0.15);
}

.motion-career-card {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  border: 1px solid #DBEAFE;
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  box-shadow: 0 15px 35px -10px rgba(37, 99, 235, 0.1);
}

.motion-career-icon-top {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7C3AED;
  box-shadow: 0 8px 18px -4px rgba(124, 58, 237, 0.2);
}

.motion-career-card-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.25;
  margin: 0 0 24px 0;
  max-width: 80%;
}

.motion-career-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.motion-career-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
}

.motion-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563EB;
  flex-shrink: 0;
}

/* Why Choose 4Achievers */
.motion-why-section {
  padding: 36px 0 48px;
  text-align: center;
}

.motion-why-header {
  max-width: 720px;
  margin: 0 auto 50px;
}

.motion-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.motion-why-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 32px 20px;
  text-align: center;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.motion-why-card:hover {
  transform: translateY(-5px);
  border-color: #DDD6FE;
  box-shadow: 0 16px 32px -8px rgba(124, 58, 237, 0.15);
}

.motion-why-badge {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.08);
}

.motion-why-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 10px 0;
}

.motion-why-card p {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* CTA Banner Container */
.motion-banner-section {
  padding: 20px 0 44px;
}

.motion-banner-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -15px rgba(59, 29, 104, 0.4);
}

.motion-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.motion-banner-overlay-actions {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 5;
}

.btn-banner-enquire {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #F43F5E 0%, #FB923C 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 8px 20px -4px rgba(244, 63, 94, 0.5);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-banner-enquire:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -4px rgba(244, 63, 94, 0.7);
  color: #FFFFFF;
}

.btn-banner-brochure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 10, 28, 0.6);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 11px 26px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-banner-brochure:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #FFFFFF;
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* FAQ & Counselling Section */
.motion-faq-section {
  padding: 36px 0 50px;
}

.motion-faq-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

.motion-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.motion-faq-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.motion-faq-item[open] {
  border-color: #7C3AED;
  box-shadow: 0 8px 24px -4px rgba(124, 58, 237, 0.12);
}

.motion-faq-summary {
  padding: 20px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.motion-faq-summary::-webkit-details-marker {
  display: none;
}

.motion-faq-toggle {
  font-size: 1.3rem;
  color: #7C3AED;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.motion-faq-item[open] .motion-faq-toggle {
  transform: rotate(45deg);
}

.motion-faq-body {
  padding: 0 24px 22px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #475569;
}

.motion-counsel-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08);
}

.motion-counsel-card h3 {
  font-size: 1.55rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 8px 0;
}

.motion-counsel-card p {
  font-size: 0.92rem;
  color: #64748B;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.motion-counsel-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.motion-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.motion-input {
  width: 100%;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  font-size: 0.92rem;
  color: #0F172A;
  background: #F8FAFC;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.motion-input:focus {
  background: #FFFFFF;
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.motion-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.btn-motion-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(135deg, #F43F5E 0%, #D946EF 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1rem;
  padding: 15px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgba(217, 70, 239, 0.4);
  transition: all 0.25s ease;
  margin-top: 6px;
}

.btn-motion-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(217, 70, 239, 0.6);
  color: #FFFFFF;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .motion-trust-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .motion-curriculum-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .motion-projects-track {
    grid-template-columns: repeat(3, 1fr);
  }
  .motion-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .motion-tools-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  .motion-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .motion-hero-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .motion-hero-pills {
    justify-content: center;
  }
  .motion-hero-cta-group {
    justify-content: center;
  }
  .motion-about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .motion-about-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .motion-career-grid {
    grid-template-columns: 1fr;
  }
  .motion-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .motion-hero-title {
    font-size: 2.3rem;
  }
  .motion-section-title {
    font-size: 2rem;
  }
  .motion-trust-bar {
    grid-template-columns: 1fr;
  }
  .motion-trust-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #EDF2F7;
    padding-bottom: 14px;
  }
  .motion-curriculum-grid {
    grid-template-columns: 1fr;
  }
  .motion-projects-track {
    grid-template-columns: repeat(2, 1fr);
  }
  .motion-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .motion-why-grid {
    grid-template-columns: 1fr;
  }
  .motion-roles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .motion-form-row {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   UI/UX & Product Design Suite (100% PDF Fidelity)
================================================================== */

/* Hero Section */
.uiux-hero-section {
  padding: 44px 0 56px;
  background: linear-gradient(180deg, #F8FAFD 0%, #FFFFFF 100%);
  position: relative;
  overflow: hidden;
}

.uiux-hero-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(59, 130, 246, 0.03) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.uiux-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

.uiux-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #EEF2FF;
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #4F46E5;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.uiux-hero-title {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1.14;
  color: #0F172A;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.uiux-hero-title .uiux-gradient {
  background: linear-gradient(135deg, #4338CA 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uiux-hero-subtitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.4;
  margin-bottom: 12px;
}

.uiux-hero-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #475569;
  max-width: 580px;
  margin-bottom: 30px;
}

.uiux-hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.btn-uiux-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4F46E5 0%, #2563EB 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
  transition: all 0.25s ease;
}

.btn-uiux-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(79, 70, 229, 0.55);
  color: #FFFFFF !important;
}

.btn-uiux-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #1E293B !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid #CBD5E1;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-uiux-secondary:hover {
  border-color: #4F46E5;
  color: #4F46E5 !important;
  transform: translateY(-2px);
  background: #F8FAFD;
}

.uiux-hero-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #FFFFFF;
  transition: transform 0.3s ease;
}

.uiux-hero-visual:hover {
  transform: translateY(-4px);
}

.uiux-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* Trust Bar */
.uiux-trust-bar {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 28px;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.uiux-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.uiux-trust-item:not(:last-child) {
  border-right: 1px solid #F1F5F9;
  padding-right: 14px;
}

.uiux-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.uiux-trust-item:nth-child(1) .uiux-trust-icon {
  background: #EEF2FF;
  color: #4F46E5;
}

.uiux-trust-item:nth-child(2) .uiux-trust-icon {
  background: #EFF6FF;
  color: #2563EB;
}

.uiux-trust-item:nth-child(3) .uiux-trust-icon {
  background: #ECFEFF;
  color: #0891B2;
}

.uiux-trust-item:nth-child(4) .uiux-trust-icon {
  background: #F3E8FF;
  color: #7C3AED;
}

.uiux-trust-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #0F172A;
  line-height: 1.25;
}

.uiux-trust-sub {
  font-size: 0.82rem;
  color: #64748B;
  margin-top: 2px;
}

/* About Section */
.uiux-about-section {
  padding: 50px 0;
  background: #FFFFFF;
}

.uiux-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 52px;
  align-items: center;
}

.uiux-about-content {
  max-width: 520px;
}

.uiux-section-tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4F46E5;
  margin-bottom: 12px;
}

.uiux-section-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.2;
  color: #0F172A;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.uiux-about-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 28px;
}

.uiux-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.uiux-feature-card {
  background: #FFFFFF;
  border: 1px solid #EDF2F7;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
}

.uiux-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -4px rgba(79, 70, 229, 0.12);
  border-color: #C7D2FE;
}

.uiux-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.uiux-feature-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.uiux-feature-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #64748B;
}

/* Tools Section */
.uiux-tools-section {
  padding: 56px 0;
  background: #F8FAFD;
  border-top: 1px solid #EEF2F6;
  border-bottom: 1px solid #EEF2F6;
}

.uiux-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 40px;
  align-items: center;
}

.uiux-tools-header {
  max-width: 460px;
}

.uiux-tools-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.uiux-tool-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
}

.uiux-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(79, 70, 229, 0.12);
  border-color: #C7D2FE;
}

.uiux-tool-icon-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

.uiux-tool-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.uiux-tool-sub {
  font-size: 0.8rem;
  color: #64748B;
  margin-top: 2px;
  line-height: 1.35;
}

/* Projects Section */
.uiux-projects-section {
  padding: 50px 0;
  background: #FFFFFF;
}

.uiux-projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.uiux-projects-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4F46E5;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.uiux-projects-link:hover {
  color: #2563EB;
  gap: 10px;
}

.uiux-projects-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.uiux-project-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
}

.uiux-project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.12);
  border-color: #CBD5E1;
}

.uiux-project-img-box {
  width: 100%;
  aspect-ratio: 337 / 215;
  background: #F1F5F9;
  overflow: hidden;
}

.uiux-project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.uiux-project-card:hover .uiux-project-img {
  transform: scale(1.04);
}

.uiux-project-info {
  padding: 14px 16px 16px;
}

.uiux-project-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 4px;
}

.uiux-project-meta {
  font-size: 0.8rem;
  color: #64748B;
}

/* Career & Why Choose Section */
.uiux-career-section {
  padding: 50px 0;
  background: #F8FAFD;
  border-top: 1px solid #EEF2F6;
}

.uiux-career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.uiux-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.uiux-role-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 12px -2px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}

.uiux-role-card:hover {
  transform: translateY(-2px);
  border-color: #C7D2FE;
  box-shadow: 0 8px 20px -3px rgba(79, 70, 229, 0.1);
}

.uiux-role-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.uiux-role-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}

/* Why Choose Card */
.uiux-why-card {
  background: linear-gradient(135deg, #EEF2FF 0%, #FFFFFF 50%, #FAF5FF 100%);
  border: 1px solid #E0E7FF;
  border-radius: 20px;
  padding: 32px 32px 0;
  box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.uiux-why-header-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 22px;
}

.uiux-why-body {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 16px;
  align-items: flex-end;
}

.uiux-why-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 26px;
}

.uiux-why-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.uiux-why-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #E0E7FF;
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}

.uiux-why-item-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.uiux-why-item-desc {
  font-size: 0.84rem;
  color: #64748B;
  margin-top: 3px;
  line-height: 1.4;
}

.uiux-why-illustration {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 0;
}

.uiux-why-illustration img {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
}

/* CTA Banner Section */
.uiux-banner-wrapper {
  margin: 60px 0 20px;
  position: relative;
}

.uiux-banner-container {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px -5px rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(224, 231, 255, 0.8);
}

.uiux-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.uiux-banner-btn-enquire {
  position: absolute;
  top: 24%;
  bottom: 24%;
  left: 57.5%;
  width: 12%;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.uiux-banner-btn-enquire:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.uiux-banner-btn-brochure {
  position: absolute;
  top: 24%;
  bottom: 24%;
  left: 70.8%;
  width: 12.2%;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.uiux-banner-btn-brochure:hover {
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
}

.uiux-banner-mobile-actions {
  display: none;
  margin-top: 14px;
  gap: 12px;
  justify-content: center;
}

/* FAQ & Form Section */
.uiux-faq-form-section {
  padding: 50px 0;
  background: #FFFFFF;
}

.uiux-faq-form-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}

.uiux-faq-header {
  margin-bottom: 24px;
}

.uiux-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.uiux-faq-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.uiux-faq-item[open] {
  border-color: #C7D2FE;
  box-shadow: 0 8px 20px -3px rgba(79, 70, 229, 0.08);
}

.uiux-faq-summary {
  padding: 18px 22px;
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}

.uiux-faq-summary::-webkit-details-marker {
  display: none;
}

.uiux-faq-toggle {
  font-size: 1.4rem;
  font-weight: 400;
  color: #4F46E5;
  transition: transform 0.25s ease;
}

.uiux-faq-item[open] .uiux-faq-toggle {
  transform: rotate(45deg);
}

.uiux-faq-content {
  padding: 0 22px 20px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #475569;
}

/* Enquire Card */
.uiux-enquire-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 34px 32px;
  box-shadow: 0 10px 35px -5px rgba(15, 23, 42, 0.08);
}

.uiux-enquire-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 20px;
}

.uiux-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.uiux-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.uiux-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uiux-form-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
}

.uiux-form-label .req {
  color: #EF4444;
}

.uiux-form-input,
.uiux-form-select,
.uiux-form-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #CBD5E1;
  font-size: 0.92rem;
  color: #0F172A;
  background: #FFFFFF;
  transition: all 0.2s ease;
  font-family: inherit;
}

.uiux-form-input:focus,
.uiux-form-select:focus,
.uiux-form-textarea:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

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

.btn-uiux-submit {
  width: 100%;
  background: linear-gradient(135deg, #C026D3 0%, #7C3AED 50%, #2563EB 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 15px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.4);
  transition: all 0.25s ease;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-uiux-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(124, 58, 237, 0.6);
  color: #FFFFFF !important;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .uiux-trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .uiux-projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .uiux-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .uiux-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .uiux-hero-cta-group {
    justify-content: center;
  }
  .uiux-about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .uiux-about-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .uiux-tools-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .uiux-tools-header {
    max-width: 100%;
    margin: 0 auto;
  }
  .uiux-career-grid {
    grid-template-columns: 1fr;
  }
  .uiux-faq-form-grid {
    grid-template-columns: 1fr;
  }
  .uiux-cta-banner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .uiux-hero-title {
    font-size: 2.3rem;
  }
  .uiux-section-title {
    font-size: 2rem;
  }
  .uiux-trust-bar {
    grid-template-columns: 1fr;
  }
  .uiux-trust-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #EDF2F7;
    padding-bottom: 14px;
  }
  .uiux-cards-grid {
    grid-template-columns: 1fr;
  }
  .uiux-tools-cards {
    grid-template-columns: 1fr;
  }
  .uiux-projects-grid {
    grid-template-columns: 1fr 1fr;
  }
  .uiux-roles-grid {
    grid-template-columns: 1fr 1fr;
  }
  .uiux-form-row {
    grid-template-columns: 1fr;
  }
}


/* ==================================================================
   UNIFIED MASTER FOOTER SUITE (All Pages)
================================================================== */

/* Pre-Footer CTA Section */
.pre-footer-cta-wrap {
  padding: 40px 0;
  background: #09081B;
  position: relative;
  overflow: hidden;
}

.pre-footer-cta-card {
  background: linear-gradient(135deg, #131034 0%, #0D0B24 50%, #1A1348 100%);
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  border-radius: 24px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 8, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cta-glow-orb {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, rgba(99, 102, 241, 0.15) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-text-side {
  flex: 1;
  max-width: 680px;
  position: relative;
  z-index: 2;
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: #C4B5FD;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.cta-pulse-indicator {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10B981;
  animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.cta-headline {
  font-size: 2.1rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
}

.cta-description {
  font-size: 0.96rem;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.cta-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cta-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}

.cta-action-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 340px;
  position: relative;
  z-index: 2;
}

.cta-primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 15px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);
  text-decoration: none;
  white-space: nowrap;
}

.cta-primary-btn:hover {
  background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.55);
}

.cta-secondary-row {
  display: flex;
  gap: 10px;
}

.cta-contact-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #F8FAFC;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cta-contact-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.cta-whatsapp-pill:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34D399;
}

/* Master Site Footer */
.site-footer,
.branding-footer {
  background: #060511 !important;
  color: #94A3B8 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(139, 92, 246, 0.2) !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  position: relative;
  z-index: 10;
}

/* Footer Trust Metrics Strip */
.footer-trust-strip {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px 0;
}

.footer-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-badge-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}

.trust-badge-lbl {
  font-size: 0.8rem;
  color: #94A3B8;
  margin-top: 2px;
}

/* Main Footer Grid */
.site-footer .footer-grid,
.branding-footer .footer-grid,
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1.35fr 1fr !important;
  gap: 48px !important;
  padding: 56px 0 44px !important;
  margin-bottom: 0 !important;
}

.site-footer .footer-col,
.branding-footer .footer-col,
.footer-col {
  display: flex !important;
  flex-direction: column !important;
}

/* Brand Column */
.footer-logo-link {
  display: inline-block !important;
  margin-bottom: 18px !important;
}

.footer-brand-col .footer-logo,
.site-footer .footer-logo,
.site-footer .footer-logo-img,
.site-footer .logo-img,
.site-footer .brand-logo img,
.branding-footer .logo-img {
  height: 44px !important;
  width: auto !important;
  max-width: 190px !important;
  background: #FFFFFF !important;
  padding: 7px 16px !important;
  border-radius: 10px !important;
  display: inline-block !important;
  object-fit: contain !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 18px !important;
}

.footer-tagline {
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  color: #94A3B8 !important;
  margin-bottom: 16px !important;
  max-width: 320px !important;
}

.footer-accreditation-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34D399;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  max-width: fit-content;
}

.footer-contact-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #CBD5E1 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin-bottom: 8px !important;
}

.footer-contact-item:hover .contact-val,
.footer-contact-item:hover span {
  color: #A78BFA !important;
}

.contact-icon-bubble {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #A78BFA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-lbl {
  display: block;
  font-size: 0.72rem;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.contact-val {
  font-size: 0.92rem;
  color: #FFFFFF;
  font-weight: 700;
}

/* Titles */
.footer-title,
.footer-heading {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 20px !important;
  position: relative !important;
  padding-bottom: 10px !important;
  letter-spacing: -0.01em !important;
}

.footer-title::after,
.footer-heading::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 32px !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, #8B5CF6, #3B82F6) !important;
  border-radius: 2px !important;
}

.footer-sub-note {
  font-size: 0.8rem;
  color: #64748B;
  margin: -10px 0 16px 0;
}

/* Links */
.footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
}

/* Auto-remove ugly inline scrollbars from cities column */
.site-footer ul[style*="overflow-y"],
.footer-links[style*="overflow-y"],
.footer-cities-grid {
  max-height: none !important;
  overflow-y: visible !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 16px !important;
}

.footer-links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-links li a {
  color: #94A3B8 !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.footer-links li a:hover {
  color: #FFFFFF !important;
  transform: translateX(4px) !important;
}

/* Badges on Links */
.footer-mini-tag {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hot-tag {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
}

.footer-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34D399;
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
  animation: pulseGlow 1.5s infinite;
}

/* 2-Column City Centers Subgrid (Zero Scrollbars!) */
.footer-cities-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Footer Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 24px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.copyright-text,
.footer-bottom p {
  font-size: 0.85rem !important;
  color: #94A3B8 !important;
  margin: 0 !important;
}

.footer-bottom-sublinks {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #64748B;
}

.footer-bottom-sublinks a {
  color: #64748B;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom-sublinks a:hover {
  color: #C4B5FD;
}

.footer-social-links {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.social-btn,
.footer-social-links a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #94A3B8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.social-btn:hover,
.footer-social-links a:hover {
  transform: translateY(-3px) !important;
  color: #FFFFFF !important;
  background: #6366F1 !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45) !important;
}

.social-linkedin:hover {
  background: #0A66C2 !important;
  border-color: #0A66C2 !important;
  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.45) !important;
}

.social-instagram:hover {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(221, 42, 123, 0.45) !important;
}

.social-youtube:hover {
  background: #FF0000 !important;
  border-color: #FF0000 !important;
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45) !important;
}

.social-whatsapp:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45) !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .site-footer .footer-grid,
  .branding-footer .footer-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
  }
  .footer-trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  .pre-footer-cta-card {
    flex-direction: column !important;
    padding: 36px !important;
    align-items: flex-start !important;
  }
  .cta-action-side {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .site-footer .footer-grid,
  .branding-footer .footer-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 44px 0 32px !important;
  }
  .footer-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .footer-cities-subgrid {
    grid-template-columns: 1fr 1fr !important;
  }
  .pre-footer-cta-card {
    padding: 28px 20px !important;
  }
  .cta-headline {
    font-size: 1.55rem !important;
  }
  .cta-secondary-row {
    flex-direction: column !important;
  }
  .footer-bottom,
  .site-footer .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }
  .footer-bottom-sublinks {
    justify-content: center !important;
  }
}

/* ==================================================================
   UNIFIED MODAL POPUP SYSTEM (All 6 Pages)
================================================================== */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
  padding: 20px !important;
}

.modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 500px !important;
  padding: 34px 30px 30px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
  position: relative !important;
  transform: scale(0.93) translateY(16px) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

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

.modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  border: none !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  color: #64748B !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.modal-close:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  transform: rotate(90deg) !important;
}

.modal-header {
  margin-bottom: 20px !important;
  padding-right: 28px !important;
}

.modal-header h3 {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin-bottom: 6px !important;
  line-height: 1.25 !important;
}

.modal-header p {
  font-size: 0.9rem !important;
  color: #64748B !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.modal-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.modal-form input,
.modal-form select,
.modal-form textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  outline: none !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* ==================================================================
   UNIVERSAL FORM RESPONSIVENESS & STYLING (All 6 Pages)
================================================================== */
.form-2col,
.form-row,
.branding-form-row,
.graphic-form-row,
.motion-form-row,
.uiux-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .form-2col,
  .form-row,
  .branding-form-row,
  .graphic-form-row,
  .motion-form-row,
  .uiux-form-row {
    grid-template-columns: 1fr !important;
  }
}

.form-group,
.form-field,
.branding-form-group,
.uiux-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

.form-label,
.uiux-form-label {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 2px !important;
}

.form-label .req,
.uiux-form-label .req {
  color: #EF4444 !important;
}

.form-input,
.form-select,
.branding-input,
.branding-select,
.graphic-input,
.graphic-select,
.uiux-form-input,
.uiux-form-select,
.uiux-form-textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.form-input:focus,
.form-select:focus,
.branding-input:focus,
.branding-select:focus,
.graphic-input:focus,
.graphic-select:focus,
.uiux-form-input:focus,
.uiux-form-select:focus,
.uiux-form-textarea:focus {
  outline: none !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* Custom chevron on selects */
select.form-select,
select.branding-select,
select.graphic-select,
select.uiux-form-select,
.modal-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
}

/* Global Toast Notification */
.toast-notice {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  padding: 14px 22px !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 999999 !important;
  transform: translateY(100px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.toast-notice.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ==========================================================================
   4Achievers - City Landing Pages & City-Course Specific Pages Design
   ========================================================================== */

/* Breadcrumbs Bar */
.city-breadcrumb-wrap {
  background: #0A081F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
  font-size: 0.88rem;
}
.city-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #94A3B8;
}
.city-breadcrumb-item a {
  color: #CBD5E1;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.city-breadcrumb-item a:hover {
  color: #A78BFA;
}
.city-breadcrumb-sep {
  color: #64748B;
  font-size: 0.75rem;
}
.city-breadcrumb-current {
  color: #F8FAFC;
  font-weight: 600;
}

/* City Hero Section */
.city-hero {
  position: relative;
  background: radial-gradient(120% 120% at 50% 10%, #1e1654 0%, #0d0a29 55%, #060515 100%);
  color: #F8FAFC;
  padding: 85px 0 65px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.city-hero::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.city-hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.16) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.city-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.city-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #D8B4FE;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.city-live-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10B981;
  animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.city-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4.2vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.city-title-gradient {
  background: linear-gradient(135deg, #A78BFA 0%, #F472B6 50%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.city-hero-desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #CBD5E1;
  margin-bottom: 28px;
  max-width: 620px;
}
.city-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.city-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  color: #E2E8F0;
  font-weight: 500;
}
.city-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.btn-city-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #6A36E8 0%, #3B54E6 100%);
  color: #FFFFFF;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 10px 25px -5px rgba(106, 54, 232, 0.5);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
}
.btn-city-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -4px rgba(106, 54, 232, 0.7);
  color: #FFFFFF;
}
.btn-city-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 0.98rem;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}
.btn-city-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}

/* City Hero Card / Form */
.city-hero-card {
  background: rgba(23, 19, 61, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
}
.city-hero-card-header {
  margin-bottom: 20px;
  text-align: left;
}
.city-hero-card-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.city-hero-card-header p {
  font-size: 0.88rem;
  color: #94A3B8;
}

/* Stats Ribbon */
.city-stats-ribbon {
  background: #0E0C26;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 28px 0;
}
.city-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.city-stat-box {
  text-align: center;
  padding: 10px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.city-stat-box:last-child {
  border-right: none;
}
.city-stat-num {
  font-size: 2rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.1;
  font-family: var(--font-heading);
}
.city-stat-label {
  font-size: 0.82rem;
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* City Switcher Bar */
.city-switcher-wrap {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 18px 0;
  position: sticky;
  top: 70px;
  z-index: 99;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.city-switcher-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}
.city-switcher-label {
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748B;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.city-pills-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  min-width: 0;
  flex: 1;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Responsive Course Curriculum & Tools Grid */
.course-curriculum-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 991px) {
  .course-curriculum-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 768px) {
  .city-switcher-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .city-pills-scroll {
    width: 100%;
  }
}
.city-pill-btn {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}
.city-pill-btn:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
}
.city-pill-btn.active {
  background: #583CE8;
  border-color: #583CE8;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(88, 60, 232, 0.3);
}

/* City Courses Grid */
.city-courses-section {
  padding: 50px 0;
  background: #FFFFFF;
}
.city-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.city-course-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.city-course-card:hover {
  transform: translateY(-6px);
  border-color: #7C3AED;
  box-shadow: 0 16px 36px -8px rgba(124, 58, 237, 0.18);
}
.city-course-img-wrap {
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #0E0C26;
}
.city-course-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.city-course-card:hover .city-course-img-wrap img {
  transform: scale(1.05);
}
.city-course-badge-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(14, 12, 38, 0.85);
  backdrop-filter: blur(8px);
  color: #F8FAFC;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.city-course-rating-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  color: #FCD34D;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.city-course-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.city-course-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
  line-height: 1.3;
}
.city-course-desc {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}
.city-course-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  padding: 12px 0;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: #475569;
}
.city-course-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.city-tool-tag {
  background: #F1F5F9;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
}
.city-course-actions {
  display: flex;
  gap: 10px;
}
.btn-card-primary {
  flex: 1;
  text-align: center;
  background: #583CE8;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-card-primary:hover {
  background: #472DC4;
  color: #FFFFFF;
}
.btn-card-secondary {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-card-secondary:hover {
  background: #EDF2F7;
  color: #0F172A;
}

/* Center Details & Lab Infrastructure */
.city-center-section {
  padding: 50px 0;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}
.city-center-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.city-center-box {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.city-center-box h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.center-info-item {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  color: #334155;
}
.center-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #F0EDFE;
  color: #583CE8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.amenity-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Upcoming Batches Timetable */
.city-batches-section {
  padding: 44px 0;
  background: #FFFFFF;
}
.city-batch-table-wrap {
  overflow-x: auto;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  margin-top: 28px;
}
.city-batch-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.92rem;
}
.city-batch-table th {
  background: #0E0C26;
  color: #F8FAFC;
  padding: 16px 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.city-batch-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155;
}
.city-batch-table tr:last-child td {
  border-bottom: none;
}
.city-batch-table tr:hover td {
  background: #F8FAFC;
}
.batch-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.batch-status-filling {
  background: #FEF3C7;
  color: #92400E;
}
.batch-status-open {
  background: #D1FAE5;
  color: #065F46;
}

/* Curriculum Accordion (for Course in City Pages) */
.curriculum-module-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.curriculum-module-card:hover {
  border-color: #CBD5E1;
}
.curriculum-header {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #FFFFFF;
  font-weight: 700;
  font-size: 1.02rem;
  color: #0F172A;
}
.curriculum-badge {
  background: #F0EDFE;
  color: #583CE8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  margin-right: 12px;
}
.curriculum-body {
  padding: 0 22px 20px;
  border-top: 1px solid #F8FAFC;
  font-size: 0.92rem;
  color: #475569;
}
.curriculum-body ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 8px;
  line-height: 1.7;
}

/* Hiring Partners Strip */
.hiring-partners-strip {
  padding: 60px 0;
  background: #0E0C26;
  color: #FFFFFF;
  text-align: center;
}
.partners-badges-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.partner-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* City FAQ Accordion */
.city-faq-section {
  padding: 50px 0;
  background: #F8FAFC;
}
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 900px;
  margin: 32px auto 0;
}
.faq-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px 24px;
  transition: all 0.2s ease;
}
.faq-question {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-answer {
  font-size: 0.94rem;
  color: #475569;
  line-height: 1.6;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 991px) {
  .city-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .city-center-grid {
    grid-template-columns: 1fr;
  }
  .city-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .city-stat-box:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 640px) {
  .city-hero {
    padding: 60px 0 45px;
  }
  .city-hero-title {
    font-size: 2rem;
  }
  .city-hero-card {
    padding: 22px;
  }
  .city-courses-grid {
    grid-template-columns: 1fr;
  }
  .amenities-grid {
    grid-template-columns: 1fr;
  }
  .city-stats-grid {
    grid-template-columns: 1fr;
  }
  .city-stat-box {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
  }
  .city-stat-box:last-child {
    border-bottom: none;
  }
}


/* ==========================================================================
   4Achievers - High Visual Dynamic Artwork, Gallery & Tools Components
   ========================================================================== */

.city-hero-showcase {
  position: relative;
  border-radius: 24px;
  overflow: visible;
}
.hero-art-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 35px rgba(124, 58, 237, 0.35);
  background: #0E0C26;
  max-height: 480px;
}
.hero-art-img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-art-card:hover .hero-art-img {
  transform: scale(1.04);
}
.hero-floating-pill {
  position: absolute;
  background: rgba(14, 12, 38, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  z-index: 3;
}
.hero-pill-top-right {
  top: 20px;
  right: 20px;
  animation: floatSlow 4s infinite ease-in-out;
}
.hero-pill-bottom-left {
  bottom: 24px;
  left: 20px;
  animation: floatSlow 4s infinite ease-in-out 1.5s;
}
.hero-pill-bottom-right {
  bottom: 24px;
  right: 20px;
  animation: floatSlow 4s infinite ease-in-out 0.8s;
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Studio Infrastructure Gallery */
.studio-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.studio-gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid #E2E8F0;
  background: #0E0C26;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.studio-gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.studio-gallery-item:hover img {
  transform: scale(1.06);
}
.studio-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(14, 12, 38, 0.95) 0%, rgba(14, 12, 38, 0.5) 70%, transparent 100%);
  padding: 24px 16px 14px;
  color: #FFFFFF;
}
.studio-gallery-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: #FFFFFF;
}
.studio-gallery-sub {
  font-size: 0.78rem;
  color: #A78BFA;
  margin-top: 2px;
}

/* Rich Visual Project Card */
.project-card-visual {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card-visual:hover {
  transform: translateY(-8px);
  border-color: #7C3AED;
  box-shadow: 0 20px 40px -10px rgba(124, 58, 237, 0.22);
}
.project-card-img-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  background: #0E0C26;
}
.project-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card-visual:hover .project-card-img-wrap img {
  transform: scale(1.08);
}
.project-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(14, 12, 38, 0.85);
  backdrop-filter: blur(8px);
  color: #D8B4FE;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.project-card-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.project-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
  font-family: var(--font-heading);
}
.project-card-desc {
  font-size: 0.9rem;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

/* Modern Tool Icon Cards */
.tools-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.tool-item-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
.tool-item-card:hover {
  border-color: #583CE8;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(88, 60, 232, 0.18);
}
.tool-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tool-item-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.25;
}

/* Fast Enquiry Banner */
.city-enquiry-banner {
  background: radial-gradient(100% 100% at 50% 20%, #1e1654 0%, #0d0a29 70%, #060515 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 24px;
  padding: 44px 36px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  margin-top: 60px;
}

@media (max-width: 991px) {
  .studio-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .studio-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Creative Animation & Visual Flourish Enhancements
   ========================================================================== */
.hero-art-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px -12px rgba(124, 58, 237, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0E0C26;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.hero-art-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -10px rgba(168, 85, 247, 0.6);
}

/* Shimmer glow overlay on hero art */
.hero-art-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.8s ease;
  pointer-events: none;
}
.hero-art-card:hover::after {
  left: 200%;
}

/* Live pulse dot for badges */
.city-live-dot,
.hero-floating-pill .pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 0 rgba(16, 185, 129, 0.5);
  animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Animated play badge on project card previews */
.project-card-img-wrap::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 12, 38, 0.78);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.project-card-visual:hover .project-card-img-wrap::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Tool item cards with high-tech elevation */
.tool-item-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.tool-item-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: #7C3AED;
  box-shadow: 0 12px 28px -5px rgba(124, 58, 237, 0.22);
}

/* Studio Workstation Gallery item glow */
.studio-gallery-item {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.studio-gallery-item:hover {
  transform: translateY(-6px);
  border-color: #A855F7;
  box-shadow: 0 16px 36px -8px rgba(168, 85, 247, 0.35);
}



/* ==========================================================================
   Projects, Blogs & Free Masterclass Custom Component Styles
   ========================================================================== */

.nav-hot-pill {
  display: inline-block;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  animation: pulseHot 1.8s infinite;
}
@keyframes pulseHot {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 14px rgba(239, 68, 68, 0.85); }
  100% { transform: scale(1); }
}

.projects-hero-section {
  background: radial-gradient(120% 120% at 50% 10%, #17114A 0%, #0B0826 60%, #050414 100%);
  padding: 56px 0 40px;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.projects-hero-section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1000px; height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.projects-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #D8B4FE;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.projects-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.12;
  margin-bottom: 20px;
  color: #FFFFFF;
}
.projects-hero-title span {
  background: linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.projects-hero-desc {
  font-size: 1.1rem;
  color: #CBD5E1;
  max-width: 820px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.projects-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 26px;
}
.filter-tab-btn {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #475569;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.filter-tab-btn:hover {
  border-color: #7C3AED;
  color: #7C3AED;
  transform: translateY(-2px);
}
.filter-tab-btn.active {
  background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.projects-main-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 60px;
}
@media (max-width: 1024px) {
  .projects-main-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .projects-main-grid { grid-template-columns: 1fr; }
}

.project-item-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-item-card:hover {
  transform: translateY(-8px);
  border-color: #7C3AED;
  box-shadow: 0 20px 40px -10px rgba(124, 58, 237, 0.25);
}
.project-thumb-box {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #0E0C26;
}
.project-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-item-card:hover .project-thumb-box img {
  transform: scale(1.08);
}
.project-thumb-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(14, 12, 38, 0.85);
  backdrop-filter: blur(8px);
  color: #E9D5FF;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.project-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.project-card-body h3 {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
  line-height: 1.3;
}
.project-card-body p {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}
.project-creator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F1F5F9;
  padding-top: 14px;
  margin-top: auto;
  font-size: 0.82rem;
}
.project-creator-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-creator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
}
.project-placement-tag {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
}

.blogs-page-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 991px) {
  .blogs-page-layout {
    grid-template-columns: 1fr;
  }
}
.blog-content-area {
  min-width: 0;
}
.blog-article-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}
.blog-article-card:hover {
  border-color: #7C3AED;
  box-shadow: 0 16px 36px -10px rgba(124, 58, 237, 0.15);
}
.blog-article-hero-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}
.blog-article-body {
  padding: 36px;
}
.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: #64748B;
  margin-bottom: 14px;
}
.blog-category-badge {
  background: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  padding: 4px 12px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.blog-article-title {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  margin-bottom: 18px;
}
.blog-prose {
  font-size: 1.05rem;
  color: #334155;
  line-height: 1.75;
}
.blog-prose h2 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 28px 0 14px;
}
.blog-prose p {
  margin-bottom: 16px;
}
.blog-prose ul {
  margin: 14px 0 20px 24px;
}
.blog-prose li {
  margin-bottom: 8px;
}

.blog-sidebar-sticky {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.course-ad-card {
  background: radial-gradient(120% 120% at 50% 0%, #17114A 0%, #0B0826 70%, #050414 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  padding: 24px;
}
.course-ad-badge {
  display: inline-block;
  background: rgba(168, 85, 247, 0.25);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #D8B4FE;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.course-ad-img {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.course-ad-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 8px;
  line-height: 1.3;
}
.course-ad-desc {
  font-size: 0.88rem;
  color: #CBD5E1;
  line-height: 1.5;
  margin-bottom: 16px;
}
.course-ad-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.course-ad-highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #E2E8F0;
  font-weight: 600;
}
.course-ad-highlight-item svg {
  color: #10B981;
  flex-shrink: 0;
}

.course-ad-form {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px;
}
.course-ad-form-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
  text-align: center;
}
.course-ad-input {
  width: 100%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.course-ad-input::placeholder {
  color: #94A3B8;
}
.course-ad-btn {
  width: 100%;
  background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
  transition: all 0.2s ease;
}
.course-ad-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.6);
}

.masterclass-hero {
  background: radial-gradient(120% 120% at 50% 10%, #1E1256 0%, #0E092D 60%, #050414 100%);
  padding: 56px 0 44px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.masterclass-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 991px) {
  .masterclass-grid { grid-template-columns: 1fr; }
}
.masterclass-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #FCA5A5;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.masterclass-live-dot {
  width: 8px;
  height: 8px;
  background: #EF4444;
  border-radius: 50%;
  animation: pulseHot 1.5s infinite;
}
.masterclass-agenda-box {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-top: 40px;
}
.agenda-step {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.agenda-time {
  min-width: 90px;
  font-weight: 800;
  color: #7C3AED;
  font-size: 0.9rem;
}
.agenda-desc h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 4px;
}
.agenda-desc p {
  font-size: 0.88rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}



/* ==========================================================================
   Luxury Mega-Dropdown Menu System (Courses & 15 Cities)
   ========================================================================== */

.nav-dropdown {
  position: relative;
}

/* Base Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 9999;
  pointer-events: none;
}

/* Hover Bridge: prevents menu from closing when moving cursor across gap */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 18px;
  display: block;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mega Header */
.dropdown-mega-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}
.dropdown-mega-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #7C3AED;
  text-transform: uppercase;
}
.dropdown-mega-sub {
  font-size: 0.76rem;
  color: #64748B;
  font-weight: 600;
}

/* Mega Footer Strip */
.dropdown-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 4px;
  margin-top: 10px;
  border-top: 1px solid #F1F5F9;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

/* --- 1. COURSES MEGA DROPDOWN (2 COLUMNS) --- */
.dropdown-menu-courses {
  width: 660px;
  left: 50%;
  transform: translateX(-40%) translateY(10px);
}
.nav-dropdown:hover .dropdown-menu-courses {
  transform: translateX(-40%) translateY(0);
}
.mega-courses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.course-dropdown-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.course-dropdown-card:hover {
  background: #F8FAFC;
  border-color: #E2E8F0;
  transform: translateX(3px);
}
.course-dropdown-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: transform 0.2s ease;
}
.course-dropdown-card:hover .course-dropdown-icon {
  transform: scale(1.08);
}
.course-dropdown-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.course-dropdown-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}
.course-dropdown-card:hover .course-dropdown-title {
  color: #7C3AED;
}
.course-dropdown-desc {
  font-size: 0.74rem;
  color: #64748B;
  margin-top: 3px;
  line-height: 1.35;
}

/* --- 2. TRAINING CENTERS MEGA DROPDOWN (3 COLUMNS, ZERO SCROLL) --- */
.dropdown-menu-cities {
  width: 780px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
}
.nav-dropdown:hover .dropdown-menu-cities {
  transform: translateX(-50%) translateY(0);
}
.mega-cities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mega-city-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-col-heading {
  font-size: 0.7rem;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.city-dropdown-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}
.city-dropdown-card:hover {
  background: #F5F3FF;
  border-color: rgba(124, 58, 237, 0.25);
  transform: translateX(3px);
}
.city-dropdown-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #EDE9FE;
  color: #7C3AED;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.city-dropdown-card:hover .city-dropdown-icon {
  background: #7C3AED;
  color: #FFFFFF;
}
.city-dropdown-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.city-dropdown-name {
  font-size: 0.86rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.2;
}
.city-dropdown-card:hover .city-dropdown-name {
  color: #7C3AED;
}
.city-dropdown-hub {
  font-size: 0.72rem;
  color: #64748B;
  margin-top: 2px;
  line-height: 1.2;
}

/* --- 3. RESOURCES DROPDOWN (COMPACT LUXURY CARDS) --- */
.dropdown-menu-resources {
  width: 320px;
  left: 50%;
  transform: translateX(-40%) translateY(10px);
}
.nav-dropdown:hover .dropdown-menu-resources {
  transform: translateX(-40%) translateY(0);
}
.resource-dropdown-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.resource-dropdown-card:hover {
  background: #F8FAFC;
  border-color: #E2E8F0;
  transform: translateX(3px);
}
.resource-dropdown-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #F1F5F9;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
}
.resource-dropdown-card:hover .resource-dropdown-icon {
  background: #EDE9FE;
  color: #7C3AED;
}
.resource-dropdown-text {
  display: flex;
  flex-direction: column;
}
.resource-dropdown-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0F172A;
}
.resource-dropdown-desc {
  font-size: 0.74rem;
  color: #64748B;
  margin-top: 2px;
}


/* Projects Showcase Gallery Background Enhancement */
#projects.section {
  background-color: #F8FAFC;
  border-top: 1px solid #EEF2F6;
  border-bottom: 1px solid #EEF2F6;
}

@media (max-width: 768px) {
  :root {
    --section-pad-y: 38px !important;
  }
  .hero-section {
    padding-top: 36px !important;
    padding-bottom: 24px !important;
  }
  .trust-bar {
    margin-top: 24px !important;
  }
}

/* ==========================================================================
   Global Multi-Device Responsive Fortification (Mobile, Tablet, Desktop)
   Guarantees Zero Horizontal Overflow & Clean Visual Layouts Across All Viewports
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
}

@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
  .site-header {
    padding: 8px 0;
  }
  .site-header .container.header-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .brand-logo .logo-img {
    max-width: 120px !important;
    height: auto;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px !important;
  }
  .header-actions .btn.open-enquire-modal {
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: nowrap;
  }
  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .hero-title {
    font-size: clamp(1.9rem, 1.2rem + 3.8vw, 2.7rem) !important;
    line-height: 1.12 !important;
    word-break: break-word !important;
  }
  .hero-subtitle {
    font-size: clamp(1rem, 0.85rem + 0.8vw, 1.15rem) !important;
  }
  .hero-desc {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }
  .hero-cta-group {
    flex-direction: column !important;
    width: 100% !important;
  }
  .hero-cta-group .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Pre-Footer Mobile Responsiveness */
  .cta-glow-orb {
    display: none !important;
  }
  .pre-footer-cta-card {
    flex-direction: column !important;
    padding: 32px 20px !important;
    text-align: center !important;
    gap: 24px !important;
    overflow: hidden !important;
  }
  .cta-text-side {
    max-width: 100% !important;
  }
  .cta-headline {
    font-size: 1.6rem !important;
  }
  .cta-feature-tags {
    justify-content: center !important;
  }
  .cta-action-side {
    min-width: 100% !important;
    width: 100% !important;
  }
  .cta-primary-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .cta-secondary-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .cta-contact-pill {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Footer Mobile Responsiveness */
  .footer-trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .footer-bottom-left, .footer-bottom-right {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .footer-bottom-sublinks {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .footer-social-links {
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .brand-logo .logo-img {
    max-width: 105px !important;
  }
  .header-actions .btn.open-enquire-modal {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }
  .hero-title {
    font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.2rem) !important;
  }
  .hero-badge {
    font-size: 0.72rem !important;
    padding: 6px 14px !important;
  }
  .trust-bar-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}