/**************/
/* section 1*/
/**************/
main section:nth-of-type(1) {
    background-image: var(--background-img-main);
    display: grid;
      grid-template-rows: 
     1fr
      2em
      5em
      max-content
      4em
      max-content
      3em;
    grid-template-columns: 
    2fr 6fr 2fr;

    position: relative;
}



main section:nth-of-type(1) img:nth-of-type(1) {
    width: 100%;
    height: auto;
    display: block;
    grid-row:1/2;
    grid-column:1/-1;
}

/* h1 */
section h1 {
    font-family: "chaney-wide";
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: self-end;
    z-index: 1;
    grid-row:1/3;
    grid-column:2/3;
}

section h1 strong:nth-of-type(1) {
    background-color: black;
    color: var(--color-white);
    font-size: 1.2em;
    font-family: "parking-regular";
}

section h1 strong:nth-of-type(2) {
    background-color: black;
    color: var(--color-white);
    text-align: center;
    max-width: max-content;
    font-size: 1.2em;
    font-family: "parking-regular";
}

section h1 strong:nth-of-type(3) {
    background-color: #8004e1;
    color: var(--color-white);
    font-weight: lighter;
    font-size: medium;
}


main section:nth-of-type(1) p {
    color: var(--color-p);
    grid-row:4/5;
    grid-column:2/3;
    justify-self: center;
}

main p {
    font-family: "archia-regular";
    text-align: center;
    width: 85%;
    line-height: 160%;
    font-size: large;
}

main section:nth-of-type(1)>img:last-of-type {
    width: 15%;
    display: block;
    justify-self: center;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    grid-row:3/4;
    grid-column:2/3;
    align-self: center;
}


/* toegankelijkheid */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
@media (prefers-reduced-motion: no-preference){
    main section:nth-of-type(1)>img:last-of-type {
        width: 15%;
        display: block;
        animation-name: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        grid-row:3/4;
        grid-column:2/3;
        align-self: center;
    }
      
}


/* animatie scroll icon */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.5rem);
    }
}


main section:nth-of-type(1) a {
    background-color: var(--color-white);
    border-radius: 20em;
    padding: 1em 2em 1em 2em;
    color: var(--color-text-black);
    text-align: center;
    width: max-content;
    height: max-content;
    justify-self: center;
    grid-row:6/7;
    grid-column:2/3;
}

main section:nth-of-type(1) a:hover {
    translate: 0 .5em;
}

main section:nth-of-type(1) a:active {
    background-color: var(--color-background-pink);
    color: var(--color-white);
    transition: color .3s ease 0s, background-color .3s ease 0s;
}


/* grootte van de verschillende foto's */

main section:nth-of-type(2) ul li:nth-of-type(1) img {
    width: 10em;
}

main section:nth-of-type(2) ul li:nth-of-type(2) img {
    width: 5em;
}

main section:nth-of-type(2) ul li:nth-of-type(3) img {
    width: 12em;

}

main section:nth-of-type(2) ul li:nth-of-type(4) img {
    width: 12em;

}

main section:nth-of-type(2) ul li:nth-of-type(5) img {
    width: 6em;

}


















/**************/
/* section 2*/
/**************/
main section:nth-of-type(2) {
    background-color: var(--background-color-main2);
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    grid-template-rows: 
    3em 
    max-content 
    3em
    max-content
    3em;
    position: relative;
}


main section:nth-of-type(2) ul {
    gap: 1em;
    grid-column: 2 / 3;
    grid-row: 4/5;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  
}

main section:nth-of-type(2) h2 {
    color: #000000;
    font-family: "archia-regular";
    font-weight: 300;
    font-size: 103%;
    grid-column: 1/4;
    grid-row: 2/3;
    justify-self: center;

}



















/**************/
/* section 3*/
/**************/
main section:nth-of-type(3) li img {
    width: 100vw;
    height: auto;
}

main section:nth-of-type(3) {
    height: 64dvw;
}

main section:nth-of-type(3) button img {
    width: 9%;
}


main section:nth-of-type(3) ul {
    display: flex;
    flex-direction: row;
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-background-pink) transparent;
}

main section:nth-of-type(3) li {
    width: 100%;
}

/* toegankelijkheid */
@media (prefers-reduced-motion: no-preference) {
    main section:nth-of-type(3) svg:first-of-type{
        animation-name: slideinleft2;
        animation-duration: 3s;
        animation-iteration-count:infinite;
        z-index: 1;
    }
}





















/**************/
/* section 4*/
/**************/

main section:nth-of-type(4) {
    background-color: var(--background-color-main2);
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    position: relative;
    z-index: -1;
}
main section:nth-of-type(4) li {
    /* display: flex;
    flex-direction: column-reverse; */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1em;
}

main section:nth-of-type(4) p {
    grid-row:1/2;
    justify-self: center;
}

