@charset "UTF-8";
/* ==========================================
   Global Design System Reset & Baseline
   Author: Clement Femi Bazuaye
   Github: https://github.com/dev-bazz
   LinkedIn: https://www.linkedin.com/in/devbazz/
   ========================================== */
/*
#:~:text=hello,you
  ::target-text {}
  */
/* -----------------------------
   1. Design Tokens
   ----------------------------- */
@layer tokens {
  :root {
    /* Fonts */
    --font-sans:
      system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
      sans-serif;
    --font-body: var(--averta, var(--font-sans));
    --font-heading: var(--averta, var(--font-sans));
    --color-bg: #fff;
    --color-fg: #111;
    --spacing: 1rem;
    --outline-size: 0.125rem;
    --outline-color: black;
    --outline-offset: 0.125rem;
    --selection-bg: #bf1d29;
    --selection-fg: #fff;
    --scroll-width: 4px;
    --scroll-track-color: transparent;
    --scroll-thumb-color: #bf1d29;
    --scroll-border-radius: 50px;
    --scroll-hover-color: oklch(from #bf1d29 clamp(0, l - 0.08, 1) calc(c * 0.92) h);
    --scroll-display: block;
    --drop-down-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.0002 6.66679C18.0002 6.88013 17.9185 7.09346 17.756 7.25596L11.0894 13.9226C10.7635 14.2485 10.2369 14.2485 9.91104 13.9226L3.24437 7.25596C2.91854 6.93013 2.91854 6.40346 3.24437 6.07763C3.57021 5.75179 4.09687 5.75179 4.42271 6.07763L10.5002 12.1551L16.5777 6.07763C16.9035 5.75179 17.4302 5.75179 17.756 6.07763C17.9185 6.24013 18.0002 6.45346 18.0002 6.66679Z' fill='%235F738C'/%3E%3C/svg%3E");
  }
}
/* -----------------------------
   2. Base Reset
   ----------------------------- */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  html {
    height: 100%;
    scroll-behavior: smooth;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  body {
    min-height: 100svh;
    line-height: 1.5;
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-fg);
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
  }
  a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  video,
  img {
    object-fit: cover;
  }
  ul,
  ol {
    list-style: none;
  }
  :is(button, input, select) {
    cursor: pointer;
  }
  button,
  input:not([type=checkbox], [type=radio]),
  textarea,
  select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  :is(select[data-select-placeholder]) {
    --placeholder-color: rgb(135, 135, 135);
  }
  :is(select[data-select-placeholder]:focus-within option:first-child) {
    display: none;
  }
  :is(select[data-select-placeholder]:invalid) {
    color: var(--placeholder-color);
  }
  :is(textarea:not([rows])) {
    min-height: 10em;
  }
  :is(label:has(input, textarea, select, div)) {
    display: grid;
    gap: 0.5rem;
    cursor: pointer;
  }
  textarea {
    resize: vertical;
    min-height: 10em;
    /* fallback */
    field-sizing: content;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem;
    border: 1px solid #ddd;
  }
  ::selection {
    background-color: var(--selection-bg);
    color: var(--selection-fg);
  }
  :focus-visible {
    outline: var(--outline-size) solid var(--outline-color);
    outline-offset: var(--outline-offset);
  }
}
@layer scrollStyle {
  div,
  body,
  section {
    scrollbar-width: var(--scroll-width);
    -ms-overflow-style: var(--scroll-display);
  }
  div::-webkit-scrollbar,
  body::-webkit-scrollbar,
  section::-webkit-scrollbar {
    display: var(--scroll-display);
  }
  div::-webkit-scrollbar,
  body::-webkit-scrollbar,
  section::-webkit-scrollbar {
    width: var(--scroll-width);
  }
  div::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  section::-webkit-scrollbar-track {
    background: var(--scroll-track-color);
  }
  div::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  section::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-color);
    border-radius: var(--scroll-border-radius);
  }
  div::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  section::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-hover-color);
  }
}
@layer experimental {
  select {
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    width: 100%;
  }
  select option:checked {
    font-weight: bold;
  }
  select option::checkmark {
    order: 1;
    margin-left: auto;
    content: "☑️";
  }
  option:first-of-type {
    border-radius: 8px 8px 0 0;
  }
  option:last-of-type {
    border-radius: 0 0 8px 8px;
  }
  option:not(option:last-of-type) {
    border-bottom: none;
  }
  option {
    background: #eeeeee;
    color: rgb(29, 26, 26);
  }
  option:hover {
    background: var(--red-cta);
    color: var(--white);
  }
  select {
    appearance: none;
  }
  /* Native fallback arrow for browsers without the Customizable Select API
     (Safari, Firefox). Chromium overrides this inside the @supports block below. */
  select:not([multiple]) {
    background-image: var(--drop-down-icon);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
  }
  /* `appearance: base-select` is parsed by Safari, so it cannot be used as the
     feature test. `::picker(select)` is only understood by Chromium. */
  @supports selector(::picker(select)) {
    select,
    ::picker(select) {
      appearance: base-select;
    }
    select:not([multiple]) {
      background-image: none;
      padding-right: 0;
    }
    select::picker-icon {
      color: #999999;
      transition: 0.4s rotate;
      transform-origin: center;
      content: var(--drop-down-icon);
    }
    select:open::picker-icon {
      rotate: 180deg;
    }
    ::picker(select) {
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s var(--ease-out-3, cubic-bezier(0.2, 0.8, 0.2, 1)), display 0.2s allow-discrete, overlay 0.2s allow-discrete;
      border: none;
    }
    ::picker(select):popover-open {
      opacity: 1;
    }
    /* Safari does not match :popover-open on ::picker(select) */
    select:open::picker(select) {
      opacity: 1;
    }
    @starting-style {
      ::picker(select):popover-open {
        opacity: 0;
      }
      select:open::picker(select) {
        opacity: 0;
      }
    }
    ::picker(select) {
      top: calc(anchor(bottom) + 0.5rem);
      left: anchor(0%);
    }
    select::-ms-expand {
      display: none;
    }
    /* transition the selected option changing */
    selectedcontent > * {
      transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), display 1s allow-discrete, opacity 1s;
      opacity: 1;
    }
    @starting-style {
      selectedcontent > * {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }
}
/* -----------------------------
   3. Typography
   ----------------------------- */
@layer typography {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }
  p,
  li,
  figcaption {
    max-width: 64ch;
    line-height: 1.6;
    text-wrap: pretty;
  }
}
/* -----------------------------
   4. Layout
   ----------------------------- */
