*,*::before,*::after
{
    box-sizing: border-box;
}

html{
    box-sizing: inherit;
    font-size: 62.5%;
}

html,body{
    height:100%;
    font-family: 'Poppins light', Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'Poppins light';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/Poppins-Light.woff2') format('woff2'),
         url('../assets/Poppins-Light.woff') format('woff');         
}

@font-face {
    font-family: 'Poppins bold';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/Poppins-Bold.woff2') format('woff2'),
         url('../assets/Poppins-Bold.woff') format('woff');         
}

@font-face {
    font-family: 'Poppins italic';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/Poppins-LightItalic.woff2') format('woff2'),
         url('../assets/Poppins-LightItalic.woff') format('woff');         
}

@import './vars.css';

.hidden{
    display: none;
}

span {
    font-family: 'Poppins bold';
}

/* HOME */

.background {
    background-color: #FF6A00;
}

.wrapper {
    display: flex;
}

.home_grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    margin-top: -3rem;
}

.home__middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 4rem;

}

.header__afbeeldingrechts {
    width: 40rem;
    padding-bottom: 2rem;
    justify-self: flex-end;
    animation: fadeInRight 3s ease;

}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
      }
      50% {
        opacity: 0;
        transform: translateX(20px);
      }
      100% {
        opacity: 1;
        transform: translateX(0px);
      }
}

.header__afbeelding {
    width: 40rem;
    padding-bottom: 2rem;
    animation: fadeInLeft 3s ease ;
    
}

@keyframes fadeInLeft {
    0% {
       opacity: 0;
       transform: translateX(-20px);
    }
    50% {
        opacity: 0;
       transform: translateX(-20px);
    }
    100% {
       opacity: 1;
       transform: translateX(0);
    }
 }
  



.header__title {
    font-size: 7.2rem;
    text-align: center;
    margin-bottom: 4rem;
    animation: fade-in-down 1.5s ease;
}

@keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

.header__subitle{
    font-size: 2rem;
    text-align: center;
    width: 65rem;
    line-height: 3rem;
    margin-bottom: 1rem;
}


.home__text::before {
    background-image: url(../assets/checkmark.png);
    background-size: 2.7rem 2.7rem;
    display: inline-block;
    width: 2.7rem; 
    height: 2.7rem;
    content: "";
    margin-right: 1rem;
    padding-top: 1rem;
    align-self: center;
    align-items: center;
}

.home__textwrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 3rem auto;
}

.home__text {
    font-size: 1.5rem;
    line-height: 4rem;
    display: flex;
    align-items: center;
}



.home__text2 {
    font-size: 1.8rem;
    line-height: 4.65rem;
}

.home__text2--margin {
    margin-bottom: 5rem;
}

.button__deel2 {
    background-color: black;
    color: white;
    font-size: 2rem;
    padding: 2rem;
    margin-top: 4rem;
    text-decoration: none;
    font-family: 'Poppins light';
}

.button__deel2:hover {
    color: black;
    background-color: #FF6A00;
}

.home__deel2wrapper {
    margin-left: 4rem;
}

.bold {
    font-family: 'Poppins bold';
}

.home_coachingimage {
    height: 15rem;
    align-self: center;
}

.home__deel2 {
    align-self: center;
    margin-right: 2rem;
}





/* NAVIGATIE */

.logo {
    margin: 5rem;
    margin-left: 20rem;
}

.wrapper__navigatie {
    display: grid;
    grid-template-columns: 1fr 7fr;
}

.nav {
    color: black;
    text-decoration: none;
    font-size: 2.4rem;
    margin-right: 2.3rem;
}

.nav_wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-self: flex-end;
    padding-bottom: -5rem;
}

.nav__border {
    border-bottom: .1rem black solid;
    padding-bottom: 4rem;
    padding-right: 10rem;
}

.button:hover {
    color: black;
    background-color: #FF6A00;
}


.button {
    background-color: black;
    color: white;
    font-size: 2.4rem;
    padding: 2rem;
    margin-top: 4rem;
    text-decoration: none;
    font-family: 'Poppins light';
}



.nav--bold {
    font-family: 'Poppins bold';
}

/* FOOTER */

.footer__background {
    background-color: #FF6A00;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

.footer__logo {
    display: flex;
    margin: 3rem auto;
    margin-top: 6rem;
}

.footer__persoon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 3.2rem;
}

.footer__gegevens {
    font-size: 2rem;
    text-decoration: none;
    color: black;
    line-height: 2.9rem;
}

.footer__name {
    font-size: 2.4rem;
    font-family: 'Poppins bold';
    border-bottom: .1rem solid black;
    padding-bottom: 2rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
    width: 20rem;
}

/* OTHER PAGES */

.background--other {
    height: 47.6rem;
}

.whitesection {
    background-color: white;
    width: 140rem;
    margin: 0 auto;
    margin-top: -28rem;
}

