/* ==========================================================================
   Soundsgood / Dazzle Creations — Global Design System
   ========================================================================== */


/* ==========================================================================
   1. CSS Reset
   ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   1.5 Local Fonts
   ========================================================================== */

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterDisplay-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   2. Root Variables
   ========================================================================== */

:root {
  /* --- Colors: Brand (Sounds Good) --- */
  --color-primary: #3B3CB4;
  --color-primary-hover: #2F30A0;
  --color-primary-light: #E8E8F8;
  --color-primary-alpha-10: #3B3CB41A;
  --color-primary-alpha-06: #3B3CB40F;

  --color-secondary: #2C2D88;
  --color-secondary-alpha-06: #2C2D880F;

  --color-accent: #32B95B;
  --color-accent-dark: #009C43;

  /* --- Colors: Neutrals --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark: #000000;
  --color-dark-blue: #073345;

  --color-gray-50: #F6F6F6;
  --color-gray-100: #F6F6F6;
  --color-gray-200: #d3d3d3;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #ADAEBC;
  --color-gray-500: #6C696E;
  --color-gray-600: #676767;
  --color-gray-700: #374151;

  --color-text: #000000;
  --color-text-muted: #00000099;
  --color-text-secondary: #676767;
  --color-text-tertiary: #6C696E;
  --color-text-inverse: #ffffff;

  --color-bg: #ffffff;
  --color-bg-pale: #F6F6F6;
  --color-bg-overlay: rgba(0, 0, 0, 0.65);
  --color-bg-glass: #ffffff1a;
  --color-bg-glass-hover: #ffffff26;

  --color-border: #d3d3d3;
  --color-border-light: #D1D5DB;
  --color-border-dotted: #ffffff;

  /* --- Gradients --- */
  --gradient-brand: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  --gradient-brand-alt: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
  --gradient-text-light: linear-gradient(90deg, #FFFFFF, #FFFFFF33);
  --gradient-text-brand: linear-gradient(90deg, var(--color-secondary), var(--color-primary));

  /* --- Typography: Families --- */
  --font-family-base: "Inter", sans-serif;
  --font-family-heading: "Inter Display", sans-serif;

  /* --- Typography: Sizes --- */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 34px;
  --font-size-4xl: 76px;

  /* --- Typography: Weights --- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Typography: Line Heights --- */
  --line-height-tight: 1.2;
  --line-height-snug: 1.33;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* --- Typography: Letter Spacing --- */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* --- Spacing Scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 18px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 30px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 60px;
  --space-13: 80px;

  /* --- Border Radius --- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 40px;
  --radius-pill: 54px;
  --radius-full: 50%;

  /* --- Shadows --- */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.15);
  --shadow-focus-white: 0 0 8px rgba(255, 255, 255, 0.2);
  --shadow-none: none;

  /* --- Container Widths --- */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
  --container-fluid: 100%;

  /* --- Breakpoints (reference) --- */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* --- Z-index --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-navbar: 999;

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;
  --transition-spring: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* --- Opacity --- */
  --opacity-disabled: 0.5;
  --opacity-muted: 0.6;
  --opacity-hover: 0.85;

  /* --- Animation Duration --- */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* --- Backdrop Blur --- */
  --blur-sm: 20px;
  --blur-md: 30px;

  /* --- Legacy aliases (backward compatibility) --- */
  --primary-color: var(--color-primary);
  --primary-color-blur: var(--color-primary-alpha-10);
  --secomdary-color: var(--color-secondary);
  --para-light: var(--color-text-muted);
  --background-color-pale: var(--color-bg-pale);
  --background-color-white: var(--color-white);
  --default-transition: var(--transition-base);
}

/* ==========================================================================
   3. Base Styles
   ========================================================================== */
html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

p{
  font-family: 'Inter',sans-serif!important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  display: block;
}

svg {
  display: inline-block;
  vertical-align: middle;
}

video {
  max-width: 100%;
  height: auto;
}

button {
  font-family: var(--font-family-base);
  cursor: pointer;
}

input,
textarea,
select {
  font-family: var(--font-family-base);
}

label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

