/* ==========================================================================

   ORG LINKED - Core Design System & Styles (Antigravity-Inspired)

   ========================================================================== */



/* 1. CSS Variables & Reset */

:root {

  /* Colors */

  --primary: #0b57d0;

  --primary-hover: #0a4ebd;

  --primary-rgb: 11, 87, 208;

  --bg: #ffffff;

  --text-main: #05070b;

  --text-muted: #5f6368;

  --border: #e3e3e3;

  --border-focus: #0b57d0;

  --bg-card: #ffffff;

  --bg-alt: #f8f9fa;

  --bg-soft-blue: rgba(11, 87, 208, 0.04);

  --error: #d93025;

  --success: #137333;



  /* Fonts */

  --font-headings: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;



  /* Layout */

  --container-max-width: 1200px;

  --header-height: 88px;

  --radius-sm: 8px;

  --radius-md: 16px;

  --radius-lg: 24px;



  /* Transitions */

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  font-size: 15.2px;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

}



body {

  font-family: var(--font-body);

  background-color: var(--bg);

  background-image: url('site_background.jpg');

  background-size: cover;

  background-position: top center;

  background-repeat: no-repeat;

  background-attachment: fixed;

  color: var(--text-main);

  line-height: 1.6;

  overflow-x: hidden;

  position: relative;

}



img,

svg {

  display: block;

  max-width: 100%;

}



button,

input,

select,

textarea {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

}



/* Skip to Content for Accessibility */

.skip-to-content {

  position: absolute;

  top: -100px;

  left: 20px;

  background-color: var(--primary);

  color: #ffffff;

  padding: 10px 20px;

  border-radius: var(--radius-sm);

  z-index: 9999;

  text-decoration: none;

  font-weight: 500;

  transition: top var(--transition-fast);

}



.skip-to-content:focus {

  top: 20px;

  outline: 2px solid var(--text-main);

}



/* Helpers */

.container {

  max-width: var(--container-max-width);

  margin-left: auto;

  margin-right: auto;

  padding-left: 24px;

  padding-right: 24px;

}



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



.hidden {

  display: none !important;

}



.text-gradient {

  background: linear-gradient(135deg, var(--text-main) 30%, var(--primary) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}



/* ==========================================================================

   2. Typography & Layout System

   ========================================================================== */



h1,

h2,

h3,

h4 {

  font-family: var(--font-headings);

  font-weight: 700;

  line-height: 1.15;

  color: var(--text-main);

}



/* Section Common Styles */

section {

  padding-top: 6rem;

  padding-bottom: 6rem;

  position: relative;

  border-bottom: 1px solid var(--border);

}



/* Translucent Section Backdrops for Gradient Flow */

.section-white-translucent {

  background-color: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.section-alt-translucent {

  background-color: rgba(245, 247, 250, 0.9) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.section-header {

  max-width: 760px;

  margin-bottom: 3.5rem;

}



.section-tag {

  display: inline-block;

  font-size: 0.8rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--primary);

  margin-bottom: 0.75rem;

}



.section-title {

  font-size: 2.5rem;

  font-weight: 800;

  margin-bottom: 1.25rem;

  letter-spacing: -0.02em;

}



.section-subtitle {

  font-size: 1.15rem;

  color: var(--text-muted);

  font-weight: 400;

  line-height: 1.5;

}



.section-hint {

  font-size: 0.95rem;

  color: var(--text-muted);

  margin-top: 0.75rem;

  font-style: italic;

}



@media (max-width: 768px) {

  section {

    padding-top: 4rem;

    padding-bottom: 4rem;

  }



  .section-title {

    font-size: 1.85rem;

  }



  .section-subtitle {

    font-size: 1rem;

  }

}



/* ==========================================================================

   3. Buttons & Component States

   ========================================================================== */



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 24px;

  border-radius: var(--radius-sm);

  font-weight: 500;

  font-size: 0.95rem;

  text-decoration: none;

  cursor: pointer;

  border: 1px solid transparent;

  transition: all var(--transition-fast);

  white-space: nowrap;

}



.btn-sm {

  padding: 8px 16px;

  font-size: 0.85rem;

}



.btn-lg {

  padding: 18px 36px;

  font-size: 1.12rem;

}



.btn-block {

  display: flex;

  width: 100%;

}



.btn-primary {

  background-color: var(--primary);

  color: #ffffff;

}



.btn-primary:hover {

  background-color: var(--primary-hover);

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(11, 87, 208, 0.25);

}



.btn-primary:active {

  transform: translateY(0);

  box-shadow: 0 2px 4px rgba(11, 87, 208, 0.15);

}



.btn-secondary {

  background-color: var(--bg);

  border-color: var(--border);

  color: var(--text-main);

}



.btn-secondary:hover {

  border-color: var(--primary);

  background-color: var(--bg-soft-blue);

  transform: translateY(-2px);

}



.btn-secondary:active {

  transform: translateY(0);

}



.btn-text {

  background: transparent;

  border: none;

  color: var(--primary);

  padding: 4px 8px;

  font-weight: 600;

  font-size: 0.9rem;

}



.btn-text:hover {

  color: var(--primary-hover);

  text-decoration: underline;

}



/* Form Fields */

.form-group {

  margin-bottom: 1.5rem;

  display: flex;

  flex-direction: column;

}



.form-group label {

  font-size: 0.9rem;

  font-weight: 500;

  margin-bottom: 0.5rem;

  color: var(--text-main);

}



.form-group label .required {

  color: var(--primary);

  margin-left: 2px;

}



.form-group label .optional {

  font-size: 0.8rem;

  color: var(--text-muted);

  font-weight: 400;

}



.form-group input[type="text"],

.form-group input[type="email"],

.form-group input[type="tel"],

.form-group input[type="url"],

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 12px 16px;

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  background-color: var(--bg);

  color: var(--text-main);

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

  outline: none;

}



.form-group input:hover,

.form-group select:hover,

.form-group textarea:hover {

  border-color: var(--text-muted);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  border-color: var(--border-focus);

  box-shadow: 0 0 0 4px rgba(11, 87, 208, 0.1);

}



.form-group.has-error input,

.form-group.has-error select,

.form-group.has-error textarea {

  border-color: var(--error);

}



.form-error-msg {

  font-size: 0.8rem;

  color: var(--error);

  margin-top: 0.35rem;

  display: none;

}



.form-group.has-error .form-error-msg {

  display: block;

}



.form-group-checkbox {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 1.5rem;

}



.form-group-checkbox input[type="checkbox"] {

  width: 18px;

  height: 18px;

  cursor: pointer;

  accent-color: var(--primary);

}



.form-group-checkbox .checkbox-label {

  font-size: 0.9rem;

  color: var(--text-muted);

  cursor: pointer;

}



/* Badge Widget */

.badge {

  display: inline-flex;

  align-items: center;

  background-color: var(--bg-soft-blue);

  color: var(--primary);

  padding: 6px 12px;

  border-radius: 50px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  margin-bottom: 1.5rem;

}



/* ==========================================================================

   4. Header & Navigation (Sticky)

   ========================================================================== */



.main-header {

  position: fixed;

  top: 16px;

  left: 50%;

  transform: translateX(-50%);

  width: calc(100% - 32px);

  max-width: var(--container-max-width);

  height: 68px;

  background-color: rgba(10, 15, 30, 0.3);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 50px;

  z-index: 1000;

  transition: all var(--transition-normal);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

}



.main-header.scrolled {

  top: 10px;

  height: 62px;

  background-color: rgba(5, 7, 11, 0.76);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border-color: rgba(11, 87, 208, 0.35);

  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);

}



.header-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

  width: 100%;

  padding: 0 24px;

}



.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  z-index: 1001;
  transform-origin: left center;
  transition: transform 300ms ease, opacity 300ms ease;
}

/* Default state: slightly larger, sitting slightly above/outside the navbar area */
.main-header:not(.is-scrolled) .logo {
  transform: translateY(0) scale(1.08);
}

/* Scrolled state: settles neatly inside the navbar, aligned */
.main-header.is-scrolled .logo {
  transform: translateY(0) scale(1);
}

.logo-img {
  height: 48px !important;
  width: 48px !important;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  /* adds a premium rounded touch to the square logo */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 300ms ease, opacity 300ms ease !important;
}

.main-header:not(.is-scrolled) .logo-img {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
  /* stronger shadow when floating */
}

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

@media (max-width: 768px) {
  .main-header:not(.is-scrolled) .logo {
    transform: translateY(0) scale(1.04);
  }

  .main-header.is-scrolled .logo {
    transform: translateY(0) scale(1);
  }

  .logo-img {
    height: 38px !important;
    width: 38px !important;
  }
}



.nav-menu {

  display: flex;

  align-items: center;

}



.nav-list {

  display: flex;

  list-style: none;

  gap: 2px;

}



.nav-link {

  text-decoration: none;

  font-size: 0.78rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.85);

  padding: 8px 12px;

  border-radius: 50px;

  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-fast), color var(--transition-fast);

  position: relative;

  will-change: transform;

}



.nav-link:hover {

  color: #ffffff;

  background-color: rgba(255, 255, 255, 0.1);

}



.nav-link.active {

  color: #ffffff;

  font-weight: 700;

  background-color: var(--primary);

  box-shadow: 0 2px 12px rgba(11, 87, 208, 0.35);

}



.nav-cta-container {

  display: block;

}



.mobile-nav-toggle {

  display: none;

  flex-direction: column;

  justify-content: space-between;

  width: 24px;

  height: 16px;

  background: transparent;

  border: none;

  cursor: pointer;

  z-index: 1001;

}



.mobile-nav-toggle .hamburger-bar {

  width: 100%;

  height: 2px;

  background-color: #ffffff;

  transition: all var(--transition-fast);

}



@media (max-width: 1023px) {

  .nav-cta-container {

    display: none;

  }



  .mobile-nav-toggle {

    display: flex;

  }



  .nav-menu {

    position: fixed;

    top: 16px;

    right: 0;

    transform: translateX(110%);

    width: 280px;

    height: calc(100vh - 32px);

    background: rgba(5, 7, 11, 0.95);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--radius-lg) 0 0 var(--radius-lg);

    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);

    padding: 80px 24px 40px;

    flex-direction: column;

    align-items: flex-start;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 999;

    visibility: hidden;

  }



  .nav-menu.open {

    transform: translateX(0);

    visibility: visible;

  }



  .nav-list {

    flex-direction: column;

    width: 100%;

    gap: 8px;

  }



  .nav-link {

    display: block;

    width: 100%;

    font-size: 0.9rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    padding: 12px 18px;

    border-radius: var(--radius-sm);

  }



  /* Hamburger Open State */

  .mobile-nav-toggle.open .hamburger-bar:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

  }



  .mobile-nav-toggle.open .hamburger-bar:nth-child(2) {

    opacity: 0;

  }



  .mobile-nav-toggle.open .hamburger-bar:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

  }

}



@media (max-width: 1200px) and (min-width: 1024px) {

  .nav-link {

    padding: 6px 8px !important;

    font-size: 0.72rem !important;

  }



  .nav-list {

    gap: 1px !important;

  }

}



/* ==========================================================================

   5. Background & Motion Setup

   ========================================================================== */



.ambient-background {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;

  background-color: transparent;

}



#main-content {

  position: relative;

  z-index: 10;

}



.hero-video-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 130vh;

  overflow: hidden;

  will-change: transform, opacity;

}



.hero-video-wrapper::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, rgba(5, 7, 11, 0.25) 0%, rgba(5, 7, 11, 0.45) 100%);

  z-index: 4;

  pointer-events: none;

}



#hero-video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 1;

  filter: contrast(0.85) brightness(0.92);

}

@media (max-width: 767px) {
  #hero-blur-canvas {
    display: none;
  }

  .hero-video-wrapper {
    background: radial-gradient(circle at 50% 50%, var(--bg-alt) 0%, var(--bg-main) 100%);
  }
}



/* Cinematic Bokeh/Lens Blur elements */

.hero-bokeh-container {

  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  overflow: hidden;

}





/* Floating animation with slight orbital rotation and scale change */

@keyframes floatBokeh1 {



  0%,

  100% {

    transform: translate(0, 0) scale(1);

    opacity: 0.35;

  }



  50% {

    transform: translate(60px, -40px) scale(1.15);

    opacity: 0.7;

  }

}



@keyframes floatBokeh2 {



  0%,

  100% {

    transform: translate(0, 0) scale(1.1);

    opacity: 0.25;

  }



  50% {

    transform: translate(-50px, 60px) scale(0.9);

    opacity: 0.55;

  }

}



@keyframes floatBokeh3 {



  0%,

  100% {

    transform: translate(0, 0) scale(0.9);

    opacity: 0.3;

  }



  50% {

    transform: translate(40px, 50px) scale(1.2);

    opacity: 0.65;

  }

}



.bokeh-1 {

  width: 260px;

  height: 260px;

  top: 15%;

  left: 10%;

  animation: floatBokeh1 24s infinite ease-in-out;

}



.bokeh-2 {

  width: 320px;

  height: 320px;

  bottom: 10%;

  right: 15%;

  animation: floatBokeh2 28s infinite ease-in-out;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(11, 87, 208, 0.03) 60%, rgba(0, 0, 0, 0) 80%);

}



.bokeh-3 {

  width: 180px;

  height: 180px;

  top: 45%;

  right: 8%;

  animation: floatBokeh3 20s infinite ease-in-out;

}



.bokeh-4 {

  width: 220px;

  height: 220px;

  bottom: 25%;

  left: 20%;

  animation: floatBokeh1 22s infinite ease-in-out alternate;

  background: radial-gradient(circle, rgba(138, 180, 248, 0.15) 0%, rgba(10, 68, 120, 0.04) 50%, rgba(0, 0, 0, 0) 70%);

}





#ambient-canvas {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.bg-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(120px);

  opacity: 0.15;

  mix-blend-mode: multiply;

  pointer-events: none;

  background: var(--primary);

  will-change: transform;

}



.orb-1 {

  width: 50vw;

  height: 50vw;

  top: -10vw;

  right: -10vw;

  animation: orbFloatSlow 25s infinite alternate ease-in-out;

}



.orb-2 {

  width: 40vw;

  height: 40vw;

  bottom: -10vw;

  left: -10vw;

  animation: orbFloatSlow 30s infinite alternate-reverse ease-in-out;

  background: #4285f4;

  opacity: 0.1;

}



.bg-grid {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image:

    linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);

  background-size: 80px 80px;

}



@keyframes orbFloatSlow {

  0% {

    transform: translate(0, 0) scale(1);

  }



  50% {

    transform: translate(5%, 10%) scale(1.1);

  }



  100% {

    transform: translate(-5%, -5%) scale(0.95);

  }

}



/* Intersection Observer Animations */

.fade-in-slide {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity var(--transition-slow), transform var(--transition-slow);

  will-change: opacity, transform;

}



.fade-in-slide.in-view {

  opacity: 1;

  transform: translateY(0);

}



.delay-1 {

  transition-delay: 0.15s;

}



.delay-2 {

  transition-delay: 0.3s;

}



.delay-3 {

  transition-delay: 0.45s;

}



.delay-4 {

  transition-delay: 0.6s;

}



/* Scroll Reveal Animations */

.fade-in-scale {

  opacity: 0;

  transform: scale(0.95);

  transition: opacity var(--transition-slow), transform var(--transition-slow);

  will-change: opacity, transform;

}



.fade-in-scale.in-view {

  opacity: 1;

  transform: scale(1);

}



.fade-in-left {

  opacity: 0;

  transform: translateX(-40px);

  transition: opacity var(--transition-slow), transform var(--transition-slow);

  will-change: opacity, transform;

}



.fade-in-left.in-view {

  opacity: 1;

  transform: translateX(0);

}



.fade-in-right {

  opacity: 0;

  transform: translateX(40px);

  transition: opacity var(--transition-slow), transform var(--transition-slow);

  will-change: opacity, transform;

}



.fade-in-right.in-view {

  opacity: 1;

  transform: translateX(0);

}



.slide-up {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity var(--transition-slow), transform var(--transition-slow);

  will-change: opacity, transform;

}



.slide-up.in-view {

  opacity: 1;

  transform: translateY(0);

}



/* Curved Section Dividers (Bending Works) */

.section-divider {

  position: absolute;

  left: 0;

  width: 100%;

  height: 80px;

  overflow: hidden;

  line-height: 0;

  z-index: 10;

  pointer-events: none;

}



.section-divider-bottom {

  bottom: -1px;

}



.section-divider-top {

  top: -1px;

}



.section-divider svg {

  display: block;

  width: 100%;

  height: 100%;

}



.section-divider .shape-fill {

  fill: rgba(255, 255, 255, 0.88);

}



.section-divider.divider-to-featured-jobs .shape-fill {

  fill: rgba(255, 255, 255, 0.88);

}



