/* HEADER */
.menu-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-width);
}

/* FOOTER */
.footer-container {
    max-width: var(--container-width);
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    margin: auto;
}

.footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.footer__col {
    display: flex;
    flex-direction: column;
    color: var(--white);
    gap: var(--content-gap);
}

.footer__col a {
    text-transform: var(--text-tranform);
    color: var(--white);
}

.footer__col a:hover {
    color: var(--brand-color-1);
}

.contact-details-wrapper {
    display: flex;
    gap: var(--content-gap);
    align-items: center;
}

.footer__spacing {
    display: flex;
    flex-direction: column;
    gap: calc(var(--content-gap) / 3);
}

.footer__credits {
    color: var(--white);
    width: fit-content;
    margin: auto;
}

.footer__credits a:hover {
    color: var(--white);
}

.footer__email a {
    text-transform: lowercase;
}

/* FOOTER MOBILE */
@media (max-width:991px) {
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:479px) {
    .footer__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width:350px) {
    .footer__email {
        word-break: break-word;
    }
}

/* HOME */
.hero {
    padding: 0px;
    position: relative;
    display: flex;
    min-height: 100vh;
}

.hero__img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.hero-cta {
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    background-color: var(--overlay);
    color: var(--white);
    width: 100%;
    flex-grow: 1;
    z-index: 1;
    text-align: center;
    gap: var(--content-gap);
    padding-inline: clamp(20px, calc(1.25rem + ((1vw - 3.2px) * 2.6786)), 50px);
    padding-block: 200px;
}

.scroll {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 5rem;
    left: auto;
    right: auto;
}

.hero-cta__heading {
    max-width: 28ch;
}

.hero-cta__p {
    max-width: 60ch;
}

.scroll__link {
    align-items: center;
    text-align: center;
    gap: calc(var(--content-gap) / 3);
    font-family: var(--font-family);
    color: var(--white);
}

.scroll__link:hover {
    color: var(--brand-color-1);
}

.services {
    display: flex;
    flex-direction: column;
    max-width: var(--container-width);
    gap: var(--container-gap);
    margin-inline: auto;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.services-container__heading {
    text-align: left;
}

.services-container__p {
    max-width: 60ch;
    text-align: left;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.services-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--content-gap);
}

.services-card__content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.services-card__p {
    text-align: left;
}

.services-card__img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.services-card__link {
    font-family: var(--font-family);
    text-transform: uppercase;
}

.services-card__link:hover {
    text-decoration: underline;
}

.services-cta {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
}

.services-cta__content-wrapper {
    display: flex;
    gap: var(--content-gap);
}

.trust-grid {
    max-width: var(--container-width);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: auto;
}

.trust-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--content-gap);
}

.trust-container__p {
    color: var(--white);
    font-family: var(--font-family);
    text-transform: uppercase;
}

.home-ons {
    padding: 0px;
}

.home-ons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-ons__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--content-gap);
    padding-inline: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 9.375)), 12.5rem);
    padding-block: clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 2.2321)), 7.5rem);
}

.home-ons__container p {
    max-width: 50ch;
    margin-inline: 0px auto;
}

.home-ons__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.offerte-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white);
    max-width: var(--container-width);
    margin: auto;
}

.offerte-cta__p {
    text-transform: uppercase;
    font-family: var(--font-family);
    font-size: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.1786)), 2rem);
    text-align: center;
}

.end-cta {
    padding: 0px;
}

.end-cta-grid {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 0px;
}

.end-cta__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--overlay);
    padding: clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 6.25)), 10rem);
    position: absolute;
    color: white;
    gap: var(--content-gap);
}

.end-cta__img {
    width: 50%;
    height: 100%;
    min-height: 50rem;
}

.end-cta__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.reviews-container {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    max-width: var(--container-width);
    margin: auto;
    align-items: center;
}

.reviews-card {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--grid-gap);
}

.reviews-card-customer {
    display: flex;
    flex-direction: row;
    gap: var(--content-gap);
}

.reviews-card-customer-details {
    display: flex;
    flex-direction: column;
    gap: calc(var(--content-gap) * 0.5);
}

.reviews-card-customer-rating {
    display: flex;
    flex-direction: row;
    gap: calc(var(--content-gap) * 0.5);
}

