:root {
  --pri-color: #21409a;
  --pri-color-lighter: #4f6cc1;
  --pri-color-lightest: #ebf0ff;
  --sec-color: #d4af37;

  --font-pri: 'Frank Ruhl Libre', serif;
}

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

html {
  font-size: 62.5%;
  font-family: var(--font-pri);
  scroll-behavior: smooth;
}

body {
  font-size: 2rem;
  background-color: var(--pri-color-lightest);
  color: var(--pri-color);
}

.section-container {
  max-width: 138rem;
  margin: 0 auto;
  padding-bottom: 5rem;
}

.hightlight {
  color: var(--sec-color);
}

.section-heading {
  font-size: 5rem;
  text-align: center;
  padding-bottom: 6rem;
}

.padding-rem {
  padding: 6rem;
}

p {
  font-size: 2rem;
}

/* *** HEADER ***  */
header {
  padding-bottom: 5rem;
}

.header-wrapper {
  display: flex;
  background-color: var(--pri-color);
  color: var(--pri-color-lightest);
  height: 100vh;
}

.logo-box {
  background-image: url(../images/logo-block.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  min-width: 75rem;
}

.logo-box img {
  width: 43%;
}

#intro-text {
  display: flex;
  flex-direction: column;
  max-width: 60%;
  gap: 3rem;
  align-self: center;
  padding-right: 9rem;
}

#intro-text h1 {
  font-size: 3.3vmin;
  color: var(--sec-color);
}

#intro-text p {
  font-size: 2.2vmin;
}

#intro-text a {
  color: var(--sec-color);
  font-weight: 600;
  text-decoration: none;
}

/* *** END ***  */

/* *** WHO ***  */

.wie-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6.6rem;
  align-items: center;
}

.about {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#wie q {
  font-size: 2.4rem;
  font-weight: 600;
  font-style: italic;
  text-align: center;
  quotes: ' “ ' ' ” ';
  color: var(--sec-color);
}

.img-box {
  min-width: 40rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 1px 1px 9px #ccc;
}

.img-box img {
  display: block;
  width: 100%;
  height: auto;
}

/* *** END *** */

/* *** FISCOUNT ***  */

#fiscount {
  width: 100%;
  padding: 6rem 0;
}

#fiscount h3 {
  font-size: 3.5rem;
  text-align: center;
}

.fiscount-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}

.fiscount-box--left {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.fiscount-box--right {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.fiscount-logo {
  width: 20rem;
  align-self: center;
  justify-self: center;
}

.fiscount-logo img {
  width: 100%;
  height: auto;
}

/* *******************************  */

/* *** WAT *** */

.wat-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  max-width: 108rem;
  margin: 0 auto;
}

.wat-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  border-radius: 3rem;
  box-shadow: 1px 1px 11px #ccc;
  padding: 3rem;
  background-color: #ebf0ff;
}

.wat-items ul li {
  font-size: 1.8rem;
  margin-left: 3rem;
  margin-top: 1rem;
}

.wat-items li p {
  font-size: 2rem;
  font-weight: 600;
}

.wat-items ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wat-box h3 {
  font-size: 3rem;
  text-align: center;
}

.particulieren-img {
  width: 30%;
}

.ondernemers-img {
  width: 22%;
}

.wat-img {
  width: 100%;
  height: auto;
}

/* *******************************  */

footer {
  background-color: var(--pri-color);
  color: var(--pri-color-lightest);
}

.footer-content--wrapper {
  padding: 3rem 1rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  max-width: 120rem;
  gap: 3rem;
  justify-items: center;
}

.contact-wrapper {
  align-self: center;
}

.mailform {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;

}

.mailform input {
  padding: 3px;
  font-family: monospace;
  font-size: 1.44rem;
  border: none;
  background-color: var(--pri-color-lightest);

}

.mailform textarea {
  padding: 3px;
  font-family: monospace;
  font-size: 1.44rem;
  border: none;
  background-color: var(--pri-color-lightest);

}

.mailform button {
  padding: 3.9px;
  border: none;
  background-color: var(--sec-color);
  color: var(--pri-color-lightest);
  font-family: monospace;
  font-weight: 600;
  font-size: 1.44rem;
  cursor: pointer;
}

.address {
  font-size: 2.2rem;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  text-align: center;
  gap: 1rem;
}

.maps {
  width: 110%;
  height: auto;
}

.maps img {
  width: 100%;
  height: auto;
}

.close {
  max-width: 1200rem;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
  background-color: var(--pri-color);
  color: var(--pri-color-lightest);
}

.close span {
  padding: 0 1vmin;
  font-size: 1.6rem;
}

.close a {
  color: var(--pri-color-lightest);
  text-decoration: none;
}

/* *** MEDIA QUERY ****/

@media (max-width: 1380px) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 1080px) {
  html {
    font-size: 42.5%;
  }

  .wie-box {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 3rem;
  }
}

@media (max-width: 680px) {
  html {
    font-size: 42.5%;
  }

  .header-wrapper {
    flex-direction: column;
  }

  .logo-box {
    height: 50%;
    max-width: 100rem;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .logo-box {
    height: 43%;
    max-width: 80rem;
    min-width: 0;
  }

  #intro-text {
    max-width: 90%;
    height: 40%;
    align-self: center;
    padding-right: 0;
  }

  #intro-text h1 {
    font-size: 3.3rem;
  }

  #intro-text p {
    font-size: 2.3rem;
  }

  .wie-box {
    grid-template-columns: 1fr;
    padding: 0 3rem;
  }

  .fiscount-box {
    grid-template-columns: 1fr;
    padding: 0 3rem;
  }

  .wat-box {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer-content--wrapper {
    padding: 3rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    max-width: 120rem;
  }

  .mailform input {
    font-size: 1.64rem;
  }

  .mailform textarea {
    font-size: 1.64rem;
  }

  .mailform button {
    padding: 6.9px;
    font-size: 1.84rem;
  }
}