.section-divider.divider-to-alt .shape-fill {

  fill: rgba(245, 247, 250, 0.9);

}



.section-divider.divider-to-dark .shape-fill {

  fill: #05070b !important;

}



.section-divider.divider-from-alt .shape-fill {

  fill: rgba(255, 255, 255, 0.88);

}



@media (max-width: 768px) {

  .section-divider {

    height: 48px;

  }

}



/* Premium Glassmorphic Cards & Utilities */

.glass-card {

  background: rgba(255, 255, 255, 0.7) !important;

  backdrop-filter: blur(16px) !important;

  -webkit-backdrop-filter: blur(16px) !important;

  border: 1px solid rgba(11, 87, 208, 0.08) !important;

  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.03) !important;

}



.glass-card:hover {

  border-color: rgba(11, 87, 208, 0.2) !important;

  box-shadow: 0 20px 50px rgba(11, 87, 208, 0.08) !important;

}



/* Custom Scrollbars */

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: rgba(11, 87, 208, 0.01);

}



::-webkit-scrollbar-thumb {

  background: rgba(11, 87, 208, 0.12);

  border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

  background: rgba(11, 87, 208, 0.25);

}



/* Respect Reduced Motion Preferences */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }



  .fade-in-slide,

  .fade-in-scale,

  .fade-in-left,

  .fade-in-right,

  .slide-up {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }



  .bg-orb {

    animation: none !important;

  }



  .logo-dot,

  .sector-card,

  .btn,

  .nav-link,

  .job-card {

    transition: none !important;

    transform: none !important;

  }

}





/* ==========================================================================

   6. Section 1: Hero & Command Center

   ========================================================================== */



.section-hero {

  min-height: 100vh;

  display: flex;

  align-items: center;
  /* center container vertically */

  padding-top: calc(var(--header-height) + 1.5rem);

  padding-bottom: 2rem;

  overflow: hidden;

  color: #ffffff;

  position: relative;

}



.section-hero .widget-card.glass-card {

  background: #ffffff !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  border: 1px solid rgba(11, 87, 208, 0.15) !important;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;

}



.hero-grid {

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  width: 100%;

}



.hero-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  max-width: 1000px;

  margin: 0 auto;

}



.hero-title {

  font-size: clamp(2.65rem, 5.25vw, 5.25rem) !important;

  font-weight: 740;

  line-height: 1.06;

  letter-spacing: 0;

  margin-bottom: 2rem;

  margin-top: 1rem;

  color: #ffffff;

  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);

}



.hero-title-static {

  opacity: 0;

  display: inline-block;

}



.hero-subtitle {

  font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;

  color: #e8eaed;

  line-height: 1.6;

  margin-bottom: 2.5rem;

  font-weight: 500;

  opacity: 0;

  max-width: 800px;

}



.hero-intro {

  font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;

  color: #ffffff !important;

  margin-bottom: 3.5rem;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

  position: relative;

  opacity: 0;

  max-width: 800px;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #8ab4f8;

  background: none !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

  margin-bottom: 2rem;

  opacity: 0;

}



.hero-badge::before {

  content: '';

  display: inline-block;

  width: 6px;

  height: 6px;

  background-color: #184bcd;

  border-radius: 50%;

  margin-right: 8px;

}



.hero-actions .btn {

  opacity: 0;

}



.hero-typing-cursor {

  display: none;

}

.hero-title-dynamic {

  display: inline-block;

  min-height: 1.1em;

  color: #ffffff;

  opacity: 1;

  transform: translateY(0);

  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.42);

  transition: opacity 0.38s ease, transform 0.38s ease;

  will-change: opacity, transform;

}

.section-hero .text-gradient,
.section-hero .hero-title-dynamic {

  -webkit-text-fill-color: #ffffff !important;

}



@keyframes cursorBlink {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

}




/* Hero Intro Typing Animation Cursor */

.hero-intro::after {

  content: '';

  animation: none;

  margin-left: 4px;

  color: #ffffff !important;

  font-weight: normal;

}



.hero-intro.typing-done::after {

  content: '';

  animation: none;

}



@keyframes heroIntroBlink {

  50% {

    opacity: 0;

  }

}



.hero-actions {

  display: flex;

  gap: 16px;

  align-items: center;

  justify-content: center;

}



.icon-right {

  width: 18px;

  height: 18px;

  transition: transform var(--transition-fast);

}



.btn-primary:hover .icon-right {

  transform: translateX(4px);

}



/* Command Center Widget */

.hero-widget {

  position: relative;

}



#widget-scratch-canvas {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 100;

  cursor: crosshair;

  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  border-radius: var(--radius-lg);

  pointer-events: auto;

}



#widget-scratch-canvas.fade-out {

  opacity: 0;

  pointer-events: none;

}



.widget-card {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 32px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);

  position: relative;

  overflow: hidden;

  transition: transform var(--transition-slow), box-shadow var(--transition-slow);

  color: var(--text-main) !important;

}



.widget-card h3,

.widget-card .widget-title {

  color: #000000 !important;

}



.widget-card .widget-desc,

.widget-card .stat-label {

  color: var(--text-muted) !important;

}



.widget-card .stat-number {

  color: var(--primary) !important;

}



.widget-card:hover {

  transform: translateY(-4px) rotate(0.5deg);

  box-shadow: 0 20px 50px rgba(11, 87, 208, 0.08);

}



.widget-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

  border-bottom: 1px solid var(--border);

  padding-bottom: 16px;

}



.widget-status {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--success);

}



.status-pulse {

  width: 8px;

  height: 8px;

  background-color: var(--success);

  border-radius: 50%;

  position: relative;

}



.status-pulse::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: var(--success);

  border-radius: 50%;

  animation: pulse 1.5s infinite ease-out;

}



@keyframes pulse {

  0% {

    transform: scale(1);

    opacity: 1;

  }



  100% {

    transform: scale(3);

    opacity: 0;

  }

}



.widget-regions {

  display: flex;

  gap: 6px;

}



.region-chip {

  font-size: 0.75rem;

  font-weight: 700;

  background-color: var(--bg-soft-blue);

  color: var(--primary);

  padding: 4px 8px;

  border-radius: 4px;

}



.widget-title {

  font-size: 1.35rem;

  font-weight: 800;

  margin-bottom: 6px;

  color: #000000 !important;

  text-shadow: none;

}



.widget-desc {

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 20px;

}



.widget-search {

  position: relative;

  margin-bottom: 16px;

}



.search-icon {

  position: absolute;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

  width: 18px;

  height: 18px;

  color: var(--text-muted);

  pointer-events: none;

}



.widget-search input {

  width: 100%;

  padding: 14px 16px 14px 48px;

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  background-color: var(--bg);

  outline: none;

  font-size: 0.95rem;

  transition: all var(--transition-fast);

}



.widget-search input:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 4px rgba(11, 87, 208, 0.1);

}



.widget-sectors {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 24px;

}



.sector-tag {

  font-size: 0.8rem;

  font-weight: 600;

  background-color: var(--bg-alt);

  color: var(--text-muted);

  padding: 6px 12px;

  border-radius: 50px;

  cursor: pointer;

  transition: all var(--transition-fast);

  border: 1px solid transparent;

}



.sector-tag:hover {

  background-color: var(--border);

  color: var(--text-main);

}



.sector-tag.active {

  background-color: var(--primary);

  color: #ffffff;

}



.widget-stats-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin-bottom: 20px;

  border-top: 1px solid var(--border);

  padding-top: 16px;

}



.stat-card {

  text-align: center;

  background-color: var(--bg-alt);

  padding: 8px 4px;

  border-radius: var(--radius-sm);

}



.stat-number {

  display: block;

  font-family: var(--font-headings);

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--primary);

}



.stat-label {

  display: block;

  font-size: 0.65rem;

  color: var(--text-muted);

  font-weight: 500;

  margin-top: 3px;

}



.stat-card .stat-number {

  font-size: 1.25rem;

}



.stat-card .stat-label {

  font-size: 0.72rem;

}



/* Custom Overrides for Hero Readability */

/* Hero badge styling is handled by .hero-badge */



.section-hero .text-gradient {

  background: linear-gradient(90deg, #ffffff 0%, #8ab4f8 50%, #c5a3ff 100%) !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  color: transparent !important;

  text-shadow: none !important;

}



.text-gradient .hl-word {

  background: linear-gradient(90deg, #ffffff 0%, #8ab4f8 50%, #8ab4f8 100%) !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  color: transparent !important;

  display: inline-block;

  text-shadow: none !important;

}



.section-hero .btn-secondary {

  background-color: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.25);

  color: #ffffff;

}



.section-hero .btn-secondary:hover {

  background-color: rgba(255, 255, 255, 0.18);

  border-color: #ffffff;

  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);

}



@media (max-width: 1023px) {

  .hero-grid {

    flex-direction: column;

    gap: 40px;

  }



  .hero-title {

    /* Handled by fluid typographic clamp */

  }



  .section-hero {

    padding-bottom: 4rem;

  }

}



@media (max-width: 480px) {

  .hero-actions {

    flex-direction: column;

    width: 100%;

  }



  .hero-actions .btn {

    width: 100%;

  }



  .widget-stats-grid {

    grid-template-columns: 1fr;

  }

}



/* ==========================================================================

   7. Section 2: About Us

   ========================================================================== */



.section-about {

  background-color: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

}



.about-intro-text {

  font-size: 1.45rem;

  font-family: var(--font-headings);

  font-weight: 500;

  line-height: 1.45;

  color: var(--text-main);

}



.about-body-text {

  font-size: 1.05rem;

  color: var(--text-muted);

  margin-bottom: 2rem;

}



.about-quote {

  font-size: 1.15rem;

  font-weight: 500;

  color: var(--primary);

  border-left: 2px solid var(--primary);

  padding-left: 20px;

  font-style: italic;

  line-height: 1.5;

}

/* Premium About page hero and editorial section.
   Kept near the base About styles so the page cannot render as raw text if later CSS is delayed. */
.about-premium-section {
  padding: 8rem 0 7rem;
  background-color: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: relative;
  overflow: hidden;
}

.about-premium-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.about-premium-eyebrow {
  display: block;
  font-family: var(--font-headings);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 2rem;
}

.about-premium-heading {
  font-family: var(--font-headings);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
  letter-spacing: -0.02em;
  max-width: 1000px;
  margin-bottom: 3.5rem;
}

.about-premium-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border);
  margin: 3.5rem 0;
}

.about-premium-intro-grid,
.about-premium-blocks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
}

.about-premium-intro-grid {
  gap: 4rem;
}

.about-premium-blocks-grid {
  gap: 5rem;
  margin-top: 2rem;
}

.about-premium-intro-left {
  max-width: 580px;
}

.about-premium-intro-right {
  max-width: 480px;
}

.about-premium-intro-text {
  font-family: var(--font-headings);
  font-size: clamp(1.3rem, 2.5vw, 1.625rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-main);
}

.about-premium-supporting-text,
.about-premium-block-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.about-premium-editorial-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem 0 2.5rem;
  transition: transform var(--transition-normal);
}

.about-premium-editorial-block:hover {
  transform: translateY(-2px);
}

.about-premium-block-title {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.about-premium-sectors-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 0;
  margin: 0;
}

.about-premium-sectors-list li {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-main);
  position: relative;
  padding-left: 1.25rem;
}

.about-premium-sectors-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--primary);
  border-radius: 50%;
}

.about-premium-cta-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.about-premium-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-headings);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.5rem;
}

.about-premium-cta-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.about-premium-cta-link:hover::after {
  transform: scaleX(1);
}

.about-premium-cta-link svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  transition: transform var(--transition-normal);
}

.about-premium-cta-link:hover svg {
  transform: translateX(6px);
}



@media (max-width: 768px) {

  .about-premium-intro-grid,
  .about-premium-blocks-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-premium-intro-left,
  .about-premium-intro-right {
    max-width: 100%;
  }

  .about-premium-editorial-block {
    padding: 1rem 0 2rem;
  }

  .about-premium-section {
    padding: 6rem 0;
  }

  .about-premium-divider {
    margin: 2.5rem 0;
  }

  .about-premium-sectors-list {
    flex-direction: column;
    gap: 0.75rem;
  }

  .about-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }



  .about-intro-text {

    font-size: 1.2rem;

  }

}



/* ==========================================================================

   8. Section 3: Jobs Board & Carousel

   ========================================================================== */



.section-jobs {

  background-color: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.section-jobs .section-tag {

  color: var(--primary) !important;

  background-color: var(--bg-soft-blue) !important;

  border: 1px solid rgba(11, 87, 208, 0.15) !important;

  padding: 4px 12px !important;

  border-radius: 20px !important;

}



.section-jobs .showcase-title {

  color: var(--text-main) !important;

}



.section-jobs .showcase-desc {

  color: var(--text-muted) !important;

}



.section-jobs .showcase-instruction,

.section-jobs .showcase-next {

  color: var(--text-muted) !important;

}



.section-jobs .globe-text-trigger {

  color: var(--primary) !important;

  border-bottom-color: rgba(11, 87, 208, 0.5) !important;

}



.section-jobs .globe-text-trigger:hover,

.section-jobs .globe-text-trigger:focus-visible {

  color: var(--primary-hover) !important;

  border-bottom-color: var(--primary-hover) !important;

  text-shadow: none !important;

}



.section-jobs .globe-text-trigger.active {

  color: #ffffff !important;

  background-color: var(--primary) !important;

  box-shadow: 0 4px 12px rgba(11, 87, 208, 0.25) !important;

}



.jobs-filter-panel {

  background-color: var(--bg-alt);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 20px;

  margin-bottom: 24px;

}



.filter-group-main {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 12px;

}



.filter-input-wrapper {

  position: relative;

}



.filter-search-icon {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  width: 18px;

  height: 18px;

  color: var(--text-muted);

}



.filter-input-wrapper input {

  width: 100%;

  padding: 12px 12px 12px 42px;

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  background-color: var(--bg);

  outline: none;

  font-size: 0.9rem;

  transition: all var(--transition-fast);

}



.filter-input-wrapper input:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.08);

}



.filter-select-wrapper select {

  width: 100%;

  padding: 12px 16px;

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  background-color: var(--bg);

  outline: none;

  font-size: 0.9rem;

  cursor: pointer;

  transition: all var(--transition-fast);

}



.filter-select-wrapper select:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.08);

}



.filter-active-summary {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 16px;

  padding-top: 16px;

  border-top: 1px solid var(--border);

  font-size: 0.9rem;

  color: var(--text-muted);

}



/* Carousel Control UI */

.carousel-navigation {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-bottom: 20px;

}



.carousel-btn {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid var(--border);

  background-color: var(--bg);

  color: var(--text-main);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all var(--transition-fast);

}



.carousel-btn:hover:not(:disabled) {

  border-color: var(--primary);

  background-color: var(--bg-soft-blue);

  color: var(--primary);

}



.carousel-btn:disabled {

  opacity: 0.4;

  cursor: not-allowed;

}



.jobs-carousel-viewport {

  width: 100%;

  overflow: hidden;

  position: relative;

}



.jobs-list {

  display: flex;

  gap: 20px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  padding-bottom: 24px;

  scrollbar-width: thin;

  scrollbar-color: var(--border) transparent;

}



.jobs-list::-webkit-scrollbar {

  height: 6px;

}



.jobs-list::-webkit-scrollbar-track {

  background: transparent;

}



.jobs-list::-webkit-scrollbar-thumb {

  background-color: var(--border);

  border-radius: 3px;

}



.jobs-list::-webkit-scrollbar-thumb:hover {

  background-color: var(--text-muted);

}



/* Featured Openings Showcase Grid Layout */

.featured-openings-layout-v2 {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 60px;

  align-items: center;

  margin-top: 2rem;

  margin-bottom: 24px;

}



/* Showcase content and typewriter block styles */

.showcase-content {

  width: 100%;

}



.typing-block {

  display: flex;

  flex-direction: column;

  gap: 28px;

  align-items: flex-start;

}



.showcase-title {

  font-family: var(--font-headings);

  font-size: 3.25rem;

  font-weight: 800;

  line-height: 1.15;

  color: var(--text-main);

  margin: 0;

  letter-spacing: -0.02em;

}



.showcase-desc,

.showcase-instruction,

.showcase-next {

  font-family: var(--font-body);

  font-size: 1.25rem;

  font-weight: 350;

  color: var(--text-muted);

  line-height: 1.65;

  margin: 0;

}



.showcase-desc {

  font-size: 1.35rem;

  color: var(--text-main);

  font-weight: 450;

}



/* Typing specific classes */

.typing-line {

  opacity: 0;

  /* Hidden before typewriter typing starts */

  transition: opacity 0.25s ease;

}



.typing-char.char-hidden {

  opacity: 0;

  display: inline;

}