main section:nth-of-type(4) ul{
    grid-column: 2 / 3;
    justify-self: center;
    display: flex;
    gap: 4em;
    flex-direction: column;
    align-items: center;
    padding: 4em 0;
}









/**************/
/* section 5*/
/**************/
main section:nth-of-type(5) {
    background-image: var(--background-img-main);
    display: grid;
      grid-template-rows:
      2em /* 1/2 */
      max-content/* 2/3 */
      1em /* 3/4 */
      max-content/* 4/5 */
      3em/* 5/6 */
      max-content/* 6/7 */
      4em/* 7/8 */
  8em/* 8/9 */; 
    grid-template-columns:1fr 6fr 1fr;
    position: relative;
}
main section:nth-of-type(5) h2 {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-row:2/3;
    grid-column:2/3;
}

main section:nth-of-type(5) h2 strong:nth-of-type(1) {
    background-color: #8004e1;
    font-weight: lighter;
    font-size: medium;
    font-family: "chaney-wide";
    color: var(--color-text-white);
}

main section:nth-of-type(5) h2 strong:nth-of-type(2) {
    background-color: black;
    font-size: 1.9em;
    font-family: "parking-regular";
    color: var(--color-text-white);
}

main section:nth-of-type(5) p:first-of-type {
    justify-self: center;
    grid-row:4/5;
    grid-column:2/3;
}



main section:nth-of-type(5) label,
main section:nth-of-type(5) input {
    display: flex;
    flex-direction: column;
}

/* toegankelijkheid */
main section:nth-of-type(5) input:focus {
    border-style: dashed;
    border-color: var(--color-background-pink);
    border-width: 0.3em;
}



/* standaard icoon (leeg) */
main section:nth-of-type(5)
input:placeholder-shown {
    background-image: var(--icon-default);
}

/* chatgpt */
/* https://chatgpt.com */
/* per input het standaard icoon */
#first-name { --icon-default: url("../images/namebadge.png"); }
#last-name  { --icon-default: url("../images/namebadge.png"); }
#email      { --icon-default: url("../images/emailemoji.png"); }
#phone      { --icon-default: url("../images/phoneemoji.png"); }
#company-name {--icon-default: url("../images/companyemoji.png"); }
#referral {--icon-default: url("../images/guestemoji.webp"); }
#find-us { --icon-default: url("../images/findusemoji.webp"); } 

/* valid */
main section:nth-of-type(5)
input:required:valid:not(:placeholder-shown) {
    border-color: var(--color-valid);
    background-image: url("../images/valid.png");
}

/* invalid */
main section:nth-of-type(5)
input:required:invalid:not(:placeholder-shown) {
    border-color: var(--color-invalid);
    background-image: url("../images/invalid.png");
}

main section:nth-of-type(5) ol {
    display: flex;
    flex-direction: column;
    gap: 2em;
}
main section:nth-of-type(5) form{
    justify-self: flex-start;
    grid-row:6/7;
    grid-column:2/3;
}

main section:nth-of-type(5) input {
    background-color: var(--color-white);
    font-family: "archia-regular";
    color: var(--color-text-black);
    width: 90%;
    color: var(--color-text-black);
    padding: 3.5% 3.5% 3.5% 3em;
    appearance: none;
    border-color: var(--color-black);
    caret-color: var(--caret-color);
    border-width: 0.2em;
    border-style: solid;
}

main section:nth-of-type(5) p img {
    width: 10%;
}


    main section:nth-of-type(5) p img {
        width: 10%;
    }


main section:nth-of-type(5) p:last-of-type {
    width: 70%;
    justify-self: center;
    font-size: medium;
    grid-row:8/9;
    grid-column:2/3;
}


main section:nth-of-type(5) label {
    font-family: "archia-regular";
}



input {
	background-size:1.5em auto;
	background-repeat:no-repeat;
	background-position:.5em center;
}

/* main section:nth-of-type(5)
input:placeholder-shown {
    background-image: var(--icon-default);
} */


/* #first-name, #last-name {
    background-image: url("/images/namebadge.png");
}

#email {
    background-image: url("/images/emailemoji.png");
}

#phone {
    background-image: url("/images/phoneemoji.png");
}
#company-name {
    background-image: url("/images/companyemoji.png");
}

#referral {
    background-image: url("/images/guestemoji.webp");
}
#find-us {
    background-image: url("/images/findusemoji.webp");
} */
main section:nth-of-type(5) li:nth-of-type(6) label {
    width: 80%;
}

main section:nth-of-type(5) button:active{
    background-color: var(--backgroud-color-button-white);
    color: var(--color-text-black);
}

main input {
    background-color: var(--color-text-white);
}

main section:nth-of-type(5) form button {
    color: var(--color-text-white);
    text-align: center;
    width: max-content;
    font-family: "archia-regular";
    padding: 1em 2em 1em 2em;
    border-radius: 10%;
    background-color: var(--backgroud-color-button-black);
    cursor: pointer;
margin: 10% 0 0 0;
    
}