:root {
  --blue-50: #f8fafc;
  --blue-100: #f1f5f9;
  --blue-200: #cbd5e1;
  --blue-300: #bfdbfe;
  --blue-400: #76A9FA;
  --blue-500: #2563eb;
  --blue-600: #1d4ed8;
  --blue-700: #1e40af;
  --blue-800: #1e3a8a;
  --blue-900: #1e293b;
  --blue-950: #020617;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --dark-50: #f8fafc;
  --dark-100: #f1f5f9;
  --dark-200: #e2e8f0;
  --dark-300: #cbd5e1;
  --dark-400: #94a3b8;
  --dark-500: #64748b;
  --dark-600: #475569;
  --dark-700: #334155;
  --dark-800: #1e293b;
  --dark-900: #0f172a;
  --dark-950: #020617;
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-bg-hover: rgba(255, 255, 255, 0.4);
  --glass-bg-active: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-backdrop: rgba(255, 255, 255, 0.15);
  --glass-blur: 16px;
  --glass-glow: 0 0 20px rgba(14, 165, 233, 0.2);
  --logo-path: url('https://ayokebandung.id/assets/images/logo-d.png');
  --bg-html: #fff;
  --bg-white: #fff;
  --bg-light: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 50%, #e0f2fe 100%);
  --bg-dark: linear-gradient(135deg, #020617 0%, #030712 50%, #0f172a 100%);
  --misty-soft: radial-gradient(circle at 20% 80%, rgba(230, 246, 255, 0.4) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%,
  rgba(236, 254, 255, 0.3) 0%, transparent 50%), linear-gradient(135deg, #fdfdfd 0%, #f5f7fa 50%, #fefefe 100%);
   --text-primary: #020617;
   --text-secondary: #172554;
   --text-muted: #334155;
  --bg-primary: linear-gradient(
  135deg,
  var(--blue-50) 0%,
  var(--blue-100) 50%,
  #e0f2fe 100%
  );
  --font-primary: "Inter", sans-serif;
  --font-secondary:
  "graphikbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 10rem;
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
}
[data-dark] {
  /* Inverted */
  --blue-950: #eff6ff;
  --blue-900: #ecfeff;
  --blue-800: #cffafe;
  --blue-700: #bfdbfe;
  --blue-600: #76A9FA;
  --blue-500: #2563eb;
  --blue-400: #1d4ed8;
  --blue-300: #172554;
  --blue-200: #111827;
  --blue-100: #0f172a;
  --blue-50: #020617;
  --orange-500: #c2410c;
  --orange-600: #ea580c;
  --orange-700: #f97316;
  --glass-bg: rgba(51, 65, 85, 0.4);
  --glass-bg-hover: rgba(71, 85, 105, 0.4);
  --glass-bg-active: rgba(71, 85, 105, 0.4);
  --glass-border: rgba(100, 116, 139, 0.2);
  --glass-shadow: 0 4px 19px rgba(51, 65, 85, 0.09);
  --glass-backdrop: rgba(0,0,0, 0.15);
  --logo-path: url('https://ayokebandung.id/assets/images/logo.png');
  --bg-html: #1e293b;
  --bg-white: #222;
  --bg-light: linear-gradient(135deg, #020617 0%, #030712 50%, #0f172a 100%);
  --misty-soft: #1e293b;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #cbd5e1;
  --bg-primary: linear-gradient(90deg, #0f172a 0%, #020617 100%);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-html);
  height: 100%; 
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  color: var(--blue-900);
  background: var(--misty-soft);
  min-height: 100vh;
  height: 100%;        
  overflow-x: hidden;
  background-attachment: fixed;
  padding: 0;
  position: relative;
  margin: 0;             
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: inherit;
  z-index: -1;
}
.text-muted {
 color: var(--text-muted) !important;
 opacity: 0.85 !important;
}
p {
  color: var(--blue-900);
  opacity: 0.95;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.h1,
.h2,
.h3,
h1,
h2,
h3 {
  font-family: var(--font-secondary);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  background: linear-gradient(135deg, #1e40af, #2563eb);
      -webkit-background-clip: text; 
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
}
.h4,
.h5,
.h6,
h4,
h5,
h6 {
  color: var(--text-secondary);
  opacity: 0.9;
  text-transform: uppercase;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  margin-bottom: 2.5rem;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

@font-face {
  font-family: "graphikbold";
  src:
  url("../fonts/graphik-700-webfont.woff2") format("woff2"),
  url("../fonts/graphik-700-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "graphikmedium";
  src:
  url("../fonts/graphik-400-webfont.woff2") format("woff2"),
  url("../fonts/graphik-400-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "oxygen";
  src:
  url("../fonts/oxygen-400-webfont.woff2") format("woff2"),
  url("../fonts/oxygen-400-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.fs-1 { font-size: clamp(4.236rem, 9vw, 7.029rem); letter-spacing: -0.02em; }
.fs-2 { font-size: clamp(2.618rem, 6vw, 4.343rem);letter-spacing: -0.01em; }
.fs-3 { font-size: clamp(2.027rem, 4.5vw, 3.363rem); }
.fs-4 { font-size: clamp(1.618rem, 3.5vw, 2.618rem); }
.fs-5 { font-size: clamp(1.250rem, 2.75vw, 2.027rem); }
.fs-6 { font-size: clamp(1.000rem, 2vw, 1.618rem); }

.text-primary {
  background: linear-gradient(155deg,
        #1e3a8a 0%, 
        #1e40af 15%, 
        #1d4ed8 40%,   
        #1e40af 65%,   
        #1e3a8a 100% 
        );
      -webkit-background-clip: text; 
      background-clip: text;
      -webkit-text-fill-color: transparent;
}
.text-accent {
  background: linear-gradient(155deg,
        var(--orange-700) 0%,
        var(--orange-600) 15%,
        var(--orange-500) 40%, 
        var(--orange-600) 65%,
        var(--orange-700) 100% 
      );
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
}
.text-hero {
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2.1rem;
  background: linear-gradient(155deg,
        #1d4ed8 0%, 
        #2563eb 15%, 
        #1d4ed8 40%,   
        #2563eb 65%,   
        #1d4ed8 100% 
        );
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: clamp(2.5rem, 5vw, 4rem);
}
.text-title {
  color: var(--text-secondary) !important;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 2.5rem;
}
.text-subtitle {
  color: var(--blue-900) !important;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
      opacity: 0.95;
      margin-bottom: 1.6rem;
      max-width: 700px;
}
.text-highlight {
  color: var(--orange-500) !important;
  font-weight: 600;
}
.font-bold {
  font-weight: 700 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.bg-gray {
 background: rgba(127, 127,127, 0.15);
 color: var(--blue-900);
}
.bg-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
      background: linear-gradient(55deg, #1d4ed8, #1e40af);
      color: white;
      padding: 0.75rem 1.5rem; border-radius: 16px;
      font-weight: 600;
      margin: 1.5rem;
      border: 1px solid #2563eb;
    }
.bg-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
      background: linear-gradient(155deg, var(--orange-500), var(--orange-600));
      color: white;
      padding: 0.75rem 1.5rem; border-radius: 16px;
      font-weight: 600;
      margin: 1.5rem;
      border: 1px solid var(--orange-500);
    }

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow:
  0 8px 32px rgba(0, 0, 0, 0.12),
  inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--blue-900);
}
.glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.6),
  transparent
  );
}
.glass::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.4),
  transparent
  );
}
.glass-hover:hover {
  background: var(--glass-bg-hover) !important;
  transform: translateY(-4px);
  box-shadow:
  0 25px 50px -12px rgba(0, 0, 0, 0.15),
  inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.glass-glow {
  box-shadow:
  var(--glass-shadow),
  var(--glass-glow),
  inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow:
  var(--glass-shadow),
  inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-2xl);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--blue-900);
}
.card-glass:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-8px);
  box-shadow:
  0 25px 50px -12px rgba(0, 0, 0, 0.15),
  inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.card-glass:hover h4,
.card-glass:hover h5,
.card-glass:hover h6,
.card-glass:hover a.h5 {
  color: var(--blue-500) !important;
  transition: color 0.3s ease-in-out;
}
.glass-hover:hover h4,
.glass-hover:hover h5,
.glass-hover:hover h6, 
.glass-hover:hover a.h5 {
  color: var(--blue-500) !important;
  transition: color 0.3s ease-in-out;
}
.card-img-top {
 height: 200px;
 object-fit: cover;
 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 transform-origin: center center;
    }
.glass-hover:hover .card-img-top {
 transform: scale(1.08);  
 filter: brightness(1.1) contrast(1.1);
    }
.card-glass:hover .card-img-top {
 transform: scale(1.08);  
 filter: brightness(1.1) contrast(1.1);
    }
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1.2rem
1.7rem;border:1px solid
transparent;border-radius:16px;font-size:.95rem;font-weight:700;line-height:1.5;text-decoration:none;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all
.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;min-height:2.5rem;text-transform: uppercase;}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-100%);transition:transform
.6s}
.btn:hover::before{transform:translateX(100%)}
.btn:active{transform:scale(.98)}
.btn-sm{padding:.7rem 1.4rem;font-size:.875rem;border-radius:.5rem;min-height:2.25rem}
.btn-lg{padding:1rem 2rem;font-size:1.125rem;border-radius:1rem;min-height:3rem}
.btn-primary{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;font-weight:
700;text-transform: uppercase;box-shadow:0
4px 14px 0 rgba(59,130,246,.08);border-color:rgba(59,130,246,.2)}
.btn-primary:hover{background:linear-gradient(135deg,var(--blue-600),var(--blue-700));color:white;box-shadow:0
8px 25px 0 rgba(59,130,246,.1),0 0 0 1px
rgba(59,130,246,.3);transform:translateY(-1px)}
.btn-accent {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
  border-color: rgba(245, 158, 11, 0.2);
  box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.1);
  color: white;
}
.btn-accent:hover {
  background: linear-gradient(135deg, var(--orange-600), var(--orange-700));
  box-shadow:
  0 8px 25px 0 rgba(245, 158, 11, 0.4),
  0 0 20px rgba(245, 158, 11, 0.3);
  transform: translateY(-1px);
  color: white;
}
.btn-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  color: #1e293b;
  box-shadow: var(--glass-shadow);
}
.btn-glass:hover {
  background: var(--glass-bg-hover);
  color: #1e293b;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.btn-outline-primary {
  color: var(--blue-900);
  border-color: rgba(14, 165, 233, 0.1);
  background: rgba(14, 165, 233, 0.1);
  backdrop-filter: var(--glass-blur);
}
.btn-outline-primary:hover {
  background: var(--blue-500);
  color: white;
  border-color: var(--blue-700);
}
.btn-outline-accent {
  color: var(--blue-900);
  border-color: var(--orange-500);
  background: rgba(245, 158, 11, 0.1);
  backdrop-filter: var(--glass-blur);
}
.btn-outline-accent:hover {
  background: var(--orange-600);
  color: white;
  border-color: var(--orange-600);
}
.p-0 {
  padding: var(--space-0) !important;
}
.p-1 {
  padding: var(--space-1) !important;
}
.p-2 {
  padding: var(--space-2) !important;
}
.p-3 {
  padding: var(--space-3) !important;
}
.p-4 {
  padding: var(--space-4) !important;
}
.p-5 {
  padding: var(--space-5) !important;
}
.p-6 {
  padding: var(--space-8) !important;
}
.px-1 {
  padding-left: var(--space-1) !important;
  padding-right: var(--space-1) !important;
}
.px-2 {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}
.px-3 {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}
.px-4 {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}
.px-5 {
  padding-left: var(--space-5) !important;
  padding-right: var(--space-5) !important;
}
.px-6 {
  padding-left: var(--space-8) !important;
  padding-right: var(--space-8) !important;
}
.py-1 {
  padding-top: var(--space-1) !important;
  padding-bottom: var(--space-1) !important;
}
.py-2 {
  padding-top: var(--space-2) !important;
  padding-bottom: var(--space-2) !important;
}
.py-3 {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}
.py-4 {
  padding-top: var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
}
.py-5 {
  padding-top: var(--space-5) !important;
  padding-bottom: var(--space-5) !important;
}
.py-6 {
  padding-top: var(--space-8) !important;
  padding-bottom: var(--space-8) !important;
}
.py-10 {
  padding-top: var(--space-16) !important;
  padding-bottom: var(--space-16) !important;
}
.my-10 {
  margin-top: var(--space-16) !important;
  margin-bottom: var(--space-16) !important;
}
.m-0 {
  margin: var(--space-0) !important;
}
.m-1 {
  margin: var(--space-1) !important;
}
.m-2 {
  margin: var(--space-2) !important;
}
.m-3 {
  margin: var(--space-3) !important;
}
.m-4 {
  margin: var(--space-4) !important;
}
.m-5 {
  margin: var(--space-5) !important;
}
.m-6 {
  margin: var(--space-8) !important;
}
.mt-1 {
  margin-top: var(--space-1) !important;
}
.mt-2 {
  margin-top: var(--space-2) !important;
}
.mt-3 {
  margin-top: var(--space-3) !important;
}
.mt-4 {
  margin-top: var(--space-4) !important;
}
.mt-5 {
  margin-top: var(--space-5) !important;
}
.mt-6 {
  margin-top: var(--space-8) !important;
}
.mr-1 {
  margin-right: var(--space-1) !important;
}
.mr-2 {
  margin-right: var(--space-2) !important;
}
.mr-3 {
  margin-right: var(--space-3) !important;
}
.mr-4 {
  margin-right: var(--space-4) !important;
}
.mb-0 {
  margin-bottom: var(--space-0) !important;
}
.mb-1 {
  margin-bottom: var(--space-1) !important;
}
.mb-2 {
  margin-bottom: var(--space-2) !important;
}
.mb-3 {
  margin-bottom: var(--space-3) !important;
}
.mb-4 {
  margin-bottom: var(--space-4) !important;
}
.mb-5 {
  margin-bottom: var(--space-5) !important;
}
.mb-6 {
  margin-bottom: var(--space-8) !important;
}
.ml-1 {
  margin-left: var(--space-1) !important;
}
.ml-2 {
  margin-left: var(--space-2) !important;
}
.ml-3 {
  margin-left: var(--space-3) !important;
}
.ml-4 {
  margin-left: var(--space-4) !important;
}
.ms-2 {
  margin-left: var(--space-2) !important;
}
.ms-auto {
  margin-left: auto !important;
}
.me-2 {
  margin-right: var(--space-2) !important;
}
.block {
  display: block !important;
}
.flex {
  display: flex !important;
}
.grid {
  display: grid !important;
}
.inline-flex {
  display: inline-flex !important;
}
.hidden {
  display: none !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-row {
  flex-direction: row !important;
}
.items-start {
  align-items: flex-start !important;
}
.items-end {
  align-items: flex-end !important;
}
.items-center {
  align-items: center !important;
}
.justify-start {
  justify-content: flex-start !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.flex-1 {
  flex: 1 1 0% !important;
}
.flex-grow {
  flex-grow: 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.gap-0 {
  gap: var(--space-0) !important;
}
.gap-1 {
  gap: var(--space-1) !important;
}
.gap-2 {
  gap: var(--space-2) !important;
}
.gap-3 {
  gap: var(--space-3) !important;
}
.gap-4 {
  gap: var(--space-4) !important;
}
.w-full {
  width: 100% !important;
}
.h-full,
.h-100 {
  height: 100% !important;
}
.min-vh-100 {
  min-height: calc(100vh - var(--navbar-height)) !important;
}
.w-1 {
  width: var(--space-4) !important;
}
.w-2 {
  width: var(--space-8) !important;
}
.h-12 {
  height: 3rem !important;
}
.max-w-sm {
  max-width: 24rem !important;
}
.rounded-none {
  border-radius: var(--radius-none) !important;
}
.rounded-sm {
  border-radius: var(--radius-sm) !important;
}
.rounded {
  border-radius: var(--radius) !important;
}
.rounded-md {
  border-radius: var(--radius-md) !important;
}
.rounded-lg {
  border-radius: var(--radius-lg) !important;
}
.rounded-xl {
  border-radius: var(--radius-xl) !important;
}
.rounded-2xl {
  border-radius: var(--radius-2xl) !important;
}
.rounded-3xl {
  border-radius: var(--radius-3xl) !important;
}
.rounded-full {
  border-radius: var(--radius-full) !important;
}
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.shadow {
  box-shadow:
  0 1px 3px 0 rgba(0, 0, 0, 0.1),
  0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}
.shadow-md {
  box-shadow:
  0 4px 6px -1px rgba(0, 0, 0, 0.1),
  0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.shadow-lg {
  box-shadow:
  0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}
.relative {
  position: relative !important;
}
.absolute {
  position: absolute !important;
}
.fixed {
  position: fixed !important;
}
.text-center {
  text-align: center !important;
}
.text-start {
  text-align: left !important;
}
.text-end {
  text-align: right !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.z-10 {
  z-index: 10 !important;
}
.z-20 {
  z-index: 20 !important;
}
.z-50 {
  z-index: 50 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-75 {
  opacity: 0.75 !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.navbar {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.navbar-brand {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1.5rem;
  color: #0f172a;
}
.card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-2xl);
  color: #1e293b;
}
.card-header,
.card-footer {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border) !important;
  color: #1e293b !important;
}
.modal-content {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: var(--radius-2xl) !important;
  color: #1e293b !important;
}
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}
.dropdown-item {
  border-radius: var(--radius-md);
  margin: var(--space-1);
  color: #475569;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--glass-bg-hover);
  color: var(--blue-600);
}
.alert {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  color: #1e293b;
}
.alert-primary {
  border-left: 4px solid var(--blue-500);
}
.alert-success {
  border-left: 4px solid #10b981;
}
.alert-warning {
  border-left: 4px solid var(--orange-500);
}
.alert-danger {
  border-left: 4px solid #ef4444;
}
.badge {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.75rem;
  padding: var(--space-2) var(--space-3);
}
.badge-primary {
  background: rgba(14, 165, 233, 0.2);
  color: var(--blue-600);
}
.badge-accent {
  background: rgba(245, 158, 11, 0.2);
  color: var(--orange-500);
}
.progress {
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  height: 0.75rem;
}
.progress-bar {
  background: linear-gradient(
  90deg,
  var(--blue-500),
  var(--orange-500)
  );
  border-radius: var(--radius-xl);
}
.main-content {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background: transparent;
}
.spacer {
 display: block;
 height: 2.5rem;
 width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
@media (max-width: 768px) {
  .fs-1 {
    font-size: 2rem !important;
  }
  .fs-2 {
    font-size: 1.75rem !important;
  }
}
@media (max-width: 576px) {
  .btn {
    padding: var(--space-2) var(--space-4) !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
.float-animation {
  animation: float 6s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: var(--glass-shadow);
  }
  50% {
    box-shadow:
    var(--glass-shadow),
    0 0 30px rgba(245, 158, 11, 0.3);
  }
}
.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}
::selection {
  background: var(--blue-700);
  color: white;
}
::-moz-selection {
  background: var(--blue-700);
  color: white;
}
.card, .card-glass, .glass, .glass-hover, footer, .hero-land-content, #registernewsletter {
 user-select: none;
 -webkit-user-select: none;
}
@media print {
  .glass,
  .card-glass,
  .btn-glass,
  .navbar,
  .form-control,
  .card {
    background: white;
    border: 1px solid #ddd;
    box-shadow: none;
    backdrop-filter: none;
    color: black;
  }
}

/* 
Heading/title auto style h1 + fs-1
Subtitle use => class text-subtitle no need fs
Paragraf/excerpt/content => P 
Button => btn btn-primary
Background neutral => bg-gray

more exclusive style :
btn-accent
btn-outline-primary
bg-accent (gradient)
bg-primary (gradient)
text-accent (gradient)
text-primary (gradient)
*/