.typing-char.char-visible {

  opacity: 1;

  display: inline;

  transition: opacity 0.04s ease;

}



/* Premium typewriter cursor */

.typing-cursor {

  display: inline-block;

  width: 2px;

  height: 1.15em;

  background-color: var(--primary);

  margin-left: 2px;

  vertical-align: middle;

  animation: blink-cursor 1s step-end infinite;

}



@keyframes blink-cursor {



  from,

  to {

    background-color: transparent;

  }



  50% {

    background-color: var(--primary);

  }

}



/* Interactive region buttons styled as clickable words */

.globe-text-trigger {

  display: inline-block;

  background: transparent;

  border: none;

  padding: 0;

  margin: 0;

  font-family: inherit;

  font-size: inherit;

  font-weight: 700;

  color: var(--primary);

  border-bottom: 2px dashed rgba(11, 87, 208, 0.45);

  cursor: pointer;

  outline: none;

  position: relative;

  transition: all var(--transition-fast);

}



.globe-text-trigger:hover,

.globe-text-trigger:focus-visible {

  color: var(--primary-hover);

  border-bottom-style: solid;

  border-bottom-color: var(--primary);

  text-shadow: 0 0 12px rgba(11, 87, 208, 0.25);

  transform: translateY(-1.5px);

}



.globe-text-trigger:focus-visible {

  outline: 2px solid var(--primary);

  outline-offset: 2px;

  border-radius: 4px;

}



.globe-text-trigger.active {

  color: #ffffff;

  background-color: var(--primary);

  border-bottom: none;

  padding: 1px 8px;

  border-radius: 4px;

  box-shadow: 0 4px 10px rgba(11, 87, 208, 0.2);

}



/* Showcase Globe Section styles */

.showcase-globe {

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  width: 100% !important;

  max-width: none !important;

  max-height: none !important;

  overflow: visible !important;

}



.globe-card-v2 {

  width: 100% !important;

  max-width: none !important;

  padding: 32px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: rgba(10, 68, 120, 0.15) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  border-radius: var(--radius-lg);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);

  transition: transform var(--transition-normal), box-shadow var(--transition-normal);

}



.globe-card-v2:hover {

  transform: translateY(-5px);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);

}



.globe-header-v2 {

  width: 100%;

  display: flex;

  justify-content: flex-start;

  margin-bottom: 20px;

}



.globe-status-v2 {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 0.8rem;

  font-weight: 700;

  color: #ffffff;

  background-color: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.12);

  padding: 6px 14px;

  border-radius: 20px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.globe-canvas-wrapper-v2 {

  position: relative !important;

  width: min(100%, 680px) !important;

  height: clamp(360px, 48vw, 620px) !important;

  max-width: none !important;

  max-height: none !important;

  min-width: none !important;

  min-height: none !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  container-type: size;

  overflow: visible !important;

  isolation: isolate;

  border-radius: 50%;

  cursor: grab;

  transform: none !important;

}

.globe-canvas-wrapper-v2:active {

  cursor: grabbing;

}



.globe-canvas-wrapper-v2 canvas {

  width: 100% !important;

  height: 100% !important;

  display: block;

  position: relative;

  z-index: 2;

}



/* Premium halo ring around the globe */

.globe-canvas-wrapper-v2::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 90cqmin;

  height: 90cqmin;

  border-radius: 50%;

  border: 1.5px solid rgba(125, 190, 255, 0.24);

  box-shadow: inset 0 0 34px rgba(125, 190, 255, 0.16), 0 0 46px rgba(11, 87, 208, 0.14);

  pointer-events: none;

  z-index: 1;

}

.globe-canvas-wrapper-v2::before {

  content: "";

  position: absolute;

  inset: 8%;

  border-radius: 50%;

  background:
    radial-gradient(circle at 50% 50%, rgba(11, 87, 208, 0.18), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 42%);

  filter: blur(16px);

  opacity: 0.85;

  pointer-events: none;

  z-index: 0;

}

/* Responsive Collapse for Globe Layout */

@media (max-width: 1024px) {

  .featured-openings-layout-v2 {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .typing-block {

    align-items: center;

    text-align: center;

  }



  .showcase-title {

    font-size: 2.5rem;

  }



  .globe-card-v2 {

    max-width: none !important;

    padding: 24px;

  }



}



/* Loading & Empty States */

.jobs-loading {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 4rem 0;

  color: var(--text-muted);

}



.spinner {

  width: 32px;

  height: 32px;

  animation: spin 1.2s linear infinite;

  margin-bottom: 12px;

  color: #000000 !important;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



.jobs-no-results {

  text-align: center;

  padding: 4rem 20px;

  background-color: var(--bg-alt);

  border: 1px dashed var(--border);

  border-radius: var(--radius-md);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

}



.empty-icon {

  width: 48px;

  height: 48px;

  color: var(--primary);

  opacity: 0.8;

}



.empty-message {

  font-size: 1.1rem;

  color: var(--text-muted);

  max-width: 500px;

  line-height: 1.5;

}



/* Job Card Styling (Premium Floating Look) */

.job-card {

  flex: 0 0 340px;

  scroll-snap-align: start;

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 24px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 300px;

  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);

  cursor: pointer;

  position: relative;

  will-change: transform, box-shadow;

}



.job-card:hover {

  transform: translateY(-6px);

  border-color: var(--primary);

  box-shadow: 0 10px 24px rgba(11, 87, 208, 0.08);

}



.job-card-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 12px;

}



.job-card-title {

  font-size: 1.15rem;

  font-weight: 700;

  line-height: 1.3;

  word-break: break-word;

  color: var(--text-main);

  /* Limit title to 2 lines */

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  height: 2.6em;

}



.job-status-pill {

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--success);

  background-color: rgba(19, 115, 51, 0.08);

  padding: 2px 8px;

  border-radius: 4px;

  letter-spacing: 0.05em;

}



.job-card-meta {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 20px;

}



.meta-row {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.85rem;

  color: var(--text-muted);

}



.meta-row i {

  width: 14px;

  height: 14px;

  color: var(--text-muted);

}



.job-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid var(--border);

  padding-top: 16px;

}



.job-card-salary {

  font-weight: 700;

  color: var(--text-main);

  font-size: 0.95rem;

}



@media (max-width: 768px) {

  .filter-group-main {

    grid-template-columns: 1fr;

    gap: 10px;

  }



  .carousel-navigation {

    display: none;

  }



  .jobs-list {

    flex-direction: column;

    overflow-x: visible;

    scroll-snap-type: none;

  }



  .job-card {

    flex: none;

    width: 100%;

    height: auto;

    min-height: 240px;

  }

}



/* ==========================================================================

   9. Section 4: Career & Paths

   ========================================================================== */



.section-career {

  background-color: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.career-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

}



.career-body-text {

  font-size: 1.15rem;

  color: var(--text-muted);

  line-height: 1.6;

}



.career-paths-list {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.career-path-card {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 24px;

  display: flex;

  gap: 20px;

  align-items: center;

  transition: transform var(--transition-fast), border-color var(--transition-fast);

}



.career-path-card:hover {

  transform: translateX(6px);

  border-color: var(--primary);

}



.path-icon-box {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  background-color: var(--bg-soft-blue);

  color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.path-icon {

  width: 24px;

  height: 24px;

}



.path-title {

  font-size: 1.1rem;

  font-weight: 700;

  margin-bottom: 4px;

}



.path-desc {

  font-size: 0.95rem;

  color: var(--text-muted);

}



@media (max-width: 768px) {

  .career-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }

}



/* ==========================================================================

   10. Section 5: Sectors

   ========================================================================== */



.sectors-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}



.sector-card {

  background-color: #05070b !important;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 0 !important;

  position: relative;

  overflow: hidden;

  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);

  cursor: pointer;

  display: flex;

  flex-direction: column;

  height: 100%;

}



.sector-card-bg-image {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  filter: blur(15px);

  transform: scale(1.15);

  opacity: 0.45;

  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 1;

  pointer-events: none;

}



.sector-card-bg-image::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(5, 7, 11, 0.95) 30%, rgba(5, 7, 11, 0.5) 100%);

  z-index: 2;

}



.sector-card-content {

  position: relative;

  z-index: 3;

  padding: 36px 24px;

  display: flex;

  flex-direction: column;

  height: 100%;

  width: 100%;

  opacity: 1 !important;

  pointer-events: auto;

}



.sector-card:hover .sector-card-bg-image {

  filter: blur(0px);

  transform: scale(1.02);

  opacity: 0.85;

}



.sector-card:hover {

  transform: translateY(-6px);

  border-color: var(--primary);

  box-shadow: 0 12px 30px rgba(11, 87, 208, 0.06);

}



.sector-icon {

  width: 48px;

  height: 48px;

  border-radius: var(--radius-sm);

  background-color: rgba(255, 255, 255, 0.1) !important;

  color: #ffffff !important;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 24px;

  transition: all var(--transition-fast);

}



.sector-card:hover .sector-icon {

  background-color: var(--primary) !important;

  color: #ffffff !important;

}



.sector-title {

  font-size: 1.35rem;

  font-weight: 700;

  margin-bottom: 12px;

  color: #ffffff !important;

}



.sector-desc {

  font-size: 0.95rem;

  color: #e8eaed !important;

  line-height: 1.5;

  margin-bottom: 24px;

  flex-grow: 1;

}



.sector-action-link {

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--primary);

  display: flex;

  align-items: center;

  gap: 4px;

  transition: gap var(--transition-fast);

}



.sector-card:hover .sector-action-link {

  gap: 8px;

}



.sector-card:hover .sector-action-link i {

  transform: translate(1px, -1px);

}



@media (max-width: 1024px) {

  .sectors-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 768px) {

  .sectors-grid {

    grid-template-columns: 1fr;

  }

}



/* ==========================================================================

   10b. Sectors Bento Grid Layout (Home Page – Industries Section)

   ========================================================================== */



.sectors-bento-grid {

  display: grid;

  grid-template-columns: 1.1fr 1fr 0.9fr;

  grid-template-rows: minmax(300px, auto) minmax(220px, auto);

  gap: 16px;

  margin-top: 0.5rem;

}



.sector-bento-card {

  background-color: #05070b;

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: var(--radius-md);

  overflow: hidden;

  position: relative;

  cursor: pointer;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--transition-fast);

  will-change: transform;

  display: flex;

  flex-direction: column;

  min-height: 220px;

}



/* Left tall card spans both rows */

.sector-bento-card.tall {

  grid-row: 1 / 3;

  min-height: 536px;

}



/* Civil card spans 2 columns at bottom-right */

.sector-bento-card.wide {

  grid-column: 2 / 4;

}



.sector-bento-card:hover {

  transform: translateY(-5px) scale(1.01);

  border-color: rgba(11, 87, 208, 0.5);

  box-shadow: 0 20px 50px rgba(11, 87, 208, 0.16);

}



.sector-bento-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  filter: blur(12px);

  transform: scale(1.12);

  opacity: 0.48;

  transition: filter 0.55s ease, transform 0.55s ease, opacity 0.55s ease;

  pointer-events: none;

  z-index: 1;

}



.sector-bento-bg::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(5, 7, 11, 0.97) 18%, rgba(5, 7, 11, 0.55) 60%, rgba(5, 7, 11, 0.25) 100%);

  z-index: 2;

}



.sector-bento-card:hover .sector-bento-bg {

  filter: blur(1px);

  transform: scale(1.04);

  opacity: 0.84;

}



.sector-bento-content {

  position: relative;

  z-index: 3;

  padding: 24px 22px;

  display: flex;

  flex-direction: column;

  height: 100%;

  flex: 1;

}



/* semiconductor card content gets extra bottom padding to avoid overlapping the absolute-positioned stats */

.sector-bento-card[data-sector="Semi"] .sector-bento-content {

  padding-bottom: 90px;

}



.sector-bento-icon {

  width: 42px;

  height: 42px;

  border-radius: 10px;

  background-color: rgba(255, 255, 255, 0.09);

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 16px;

  flex-shrink: 0;

  transition: background-color var(--transition-fast);

}



.sector-bento-card:hover .sector-bento-icon {

  background-color: var(--primary);

}



.sector-bento-name {

  font-size: 1.35rem;

  font-weight: 800;

  color: #ffffff;

  margin-bottom: 8px;

  letter-spacing: -0.01em;

}



.sector-bento-desc {

  font-size: 0.88rem;

  color: rgba(233, 240, 248, 0.8);

  line-height: 1.55;

  flex-grow: 1;

  margin-bottom: 16px;

}



.sector-bento-link {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 0.8rem;

  font-weight: 700;

  color: #8ab4f8;

  text-decoration: none;

  transition: gap var(--transition-fast), color var(--transition-fast);

}



.sector-bento-link i {

  width: 14px;

  height: 14px;

  transition: transform var(--transition-fast);

}



.sector-bento-card:hover .sector-bento-link {

  gap: 8px;

  color: #ffffff;

}



.sector-bento-card:hover .sector-bento-link i {

  transform: translate(2px, -2px);

}



/* Large stat display for the Semi card */

.sector-bento-stat-overlay {

  position: absolute;

  bottom: 16px;

  left: 22px;

  right: 22px;

  z-index: 4;

  display: flex;

  flex-direction: column;

  pointer-events: none;

}



.sector-bento-stat-number {

  font-family: var(--font-headings);

  font-size: 3rem;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.9);

  letter-spacing: -0.04em;

  line-height: 1;

  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);

}



.sector-bento-stat-label {

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  color: rgba(255, 255, 255, 0.5);

  margin-top: 4px;

}



/* Sector chip grid for Civil card */

.sector-chip-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: auto;

  padding-top: 12px;

}



.sector-chip {

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 6px;

  padding: 4px 10px;

  font-size: 0.72rem;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.6);

  transition: background-color var(--transition-fast), color var(--transition-fast);

}



.sector-bento-card:hover .sector-chip {

  background: rgba(11, 87, 208, 0.15);

  color: rgba(255, 255, 255, 0.9);

}



/* Engineering stat/badge inside tall card (bottom area) */

.sector-bento-badge-row {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: auto;

  padding-top: 14px;

}



.sector-bento-badge {

  background: rgba(11, 87, 208, 0.2);

  border: 1px solid rgba(11, 87, 208, 0.35);

  color: #8ab4f8;

  font-size: 0.72rem;

  font-weight: 700;

  padding: 3px 10px;

  border-radius: 20px;

  letter-spacing: 0.04em;

}



/* Responsive for bento grid */

@media (max-width: 1023px) {

  .sectors-bento-grid {

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto;

  }



  .sector-bento-card.tall {

    grid-row: auto;

    grid-column: 1 / 3;

    min-height: 260px;

  }



  .sector-bento-card.wide {

    grid-column: 1 / 3;

  }

}



@media (max-width: 580px) {

  .sectors-bento-grid {

    grid-template-columns: 1fr;

  }



  .sector-bento-card.tall,

  .sector-bento-card.wide {

    grid-column: auto;

    grid-row: auto;

    min-height: 220px;

  }

}



/* ==========================================================================

   11. Section 6: Upload Resume Form

   ========================================================================== */



.section-upload {

  background-color: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.upload-grid {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 60px;

}



.upload-advice {

  font-size: 1rem;

  color: var(--text-muted);

  margin-top: 2rem;

  border-left: 2px solid var(--border);

  padding-left: 20px;

}



.form-container-card {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 40px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);

  position: relative;

}



.form-card-title {

  font-size: 1.5rem;

  font-weight: 800;

  margin-bottom: 24px;

  border-bottom: 1px solid var(--border);

  padding-bottom: 12px;

}



.form-grid-2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



@media (max-width: 600px) {

  .form-grid-2 {

    grid-template-columns: 1fr;

    gap: 0;

  }

}



.form-note {

  font-size: 0.85rem;

  color: var(--text-muted);

  margin-bottom: 1.5rem;

  line-height: 1.4;

}



/* File Upload Field */

.file-drop-area {

  border: 2px dashed var(--border);

  border-radius: var(--radius-sm);

  padding: 24px;

  text-align: center;

  background-color: var(--bg-alt);

  cursor: pointer;

  transition: all var(--transition-fast);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

}



.file-drop-area:hover,

.file-drop-area.dragover {

  border-color: var(--primary);

  background-color: var(--bg-soft-blue);

}



.file-upload-icon {

  width: 32px;

  height: 32px;

  color: var(--text-muted);

  margin-bottom: 4px;

}



.file-drop-area:hover .file-upload-icon {

  color: var(--primary);

}



.file-label-text {

  font-size: 0.9rem;

  color: var(--text-muted);

}



.file-helper-text {

  font-size: 0.8rem;

  color: var(--text-muted);

  margin-top: 0.35rem;

}



.file-selected-name {

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--success);

  margin-top: 4px;

  word-break: break-all;

}



/* Inline Success Message Card */

