/*-------------------------- BASIC RESET -------------------------*/

/*--- CSS VARIABLES ---*/
:root {
  --color-primary: #0099a9;
  --color-secondary: #173e62;
  --color-primary-light: #99d6dd;
  --color-text: #2a2b2a;
  --color-text-light: #e6f5f6;
  --color-white: #ffffff;
  --color-grey-dark: #000f11;
  --color-urgent: #d91c29;
  --background-white: #ffffff;
  --background-grey-light: #f5f5f5;
  --background-grey-dark: #0c1f31;
  --background-primary: #0099a9;
  --background-secondary: #173e62;
  --background-primary-light: #f0f9fa;
  --background-urgent-light: #fbe8ea;
  --border-grey-light: #eaeaea;
  --font-primary: "DM Serif Display", serif;
  --font-secondary: "Be Vietnam Pro", sans-serif;
  --gutter-spacing: 3rem;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

@media only screen and (max-width: 100em) {
  html {
    font-size: 56.25%;
  }
}

@media only screen and (max-width: 80em) {
  html {
    font-size: 50%;
  }
}

body {
  font-family: var(--font-secondary);
  font-size: 1.4rem;
  font-weight: 400;
}

@media only screen and (max-width: 80em) {
  body {
    font-size: 1.5rem;
  }
}

ul {
  list-style-type: none;
}

/*-------------------------- BASIC RESET -------------------------*/

/*-------------------------- TYPOGRAPHY --------------------------*/

/*--- HEADINGS ---*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 400;
  color: inherit;
}

h2 {
  font-size: 4.5rem;
}

@media only screen and (max-width: 27.5em) {
  h2 {
    font-size: 3.5rem;
  }
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.6rem;
}

h6 {
  font-size: 1.3rem;
}

/*--- PRIMARY HEADING FOR THE SECTION ---*/
.section-heading--main {
  font-family: var(--font-primary);
  font-size: 4.5rem;
  font-weight: 400;
  color: var(--color-secondary);
  line-height: 5rem;
  margin-bottom: 4rem;
}

@media only screen and (max-width: 27.5em) {
  .section-heading--main {
    font-size: 4rem;
  }

  .section-heading--small {
    font-size: 3rem;
    line-height: 4rem;
  }
}

/*--- SECONDARY HEADING FOR THE SECTION ---*/
.section-heading--sub {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 2rem;
  margin-bottom: 2.5rem;
}

/*--- PARAGRAPHS ---*/
.paragraph {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: inherit;
  color: var(--color-text);
  line-height: 3rem;
  overflow-wrap: break-word;
}

/*-------------------------- TYPOGRAPHY --------------------------*/