@layer layout {
  footer,
  main,
  nav,
  aside,
  section,
  article {
    width: 100%;
    container-type: inline-size;
  }
  section {
    content-visibility: auto;
    contain-intrinsic-size: auto 43.75rem;
  }
  [data-container] {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--spacing);
  }
  [float-root] {
    display: flow-root;
  }
}
/* -----------------------------
   5. Components
   ----------------------------- */
/* Details */
@layer details {
  details > summary {
    cursor: pointer;
    list-style: none;
  }
  details > summary::marker,
  details > summary::-webkit-details-marker {
    display: none;
  }
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }
    ::details-content {
      --trans-duration: 0.5s;
      transition: all var(--trans-duration) cubic-bezier(0.2, 0.8, 0.2, 1), content-visibility var(--trans-duration) allow-discrete;
      height: 0;
      overflow: clip;
    }
    [open]::details-content {
      height: auto;
      padding-bottom: 0.5em;
    }
  }
}
/* Dialog */
@layer dialog-element {
  dialog {
    --background-color: rgba(64, 64, 64, 0.419);
    transition: display 1s allow-discrete, overlay 1s allow-discrete, scale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    scale: 0;
  }
  dialog[open] {
    transition: display 1s allow-discrete, overlay 1s allow-discrete, scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    scale: 1;
  }
  @starting-style {
    dialog[open] {
      scale: 0;
    }
  }
  dialog[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    dialog[open]::backdrop {
      opacity: 0;
    }
  }
  dialog::backdrop {
    background-color: var(--background-color);
    transition: opacity 1s;
    opacity: 0;
  }
}
/* -----------------------------
   6. Accessibility
   ----------------------------- */
@layer accessibility {
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  @media (prefers-contrast: more) {
    :focus-visible {
      outline-color: CanvasText;
    }
  }
}
/* -----------------------------
   7. Developer Ergonomics
   ----------------------------- */