.form-success-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 40px 20px;

  animation: fadeIn var(--transition-normal) forwards;

}



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: scale(0.95);

  }



  to {

    opacity: 1;

    transform: scale(1);

  }

}



.success-icon-box {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background-color: rgba(19, 115, 51, 0.08);

  color: var(--success);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 24px;

}



.success-icon {

  width: 32px;

  height: 32px;

}



.success-title {

  font-size: 1.45rem;

  font-weight: 800;

  margin-bottom: 12px;

}



.success-desc {

  font-size: 1rem;

  color: var(--text-muted);

  margin-bottom: 24px;

  max-width: 420px;

  line-height: 1.5;

}



@media (max-width: 1023px) {

  .upload-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .form-container-card {

    padding: 24px;

  }

}



/* ==========================================================================

   12. Section 7: Career Guidance Tabs

   ========================================================================== */



.section-guidance {

  background-color: rgba(245, 247, 250, 0.9) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.guidance-grid {

  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  gap: 48px;

  align-items: start;

}



.guidance-selector {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.guidance-tab {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  padding: 18px 24px;

  text-align: left;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 16px;

  font-weight: 600;

  color: var(--text-main);

  transition: all var(--transition-fast);

}



.guidance-tab i {

  width: 20px;

  height: 20px;

  color: var(--text-muted);

  transition: color var(--transition-fast);

}



.guidance-tab:hover {

  border-color: var(--primary);

  background-color: var(--bg-soft-blue);

}



.guidance-tab:hover i {

  color: var(--primary);

}



.guidance-tab.active {

  background-color: var(--primary);

  color: #ffffff;

  border-color: var(--primary);

  box-shadow: 0 4px 12px rgba(11, 87, 208, 0.15);

}



.guidance-tab.active i {

  color: #ffffff;

}



/* Content Pane */

.guidance-content-panel {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 40px;

  min-height: 300px;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);

}



.guidance-pane {

  display: none;

}



.guidance-pane.active {

  display: block;

  animation: tabFadeIn var(--transition-normal) forwards;

}



@keyframes tabFadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.pane-title {

  font-size: 1.5rem;

  font-weight: 800;

  margin-bottom: 16px;

}



.pane-text {

  font-size: 1.1rem;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 24px;

}



.pane-tips {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.tip-item {

  display: flex;

  gap: 12px;

  align-items: center;

  font-size: 0.95rem;

  color: var(--text-main);

  font-weight: 500;

}



.tip-item i {

  width: 18px;

  height: 18px;

  color: var(--primary);

  flex-shrink: 0;

}



@media (max-width: 768px) {

  .guidance-grid {

    grid-template-columns: 1fr;

    gap: 24px;

  }



  .guidance-selector {

    flex-direction: row;

    overflow-x: auto;

    padding-bottom: 12px;

    gap: 8px;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    /* Hide scrollbar */

  }



  .guidance-selector::-webkit-scrollbar {

    display: none;

  }



  .guidance-tab {

    flex: 0 0 auto;

    scroll-snap-align: start;

    padding: 10px 18px;

    font-size: 0.85rem;

    white-space: nowrap;

  }



  .guidance-content-panel {

    padding: 24px;

  }

}



/* ==========================================================================

   13. Section 8: Services

   ========================================================================== */



.section-services {

  background-color: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}



.service-card {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 40px 24px;

  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);

}



.service-card:hover {

  transform: translateY(-4px);

  border-color: var(--primary);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);

}



.service-icon-box {

  width: 56px;

  height: 56px;

  border-radius: 12px;

  background-color: var(--bg-soft-blue);

  color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 24px;

}



.service-icon-box i {

  width: 26px;

  height: 26px;

}



.service-title {

  font-size: 1.25rem;

  font-weight: 800;

  margin-bottom: 12px;

}



.service-desc {

  font-size: 0.95rem;

  color: var(--text-muted);

  line-height: 1.5;

}



@media (max-width: 1024px) {

  .services-grid {

    grid-template-columns: 1fr;

  }

}



/* ==========================================================================

   14. Section 9: Contact Us

   ========================================================================== */



.section-contact {

  background-color: rgba(245, 247, 250, 0.9) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.contact-grid {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 60px;

}



.contact-form-column {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 40px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);

}



.info-card {

  position: relative !important;

  overflow: hidden !important;

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 40px;

  height: 100%;

  display: flex;

  flex-direction: column;

}



.info-card-canvas {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 10 !important;

  pointer-events: auto !important;

  cursor: crosshair !important;

  transition: opacity 0.5s ease-in-out !important;

  border-radius: var(--radius-lg) !important;

}



.info-card-title {

  font-size: 1.5rem;

  font-weight: 800;

  margin-bottom: 12px;

}



.info-card-desc {

  font-size: 0.95rem;

  color: var(--text-muted);

  margin-bottom: 32px;

}



.info-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 24px;

  margin-bottom: auto;

}



.info-list li {

  display: flex;

  gap: 16px;

  align-items: flex-start;

}



.info-icon {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background-color: var(--bg-soft-blue);

  color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.info-icon i {

  width: 18px;

  height: 18px;

}



.info-text {

  display: flex;

  flex-direction: column;

}



.info-label {

  font-size: 0.8rem;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--text-muted);

  letter-spacing: 0.05em;

  margin-bottom: 4px;

}



.info-link {

  font-size: 1rem;

  font-weight: 600;

  color: var(--text-main);

  text-decoration: none;

  transition: color var(--transition-fast);

}



.info-link:hover {

  color: var(--primary);

}



.info-paragraph {

  font-size: 0.95rem;

  color: var(--text-main);

  font-weight: 500;

}



.social-links {

  display: flex;

  gap: 12px;

  margin-top: 32px;

}



.social-btn {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background-color: var(--bg-alt);

  color: var(--text-main);

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  transition: all var(--transition-fast);

}



.social-btn:hover {

  background-color: var(--primary);

  color: #ffffff;

  transform: translateY(-2px);

}



@media (max-width: 1023px) {

  .contact-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }



  .contact-form-column,

  .info-card {

    padding: 24px;

  }

}



/* ==========================================================================

   15. Footer

   ========================================================================== */



.main-footer {

  background-color: rgba(248, 249, 250, 0.85);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  color: var(--text-main);

  padding-top: 4rem;

  border-top: 1px solid rgba(11, 87, 208, 0.06);

  position: relative;

  overflow: hidden;

}



.footer-container {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

  gap: 40px;

  padding-bottom: 3rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.footer-column {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.footer-brand {

  max-width: 380px;

}



.footer-logo {

  display: flex;

  align-items: center;

  text-decoration: none;

}



.footer-logo-img {

  height: 56px;

  width: 56px;

  object-fit: contain;

  display: block;

  transition: transform var(--transition-normal);

}



.footer-logo:hover .footer-logo-img {

  transform: scale(1.02);

}



.footer-tagline {

  font-size: 0.9rem;

  color: #ffffff !important;

  opacity: 0.9;

  line-height: 1.6;

}



.footer-heading {

  font-family: var(--font-headings);

  font-size: 1.1rem;

  font-weight: 700;

  color: #ffffff !important;

  margin-bottom: 8px;

}



.footer-nav {

  width: 100%;

}



.footer-nav-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 0;

  margin: 0;

}



.footer-nav-list a {

  color: #ffffff !important;

  opacity: 0.9;

  text-decoration: none;

  font-size: 0.9rem;

  transition: color var(--transition-fast), opacity var(--transition-fast);

}



.footer-nav-list a:hover {

  color: #8ab4f8 !important;

  opacity: 1;

}



.office-address {

  font-style: normal;

  font-size: 0.9rem;

  line-height: 1.6;

  color: #ffffff !important;

  opacity: 0.9;

}



.contact-methods {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top: 8px;

}



.contact-item {

  font-size: 0.9rem;

  color: #ffffff !important;

  opacity: 0.9;

}



.contact-item a {

  color: #ffffff !important;

  text-decoration: underline;

  font-weight: 500;

  transition: color var(--transition-fast);

}



.contact-item a:hover {

  color: #8ab4f8 !important;

}



.footer-social {

  margin-top: 8px;

}



.footer-social-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ffffff !important;

  text-decoration: none;

  font-size: 0.95rem;

  font-weight: 600;

  transition: color var(--transition-fast), transform var(--transition-fast);

  margin-top: 10px;

}



.footer-social-link:hover {

  color: #8ab4f8 !important;

  transform: translateY(-2px);

}



.footer-social-link i,

.footer-social-link svg {

  width: 22px;

  height: 22px;

  fill: currentColor;

  display: inline-block;

  vertical-align: middle;

  transition: color var(--transition-fast), fill var(--transition-fast);

}



.footer-social-link:hover i,

.footer-social-link:hover svg {

  color: #8ab4f8 !important;

  fill: #8ab4f8 !important;

}





/* Footer Background Video styling */

.footer-video-background {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  overflow: hidden;

  opacity: 0.15;

  width: 100%;

  height: 100%;

}



.footer-video-background video {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: 100%;

  min-width: 100%;

  min-height: 100%;

  transform: translate(-50%, -50%);

  object-fit: cover;

  object-position: center center;

  display: block;

}





/* Ensure other footer contents sit on top of the background video */

.footer-container,

.footer-bottom {

  position: relative;

  z-index: 2;

}





/* ==========================================================================

   16. Premium Homepage CTA Section

   ========================================================================== */

.org-cta-container {

  position: relative !important;

  width: 100% !important;

  overflow: hidden !important;

  background-color: #05070b !important;

  padding: 11rem 0 !important;

  /* Compact vertical padding for immediate content visibility */

  border-top: 0px solid rgba(255, 255, 255, 0.02) !important;

  box-sizing: border-box;

}



.org-cta-bg {

  position: absolute !important;

  top: 0 !important;

  left: -5% !important;

  /* Optimized offset for parallax translation (reduces zoom to only 10%) */

  width: 110% !important;

  height: 100% !important;

  background-size: cover !important;

  background-position: center !important;

  opacity: 0.55 !important;

  /* Increased from 0.18 for clear video visibility */

  pointer-events: none !important;

  z-index: 1 !important;

  will-change: transform;

}



.org-cta-video,
.org-cta-image {

  position: absolute !important;

  top: 50% !important;

  left: 50% !important;

  width: 100% !important;

  height: 100% !important;

  transform: translate(-50%, -50%) !important;

  object-fit: cover !important;

  object-position: center center !important;

  display: block !important;

}



@media (max-aspect-ratio: 2/1) {

  .org-cta-video {

    object-fit: contain !important;

  }

}



.org-cta-overlay {

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(to right, rgba(5, 7, 11, 0.7) 0%, rgba(5, 7, 11, 0.4) 50%, rgba(5, 7, 11, 0.7) 100%) !important;

  /* Increased transparency */

  pointer-events: none !important;

  z-index: 2 !important;

}



.org-cta-light-1 {

  position: absolute !important;

  width: 450px !important;

  height: 450px !important;

  border-radius: 50% !important;

  background: radial-gradient(circle, rgba(11, 87, 208, 0.15) 0%, transparent 70%) !important;

  filter: blur(80px) !important;

  top: -10% !important;

  left: 10% !important;

  pointer-events: none !important;

  z-index: 2 !important;

}



.org-cta-light-2 {

  position: absolute !important;

  width: 400px !important;

  height: 400px !important;

  border-radius: 50% !important;

  background: radial-gradient(circle, rgba(0, 188, 212, 0.12) 0%, transparent 70%) !important;

  filter: blur(80px) !important;

  bottom: -10% !important;

  right: 15% !important;

  pointer-events: none !important;

  z-index: 2 !important;

}



.org-cta-wrapper {

  max-width: var(--container-max-width) !important;

  margin: 0 auto !important;

  position: relative !important;

  z-index: 3 !important;

  width: 100% !important;

  padding: 0 24px !important;

  box-sizing: border-box !important;

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 4rem !important;

}



.org-cta-left {

  flex: 1 !important;

  text-align: left !important;

  max-width: 620px !important;

}



.org-cta-right {

  flex-shrink: 0 !important;

  width: 400px !important;

}



.org-cta-card {

  background: rgba(255, 255, 255, 0.015) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-radius: 20px !important;

  padding: 1.5rem 1.75rem !important;
  /* reduced from 2.25rem 2rem */

  text-align: center !important;

  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6) !important;

  box-sizing: border-box !important;

  width: 100% !important;

}



.org-cta-title {

  font-family: var(--font-headings) !important;

  font-size: 2.5rem !important;
  /* reduced from 3rem */

  font-weight: 800 !important;

  color: #ffffff !important;

  margin: 0 0 1rem 0 !important;

  line-height: 1.2 !important;

  letter-spacing: -0.02em !important;

}



.org-cta-title-accent {

  background: linear-gradient(to right, #60a5fa, #3b82f6, #22d3ee) !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  color: transparent !important;

}



.org-cta-desc {

  font-family: var(--font-body) !important;

  font-size: 1.05rem !important;
  /* reduced from 1.15rem */

  color: #cbd5e1 !important;

  margin: 0 !important;

  line-height: 1.6 !important;

}



.org-cta-buttons {

  display: flex !important;

  flex-direction: column !important;

  gap: 1rem !important;

  margin-bottom: 1.25rem !important;

  width: 100% !important;

}



.org-cta-btn-primary {

  font-family: var(--font-body) !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 0.5rem !important;

  padding: 1rem 2rem !important;

  background-color: #0b57d0 !important;

  color: #ffffff !important;

  font-weight: 600 !important;

  border-radius: 50px !important;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  box-shadow: 0 8px 16px -3px rgba(11, 87, 208, 0.35) !important;

  text-decoration: none !important;

  border: none !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.org-cta-btn-primary:hover {

  background-color: #2563eb !important;

  transform: translateY(-2px) scale(1.02) !important;

  box-shadow: 0 12px 20px -3px rgba(37, 99, 235, 0.5) !important;

  color: #ffffff !important;

}



.org-cta-btn-secondary {

  font-family: var(--font-body) !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 0.5rem !important;

  padding: 1rem 2rem !important;

  background-color: rgba(255, 255, 255, 0.03) !important;

  color: #ffffff !important;

  font-weight: 600 !important;

  border-radius: 50px !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  text-decoration: none !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.org-cta-btn-secondary:hover {

  background-color: rgba(255, 255, 255, 0.08) !important;

  border-color: rgba(255, 255, 255, 0.2) !important;

  transform: translateY(-2px) scale(1.02) !important;

  color: #ffffff !important;

}



.org-cta-hint {

  font-family: var(--font-body) !important;

  font-size: 0.85rem !important;

  color: rgba(148, 163, 184, 0.7) !important;

  font-weight: 500 !important;

  display: block !important;

}



@media (max-width: 992px) {

  .org-cta-wrapper {

    flex-direction: column !important;

    gap: 2.5rem !important;

    text-align: center !important;

  }



  .org-cta-left {

    text-align: center !important;

    max-width: 100% !important;

  }



  .org-cta-right {

    width: 100% !important;

    max-width: 450px !important;

  }

}



@media (max-width: 768px) {

  .org-cta-container {

    padding: 3rem 0 !important;

  }



  .org-cta-bg {

    left: 0 !important;

    width: 100% !important;

  }



  .org-cta-title {

    font-size: 2.25rem !important;

  }



  .org-cta-desc {

    font-size: 1rem !important;

  }



  .org-cta-card {

    padding: 2rem 1.5rem !important;

  }

}





.footer-bottom {

  padding: 1.5rem 0;

  font-size: 0.8rem;

  color: #ffffff !important;

  opacity: 0.7;

  background-color: #000000;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.footer-bottom-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

}



.footer-legal {

  display: flex;

}



.legal-links-list {

  list-style: none;

  display: flex;

  gap: 20px;

  padding: 0;

  margin: 0;

}



.legal-links-list a {

  color: #ffffff !important;

  opacity: 0.7;

  text-decoration: none;

  font-size: 0.8rem;

  transition: color var(--transition-fast), opacity var(--transition-fast);

}



.legal-links-list a:hover {

  color: #8ab4f8 !important;

  opacity: 1;

}



@media (max-width: 992px) {

  .footer-container {

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

  }

}



@media (max-width: 576px) {

  .footer-container {

    grid-template-columns: 1fr;

    gap: 30px;

  }



  .footer-bottom-container {

    flex-direction: column;

    text-align: center;

    gap: 16px;

  }



  .legal-links-list {

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px 16px;

  }

}



/* ==========================================================================

   16. Job Details Modal

   ========================================================================== */



.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(5, 7, 11, 0.4);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  z-index: 2000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  transition: opacity var(--transition-fast);

}



.modal-overlay.hidden {

  opacity: 0;

  pointer-events: none;

}



.modal-container {

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  width: 100%;

  max-width: 600px;

  max-height: 90vh;

  overflow-y: auto;

  padding: 40px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

  position: relative;

  transition: transform var(--transition-normal);

  transform: translateY(20px);

}



.modal-overlay:not(.hidden) .modal-container {

  transform: translateY(0);

}



.modal-close-btn {

  position: absolute;

  top: 24px;

  right: 24px;

  background: transparent;

  border: none;

  color: var(--text-muted);

  cursor: pointer;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition-fast);

}



.modal-close-btn:hover {

  background-color: var(--bg-alt);

  color: var(--text-main);

}



.modal-badge-row {

  display: flex;

  gap: 8px;

  margin-bottom: 12px;

}



.modal-status-badge {

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--success);

  background-color: rgba(19, 115, 51, 0.08);

  padding: 2px 8px;

  border-radius: 4px;

}



