/* Q Fitness - ULTIMATE PREMIUM DESIGN SYSTEM */
/* 🚀 The most amazing, cutting-edge design you've ever seen */

/* ===== PREMIUM DESIGN SYSTEM ===== */
:root {
  /* 🌟 PREMIUM COLOR PALETTE */
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --dark-gradient: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
  --glass-gradient: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  
  /* 🎨 PREMIUM COLORS */
  --primary: #667eea;
  --primary-dark: #5a67d8;
  --primary-light: #7c3aed;
  --secondary: #f093fb;
  --accent: #4facfe;
  --accent-glow: #00f2fe;
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-light: #718096;
  --white: #ffffff;
  --black: #0a0a0a;
  --glass: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  
  /* ✨ PREMIUM SPACING */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  
  /* 🎯 PREMIUM BORDERS */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  
  /* 🌟 PREMIUM SHADOWS */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.4);
  --shadow-glow-accent: 0 0 30px rgba(79, 172, 254, 0.6);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* ⚡ PREMIUM TRANSITIONS */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-elastic: 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* 🎭 PREMIUM ANIMATIONS */
  --animate-float: float 6s ease-in-out infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ===== ULTIMATE PREMIUM SCHEMES ===== */

/* 🌟 ULTIMATE PREMIUM SCHEME (DEFAULT) */
.scheme-default {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --primary: #667eea;
  --secondary: #f093fb;
  --accent: #4facfe;
  --accent-glow: #00f2fe;
}

/* 🌿 NATURE PREMIUM SCHEME */
.scheme-green {
  --primary-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --secondary-gradient: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  --accent-gradient: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
  --primary: #11998e;
  --secondary: #38ef7d;
  --accent: #00c9ff;
  --accent-glow: #92fe9d;
}

/* 💜 COSMIC PREMIUM SCHEME */
.scheme-purple {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --primary: #8b5cf6;
  --secondary: #ec4899;
  --accent: #f59e0b;
  --accent-glow: #fbbf24;
}

/* 🔥 ENERGY PREMIUM SCHEME */
.scheme-red {
  --primary-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  --secondary-gradient: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
  --accent-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --primary: #ff416c;
  --secondary: #ff6b6b;
  --accent: #feca57;
  --accent-glow: #ff9a9e;
}

