@font-face {
  font-family: "Mulish";
  src: url("../assets/fonts/Mulish-Bold.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mulish";
  src: url("../assets/fonts/Mulish-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Medium.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Bold.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* GLOBAL */
  --primary-color: #66d0a4;
  --secondary-color: #298c4b;
  --tertiary-color: #4ade80;

  /* DEFAULT GROUP */
  --a-highlight: #f7924a;
  --a-title-main: #1c1c1c;
  --a-title-secondary: #65c27b;
  --a-text-main: #535353;
  --a-gradient-a: #66d0a4;
  --a-gradient-b: #9cfab0;
  --a-section-bg: #ffffff;

  /* GROUP B */
  --b-highlight: pink;
  --b-title-main: #ffffff;
  --b-title-secondary: #346b52;
  --b-text-main: #111111;
  --b-button: #346b52;
  --b-gradient-a: #2b5a4a;
  --b-gradient-b: #65c27b;
  --b-section-bg: black;

  /* GROUP C */
  --c-section-bg: #f6fafd;

  /* GROUP FOOTER */
  --d-title-main: #ffffff;
  --d-text-main: #c7c7c7;
  --d-section-bg: #01070e;

  --page-margin: max(calc((100vw - 1100px) / 2), 1rem);
  --primary-shadow: 0px 5px 12px 2px rgba(0, 124, 251, 0.16);
  font-size: 16px;
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  color: var(--a-text-main);
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .hide-in-mobile {
    display: none;
  }
}