/*===============================================================
  Color Variables & Utility Classes
================================================================*/

/* Define the color palette */
:root {
  --color-yellow: #f7cd46;       /* Main yellow (accent) */
  --color-yellow-pale: #fff9e6;  /* Pale yellow for backgrounds */
  --color-teal: #5ac3b0;
  --color-red: #de5935;
  --color-dark: #333;
  --color-light: #fff;
  --color-gray: #e1e1e1;
}

/* Utility classes for text colors */
.text-yellow      { color: var(--color-yellow) !important; }
.text-yellow-pale { color: var(--color-yellow-pale) !important; }
.text-teal        { color: var(--color-teal) !important; }
.text-red         { color: var(--color-red) !important; }
.text-dark        { color: var(--color-dark) !important; }
.text-light       { color: var(--color-light) !important; }

/* Utility classes for background colors */
.bg-yellow      { background-color: var(--color-yellow) !important; }
.bg-yellow-pale { background-color: var(--color-yellow-pale) !important; }
.bg-teal        { background-color: var(--color-teal) !important; }
.bg-red         { background-color: var(--color-red) !important; }
.bg-dark        { background-color: var(--color-dark) !important; }
.bg-light       { background-color: var(--color-light) !important; }

/* Utility classes for border colors */
.border-yellow      { border-color: var(--color-yellow) !important; }
.border-yellow-pale { border-color: var(--color-yellow-pale) !important; }
.border-teal        { border-color: var(--color-teal) !important; }
.border-red         { border-color: var(--color-red) !important; }
.border-dark        { border-color: var(--color-dark) !important; }
.border-gray        { border-color: var(--color-gray) !important; }

/*===============================================================
  Base & Reset Styles
================================================================*/

@font-face {
  font-family: 'Rubik'; 
  src: url('/fonts/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; 
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend Deca';
  src: url('/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Rubik, sans-serif;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between logo and text */
}

.logo-text {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600; /* Medium-bold weight */
  font-size: 18px;
  position: relative;
  top: -3px;
}

.logo-svg {
  height: 25px;
  width: auto;
}

.logo-svg svg {
  height: 100%; /* Make SVG respect the container height */
  width: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Prevent overflow */
  display: block; /* Remove extra space */
  position: relative;
  top: -2px;
}

.logo-svg path,
.logo-svg rect,
.logo-svg circle,
.logo-svg polygon {
  fill: oklch(0.546 0.245 262.881);
}

html body .hs-form-frame {
  margin: 0 auto;
  max-width: 880px;
  height: 305px !important;
}

/*===============================================================
  Header & Navigation
================================================================*/