.other__title {
    font-size: 7.2rem;
}

.padding {
    padding: 4rem 5rem 5rem 5rem;
}

.other__text {
    font-size: 1.8rem;
    line-height: 3rem;
    margin-top: 2rem;
}

/* MISSION STATEMENT */

.mission__wrapper {
    display: flex;
}

.missiontext__wrapper {
    padding-right: 8rem;
}

.other__text--width {
    width: 72rem;
}

.mission__quote {
    width: 33.8rem;
    font-family: 'Poppins italic';
    color: #FF6A00;
    font-size: 3.6rem;
    line-height: 5.4rem;
    margin-top: 2rem;
    margin-left: 30rem;
}

.mission__image {
    margin-top: 2rem;
    height: 36.5rem;
    animation: bounce-in-right 2s ease ;
}

@keyframes bounce-in-right {
    0% {
        opacity: 0;
        transform: translateX(20px);
      }
      100% {
        opacity: 1;
        transform: translateX(0px);
      }
  }
  

/* METHODIEK */

.methodiek__grid {
    display: grid;
    grid-template-columns: 35.2rem 35.2rem 35.2rem;
    grid-gap: 3rem;
    margin-top: 3rem;
    justify-content: center;
}

.methodiek__section--1 {
    animation: fade-in-down 2s ease;
}

@keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    20% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

.methodiek__section--2 {
    animation: fade-in-down2 3s ease;
}