table {
  width: 100%;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

a {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  transition: color var(--transition-base);
}

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

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  font-family: var(--font-family-heading);
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

h1 span {
  color: var(--color-primary);
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  line-height: var(--line-height-tight);
}

h2 span {
  font-size: var(--font-size-xl);
  margin-right: var(--space-4);
  font-style: italic;
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2.alt {
  justify-content: flex-end;
}

h2.alt span {
  margin-right: 0;
  margin-left: var(--space-4);
}

h3 {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

h4 {
  font-size: var(--font-size-base);
  line-height: 33px;
  font-weight: var(--font-weight-medium);
}

h5 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

p {
  color: var(--color-text);
  margin-bottom: 0;
  line-height: var(--line-height-base);
}

/* ==========================================================================
   4. Typography Classes
   ========================================================================== */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-base { line-height: var(--line-height-base); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }

.text-uppercase { text-transform: uppercase; }
.text-italic { font-style: italic; }
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-dark { color: var(--color-dark); }
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-text-muted); }
.text-muted-secondary { color: var(--color-text-secondary); }
.text-muted-tertiary { color: var(--color-text-tertiary); }

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

.text-gradient-light,
.text_gradient {
  background: var(--gradient-text-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Legacy typography */
.para_light,
.text-muted-lg {
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
}

.font-16 { font-size: var(--font-size-base); }
.font-24 { font-size: var(--font-size-xl); }
.font-32 { font-size: var(--font-size-2xl); }


/* ==========================================================================
   5. Layout Classes
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }
.container-fluid { max-width: var(--container-fluid); }

.section {
  padding-block: var(--space-12);
}

.section-sm {
  padding-block: var(--space-10);
}

.section-lg {
  padding-block: var(--space-13);
}

.section-none {
  padding-block: 0;
}

/* Legacy section spacing */
.common_padding {
  padding: var(--space-12) 0;
}

.common_padding_alt {
  padding-top: 0;
}

.section_heading {
  padding-bottom: var(--space-4);
}

.section_heading h2 {
  margin-left: var(--space-8);
  display: flex;
  align-items: flex-start;
}


/* ==========================================================================
   6. Flex Utilities
   ========================================================================== */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }


/* ==========================================================================
   7. Grid Utilities
   ========================================================================== */

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }


/* ==========================================================================
   8. Width Utilities
   ========================================================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.max-w-full { max-width: 100%; }


/* ==========================================================================
   9. Height Utilities
   ========================================================================== */

.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }


/* ==========================================================================
   10. Spacing Utilities
   ========================================================================== */

.m-0 { margin: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mx-auto { margin-inline: auto; }

.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block: var(--space-4); }
.pt-0 { padding-top: 0; }
.pb-4 { padding-bottom: var(--space-4); }


/* ==========================================================================
   11. Border Utilities
   ========================================================================== */

.border { border: 1px solid var(--color-border); }
.border-0 { border: 0; }
.border-primary { border-color: var(--color-primary); }
.border-white { border-color: var(--color-white); }
.border-light { border-color: var(--color-border-light); }

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-xl); }
.rounded-xl { border-radius: var(--radius-2xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-full); }

/* Legacy radius */
.br-40 { border-radius: var(--radius-2xl); }
.rounded-24 { border-radius: var(--radius-xl); }


/* ==========================================================================
   12. Background Utilities
   ========================================================================== */

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-white { background-color: var(--color-white); }
.bg-pale,
.bg-secondary-pale { background-color: var(--color-bg-pale); }
.bg-dark { background-color: var(--color-dark); }
.bg-transparent { background-color: transparent; }
.bg-glass {
  background-color: var(--color-bg-glass);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}


/* ==========================================================================
   13. Text Utilities
   ========================================================================== */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
  word-break: break-word;
}


/* ==========================================================================
   14. Display Utilities
   ========================================================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }


/* ==========================================================================
   15. Position Utilities
   ========================================================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 {
  inset: 0;
}

.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-navbar { z-index: var(--z-navbar); }


/* ==========================================================================
   16. Overflow Utilities
   ========================================================================== */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-visible { overflow: visible; }


/* ==========================================================================
   17. Visibility Utilities
   ========================================================================== */

.visible { visibility: visible; }
.invisible { visibility: hidden; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   18. Shadow Utilities
   ========================================================================== */

.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }


/* ==========================================================================
   19. Button Base Classes
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: fit-content;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-white);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-white);
  --bs-btn-active-border-color: var(--color-primary);
  --bs-btn-disabled-color: var(--color-white);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
.btn.btn-primary:active {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: transparent;
}

.btn-secondary:hover {
  transform: scale(0.95);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-white {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.btn-white:hover {
  background-color: transparent;
  color: var(--color-white);
}

.btn-outline-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn-pill {
  border-radius: var(--radius-pill);
  padding: 16px 24px;
}

.btn-sm {
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-4);
}

.btn-lg {
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-7);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Legacy button aliases */
.btn_common,
.btn_element {
  text-decoration: none;
  background-color: var(--color-primary);
  color: var(--color-white);
  width: fit-content;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-regular);
  border: 1px solid var(--color-primary);
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.btn_element {
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
}