/* 🏈 STEELERS SCHEME - Pittsburgh Steelers (Black & Gold) */
.scheme-dark {
  --primary-gradient: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  --secondary-gradient: linear-gradient(135deg, #FFB612 0%, #FFD700 100%);
  --accent-gradient: linear-gradient(135deg, #FFB612 0%, #FF8C00 100%);
  --primary: #000000;
  --secondary: #1a1a1a;
  --accent: #FFB612;
  --accent-glow: #FFD700;
  --text-primary: #000000;
  --text-secondary: #333333;
  --background-primary: #f8f9fa;
  --background-secondary: #f1f3f4;
}

/* 🏈 PACKERS SCHEME - Green Bay Packers (Green & Gold) */
.scheme-neon {
  --primary-gradient: linear-gradient(135deg, #203731 0%, #4A5D23 100%);
  --secondary-gradient: linear-gradient(135deg, #FFB612 0%, #FFD700 100%);
  --accent-gradient: linear-gradient(135deg, #FFB612 0%, #FF8C00 100%);
  --primary: #203731;
  --secondary: #4A5D23;
  --accent: #FFB612;
  --accent-glow: #FFD700;
  --text-primary: #203731;
  --text-secondary: #4A5D23;
  --background-primary: #f0f4f0;
  --background-secondary: #e8f0e8;
}

/* 🏀 LAKERS SCHEME - Los Angeles Lakers (Purple & Gold) */
.scheme-sunset {
  --primary-gradient: linear-gradient(135deg, #552583 0%, #8B5CF6 100%);
  --secondary-gradient: linear-gradient(135deg, #FDB927 0%, #FFD700 100%);
  --accent-gradient: linear-gradient(135deg, #FDB927 0%, #FF8C00 100%);
  --primary: #552583;
  --secondary: #8B5CF6;
  --accent: #FDB927;
  --accent-glow: #FFD700;
  --text-primary: #552583;
  --text-secondary: #8B5CF6;
  --background-primary: #f8f4ff;
  --background-secondary: #f0e8ff;
}

/* ⚾ YANKEES SCHEME - New York Yankees (Enhanced Navy Blue & Silver) */
.scheme-ocean {
  --primary-gradient: linear-gradient(135deg, #0C2340 0%, #1E3A8A 50%, #C4CED4 100%);
  --secondary-gradient: linear-gradient(135deg, #C4CED4 0%, #FFFFFF 100%);
  --accent-gradient: linear-gradient(135deg, #FFFFFF 0%, #C4CED4 100%);
  --primary: #0C2340; /* Deep Navy Blue */
  --secondary: #1E3A8A; /* Bright Navy Blue */
  --accent: #C4CED4; /* Silver */
  --accent-glow: #FFFFFF; /* Pure White */
  --text-primary: #0C2340; /* Deep Navy Blue text */
  --text-secondary: #1E3A8A; /* Bright Navy Blue text */
  --background-primary: #ffffff; /* Pure white background */
  --background-secondary: #f8fafc; /* Light blue-gray background */
  --hero-background: #C4CED4; /* Silver grey for hero sections */
  --hero-overlay: rgba(196, 206, 212, 0.4); /* Silver grey overlay for text readability */
}

/* 🏈 TEXANS SCHEME - Houston Texans (Official NFL Colors) */
/* Complete official color palette with HEX, RGB, and Pantone codes */
.scheme-texans {
  --primary-gradient: linear-gradient(135deg, #03202F 0%, #A71930 100%);
  --secondary-gradient: linear-gradient(135deg, #A71930 0%, #03202F 100%);
  --accent-gradient: linear-gradient(135deg, #FFFFFF 0%, #03202F 100%);
  
  /* Official Houston Texans Colors */
  --primary: #03202F; /* Deep Steel Blue - HEX: #03202F, RGB: (3, 32, 47), Pantone: PMS 5395 C */
  --secondary: #A71930; /* Battle Red - HEX: #A71930, RGB: (167, 25, 48), Pantone: PMS 187 C */
  --accent: #FFFFFF; /* Liberty White - HEX: #FFFFFF, RGB: (255, 255, 255), Pantone: White */
  
  /* Color Applications */
  --accent-glow: #A71930; /* Battle Red for highlights and glows */
  --text-primary: #03202F; /* Deep Steel Blue for primary text */
  --text-secondary: #A71930; /* Battle Red for secondary text */
  --background-primary: #f8fafc; /* Light background for readability */
  --background-secondary: #ffffff; /* Liberty White for clean backgrounds */
}

/* 🏀 BULLS SCHEME - Chicago Bulls (Red & Black) */
.scheme-green {
  --primary-gradient: linear-gradient(135deg, #CE1141 0%, #FF6B6B 100%);
  --secondary-gradient: linear-gradient(135deg, #000000 0%, #333333 100%);
  --accent-gradient: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
  --primary: #CE1141;
  --secondary: #000000;
  --accent: #CE1141;
  --accent-glow: #FF6B6B;
  --text-primary: #CE1141;
  --text-secondary: #000000;
  --background-primary: #fff5f5;
  --background-secondary: #ffebeb;
}

/* 🏈 COWBOYS SCHEME - Dallas Cowboys (Navy Blue & Silver) */
.scheme-purple {
  --primary-gradient: linear-gradient(135deg, #003594 0%, #1E3A8A 100%);
  --secondary-gradient: linear-gradient(135deg, #869397 0%, #C4CED4 100%);
  --accent-gradient: linear-gradient(135deg, #869397 0%, #E5E7EB 100%);
  --primary: #003594;
  --secondary: #1E3A8A;
  --accent: #869397;
  --accent-glow: #C4CED4;
  --text-primary: #003594;
  --text-secondary: #1E3A8A;
  --background-primary: #f0f2f5;
  --background-secondary: #e8ecf0;
}

/* 🏀 CELTICS SCHEME - Boston Celtics (Green & Gold) */
.scheme-red {
  --primary-gradient: linear-gradient(135deg, #007A33 0%, #4A5D23 100%);
  --secondary-gradient: linear-gradient(135deg, #BA9653 0%, #FFD700 100%);
  --accent-gradient: linear-gradient(135deg, #BA9653 0%, #FF8C00 100%);
  --primary: #007A33;
  --secondary: #4A5D23;
  --accent: #BA9653;
  --accent-glow: #FFD700;
  --text-primary: #007A33;
  --text-secondary: #4A5D23;
  --background-primary: #ffffff;
  --background-secondary: #f8f9fa;
}

/* ===== 🚀 ULTIMATE PREMIUM COMPONENTS ===== */

/* 🌟 PREMIUM BODY */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: var(--background-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  font-feature-settings: "liga", "kern", "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all var(--transition-elastic);
}

/* ✨ PREMIUM TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

/* ===== 🎨 COMPREHENSIVE THEME COLOR INHERITANCE ===== */

/* All text elements inherit theme colors */
p, span, div, li, td, th, label, small, strong, em, b, i {
  color: var(--text-primary);
}

/* Links use theme colors */
a {
  color: var(--primary);
  transition: all var(--transition-elastic);
}

a:hover {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}

/* Form elements use theme colors */
input, textarea, select, button {
  color: var(--text-primary);
  border-color: var(--primary);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.2);
}

/* List items */
li {
  color: var(--text-primary);
}

/* Table elements */
table {
  color: var(--text-primary);
}

th {
  background: var(--primary-gradient);
  color: var(--white);
}

td {
  color: var(--text-primary);
  border-color: var(--primary);
}

/* Code elements */
code, pre {
  background: var(--background-secondary);
  color: var(--text-primary);
  border: 1px solid var(--primary);
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--primary);
  color: var(--text-primary);
  background: var(--background-secondary);
}

/* Horizontal rules */
hr {
  border-color: var(--primary);
  background: var(--primary-gradient);
}

/* All buttons inherit theme colors */
button {
  color: var(--text-primary);
  background: var(--primary-gradient);
  border: 1px solid var(--primary);
}

button:hover {
  background: var(--accent-gradient);
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}

/* Navigation elements */
nav {
  background: var(--background-secondary);
  border-bottom: 1px solid var(--primary);
}

/* Footer elements */
footer {
  background: var(--background-secondary);
  color: var(--text-primary);
}

footer a {
  color: var(--accent);
}

footer a:hover {
  color: var(--primary);
}

/* Section backgrounds */
.section {
  background: var(--background-primary);
  color: var(--text-primary);
}

/* Card elements */
.card {
  background: var(--background-secondary);
  color: var(--text-primary);
  border: 1px solid var(--primary);
}

/* Hero section */
.hero-section {
  background: var(--primary-gradient);
  color: var(--white);
}

/* All icons inherit theme colors */
svg {
  fill: var(--primary) !important;
  stroke: var(--primary) !important;
}

svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* ===== 🎨 COMPREHENSIVE ICON AND ELEMENT THEMING ===== */

/* All SVG elements inherit theme colors */
svg path, svg circle, svg rect, svg line, svg polygon, svg ellipse {
  fill: var(--primary) !important;
  stroke: var(--primary) !important;
}

svg:hover path, svg:hover circle, svg:hover rect, svg:hover line, svg:hover polygon, svg:hover ellipse {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in navigation */
.navbar svg {
  fill: var(--primary) !important;
  stroke: var(--primary) !important;
}

.navbar svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in cards */
.card svg {
  fill: var(--primary) !important;
  stroke: var(--primary) !important;
}

.card svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in sections */
.section svg {
  fill: var(--primary) !important;
  stroke: var(--primary) !important;
}

.section svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in footer */
footer svg {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

footer svg:hover {
  fill: var(--primary) !important;
  stroke: var(--primary) !important;
}

/* Social media icons in footer - Force white color with maximum specificity */
footer .footer-social-link,
footer .footer-social-link svg,
footer .footer-social-icon,
footer .footer-social-link svg path,
footer a.footer-social-link svg,
footer a.footer-social-link svg path,
footer .footer-social-links svg,
footer .footer-social-links svg path,
footer a[aria-label="Facebook"] svg,
footer a[aria-label="YouTube"] svg,
footer a[href*="facebook"] svg,
footer a[href*="youtube"] svg,
footer a[aria-label="Facebook"] svg path,
footer a[aria-label="YouTube"] svg path,
footer a[href*="facebook"] svg path,
footer a[href*="youtube"] svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

footer .footer-social-link:hover,
footer .footer-social-link:hover svg,
footer .footer-social-link:hover svg path,
footer a.footer-social-link:hover svg,
footer a.footer-social-link:hover svg path,
footer a[aria-label="Facebook"]:hover svg,
footer a[aria-label="YouTube"]:hover svg,
footer a[href*="facebook"]:hover svg,
footer a[href*="youtube"]:hover svg,
footer a[aria-label="Facebook"]:hover svg path,
footer a[aria-label="YouTube"]:hover svg path,
footer a[href*="facebook"]:hover svg path,
footer a[href*="youtube"]:hover svg path {
  fill: #10B981 !important; /* primary-green */
  stroke: #10B981 !important;
  color: #10B981 !important;
  -webkit-text-fill-color: #10B981 !important;
}

/* Override any scheme-specific footer SVG rules */
.scheme-ocean footer .footer-social-link svg,
.scheme-ocean footer .footer-social-link svg path,
.scheme-ocean footer .footer-social-icon,
.scheme-texans footer .footer-social-link svg,
.scheme-texans footer .footer-social-link svg path,
body footer .footer-social-link svg,
body footer .footer-social-link svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.scheme-ocean footer .footer-social-link:hover svg,
.scheme-ocean footer .footer-social-link:hover svg path,
.scheme-texans footer .footer-social-link:hover svg,
.scheme-texans footer .footer-social-link:hover svg path,
body footer .footer-social-link:hover svg,
body footer .footer-social-link:hover svg path {
  fill: #10B981 !important;
  stroke: #10B981 !important;
  color: #10B981 !important;
}

/* All icons in hero section */
.hero-section svg {
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

.hero-section svg:hover {
  fill: var(--accent-glow) !important;
  stroke: var(--accent-glow) !important;
}

/* All icons in buttons */
button svg, .btn-primary svg, .btn-accent svg {
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

button:hover svg, .btn-primary:hover svg, .btn-accent:hover svg {
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

/* All icons in dropdowns */
.absolute svg {
  fill: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}

.absolute svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in control panel */
.glass svg {
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

.glass svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in scheme buttons */
.scheme-btn svg {
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

.scheme-btn svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in layout buttons */
.layout-btn svg {
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

.layout-btn svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* All icons in effect buttons */
.effect-btn svg {
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

.effect-btn svg:hover {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* ===== 🎯 TAILWIND CLASS OVERRIDES ===== */

/* Override Tailwind text colors */
.text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-gray-300, .text-gray-200, .text-gray-100 {
  color: var(--text-primary) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-black {
  color: var(--text-primary) !important;
}

/* Override Tailwind background colors - Reduce White */
.bg-white {
  background: var(--background-secondary) !important;
}

.bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300, .bg-gray-400, .bg-gray-500, .bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900 {
  background: var(--background-primary) !important;
}

/* ===== 🎨 TEXANS THEMED SECTIONS ===== */

/* Add Texans-themed backgrounds to reduce white space */
.section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border-left: 4px solid #03202F !important; /* Deep Steel Blue accent */
  padding: 2rem 0 !important;
}

.section:nth-child(even) {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  border-left: 4px solid #A71930 !important; /* Battle Red accent */
}

/* Cards with Texans styling */
.card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 2px solid #03202F !important; /* Deep Steel Blue border */
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(3, 32, 47, 0.1) !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.card:hover {
  border-color: #A71930 !important; /* Battle Red on hover */
  box-shadow: 0 8px 20px rgba(167, 25, 48, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Navbar with Texans styling */
.navbar {
  background: linear-gradient(135deg, #03202F 0%, #1a365d 100%) !important; /* Deep Steel Blue gradient */
  border-bottom: 3px solid #A71930 !important; /* Battle Red border */
  padding: 1rem 0 !important;
}

/* Footer with Texans styling */
footer {
  background: linear-gradient(135deg, #03202F 0%, #1a365d 100%) !important; /* Deep Steel Blue gradient */
  border-top: 3px solid #A71930 !important; /* Battle Red border */
  color: #ffffff !important;
}

/* Hero section with Texans colors and background image */
.hero-section {
  background: none !important; /* Remove gradient to show background image */
  min-height: 70vh !important;
  position: relative !important;
}

/* Ensure hero background image shows */
.hero-section .absolute[style*="background-image"] {
  background-image: url('images/4.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
}

/* Add Texans overlay for better text contrast */
.hero-section .absolute:not([style*="background-image"]) {
  background: linear-gradient(135deg, rgba(3, 32, 47, 0.7) 0%, rgba(167, 25, 48, 0.3) 100%) !important;
  z-index: 2 !important;
}

/* Add subtle patterns to reduce white space */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(3, 32, 47, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(167, 25, 48, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900 {
  background: var(--primary) !important;
}

.bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900 {
  background: var(--primary) !important;
}

.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900 {
  background: var(--primary) !important;
}

.bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900 {
  background: var(--primary) !important;
}

.bg-yellow-500, .bg-yellow-600, .bg-yellow-700, .bg-yellow-800, .bg-yellow-900 {
  background: var(--accent) !important;
}

/* Override Tailwind border colors */
.border-gray-200, .border-gray-300, .border-gray-400, .border-gray-500, .border-gray-600, .border-gray-700, .border-gray-800, .border-gray-900 {
  border-color: var(--primary) !important;
}

.border-blue-500, .border-blue-600, .border-blue-700, .border-blue-800, .border-blue-900 {
  border-color: var(--primary) !important;
}

.border-green-500, .border-green-600, .border-green-700, .border-green-800, .border-green-900 {
  border-color: var(--primary) !important;
}

.border-red-500, .border-red-600, .border-red-700, .border-red-800, .border-red-900 {
  border-color: var(--primary) !important;
}

.border-purple-500, .border-purple-600, .border-purple-700, .border-purple-800, .border-purple-900 {
  border-color: var(--primary) !important;
}

/* Override Tailwind hover colors */
.hover\:text-blue-500:hover, .hover\:text-blue-600:hover, .hover\:text-blue-700:hover, .hover\:text-blue-800:hover, .hover\:text-blue-900:hover {
  color: var(--accent) !important;
}

.hover\:text-green-500:hover, .hover\:text-green-600:hover, .hover\:text-green-700:hover, .hover\:text-green-800:hover, .hover\:text-green-900:hover {
  color: var(--accent) !important;
}

.hover\:text-red-500:hover, .hover\:text-red-600:hover, .hover\:text-red-700:hover, .hover\:text-red-800:hover, .hover\:text-red-900:hover {
  color: var(--accent) !important;
}

.hover\:text-purple-500:hover, .hover\:text-purple-600:hover, .hover\:text-purple-700:hover, .hover\:text-purple-800:hover, .hover\:text-purple-900:hover {
  color: var(--accent) !important;
}

.hover\:text-gray-700:hover, .hover\:text-gray-600:hover, .hover\:text-gray-500:hover, .hover\:text-gray-400:hover, .hover\:text-gray-300:hover, .hover\:text-gray-200:hover, .hover\:text-gray-100:hover {
  color: var(--accent) !important;
}

/* Override Tailwind background hover colors */
.hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover, .hover\:bg-gray-300:hover, .hover\:bg-gray-400:hover, .hover\:bg-gray-500:hover, .hover\:bg-gray-600:hover, .hover\:bg-gray-700:hover, .hover\:bg-gray-800:hover, .hover\:bg-gray-900:hover {
  background: var(--accent-gradient) !important;
  opacity: 0.1;
}

.hover\:bg-blue-100:hover, .hover\:bg-blue-200:hover, .hover\:bg-blue-300:hover, .hover\:bg-blue-400:hover, .hover\:bg-blue-500:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover, .hover\:bg-blue-900:hover {
  background: var(--accent-gradient) !important;
  opacity: 0.1;
}

.hover\:bg-green-100:hover, .hover\:bg-green-200:hover, .hover\:bg-green-300:hover, .hover\:bg-green-400:hover, .hover\:bg-green-500:hover, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover, .hover\:bg-green-800:hover, .hover\:bg-green-900:hover {
  background: var(--accent-gradient) !important;
  opacity: 0.1;
}

.hover\:bg-red-100:hover, .hover\:bg-red-200:hover, .hover\:bg-red-300:hover, .hover\:bg-red-400:hover, .hover\:bg-red-500:hover, .hover\:bg-red-600:hover, .hover\:bg-red-700:hover, .hover\:bg-red-800:hover, .hover\:bg-red-900:hover {
  background: var(--accent-gradient) !important;
  opacity: 0.1;
}

.hover\:bg-purple-100:hover, .hover\:bg-purple-200:hover, .hover\:bg-purple-300:hover, .hover\:bg-purple-400:hover, .hover\:bg-purple-500:hover, .hover\:bg-purple-600:hover, .hover\:bg-purple-700:hover, .hover\:bg-purple-800:hover, .hover\:bg-purple-900:hover {
  background: var(--accent-gradient) !important;
  opacity: 0.1;
}

/* Override Tailwind shadow colors */
.shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 20px var(--shadow-glow) !important;
}

/* Override Tailwind gradient backgrounds */
.bg-gradient-to-r, .bg-gradient-to-l, .bg-gradient-to-t, .bg-gradient-to-b, .bg-gradient-to-tr, .bg-gradient-to-tl, .bg-gradient-to-br, .bg-gradient-to-bl {
  background: var(--primary-gradient) !important;
}

/* Override Tailwind text gradients */
.bg-gradient-to-r, .bg-gradient-to-l, .bg-gradient-to-t, .bg-gradient-to-b, .bg-gradient-to-tr, .bg-gradient-to-tl, .bg-gradient-to-br, .bg-gradient-to-bl {
  background: var(--primary-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ===== 🎯 DROPDOWN MENU THEME OVERRIDES ===== */

/* Dropdown menus - Professional white background with dark text */
/* Only apply to actual dropdown menus, not all absolute elements */
.navbar .group .absolute[role="menu"],
.navbar [role="menu"] {
  background: #ffffff !important; /* White background for contrast */
  border: 1px solid #e5e7eb !important; /* Light gray border */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border-radius: 0.5rem !important;
}

/* Dropdown links - Dark text on white background */
.navbar .absolute a,
.navbar [role="menu"] a,
.navbar [role="menuitem"],
.navbar .group .absolute a {
  color: #374151 !important; /* gray-700 - dark text for readability */
  background: #ffffff !important; /* white background */
  border: none !important;
}

.navbar .absolute a:hover,
.navbar [role="menu"] a:hover,
.navbar [role="menuitem"]:hover,
.navbar .group .absolute a:hover {
  color: #0C2340 !important; /* primary-blue - darker on hover */
  background: #f3f4f6 !important; /* gray-100 - light gray hover background */
  opacity: 1 !important; /* Full opacity on hover */
}

/* Override any global rules that might affect dropdown text color */
.navbar .absolute *,
.navbar [role="menu"] * {
  color: #374151 !important; /* Force dark text */
}

.navbar .absolute a *,
.navbar [role="menu"] a * {
  color: inherit !important; /* Inherit from parent */
}

/* ===== 🎯 SPECIFIC ELEMENT OVERRIDES ===== */

/* Ensure all text in cards changes */
.card * {
  color: var(--text-primary) !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  background: var(--primary-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.card a {
  color: var(--primary) !important;
}

.card a:hover {
  color: var(--accent) !important;
}

/* Ensure all text in sections changes */
.section * {
  color: var(--text-primary) !important;
}

.section h1, .section h2, .section h3, .section h4, .section h5, .section h6 {
  background: var(--primary-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.section a {
  color: var(--primary) !important;
}

.section a:hover {
  color: var(--accent) !important;
}

/* Ensure all text in footer changes */
footer * {
  color: var(--text-primary) !important;
}

footer a {
  color: var(--accent) !important;
}

footer a:hover {
  color: var(--primary) !important;
}

/* Ensure all text in hero section changes */
.hero-section * {
  color: var(--white) !important;
}

.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6 {
  color: var(--white) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
}

.hero-section a {
  color: var(--white) !important;
}

.hero-section a:hover {
  color: var(--accent-glow) !important;
}

h1 { 
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 0.9;
  margin-bottom: 1.5rem;
}

h2 { 
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
}

h3 { 
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* 🎯 PREMIUM CONTAINER */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
  overflow: visible !important; /* Allow dropdowns to show */
}

/* 🌟 ULTIMATE PREMIUM NAVBAR */
.navbar {
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid var(--primary);
  padding: var(--space-lg) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all var(--transition-elastic);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.navbar:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-bottom-color: var(--accent);
}

.navbar-brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  transition: all var(--transition-elastic);
  position: relative;
}

.navbar-brand::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent-gradient);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--transition-elastic);
  z-index: -1;
}

.navbar-brand:hover::before {
  opacity: 0.1;
  transform: scale(1.05);
}

.navbar-brand:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.15));
}

/* 🎨 PREMIUM NAVIGATION */
.navbar a,
.navbar button:not(.mobile-menu-button):not([data-drawer-target]):not([aria-label="Toggle mobile menu"]) {
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: all var(--transition-elastic);
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  cursor: pointer;
}

.navbar a:hover,
.navbar button:hover {
  color: var(--accent) !important;
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
}

.navbar a::before,
.navbar button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent-gradient);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--transition-elastic);
  z-index: -1;
}

.navbar a:hover::before,
.navbar button:hover::before {
  opacity: 0.1;
  transform: scale(1);
}

.navbar a:hover,
.navbar button:hover {
  color: var(--accent);
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
}

/* 🚀 ULTIMATE PREMIUM CARDS */
.card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-3xl);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all var(--transition-elastic);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-gradient);
  opacity: 0;
  transition: all var(--transition-elastic);
  z-index: -1;
}

.card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 16px 32px rgba(0, 0, 0, 0.1),
    var(--shadow-glow);
}

.card:hover::before {
  opacity: 0.05;
}

/* 🌟 PREMIUM SECTIONS */
.section {
  padding: 5rem 0; /* Increased from var(--space-2xl) which is 3rem */
  position: relative;
}

/* Minimize white space in all sections */
.section:first-child {
  padding-top: var(--space-xl);
}

.section:last-child {
  padding-bottom: var(--space-xl);
}

/* Minimize white space in cards */
.card {
  margin-bottom: var(--space-md);
}

.card:last-child {
  margin-bottom: 0;
}

/* Minimize white space in containers */
.container {
  padding: 0 var(--space-md);
}

/* Minimize white space in hero section */
.hero-section {
  padding: var(--space-xl) 0;
  min-height: 80vh;
}

/* Minimize white space in navbar */
.navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Minimize white space in footer */
footer {
  padding: var(--space-xl) 0;
}

/* Minimize white space in all text elements */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-sm);
}

/* Minimize white space in lists */
ul, ol {
  margin-bottom: var(--space-sm);
}

li {
  margin-bottom: var(--space-xs);
}

/* Minimize white space in buttons */
.btn-primary, .btn-accent {
  margin: var(--space-xs);
}

/* Minimize white space in forms */
input, textarea, select {
  margin-bottom: var(--space-sm);
}

/* Minimize white space in tables */
table {
  margin-bottom: var(--space-sm);
}

td, th {
  padding: var(--space-xs) var(--space-sm);
}

/* 🚀 ULTIMATE HERO SECTION - Match main index.html exactly */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

/* Ensure hero section background image is preserved */
.hero-section .absolute[style*="background-image"] {
  background-image: url('images/4.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Override any theme backgrounds on hero section */
.hero-section {
  background: none !important; /* Remove background to show image */
}

/* Force no background on all hero sections regardless of other classes */
.hero-section.bg-primary-blue,
.hero-section[class*="bg-"],
section.hero-section {
  background: none !important; /* Remove background to show image */
}

/* Remove conflicting background overlay */
.hero-section::before {
  display: none !important;
}

/* Ensure hero section background image shows through */
.hero-section .absolute[style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
}

/* Ensure hero section keeps its background image in all themes */
.scheme-default .hero-section,
.scheme-green .hero-section,
.scheme-purple .hero-section,
.scheme-red .hero-section,
.scheme-dark .hero-section,
.scheme-neon .hero-section,
.scheme-sunset .hero-section,
.scheme-ocean .hero-section,
.scheme-texans .hero-section {
  background: none !important;
}

/* Ensure hero section keeps its background image */
.hero-section[style*="background-image"] {
  background-image: url('images/4.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Hero section background image override */
.hero-section .absolute[style*="background-image"] {
  background-image: url('images/4.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ===== 🎨 HERO SECTION THEME OVERRIDES ===== */

/* Hero section text styling with background image */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6 {
  color: var(--white) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
}

.hero-section p {
  color: var(--white) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.hero-section a {
  color: var(--white) !important;
  background: var(--primary-gradient) !important;
  border: 2px solid var(--white) !important;
  text-shadow: none !important;
}

.hero-section a:hover {
  background: var(--accent-gradient) !important;
  border-color: var(--accent-glow) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Hero section overlay for text readability */
.scheme-default .hero-section .absolute,
.scheme-green .hero-section .absolute,
.scheme-purple .hero-section .absolute,
.scheme-red .hero-section .absolute,
.scheme-dark .hero-section .absolute,
.scheme-neon .hero-section .absolute,
.scheme-sunset .hero-section .absolute,
.scheme-ocean .hero-section .absolute,
.scheme-texans .hero-section .absolute {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Hero section text styling */
.scheme-default .hero-section h1,
.scheme-green .hero-section h1,
.scheme-purple .hero-section h1,
.scheme-red .hero-section h1,
.scheme-dark .hero-section h1,
.scheme-neon .hero-section h1,
.scheme-sunset .hero-section h1,
.scheme-ocean .hero-section h1,
.scheme-texans .hero-section h1 {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
}

.scheme-default .hero-section p,
.scheme-green .hero-section p,
.scheme-purple .hero-section p,
.scheme-red .hero-section p,
.scheme-dark .hero-section p,
.scheme-neon .hero-section p,
.scheme-sunset .hero-section p,
.scheme-ocean .hero-section p,
.scheme-texans .hero-section p {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.scheme-default .hero-section a,
.scheme-green .hero-section a,
.scheme-purple .hero-section a,
.scheme-red .hero-section a,
.scheme-dark .hero-section a,
.scheme-neon .hero-section a,
.scheme-sunset .hero-section a,
.scheme-ocean .hero-section a,
.scheme-texans .hero-section a {
  color: #ffffff !important;
  background: var(--primary-gradient) !important;
  border: 2px solid #ffffff !important;
  text-shadow: none !important;
}

.scheme-default .hero-section a:hover,
.scheme-green .hero-section a:hover,
.scheme-purple .hero-section a:hover,
.scheme-red .hero-section a:hover,
.scheme-dark .hero-section a:hover,
.scheme-neon .hero-section a:hover,
.scheme-sunset .hero-section a:hover,
.scheme-ocean .hero-section a:hover,
.scheme-texans .hero-section a:hover {
  background: var(--accent-gradient) !important;
  border-color: var(--accent-glow) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}


/* 🎯 PREMIUM BUTTONS */
.btn-primary {
  background: var(--primary-gradient);
  color: var(--white);
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-2xl);
  border: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all var(--transition-elastic);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-glow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: all var(--transition-slow);
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    var(--shadow-glow),
    0 20px 40px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-accent {
  background: var(--accent-gradient);
  color: var(--white);
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-2xl);
  border: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all var(--transition-elastic);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-glow-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-accent:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    var(--shadow-glow-accent),
    0 20px 40px rgba(79, 172, 254, 0.4);
}

/* ===== 🎯 MODERN BUTTON SYSTEM ===== */
/* Primary Green Button - Large CTA (Hero sections, major CTAs) */
.btn-cta-large,
a.btn-cta-large {
  display: inline-block;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem; /* Increased from 1.25rem */
  padding: 1.5rem 3.5rem; /* Increased from 1.25rem 2.5rem */
  border-radius: 0.875rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0) scale(1);
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3), 
              0 4px 10px -2px rgba(16, 185, 129, 0.2),
              0 0 0 0 rgba(16, 185, 129, 0);
  letter-spacing: 0.025em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-cta-large::before,
a.btn-cta-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-cta-large:hover::before,
a.btn-cta-large:hover::before {
  left: 100%;
}

.btn-cta-large:hover,
a.btn-cta-large:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 40px -5px rgba(16, 185, 129, 0.4), 
              0 10px 20px -5px rgba(16, 185, 129, 0.3),
              0 0 0 4px rgba(16, 185, 129, 0.1);
}

.btn-cta-large:active,
a.btn-cta-large:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.3);
}

.btn-cta-large:focus,
a.btn-cta-large:focus {
  outline: none;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3), 
              0 4px 10px -2px rgba(16, 185, 129, 0.2),
              0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* Primary Green Button - Medium (Forms, cards) */
.btn-primary-green,
button.btn-primary-green,
a.btn-primary-green {
  display: inline-block;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.375rem; /* Increased from 1.125rem for better visibility */
  padding: 1.375rem 3rem; /* Increased from 1.125rem 2.5rem for bigger buttons */
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.25),
              0 2px 6px -1px rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: hidden;
}

.btn-primary-green::before,
button.btn-primary-green::before,
a.btn-primary-green::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary-green:hover::before,
button.btn-primary-green:hover::before,
a.btn-primary-green:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary-green:hover,
button.btn-primary-green:hover,
a.btn-primary-green:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.35),
              0 4px 12px -2px rgba(16, 185, 129, 0.25);
}

.btn-primary-green:active,
button.btn-primary-green:active,
a.btn-primary-green:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.25);
}

.btn-primary-green:focus,
button.btn-primary-green:focus,
a.btn-primary-green:focus {
  outline: none;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.25),
              0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* Primary Green Button - Small (Cards, inline) */
.btn-primary-green-sm,
button.btn-primary-green-sm,
a.btn-primary-green-sm {
  display: inline-block;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.25rem; /* Increased from 1rem for better visibility */
  padding: 1.25rem 2.5rem; /* Increased from 1rem 2rem for bigger buttons */
  border-radius: 0.625rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px -2px rgba(16, 185, 129, 0.25),
              0 1px 4px -1px rgba(16, 185, 129, 0.15);
}

.btn-primary-green-sm:hover,
button.btn-primary-green-sm:hover,
a.btn-primary-green-sm:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -3px rgba(16, 185, 129, 0.35),
              0 3px 8px -2px rgba(16, 185, 129, 0.25);
}

.btn-primary-green-sm:active,
button.btn-primary-green-sm:active,
a.btn-primary-green-sm:active {
  transform: translateY(0);
}

.btn-primary-green-sm:focus,
button.btn-primary-green-sm:focus,
a.btn-primary-green-sm:focus {
  outline: none;
  box-shadow: 0 3px 10px -2px rgba(16, 185, 129, 0.25),
              0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* Primary Blue Button - Secondary actions */
.btn-primary-blue,
button.btn-primary-blue,
a.btn-primary-blue {
  display: inline-block;
  background: linear-gradient(135deg, #0C2340 0%, #1E3A8A 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.125rem; /* Increased from 1rem */
  padding: 1.125rem 2.5rem; /* Increased from 0.875rem 1.75rem */
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px -2px rgba(12, 35, 64, 0.3),
              0 2px 6px -1px rgba(12, 35, 64, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-primary-blue::before,
button.btn-primary-blue::before,
a.btn-primary-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s;
}

.btn-primary-blue:hover::before,
button.btn-primary-blue:hover::before,
a.btn-primary-blue:hover::before {
  left: 100%;
}

.btn-primary-blue:hover,
button.btn-primary-blue:hover,
a.btn-primary-blue:hover {
  background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(12, 35, 64, 0.4),
              0 4px 12px -2px rgba(12, 35, 64, 0.3);
  color: #ffffff !important;
}

.btn-primary-blue:active,
button.btn-primary-blue:active,
a.btn-primary-blue:active {
  transform: translateY(0);
}

.btn-primary-blue:focus,
button.btn-primary-blue:focus,
a.btn-primary-blue:focus {
  outline: none;
  box-shadow: 0 4px 12px -2px rgba(12, 35, 64, 0.3),
              0 0 0 3px rgba(30, 58, 138, 0.4);
}

/* Link-style button (text only, no background) */
.btn-link,
a.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #10B981;
  font-weight: 700;
  font-size: 1.125rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  letter-spacing: 0.025em;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.5rem 0;
  position: relative;
}

.btn-link::after,
a.btn-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #10B981, #059669);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link:hover,
a.btn-link:hover {
  color: #059669;
  letter-spacing: 0.05em;
  transform: translateX(4px);
}

.btn-link:hover::after,
a.btn-link:hover::after {
  width: 100%;
}

.btn-link:focus,
a.btn-link:focus {
  outline: none;
  color: #059669;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Full width button variant */
.btn-full-width {
  width: 100%;
  text-align: center;
}

/* 🎨 PREMIUM FORM ELEMENTS */
input[type="email"],
input[type="text"] {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-lg) var(--space-xl);
  color: var(--text-primary);
  transition: all var(--transition-elastic);
  font-size: 1.1rem;
  font-weight: 500;
}

input[type="email"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 
    0 0 0 4px rgba(79, 172, 254, 0.2),
    var(--shadow-glow-accent);
  transform: translateY(-2px);
}

/* 🌙 PREMIUM FOOTER */
footer {
  background: var(--dark-gradient);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);
}

/* ===== 🎭 ULTIMATE PREMIUM ANIMATIONS ===== */

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(1deg); }
  66% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.4); }
  50% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.8), 0 0 60px rgba(79, 172, 254, 0.4); }
}

/* ===== 🚀 PREMIUM UTILITY CLASSES ===== */

/* Animation Classes */
.animate-float { animation: var(--animate-float); }
.animate-pulse { animation: var(--animate-pulse); }
.animate-bounce { animation: var(--animate-bounce); }
.animate-spin { animation: var(--animate-spin); }
.animate-ping { animation: var(--animate-ping); }
.animate-glow { animation: glow 2s ease-in-out infinite; }

/* Hover Effects */
.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  transition: all var(--transition-elastic);
}

.hover-scale:hover {
  transform: scale(1.05);
  transition: all var(--transition-elastic);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
  transition: all var(--transition-elastic);
}

/* Glass Morphism */
.glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient Text */
.gradient-text {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Premium Shadows */
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-glow-accent { box-shadow: var(--shadow-glow-accent); }
.shadow-inner { box-shadow: var(--shadow-inner); }

/* ===== 🌟 SCHEME-SPECIFIC ENHANCEMENTS ===== */

/* Green Scheme - Nature Vibes */
.scheme-green .navbar {
  background: var(--background-secondary) !important;
}


.scheme-green .card:hover {
  box-shadow: 0 0 30px rgba(17, 153, 142, 0.4);
}

/* Purple Scheme - Cosmic Vibes */
.scheme-purple .navbar {
  background: var(--background-secondary) !important;
}


.scheme-purple .card:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}

/* Red Scheme - Energy Vibes */
.scheme-red .navbar {
  background: var(--background-secondary) !important;
}


.scheme-red .card:hover {
  box-shadow: 0 0 30px rgba(255, 65, 108, 0.4);
}

/* Dark Scheme - Premium Vibes */
.scheme-dark .navbar {
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.scheme-dark .card {
  background: rgba(26, 26, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.scheme-dark .card:hover {
  box-shadow: 0 0 40px rgba(102, 126, 234, 0.3);
}

.scheme-dark input[type="email"],
.scheme-dark input[type="text"] {
  background: rgba(26, 26, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* ===== 📱 ULTIMATE RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
  .container {
    padding: 0 var(--space-md);
  }
  
  .section {
    padding: var(--space-3xl) 0;
  }
  
  .card {
    padding: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-sm);
  }
  
  .section {
    padding: var(--space-2xl) 0;
  }
  
  .card {
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
  }
  
  .navbar {
    padding: var(--space-md) 0;
  }
  
  .navbar-brand {
    font-size: 1.5rem;
  }
  
  .btn-primary,
  .btn-accent {
    padding: var(--space-md) var(--space-lg);
    font-size: 1rem;
  }
  
  h1 { 
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.1;
  }
  
  h2 { 
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  
  h3 { 
    font-size: clamp(1.5rem, 4vw, 2rem);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-xs);
  }
  
  .section {
    padding: var(--space-xl) 0;
  }
  
  .card {
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
  }
  
  .btn-primary,
  .btn-accent {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
  }
  
  h1 { 
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
  
  h2 { 
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  
  h3 { 
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }
}

/* ===== ♿ ULTIMATE ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-section {
    background: var(--primary);
    animation: none;
  }
  
  .card:hover {
    transform: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --background-primary: #0a0a0a;
    --background-secondary: #1a1a1a;
  }
}

/* Focus Management */
*:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid var(--primary);
  }
  
  .btn-primary,
  .btn-accent {
    border: 2px solid var(--white);
  }
  
  .navbar a,
  .navbar button {
    border: 1px solid transparent;
  }
  
  .navbar a:hover,
  .navbar button:hover {
    border: 1px solid var(--accent);
  }
}

/* ===== 🎨 PREMIUM PRINT STYLES ===== */
@media print {
  .navbar,
  footer,
  .btn-primary,
  .btn-accent,
  .color-scheme-selector {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .card {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: black !important;
  background: none !important;
    -webkit-text-fill-color: initial !important;
  }
  
  .hero-section {
    background: white !important;
    color: black !important;
    min-height: auto !important;
  }
  
  a {
    color: black !important;
    text-decoration: underline !important;
  }
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ===== 🚀 PERFORMANCE OPTIMIZATIONS ===== */
.card,
.navbar,
.hero-section {
  will-change: transform;
}

.card:hover,
.navbar a:hover,
.navbar button:hover {
  will-change: transform, box-shadow;
}

/* GPU Acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ===== 🌟 FINAL PREMIUM TOUCHES ===== */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
  animation: float 30s ease-in-out infinite;
}

/* Premium Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

/* Ultimate Premium Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-gradient);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gradient);
}

/* Firefox Scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) rgba(0, 0, 0, 0.1);
}

/* ===== 🎨 ULTIMATE CONTROL PANEL STYLES ===== */

/* Control Panel */
.glass {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.scheme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-elastic);
  cursor: pointer;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
}

.scheme-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.scheme-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
}

/* Layout Controls */
.layout-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--accent);
}

/* Effect Controls */
.effect-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* ===== 🎭 SPECIAL EFFECTS ===== */

/* Matrix Rain Effect */
.effect-matrix {
  position: relative;
  overflow: hidden;
}

.effect-matrix::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 0, 0.1) 2px,
      rgba(0, 255, 0, 0.1) 4px
    );
  animation: matrix-rain 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes matrix-rain {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Starfield Effect */
.effect-stars {
  position: relative;
  overflow: hidden;
}

.effect-stars::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, #ddd, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: stars 50s linear infinite;
  pointer-events: none;
  z-index: 1;
}

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

/* Wave Animation */
.effect-waves {
  position: relative;
  overflow: hidden;
}

.effect-waves::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  animation: waves 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes waves {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  33% { transform: translateX(30px) translateY(-30px) rotate(120deg); }
  66% { transform: translateX(-20px) translateY(20px) rotate(240deg); }
}

/* ===== 🎨 LAYOUT VARIATIONS ===== */

/* Compact Layout */
.layout-compact .container {
  max-width: 1000px;
  padding: 0 var(--space-md);
}

.layout-compact .section {
  padding: var(--space-xl) 0;
}

.layout-compact .card {
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.layout-compact .hero-section {
  min-height: 70vh;
  padding: var(--space-lg) 0;
}

.layout-compact .navbar {
  padding: var(--space-md) 0;
}

.layout-compact .footer {
  padding: var(--space-lg) 0;
}

/* Spacious Layout */
.layout-spacious .container {
  max-width: 1600px;
  padding: 0 var(--space-lg);
}

.layout-spacious .section {
  padding: var(--space-3xl) 0;
}

.layout-spacious .card {
  padding: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

.layout-spacious .hero-section {
  min-height: 90vh;
  padding: var(--space-2xl) 0;
}

.layout-spacious .navbar {
  padding: var(--space-lg) 0;
}

.layout-spacious .footer {
  padding: var(--space-2xl) 0;
}

/* Minimal Layout */
.layout-minimal .navbar {
  background: transparent;
  border: none;
  padding: var(--space-md) 0;
}

.layout-minimal .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.layout-minimal .btn-primary,
.layout-minimal .btn-accent {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: var(--space-md) var(--space-lg);
}

.layout-minimal .section {
  padding: var(--space-lg) 0;
}

.layout-minimal .hero-section {
  min-height: 60vh;
  padding: var(--space-lg) 0;
}

.layout-minimal .container {
  padding: 0 var(--space-md);
}

.layout-minimal .footer {
  padding: var(--space-lg) 0;
}

/* ===== 🎭 ANIMATION CONTROLS ===== */

/* Disable animations */
.animations-disabled * {
  animation: none !important;
  transition: none !important;
}

/* Enhanced animations */
.animations-enabled .card {
  animation: fadeInUp 0.6s ease-out;
}

.animations-enabled .navbar {
  animation: slideDown 0.8s ease-out;
}

.animations-enabled .hero-section {
  animation: heroEntrance 1.2s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ===== 🌟 GLOW EFFECTS ===== */

.glow-enabled .card:hover {
  box-shadow: 
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 16px 32px rgba(0, 0, 0, 0.1),
    0 0 40px var(--shadow-glow);
}

.glow-enabled .navbar-brand:hover {
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.2));
}

.glow-enabled .btn-primary:hover {
  box-shadow: 
    var(--shadow-glow),
    0 20px 40px rgba(102, 126, 234, 0.6);
}

.glow-enabled .btn-accent:hover {
  box-shadow: 
    var(--shadow-glow-accent),
    0 20px 40px rgba(79, 172, 254, 0.6);
}

/* ===== 🎨 PARTICLE SYSTEM ===== */

.particle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* ===== 🎯 ENHANCED SCHEME STYLES ===== */

/* Neon Scheme Enhancements */
.scheme-neon .navbar {
  background: rgba(0, 245, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 245, 255, 0.3);
}

.scheme-neon .card {
  border: 1px solid rgba(0, 245, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
}

.scheme-neon .card:hover {
  box-shadow: 0 0 40px rgba(0, 245, 255, 0.4);
}

/* Sunset Scheme Enhancements */
.scheme-sunset .navbar {
  background: rgba(255, 107, 107, 0.1);
}

.scheme-sunset .card:hover {
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
}

/* Yankees Scheme Enhancements - Lively & Vibrant */
.scheme-ocean .navbar {
  background: linear-gradient(135deg, #0C2340 0%, #0C2340 100%) !important;
  border-bottom: 6px solid #C4CED4 !important;
  box-shadow: 0 6px 25px rgba(12, 35, 64, 0.5) !important;
  position: relative !important;
  z-index: 20 !important;
  border-radius: 0 0 20px 20px !important;
  margin-bottom: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: auto !important; /* Remove fixed height */
}

/* Ensure body background is always white for scheme-ocean */
body.scheme-ocean {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.scheme-ocean .card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 2px solid #0C2340 !important;
  box-shadow: 0 4px 12px rgba(12, 35, 64, 0.1) !important;
}

.scheme-ocean .card:hover {
  border-color: #1E3A8A !important;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2) !important;
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%) !important;
}

.scheme-ocean .section {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%) !important;
  border-left: 4px solid #0C2340 !important;
  position: relative !important;
}

/* Make the first section after hero COMPLETELY different */
.scheme-ocean .first-content-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e8f2ff 100%) !important;
  border-left: 8px solid #1E3A8A !important;
  border-top: 6px solid #C4CED4 !important;
  margin-top: 2rem !important;
  padding-top: 4rem !important;
  box-shadow: 0 -8px 30px rgba(30, 58, 138, 0.2) !important;
  position: relative !important;
  border-radius: 20px 0 0 0 !important;
}

/* Add a very obvious visual bridge */
.scheme-ocean .first-content-section::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: linear-gradient(90deg, #C4CED4 0%, #1E3A8A 50%, #C4CED4 100%) !important;
  z-index: 8;
  border-radius: 10px 10px 0 0 !important;
}

.scheme-ocean .section:nth-child(even) {
  background: linear-gradient(135deg, #f8fafc 0%, #e8f2ff 100%) !important;
  border-left: 4px solid #1E3A8A !important;
}

/* Add subtle Yankees-themed patterns */
.scheme-ocean .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(12, 35, 64, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(30, 58, 138, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.scheme-ocean .hero-section {
  background: #C4CED4 !important; /* Silver grey background */
  color: #ffffff !important;
  border-bottom: 8px solid var(--primary) !important;
  box-shadow: 0 6px 20px rgba(12, 35, 64, 0.3) !important;
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: 2rem !important;
  border-radius: 0 0 15px 15px !important;
  min-height: 50vh !important;
  padding: 2rem 0 !important;
}

/* Force grey background on scheme-ocean hero sections with any background class */
.scheme-ocean .hero-section.bg-primary-blue,
.scheme-ocean .hero-section[class*="bg-"] {
  background: #C4CED4 !important; /* Silver grey background */
}

/* Ensure grey background shows on all scheme-ocean hero sections */
.scheme-ocean .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #C4CED4 !important; /* Silver grey background */
  z-index: 0;
}

/* Ensure background image shows through */
.scheme-ocean .hero-section .absolute[style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
}

/* Add lighter overlay for text readability */
.scheme-ocean .hero-section .absolute:not([style*="background-image"]) {
  background: rgba(196, 206, 212, 0.4) !important; /* Silver grey overlay */
  z-index: 2 !important;
}

/* Add a smaller visual separator */
.scheme-ocean .hero-section::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(90deg, #0C2340 0%, #1E3A8A 50%, #C4CED4 100%) !important;
  z-index: 9;
  border-radius: 0 0 8px 8px !important;
}

.scheme-ocean footer {
  background: linear-gradient(135deg, #0C2340 0%, #1E3A8A 100%) !important;
  border-top: 3px solid #C4CED4 !important;
  color: #ffffff !important;
}

.scheme-ocean footer * {
  color: #ffffff !important;
}

.scheme-ocean footer a {
  color: #C4CED4 !important;
}

.scheme-ocean footer a:hover {
  color: #ffffff !important;
}

.scheme-ocean footer h1,
.scheme-ocean footer h2,
.scheme-ocean footer h3,
.scheme-ocean footer h4,
.scheme-ocean footer h5,
.scheme-ocean footer h6 {
  color: #ffffff !important;
}

.scheme-ocean footer p,
.scheme-ocean footer span,
.scheme-ocean footer div {
  color: #ffffff !important;
}

/* Force all footer text to be white */
.scheme-ocean footer {
  color: #ffffff !important;
}

.scheme-ocean footer .text-gray-600,
.scheme-ocean footer .text-gray-500,
.scheme-ocean footer .text-gray-400 {
  color: #ffffff !important;
}

.scheme-ocean footer .text-blue-600,
.scheme-ocean footer .text-blue-500,
.scheme-ocean footer .text-blue-400 {
  color: #C4CED4 !important;
}

/* Enhanced Yankees styling for all elements */
.scheme-ocean .btn-primary {
  background: linear-gradient(135deg, #0C2340 0%, #1E3A8A 100%) !important;
  border: 2px solid #C4CED4 !important;
  color: #ffffff !important;
}

.scheme-ocean .btn-primary:hover {
  background: linear-gradient(135deg, #1E3A8A 0%, #C4CED4 100%) !important;
  border-color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2) !important;
}

/* Reduce menu flash effect */
.scheme-ocean .navbar a:hover,
.scheme-ocean .navbar button:hover {
  color: #1E3A8A !important;
  background: rgba(196, 206, 212, 0.1) !important;
  transform: none !important;
  transition: all 0.2s ease !important;
}

.scheme-ocean .navbar a,
.scheme-ocean .navbar button {
  transition: all 0.2s ease !important;
}

/* Fix navigation links - override white text rules */
.scheme-ocean .navbar a:not(.navbar-brand a),
.scheme-ocean .navbar button:not(.navbar-brand button) {
  color: #374151 !important; /* text-gray-700 equivalent */
}

.scheme-ocean .navbar a:not(.navbar-brand a):hover,
.scheme-ocean .navbar button:not(.navbar-brand button):hover {
  color: #1E3A8A !important; /* primary-blue hover */
}

/* NUCLEAR OPTION - Force navigation text to be dark */
.scheme-ocean .navbar button,
.scheme-ocean .navbar a {
  color: #374151 !important;
}

.scheme-ocean .navbar button:hover,
.scheme-ocean .navbar a:hover {
  color: #1E3A8A !important;
}

/* Override any white text rules for navigation */
.scheme-ocean .navbar button.text-gray-700,
.scheme-ocean .navbar a.text-gray-700 {
  color: #374151 !important;
}

.scheme-ocean .navbar button.text-gray-700:hover,
.scheme-ocean .navbar a.text-gray-700:hover {
  color: #1E3A8A !important;
}

/* Fix dropdown menu items - they're in a different container */
.scheme-ocean .navbar .absolute a,
.scheme-ocean .navbar .absolute a.text-gray-700,
.scheme-ocean .navbar [role="menu"] a,
.scheme-ocean .navbar [role="menuitem"] {
  color: #374151 !important; /* gray-700 - dark text on white */
  background: #ffffff !important; /* white background */
}

.scheme-ocean .navbar .absolute a:hover,
.scheme-ocean .navbar .absolute a.text-gray-700:hover,
.scheme-ocean .navbar [role="menu"] a:hover,
.scheme-ocean .navbar [role="menuitem"]:hover {
  color: #0C2340 !important; /* primary-blue - darker on hover */
  background-color: #f3f4f6 !important; /* gray-100 - light gray hover */
}

/* Target dropdown menu items specifically - Already handled above, but ensure consistency */
.scheme-ocean .navbar [role="menu"] a,
.scheme-ocean .navbar [role="menuitem"] {
  color: #374151 !important; /* gray-700 - dark text */
  background: #ffffff !important; /* white background */
}

.scheme-ocean .navbar [role="menu"] a:hover,
.scheme-ocean .navbar [role="menuitem"]:hover {
  color: #0C2340 !important; /* primary-blue - darker on hover */
  background-color: #f3f4f6 !important; /* gray-100 - light gray hover */
}

/* ULTRA NUCLEAR - Force all dropdown items to be dark */
.scheme-ocean .navbar div a,
.scheme-ocean .navbar div a:hover,
.scheme-ocean .navbar .block,
.scheme-ocean .navbar .block:hover,
.scheme-ocean .navbar a.block,
.scheme-ocean .navbar a.block:hover {
  color: #374151 !important;
}

.scheme-ocean .navbar div a:hover,
.scheme-ocean .navbar .block:hover,
.scheme-ocean .navbar a.block:hover {
  color: #1E3A8A !important;
  background-color: #f3f4f6 !important;
}

/* FINAL NUCLEAR - Override everything for dropdown items */
body.scheme-ocean .navbar a,
body.scheme-ocean .navbar a:hover,
body.scheme-ocean .navbar div a,
body.scheme-ocean .navbar div a:hover {
  color: #374151 !important;
}

body.scheme-ocean .navbar a:hover,
body.scheme-ocean .navbar div a:hover {
  color: #1E3A8A !important;
  background-color: #f3f4f6 !important;
}

/* OVERRIDE THE WHITE TEXT RULES THAT ARE CAUSING THE PROBLEM */
.scheme-ocean .navbar a span,
.scheme-ocean .navbar span:not(.navbar-brand span),
.scheme-ocean .navbar div a span,
.scheme-ocean .navbar div span {
  color: #374151 !important;
}

.scheme-ocean .navbar a span:hover,
.scheme-ocean .navbar span:not(.navbar-brand span):hover,
.scheme-ocean .navbar div a span:hover,
.scheme-ocean .navbar div span:hover {
  color: #1E3A8A !important;
}

/* ULTIMATE OVERRIDE - Target the specific white text rules */
.scheme-ocean .navbar a span.text-gray-700,
.scheme-ocean .navbar span.text-gray-700,
.scheme-ocean .navbar div a span.text-gray-700,
.scheme-ocean .navbar div span.text-gray-700 {
  color: #374151 !important;
}

.scheme-ocean .navbar a span.text-gray-700:hover,
.scheme-ocean .navbar span.text-gray-700:hover,
.scheme-ocean .navbar div a span.text-gray-700:hover,
.scheme-ocean .navbar div span.text-gray-700:hover {
  color: #1E3A8A !important;
}

/* FINAL FINAL NUCLEAR - Override everything with maximum specificity */
html body.scheme-ocean .navbar a,
html body.scheme-ocean .navbar a:hover,
html body.scheme-ocean .navbar div a,
html body.scheme-ocean .navbar div a:hover,
html body.scheme-ocean .navbar .block,
html body.scheme-ocean .navbar .block:hover,
html body.scheme-ocean .navbar [role="menuitem"],
html body.scheme-ocean .navbar [role="menuitem"]:hover {
  color: #374151 !important;
}

html body.scheme-ocean .navbar a:hover,
html body.scheme-ocean .navbar div a:hover,
html body.scheme-ocean .navbar .block:hover,
html body.scheme-ocean .navbar [role="menuitem"]:hover {
  color: #1E3A8A !important;
  background-color: #f3f4f6 !important;
}

/* Override any remaining white text rules with maximum specificity */
html body.scheme-ocean .navbar a span,
html body.scheme-ocean .navbar div a span,
html body.scheme-ocean .navbar span:not(.navbar-brand span) {
  color: #374151 !important;
}

html body.scheme-ocean .navbar a span:hover,
html body.scheme-ocean .navbar div a span:hover,
html body.scheme-ocean .navbar span:not(.navbar-brand span):hover {
  color: #1E3A8A !important;
}

.scheme-ocean .text-primary {
  color: #0C2340 !important;
}

.scheme-ocean .text-secondary {
  color: #1E3A8A !important;
}

.scheme-ocean .bg-primary {
  background: #0C2340 !important;
}

.scheme-ocean .bg-secondary {
  background: #1E3A8A !important;
}

.scheme-ocean .border-primary {
  border-color: #0C2340 !important;
}

.scheme-ocean .border-secondary {
  border-color: #1E3A8A !important;
}

/* Add more lively elements */
.scheme-ocean .hero-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(196, 206, 212, 0.1) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(30, 58, 138, 0.1) 50%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Add subtle animations */
.scheme-ocean .card {
  transition: all 0.3s ease !important;
}

.scheme-ocean .card:hover {
  transition: all 0.3s ease !important;
}

/* Add Yankees-themed accent colors */
.scheme-ocean .accent-text {
  color: #1E3A8A !important;
  font-weight: 600 !important;
}

.scheme-ocean .accent-bg {
  background: linear-gradient(135deg, #1E3A8A 0%, #C4CED4 100%) !important;
  color: #ffffff !important;
}

/* Hero section logo and text styling */
.scheme-ocean .hero-section img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

.scheme-ocean .hero-section h2 {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.scheme-ocean .hero-section .text-gray-200 {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Force navbar text to be visible - LIGHT VERSION */
.scheme-ocean .navbar-brand span,
.scheme-ocean .navbar a span,
.scheme-ocean .navbar span,
.scheme-ocean .navbar .text-white,
.scheme-ocean .navbar-brand .text-white {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}


/* NUCLEAR OPTION - Force white text */
.scheme-ocean .navbar-brand span {
  color: white !important;
  color: #ffffff !important;
  color: rgb(255, 255, 255) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* Force footer text to be white */
.scheme-ocean footer,
.scheme-ocean footer *,
.scheme-ocean footer h1,
.scheme-ocean footer h2,
.scheme-ocean footer h3,
.scheme-ocean footer h4,
.scheme-ocean footer h5,
.scheme-ocean footer h6,
.scheme-ocean footer p,
.scheme-ocean footer span,
.scheme-ocean footer div,
.scheme-ocean footer a {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ULTRA NUCLEAR - Override everything */
.scheme-ocean .navbar-brand span.text-white,
.scheme-ocean .navbar-brand span[class*="text-"],
.scheme-ocean .navbar-brand span {
  color: #ffffff !important;
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* FINAL NUCLEAR OPTION - Override Flowbite and everything */
body.scheme-ocean .navbar-brand span,
body.scheme-ocean .navbar-brand span.text-white,
body.scheme-ocean .navbar-brand span[class*="text-"],
body.scheme-ocean .navbar-brand span[class*="ml-"],
body.scheme-ocean .navbar-brand span[class*="tracking-"],
body.scheme-ocean .navbar-brand span[class*="font-"],
body.scheme-ocean .navbar-brand span[class*="italic"] {
  color: #ffffff !important;
  color: white !important;
  color: rgb(255, 255, 255) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* Texans Scheme Enhancements */
.scheme-texans .navbar {
  background: var(--background-secondary) !important;
}

.scheme-texans .card:hover {
  box-shadow: 0 0 30px rgba(167, 25, 48, 0.4);
}

/* Override Tailwind classes with Texans colors - Direct HEX values */
.scheme-texans .text-gray-700,
.scheme-texans .text-gray-500,
.scheme-texans .text-gray-600 {
  color: #03202F !important; /* Deep Steel Blue */
}

.scheme-texans .bg-gray-50,
.scheme-texans .bg-gray-100 {
  background: #f8fafc !important; /* Light background */
}

.scheme-texans .hover\:bg-gray-100:hover {
  background: #ffffff !important; /* Liberty White */
}

.scheme-texans .hover\:text-primary-green:hover {
  color: #A71930 !important; /* Battle Red */
}

/* Comprehensive Texans color overrides - Direct HEX values */
.scheme-texans h1,
.scheme-texans h2,
.scheme-texans h3,
.scheme-texans h4,
.scheme-texans h5,
.scheme-texans h6 {
  color: #03202F !important; /* Deep Steel Blue */
}

.scheme-texans p,
.scheme-texans span,
.scheme-texans div {
  color: #03202F !important; /* Deep Steel Blue */
}

.scheme-texans a {
  color: #03202F !important; /* Deep Steel Blue */
}

.scheme-texans a:hover {
  color: #A71930 !important; /* Battle Red */
}

.scheme-texans button {
  color: #03202F !important; /* Deep Steel Blue */
}

.scheme-texans button:hover {
  color: #A71930 !important; /* Battle Red */
}

/* Force Texans colors on all elements */
.scheme-texans * {
  color: #03202F !important; /* Deep Steel Blue for all text */
}

.scheme-texans body {
  background: #f8fafc !important; /* Light background */
}

.scheme-texans .navbar {
  background: #ffffff !important; /* Liberty White */
  border-bottom: 2px solid #03202F !important; /* Deep Steel Blue border */
}

/* ===== 🎨 INTERSECTION OBSERVER ANIMATIONS ===== */

.animate-fade-in {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* ===== 🎯 MOUSE TRACKING EFFECTS ===== */

.glow-enabled {
  --mouse-x: 0.5;
  --mouse-y: 0.5;
}


/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* ===== UTILITY CLASSES ===== */
.text-primary { color: var(--primary-color); }
.text-accent { color: var(--accent-color); }
.bg-primary { background-color: var(--primary-color); }
.bg-accent { background-color: var(--accent-color); }
.border-primary { border-color: var(--primary-color); }
.border-accent { border-color: var(--accent-color); }

/* Hover effects */
.hover-lift:hover {
  transform: translateY(-4px);
  transition: all var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.05);
  transition: all var(--transition-base);
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus styles */
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
  .navbar,
  footer,
  .btn-primary,
  .btn-accent {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ===== 🎯 MODERN PROFESSIONAL NAVBAR STYLES ===== */
.navbar {
  background: linear-gradient(180deg, #0C2340 0%, #0a1a2e 100%) !important; /* Subtle gradient for depth */
  padding: 0 !important; /* 0 top/bottom */
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2), 0 4px 8px -2px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 50 !important;
  min-height: auto !important; /* Removed fixed min-height to allow navbar to shrink */
  height: auto !important; /* Allow navbar to size to content */
  border-bottom: 1px solid rgba(196, 206, 212, 0.2) !important; /* Subtle border */
  backdrop-filter: blur(10px) !important; /* Modern glass effect */
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important; /* Allow dropdowns to show on desktop */
}

/* Prevent horizontal overflow on mobile only */
@media (max-width: 767px) {
  .navbar {
    overflow-x: hidden !important;
  }
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 206, 212, 0.4), transparent);
}

.navbar-brand img {
  height: 11.25rem !important; /* 180px - even bigger logo */
  width: 11.25rem !important; /* 180px */
  padding: 0 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 2.5rem !important; /* FEATHERED EDGES - remove sharp corners */
  -webkit-border-radius: 2.5rem !important;
  overflow: hidden !important; /* Clip to rounded corners */
}

.navbar-brand {
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}


.navbar-brand:hover img {
  transform: scale(1.08) translateY(-2px) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

.navbar .est-text {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: normal !important;
  position: absolute !important;
  left: 150px !important;
  top: 60% !important;
  transform: translateY(-50%) !important;
  font-family: 'Times New Roman', serif !important;
  font-style: italic !important;
  letter-spacing: 2px !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Desktop: Ensure no horizontal scrollbar and dropdowns are visible */
@media (min-width: 768px) {
  body {
    overflow-x: hidden !important; /* Prevent horizontal scrollbar */
  }
  
  .navbar .container {
    overflow: visible !important; /* Allow dropdowns to show */
  }
  
  .navbar .flex {
    overflow: visible !important; /* Allow dropdowns to show */
  }
}

/* Base rule: Mobile menu button should be visible by default on small screens */
/* Only apply on mobile - desktop will override */
@media (max-width: 767px) {
  .navbar .mobile-menu-button,
  .navbar #mobile-menu-btn,
  .navbar button[data-drawer-target="drawer-navigation"],
  .navbar button[aria-label="Toggle mobile menu"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    margin-left: auto !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.375rem !important;
  }
}

/* Override on desktop - hide mobile button */
@media (min-width: 768px) {
  .navbar .mobile-menu-button,
  .navbar #mobile-menu-btn,
  .navbar button[data-drawer-target="drawer-navigation"],
  .navbar button[aria-label="Toggle mobile menu"],
  .navbar button[data-drawer-target] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* Hide est. 1994 text on mobile to prevent overflow */
@media (max-width: 767px) {
  .navbar span[style*="est. 1994"],
  .navbar .est-text {
    display: none !important;
  }
  
  .navbar .container {
    overflow-x: visible !important; /* Allow logo to be fully visible */
    overflow-y: visible !important;
    max-width: 100% !important;
    padding-left: 1rem !important; /* Add left padding for spacing */
    padding-right: 1rem !important; /* Add right padding for spacing */
  }
  
  .navbar .flex {
    overflow-x: visible !important; /* Allow logo to be fully visible */
    overflow-y: visible !important;
    max-width: 100% !important;
  }
  
  /* Ensure logo container isn't clipped and has proper spacing */
  .navbar .flex.justify-between {
    overflow: visible !important;
    padding-left: 0 !important; /* Container padding handles spacing */
    padding-right: 0 !important;
  }
  
  /* Ensure logo container has enough space and isn't clipped on the right */
  .navbar .flex.items-center:has(.navbar-brand),
  .navbar .flex.items-center.flex-shrink-0 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0.5rem !important; /* Add right margin to prevent clipping */
    padding-right: 0 !important;
    min-width: 4rem !important;
    max-width: none !important; /* Remove any max-width that might clip */
    width: auto !important; /* Allow to expand for full logo */
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  
  /* Ensure logo itself isn't clipped on the right */
  .navbar .navbar-brand {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
  }
  
  .navbar .navbar-brand img {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    max-width: 4rem !important; /* Keep logo size but ensure it's not clipped */
    width: 4rem !important;
    height: 4rem !important;
  }
  
  /* FORCE desktop navigation to be hidden on mobile */
  .navbar nav[role="navigation"],
  .navbar nav.hidden.md\:flex,
  .navbar nav[role="navigation"].hidden.md\:flex {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure flex container properly shows button */
  .navbar .flex.justify-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
  }
  
  /* Ensure mobile menu button is visible - NUCLEAR OPTION */
  .navbar .mobile-menu-button,
  .navbar #mobile-menu-btn,
  .navbar button[data-drawer-target="drawer-navigation"],
  .navbar button[aria-label="Toggle mobile menu"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    color: #ffffff !important;
    background: rgba(255,255,255,0.2) !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    position: relative !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
  }
  
  .navbar .mobile-menu-button svg,
  .navbar button.md\:hidden svg,
  .navbar button[data-drawer-target] svg,
  .navbar button[class*="md:hidden"] svg,
  .navbar button[aria-label="Toggle mobile menu"] svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }
  
  /* Override any navbar button rules that might hide it */
  .navbar button.md\:hidden:hover,
  .navbar button[class*="md:hidden"]:hover {
    color: #10B981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
  }
  
  /* Make navbar flex container show only logo and hamburger */
  .navbar .flex.justify-between {
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* Ensure logo doesn't take too much space but is fully visible - fix right side clipping */
  .navbar .navbar-brand {
    flex-shrink: 0 !important;
    max-width: none !important; /* Remove max-width restriction that might be cutting off logo */
    min-width: 4rem !important; /* Ensure minimum space for logo */
    width: auto !important; /* Allow logo to take its natural width */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important; /* Ensure logo isn't clipped */
    position: relative !important;
    z-index: 10 !important; /* Ensure logo is above other elements */
    margin-right: 0 !important; /* Remove any right margin that might cause clipping */
    padding-right: 0 !important; /* Remove any right padding */
  }
  
  /* Ensure logo container is visible on mobile and has enough space */
  .navbar .flex.items-center:has(.navbar-brand),
  .navbar .flex.items-center.flex-shrink-0 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    min-width: 4rem !important; /* Ensure container has space for logo */
    max-width: none !important; /* Remove max-width that might clip logo */
    width: auto !important; /* Allow container to expand for logo */
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  
  .navbar .navbar-brand img {
    width: 7.5rem !important; /* 120px - increased to match larger desktop logo proportionally */
    height: 7.5rem !important;
    max-width: 7.5rem !important;
    max-height: 7.5rem !important;
    min-width: 7.5rem !important;
    min-height: 7.5rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important; /* Ensure full logo is visible */
    position: relative !important;
    z-index: 10 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  
  /* Ensure hamburger button is on the right */
  .navbar .mobile-menu-button,
  .navbar button.md\:hidden,
  .navbar button[data-drawer-target] {
    margin-left: auto !important;
  }
}

/* Modern Navigation Links - Only apply on desktop */
@media (min-width: 768px) {
  /* Mathematically perfect spacing: equal margins on both sides */
  /* Container has padding: 0 var(--space-lg) = 0 1.5rem = 0 24px */
  /* We want: screen edge to logo = screen edge to navigation start */
  .navbar .flex.justify-between {
    position: relative !important;
    gap: 3rem !important; /* Generous gap between left (logo+est.1994) and right (navigation) sections */
  }
  
  /* Ensure equal margins: both logo and navigation should be same distance from screen edges */
  /* Container has padding: 0 var(--space-lg) = 0 1.5rem */
  /* The flex container is inside the container, so both sides should naturally align */
  /* But we need to ensure no extra margins interfere */
  
  /* Left side: Logo + est.1994 - move 20px left from current position */
  .navbar .flex.items-center:has(.navbar-brand) {
    flex-shrink: 0 !important;
    min-width: fit-content !important;
    margin-left: 2.625rem !important; /* Reduced by 20px (1.25rem) from 3.875rem = 2.625rem */
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure logo has no extra margins that would push it away from left edge */
  .navbar .navbar-brand {
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Right side: Navigation - move white menu bar 10px more right */
  .navbar nav[role="navigation"] {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important; /* Reduced from 1rem - tighter spacing between links */
    background: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    margin-left: auto !important; /* Push to right */
    margin-right: 4.5rem !important; /* Move white menu bar 10px more right (3.875rem + 0.625rem = 4.5rem) */
    width: auto !important;
    flex: none !important;
    min-width: fit-content !important;
    position: relative !important;
  }
  
  /* Ensure container padding - navbar already has 20px left padding, so keep container as is */
  .navbar .container {
    padding-left: calc(var(--space-lg) + 1.875rem) !important; /* 1.5rem + 1.875rem (30px) = move all contents right by 30px */
    padding-right: var(--space-lg) !important; /* 1.5rem = 24px */
  }
  
  /* Remove the old negative margin adjustment */
  /* .navbar nav[role="navigation"] {
    margin-right: -160px !important;
  } */
  
  .navbar nav[role="navigation"] > * {
    position: relative !important;
  }
  
  /* Hide mobile menu button on desktop */
  .navbar .mobile-menu-button,
  .navbar #mobile-menu-btn,
  .navbar button[data-drawer-target],
  .navbar button[data-drawer-target="drawer-navigation"],
  .navbar button[aria-label="Toggle mobile menu"] {
    display: none !important;
  }
}

/* Navigation Link Buttons - Modern Professional Style (Desktop only) */
@media (min-width: 768px) {
  .navbar nav[role="navigation"] button,
  .navbar nav[role="navigation"] a {
    color: #ffffff !important;
    font-weight: 600 !important; /* Bolder for modern look */
    font-size: 1.1rem !important; /* Larger font size */
    padding: 0.75rem 1.25rem !important; /* More padding */
    border-radius: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth modern transition */
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
    position: relative !important;
    overflow: hidden !important;
  }
}

/* Responsive adjustments for laptop screens - reduce spacing to fit all items */
@media (min-width: 768px) and (max-width: 1280px) {
  /* Reduce gap between navigation items */
  .navbar nav[role="navigation"] {
    gap: 0.25rem !important; /* Very tight spacing between links */
    padding: 0.5rem 0.75rem !important; /* Reduced padding on white bar */
    margin-right: 1rem !important; /* Reduced right margin */
  }
  
  /* Reduce padding on individual navigation items */
  .navbar nav[role="navigation"] button,
  .navbar nav[role="navigation"] a {
    padding: 0.5rem 0.75rem !important; /* Reduced padding */
    font-size: 0.95rem !important; /* Slightly smaller font */
  }
  
  /* Reduce gap between logo and navigation */
  .navbar .flex.justify-between {
    gap: 1.5rem !important; /* Reduced gap */
  }
  
  /* Reduce container padding on laptops */
  .navbar .container {
    padding-left: calc(var(--space-lg) + 0.5rem) !important; /* Reduced left padding */
    padding-right: var(--space-lg) !important;
  }
  
  /* Reduce logo margin on laptops */
  .navbar .flex.items-center:has(.navbar-brand) {
    margin-left: 1rem !important; /* Reduced margin */
  }
  
}

/* Hide "est. 1994" text on smaller laptops to save space */
@media (min-width: 768px) and (max-width: 1024px) {
  .navbar .hidden.md\:inline-block {
    display: none !important;
  }
}

  /* Modern hover effect with underline animation */
  .navbar nav[role="navigation"] button::after,
  .navbar nav[role="navigation"] a::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #10B981, transparent);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navbar nav[role="navigation"] button:hover::after,
  .navbar nav[role="navigation"] a:hover::after {
    width: 80%;
  }

  .navbar nav[role="navigation"] button:hover,
  .navbar nav[role="navigation"] a:hover {
    color: #10B981 !important; /* primary-green */
    background: rgba(16, 185, 129, 0.08) !important; /* Subtle background glow */
    transform: translateY(-2px) !important;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.3) !important; /* Subtle glow effect */
  }

  /* Active state for current page */
  .navbar nav[role="navigation"] a[aria-current="page"],
  .navbar nav[role="navigation"] button[aria-current="page"] {
    color: #10B981 !important;
  }

  .navbar nav[role="navigation"] a[aria-current="page"]::after,
  .navbar nav[role="navigation"] button[aria-current="page"]::after {
    width: 80%;
  }
}

/* Modern Professional Dropdown Menus - Ensure Proper Contrast */
.navbar [role="menu"],
.navbar .absolute[role="menu"],
.navbar .group .absolute[role="menu"] {
  background: #ffffff !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important; /* gray-200 with transparency */
  border-radius: 0.75rem !important; /* More rounded for modern look */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  padding: 0.75rem 0 !important; /* More padding */
  margin-top: 0.75rem !important;
  width: 12rem !important; /* Fixed width - matches w-48 in HTML */
  max-width: 12rem !important; /* Prevent extending too wide */
  min-width: 12rem !important; /* Ensure consistent width */
  z-index: 1000 !important;
  backdrop-filter: blur(10px) !important; /* Modern glass effect */
  animation: dropdownFadeIn 0.2s ease-out !important;
  overflow: hidden !important; /* Prevent content from extending */
  box-sizing: border-box !important; /* Include border in width calculation */
  left: 0 !important; /* Align to left edge of parent button */
  right: auto !important; /* Don't extend to right */
  position: absolute !important; /* Ensure absolute positioning */
  top: 100% !important; /* Position below button */
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown Menu Items - Modern Style with Dark Text on White Background */
.navbar [role="menu"] a,
.navbar [role="menuitem"],
.navbar .absolute[role="menu"] a,
.navbar .absolute[role="menuitem"] {
  color: #374151 !important; /* gray-700 - dark text */
  background: #ffffff !important; /* white background */
  padding: 0.875rem 1.25rem !important; /* More padding for modern feel */
  display: block !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth modern transition */
  font-size: 1rem !important; /* Larger font */
  font-weight: 500 !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative !important;
}

.navbar [role="menu"] a::before,
.navbar [role="menuitem"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #10B981;
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar [role="menu"] a:hover::before,
.navbar [role="menuitem"]:hover::before {
  transform: scaleY(1);
}

.navbar [role="menu"] a:hover,
.navbar [role="menuitem"]:hover,
.navbar .absolute[role="menu"] a:hover,
.navbar .absolute[role="menuitem"]:hover {
  color: #0C2340 !important; /* primary-blue - darker on hover */
  background: linear-gradient(90deg, #f9fafb 0%, #f3f4f6 100%) !important; /* Subtle gradient hover */
  padding-left: 1.5rem !important; /* More indent for modern feel */
  transform: translateX(2px) !important; /* Slight slide effect */
}

/* Ensure dropdown items are visible and have proper contrast */
/* Only show dropdowns on hover - hide when not hovered */
.navbar .group .absolute[role="menu"],
.navbar .group [role="menu"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

.navbar .group:hover .absolute[role="menu"],
.navbar .group:hover [role="menu"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Override any global rules that might affect dropdown contrast */
.navbar [role="menu"] *,
.navbar .absolute[role="menu"] * {
  color: #374151 !important; /* Force dark text */
}

.navbar [role="menu"] a *,
.navbar [role="menuitem"] * {
  color: inherit !important;
}

/* Force all footer text to be white - more specific rules */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer span,
footer div,
footer a,
footer li {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Override specific Tailwind gray classes in footer */
footer .text-gray-300,
footer .text-gray-400,
footer .text-gray-500,
footer .text-gray-600,
footer .text-gray-700,
footer .text-gray-800,
footer .text-gray-900 {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Force footer headings to be white */
footer h4.text-lg {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Force footer links to be white */
footer a.text-gray-300 {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Ensure footer links are visible on hover */
footer a:hover {
  color: #C4CED4 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* NUCLEAR OPTION - Force ALL footer headings to be white */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Override any blue colors in footer */
footer .text-blue-600, footer .text-blue-500, footer .text-blue-400, 
footer .text-blue-300, footer .text-blue-200, footer .text-blue-100 {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Force specific footer headings */
footer h4.text-lg.font-semibold {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* =============================
   The Gym page (single source of authority)
   Scope: body.page-the-gym
   ============================= */
body.page-the-gym .hero-section {
  /* Force the hero image back on for this page (global CSS has conflicting hero rules). */
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('images/new/gym4.jpeg') center / cover no-repeat !important;
  background-color: #0C2340 !important;
  min-height: 60vh !important;
}

body.page-the-gym .hero-section::before {
  display: none !important;
  content: none !important;
}

body.page-the-gym .hero-section h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.6) !important;
}

body.page-the-gym .hero-section p {
  color: #ffffff !important;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.6) !important;
}

/* Keep headings readable (avoid global gradient/transparent text) */
body.page-the-gym .gym-main .section h1,
body.page-the-gym .gym-main .section h2,
body.page-the-gym .gym-main .section h3,
body.page-the-gym .gym-main .section h4,
body.page-the-gym .gym-main .section h5,
body.page-the-gym .gym-main .section h6 {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: #0C2340 !important;
  text-shadow: none !important;
}

/* Base content readability */
body.page-the-gym .gym-main {
  color: #334155; /* slate-700 */
}

body.page-the-gym .gym-main .section {
  /* Override aggressive global `.section` styling (backgrounds, borders, patterns). */
  background: #ffffff !important;
  border-left: none !important;
  color: #334155 !important; /* slate-700 */
}

body.page-the-gym .gym-main .section::before {
  content: none !important;
}

/* Section-specific backgrounds (avoid Tailwind `bg-gradient-to-*` utilities that are globally overridden) */
body.page-the-gym .gym-main .gym-section-carousel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

body.page-the-gym .gym-main .gym-section-equipment {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

body.page-the-gym .gym-main .gym-section-location {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* Force readable content text (beat global `.section * { ... !important; }`), but do NOT clobber links. */
body.page-the-gym .gym-main .section p,
body.page-the-gym .gym-main .section li,
body.page-the-gym .gym-main .section span,
body.page-the-gym .gym-main .section div {
  color: #334155 !important; /* slate-700 */
}

/* The site CSS sets `.section a { color: var(--primary) !important; }` which breaks button-like links.
   Force white text for CTA-style links on this page. */
body.page-the-gym .gym-main .section a.bg-primary-blue,
body.page-the-gym .gym-main .section a.bg-primary-green,
body.page-the-gym .gym-main .section a.text-white,
body.page-the-gym .gym-main .section a.btn-primary-blue,
body.page-the-gym .gym-main .section a.btn-primary-green,
body.page-the-gym .gym-main .section a.btn-primary-green-sm {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Defensive: if any nested spans exist inside a button-like link, keep them white too. */
body.page-the-gym .gym-main .section a.bg-primary-blue span,
body.page-the-gym .gym-main .section a.bg-primary-green span,
body.page-the-gym .gym-main .section a.btn-primary-blue span,
body.page-the-gym .gym-main .section a.btn-primary-green span,
body.page-the-gym .gym-main .section a.btn-primary-green-sm span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Keep headings and key numbers navy inside sections */
body.page-the-gym .gym-main .section h1,
body.page-the-gym .gym-main .section h2,
body.page-the-gym .gym-main .section h3,
body.page-the-gym .gym-main .section h4,
body.page-the-gym .gym-main .section h5,
body.page-the-gym .gym-main .section h6 {
  color: #0C2340 !important;
  -webkit-text-fill-color: #0C2340 !important;
}

body.page-the-gym .gym-card .gym-number,
body.page-the-gym .gym-main .section .text-primary-blue {
  color: #0C2340 !important;
}

/* Ensure gym-card content is readable (div text otherwise inherits conflicting globals). */
body.page-the-gym .gym-card,
body.page-the-gym .gym-card p,
body.page-the-gym .gym-card li,
body.page-the-gym .gym-card div,
body.page-the-gym .gym-card span {
  color: #334155 !important;
}

body.page-the-gym .gym-card .gym-number {
  color: #0C2340 !important;
}

body.page-the-gym .gym-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

body.page-the-gym .gym-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 60px rgba(2, 6, 23, 0.12);
  border-color: rgba(15, 23, 42, 0.14);
}

body.page-the-gym .gym-pill {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 9999px;
  padding: 0.6rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  backdrop-filter: blur(10px);
  color: #334155;
}

body.page-the-gym .gym-number {
  letter-spacing: -0.04em;
}

/* Carousel styles for gym page */
body.page-the-gym .carousel-prev,
body.page-the-gym .carousel-next {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0C2340 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.page-the-gym .carousel-prev:hover,
body.page-the-gym .carousel-next:hover {
  background: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body.page-the-gym .carousel-dot {
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

body.page-the-gym .carousel-dot.bg-primary-green {
  background: #10B981 !important;
  opacity: 1 !important;
}

body.page-the-gym .carousel-dot.bg-gray-300 {
  background: #d1d5db !important;
  opacity: 0.7 !important;
}

body.page-the-gym .carousel-dot.bg-gray-300:hover {
  background: #9ca3af !important;
  opacity: 1 !important;
}

/* Carousel track */
body.page-the-gym .carousel-track {
  display: flex !important;
  transition: transform 0.5s ease-in-out !important;
}

body.page-the-gym .carousel-slide {
  min-width: 100% !important;
  flex-shrink: 0 !important;
}

/* Hero section buttons */
body.page-the-gym .hero-section a.bg-primary-green {
  background: #10B981 !important;
  color: #ffffff !important;
}

body.page-the-gym .hero-section a.bg-primary-green:hover {
  background: #0F766E !important;
}

body.page-the-gym .hero-section a.bg-white\/10 {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

body.page-the-gym .hero-section a.bg-white\/10:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure carousel container styling */
body.page-the-gym #gym-carousel {
  position: relative !important;
}

body.page-the-gym #gym-carousel .relative.overflow-hidden {
  border-radius: 0.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* ===== MOBILE DROPDOWN MENU ENHANCEMENTS ===== */
/* Mobile drawer improvements */
#drawer-navigation {
  transition: transform 0.3s ease-in-out !important;
}

#drawer-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Mobile dropdown toggle buttons */
.mobile-dropdown-toggle {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
  user-select: none !important;
}

.mobile-dropdown-toggle:active {
  transform: scale(0.98) !important;
}

/* Mobile dropdown icon rotation when open */
.mobile-dropdown-toggle[aria-expanded="true"] .mobile-dropdown-icon,
.mobile-dropdown-toggle[data-collapse-toggle][aria-expanded="true"] .mobile-dropdown-icon {
  transform: rotate(180deg) !important;
}

/* Mobile dropdown menu animations */
.mobile-dropdown-menu {
  transition: all 0.3s ease-in-out !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

.mobile-dropdown-menu:not(.hidden) {
  max-height: 500px !important;
  animation: slideDown 0.3s ease-in-out !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

/* Better spacing for mobile menu items */
#drawer-navigation li {
  margin-bottom: 0.25rem !important;
}

#drawer-navigation a,
#drawer-navigation button {
  min-height: 3rem !important; /* Touch-friendly size */
  display: flex !important;
  align-items: center !important;
}

/* Active state for mobile menu items */
#drawer-navigation a:active,
#drawer-navigation button:active {
  background-color: #e5e7eb !important; /* gray-200 */
  transform: scale(0.98) !important;
}

/* Improved hover states for mobile */
@media (hover: hover) {
  #drawer-navigation a:hover,
  #drawer-navigation button:hover {
    background-color: #f3f4f6 !important; /* gray-100 */
  }
}

/* Border accent for dropdown items */
.mobile-dropdown-menu {
  border-left-color: #10B981 !important; /* primary-green */
  margin-left: 0.5rem !important;
}

/* Better visual hierarchy */
.mobile-dropdown-menu a {
  font-size: 0.9375rem !important; /* Slightly smaller than parent */
  font-weight: 500 !important;
}

.mobile-dropdown-toggle {
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* Smooth transitions for all mobile menu interactions */
#drawer-navigation * {
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}