@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --background: 40 20% 98%;
  --foreground: 30 10% 10%;
  --card: 40 25% 97%;
  --card-foreground: 30 10% 10%;
  --popover: 40 20% 98%;
  --popover-foreground: 30 10% 10%;
  --primary: 36 45% 42%;
  --primary-foreground: 40 20% 98%;
  --secondary: 35 15% 92%;
  --secondary-foreground: 30 10% 15%;
  --muted: 35 12% 93%;
  --muted-foreground: 30 5% 45%;
  --accent: 36 45% 42%;
  --accent-foreground: 40 20% 98%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 35 15% 88%;
  --input: 35 15% 88%;
  --ring: 36 45% 42%;
}

/* Animations equivalent to Framer Motion */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Smooth custom styles */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
}

/* Scrollbar layout styling matching natural tones */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
}

/* ==========================================================================
   NAVBAR TRANSITIONS (SCROLL DRIVEN)
   ========================================================================== */

/* 1. Default Transparent State (unscrolled) */
#navbar {
  background-color: transparent;
}
#navbar #nav-brand {
  color: #ffffff !important;
}
#navbar .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
}
#navbar #mobile-menu-btn {
  color: #ffffff !important;
}
#navbar #nav-logo {
  filter: url(#remove-white) invert(1) !important;
}

/* 2. Active Scrolled State */
#navbar.navbar-scrolled {
  background-color: hsl(var(--background) / 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
#navbar.navbar-scrolled #nav-brand {
  color: hsl(var(--foreground)) !important;
}
#navbar.navbar-scrolled .nav-link {
  color: hsl(var(--foreground) / 0.7) !important;
}
#navbar.navbar-scrolled #mobile-menu-btn {
  color: hsl(var(--foreground)) !important;
}
#navbar.navbar-scrolled #nav-logo {
  filter: url(#remove-white) !important; /* Removes invert(1), making it dark black */
}

/* ==========================================================================
   PREMIUM 3D TEXT EFFECTS
   ========================================================================== */

/* 1. White heading 3D chisel effect */
.text-3d-white {
  text-shadow: 
    0 1px 0 #e5e5e5,
    0 2px 0 #d4d4d4,
    0 3px 0 #a3a3a3,
    0 4px 0 #737373,
    0 5px 6px rgba(0, 0, 0, 0.6),
    0 10px 15px rgba(0, 0, 0, 0.4);
}

/* 2. Amber/gold italic 3D chisel effect */
.text-3d-amber {
  text-shadow: 
    0 1px 0 #f59e0b,
    0 2px 0 #d97706,
    0 3px 0 #b45309,
    0 4px 0 #78350f,
    0 5px 6px rgba(0, 0, 0, 0.7),
    0 10px 15px rgba(0, 0, 0, 0.5);
}