.modal-sector-badge {

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--primary);

  background-color: var(--bg-soft-blue);

  padding: 2px 8px;

  border-radius: 4px;

}



.modal-title {

  font-size: 1.75rem;

  font-weight: 800;

  margin-bottom: 20px;

}



.modal-meta-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

  padding-bottom: 24px;

  border-bottom: 1px solid var(--border);

  margin-bottom: 24px;

}



.modal-meta-grid .meta-item {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.95rem;

  color: var(--text-muted);

}



.modal-meta-grid .meta-item i {

  width: 18px;

  height: 18px;

  color: var(--primary);

}



.modal-meta-grid .meta-item span {

  font-weight: 500;

  color: var(--text-main);

}



.modal-body h3 {

  font-size: 1.15rem;

  font-weight: 800;

  margin-top: 20px;

  margin-bottom: 10px;

}



.modal-body p {

  font-size: 0.95rem;

  color: var(--text-muted);

  line-height: 1.5;

}



.modal-req-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.modal-req-list li {

  position: relative;

  padding-left: 20px;

  font-size: 0.95rem;

  color: var(--text-muted);

}



.modal-req-list li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 9px;

  width: 6px;

  height: 6px;

  background-color: var(--primary);

  border-radius: 50%;

}



.modal-footer {

  margin-top: 32px;

  padding-top: 24px;

  border-top: 1px solid var(--border);

  display: flex;

  justify-content: flex-end;

  gap: 12px;

}



@media (max-width: 600px) {

  .modal-container {

    padding: 24px;

  }



  .modal-meta-grid {

    grid-template-columns: 1fr;

  }



  .modal-footer {

    flex-direction: column;

  }



  .modal-footer .btn {

    width: 100%;

  }

}



/* ==========================================================================

   Visual Effect System Additions (Antigravity-Inspired)

   ========================================================================== */



/* 1. Navigation Underline Slide-In */

.nav-link {

  position: relative;

}



.nav-link::after {

  content: '';

  position: absolute;

  bottom: 0px;

  left: 16px;

  width: calc(100% - 32px);

  height: 2px;

  background-color: var(--primary);

  transform: scaleX(0);

  transform-origin: left center;

  transition: transform var(--transition-normal);

}



.nav-link:hover::after,

.nav-link.active::after {

  transform: scaleX(1);

}



/* 2. Button Hover Lift, Scale Active, Pulse Shadow & Ripple */

.btn {

  position: relative;

  overflow: hidden;

}



.btn:hover {

  transform: translateY(-3px);

}



.btn-primary:hover {

  animation: btnPrimaryShadowPulse 1.8s infinite alternate ease-in-out;

}



.btn-secondary:hover {

  animation: btnSecondaryShadowPulse 1.8s infinite alternate ease-in-out;

}



.btn:active {

  transform: translateY(0) scale(0.97) !important;

}



@keyframes btnPrimaryShadowPulse {

  0% {

    box-shadow: 0 4px 12px rgba(11, 87, 208, 0.25);

  }



  50% {

    box-shadow: 0 4px 20px rgba(11, 87, 208, 0.55);

  }



  100% {

    box-shadow: 0 4px 12px rgba(11, 87, 208, 0.25);

  }

}



@keyframes btnSecondaryShadowPulse {

  0% {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  }



  50% {

    box-shadow: 0 4px 20px rgba(11, 87, 208, 0.18);

  }



  100% {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  }

}



.btn-ripple-span {

  position: absolute;

  border-radius: 50%;

  transform: scale(0);

  animation: rippleAnimation 0.6s cubic-bezier(0.1, 0.8, 0.3, 1);

  background-color: rgba(255, 255, 255, 0.5);

  pointer-events: none;

}



.btn-secondary .btn-ripple-span {

  background-color: rgba(11, 87, 208, 0.25);

}



@keyframes rippleAnimation {

  to {

    transform: scale(5);

    opacity: 0;

  }

}



/* 3. Job Cards Hover Lift & Slide-in Apply Arrow */

.job-card {

  border-color: rgba(11, 87, 208, 0) !important;

  transition: border-color 0.4s var(--transition-fast), transform var(--transition-normal), box-shadow var(--transition-normal) !important;

}



.job-card:hover {

  border-color: rgba(11, 87, 208, 0.4) !important;

  transform: translateY(-8px) !important;

  box-shadow: 0 15px 35px rgba(11, 87, 208, 0.15) !important;

}



.job-card .view-details-btn {

  transition: transform var(--transition-normal), opacity var(--transition-normal);

}



.job-card:hover .view-details-btn {

  opacity: 0;

  transform: translateX(10px);

}



.job-card::before {

  content: 'Apply \2192';

  position: absolute;

  bottom: 26px;

  right: 24px;

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--primary);

  opacity: 0;

  transform: translateX(20px);

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;

  pointer-events: none;

}



.job-card:hover::before {

  opacity: 1;

  transform: translateX(0);

}



/* 4. Sector Cards 3D Perspective & Tilt Support */

.sectors-grid {

  perspective: 800px;

}



.sectors-bento-grid {

  perspective: 1000px;

}



.sector-card {

  transform-style: preserve-3d;

  transition: border-color var(--transition-fast), box-shadow var(--transition-normal), transform var(--transition-normal);

}



.sector-bento-card {

  transform-style: preserve-3d;

}



.sector-card:hover {

  border-color: var(--primary) !important;

  box-shadow: 0 15px 35px rgba(11, 87, 208, 0.12) !important;

}



.sector-card:hover .sector-icon,

.sector-card:hover .sector-title {

  transform: translateZ(15px);

  /* 3D depth pop */

}



.sector-bento-card:hover .sector-bento-name,

.sector-bento-card:hover .sector-bento-icon {

  transform: translateZ(12px);

}



/* 5. Floating Labels & Form Fields Focus border */

.floating-label-group {

  position: relative;

  margin-top: 1.25rem !important;

  margin-bottom: 1.25rem !important;

}



.floating-label-group input,

.floating-label-group select,

.floating-label-group textarea {

  width: 100%;

  padding: 14px 16px;

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  background-color: var(--bg);

  outline: none;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

  color: var(--text-main);

}



.floating-label-group label {

  position: absolute;

  left: 16px;

  top: 14px;

  color: var(--text-muted);

  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), color 0.25s ease;

  transform-origin: left top;

  pointer-events: none;

  font-weight: 500;

}



/* Floating labels float states */

.floating-label-group input:focus~label,

.floating-label-group input:not(:placeholder-shown)~label,

.floating-label-group select:focus~label,

.floating-label-group select:valid~label,

.floating-label-group select:not([value=""])~label,

.floating-label-group textarea:focus~label,

.floating-label-group textarea:not(:placeholder-shown)~label {

  transform: translateY(-26px) scale(0.8);

  color: var(--primary);

  font-weight: 700;

}



.floating-label-group input:focus,

.floating-label-group select:focus,

.floating-label-group textarea:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 4px rgba(11, 87, 208, 0.12);

}



/* Form Submitting Button Sending State */

.btn.sending {

  pointer-events: none;

  background-color: var(--primary-hover) !important;

  animation: btnSendingPulse 1.2s infinite alternate ease-in-out !important;

  opacity: 0.8;

}



@keyframes btnSendingPulse {

  0% {

    transform: scale(0.98);

    opacity: 0.7;

  }



  100% {

    transform: scale(1.02);

    opacity: 1;

  }

}



/* 6. Hamburger Menu Bar Transitions */

.mobile-nav-toggle .hamburger-bar {

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;

}



/* 7. Resume upload drag-and-drop select actions */

.file-drop-area.has-file {

  border-color: var(--success);

  background-color: rgba(19, 115, 51, 0.02);

}



.file-drop-area.pulse-blue {

  animation: zonePulseBlue 0.6s ease-out;

}



@keyframes zonePulseBlue {

  0% {

    box-shadow: 0 0 0 0px rgba(11, 87, 208, 0.4);

    border-color: var(--primary);

  }



  100% {

    box-shadow: 0 0 0 15px rgba(11, 87, 208, 0);

    border-color: var(--border);

  }

}



/* 8. Scroll-To-Top Button */

.scroll-to-top {

  position: fixed;

  bottom: 30px;

  right: 30px;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background-color: var(--primary);

  color: #ffffff;

  border: none;

  box-shadow: 0 4px 15px rgba(11, 87, 208, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  transform: scale(0.8) translateY(20px);

  pointer-events: none;

  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-fast);

  z-index: 999;

}



.scroll-to-top.visible {

  opacity: 1;

  transform: scale(1) translateY(0);

  pointer-events: auto;

}



.scroll-to-top:hover {

  background-color: var(--primary-hover);

  transform: scale(1.05) rotate(360deg);

}



.scroll-to-top i {

  width: 20px;

  height: 20px;

}



/* 9. Footer CTA Shifting Gradient Background */

.main-footer {

  background: linear-gradient(135deg, #05070b 0%, #060e22 50%, #05070b 100%) !important;

  background-size: 200% 200% !important;

  animation: gradientShift 15s infinite alternate ease-in-out;

}



@keyframes gradientShift {

  0% {

    background-position: 0% 50%;

  }



  50% {

    background-position: 100% 50%;

  }



  100% {

    background-position: 0% 50%;

  }

}



/* 10. Guidance Cards Perspective Flip - BUG FIX: default to visible, JS will hide if supported */

.guidance-tab {

  transform: rotateX(0deg);

  opacity: 1;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, border-color var(--transition-fast), background-color var(--transition-fast);

}



/* JS enhancement: hide and animate only when JS-driven */

.js-guidance-animate .guidance-tab {

  transform: rotateX(-12deg);

  opacity: 0;

}



.guidance-tab.flipped-flat {

  transform: rotateX(0deg) !important;

  opacity: 1 !important;

}



/* 11. Typing Animation Cursor */

.widget-title::after {

  content: '|';

  animation: widgetTitleBlink 0.8s infinite;

  margin-left: 4px;

  color: #000000 !important;

  font-weight: normal;

}



.widget-title.typing-done::after {

  content: '';

  animation: none;

}



@keyframes widgetTitleBlink {

  50% {

    opacity: 0;

  }

}



/* Section overrides removed to restore high-contrast readable dark typography */





.job-card .job-card-title,

.job-card .job-card-salary,

.service-card .service-title,

.service-card h3,

.career-path-card .path-title,

.career-path-card h3,

.stat-card .stat-number,

.guidance-tab h3,

.form-container-card label,

.contact-form-column label,

.callback-form label {

  color: #05070b !important;

}



.job-card .meta-row,

.job-card .meta-row i,

.service-card p,

.career-path-card .path-desc,

.stat-card .stat-label,

.guidance-tab p,

.form-container-card p,

.contact-form-column p {

  color: #5f6368 !important;

}



input[type="text"],

input[type="email"],

input[type="tel"],

input[type="url"],

select,

textarea {

  background-color: #ffffff !important;

  color: #05070b !important;

  border: 1px solid #e3e3e3 !important;

}



.upload-advice {

  border-left-color: var(--primary) !important;

}



/* ==========================================================================

   7. Shutter Transition CSS (Antigravity Optimization)

   ========================================================================== */



/* Lock body scrolling during active transition */

body.shutter-active {

  overflow: hidden !important;

  touch-action: none;

}



/* Static curtain loader fail-safe overlay to avoid white flashes before JS loads */

#shutter-loader-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: linear-gradient(135deg, #05070b 0%, #0D1F3C 50%, #05070b 100%);

  z-index: 999999;

  opacity: 1;

  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: auto;

}



#shutter-loader-overlay.fade-out {

  opacity: 0;

  pointer-events: none;

}



/* GPU Hardware Acceleration for Page Sections & Animation elements */

main#main-content>section,

footer.main-footer,

.fade-in-slide,

.fade-in-scale,

.fade-in-left,

.fade-in-right,

.slide-up {

  will-change: transform, opacity;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;

}



/* ==========================================================================

   8. Career Guidance Blog System Styles

   ========================================================================== */



/* Blog Container Styles */

.blog-container {

  max-width: 800px;

  margin: 0 auto;

  padding: 0 24px;

}



/* Blog Cards List */

.blog-cards-list {

  display: flex;

  flex-direction: column;

  gap: 2rem;

  max-width: 800px;

  margin: 0 auto;

}



/* Blog Cards Horizontal Scroll List (Homepage Preview) */

.blog-cards-horizontal {

  display: flex;

  flex-direction: row;

  gap: 2rem;

  overflow-x: auto;

  padding: 1rem 1.5rem;
  /* reduced vertical padding */

  margin: 0 -1.5rem;

  scrollbar-width: none;

  /* Firefox */

  -webkit-overflow-scrolling: touch;

  cursor: grab;

  user-select: none;

}



.blog-cards-horizontal::-webkit-scrollbar {

  display: none;

  /* Safari and Chrome */

}



.blog-cards-horizontal.dragging-active {

  cursor: grabbing;

}



.blog-cards-horizontal .blog-card {

  flex: 0 0 460px;
  /* reduced card width from 520px to 460px */

  scroll-snap-align: start;

  background: rgba(255, 255, 255, 0.85);

  /* Slightly higher opacity for previews */

  padding: 1.5rem 1.75rem !important;
  /* more compact internal padding */

  gap: 1.5rem !important;

  height: 240px !important;
  /* Fixed height to keep cards compact and fit the screen */

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    border-color var(--transition-fast);

}

.blog-cards-horizontal .blog-card-image-wrapper {
  flex: 0 0 160px !important;
  /* slightly smaller image to keep layout compact */
  height: 120px !important;
}