@layer helpers {
  :root {
    --lighter-sample: oklch(from var(--base) clamp(0, l + 0.22, 1) calc(c * 0.9) h);
    --darker-sample: oklch(from var(--base) clamp(0, l - 0.22, 1) calc(c * 0.92) h);
    --complement-sample: hsl(from var(--base) calc(h - 180) s l);
    --opcacity-sample: oklch(from var(--base, red) 0.1778 288.37 / 54.84%);
  }
  [data-debug] * {
    outline: 1px solid magenta;
  }
  .visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
  .custom-check-box .checkbox {
    --size: 0.5rem;
    --border-color: #555;
    --padding: 0.4375rem;
    --active-check-color: var(--red);
    --top-space: 0.3rem;
    --mark: '✔';
    margin-top: var(--top-space);
    padding: var(--padding);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
  }
  .custom-check-box:has(input:checked) .checkbox {
    --border-color: var(--active-check-color);
    background-color: var(--active-check-color);
  }
  .custom-check-box:has(input:checked) .checkbox::before {
    content: var(--mark);
    /* Unicode checkmark */
    display: block;
    color: white;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1;
  }
  .custom-check-box input[type=checkbox] {
    appearance: none;
    display: none;
  }
}
:root {
  --colour-activeblue-activeBlue100: #f9fafb;
  --active-blue-100: #ebf8fe;
  --active-blue-200: #6eb4e0;
  --active-blue-400: #0275d8;
  --active-blue-600: #10345e;
  --primary-blue-700: #072f40;
  --default-gray-900: #111827;
  --default-gray-500: #6b7280;
  --default-gray-200: #ebf8fe;
  --text-neutral-600: #848f9f;
  --text-neutral-700: #5f738c;
  --primary-blue-800: #647f8b;
  --neutral-200: #f3f5f6;
  --neutral-100: #f9fbfc;
  --brand-colors-pop-blue: #00b8de;
  --white: #fff;
  --neutral-300: #e1e6ed;
  --neutral-800: #4e5a6c;
  --neutral-900: #353f50;
  --red: #bf1d29;
  --red-cta: #ee312a;
  --blue: #00425f;
  --selection-bg: #bf1d29;
  --selection-color: white;
  --font: 'Averta';
}

:root {
  --container: 71.25rem;
  --container-lg: 75rem;
  --container-md: 60rem;
  --medium-container: 64.375rem;
  --life-container: 80rem;
}

:root {
  /* Smooth and Natural */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Default ease */
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  /* Ease-in-out */
  --ease-gentle: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Gentle ease */
  --ease-natural-flow: cubic-bezier(0.4, 0, 0.2, 1);
  /* Natural flow */
  --ease-relaxed: cubic-bezier(0.2, 0.6, 0.38, 0.9);
  /* Relaxed ease */
  /* Custom Eases */
  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
  /* Ease In */
  --ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
  --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  /* Ease Out */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  /* Ease In-Out */
  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
  /* Bounce and Elastic */
  --ease-bounce: cubic-bezier(0.3, 1.5, 0.8, 1);
  --ease-bounce-1: linear(0,
      0.004,
      0.016,
      0.035,
      0.063,
      0.098,
      0.141,
      0.191,
      0.25,
      0.316,
      0.391 36.8%,
      0.563,
      0.766,
      1 58.8%,
      0.946,
      0.908 69.1%,
      0.895,
      0.885,
      0.879,
      0.878,
      0.879,
      0.885,
      0.895,
      0.908 89.7%,
      0.946,
      1);
  --ease-bounce-2: linear(0,
      0.004,
      0.016,
      0.035,
      0.063,
      0.098,
      0.141 15.1%,
      0.25,
      0.391,
      0.562,
      0.765,
      1,
      0.892 45.2%,
      0.849,
      0.815,
      0.788,
      0.769,
      0.757,
      0.753,
      0.757,
      0.769,
      0.788,
      0.815,
      0.85,
      0.892 75.2%,
      1);
  /* Elastic Out */
  --ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
  --ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25);
  --ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
  --ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
  /* Elastic In */
  --ease-elastic-in-1: cubic-bezier(0.5, -0.25, 0.75, 1);
  --ease-elastic-in-2: cubic-bezier(0.5, -0.5, 0.75, 1);
  --ease-elastic-in-3: cubic-bezier(0.5, -0.75, 0.75, 1);
  --ease-elastic-in-4: cubic-bezier(0.5, -1, 0.75, 1);
  --ease-elastic-in-5: cubic-bezier(0.5, -1.25, 0.75, 1);
  /* Elastic In-Out */
  --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
  --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
  --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
  --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
  --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
  /* Steps */
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  /* Springs */
  --ease-spring-1: linear(0,
      0.006,
      0.025 2.8%,
      0.101 6.1%,
      0.539 18.9%,
      0.721 25.3%,
      0.849 31.5%,
      0.937 38.1%,
      0.968 41.8%,
      0.991 45.7%,
      1.006 50.1%,
      1.015 55%,
      1.017 63.9%,
      1.001);
  --ease-spring-2: linear(0,
      0.007,
      0.029 2.2%,
      0.118 4.7%,
      0.625 14.4%,
      0.826 19%,
      0.902,
      0.962,
      1.008 26.1%,
      1.041 28.7%,
      1.064 32.1%,
      1.07 36%,
      1.061 40.5%,
      1.015 53.4%,
      0.999 61.6%,
      0.995 71.2%,
      1);
  /* Variations */
  --ease-elastic-1: var(--ease-elastic-out-1);
  --ease-elastic-2: var(--ease-elastic-out-2);
  --ease-elastic-3: var(--ease-elastic-out-3);
  --ease-elastic-4: var(--ease-elastic-out-4);
  --ease-elastic-5: var(--ease-elastic-out-5);
  --ease-squish-1: var(--ease-elastic-in-out-1);
  --ease-squish-2: var(--ease-elastic-in-out-2);
  --ease-squish-3: var(--ease-elastic-in-out-3);
  --ease-squish-4: var(--ease-elastic-in-out-4);
  --ease-squish-5: var(--ease-elastic-in-out-5);
}

