/* css voor alles van de voorpagina op taakbalk en footer na */
main {
    margin-top: 70px;
    padding: 0px;
    position: relative;
}

/* hero afbeelding */
main .hero {
    position: relative; 
    text-align: center; 
}

main .hero img { 
    height: auto;
    width: 100%;
    object-fit: cover; /* Houdt de aspectratio intact */
    opacity: 0.8; /* 80% zichtbaar */
    min-height: 60vh; /* heeft altijd 60% van het voor scherm */
}
.overlay-text {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
    font-family: 'BirdFont';
}

main .overlay-text h6 {
    font-size: 4.6rem;
    text-align: center;
    font-weight: normal; /* geen dikgedrukte letter */
    margin: 10px;
}

main .overlay-text p {
    font-size: 3.0rem;
    text-align: center;
}

/*buttons */
section button {
    font-size: 1em;
    padding: 10px 20px;
    background-color:#FAD081; 
    color: black;
    border: none;
    border-radius: 1px; 
    cursor: pointer;
    transition: background-color 0.3s ease; /* Voor een vloeiende overgang */
    font-family: 'Goldfont';
    margin-right: 20px;
}

section button:hover {
    background-color: #C78B1B; /* Iets donkerder geel bij hover */
}


/* about stukje, 1e stukje*/
main .about {
    background-color: #FDFAF2;
    padding: 40px;
    margin: 40px 80px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

main .about img {
    height: auto;
    width: 400px;
    margin-right: 50px;
}

main .about .text {
    max-width: 60%;   
    align-items: flex-start; 
}

main .about h2 {
    font-family: 'BakerFont';
    font-size: 2.8vi;
    font-weight: normal;
}

main .about p {
    font-family: 'BakerFont';
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 20px;
}

.text button {
    margin-top: auto;
    align-content: center;
    margin-right: 20px;
}


/*menu stukje, 2de stukje*/
main .menu {
    background-color: #FDFAF2;
    padding: 40px;
    margin: 0px 80px;
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

main .menu img {
    height: auto;
    width: 400px;
    margin-left: 50px;
}

main .menu .text2{
    max-width: 60%;
    border-top: 10px;
    border-bottom: 20px;
}

main .menu h2 {
    font-family: 'BakerFont';
    font-size: 2.8rem;
    font-weight: normal;
    text-align: start;
}

main .menu p {
    font-family: 'BakerFont';
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

.text2 button {
    margin-top: auto;
}


/*feedback gedeelte */

.feedback {
    margin-top: 40px;
    position: relative;
    
}

main .feedback img {
    height: auto;
    width: 100%;
    opacity: 0.4;
    position: absolute;
    z-index: -10;
}

.feedback h3 {
    font-size: 70px;
    font-family: 'BirdFont';
    font-weight: normal;
    position: relative;
    z-index: -9;
    text-align: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.review {
    display: flex;
    position: relative;
    z-index: -9;
}

.stars i {
    color: #FAD081; 
    margin-right: 5px; 
    font-size: 1.3rem; 
}

.review h5 {
    font-family: 'GoldFont';
    font-size: 1.7rem;
    font-weight: normal;
    text-align: left;
    margin-bottom: 9px;
}

.review p {
    font-family: 'BakerFont';
    font-size: 17px;
    text-align: left;
    margin-top: 9px;
}

.reviewbox {
    background-color: rgba(255, 255, 255, 0.8);
    margin: 30px;
    padding: 30px
    
}

.feedbackbutton {
    text-align: center;
    margin-bottom: 20px;
}