.blog-cards-horizontal .blog-card-title {
  font-size: 1.3rem !important;
  /* slightly smaller title */
  margin-bottom: 0.5rem !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.blog-cards-horizontal .blog-card-summary {
  font-size: 0.9rem !important;
  margin-bottom: 1rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}



.blog-cards-horizontal .blog-card:hover,

.blog-cards-horizontal .blog-card:focus-within {

  transform: translateY(-12px) scale(1.03) !important;

  z-index: 10;

  box-shadow: 0 25px 50px rgba(11, 87, 208, 0.18) !important;

  border-color: rgba(11, 87, 208, 0.4) !important;

}



/* Blog Loading State */

.blog-loading-wrapper {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 4rem 0;

  color: var(--primary);

  gap: 1rem;

}



.blog-loading-wrapper p {

  color: var(--text-muted);

  font-size: 0.95rem;

}



/* Premium Blog Card styling - Horizontal Rectangular Layout */

.blog-card {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  padding: 2.5rem;

  text-decoration: none;

  border-radius: var(--radius-md);

  border: 1px solid rgba(11, 87, 208, 0.08);

  background: rgba(255, 255, 255, 0.65);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    border-color var(--transition-fast);

  cursor: pointer;

  outline: none;

  will-change: transform, box-shadow;

}



.blog-card-content {

  flex: 1;

  display: flex;

  flex-direction: column;

  height: 100%;

  justify-content: space-between;

}



/* Hover and Active State styling */

.blog-card:hover,

.blog-card:focus,

.blog-card:focus-within {

  transform: translateY(-5px);

  border-color: rgba(11, 87, 208, 0.25);

  box-shadow: 0 15px 40px rgba(11, 87, 208, 0.08);

}



/* Blog Card Metadata Row */

.blog-card-meta {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.8rem;

  font-weight: 700;

  color: #5f6368;

  margin-bottom: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.blog-card-tag {

  color: var(--primary);

}



.blog-card-meta-dot {

  color: rgba(11, 87, 208, 0.25);

}



/* Blog Card Typography */

.blog-card-title {

  font-size: 1.6rem;

  font-weight: 800;

  line-height: 1.3;

  margin-bottom: 0.75rem;

  color: #05070b !important;

  letter-spacing: -0.02em;

  transition: color var(--transition-fast);

}



.blog-card:hover .blog-card-title,

.blog-card:focus .blog-card-title {

  color: var(--primary) !important;

}



.blog-card-summary {

  font-size: 1rem;

  line-height: 1.6;

  color: #5f6368 !important;

  margin-bottom: 1.5rem;

}



/* Blog Card Image Container styling */

.blog-card-image-wrapper {

  flex: 0 0 200px;

  height: 140px;

  border-radius: var(--radius-sm);

  overflow: hidden;

  border: 1px solid rgba(11, 87, 208, 0.08);

  background: #f1f5f9;

}



.blog-card-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.blog-card:hover .blog-card-image {

  transform: scale(1.05);

}



/* Blog Card Footer Row */

.blog-card-footer {

  display: flex;

  align-items: center;

  margin-top: auto;

}



.blog-card-read-more {

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--primary);

  display: inline-flex;

  align-items: center;

  transition: color var(--transition-fast);

}



.blog-card-read-more i {

  transition: transform var(--transition-fast);

}



.blog-card:hover .blog-card-read-more i,

.blog-card:focus .blog-card-read-more i {

  transform: translateX(5px);

}



/* ----------------------------------------------------------------------

   8b. Dynamic Article View Page (blog.html) Styles

   ---------------------------------------------------------------------- */



/* Back Button styling */

.blog-back-wrapper {

  margin-bottom: 2.5rem;

}



.btn-back {

  display: inline-flex;

  align-items: center;

  font-size: 0.88rem;

  font-weight: 700;

  color: #05070b;

  text-decoration: none;

  background: rgba(255, 255, 255, 0.85);

  border: 1px solid rgba(11, 87, 208, 0.15);

  padding: 8px 16px;

  border-radius: var(--radius-md);

  transition: all var(--transition-fast);

  outline: none;

}



.btn-back:hover,

.btn-back:focus {

  color: var(--primary);

  border-color: rgba(11, 87, 208, 0.25);

  background: #ffffff;

  transform: translateX(-3px);

}



/* Article Header */

.blog-article-header {

  border-bottom: 1px solid rgb(0, 0, 0);

  padding-bottom: 2rem;

  margin-bottom: 2.5rem;

}



.blog-meta-top {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.85rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 1rem;

}



.blog-badge {

  background-color: rgba(255, 255, 255, 0.1);

  color: #ffffff;

  padding: 4px 10px;

  border-radius: 4px;

  border: 1px solid rgba(255, 255, 255, 0.15);

}



.blog-date,

.blog-read-time {

  color: #cbd5e1;

}



.blog-meta-dot {

  color: rgb(255, 255, 255);

}



.blog-article-title {

  font-size: 2.85rem;

  font-weight: 800;

  line-height: 1.2;

  color: #000000;

  margin-bottom: 1.5rem;

  letter-spacing: -0.03em;

}



/* Author Profiling row */

.blog-author-row {

  display: flex;

  align-items: center;

  gap: 12px;

}



.author-avatar-initial {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: var(--primary);

  color: #ffffff;

  font-weight: 700;

  font-size: 0.9rem;

  display: flex;

  align-items: center;

  justify-content: center;

  letter-spacing: 0.05em;

}



.author-info {

  display: flex;

  flex-direction: column;

  line-height: 1.3;

}



.author-name {

  font-weight: 700;

  color: #000000;

  font-size: 0.95rem;

}



.author-title {

  font-size: 0.8rem;

  color: #cbd5e1;

}



/* Blog article main image styling */

.blog-article-image-wrapper {

  width: 100%;

  margin-bottom: 2.5rem;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

  border: 1px solid rgba(11, 87, 208, 0.08);

}



.blog-article-image-wrapper.hidden {

  display: none;

}



.blog-article-image {

  width: 100%;

  height: auto;

  max-height: none;

  object-fit: contain;

  display: block;

}



/* Article Body Typography */

.blog-article-body {

  font-size: 1.15rem;

  line-height: 1.85;

  color: #2d3748;

}



.blog-p-lead {

  font-size: 1.35rem;

  line-height: 1.75;

  color: #1a202c;

  font-weight: 500;

  margin-bottom: 2rem;

}



.blog-article-body p {

  margin-bottom: 1.75rem;

}



.blog-section-block {

  margin-top: 3.5rem;

  margin-bottom: 3.5rem;

}



.blog-section-heading {

  font-size: 2rem;

  font-weight: 800;

  line-height: 1.3;

  color: var(--text-main);

  margin-bottom: 1.25rem;

  letter-spacing: -0.02em;

}



.blog-section-body p {

  margin-bottom: 1.75rem;

}



/* Premium Key Takeaway Card styling */

.blog-takeaway-card {

  margin-top: 4.5rem;

  padding: 2.5rem;

  border-left: 4px solid var(--primary) !important;

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  background: var(--bg-soft-blue) !important;

  border: 1px solid rgba(11, 87, 208, 0.08) !important;

  border-left: 4px solid var(--primary) !important;

  box-shadow: 0 10px 30px rgba(11, 87, 208, 0.04) !important;

}



.takeaway-badge {

  display: inline-flex;

  align-items: center;

  font-size: 0.82rem;

  font-weight: 800;

  color: var(--primary);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 1rem;

}



.takeaway-text {

  font-size: 1.15rem;

  line-height: 1.8;

  color: #2d3748;

  margin-bottom: 0 !important;

}



/* Responsive adjustments for Articles and Horizontal Preview */

@media (max-width: 767px) {

  .blog-article-title {

    font-size: 2rem;

  }



  .blog-card {

    padding: 1.75rem;

    gap: 1.5rem;

  }



  .blog-card-title {

    font-size: 1.3rem;

  }



  .blog-section-heading {

    font-size: 1.5rem;

  }



  .blog-p-lead {

    font-size: 1.15rem;

  }



  .blog-cards-horizontal {

    gap: 1.5rem;

    padding: 2rem 1rem;

    margin: 0 -1rem;

  }



  .blog-cards-horizontal .blog-card {

    flex: 0 0 450px;

  }



  .blog-card-image-wrapper {

    flex: 0 0 160px;

    height: 120px;

  }

}



@media (max-width: 599px) {

  .blog-card {

    flex-direction: column-reverse;

    gap: 1.25rem;

    padding: 1.5rem;

  }



  .blog-card-image-wrapper {

    width: 100%;

    height: 140px;

    flex: 0 0 auto;

  }



  .blog-cards-horizontal .blog-card {

    flex: 0 0 300px;

    height: auto !important;

  }

}



@media (max-width: 480px) {

  .blog-cards-horizontal .blog-card {

    flex: 0 0 270px;

    height: auto !important;

  }

}



/* ==========================================================================

   REACT PIXEL TRANSITION COMPONENT STYLES

   ========================================================================== */



.pixel-transition-card {

  position: relative !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  padding: 0 !important;

  /* overrides card default padding to allow image to cover edges */

  min-height: 520px;

  background-color: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  user-select: none;

}



.pixel-transition-card:hover {

  border-color: rgba(96, 165, 250, 0.3);

  box-shadow: 0 12px 50px rgba(96, 165, 250, 0.06);

}



.pixel-grid-overlay {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 30 !important;

  pointer-events: none !important;

  display: grid !important;

}



.pixel-block {

  width: 100% !important;

  height: 100% !important;

  opacity: 0;

  transform: scale(0);

}



.pixel-first-content {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 10 !important;

  pointer-events: none !important;

  border-radius: var(--radius-lg) !important;

  overflow: hidden !important;

}



.pixel-second-content {

  position: relative !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 20 !important;

  padding: 40px !important;

  /* restores the padding for details */

  display: flex !important;

  flex-direction: column !important;

  border-radius: var(--radius-lg) !important;

  background-color: var(--bg-card);

  flex-grow: 1;

}



/* Default visual overlay content styling */

.pixel-first-content-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  z-index: 5;

  background: rgba(5, 7, 11, 0.45);

  /* Elegant dark glass overlay */

  padding: 40px;

  text-align: center;

  pointer-events: auto !important;

  /* allows hover events to hit container */

}



.pixel-first-title {

  font-family: 'Cabinet Grotesk', sans-serif;

  font-size: 1.8rem;

  font-weight: 800;

  color: #ffffff;

  margin-bottom: 12px;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);

}



.pixel-first-subtitle {

  font-family: 'Satoshi', sans-serif;

  font-size: 0.9rem;

  font-weight: 500;

  color: #60a5fa;

  /* Branding light blue */

  text-transform: uppercase;

  letter-spacing: 0.08em;

  background: rgba(5, 7, 11, 0.7);

  padding: 8px 18px;

  border-radius: 20px;

  border: 1px solid rgba(96, 165, 250, 0.25);

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

  transition: all 0.3s ease;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.pixel-transition-card:hover .pixel-first-subtitle {

  border-color: rgba(96, 165, 250, 0.6);

  box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);

  transform: translateY(-2px);

}



/* ==========================================================================

   8c. Editorial Blog Page Extensions (FAQ, Related Posts & CTA)

   ========================================================================== */



.blog-faq-section {

  margin-top: 4.5rem;

  padding-top: 3.5rem;

  border-top: 1px solid rgba(11, 87, 208, 0.08);

}



.faq-section-title {

  font-family: var(--font-headings);

  font-size: 1.85rem;

  font-weight: 800;

  color: var(--text-main);

  margin-bottom: 2rem;

  letter-spacing: -0.01em;

}



.faq-accordion {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.faq-item {

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  background-color: var(--bg-card);

  overflow: hidden;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.01);

  transition: border-color var(--transition-fast), transform var(--transition-normal), box-shadow var(--transition-normal);

}



.faq-item:hover {

  border-color: rgba(11, 87, 208, 0.25);

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(11, 87, 208, 0.04);

}



.faq-trigger {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  text-align: left;

  padding: 20px 28px;

  background: none;

  border: none;

  cursor: pointer;

  outline: none;

  gap: 16px;

}



.faq-question {

  font-family: var(--font-body);

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--text-main);

  transition: color var(--transition-fast);

}



.faq-trigger:hover .faq-question,

.faq-trigger:focus .faq-question {

  color: var(--primary);

}



.faq-icon {

  width: 18px;

  height: 18px;

  color: var(--text-muted);

  transition: transform var(--transition-normal), color var(--transition-normal);

  flex-shrink: 0;

}



.faq-trigger[aria-expanded="true"] .faq-icon {

  transform: rotate(180deg);

  color: var(--primary);

}



.faq-panel {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}



.faq-answer {

  padding: 0 28px 24px;

  font-family: var(--font-body);

  font-size: 0.95rem;

  color: var(--text-muted);

  line-height: 1.65;

}



/* Related Insights Section */

.blog-related-section {

  margin-top: 5rem;

  padding-top: 4rem;

  border-top: 1px solid rgba(11, 87, 208, 0.08);

}



.related-section-title {

  font-family: var(--font-headings);

  font-size: 1.85rem;

  font-weight: 800;

  color: var(--text-main);

  margin-bottom: 2.5rem;

  letter-spacing: -0.01em;

}



.blog-related-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}



/* CTA Box */

.blog-cta-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 5rem;

  padding: 3rem;

  border-radius: var(--radius-lg);

  border: 1px solid rgba(11, 87, 208, 0.12);

  background-color: var(--bg-soft-blue);

  gap: 32px;

}



.cta-box-content h4 {

  font-family: var(--font-headings);

  font-size: 1.45rem;

  font-weight: 800;

  color: var(--text-main);

  margin-bottom: 8px;

}



.cta-box-content p {

  font-family: var(--font-body);

  font-size: 0.98rem;

  color: var(--text-muted);

  line-height: 1.5;

}



.cta-box-actions {

  display: flex;

  gap: 16px;

  flex-shrink: 0;

}



/* Responsive Editorial Styles */

@media (max-width: 1023px) {

  .blog-cta-box {

    flex-direction: column;

    text-align: center;

    padding: 2.5rem 2rem;

    gap: 24px;

  }



  .cta-box-actions {

    width: 100%;

    justify-content: center;

  }

}



@media (max-width: 767px) {

  .blog-related-grid {

    grid-template-columns: 1fr;

    gap: 16px;

  }



  .faq-trigger {

    padding: 16px 20px;

  }



  .faq-answer {

    padding: 0 20px 20px;

  }

}



/* ==========================================================================

   14b. Premium Contact Section & CTA Banner

   ========================================================================== */



.premium-contact-section {

  padding-top: 8rem;

  padding-bottom: 5rem;

  background-color: transparent;

}



.contact-header-center {

  max-width: 700px;

  margin: 0 auto 3.5rem;

  text-align: center;

}



.contact-header-center .section-tag {

  display: inline-block;

  background-color: var(--bg-soft-blue);

  color: var(--primary);

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 0.8rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 12px;

}



.contact-main-title {

  font-family: var(--font-headings);

  font-size: 3rem;

  font-weight: 800;

  color: var(--text-main);

  margin-bottom: 1rem;

  letter-spacing: -0.02em;

}



.contact-main-subtitle {

  font-family: var(--font-body);

  font-size: 1.1rem;

  color: var(--text-muted);

  line-height: 1.6;

}



.premium-contact-card {

  background-color: #ffffff;

  border-radius: var(--radius-lg);

  box-shadow: 0 20px 60px rgba(11, 87, 208, 0.06);

  border: 1px solid rgba(11, 87, 208, 0.06);

  padding: 4rem;

  margin-bottom: 5rem;

}



.premium-contact-card-grid {

  display: grid;

  grid-template-columns: 1.1fr 1.3fr;

  gap: 64px;

}



.premium-contact-details-outer-loop {

  position: relative;

  background: #0a0a0d;

  /* Matte dark charcoal iPhone bezel outline */

  border-radius: 48px;

  /* Phone frame outer corners */

  padding: 12px;

  /* Precise thin bezel spacing around screen */

  border: 1px solid #1c1c1f;

  /* Subtle sleek bezel edge outline */

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);

  /* Clean, minimal, non-mockup shadow */

  display: flex;

  flex-direction: column;

  height: 100%;

  overflow: hidden;

}



/* Minimalist Dynamic Island screen cutout centered at the top */

.premium-contact-details-outer-loop::after {

  content: '';

  position: absolute;

  top: 22px;

  left: 50%;

  transform: translateX(-50%);

  width: 90px;

  height: 20px;

  background-color: #0a0a0d;

  border-radius: 10px;

  z-index: 10;

}



.premium-contact-details {

  display: flex;

  flex-direction: column;

  background-color: #ffffff;

  /* Clean white phone screen area */

  border-radius: 36px;

  /* Concentric rounded corner radius (48px outer - 12px padding) */

  padding: 3.75rem 2.25rem 2.5rem;

  /* Precise spacing clearing the Dynamic Island */

  height: 100%;

  border: none !important;

  /* Pure frame with no double lines */

  box-shadow: none !important;

  /* Removed extra decorative shadows */

  position: relative;

  z-index: 2;

}



.premium-details-title {

  font-family: var(--font-headings);

  font-size: 2rem;

  font-weight: 800;

  color: #05070b;

  margin-bottom: 1rem;

}



.premium-details-desc {

  font-family: var(--font-body);

  font-size: 1rem;

  color: #5f6368;

  line-height: 1.6;

  margin-bottom: 2.5rem;

}



.premium-info-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



.premium-info-item {

  display: flex;

  gap: 1.25rem;

  align-items: flex-start;

}



.premium-info-icon-box {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background-color: rgba(11, 87, 208, 0.05);

  color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.premium-info-icon-box i {

  width: 18px;

  height: 18px;

}



.premium-info-text-box {

  display: flex;

  flex-direction: column;

}



.premium-info-label {

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  color: #888888;

  letter-spacing: 0.05em;

  margin-bottom: 4px;

}



.premium-info-val {

  font-size: 1.05rem;

  font-weight: 600;

  color: #05070b;

  text-decoration: none;

  line-height: 1.5;

}



a.premium-info-val:hover {

  color: var(--primary);

}



.premium-info-subval {

  font-size: 0.92rem;

  color: #5f6368;

  margin-top: 2px;

}



.premium-social-row {

  display: flex;

  gap: 12px;

  margin-top: 3rem;

}



.premium-social-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background-color: #f8f9fa;

  color: #05070b;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  transition: all var(--transition-fast);

  border: 1px solid #e3e3e3;

}



.premium-social-btn:hover {

  background-color: var(--primary);

  color: #ffffff;

  transform: translateY(-2px);

  border-color: var(--primary);

}



/* Form Styles */

.premium-contact-form-col {

  display: flex;

  flex-direction: column;

}



.premium-contact-card .form-group {

  margin-bottom: 1.75rem;

  position: relative;

}



.premium-form-input {

  width: 100%;

  padding: 1rem 1.25rem;

  border-radius: var(--radius-sm);

  border: 1px solid #dcdcdc;

  background-color: #fcfcfc;

  font-family: var(--font-body);

  font-size: 1rem;

  color: #05070b;

  transition: all var(--transition-fast);

  outline: none;

}



.premium-form-input:focus {

  border-color: var(--primary);

  background-color: #ffffff;

  box-shadow: 0 0 0 4px rgba(11, 87, 208, 0.08);

}



