:root {
    --brand-blue-light: rgb(15, 146, 184);
    --brand-blue: rgb(0, 45, 71);
    --brand-orange: rgb(238, 104, 35);
    --brand-orange-dark: rgb(165, 64, 13);

    --size-fluid-7: clamp(7.5rem, 10vw, 10rem);

    --font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);
  }

  /* font sizes & styles */
  .fs-7 {
    font-size: var(--font-size-fluid-3);
  }

  .text-brand-blue {
    color: var(--brand-blue);
  }

  .text-brand-orange {
    color: var(--brand-orange);
  }

  .text-brand-blue-light {
    color: var(--brand-blue-light);
  }

  /* bg colors */
  .bg-brand-blue {
    background-color: var(--brand-blue);
  }

  .bg-brand-blue-light {
    background-color: var(--brand-blue-light);
  }

  .bg-brand-orange {
    background-color: var(--brand-orange);
  }

  /* buttons */
  .main-btn:hover {
    background-color: var(--brand-orange-dark);
  }

  
  .main-btn-2:hover {
    background-color: var(--brand-blue);
  }
  .main-btn-3:hover { background-color: var(--brand-blue-light); }

  /* misc utilities */
  .spacer-sm {
    height: var(--size-fluid-7);
  }