/* HOME MOBILE */
@media (max-width:991px) {
    .offerte-cta {
        display: flex;
        flex-direction: column;
        gap: var(--content-gap);
    }

    .reviews-grid {
        grid-template-columns: repeat(1, minmax(0,1fr));
    }
}

@media (max-width:767px) {
    .services-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-ons-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .end-cta-grid {
        flex-direction: column;
    }

    .end-cta__img {
        width: 100%;
        min-height: 10rem;
    }

    .services-card__img {
        height: auto !important;
    }
}

@media (max-width:479px) {
    .trust-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .services-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-card__img {
        max-width: 14rem;
        margin: auto;
        height: auto !important;
    }

    .services-container__heading,
    .services-container__p,
    .services-card__heading,
    .services-card__p,
    .services-card__link,
    .services-cta__heading {
        text-align: center;
    }

    .services-cta__content-wrapper {
        flex-direction: column;
    }

    .services-cta__content-wrapper a {
        text-align: center;
    }
}

/* OVER ONS */
.hero-2 {
    padding: 0px;
    position: relative;
    display: flex;
    min-height: 50vh;
}

.hero-2__img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.hero-2__container {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: var(--overlay-2);
    color: var(--white);
    width: 100%;
    z-index: 1;
    text-align: center;
    padding-bottom: 50px;
}

.hero-2__heading {
    margin-top: 121px;
}

.over-ons-intro {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.over-ons-intro__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--grid-gap) * 2);
    max-width: var(--container-width);
    margin-inline: auto;
}

.over-ons-intro__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--content-gap);
}

.over-ons-intro {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
}

.over-ons-intro__img-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.caddy-img-wrapper {
    position: relative;
    height: calc(clamp(170px, calc(10.625rem + ((1vw - 3.2px) * 57.4545)), 486px) - clamp(100px, calc(6.25rem + ((1vw - 3.2px) * 8.9286)), 200px));
}

.caddy-img {
    position: absolute;
    top: calc(0px - clamp(100px, calc(6.25rem + ((1vw - 3.2px) * 8.9286)), 200px));
    z-index: 1;
}

.hout__img-container {
    position: relative;
    height: calc(clamp(225px, calc(14.0625rem + ((1vw - 3.2px) * 46.9091)), 483px) - clamp(50px, calc(3.125rem + ((1vw - 3.2px) * 4.4643)), 100px));
}

.hout__img {
    position: absolute;
    bottom: calc(0px - clamp(50px, calc(50px + ((1vw - 3.2px) * 4.4643)), 100px));
}

.wie-wij-zijn-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    max-width: var(--container-width);
    margin: auto;
}

.wie-wij-zijn__p {
    column-count: 2;
    column-gap: var(--content-gap);
}

/* OVER ONS MOBILE */
@media (max-width:1150px) {
    .over-ons-intro__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    @media (max-width:350px) {
        .over-ons-intro__grid {
            gap: var(--grid-gap);
        }

        .caddy-img-wrapper {
            height: 300px;
        }
    }
}

@media (max-width:768px) {
    .wie-wij-zijn-wrapper p {
        column-count: 1;
    }
}

@media (max-width:479px) {
    .hero-2__img {
        object-position: 43% 50%;
    }
}

/* DIENSTEN */
.diensten-menu-container {
    display: flex;
    flex-direction: column;
    max-width: var(--container-width);
    gap: var(--container-gap);
    margin: auto;
    align-items: center;
    text-align: center;
}

.diensten-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--grid-gap);
}

.diensten-menu-card {
    position: relative;
}

.diensten-menu-card__overlay {
    background-color: var(--overlay);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0px;
    padding: 2.5rem;
}

.diensten-menu-card__heading {
    color: white;
    text-align: center;
}

.diensten-menu-card__img img {
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: 50% 80%;
}

.diensten-menu-card:hover .diensten-menu-card__overlay {
    background-color: var(--brand-1-overlay);
}

/* DIENSTEN MOBILE */
@media (max-width:767px) {
    .diensten-menu-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

/* VERBOUWEN, RENOVATIE, WONINGUITBREIDING */
.dienst-intro {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dienst-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--grid-gap) * 2);
    max-width: var(--container-width);
    margin-inline: auto;
}

