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

:root {
  --white: #fff;

  --lightgray: #f2f2f2;
  --darkgray: #808080;
  --darkmode: #333333;
  --primairy: #0071bc;
  --secondairy: #063b59;
  --tertiary: #50a383;

  --headtext: "Nunito", sans-serif;
  --bodytext: "Open Sans", sans-serif;

  --psize: 1rem;
  --h2size: 1.5rem;
  --plineheight: 1.6rem;
}

html {
  background-color: var(--white);
  overflow-x: hidden;
  width: 100vw;
}

body {
  position: relative;
}

/* SECTION CONTAINERS  */
header {
  width: min(60rem, 90%);
  margin: 0 auto 0 auto;
  padding-top: 3rem;
  position: relative;
}

main {
  width: 100vw;
  margin: 0 auto 1rem auto;
  padding-top: 2rem;
}

.width-container {
  width: min(50rem, 80%);
  margin: 0 auto 1rem auto;
  position: relative;
}

/* FONTS and TYPOGRAPHY */
h1,
h2,
h3,
h4 {
  font-family: var(--headtext);
  color: var(--primairy);
}

h2 {
  font-size: var(--h2size);
}

p {
  font-family: var(--bodytext);
  font-size: var(--psize);
  line-height: var(--plineheight);
}

ul {
  font-family: var(--bodytext);
  list-style-position: inside;
}

/* THE REST  */
.logo {
  width: 20rem;
}

/* wie ben ik section  */
.portret {
  margin-top: 11rem;
  /* width: 30rem; */
  height: 15rem;
  background: var(--secondairy);
  background: linear-gradient(
    135deg,
    var(--primairy) 0%,
    var(--secondairy) 100%
  );
  border-radius: 0% 0% 0% 0%;
  position: relative;

  & img {
    height: 150%;
    position: absolute;
    bottom: 0;
    left: 10%;
    z-index: 2;
  }
}

.monnica {
  margin-top: 3rem;
}

.overlap {
  display: none;

  float: right;
  width: 7rem;
  height: 13rem;
  margin: 0 0 0.5rem 1rem;

  shape-outside: rect();
  background-color: var(--secondairy);
}

/* Taken section  */
.werkzaamheden {
  background-color: var(--secondairy);
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  & h2 {
    width: min(50rem, 80%);
    margin: 1rem auto 1.5rem auto;
    color: var(--white);
  }
}