.premium-form-label {

  display: block;

  font-size: 0.88rem;

  font-weight: 700;

  color: #333333;

  margin-bottom: 0.5rem;

}



.premium-form-label .required {

  color: var(--error);

  margin-left: 2px;

}



/* Send Message Button styling */

.btn-send-message {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 1rem 2rem;

  background-color: #184bcd;

  /* Premium blue */

  color: #ffffff;

  font-family: var(--font-body);

  font-weight: 700;

  font-size: 1.05rem;

  border-radius: var(--radius-sm);

  border: none;

  cursor: pointer;

  transition: all var(--transition-fast);

  outline: none;

  box-shadow: 0 4px 14px rgba(24, 75, 205, 0.25);

  margin-top: 1rem;

}



.btn-send-message:hover {

  background-color: #0d3799;

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(24, 75, 205, 0.35);

}



.btn-send-message:active {

  transform: translateY(0);

}



/* Form Error Styling to align with main.js */

.premium-contact-card .form-group.has-error .premium-form-input {

  border-color: var(--error);

  background-color: rgba(217, 48, 37, 0.02);

}



.premium-form-error-msg {

  display: none;

  font-size: 0.8rem;

  color: var(--error);

  font-weight: 600;

  margin-top: 6px;

}



.premium-contact-card .form-group.has-error .premium-form-error-msg {

  display: block;

}



/* Premium Bottom CTA Banner */

.contact-cta-section {

  padding-bottom: 8rem;

  background-color: rgba(245, 247, 250, 0.9) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

}



.contact-cta-section .container {

  max-width: 1450px;

  /* Expand the section container to make the CTA banner box wider */

}



.contact-cta-banner {

  position: relative;

  background: linear-gradient(90deg, #526675 0%, #7591a4 100%) !important;

  /* Steel-to-slate grey gradient blending with billboard.webp left edge */

  border-radius: var(--radius-lg);

  padding: 7rem 6rem;

  /* Increased padding slightly for larger size */

  min-height: 600px;

  /* Keep height expanded to display elements beautifully */

  display: flex;

  align-items: center;

  overflow: hidden !important;

  /* Ensures background floating layer is cleanly clipped */

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;

  border: 1px solid rgba(255, 255, 255, 0.05);

}



/* Grid overlay (subdued white grid lines at lower visibility for premium subtle effect) */

.contact-cta-banner::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  background-size: 24px 24px;

  pointer-events: none;

  z-index: 1;

  border-radius: var(--radius-lg) !important;

  animation: gridTravel 24s linear infinite;

  will-change: background-position;

}



@keyframes gridTravel {

  0% {

    background-position: 0 0;

  }



  100% {

    background-position: 24px 24px;

  }

}



/* Soft ambient depth lights (neutral white light glow accent overlay) */

.contact-cta-banner::after {

  content: '';

  position: absolute;

  top: -20%;

  right: -10%;

  width: 450px;

  height: 450px;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%) !important;

  filter: blur(40px);

  pointer-events: none;

  z-index: 1;

}



/* Background Billboard Layer */

.contact-cta-bg-billboard {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  /* Sits behind grid content */

  background: url('billboard.webp') no-repeat right center / contain;

  pointer-events: none;

  animation: bgBillboardFloat 6s ease-in-out infinite alternate;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform;

}



@keyframes bgBillboardFloat {

  0% {

    transform: translateY(0);

  }



  100% {

    transform: translateY(-12px);

  }

}



/* Hover depth: lifts slightly, shadow deepens, brand-blue glow behind */

.contact-cta-banner:hover .contact-cta-bg-billboard {

  transform: translateY(-16px) scale(1.02);

  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 30px rgba(24, 75, 205, 0.45));

  /* Deepen shadow + brand blue glow */

}



.contact-cta-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 1fr;

  /* Split grid to contain text strictly on the left half */

  gap: 60px;

  /* Increased gap for clear separation */

  align-items: center;

  width: 100%;

}



.contact-cta-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  max-width: 100%;

  margin-left: -60px;

  /* Shift content slightly left to align nicely */

}



.contact-cta-title {

  font-family: var(--font-headings);

  font-size: 2.5rem;

  font-weight: 800;

  line-height: 1.25;

  color: #000000 !important;

  /* Pure black headline inside left content area */

  margin-bottom: 1.25rem;

  letter-spacing: -0.02em;

}



.contact-cta-desc {

  font-family: var(--font-body);

  font-size: 1.05rem;

  color: #ffffff !important;

  /* Pure white body text */

  line-height: 1.6;

  margin-bottom: 2.5rem;

  opacity: 1;

  /* Crisp white for maximum contrast */

}



.btn-cta-partner {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 1rem 2.25rem;

  background-color: #ffffff;

  /* High-contrast white base */

  color: #184bcd;

  /* Blue text */

  font-family: var(--font-body);

  font-weight: 700;

  font-size: 1.05rem;

  border-radius: 30px;

  /* Rounded pill style */

  text-decoration: none;

  transition: all var(--transition-fast);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

  border: none;

  animation: buttonPulse 2.5s infinite ease-in-out;

  /* Continuous brand blue pulse glow */

}



@keyframes buttonPulse {

  0% {

    box-shadow: 0 0 0 0 rgba(24, 75, 205, 0.45), 0 10px 25px rgba(0, 0, 0, 0.15);

  }



  70% {

    box-shadow: 0 0 0 15px rgba(24, 75, 205, 0), 0 10px 25px rgba(0, 0, 0, 0.15);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(24, 75, 205, 0), 0 10px 25px rgba(0, 0, 0, 0.15);

  }

}



.btn-cta-partner:hover {

  background-color: #eff6ff;

  /* Soft ice-white/blue hover */

  color: #0c3596;

  /* Darker blue text */

  transform: translateY(-2px);

  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.2);

}



.btn-cta-partner i {

  margin-left: 8px;

  transition: transform var(--transition-fast);

}



.btn-cta-partner:hover i {

  transform: translateX(4px);

}







/* Background card */

.cta-mockup-bg-card {

  position: absolute;

  width: 280px;

  background: rgba(2, 44, 34, 0.6);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: var(--radius-md);

  padding: 1.5rem;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

  transform: rotate(-6deg) translateX(-30px) translateY(10px);

  z-index: 1;

}



.cta-mockup-bg-card .stat-row {

  display: flex;

  justify-content: space-between;

  margin-bottom: 12px;

  font-size: 0.8rem;

  color: #a7f3d0;

  text-transform: uppercase;

  font-weight: 700;

  letter-spacing: 0.05em;

}



.cta-mockup-bg-card .stat-val {

  font-size: 1.75rem;

  font-weight: 800;

  color: #ffffff;

  margin-top: 4px;

}



.cta-mockup-bg-card .stat-desc {

  font-size: 0.8rem;

  color: #6ee7b7;

  display: flex;

  align-items: center;

  gap: 4px;

  margin-top: 4px;

}



/* Foreground card */

.cta-mockup-fg-card {

  position: absolute;

  width: 290px;

  background: #ffffff;

  border-radius: var(--radius-md);

  padding: 1.5rem;

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);

  transform: rotate(4deg) translateX(30px) translateY(-10px);

  z-index: 2;

  border: 1px solid rgba(0, 0, 0, 0.05);

}



.cta-candidate-header {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 1rem;

}



.cta-candidate-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--bg-soft-blue);

  color: var(--primary);

  font-weight: 800;

  font-size: 1.1rem;

  display: flex;

  align-items: center;

  justify-content: center;

}



.cta-candidate-info {

  display: flex;

  flex-direction: column;

}



.cta-candidate-name {

  font-size: 0.95rem;

  font-weight: 700;

  color: #05070b;

}



.cta-candidate-role {

  font-size: 0.78rem;

  color: #5f6368;

}



.cta-candidate-tags {

  display: flex;

  gap: 6px;

  margin-bottom: 12px;

}



.cta-candidate-tag {

  font-size: 0.7rem;

  font-weight: 700;

  background: #f1f5f9;

  color: #334155;

  padding: 3px 8px;

  border-radius: 12px;

}



.cta-candidate-status-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 10px;

  border-top: 1px solid #f1f5f9;

}



.cta-status-label {

  font-size: 0.75rem;

  color: #5f6368;

  font-weight: 500;

}



.cta-status-badge {

  font-size: 0.75rem;

  font-weight: 800;

  color: #047857;

  /* deep emerald */

  background-color: #d1fae5;

  /* light emerald bg */

  padding: 4px 10px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  gap: 4px;

}



/* Responsiveness for new sections */

@media (max-width: 1023px) {

  .premium-contact-card {

    padding: 2.5rem;

  }



  .premium-contact-card-grid {

    grid-template-columns: 1fr;

    gap: 48px;

  }



  .contact-cta-banner {

    padding: 4rem 3rem 260px !important;

    /* Space for billboard mockup at bottom */

    background: linear-gradient(180deg, #526675 0%, #7591a4 100%) !important;

    /* Slate vertical gradient */

    overflow: hidden !important;

  }



  .contact-cta-bg-billboard {

    top: auto;

    bottom: 0;

    height: 240px;

    background-position: bottom center;

    animation: none !important;

    /* Disable float on mobile/tablet for stability */

  }



  .contact-cta-grid {

    grid-template-columns: 1fr;

    gap: 48px;

  }



  .contact-cta-content {

    align-items: center;

    text-align: center;

    margin-left: 0 !important;

    /* Reset left shift on tablet screens */

  }



  .contact-cta-title {

    font-size: 2rem;

  }

}



@media (max-width: 767px) {

  .premium-contact-card {

    padding: 1.5rem;

  }



  .premium-contact-details-outer-loop {

    padding: 8px !important;

    border-radius: 38px !important;

  }



  .premium-contact-details-outer-loop::after {

    width: 70px !important;

    height: 16px !important;

    top: 16px !important;

    border-radius: 8px !important;

  }



  .premium-contact-details {

    padding: 2.75rem 1.5rem 1.75rem !important;

    border-radius: 30px !important;

  }



  .contact-main-title {

    font-size: 2.25rem;

  }



  .contact-cta-banner {

    padding: 2.5rem 1.5rem 180px !important;

    /* Space for billboard at bottom on mobile */

  }



  .contact-cta-bg-billboard {

    height: 160px;

    /* Compact billboard visual height on mobile */

  }



  .contact-cta-title {

    font-size: 1.75rem;

  }

}



/* ==========================================================================

   UI/UX PRO MAX - PREMIUM MOTION & INTERACTION UPGRADES

   ========================================================================== */



/* 1. Stagger Delay Utility Classes */

.stagger-1 {

  transition-delay: 0.02s !important;

}



.stagger-2 {

  transition-delay: 0.04s !important;

}



.stagger-3 {

  transition-delay: 0.06s !important;

}



.stagger-4 {

  transition-delay: 0.08s !important;

}



.stagger-5 {

  transition-delay: 0.10s !important;

}



.stagger-6 {

  transition-delay: 0.12s !important;

}



/* 2. Glassmorphism Scrolled Navbar */

.main-header.scrolled {

  top: 10px !important;

  height: 62px !important;

  background: rgba(10, 15, 30, 0.68) !important;

  backdrop-filter: blur(24px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

  border-color: rgba(11, 87, 208, 0.45) !important;

  box-shadow: 0 8px 32px 0 rgba(11, 87, 208, 0.16), inset 0 1px 1px 0 rgba(255, 255, 255, 0.08) !important;

}



/* 3. Card Hover Lift & Shadow Micro-interactions */

.job-card,

.sector-card,

.sector-bento-card,

.blog-card,

.service-card {

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  will-change: transform, box-shadow;

}



.job-card:hover,

.blog-card:hover,

.service-card:hover {

  transform: translateY(-8px) scale(1.02) !important;

  box-shadow: 0 20px 40px rgba(11, 87, 208, 0.18), 0 5px 15px rgba(0, 0, 0, 0.05) !important;

  border-color: rgba(11, 87, 208, 0.45) !important;

}



.sector-card:hover,

.sector-bento-card:hover {

  transform: translateY(-8px) scale(1.02) rotateX(1deg) rotateY(1deg) !important;

  box-shadow: 0 20px 40px rgba(11, 87, 208, 0.18), 0 5px 15px rgba(0, 0, 0, 0.05) !important;

  border-color: rgba(11, 87, 208, 0.45) !important;

}



/* 4. Contact Form Glow & Button Hover Lift */

.premium-form-input {

  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),

    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),

    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.premium-form-input:focus {

  border-color: var(--primary) !important;

  background-color: #ffffff !important;

  box-shadow: 0 0 0 5px rgba(11, 87, 208, 0.16), 0 4px 10px rgba(11, 87, 208, 0.05) !important;

}



.btn-send-message {

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.btn-send-message:hover {

  background-color: #0d3799 !important;

  transform: translateY(-3px) scale(1.02) !important;

  box-shadow: 0 8px 24px rgba(24, 75, 205, 0.45) !important;

}



/* 5. Scroll Reveal & Footer Stagger Columns */

.scroll-reveal-fade {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),

    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: opacity, transform;

}



.scroll-reveal-fade.in-view {

  opacity: 1;

  transform: translateY(0);

}



.footer-reveal-col {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),

    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: opacity, transform;

}



.footer-reveal-col.in-view {

  opacity: 1;

  transform: translateY(0);

}



/* 6. Accessibility & prefers-reduced-motion safety */

@media (prefers-reduced-motion: reduce) {



  .job-card:hover,

  .sector-card:hover,

  .sector-bento-card:hover,

  .blog-card:hover,

  .service-card:hover,

  .btn-send-message:hover {

    transform: none !important;

    transition: none !important;

  }



  .scroll-reveal-fade,

  .footer-reveal-col {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }



  .contact-cta-banner::before {

    animation: none !important;

  }

}



/* 7. Contact CTA Image Mockup Placeholder (Allows background visual to display) */

.contact-cta-mockup-placeholder {

  position: relative;

  height: 380px;

  pointer-events: none;

}



@media (max-width: 991px) {

  .contact-cta-banner {

    overflow: hidden !important;

    padding: 3rem 2rem 220px !important;

    /* Space for billboard at bottom */

    min-height: auto;

  }



  .contact-cta-bg-billboard {

    height: 200px;

    /* Mid-size mobile visual height */

  }



  .contact-cta-content {

    margin-left: 0 !important;

    /* Reset shift on mobile */

  }



  .contact-cta-mockup-placeholder {

    display: none;

    /* Hide on mobile/tablet to stack text cleanly */

  }

}



/* ==========================================================================

   Homepage Microsoft Bookings Section Styles

   ========================================================================== */



.section-booking {

  position: relative;

  background-color: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border-bottom: none !important;

  padding-top: 6rem;

  padding-bottom: 7rem;

}



.booking-grid {

  display: grid;

  grid-template-columns: 1.1fr 1.3fr;

  gap: 70px;

  align-items: center;

}



.booking-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}



.booking-actions {

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-top: 2rem;

  width: 100%;

}



.booking-btn {

  background-color: var(--primary);

  color: #ffffff !important;

  border-radius: var(--radius-md);

  font-weight: 600;

  box-shadow: 0 4px 14px rgba(11, 87, 208, 0.25);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: max-content;

}



.booking-btn:hover {

  background-color: var(--primary-hover);

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(11, 87, 208, 0.35);

}



.booking-secondary-wrap {

  display: flex;

  align-items: center;

  margin-top: 4px;

}



.booking-secondary-link {

  color: var(--primary);

  font-weight: 600;

  text-decoration: none;

  font-size: 0.95rem;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: all var(--transition-fast);

}



.booking-secondary-link:hover {

  color: var(--primary-hover);

  gap: 10px;

  /* Micro-animation: slide icon slightly to the right */

}



.booking-secondary-link i {

  width: 16px;

  height: 16px;

}



.booking-widget {

  width: 100%;

}



.booking-card {

  width: 100%;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 20px 50px rgba(11, 87, 208, 0.08);

  border: 1px solid rgba(11, 87, 208, 0.08) !important;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(231, 241, 255, 0.5)) !important;

}



/* Animated icon hover transition on Booking primary and secondary buttons */

.booking-btn svg {

  transition: transform var(--transition-normal), opacity var(--transition-normal);

  will-change: transform, opacity;

}



.booking-btn:hover svg {

  transform: translateX(6px) scale(1.15);

  opacity: 0.9;

}



.booking-image-wrapper {

  position: relative;

  width: 100%;

  aspect-ratio: 1.68 / 1;

  background:
    radial-gradient(circle at 50% 45%, rgba(11, 87, 208, 0.12), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 245, 255, 0.68));

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.booking-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

  padding: clamp(1rem, 3vw, 2.3rem);

  filter: drop-shadow(0 18px 26px rgba(11, 87, 208, 0.12));

  transition: opacity 0.42s ease, transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), filter 0.42s ease;

  will-change: opacity, transform;

  pointer-events: none;

}