.dienst-intro-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--content-gap);
}

.dienst-intro {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
}

.dienst-intro__img {
    aspect-ratio: 16/9;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.waarom-ons-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    max-width: var(--container-width);
    margin: auto;
}

.waarom-ons__p {
    margin-bottom: var(--content-gap);
}

.services-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-width);
    margin: auto;
    margin-bottom: calc(var(--content-gap) * 1);
}

.services-table__heading {
    background-color: var(--brand-color-2);
    color: var(--white);
    padding-block: clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 0.8929)), 2rem);
    padding-inline: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 2.6786)), 5rem);
}

.services-table-body {
    border: 1px solid var(--brand-color-2);
}

.services-table-body-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,2fr);
}

.services-table-body {
    padding-block: 2rem;
}

.services-table-body-grid div {
    padding-block: clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 0.8929)), 2rem);
    padding-inline: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 2.6786)), 5rem);
}

.services-table__service-column p {
    font-weight: 700;
}

.werkwijze-container {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    width: 100%;
    max-width: var(--container-width);
    margin: auto;
}

.werkwijze-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.werkwijze-card {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.werkwijze-card__heading {
    font-family: var(--font-family-2);
    font-weight: 700;
    text-transform: capitalize;
}

@media (max-width:1150px) {
    .dienst-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--grid-gap);
    }

    .dienst-intro-container {
        order: -1;
    }
}

/* VERBOUWEN, RENOVATIE, WONINGUITBREIDING MOBILE */
@media (max-width:991px) {
    .werkwijze-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:767px) {
    .werkwijze-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .services-table-body-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

/* HOOGWAARDIGE AFWERKING */
.afwerking-container {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    width: 100%;
    max-width: var(--container-width);
    margin: auto;
}

.afwerking-intro-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.afwerking-intro__p {
    max-width: 70ch;
}

.afwerking-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--grid-gap);
}

.afwerking-card {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.afwerking-cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    align-items: center;
    text-align: center;
}

.afwerking-cta-btn-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--content-gap);
}

.afwerking-cta__img {
    width: 100%;
}

.trust-grid-4 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--content-gap);
}

@media (max-width:767px) {
    .afwerking-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .afwerking-cta-btn-wrapper {
        flex-direction: column;
    }
}

@media (max-width:479px) {
    .trust-grid-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .afwerking-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width:349px) {
    .afwerking-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .afwerking-card {
        align-items: center;
    }

    .afwerking-intro-wrapper {
        text-align: center;
    }
}

/* PROJECTEN */
.projecten-container {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    max-width: var(--container-width);
    margin: auto;
    align-items: center;
    text-align: center;
}

.projecten__p {
    max-width: 60ch;
}

.projecten-labels-grid {
    display: flex;
    flex-direction: row;
    gap: var(--content-gap);
    margin-bottom: var(--content-gap);
    flex-wrap: wrap;
    justify-content: center;
}

.projecten-labels__heading {
    background-color: var(--brand-color-1);
    color: var(--white);
    padding: 0.6em 1em;
}

.projecten-card__img {
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: 50% 50%;
}

.projecten-labels__heading:hover {
    background-color: var(--brand-color-2 );
}

.projecten-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--grid-gap);
}

.projecten-card {
    display: flex;
    flex-direction: column;
}

.projecten-card-details {
    background-color: var(--brand-color-2);
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: calc(var(--content-gap) / 4);
    padding: 1em 2em;
    align-items: start;
}

.projecten-card__p {
    font-family: var(--font-family);
    text-transform: uppercase;
    color: var(--brand-color-1);
}

.projecten-card:hover .projecten-card-details {
    background-color: var(--brand-color-1);
    color: var(--white);
}

.projecten-card:hover .projecten-card__p {
    color: var(--white);
}

.projecten-pagination {
    display: flex;
    flex-direction: row;
    gap: calc(var(--content-gap) / 2);
}

/* PROJECTEN MOBILE */
@media (max-width:991px) {
    .projecten-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width:767px) {
    .projecten-grid {
        grid-template-columns: repeat(1, minmax(0,1fr));
    }
}