@keyframes fade-in-down2 {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    40% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

.methodiek__section--3 {
    animation: fade-in-down3 4s ease;
}

@keyframes fade-in-down3 {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    50% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

.methodiek__section {
    background-color: #FF6A00;
}  

.other__text--padding {
    padding: 1rem 2rem 2rem 2rem;
}

.methodiek__title {
    font-size: 3rem;
    padding-left: 2rem;
    padding-top: 2rem;
}

/* WIE ZIJN WE */

.wiezijnwe__grid {
    display: grid;
    grid-template-columns: 53rem 53rem;
    margin: 0 auto;
    grid-gap: 6rem;
    justify-content: center;
}

.wie__image {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.wie__persoon {
    text-align: center;
    font-size: 4.8rem;
    margin-top: -1.4rem;
}

.button--wie {
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    width: 30.7rem;
    font-size: 2.4rem;
    margin: 0rem auto 3rem;
}

.button--wie:hover {
    color: black;
    background-color: #FF6A00;
}

/* CONTACT */

.contact__wrapper {
    display: flex;
    justify-content: space-between;
    width: 110rem;
    margin: 0 auto;
}

.title--contact {
    color: #FF6A00;
    border-bottom: solid .1rem black;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
}

.contact__text {
    font-family: 'Poppins bold';
    font-size: 2.4rem;
    margin-bottom: 2rem;
}

.contact__form {
    width: 110rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.contact__form--name {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5rem;
}

.form__invulveld {
    border: black 0.1rem solid;
    height: 4rem;
    width: 52rem;
    margin-bottom: 2rem;
    font-family: 'Poppins light';
    padding-left: 1rem;
}

.form__invulveld--big {
    width: 110rem;
}

.form__invulveld--bigtext {
    width: 110rem;
    height: 15rem;
    align-self: flex-start;
}

.button--contact {
    width: 22rem;
    border: none;
    padding: 1rem;
    margin-top: 0rem;
}

.button--contact:hover {
    color: black;
    background-color: #FF6A00;
}

/* RESPONSIVE  */

@media only screen and (max-width: 1380px) {

    .header__subitle {
        width: 35rem;
        font-size: 1.5rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

 .header__afbeelding {
     width: 30rem;
 }

 .header__afbeeldingrechts {
     width: 30rem;
 }

 .nav {
     font-size: 1.7rem;
 }

 .nav__border {
     padding-right: 5rem;
 }

 .whitesection {
     width: 90rem;
 }

 .mission__wrapper {
     flex-direction: column;
 }

 .mission__image {
     margin: 0 auto;
     width: 30rem;
     height: 25rem;
 }

 .methodiek__grid {
     grid-template-columns: 25rem 25rem 25rem;
 }

 .methodiek__image {
     width: 25rem;
 }

 .wiezijnwe__grid {
     grid-template-columns: 35rem 35rem;
 }

 .contact__wrapper {
     width: 70rem;
 }

 .title--contact {
     font-size: 4rem;
 }

 .contact__image {
     width: 20rem;
     height: 5rem;
 }

 .contact__form {
     width: 70rem;
 }

 .form__invulveld {
     width: 32rem;
 }

 .form__invulveld--big {
     width: 70rem;
 }

 .form__invulveld--bigtext {
     width: 70rem;
 }
}

@media only screen and (max-width: 1019px) {

    .footer__gegevens {
        font-size: 1.5rem;
    }

    .footer__name {
        font-size: 1.7rem;
    }

    .footer__background {
        grid-gap: 3rem;
    }

    .home__textwrapper {
        width: 60rem;
        flex-direction: column-reverse;
    }

    .home__text::before {
        background-size: 2rem 2rem;
        background-repeat: no-repeat;
        margin-bottom: -1rem;
    }

    .home__text {
        font-size: 1.4rem;
        display: block;
        line-height: 4rem;
    }

    .home__deel2 {
        width: 60rem;
    }

    .home__text2 {
        font-size: 1.4rem;
        line-height: 2.8rem;
    }

    .nav__border {
        display: flex;
        flex-direction: column;
        border: none;
        line-height: 3rem;
    }

    .nav_wrapper {
        justify-self: center;
        margin-top: 3rem;
    }

    .home_grid {
        grid-template-columns: 1fr 1fr;
    }

    .header__afbeelding {
        grid-row: 2;
        margin-left: 5rem;
    }

    .header__afbeeldingrechts {
        margin-right: 5rem;
        grid-row: 2;
    }

    .home__middle {
        grid-column: 1/3;
    }

    .whitesection {
        width: 70rem;
    }

    .other__title {
        font-size: 5rem;
    }

    .other__text--width {
        width: 60rem;
    }

    .mission__quote {
        margin-left: 20rem;
    }

    .methodiek__grid {
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr;
    }

    .methodiek__section {
        display: flex;
    }

    .methodiek__image {
        width: 20rem;
        height: 15rem;
        display: flex;
        align-self: center;
        margin-left: 1rem;
    }

    .methodiek__title {
        font-size: 2.5rem;
    }

    .metho__textwrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .wiezijnwe__grid {
        grid-template-columns: 30rem 30rem;
        grid-gap: 2rem;
    }

    .contact__wrapper {
        width: 60rem;
    }

    .form__invulveld {
        width: 28rem;
    }

    .contact__form {
        width: 60rem;
    }

    .contact__form--name {
        grid-gap: 1rem;
    }

    .form__invulveld--big {
        width: 59rem;
    }

    .form__invulveld--bigtext {
        width: 59rem;
    }
}

@media only screen and (max-width: 767px) { 
    .logo {
        margin-left: 5rem;
    }

    .home_grid {
        grid-template-columns: 1fr;
    }

    .home__middle {
        grid-column: 1;
        
    }

    .header__afbeeldingrechts {
        grid-row: 3;
    }

    .home__textwrapper {
        width: 35rem;
    }

    .home__text {
        line-height: 2rem;
        margin-bottom: 2rem;
        text-align: center;
    }

    .home_coachingimage {
        justify-content: center;
        align-self: center;
        margin-top: 5rem;
    }

    .footer__background {
        grid-template-columns: 1fr;

    }

    .header__subitle {
        width: 30rem;
        font-size: 1.5rem;
        
    }

    .header__afbeeldingrechts {
        width: 25rem;
        justify-self: center;
        margin-right: 0rem;
    }

    .header__afbeelding {
        width: 25rem;
        justify-self: center;
        margin-left: 0rem;
    }

    .home__deel2 {
        width: 30rem;
        display: flex;
        justify-content: center;
    }

    .home__deel2wrapper {
        margin: 1rem;
    }

    .nav {
        font-size: 1.2rem;
    }

    .nav__border {
        padding-right: 0rem;
    }

    .header__title {
        font-size: 4rem;
        margin-bottom: 2rem;
    }

    .button {
        font-size: 1.7rem;
    }

    .footer__persoon {
        margin: 0 auto;
        margin-top: -3rem;
    }

    .whitesection {
        width: 34rem;
    }

    .padding {
        padding: 2rem;
    }

    .other__title {
        font-size: 4rem;
    }

    .missiontext__wrapper {
        padding-right: 0rem;
    }

    .other__text {
        font-size: 1.5rem;
        line-height: 3rem;
    }

    .mission__quote {
        margin-left: 5rem;
        font-size: 2rem;
        line-height: 3.5rem;
        width: 20rem;
        margin-bottom: 2rem;
    }

    .other__text--width {
        width: 30rem;
    }

    .methodiek__section {
        flex-direction: column;
    }

    .methodiek__image {
        width: 30rem;
        margin: 0rem;
        height: 23rem;
    }

    .wiezijnwe__grid {
        grid-template-columns: 1fr;
    }

    .contact__form--name {
        grid-template-columns: 1fr;
    }

    .form__invulveld {
        width: 30rem;
    }

    .contact__text {
        font-size: 1.4rem;
    }

    .contact__image {
        display: none;
    }

    .contact__wrapper {
        width: 30rem;
    }

    .contact__form {
        width: 30rem;
    }

    .title--contact {
        font-size: 3rem;
    }
}