.taken {
  width: min(50rem, 80%);
  margin: auto;
  background-color: var(--secondairy);
  padding: 1rem 0;
  display: flex;
  flex-direction: row;
  gap: 1rem 3rem;
  justify-content: space-between;
  flex-wrap: wrap;

  .taak {
    width: 7rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;

    & h4 {
      text-align: center;
      line-height: 1.4rem;
      padding: 0.5rem 0;
      font-size: 1.1rem;
      color: var(--white);
    }

    .taakicon {
      width: 8.3rem;
      height: 9.3rem;
      border-radius: 0.6rem;
      border: 0.15rem solid var(--secondairy);
      background-color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.5s ease;
      transition: filter 0.3s ease;

      & img {
        width: 60%;
      }

      & svg {
        width: 60%;
      }
    }

    .st2 {
      fill-rule: evenodd;
      clip-rule: evenodd;
      fill: var(--secondairy);
      transition: fill 0.3s ease;
    }

    .st4 {
      fill: var(--darkgray);
    }

    .active {
      background: var(--primairy);
      background: linear-gradient(
        135deg,
        var(--primairy) 0%,
        var(--secondairy) 100%
      );
      border: 0.15rem solid var(--white);

      filter: drop-shadow(0px 0px 7px #031d28);

      .st2 {
        fill: var(--white);
      }
    }
  }
}

.beschrijving {
  display: flex;
  align-items: flex-start;
  width: min(50rem, 80%);
  margin: 0.5rem auto 1.5rem auto;
  color: white;

  & .bold {
    font-weight: 700;
  }
}

/* Helpende hand aanvragen  */
.aanvragen {
  margin: 5rem 0;

  .aanvragen-content {
    margin-bottom: 2rem;
  }
}

/* aanvraagproces alterantief  */
.aanvraagproces {
  margin: 2rem 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.aanvraagproces::after {
  content: "";
  width: 0.3rem;
  height: 85%;
  left: 2.85rem;
  top: 2.8rem;

  background-color: var(--lightgray);
  position: absolute;

  z-index: 1;
}

.stap {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 2rem 0;

  & h4 {
    padding-left: 1rem;
    line-height: 1.4rem;
    font-size: 1.3rem;
    color: var(--secondairy);
  }
}

.ap-stap-container {
  background: var(--lightgray);
  position: relative;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;

  & img {
    width: 3rem;
  }
}

.ap-stap-container-first {
  background-color: var(--secondairy);
}

.ap-stap-container-first::after {
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  background-image: url("/images/pointer-blue.svg");
  background-repeat: no-repeat;
  bottom: -1.7rem;
  z-index: 2;
}

.ap-stap-container-mid::after {
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  background-image: url("/images/pointer.svg");
  background-repeat: no-repeat;
  bottom: -1.7rem;
  z-index: 2;
}

/* BUTTONS  */
.h-h-button {
  background-color: var(--secondairy);
  position: relative;
  height: 3rem;
  width: 18rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem auto 0 auto;
  color: var(--white);
  border-radius: 0.3rem;
  cursor: pointer;
  transition: all 0.5s ease;
  filter: drop-shadow(3px 3px 7px #000000);
  text-decoration: none;

  & .h-h-icon {
    background-color: var(--primairy);
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 7rem;
    bottom: -3.3rem;

    & svg {
      width: 60%;
    }

    & .heart,
    .hand {
      fill: var(--white);
    }

    & .heartin {
      fill: var(--white);
      transition: fill 0.5s ease;
    }
  }
}

.h-h-button:hover {
  filter: drop-shadow(3px 3px 7px #000000);

  & .heartin {
    fill: #9d0000;
  }
}

/* contact button  */
.contactBtn {
  width: 12rem;
  height: 3rem;
  border-radius: 0.3rem;
  border: 1px solid var(--white);

  padding-left: 2rem;
  background: var(--secondairy);
  font-family: var(--headtext);
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  bottom: 2rem;
  right: -9rem;
  z-index: 1003;

  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.contactBtn:hover {
  transform: scale(104%);
  filter: drop-shadow(0px 0px 7px #000000);
}

.contactBtn::after {
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
  left: 0;
  background-image: url("/images/email.svg");
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: center;
}

.backtomainBtn {
  background-color: var(--secondairy);
  color: var(--white);
  border-radius: 0.3rem;
  font-family: var(--headtext);
  text-decoration: none;

  height: 3rem;
  width: 18rem;
  margin: 2rem 0;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  transition: all 0.5s ease;
}

.backtomainBtn:hover {
  filter: drop-shadow(0px 0px 7px #000000);
}

/* footer  */

footer {
  width: 100vw;
  background-color: var(--secondairy);
  padding-bottom: 5rem;
  margin-top: 10rem;

  & section {
    width: min(50rem, 80%);
    margin: auto;

    .footerlogo {
      width: 15rem;
      padding: 3rem 0 1rem 0;
    }
  }

  .footerdetails {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: white;
    gap: 1rem;

    & h4 {
      font-size: 1.1rem;
      color: white;
      padding: 1.3rem 0 0.3rem 0;
    }

    & p,
    & ul {
      font-size: 0.85rem;
      line-height: 1.3rem;
      font-weight: 100;
    }

    & div {
      width: 80%;
    }

    & a {
      text-decoration: none;
      font-family: var(--bodytext);
      font-size: 0.85rem;
      line-height: 1.3rem;
      font-weight: 100;
      color: white;
      display: block;
    }

    & a:hover {
      color: var(--tertiary);
      text-decoration: underline;
    }

    .contactLink {
      cursor: pointer;
    }

    .contactLink:hover {
      color: var(--tertiary);
      text-decoration: underline;
    }
  }
}

/* overige paginas  */
.disclaimer p {
  padding: 1rem 0;
}

.privacy-article {
  & h3 {
    padding: 0.7rem 0 0 0;
    font-size: 1.3rem;
  }
  & li {
    padding: 0.25rem 0;
    font-size: var(--psize);
  }
  & a {
    /* text-decoration: none; */
    color: var(--secondairy);
  }

  & a:hover {
    color: var(--tertiary);
    text-decoration: underline;
  }
}

.privacy-article h2 {
  padding: 3rem 0 0 0;
}
/* media queries  */

@media all and (min-width: 50rem) {
  :root {
    --psize: 1.2rem;
    --h2size: 1.8rem;
    --plineheight: 1.9rem;
  }

  /* contact  */
  .contactBtn {
    display: flex;
    right: 3rem;
  }

  .portret {
    margin-top: 7rem;
    position: absolute;
    right: -24rem;
    width: 30rem;
  }

  .overlap {
    display: flex;
  }

  .h-h-button {
    padding: 0;
    width: 20rem;
    filter: none;
    margin: 2rem 0 0 0;

    .h-h-icon {
      left: -3rem;
      bottom: -0.5rem;
    }
  }

  .monnica {
    margin-top: 10rem;
  }

  /* taken  */
  .taak {
    width: 10rem;

    & h4 {
      text-align: center;
      line-height: 1.4rem;
      padding: 1rem 0;
      font-size: 1.3rem;
      color: var(--white);
    }
  }

  .taak:hover {
    .taakicon {
      background: var(--primairy);
      border: 0.15rem solid var(--white);
      filter: drop-shadow(0px 0px 7px #031d28);
    }

    .st2 {
      fill: var(--white);
    }
  }

  /* aanvragen  */

  .aanvraagproces {
    flex-direction: row;
    justify-content: space-between;
  }

  .aanvraagproces::after {
    height: 0.3rem;
    width: 85%;
    top: 5.25rem;
    left: 4rem;
  }

  .stap {
    display: flex;
    flex-direction: column;

    & h4 {
      padding-left: 0;
      padding-top: 1.5rem;
    }
  }

  .ap-stap-container {
    width: 7rem;
    height: 7rem;

    & img {
      width: 3.4rem;
    }
  }

  .ap-stap-container-first::after,
  .ap-stap-container-mid::after {
    top: 2.5rem;
    right: -1.6rem;
    transform: rotate(-90deg);
  }

  /* footer  */
  footer {
    .footerdetails {
      flex-direction: row;

      & div {
        width: min(12rem, 24%);
      }
    }
  }
}