.titel {
    background-image: url("HeaderAchtergrond_HulsenSchilderwerken.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 250px;
}

.titel h1 {
    color: white;
    font-size: 60px;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    text-align: center;
}

.titel button {
    background-color: #ee6810;
    border: none;
    padding: 10px 40px;
    border-radius: 5px;
    color: white;
    font-size: 40px;
    margin-top: 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.5s;
}

.titel button:hover {
    background-color: #bd701d;
    transform: scale(1.1);
    transition: 0.5s;
}

.alinea1 {
    margin: 50px 150px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s, transform 1s;
}

.alinea1.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.alinea2 {
    background-color: #383A39;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.diensten-rij1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
}

.diensten-rij2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
}

.diensten-rij3 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 50px;
}

.diensten-rij1 button, .diensten-rij2 button, .diensten-rij3 button, .alinea3 button{
    background-color: #ee6810;
    border: none;
    padding: 10px 40px;
    border-radius: 5px;
    color: white;
    font-size: 15px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.5s;
}

.diensten-rij1 button:hover, .diensten-rij2 button:hover, .diensten-rij3 button:hover, .alinea3 button:hover{
    background-color: #bd701d;
    transform: scale(1.1);
    transition: 0.5s;
}

.diensten-rij1 h2, .diensten-rij2 h2, .diensten-rij3 h2 {
    height: 50px;
}

.staalfoto {
    width: 470px;
    height: 393px;
    object-fit: cover;
    border-radius: 30px 30px 0 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.texenfoto {
    width: 470px;
    height: 393px;
    object-fit: cover;
    border-radius: 30px 30px 0 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.keukenfoto {
    width: 470px;
    height: 393px;
    object-fit: cover;
    border-radius: 30px 30px 0 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.houtwerkfoto {
    width: 470px;
    height: 393px;
    object-fit: cover;
    border-radius: 30px 30px 0 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.houtrotfoto {
    width: 470px;
    height: 393px;
    object-fit: cover;
    border-radius: 30px 30px 0 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.waterfoto {
    width: 470px;
    height: 393px;
    object-fit: cover;
    border-radius: 30px 30px 0 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.staal, .texen, .keuken, .houtwerk, .houtrot, .water {
    background-color: white;
    margin: 0 15px;
    border-radius: 30px;
    padding-bottom: 25px;
    width: 470px;
    height: 523px;
}

.staal, .keuken, .houtrot {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 1s, transform 1s;
}

.texen, .houtwerk, .water {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 1s, transform 1s;
}

.staal.fade-in-left, .texen.fade-in-right, .keuken.fade-in-left, .houtwerk.fade-in-right, .houtrot.fade-in-left, .water.fade-in-right {
    opacity: 1;
    transform: translateX(0);
}

.staal.fade-in-left, .texen.fade-in-right {
    opacity: 1;
    transform: translateX(0);
}

.container h2, .alinea2 a {
    padding: 0 25px;
}

.alinea3 {
    margin: 50px 150px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s, transform 1s;
}

.alinea3.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.alinea4 {
    margin: 50px 150px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s, transform 1s;
}

.alinea4.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.review-rij1, .review-rij2 {
    display: flex;
    justify-content:space-around;
    align-items:    start;
    margin-bottom: 15px
}

.review1, .review2, .review3, .review4 {
    width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

@media (max-width: 1023px) {
    .alinea1 {
        margin: 50px;
    }

    .staal, .texen, .keuken, .houtwerk, .houtrot, .water {
        background-color: white;
        margin: 0 15px;
        border-radius: 30px;
        padding-bottom: 200px;
        width: 300px;
        height: 300px;
    }

    .staalfoto {
        width: 300px;
        height: 300px;
    }

    .texenfoto {
        width: 300px;
        height: 300px;
    }

    .keukenfoto {
        width: 300px;
        height: 300px;
    }

    .houtwerkfoto {
        width: 300px;
        height: 300px;
    }

    .houtrotfoto {
        width: 300px;
        height: 300px;
    }

    .waterfoto {
        width: 300px;
        height: 300px;
    }

    .alinea3 {
        margin: 50px;
    }

    .titel button {
        width: 500px;
    }

    .diensten-rij1 h2, .diensten-rij2 h2, .diensten-rij3 h2 {
        height: 90px;
    }
    
    .alinea4 {
        margin: 50px;
    }
}

@media (max-width: 767px) {
    .diensten-rij1 {
        flex-direction: column;
    }

    .diensten-rij2 {
        flex-direction: column;
    }

    .diensten-rij3 {
        flex-direction: column;
    }

    .staal, .texen, .keuken, .houtwerk, .houtrot, .water {
        margin-bottom: 30px;
    }

    .titel {
        padding: 100px;
    }

    .titel h1 {
        font-size: 40px;
    }

    .titel button {
        width: 300px;
        font-size: 20px;
    }

    .alinea1 {
        margin: 50px 30px;
    }

    .alinea3 {
        margin: 50px 30px;
    }
    
    .alinea4 {
        margin: 50px 30px;
    }

    .review-rij1, .review-rij2 {
        flex-direction: column;
    }

    .review1, .review2, .review3, .review4 {
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}