.text-3d-sub {
  text-shadow: 
    0 1px 0 #d4d4d4,
    0 2px 0 #737373,
    0 3px 4px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   WOW-FACTOR: ARCHITECTURAL PREMIUM DARK blueprint THEME
   ========================================================================== */

/* 1. Deep charcoal canvas with a single centered ambient spotlight and subtle 80px gridlines */
.bg-grid-drafting-dark {
  background-color: #0a0a09 !important; 
  background-image: 
    radial-gradient(circle at 50% 35%, rgba(180, 115, 60, 0.22) 0%, transparent 65%),
    linear-gradient(to right, rgba(180, 115, 60, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(180, 115, 60, 0.06) 1px, transparent 1px) !important;
  /* Spotlight spans 100% of the canvas; Grid lines tile at a clean, open 80px */
  background-size: 100% 100%, 80px 80px, 80px 80px !important;
  background-repeat: no-repeat, repeat, repeat !important;
}

/* 2. Glassmorphic dark blueprint cards */
.cad-box-dark {
  position: relative;
  border: 1px solid rgba(180, 115, 60, 0.25) !important;
  background: rgba(18, 18, 17, 0.8) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cad-box-dark:hover {
  border-color: rgba(180, 115, 60, 0.7) !important;
  transform: translateY(-6px) scale(1.01);
  box-shadow: 
    0 20px 40px -15px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(180, 115, 60, 0.2);
}

/* 3. Dynamic drafting corner extensions (Hover CAD Brackets) */
.cad-box-dark::before,
.cad-box-dark::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid transparent;
  transition: all 0.4s ease;
  pointer-events: none;
}
/* Top-Left Corner CAD bracket */
.cad-box-dark::before {
  top: -5px; left: -5px;
  border-right: none; border-bottom: none;
}
/* Bottom-Right Corner CAD bracket */
.cad-box-dark::after {
  bottom: -5px; right: -5px;
  border-left: none; border-top: none;
}

/* Extend and glow brackets on hover */
.cad-box-dark:hover::before {
  border-color: #f59e0b;
  width: 24px; height: 24px;
}
.cad-box-dark:hover::after {
  border-color: #f59e0b;
  width: 24px; height: 24px;
}

/* 4. Glowing golden monospaced text */
.cad-metrics-glow {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* ==========================================================================
   WOW-FACTOR: PROBLEMS WE SOLVE (DRAFTING DIMENSION TIMELINE)
   ========================================================================== */

/* 1. Light technical drafting paper grid (highly visible) */
.bg-drafting-paper {
  background-color: #f7f6f2 !important;
  background-size: 45px 45px;
  background-image: 
    linear-gradient(to right, rgba(180, 115, 60, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(180, 115, 60, 0.08) 1px, transparent 1px) !important;
}

/* 2. Structured dimension vector link */
.cad-dimension-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(180, 115, 60, 0.35), rgba(180, 115, 60, 0.35) 4px, transparent 4px, transparent 8px);
}

/* 3. Center structural coordinate marker */
.cad-node {
  position: absolute;
  padding: 2px 8px;
  background-color: #f7f6f2;
  border: 1px solid rgba(180, 115, 60, 0.35);
  font-family: monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #b45309;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 4. Precision drafting cards (Updated with warm concrete-sand theme color) */
.cad-item-card {
  border: 1px solid rgba(180, 115, 60, 0.18) !important;
  background-color: hsl(var(--secondary)) !important; /* Soft warm concrete-beige theme color */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cad-item-card:hover {
  background-color: #eae5da !important; /* Slightly richer warm sand tone on hover */
  box-shadow: 0 10px 25px -10px rgba(180, 115, 60, 0.22) !important;
  border-color: rgba(180, 115, 60, 0.45) !important;
}

/* ==========================================================================
   WOW-FACTOR: ISOMETRIC BLUEPRINT PROJECTION CARDS
   ========================================================================== */
.card-architectural-3d {
  position: relative;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(180, 115, 60, 0.25) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10;
}

/* Hidden secondary isometric wireframe layer */
.card-architectural-3d::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(180, 115, 60, 0.2);
  background: transparent;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: -1;
  pointer-events: none;
  transform: translate(0, 0);
}

/* Card shifts up-left, shadow increases */
.card-architectural-3d:hover {
  transform: translate(-6px, -6px) !important; 
  border-color: rgba(245, 158, 11, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.65) !important;
}

/* Golden CAD outline projects down-right */
.card-architectural-3d:hover::after {
  transform: translate(14px, 14px) !important; 
  border-color: rgba(245, 158, 11, 0.8) !important;
  border-width: 1.5px !important;
  box-shadow: 0 10px 20px rgba(180, 115, 60, 0.1) !important;
}

/* ==========================================================================
   3D ORBIT ROTATING CAROUSEL (EARTH-AROUND-SUN ORBIT)
   ========================================================================== */

/* Responsive Orbit Radius (Z-Translate depth) */
:root {
  --carousel-tz: 160px; /* Radius for mobile */
}
@media (min-width: 640px) {
  :root {
    --carousel-tz: 240px;
  }
}
@media (min-width: 1024px) {
  :root {
    --carousel-tz: 360px;
  }
}

/* 3D Scene Perspective Box */
.carousel-3d-scene {
  perspective: 1200px;
  overflow: visible;
}

/* Rotating Carousel Core Ring */
.carousel-3d-ring {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Carousel Slides */
.carousel-3d-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 1px solid rgba(180, 115, 60, 0.25) !important;
  background: #0d0d0c !important;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
  backface-visibility: visible;
  transition: opacity 1s, filter 1s, border-color 1s, box-shadow 1s !important;
  
  /* High-End Apple/Studio Mirror Reflection */
  -webkit-box-reflect: below 8px linear-gradient(transparent, transparent 75%, rgba(255, 255, 255, 0.12));
}

/* Polar Slide Placements on 360 degree 3D Ring */
.carousel-3d-slide:nth-child(1) { transform: rotateY(0deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide:nth-child(2) { transform: rotateY(60deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide:nth-child(3) { transform: rotateY(120deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide:nth-child(4) { transform: rotateY(180deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide:nth-child(5) { transform: rotateY(240deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide:nth-child(6) { transform: rotateY(300deg) translateZ(var(--carousel-tz)); }

/* Orbit depth styling (Blur and Dim slides facing away) */
.carousel-3d-slide.dimmed {
  opacity: 0.25;
  filter: blur(2px) grayscale(40%);
  pointer-events: none;
}

.carousel-3d-slide.active {
  opacity: 1;
  filter: none;
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(180, 115, 60, 0.25) !important;
}

/* Mirror Video Slide positions to the same 3D polar intervals */
.carousel-3d-slide-video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 1px solid rgba(180, 115, 60, 0.25) !important;
  background: #0d0d0c !important;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
  backface-visibility: visible;
  transition: opacity 1s, filter 1s, border-color 1s, box-shadow 1s !important;
  -webkit-box-reflect: below 8px linear-gradient(transparent, transparent 75%, rgba(255, 255, 255, 0.12));
}
.carousel-3d-slide-video:nth-child(1) { transform: rotateY(0deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide-video:nth-child(2) { transform: rotateY(60deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide-video:nth-child(3) { transform: rotateY(120deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide-video:nth-child(4) { transform: rotateY(180deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide-video:nth-child(5) { transform: rotateY(240deg) translateZ(var(--carousel-tz)); }
.carousel-3d-slide-video:nth-child(6) { transform: rotateY(300deg) translateZ(var(--carousel-tz)); }

.carousel-3d-slide-video.dimmed {
  opacity: 0.25;
  filter: blur(2px) grayscale(40%);
  pointer-events: none;
}
.carousel-3d-slide-video.active {
  opacity: 1;
  filter: none;
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 35px rgba(180, 115, 60, 0.25) !important;
}

/* Giant decorative architectural quote for card backgrounds */
.cad-quote-decor {
  font-family: var(--font-heading);
  font-size: 110px;
  line-height: 1;
  color: rgba(180, 115, 60, 0.12); /* Extremely subtle gold tint */
  position: absolute;
  top: 10px;
  right: 25px;
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   WOW-FACTOR: TRANSLUCENT 3D GLASS CARDS FOR TESTIMONIALS
   ========================================================================== */
.card-3d-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.1) !important; /* Frosted glass base */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.45) !important; /* Glass bevel highlight */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-3d-glass:hover {
  /* Subtle physical 3D lift */
  transform: translateY(-8px) scale(1.02) !important; 
  border-color: rgba(245, 158, 11, 0.55) !important;
  background-color: rgba(255, 255, 255, 0.16) !important; /* More opaque on hover */
  
  /* Glowing 3D amber floating shadow */
  box-shadow: 
    0 25px 50px -15px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(180, 115, 60, 0.2) !important;
}

/* ==========================================================================
   WOW-FACTOR: 3D WHITE PLASTER CAD CARDS (LIGHT CANVASES)
   ========================================================================== */
.cad-box-3d-light {
  position: relative;
  background-color: #ffffff !important; /* Solid white background blocks out the grid lines */
  border: 1px solid rgba(180, 115, 60, 0.18) !important;
  border-top: 2px solid rgba(180, 115, 60, 0.35) !important; /* Elegant top edge bevel */
  box-shadow: 
    0 10px 20px -8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cad-box-3d-light:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(180, 115, 60, 0.5) !important;
  
  /* Layered 3D block side extrusion + soft floating shadow */
  box-shadow: 
    1px 1px 0px rgba(180, 115, 60, 0.12),
    2px 2px 0px rgba(180, 115, 60, 0.12),
    3px 3px 0px rgba(180, 115, 60, 0.12),
    4px 4px 0px rgba(180, 115, 60, 0.12),
    0 20px 30px -10px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(180, 115, 60, 0.1) !important;
}

/* ==========================================================================
   WOW-FACTOR: PURE CSS 3D ROTATING BLUEPRINT VECTORS
   ========================================================================== */

/* 3D Multi-Axis Keyframe Loop */
@keyframes rotate3D {
  0% {
    transform: rotateX(25deg) rotateY(0deg) rotateZ(0deg) translateY(0px);
  }
  50% {
    transform: rotateX(40deg) rotateY(180deg) rotateZ(15deg) translateY(-20px); /* Subtle floating drift */
  }
  100% {
    transform: rotateX(25deg) rotateY(360deg) rotateZ(0deg) translateY(0px);
  }
}

/* 1. Left Column: 3D Wireframe Cube Scene */
.cube-3d-scene {
  width: 110px;
  height: 110px;
  perspective: 500px;
}

.cube-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate3D 16s infinite linear;
}

.cube-face {
  position: absolute;
  width: 110px;
  height: 110px;
  border: 1.5px solid rgba(146, 64, 14, 0.8) !important; /* Dark bronze CAD lines */
  background: transparent;
}

/* Map faces mathematically to form a perfect hollow 3D cube */
.cube-face.front  { transform: rotateY(  0deg) translateZ(55px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(55px); }
.cube-face.right  { transform: rotateY( 90deg) translateZ(55px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(55px); }
.cube-face.top    { transform: rotateX( 90deg) translateZ(55px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(55px); }

/* Container dimensions for the 3D Rings scene (Ensures it doesn't collapse to 0px) */
.rings-3d-scene {
  width: 130px;
  height: 130px;
  perspective: 500px;
}

.ring-3d {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(146, 64, 14, 0.85) !important; /* Dark dashed projection lines */
  border-radius: 50%;
}

.rings-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate3D 20s infinite linear reverse; /* Spins opposite direction */
}

.ring-3d.ring-1 { transform: rotateX(45deg); }
.ring-3d.ring-2 { transform: rotateY(45deg); }
.ring-3d.ring-3 { transform: rotateZ(45deg); }

/* ==========================================================================
   GLOBAL RESPONSIVE & MOBILE SAFARI FIXES
   ========================================================================== */

/* 1. Prevent global horizontal overflow & scroll leaks */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Responsive 3D Orbit Carousel adjustment (Prevents viewport clipping on small devices) */
@media (max-width: 480px) {
  :root {
    --carousel-tz: 135px !important; /* Tightens the rotating circle on very narrow screens */
  }
  .carousel-3d-scene {
    width: 220px !important; /* Scales down container width safely */
    height: 165px !important;
  }
}

/* 3. Smooth scrolling optimizations for Touch screens */
.scroll-smooth {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 4. Fix viewport height jump on mobile browsers (h-screen alternative) */
.min-h-screen-mobile {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* ==========================================================================
   3D TEAM ORBIT CAROUSEL (CORRECTED BACKFACE & AUTOMATIC COLOR)
   ========================================================================== */

/* Expanded Orbit Radius to give cards comfortable breathing room */
:root {
  --carousel-team-tz: 190px;
}
@media (min-width: 640px) {
  :root {
    --carousel-team-tz: 310px;
  }
}
@media (min-width: 1024px) {
  :root {
    --carousel-team-tz: 480px;
  }
}

.carousel-3d-slide-team {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 0;
  top: 0;
  border: 1px solid rgba(180, 115, 60, 0.18) !important;
  border-top: 2px solid rgba(180, 115, 60, 0.35) !important;
  background-color: #ffffff !important;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 
    0 10px 20px -8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  
  /* CRITICAL: Automatically hides rear-facing cards so text never appears backwards or mirrored! */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  
  transition: opacity 1s, filter 1s, border-color 1s, box-shadow 1s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  -webkit-box-reflect: below 8px linear-gradient(transparent, transparent 75%, rgba(255, 255, 255, 0.12));
}

/* Polar placements for 8 slides (45 degree spacing) */
.carousel-3d-slide-team:nth-child(1) { transform: rotateY(0deg) translateZ(var(--carousel-team-tz)); }
.carousel-3d-slide-team:nth-child(2) { transform: rotateY(45deg) translateZ(var(--carousel-team-tz)); }
.carousel-3d-slide-team:nth-child(3) { transform: rotateY(90deg) translateZ(var(--carousel-team-tz)); }
.carousel-3d-slide-team:nth-child(4) { transform: rotateY(135deg) translateZ(var(--carousel-team-tz)); }
.carousel-3d-slide-team:nth-child(5) { transform: rotateY(180deg) translateZ(var(--carousel-team-tz)); }
.carousel-3d-slide-team:nth-child(6) { transform: rotateY(225deg) translateZ(var(--carousel-team-tz)); }
.carousel-3d-slide-team:nth-child(7) { transform: rotateY(270deg) translateZ(var(--carousel-team-tz)); }
.carousel-3d-slide-team:nth-child(8) { transform: rotateY(315deg) translateZ(var(--carousel-team-tz)); }

/* Side Orbit Cards (Dimmed slightly in background) */
.carousel-3d-slide-team.dimmed {
  opacity: 0.35;
  filter: blur(1px);
  pointer-events: none;
}

.carousel-3d-slide-team img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* Decreases size, forces white color, and preserves the 3D drop-shadow */
.banner-heading {
  font-size: 36px !important; /* Decreases the size */
  color: #FFFFFF !important;  /* Forces the main text to be white */
  line-height: 1.3;
  /* Preserves the deep 3D drop-shadow effect */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 1px rgba(0, 0, 0, 0.5) !important;
}

.banner-heading span {
  color: #FFFFFF !important;  /* Forces "Ancient Technique" to be white */
  font-style: normal !important; /* Removes italics (delete this line if you want to keep cursive italic style) */
  /* Preserves the deep 3D drop-shadow for the span */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 1px rgba(0, 0, 0, 0.5) !important;
}