.booking-img-hover {

  position: absolute;

  inset: 0;

  opacity: 0;

  transform: translateY(10px) scale(0.985);

}

.booking-img-base {

  opacity: 1;

  transform: translateY(0) scale(1);

}



.booking-card:hover .booking-img {

  filter: drop-shadow(0 22px 30px rgba(11, 87, 208, 0.17));

}

.booking-card:hover .booking-img-base,
.booking-card:focus-within .booking-img-base {

  opacity: 0;

  transform: translateY(-8px) scale(1.015);

}

.booking-card:hover .booking-img-hover,
.booking-card:focus-within .booking-img-hover {

  opacity: 1;

  transform: translateY(0) scale(1.025);

}



/* Media Query overrides for Booking Section */

@media (max-width: 1024px) {

  .booking-grid {

    grid-template-columns: 1fr;

    gap: 48px;

  }



  .booking-content {

    align-items: center;

    text-align: center;

  }



  .booking-actions {

    align-items: center;

  }



  .booking-btn {

    width: 100%;

    max-width: 320px;

  }

}



@media (max-width: 768px) {

  .section-booking {

    padding-top: 4rem;

    padding-bottom: 5rem;

  }



  .booking-image-wrapper {

    aspect-ratio: 1.25 / 1;

    /* Slightly wider aspect ratio on mobile devices */

  }

}



/* --- STRICT MODE LAYOUT LOCK --- */



/* Forces the container canvas to expand to the parent size */

.globe-canvas-wrapper {

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  min-width: 0 !important;

  min-height: 0 !important;

  overflow: visible !important;

}



/* Hard scales the atmospheric glow layer to scale perfectly with the expanded space */

.globe-halo-ring,
[class*="halo"],
[class*="atmosphere"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(1.1) !important;
  /* Forces the ring outward */
}

/* ==========================================================================
   Premium About Us Section
   ========================================================================== */

.about-premium-section {
  padding: 8rem 0;
  background-color: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: relative;
}

.about-premium-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Eyebrow */
.about-premium-eyebrow {
  display: block;
  font-family: var(--font-headings);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Heading */
.about-premium-heading {
  font-family: var(--font-headings);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
  letter-spacing: -0.02em;
  max-width: 1000px;
  margin-bottom: 3.5rem;
}

/* Divider Lines */
.about-premium-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border);
  margin: 3.5rem 0;
}

/* Grid Layout for Intro Paragraphs */
.about-premium-intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

.about-premium-intro-left {
  max-width: 580px;
}

.about-premium-intro-right {
  max-width: 480px;
}

.about-premium-intro-text {
  font-family: var(--font-headings);
  font-size: clamp(1.3rem, 2.5vw, 1.625rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-main);
}

.about-premium-supporting-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Refined Support Blocks (Refined two-column layout) */
.about-premium-blocks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  margin-top: 2rem;
}

.about-premium-editorial-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem 0 2.5rem;
  transition: transform var(--transition-normal);
}

/* Block Hover Effect - Subtle background shift */
.about-premium-editorial-block:hover {
  transform: translateY(-2px);
}

.about-premium-block-title {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.about-premium-block-body {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Where We Work List */
.about-premium-sectors-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 0;
  margin: 0;
}

.about-premium-sectors-list li {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-main);
  position: relative;
  padding-left: 1.25rem;
}

/* Minimal fine-line accent bullet */
.about-premium-sectors-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--primary);
  border-radius: 50%;
}

/* CTA Container */
.about-premium-cta-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.about-premium-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-headings);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.5rem;
}

.about-premium-cta-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.about-premium-cta-link:hover::after {
  transform: scaleX(1);
}

.about-premium-cta-link svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-normal);
  color: var(--primary);
}

.about-premium-cta-link:hover svg {
  transform: translateX(6px);
}

/* Responsiveness */
@media (max-width: 992px) {
  .about-premium-intro-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-premium-intro-left,
  .about-premium-intro-right {
    max-width: 100%;
  }

  .about-premium-blocks-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-premium-editorial-block {
    padding: 1rem 0 2rem;
  }
}

@media (max-width: 576px) {
  .about-premium-section {
    padding: 6rem 0;
  }

  .about-premium-divider {
    margin: 2.5rem 0;
  }

  .about-premium-sectors-list {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ==========================================================================
   Video Intro Animation Styles
   ========================================================================== */

body.intro-active {
  overflow: hidden;
  height: 100vh;
}

#orglinked-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #050509;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#orglinked-intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

#intro-skip-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 50;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

#intro-skip-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

.intro-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #050509;
  z-index: 1;
}

#intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#intro-cta-wrap {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#intro-enter-btn {
  background: transparent;
  border: 1px solid rgba(24, 75, 205, 0.65);
  color: rgba(255, 255, 255, 0.82);
  padding: 12px 36px;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  outline: none;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

#intro-enter-btn:hover {
  background: rgba(24, 75, 205, 0.12);
  border-color: rgba(24, 75, 205, 0.9);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(24, 75, 205, 0.3);
}

#intro-play-btn {
  margin-left: 12px;
  background: rgba(24, 75, 205, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 12px 28px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  outline: none;
  white-space: nowrap;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}

#intro-play-btn:hover {
  background: rgba(24, 75, 205, 1);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(24, 75, 205, 0.36);
}

#intro-play-btn[hidden],
#intro-fallback-msg[hidden] {
  display: none !important;
}

#intro-fallback-msg {
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  max-width: 420px;
}

/* ==========================================================================
   ORG LINKED - Custom Upgrades (What We Do, Stats, Success Stories)
   ========================================================================== */

.section-what-we-do {
  padding: 6rem 0 5rem;
  position: relative;
  z-index: 2;
}

.what-we-do-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.what-we-do-left {
  display: flex;
  flex-direction: column;
}

.what-we-do-right {
  display: flex;
  flex-direction: column;
}

.what-we-do-body {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #334155;
  margin: 0;
}

/* Stats Counter Grid inside light translucent section */
.stats-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.stat-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 200px;
}

.stat-number {
  font-family: var(--font-headings);
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0b57d0 30%, #002d72 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.stat-text-display {
  font-family: var(--font-headings);
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  line-height: 1.3;
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(0, 0, 0, 0.08);
}

/* Testimonials / Success Stories Section */
.section-success-stories {
  padding: 6rem 0 7rem;
  background-color: var(--bg);
  position: relative;
  z-index: 2;
}

.success-stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 87, 208, 0.3);
  box-shadow: 0 20px 40px rgba(11, 87, 208, 0.06);
}

.testimonial-quote-icon {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: rgba(11, 87, 208, 0.08);
  line-height: 1;
  pointer-events: none;
}

.testimonial-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 2rem;
  font-style: italic;
  flex-grow: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
}

.testimonial-author-name {
  font-family: var(--font-headings);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.testimonial-author-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

@media (max-width: 991px) {
  .what-we-do-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .stats-container {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1.5rem;
  }

  .stat-divider {
    display: none;
  }

  .stat-item {
    flex: none;
    width: 100%;
  }

  .stat-number {
    font-size: 3rem;
  }

  .success-stories-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .testimonial-card {
    padding: 2.5rem 2rem;
  }
}

/* ==========================================================================
   Premium Icon Animations & Micro-interactions
   ========================================================================== */

/* 1. Transition rules for all core icons */
.sector-icon,
.sector-bento-icon,
.service-icon-box i,
.path-icon-box i,
.premium-info-icon-box i,
.value-card-icon i,
.success-icon,
.file-upload-icon {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease, color 0.3s ease !important;
}

/* 2. Micro-interactions: scale, rotate & glow on parent hover */
.sector-card:hover .sector-icon,
.sector-bento-card:hover .sector-bento-icon,
.service-card:hover .service-icon-box i,
.career-path-card:hover .path-icon-box i,
.premium-info-item:hover .premium-info-icon-box i,
.value-card:hover .value-card-icon i {
  transform: scale(1.2) rotate(6deg) !important;
  filter: drop-shadow(0 0 8px rgba(11, 87, 208, 0.6)) !important;
  color: var(--primary) !important;
}

/* 3. Success Icon Pulse keyframe animation on hover */
.success-icon-box:hover .success-icon {
  animation: iconPulse 1.2s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes iconPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.3));
  }

  100% {
    transform: scale(1.25);
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.8));
  }
}

/* ==========================================================================
   Hero Center Alignment & Ninja Scroll Reveal Card Animation
   ========================================================================== */

.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.hero-subtitle {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* Tablet layout: Side-by-side balanced columns */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    /* top-aligned */
    text-align: left;
  }

  .hero-content {
    align-items: flex-start;
    text-align: left;
    margin: 0;
    max-width: 100%;
  }

  .hero-subtitle {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left;
  }

  .hero-actions {
    justify-content: flex-start !important;
  }

  .hero-widget {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
}

/* Desktop layout: Spacious side-by-side columns with lifted right card */
@media (min-width: 1024px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
    /* center columns vertically */
    text-align: left;
  }

  .hero-content {
    align-items: flex-start;
    text-align: left;
    margin: 0;
    max-width: 640px;
  }

  .hero-title {
    font-size: 4.6rem !important;
    /* increased for visual balance and visibility */
    line-height: 1.12 !important;
    margin-bottom: 1.25rem !important;
  }

  .hero-subtitle {
    font-size: 1.38rem !important;
    /* increased for readability */
    line-height: 1.55 !important;
    max-width: 580px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 2rem !important;
    text-align: left;
  }

  .hero-actions {
    justify-content: flex-start !important;
  }

  .hero-widget {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .command-center-card {
    margin-top: 0;
  }
}

/* Ninja Scroll card animations */
.command-center-card {
  transform-origin: top center;
  clip-path: inset(0 0 98% 0);
  opacity: 0.4;
  transform: translateY(-12px) scaleY(0.02);
  transition: box-shadow var(--transition-slow);
}

.command-center-card.is-revealed {
  animation: ninjaScrollOpen 1050ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ninjaScrollOpen {
  0% {
    clip-path: inset(0 0 98% 0);
    opacity: 0.4;
    transform: translateY(-12px) scaleY(0.02);
  }

  35% {
    clip-path: inset(0 0 40% 0);
    opacity: 0.8;
    transform: translateY(0) scaleY(0.55);
  }

  85% {
    clip-path: inset(0 0 -3% 0);
    opacity: 1;
    transform: translateY(0) scaleY(1.03);
    /* slight overshoot bounce */
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Staggered inner elements slide and fade */
.command-center-card .inner-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.command-center-card.is-revealed .inner-item {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .command-center-card {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .command-center-card .inner-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* STRICT MODE OVERRIDES FOR ARTICLE PAGE READABILITY */
html.blog-html-root {
  background-color: #ffffff !important;
  background-image: none !important;
}

body.blog-page {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #101828 !important;
}

body.blog-page .main-header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #eaeaea !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

body.blog-page .nav-link {
  color: #1d2939 !important;
}

body.blog-page .nav-link:hover,
body.blog-page .nav-link.active {
  color: var(--primary) !important;
}

body.blog-page .btn-back {
  color: #344054 !important;
}

body.blog-page .btn-back:hover {
  color: var(--primary) !important;
}

body.blog-page #blog-content-loader {
  color: #475467 !important;
}

body.blog-page .blog-article-section {
  background-color: #ffffff !important;
}

body.blog-page .blog-container {
  max-width: 740px !important;
}

body.blog-page .blog-meta-top {
  color: #475467 !important;
}

body.blog-page .blog-date,
body.blog-page .blog-read-time {
  color: #475467 !important;
}

body.blog-page .author-name {
  color: #0c111d !important;
}

body.blog-page .author-title {
  color: #475467 !important;
}

body.blog-page .blog-article-title {
  font-size: 3.25rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #0c111d !important;
  margin-bottom: 2rem !important;
  letter-spacing: -0.03em !important;
}

body.blog-page .blog-p-lead {
  font-size: 1.35rem !important;
  line-height: 1.8 !important;
  color: #101828 !important;
  font-weight: 500 !important;
  margin-bottom: 2.25rem !important;
}

body.blog-page .blog-article-body {
  font-size: 1.18rem !important;
  line-height: 1.85 !important;
  color: #1f2937 !important;
  /* higher contrast dark grey for extreme readability */
}

body.blog-page .blog-article-body p {
  margin-bottom: 1.8rem !important;
}

body.blog-page .blog-section-heading {
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #0c111d !important;
  margin-top: 3.5rem !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

body.blog-page .blog-section-body p {
  margin-bottom: 1.8rem !important;
}

body.blog-page .blog-takeaway-card {
  margin-top: 4.5rem !important;
  background: rgba(11, 87, 208, 0.03) !important;
  /* light soft blue */
  border: 1px solid rgba(11, 87, 208, 0.15) !important;
  border-left: 4px solid var(--primary) !important;
  box-shadow: 0 4px 20px rgba(11, 87, 208, 0.02) !important;
}

body.blog-page .takeaway-text {
  color: #1f2937 !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
}

/* FAQ Section styling overrides */
body.blog-page .faq-section-title {
  color: #0c111d !important;
}

body.blog-page .faq-item {
  border: 1px solid #eaeaea !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.01) !important;
}

body.blog-page .faq-item:hover {
  border-color: rgba(11, 87, 208, 0.25) !important;
  box-shadow: 0 8px 20px rgba(11, 87, 208, 0.03) !important;
}

body.blog-page .faq-question {
  color: #0c111d !important;
}

body.blog-page .faq-trigger:hover .faq-question,
body.blog-page .faq-trigger:focus .faq-question {
  color: var(--primary) !important;
}

body.blog-page .faq-icon {
  color: #475467 !important;
}

body.blog-page .faq-answer {
  color: #475467 !important;
}

/* CTA Box Styling Overrides */
body.blog-page .blog-cta-box {
  background-color: rgba(11, 87, 208, 0.03) !important;
  /* light soft blue */
  border: 1px solid rgba(11, 87, 208, 0.12) !important;
  box-shadow: 0 4px 24px rgba(11, 87, 208, 0.02) !important;
}

body.blog-page .cta-box-content h4 {
  color: #0c111d !important;
}

body.blog-page .cta-box-content p {
  color: #344054 !important;
}

body.blog-page .blog-cta-box .btn-secondary {
  border-color: #d0d5dd !important;
  color: #344054 !important;
  background-color: #ffffff !important;
}

body.blog-page .blog-cta-box .btn-secondary:hover {
  background-color: #f9fafb !important;
  border-color: #cbd5e1 !important;
}

/* Related Insights Section - Redesigned as horizontal feed list to fit perfectly */
body.blog-page .blog-related-section {
  max-width: 100% !important;
  margin-top: 6rem !important;
  padding-top: 5rem !important;
  border-top: 1px solid #eaeaea !important;
}

body.blog-page .related-section-title {
  color: #0c111d !important;
}

body.blog-page .blog-related-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  max-width: 100% !important;
}

body.blog-page .blog-related-grid .blog-card {
  display: flex !important;
  flex-direction: row !important;
  /* horizontal alignment on desktop */
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.blog-page .blog-related-grid .blog-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04) !important;
}

body.blog-page .blog-related-grid .blog-card-image-wrapper {
  width: 220px !important;
  height: 150px !important;
  flex: 0 0 220px !important;
  order: -1 !important;
  margin: 0 !important;
  border-right: 1px solid #eaeaea !important;
  border-bottom: none !important;
}

body.blog-page .blog-related-grid .blog-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.blog-page .blog-related-grid .blog-card-content {
  flex: 1 1 auto !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
  width: 100% !important;
}

body.blog-page .blog-related-grid .blog-card-meta {
  margin-bottom: 0.5rem !important;
}

body.blog-page .blog-related-grid .blog-card-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #0c111d !important;
  margin-bottom: 0.5rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.blog-page .blog-related-grid .blog-card:hover .blog-card-title {
  color: var(--primary) !important;
}

body.blog-page .blog-related-grid .blog-card-summary {
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  color: #475467 !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.blog-page .blog-related-grid .blog-card-footer {
  display: none !important;
  /* hide the read article text footer for clean spacing */
}

/* Mobile viewports stacking */
@media (max-width: 768px) {
  body.blog-page .blog-related-grid .blog-card {
    flex-direction: column !important;
  }

  body.blog-page .blog-related-grid .blog-card-image-wrapper {
    width: 100% !important;
    height: 150px !important;
    flex: 0 0 150px !important;
    border-right: none !important;
    border-bottom: 1px solid #eaeaea !important;
  }

  body.blog-page .blog-related-grid .blog-card-content {
    padding: 1.25rem !important;
  }

  body.blog-page .blog-article-title {
    font-size: 2.25rem !important;
  }
}


/* Added via format_text.py to justify page text contents */
p,
.section-subtitle,
.about-text,
.career-text,
.services-text,
.job-description {
  text-align: justify;
}