/* ==========================================================================
   DESIGN SYSTEM CUSTOM PROPERTIES (Variables)
   ========================================================================== */
:root {

  --primary-gradient: linear-gradient(135deg, #0f172a, #1e1b4b);
  --cta-gradient: linear-gradient(135deg, #06b6d4, #3b82f6);
  --accent-color: #f59e0b;
  --secondary-dark: #0f172a;
  --surface-bg: #f8fafc;
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --elegant-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);


  /* Fonts mapping to Bootstrap variables */
  --bs-body-font-family: "Inter", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  ;

  /* Border Radii */
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  --spacing: .25rem;

  /* Light Theme OKLCH Tokens */
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.04 265);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.04 265);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.04 265);

  --primary: oklch(0.55 0.22 264);
  /* #2563EB */
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.22 0.04 265);
  /* #0F172A */
  --secondary-foreground: oklch(0.99 0 0);

  --muted: oklch(0.97 0.01 255);
  --muted-foreground: oklch(0.5 0.03 257);
  --accent: oklch(0.7 0.17 162);
  /* #10B981 */
  --accent-foreground: oklch(0.99 0 0);
  --cta: oklch(0.72 0.18 45);
  /* #F97316 */
  --cta-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);

  --border: oklch(0.92 0.01 255);
  --input: oklch(0.92 0.01 255);
  --ring: oklch(0.55 0.22 264);
  --surface: oklch(0.985 0.005 250);

  /* Overriding Bootstrap 5 Native Variables with your tokens */
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-border-color: var(--border);

  /* Gradients & Special Properties */
  --gradient-hero: linear-gradient(135deg, oklch(55% .22 264) 0%, oklch(45% .2 270) 50%, oklch(22% .04 265) 100%);
  --gradient-accent: linear-gradient(135deg, oklch(0.55 0.22 264), oklch(0.7 0.17 162));
  --gradient-cta: linear-gradient(135deg, oklch(0.74 0.19 50), oklch(0.68 0.2 35));
  --shadow-elegant: 0 20px 50px -20px oklch(0.55 0.22 264 / 0.35);
  --shadow-glow: 0 0 60px oklch(0.7 0.17 162 / 0.35);
  --shadow-card: 0 10px 30px -15px oklch(0.22 0.04 265 / 0.15);

  /* Chart Variables */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  
}

/* Dark Mode Overrides (Triggered by Bootstrap's [data-bs-theme="dark"]) */
[data-bs-theme="dark"] {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);

  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
}


.size-\(--cell-size\) {
  width: var(--cell-size);
  height: var(--cell-size)
}

.size-3 {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3)
}

.size-3\.5 {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5)
}

.size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4)
}

.size-5 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5)
}

.size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6)
}

.size-8 {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8)
}

.size-9 {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9)
}

.size-10 {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10)
}

.size-12 {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12)
}

.text-accent {
    color: var(--accent);
}
/* ==========================================================================
   BASE STYLES
   ========================================================================== */
body {
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  font-family: var(--bs-body-font-family);
}

h1,
h2,
h3,
h4,
.display-font {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ==========================================================================
   UTILITY CLASSES (Converted from Tailwind Utilities)
   ========================================================================== */
.animate-fade-up {
  animation: fade-up 0.7s ease-out both;
}

.animate-float {
  animation: float-slow 6s ease-in-out infinite;
}

.glass-card {
  background: color-mix(in oklab, white 70%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-2xl);
}

.glass-dark {
  background: color-mix(in oklab, white 10%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in oklab, white 18%, transparent);
}
.plantitle{
    font-size: 1.25rem;
}
.bg-gradient-cta {
  background: var(--gradient-cta);
  color: white;
}
.text-secondary {
    color: var(--secondary) !important;
}
.bg-gradient-accent {
  background: var(--gradient-accent);
}

.text-gradient {
  background: linear-gradient(135deg, oklch(0.7 0.17 162), oklch(0.55 0.22 264));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}


/* Gradient & Glass Utilities */
.bg-gradient-hero {
  background: var(--gradient-hero);
  position: relative;
}

.bg-gradient-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
  background: radial-gradient(circle at 20% 30%, rgba(110, 231, 183, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(147, 51, 234, 0.25) 0%, transparent 45%);
}

.text-gradient {
  background: linear-gradient(135deg,color(xyz 0.206 0.374 0.255),color(xyz 0.198 0.312 0.382),color(xyz 0.196 0.255 0.52) 50%,#2b62ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass-dark {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.glass-card {
  -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-card);
    background: #ffffffb3;
    border: 1px solid oklab(100% 0 5.96046e-8 / .6);
}

/* Buttons & Interactions */
.btn-custom {
  padding: 0.85rem 2rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  text-decoration: none;
}
.container {
  max-width: 1400px;
}
.btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(6, 182, 212, 0.3);
}
.whiteL{
  color: #ffffffc7;
}
.btn-custom:active {
  transform: translateY(0);
}
.bluePr {
  color: var(--primary);
}

