* {
  box-sizing: border-box;
}

:root {
  font-family: "Roboto", sans-serif !important;
  --black: #1a1a1a;
  --navy: #1a1f26;
  --background: #ffffff;
  --light-grey-active: #eeeeee;
  --light-grey: #909090;
  --dark-grey: #3e3e3e;
  --light-blue-3: #a8c5e3;
  --light-blue-2: #89b1da;
  --light-blue-1: #6a9cd0;
  --blue: #4b88c6;
  --dark-blue-1: #3874b0;
  --dark-blue-2: #2e5f91;
  --dark-blue-3: #244b72;

  --spacing-1: clamp(0.375rem, 0.2vw + 0.325rem, 0.5rem);
  --spacing-2: clamp(0.75rem, 0.4vw + 0.65rem, 1rem);
  --spacing-3: clamp(1.125rem, 0.6vw + 0.975rem, 1.5rem);
  --spacing-4: clamp(1.5rem, 0.8vw + 1.3rem, 2rem);
  --spacing-5: clamp(1.875rem, 1vw + 1.625rem, 2.5rem);
  --spacing-6: clamp(2.25rem, 1.2vw + 1.95rem, 3rem);
  --spacing-7: clamp(2.625rem, 1.4vw + 2.275rem, 3.5rem);
  --spacing-8: clamp(3rem, 1.6vw + 2.6rem, 4rem);
  --spacing-9: clamp(3.375rem, 1.8vw + 2.925rem, 4.5rem);
  --spacing-10: clamp(3.75rem, 2vw + 3.25rem, 5rem);
  --spacing-11: clamp(4.125rem, 2.2vw + 3.575rem, 5.5rem);
  --spacing-12: clamp(4.5rem, 2.4vw + 3.9rem, 6rem);

  --btn-text-l:
    600 clamp(1.25rem, 1.5vw, 1.5rem)/clamp(2rem, 2.5vw, 2.5rem) "Oswald",
    sans-serif;
  --btn-text-m:
    600 clamp(0.875rem, 1vw, 1rem)/clamp(2rem, 2.5vw, 2.5rem) "Oswald",
    sans-serif;
  --btn-text-s:
    600 clamp(0.75rem, 0.875vw, 0.875rem)/clamp(1.75rem, 2vw, 2rem) "Oswald",
    sans-serif;

  --heading-h1:
    700 clamp(2.25rem, 3.5vw, 3.5rem)/clamp(3.25rem, 5vw, 5rem) "Oswald",
    sans-serif;
  --heading-h3:
    700 clamp(1.75rem, 3vw, 2.5rem)/clamp(2.25rem, 3vw, 2.5rem) "Oswald",
    sans-serif;
  --heading-h6:
    600 clamp(1.25rem, 1.5vw, 1.25rem)/clamp(2rem, 2.5vw, 2.5rem) "Oswald",
    sans-serif;

  --body-l-reg:
    400 clamp(1.25rem, 1.5vw, 1.5rem)/clamp(1.75rem, 2vw, 2rem) "Roboto",
    sans-serif;
  --body-l-bold:
    600 clamp(1.25rem, 1.5vw, 1.5rem)/clamp(1.75rem, 2vw, 2rem) "Roboto",
    sans-serif;

  --body-m-reg:
    400 clamp(1rem, 1.25vw, 1.125rem)/clamp(1.75rem, 2vw, 2rem) "Roboto",
    sans-serif;
  --body-m-bold:
    600 clamp(1rem, 1.25vw, 1.125rem)/clamp(2rem, 2.5vw, 2.5rem) "Roboto",
    sans-serif;

  --body-s-reg:
    400 clamp(0.875rem, 1vw, 1rem)/clamp(1.25rem, 1.5vw, 1.5rem) "Roboto",
    sans-serif;
  --body-s-bold:
    600 clamp(0.875rem, 1vw, 1rem)/clamp(1.75rem, 2vw, 2rem) "Roboto",
    sans-serif;

  --body-xs-reg:
    400 clamp(0.75rem, 0.875vw, 0.875rem)/clamp(1.25rem, 1.5vw, 1.5rem) "Roboto",
    sans-serif;
  --body-xs-bold:
    600 clamp(0.75rem, 0.875vw, 0.875rem)/clamp(1.75rem, 2vw, 2rem) "Roboto",
    sans-serif;

  --body-xxs-reg:
    400 clamp(0.6875rem, 0.75vw, 0.75rem)/clamp(1rem, 1.125vw, 1.125rem)
      "Roboto",
    sans-serif;
  --body-xxs-bold:
    600 clamp(0.6875rem, 0.75vw, 0.75rem)/clamp(1rem, 1.125vw, 1.125rem)
      "Roboto",
    sans-serif;

  --body-xxxs-reg:
    400 clamp(0.625rem, 0.6875vw, 0.6875rem)/clamp(1rem, 1.125vw, 1.125rem)
      "Roboto",
    sans-serif;
  --body-xxxs-bold:
    600 clamp(0.625rem, 0.6875vw, 0.6875rem)/clamp(1rem, 1.125vw, 1.125rem)
      "Roboto",
    sans-serif;
}

/* Button Styles */
.btn {
  border-radius: 1rem;
  cursor: pointer;
  background-color: var(--light-blue-2);
  margin-right: var(--spacing-5);
  border: none;
  align-items: center;
  justify-content: center;
}

.btn:hover,
.btn:focus {
  background-color: var(--light-blue-1);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  transform: translateX(0.2rem);
}

.hero-btn {
  padding: var(--spacing-2) var(--spacing-8);
  font: var(--btn-text-l);
  margin: 0;
  text-align: center;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.main-btn {
  padding: var(--spacing-1) var(--spacing-3);
  font: var(--btn-text-m);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

@media only screen and (max-width: 768px) {
  .btn:hover,
  .btn:focus {
    transform: none;
  }
}