:root {
  /* Subtle Shadows */
  --shadow-small:
    0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-medium:
    0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-large:
    0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23);
  /* Soft Shadows */
  --shadow-soft-small: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-soft-medium: 0px 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-soft-large: 0px 8px 16px rgba(0, 0, 0, 0.1);
  /* Vibrant Shadows */
  --shadow-vibrant:
    0px 4px 6px rgba(34, 193, 195, 0.4), 0px 2px 4px rgba(253, 187, 45, 0.3);
  /* Elevated Shadows */
  --shadow-elevated-small:
    0px 1px 5px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.15);
  --shadow-elevated-medium:
    0px 3px 10px rgba(0, 0, 0, 0.25), 0px 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-elevated-large:
    0px 5px 15px rgba(0, 0, 0, 0.3), 0px 8px 30px rgba(0, 0, 0, 0.2);
  /* Dark Shadows */
  --shadow-dark-small: 0px 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-dark-medium: 0px 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-dark-large: 0px 8px 16px rgba(0, 0, 0, 0.6);
  /* Colorful Glow Shadows */
  --shadow-glow-blue: 0px 4px 8px rgba(0, 123, 255, 0.5);
  --shadow-glow-green: 0px 4px 8px rgba(40, 167, 69, 0.5);
  --shadow-glow-red: 0px 4px 8px rgba(220, 53, 69, 0.5);
  --shadow-glow-yellow: 0px 4px 8px rgba(255, 193, 7, 0.5);
  /* Frosted Glass Shadows */
  --shadow-frosted-small: 0px 2px 8px rgba(255, 255, 255, 0.2);
  --shadow-frosted-medium: 0px 4px 16px rgba(255, 255, 255, 0.15);
  --shadow-frosted-large: 0px 8px 32px rgba(255, 255, 255, 0.1);
  /* Fancy Shadows */
  --shadow-fancy:
    0px 5px 15px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(255, 0, 150, 0.3);
  /* Material Design Shadows */
  --md-shadow-1:
    0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
  --md-shadow-2:
    0px 1px 5px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14),
    0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  --md-shadow-3:
    0px 1px 8px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.14),
    0px 3px 3px -2px rgba(0, 0, 0, 0.12);
  --md-shadow-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.14),
    0px 1px 10px rgba(0, 0, 0, 0.12);
  --md-shadow-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14),
    0px 1px 18px rgba(0, 0, 0, 0.12);
  --md-shadow-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px rgba(0, 0, 0, 0.14),
    0px 3px 14px rgba(0, 0, 0, 0.12);
  --md-shadow-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px rgba(0, 0, 0, 0.14),
    0px 6px 30px rgba(0, 0, 0, 0.12);
  --md-shadow-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px rgba(0, 0, 0, 0.14),
    0px 9px 46px rgba(0, 0, 0, 0.12);
  /* Tailwind CSS Shadows */
  --tw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --tw-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tw-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tw-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tw-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --tw-shadow-none: none;
}