.bgLight{
    background-color: #eaeffd;
}
.grnLight{
    background-color: #e6f8f2;
}
.btn-accent-custom {
  background-color: var(--accent);
  color: white!important;
}

.btn-accent-custom:hover {
  filter: brightness(1.1);
  box-shadow: var(--elegant-shadow);
}

/* Component Cards & Sections */
.bg-surface {
  background-color: var(--surface-bg);
}


.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px;
}

.title_badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px;
  background: #edf2fc !important;
  border: 1px solid oklch(0.55 0.22 264 / 0.35) !important;
}

.title_badge svg {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
}

.course-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  position: relative;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--elegant-shadow);
}

.course-tag {
  position: absolute;
  top: -12px;
  right: 24px;
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  color: #fff;
}

.icon-box {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#testimonials .glass-card, #trainer .glass-card{
      --tw-duration: .3s;
    transition-duration: .3s;
}
#testimonials .glass-card:hover, #trainer .glass-card:hover {
    transform: translateY(-4px);
}
#testimonials p.text-secondary{
color: var(--secondary) !important;
}
#testimonials .bg-success-subtle {
    background-color: oklch(0.7 0.17 162 / 0.15) !important;
}
.bg-secondary{
  background: var(--secondary) !important;
}
.text-success{
  color: var(--accent) !important;
}
.bg-accent{
  background-color: var(--accent);
}
.icon-box.bg-secondary{
    background-color: #e7e8ea !important;
}
.glass-card .alert-warning {
    background-color: #fcf0e9;
    border: 1px solid #fd894b7d !important;
}
#audience .badge{
  transition-delay: 0.1s;
  background-color: #FFF;
      font-size: 14px;
}
#audience .badge:hover{
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.transition-all{
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-300{
      --tw-duration: .3s;
    transition-duration: .3s;
}
.glass-card.transition-all:hover{
    box-shadow: -2px 8px 11px 8px oklch(0.69 0.13 172.23 / 0.2);
        transform: translateY(-4px);
}
.glass-card.transition-all .icon-box {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-card.transition-all:hover .icon-box {
  transform: scale(1.1);
}
 #courses span.badge.bg-white.text-dark.border.fw-normal.me-1 {
    border-radius: 60px;
  }
/* Animations simulation */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

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

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}


@media (max-width: 1400px){

  .container {
    max-width: 1280px;
  }

}
@media (max-width: 580px){

  #top .col-lg-7 .d-flex.flex-wrap.gap-4.text-white-50.small {
      width: 100%;
      flex-direction: column;
      gap: 1rem !important;
  }
  #top .col-lg-7 .d-flex.flex-wrap.gap-3.mb-5 {
    margin-bottom: 2rem !important;
  }
  .bg-surface .container.col-md-9.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .bg-surface .bg-gradient-hero.rounded-5.text-white.p-4.p-md-5.position-relative.overflow-hidden {
    padding: 2.5rem 1.8rem !important;
  }
  section.py-5.bg-gradient-hero.text-white.text-center.position-relative.overflow-hidden {
    padding: 0rem 0 !important;
  }
  section#top {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }
 

}