/* PROJECT SINGLE TEMPLATE */
.project-container {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    max-width: var(--container-width);
    margin: auto;
    align-items: center;
    text-align: center;
}

.project-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.project-images {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
}

.project-images-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--grid-gap);
}

.project-images ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--content-gap);
    padding: 0;
}

.project-images ul li {
    list-style-type: none;
}

a.terug {
    color: var(--brand-color-1);
    margin-top: 15px;
}

a.terug:hover {
    color: var(--white);
}

/* PROJECT SINGLE TEMPLATE MOBILE */
@media (max-width:991px) {
    .project-images ul {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width:767px) {
    .project-images ul {
        grid-template-columns: repeat(1, minmax(0,1fr));
    }
}

/* CONTACT */
.contact-container {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    max-width: var(--container-width);
    margin: auto;
}

.contact-intro {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.contact-form-text {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.contact-form-text__heading {
    color: var(--brand-color-1);
}

.gform_fields {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

/* FAQ SECTION */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    max-width: var(--container-width);
    margin: auto;
}

* Accordion container element */.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.accordion {
    display: flex;
    flex-direction: column;
    gap: calc(var(--content-gap) / 2);
}

.accordion > li {
    margin: 0;
}

/* *
 * Add zero-width space. needed to ensure Safari + VO respect list semantics.
 * Set the before content to position absolute to negate any visible space
 * the before content could add to the document. */
.accordion > li:before {
    content: "\200B";
    position: absolute;
}

/* *
 * Accordion Heading */
.accordion__heading {
    border: 1px solid var(--brand-color-2);
    font-size: inherit;
    margin: -1px 0 0;
}

.accordion__trigger {
    -webkit-appearance: none;
    background-color: var(--brand-color-2);
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--white);
    cursor: pointer;
    display: block;
    font-size: inherit;
    margin: 0;
    padding: 2.5rem 5rem 2.5rem 5rem;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 2;
}

.accordion__trigger:after {
    border-left: .4em solid transparent;
    border-right: .4em solid transparent;
    border-top: .5em solid var(--white);
    bottom: 0;
    content: '';
    height: 0;
    margin: auto;
    position: absolute;
    right: 1em;
    top: 0;
    transition: transform .2s ease-in-out;
    transform-origin: center center;
    transform: rotate(0deg);
    width: 0;
}

.accordion__trigger:hover:after,
.accordion__trigger:focus:after,
.accordion__trigger[aria-expanded="true"]:after {
    border-top-color: #fff;
}

.accordion__trigger[aria-expanded="true"]:after {
    transform: rotate(180deg);
}

/* *
 * This is needed to allow a double tap iOS 11
 * Safari + VO to function correctly, if there
 * are multiple elements (wrapper spans) to layout
 * text nodes within the accordion button.

	-- This is not needed if a button only contains text
	   and no other child nodes wrapping the text --

.accordion__trigger > * {
	pointer-events: none;
} */
.accordion__trigger:hover,
.accordion__trigger:focus {
    background-color: var(--brand-color-2);
    color: var(--white);
    outline: none;
}

.accordion__trigger:focus {
    box-shadow: inset 0 0 0 2px var(--brand-color-2);
}

.accordion__trigger[aria-disabled="true"]:hover {
    background-color: var(--brand-color-2);
    color: #fff;
    cursor: not-allowed;
}

.accordion__trigger[aria-disabled="true"]:focus {
    background-color: var(--brand-color-2);
}

.accordion__panel {
    background-color: var(var(--brand-color-2));
    max-height: 0vh;
    overflow: hidden;
    padding: 0.001em 1.25em;
    position: relative;
    visibility: hidden;
    z-index: 1;
}

.accordion__panel--transition {
    transition: max-height .2s ease-in-out,
		padding-top .2s ease-in-out,
		padding-bottom .2s ease-in-out;
}

.accordion__panel > :last-child {
    margin-bottom: 0;
}

.accordion__panel[aria-hidden="false"] {
    max-height: 100vh;
    overflow: auto;
    padding: 1.25em;
    visibility: visible;
}

.accordion__trigger[aria-expanded="true"] {
    background: var(--brand-color-2);
    color: #fff;
}