@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lato:wght@400;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* variables */
:root {
  --sunlife-marigold: #eab308;
  --sunlife-rich-black: #1e3a8a;
  --sunlife-dark: #0f172a;
  --white: #ffffff;
  --light-gray: #f8fafc;
  --text-primary: #0f172a;
  --section-padding-y: 7rem;
  --section-padding-x: 8%;
  --section-padding-y-tablet: 5.5rem;
  --section-padding-y-mobile: 4.5rem;
  --section-padding-x-mobile: 1.25rem;
}

/* base */
body {
  font-family: "Lato", sans-serif;
  background-color: var(--light-gray);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}