.btn_common:hover,
.btn_element:hover {
  background-color: transparent;
  color: var(--color-primary);
}

.btn_common.btn_common_alt {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border: 0;
}

.btn_common.btn_common_alt:hover {
  transform: scale(0.95);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.cta_btn {
  background-color: var(--color-white);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-white);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.cta_btn:hover {
  background-color: transparent;
  color: var(--color-white);
}

.submit_btn {
  padding: var(--space-3) var(--space-9);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.submit_btn:hover {
  color: var(--color-primary);
  background-color: transparent;
}


/* ==========================================================================
   20. Card Base Classes
   ========================================================================== */

.card {
  padding: var(--space-7);
  border-radius: var(--radius-2xl);
  background-color: var(--color-white);
}

.card-feature,
.common_card {
  padding: var(--space-7);
  border-radius: var(--radius-2xl);
  background-color: var(--color-white);
}

.card-blog {
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  overflow: hidden;
}

.card-testimonial {
  padding: var(--space-7);
  border-radius: var(--radius-2xl);
  background-color: var(--color-bg-pale);
}

.card-heading,
.card_heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.card-body,
.card_body p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
}

.card-footer,
.card_footer p {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.card_footer span {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.icon-container,
.icon_container {
  width: 3rem;
  height: 3rem;
  background-color: var(--color-primary-alpha-10);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  flex-shrink: 0;
}


/* ==========================================================================
   21. Form Base Classes
   ========================================================================== */

.form-group,
.form_field {
  position: relative;
  margin: var(--space-5) 0;
}

.form-label,
.form_label {
  position: absolute;
  left: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--font-size-base);
  color: var(--color-white);
  transform-origin: left center;
  transition:
    transform var(--transition-spring),
    color var(--transition-spring),
    font-size var(--transition-spring),
    opacity var(--transition-spring);
  opacity: var(--opacity-hover);
}

.form-input,
.form_input {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--font-size-base);
  background: var(--color-bg-glass);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border-radius: var(--radius-2xl);
  outline: none;
  box-sizing: border-box;
  border: 1px solid transparent;
  color: var(--color-white);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
  -webkit-appearance: none;
}

.form-input:focus,
.form_input:focus {
  border-color: var(--color-white);
  background: var(--color-bg-glass-hover);
  box-shadow: var(--shadow-focus-white);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label,
.form_input:focus + .form_label,
.form_input:not(:placeholder-shown) + .form_label {
  transform: translateY(-130%) scale(0.9);
  color: var(--color-white);
  font-size: 13px;
  opacity: 1;
}

.form_field.has_value .form_label {
  transform: translateY(-130%) scale(0.9);
  color: var(--color-white);
  font-size: 13px;
  opacity: 1;
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-7);
  font-size: var(--font-size-base);
  background-color: var(--color-secondary-alpha-06);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--color-text);
  transition:
    outline var(--transition-base),
    border-color var(--transition-base);
}

.form-control::placeholder {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

.form-control:focus {
  outline: 1px solid var(--color-primary);
  box-shadow: none;
}

.form-control-bordered {
  border: 1px solid var(--color-border-light);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}

.form-control-bordered:focus {
  outline: 1px solid var(--color-primary);
  box-shadow: none;
}

.form-label-static {
  position: static;
  transform: none;
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  display: block;
}

.form-btn,
.form_btn {
  background-color: var(--color-white);
  color: var(--color-primary);
  padding: var(--space-2);
  width: 100%;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-2xl);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.form-btn:hover,
.form_btn:hover {
  background-color: transparent;
  color: var(--color-white);
}

.form_submit_btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
}


/* ==========================================================================
   22. Animation Utilities
   ========================================================================== */

.transition {
  transition: all var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}

