section.subHeader {
    background-image: url(../../images/banner-over-ons.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -400px;
}

.main-container {
    /*background: url(../../images/bg-login-register.jpg);*/
    background-size: cover;
    background-repeat: no-repeat;
}

.info-page {
    background: #f5f5f5;
    padding: 50px 0;
}

.info-page.diap {
    padding-top: 0;
}

.info-page h2 {
    font-size: 30px;
    font-family: var(--SubheaderFont);
}

.info-page div.info-page-wrap {
    padding: 2% 0;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    align-items: center;
}

section.info-page img {
    max-width: 550px;
    border-radius: 10px;
}

@media (min-width: 1200px) {
    section.subHeader {
        background-position: 100px -145px;
    }
    
    }
    
    @media (max-width: 650px) {

    .info-page {
        padding: 25px;
    }

    .info-text {
        margin-bottom: 0;
    }
    
    .info-page div.info-page-wrap {
        grid-template-columns: 100%;
    }
    
    section.info-page img {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .text-image-container a.registerButton {
        text-align: center;
        width: 100%;
    }
    }

form#formUserData {
    display: block;
    margin-left: auto;
    background: #fff;
    padding: 50px 30px;
    border-radius: var(--ThumbRadius);
    margin-top: -75px;
    width: 500px;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
    z-index: 2;
    border: 3px solid var(--ButtonColor);
    display: none;
}

form#formUserData h2 {
    margin-bottom: 25px;
    grid-column-start: 1;
    grid-column-end: 4;
    font-family: var(--SubheaderFont);
    font-size: 40px;
}

form#formUserData input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: var(--ButtonRadius);
    padding: 10px;
    margin-bottom: 10px;
    display: block;
}

form#formUserData button[type="submit"] {
    background: var(--ButtonColor);
    color: var(--ButtonTextColor);
    font-family: var(--ButtonTextFont);
    padding: var(--ButtonPadding);
    border: none;
    width: 100%;
    display: block;
    border-radius: var(--ButtonRadius);
}

form#formUserData button[type="submit"]:hover {
    background: var(--ButtonColorHover);
    color: var(--ButtonTextColorHover);
    transition: var(--ButtonTransition);
    cursor: pointer;
}

.item-wrap h2, .review-page h2, .heading_container h2 {
    font-size: 30px;
    font-family: var(--SubheaderFont);
}

.review-page h2 {
    text-align: center;
    margin-bottom: 2%;
}

section.how-section .heading_container p {
    max-width: 750px;
    text-align: center;
}

.text-image-container a.registerButton {
    display: inline-block;
    padding: 10px 45px;
    background-color: #ff7241;
    color: #ffffff;
    border-radius: var(--ButtonRadius);
    -webkit-transition: all .3s;
    transition: all .3s;
    border: none;
    margin-top: 15px;
    font-family: var(--ButtonTextFont), sans-serif;
}

a#register-new-account {
    margin-top: 25px;
    display: block;
    color: var(--ButtonColor);
}

a#register-new-account:hover {
    color: var(--ButtonColorHover);
    transition: var(--ButtonTransition);
    cursor: pointer;
}

a#register-new-account i {
    margin-right: 5px;
}

a#wachtwoord-vergeten {
    display: block;
    margin-top: 10px;
    color: #000000;
}

a#wachtwoord-vergeten i {
    margin-right: 5px;
}

a#wachtwoord-vergeten:hover {
    color: var(--ButtonColorHover);
    transition: var(--ButtonTransition);
    cursor: pointer;
}

.info-text {
    margin-bottom: 25px;
}

.paramSecond {
    text-transform: capitalize;
}

.testimonial-image {
    position: absolute;
    left: -50px;
    bottom: 0px;
}

section.review-page { 
    margin-left: auto;
    margin-right: auto;
    column-gap: 50px;
    padding: 5% 0;
    background: #f5f5f5;
    position: relative;
}

.review-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1170px;
    column-gap: 25px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    position: relative;
}

article.review {
    border: 1px solid #ccc;
    padding: 25px;
    border-radius: var(--ThumbRadius);
    background: #fff;
    display: grid;
    grid-template-columns: 20% auto;
    align-items: flex-start;
    column-gap: 25px;
}

article.review:hover {
    border-color: var(--ButtonColor);
}

div.starRating i {
    color: rgb(255, 182, 18);
}

.score {
    background: var(--ButtonColor);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
    width: 65px;
    border-radius: 150px;
    font-size: 30px;
    padding-top: 5px;
    position: relative;
}

.score::before {
    width: 17px;
    height: 17px;
    content: '';
    position: absolute;
    left: 6px;
    background: var(--ButtonColor);
    transform: rotate(80deg);
    bottom: 0;
}

span.review-title {
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
    font-family: var(--SubheaderFont);
}

.img-box img {
    width: 100%;
    height: auto;
}

section.text-image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 2% 0;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
    gap: 50px;
    z-index: 2;
    position: relative;
}

section.text-image-container-wrap {
    background: #f7f3ed;
    padding: 5% 0;
    position: relative;
}

img.service-image {
    position: absolute;
    bottom: -100px;
    right: -50px;
    z-index: 0;
    max-width: 650px;
}

section.register-wrapper-end {
    background: #1e464b;
    color: #fff;
    text-align: center;
    padding: 5%;
}

section.register-wrapper-end h2 {
    font-family: var(--SubheaderFont);
}

form#formUserDataEnd {
    max-width: 650px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

form#formUserDataEnd input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: var(--ButtonRadius);
    padding: 10px;
    margin-bottom: 10px;
    display: block;
}

form#formUserDataEnd button[type="submit"] {
    background: var(--ButtonColor);
    color: var(--ButtonTextColor);
    font-family: var(--ButtonTextFont);
    padding: var(--ButtonPadding);
    border: none;
    width: 100%;
    display: block;
    border-radius: var(--ButtonRadius);
}

form#formUserDataEnd a#wachtwoord-vergeten {
    color: #fff;
}

@media only screen and (max-width: 600px) {
    section.register-wrapper-end {
      border-radius: 5px;
      padding: 35px;
    }

    .testimonial-image {
        position: relative;
        left: unset;
        bottom: unset;
        max-width: 80vw;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    section.text-image-container {
        grid-template-columns: 100%;
        padding: 25px;
    }

    img.service-image {
         display: none;
    }

    .review-page h2 {
        margin-bottom: 25px;
    }

    section.header-content-container {
        z-index: 2;
        position: relative;
    }

    section.header_bg_box::after {
        width: 350px;
    }

    .item-wrap h2, .review-page h2, .heading_container h2 {
        font-size: 20px;
    }

    section.header_bg_box {
        padding: 0;
    }

    h1.page-title {
        padding: 25px 0;
    }

    form#formUserData h2 {
        font-size: 25px;
    }

    .customerRatingSystem { 
        margin-top: 50px;
    }

  }

  .customerRatingSystem {
    text-align: center;
  }