.hover-scale:hover {
  transform: scale(0.95);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.img-zoom {
  transition: transform var(--transition-base);
}

.img-zoom:hover {
  transform: scale(1.1);
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}


/* ==========================================================================
   23. Reusable Component Patterns
   ========================================================================== */

/* Navigation */
.nav-link {
  color: var(--color-dark);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-base);
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active {
  background-color: var(--color-primary);
  padding: var(--space-2);
  color: var(--color-white);
  border-radius: var(--radius-xl);
}

/* Badge / Tag / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  width: fit-content;
}

.badge-primary {
  background-color: var(--color-primary-alpha-10);
  color: var(--color-primary);
  border-color: transparent;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
}

/* Accordion */
.accordion-item {
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding: var(--space-4) 0;
}

.accordion-button {
  color: var(--color-dark);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  background-color: transparent;
}

.accordion-button:focus,
.accordion-button:not(.collapsed) {
  box-shadow: none;
  background-color: transparent;
}

.accordion-body p {
  color: var(--color-text-secondary);
}

/* CTA Section */
.cta-section {
  position: relative;
  min-height: 350px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cta-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
  position: absolute;
  z-index: 1;
  margin: auto;
  text-align: center;
  inset: 0;
}

.cta-content p {
  text-align: center;
  font-size: var(--font-size-2xl);
}

.cta-subheading {
  color: var(--color-white);
  font-size: var(--font-size-xl);
}

/* Footer */
.footer {
  background-color: var(--color-primary);
  padding: var(--space-10) 0;
}

.footer p,
.footer a {
  color: var(--color-white);
}

.footer a:hover {
  text-decoration: underline;
  color: var(--color-white);
}

.footer-copyright {
  background-color: var(--color-primary);
  border-top: 1px dotted var(--color-border-dotted);
}

.footer-copyright p {
  padding: var(--space-4) 0;
  text-align: center;
  color: var(--color-white);
  font-size: var(--font-size-base);
}

/* Service card link */
.service-card {
  text-decoration: none;
  color: var(--color-dark);
}

.service-card:hover h4 {
  color: var(--color-primary);
}

.service-img-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
}

.service-img-container img {
  transition: transform var(--transition-base);
}

.service-card:hover img {
  transform: scale(1.1);
}

.service-hover-overlay {
  position: absolute;
  inset: 0;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg-overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.service-img-container:hover .service-hover-overlay {
  opacity: 1;
}

.service-hover-overlay p {
  color: var(--color-white);
  font-size: var(--font-size-base);
}

/* Alert */
.alert {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}

.alert-primary {
  background-color: var(--color-primary-alpha-10);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

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

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  border: 1px solid var(--color-border);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.pagination-item:hover,
.pagination-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}


/* ==========================================================================
   24. Responsive Utilities
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --font-size-4xl: 32px;
    --font-size-3xl: 28px;
    --space-12: 40px;
  }
  

  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
    margin-left: 0;
    font-weight:600!important;
  }

  h3 {
    font-size: var(--font-size-xl);
  }

  h2.alt {
    justify-content: flex-start;
  }

  .font-32 {
    font-size: var(--font-size-xl);
  }

  .para_light,
  .text-muted-lg, {
    font-size: var(--font-size-lg);
  }
  
.testimonials-faq__question,.blog-faq__question {
    font-size:16px!important;
    font-weight:600!important;
    color:var(--color-text);
}

.single-article__content h2{
    font-weight:600!important;
}
  
  .section-desc,.journey-section p,.hl-understanding__copy p,.hl-signs__card-body p,.hl-intervention__copy p, .hl-ear__lead, .hl-ear__outro,.hl-causes__list li,.hl-challenges__header p,.ha-intro__panel p,.ha-benefits__intro p,.ha-generation__lead--mobile,.ha-features__lead,.ha-types__footer p,.ha-steps__mobile-intro,.ha-cta__copy p,.testimonials-intro__lead,.testimonials-card__quote p,.testimonials-videos__lead,.testimonials-faq__panel p,.about-bringing__intro p,.about-story__text,.contact-booking__lead,.contact-booking__clinic-copy p,.contact-booking__home-copy p,.contact-booking__clinic-copy p,.contact-booking__home-copy p,.contact-booking__clinic-copy p,.contact-booking__home-copy p,.blog-listing-hero__desc,.blog-listing-hero__desc,.blog-faq__question{
      color:var(--color-text)!important;
      font-size:16px!important;
  }
  
  
 .testimonials-faq__bullets,.ha-type-card p,.ha-faq__body,.ha-features__item p,.contact-branches__item{
      font-size:16px!important;
  }
  
  .hl-understanding__copy{
      gap:8px!important;
  }

  .common_padding,
  .section {
    padding-block: var(--space-12);
  }

  .btn_common {
    font-size: var(--font-size-base);
  }

  .accordion-button {
    font-size: var(--font-size-lg);
  }

  .cta-section {
    min-height: unset;
  }

  .cta-content {
    position: static;
    padding: var(--space-7) 0;
  }

  .cta-content p {
    font-size: var(--font-size-base);
  }

  .cta-subheading {
    font-size: var(--font-size-lg);
  }

  .pb-sm-2 {
    padding-bottom: var(--space-4);
  }

  .mobi_margin {
    margin-bottom: var(--space-6);
  }
}

@media (min-width: 768px) {
  .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
}