:root {

    --text-light: rgba(255, 255, 255, 0.6);

    --text-lighter: rgba(255, 255, 255, 0.9);

    --spacing-s: 8px;

    --spacing-m: 16px;

    --spacing-l: 24px;

    --spacing-xl: 32px;

    --spacing-xxl: 64px;

    --width-container: 1200px;

}

html {
    overflow-x: hidden;
    width: 100%;
}

.hero-section {

    align-items: flex-start;

    display: flex;

    min-height: 100%;

    justify-content: center;

    padding-top: var(--spacing-xxl);

    padding-left: var(--spacing-l);

    padding-right: var(--spacing-l);

}

.hero2-section {

    align-items: flex-start;

    display: flex;

    min-height: 100%;

    justify-content: center;

    padding-top: var(--spacing-xxl);

    padding-left: 2vw;

    padding-right: 2vw;

}

.hero3-section {

    align-items: flex-start;

    display: flex;

    min-height: 100%;

    justify-content: center;

    padding-top: var(--spacing-xxl);

    padding-left: 2vw;

    padding-right: 2vw;

}

.card-grid {

    display: grid;

    grid-template-columns: repeat(1, 1fr);

    grid-column-gap: var(--spacing-l);

    max-width: var(--width-container);

    width: 100%;

}



@media(min-width: 540px) {

    .card-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media(min-width: 960px) {

    .card-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}



.card-service {

    list-style: none;

    position: relative;

    --bs-card-border-width: 0;

}



.card-service:before {

    content: '';

    display: block;

    padding-bottom: 150%;

    width: 100%;

}



.card__background {

    background-size: cover;

    background-position: center;

    border-radius: var(--spacing-l);

    bottom: 0;

    filter: brightness(0.75) saturate(1.2) contrast(0.85);

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    transform-origin: center;

    transform: scale(1) translateZ(0);

    transition:

        filter 200ms linear,

        transform 200ms linear;

}



.card-service:hover .card__background {

    transform: scale(1.05) translateZ(0);

}



.card-grid:hover>.card-service:not(:hover) .card__background {

    filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);

}



.card-grid:hover>.card-service:not(:hover) .card__heading {

    opacity: 0;

}



.card-grid:hover>.card-service:hover .card__text {

    opacity: 1;

    transition: 0.5s ease-in-out;

}



.card__content {

    left: 0;

    padding: var(--spacing-l);



    position: absolute;

    top: 0;

}



.card__heading {

    color: var(--text-lighter);

    font-size: 1.5rem;

    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);

    line-height: 1.4;

}



.card__text {

    color: var(--text-lighter);

    font-size: 1rem;

    line-height: 1.4;

    margin-bottom: var(--spacing-m);

    opacity: 0;

}



.text-about {

    padding-top: 64px;

}



section#cta {

    background-color: #212529;

    

}


.cta-heading {

    font-size: 2.5rem;

    color: #fff;

    margin-bottom: 0 !important;

}



.btn-lg {

    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;

    font-weight: 700;

}



.google-map {

    line-height: 0;

}



body {

    margin: 0;

}



.hero, .hero2, .hero3 {

    /* Sizing */

    width: 100vw;

    height: 100vh;

    position: relative;



    /* Flexbox stuff */

    display: flex;

    justify-content: center;

    align-items: center;



    /* Text styles */

    text-align: center;

    color: white;



    /* Background styles */

    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../assets/img/header-bg.jpg');

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}

.hero2, .hero3 {
    height: 55vh;
}

.hero h1, .hero2 h1, .hero3 h1 {

    /* Text styles */

    font-size: 58px;

    /* shadow around text */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);

    /* Margins */

    margin-top: 0;

    margin-bottom: 0.5em;

}

@media (max-width: 1196px) {
    .hero h1, .hero2 h1, .hero3 h1{
      font-size: 32px;
    }
  }



.hero h2, .hero2 h2, .hero3 h2 {

    /* Text styles */

    font-size: 24px;

    /* shadow around text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}

@media (max-width: 1196px) {
    .hero h2, .hero2 h2, .hero3 h2{
      font-size: 18px;
      margin-left: 8px;
      margin-right: 8px;
    }
  }


.hero .btn, .hero2 .btn, .hero3 .btn {

    /* Positioning and sizing */

    display: block;

    width: 15vw;



    /* Padding and margins */

    padding: 1em;

    margin-top: 50px;

    margin-left: auto;

    margin-right: auto;



    /* Text styles */

    color: white;

    text-decoration: none;

    font-size: 1.5em;

}



section#hero {

    padding: 0 !important;

}



.scroll {

    width: 30px;

    height: 30px;

    border: 2px solid #fff;

    border-radius: 50%;

    position: absolute;

    bottom: 5%;

    left: calc(50% - 10px);

    animation: down 1.5s infinite;

    -webkit-animation: down 1.5s infinite;

}



.scroll::before {

    content: "";

    position: absolute;

    top: 7.5px;

    left: 9px;

    width: 9px;

    height: 9px;

    border-left: 2px solid #fff;

    border-bottom: 2px solid #fff;

    transform: rotate(-45deg);

}



@keyframes down {

    0% {

        transform: translate(0);

    }



    20% {

        transform: translateY(15px);

    }



    40% {

        transform: translate(0);

    }

}



@-webkit-keyframes down {

    0% {

        transform: translate(0);

    }



    20% {

        transform: translateY(15px);

    }



    40% {

        transform: translate(0);

    }

}



.footer-link {

    text-decoration: none;

    color: #fff;

}



.footer-link:hover {

    color: #0d6efd;

}



footer {

    background-color: #212529;

    color: white;

}


.text1 {

    text-align: center;

    padding: 0 15px;

    background-color: #212529;

    color: white;

    padding-top: 10px;

    padding-bottom: 10px;

}



.text2 {

    text-align: center;

    padding: 0 15px;

    background-color: #0d6efd;

    color: white;

    padding-top: 10px;

    padding-bottom: 10px;

}



footer ul {

    list-style: none;

    padding-inline-start: 0px !important;



}



footer ul li a:hover {

    padding-inline-start: 5px !important;

    transition: 0.5s;



}



footer ul li .footer-contact-link:hover {

    padding-inline-start: 0 !important;

}



footer ul li a {

    text-decoration: none;

    color: white;

}



footer ul li a:hover {

    color: #006FCD;

}



.footer {

    text-align: left;

}



.contact-text i {

    margin-right: 10px !important

}



.contact-text-extra {

    padding-inline-start: 22px !important;

}



.form-control {

    border-radius: 0 !important;

}



#mainNav .navbar-nav .nav-item .nav-link:hover {

    background-color: #0d6efd;
    color: #fff;
    box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .7);
    /* text shadow none */
    text-shadow: none;

}

#mainNav .navbar-nav .nav-item .nav-link.active {

    border-bottom: #006FCD 2px solid;
}



#mainNav .navbar-nav .nav-item .nav-link,

#mainNav .navbar-nav .nav-item .nav-link {

    border-radius: 4px;
    /* text shadow */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    transition-duration: 200ms;

}



.realisatie-items {

    padding-top: 64px;

}





#back-to-top-button {

    display: inline-block;

    background-color: #0d6efd;

    color: #fff;

    width: 50px;

    height: 50px;

    text-align: center;

    border-radius: 4px;

    position: fixed;

    bottom: 30px;

    right: 30px;

    transition: background-color .3s,

        opacity .5s, visibility .5s;

    opacity: 0;

    visibility: hidden;

    z-index: 1000;

    text-decoration: none;

}


#back-to-top-button::before {

    font-size: 24px;

    line-height: 50px;

}



#back-to-top-button:hover {

    cursor: pointer;

    background-color: #006FCD;

}



#back-to-top-button:active {

    background-color: #555;

}



#back-to-top-button.show {

    opacity: 1;

    visibility: visible;

}



.contact-form {

    padding-top: 64px;

}



.image-about {

    background-image: url("../assets/img/header-bg.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.over-ons {

    padding: 5rem 4rem 4rem;

}



#remove-gutter {

    --bs-gutter-x: 0;

}


@media screen and (max-width: 540px) {

    .page-section {

        padding: 6rem 1rem;

    }



    .image-about {

        margin-bottom: 5px;

    }



    .text-about-us {

        padding-top: 0;

        padding-bottom: 0;

    }



    .text-about {

        padding-top: 0;

        padding-bottom: 0;

    }



    .card-service:before {

        padding-bottom: 50% !important;

    }



    .card__text {

        display: none;

    }



    .cta-text {

        text-align: center;

    }



    .cta-text h2 {

        margin-bottom: 10px !important;

    }



    .hero-section, .hero2-section, .hero3-section {

        padding-top: 0;

        padding-bottom: 0;

    }



    .realisatie-items {

        padding-top: 32px;

        padding-bottom: 32px;

    }



    .text1 {

        margin-bottom: 10px;

    }



    .page-section h2.section-heading,

    .page-section .section-heading.h2 {

        margin-bottom: 2rem;

    }



    .contact-form {

        padding-top: 0;

        padding-bottom: 0;

    }



    .card-grid {

        grid-row-gap: var(--spacing-l);

    }



    .over-ons {

        padding: 0 1rem 1rem;

    }



    .klantenervaringen {

        padding-top: 0 !important;

    }



    .klantenervaringen .card {

        margin-bottom: 1rem;

    }



    .swiper-slide {

        width: 100% !important;

    }



    .modal-body {

        padding: 1rem !important;

    }



    .contact-cards {

        flex-direction: column !important;

        margin-bottom: 3rem;

    }



    .card-middle, .card-middle2 {

        margin-left: 0 !important;

        margin-right: 0 !important;

        margin-top: 10px;

        margin-bottom: 10px;

    }





}



.checked {

    color: orange;

}



.klantenervaring-stars {

    text-align: center;

    font-size: 20px;

    margin-bottom: 20px;

    margin-top: 20px;

}



.klantenervaring-text {

    text-align: center;

    margin-bottom: 20px;

}



.klantenervaring-name {

    text-align: center;

}



.klantenervaringen {

    padding-top: 64px;

}



.klantenervaringen .card {

    border-radius: 0;

    border: none;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



.swiper-slide .card {

    --bs-card-border-radius: 0;

    --bs-card-border-width: 0;

}



.swiper {

    width: 100%;

    padding-top: 50px;

    padding-bottom: 50px;

}



.swiper-slide {

    background-position: center;

    background-size: cover;

    width: 500px;

}



.swiper-slide img {

    display: block;

    width: 100%;

}





.cta-button {

    border-radius: 4px;

    background-color: #0d6efd;

    border: none;

    color: #fff;

    text-align: center;

    padding: 8px 16px;

    width: 150px;

    transition: all 0.5s;

    cursor: pointer;

    text-transform: uppercase;

    font-size: 1.25rem;

    font-weight: 700;

    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .7);

}



.cta-button {

    cursor: pointer;

    display: inline-block;

    position: relative;

    transition: 0.5s;

}



.cta-button:after {

    content: '»';

    position: absolute;

    opacity: 0;

    bottom: 10px;

    right: -20px;

    transition: 0.5s;

}



.cta-button:hover {

    padding-right: 24px;

    padding-left: 8px;

    background-color: #014C8C;

}



.cta-button:hover:after {

    opacity: 1;

    right: 10px;

}



.slider-button {

    border-radius: 4px;

    background-color: #0d6efd;

    border: none;

    color: #fff;

    text-align: center;

    padding: 8px 16px;

    transition: all 0.5s;

    cursor: pointer;

    text-transform: uppercase;

    font-size: 1.25rem;

    font-weight: 700;

    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .7);

}



.slider-button:hover i {

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

    -webkit-animation-name: headShake;

    animation-name: headShake;

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

}







@-webkit-keyframes headShake {

    0% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }



    15% {

        -webkit-transform: translateX(-6px) rotateY(-9deg);

        transform: translateX(-6px) rotateY(-9deg);

    }



    30% {

        -webkit-transform: translateX(5px) rotateY(7deg);

        transform: translateX(5px) rotateY(7deg);

    }



    50% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }

}



@keyframes headShake {

    0% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }



    6.5% {

        -webkit-transform: translateX(-6px) rotateY(-9deg);

        transform: translateX(-6px) rotateY(-9deg);

    }



    18.5% {

        -webkit-transform: translateX(5px) rotateY(7deg);

        transform: translateX(5px) rotateY(7deg);

    }



    50% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }

}





.modal-body {

    padding: 3rem 6rem 6rem 6rem;

}



.modal-header {

    border-bottom: none !important;

}



.modal-footer {

    border-top: none !important;

}



.modal-content {

    border-radius: 0 !important;

}





/* width */

::-webkit-scrollbar {

    width: 13px;

}



/* Track */

::-webkit-scrollbar-track {

    background: transparent;

}



/* Handle */

::-webkit-scrollbar-thumb {

    background: #212529;

    height: 82px;

}



.contact-cards {

    flex-direction: row;

}



.contact-cards .card {

    border-radius: 0;

    border: none;

    transition: 0.3s ease-in-out;

}



.contact-cards .card .card-body {

    transition: 0.3s ease-in-out;

}



.contact-cards .card:hover {

    background-color: #0d6efd;

}



.contact-cards .card:hover .card-body {

    color: #fff;

    cursor: pointer;

}



.contact-icon {

    font-size: 2rem;

}



h5.card-title {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 10px;

    margin-top: 10px;

}



.card-middle {

    margin-left: 25px;

    margin-right: 25px;

}

.card-middle2 {
    margin-left: 25px;

    margin-right: 0px;
}



#menuIcon {

    transition: transform 0.3s ease-in-out;

}


.menu-open #menuIcon {

    transform: rotate(90deg);

}


p.breed, p.breed2 {
    width: 45%;
    margin: auto;
    margin-top: 60px;
}

p.breed2 {
    color:#fff;
}


@media only screen and (max-width: 990px) {

    p.breed {
        width: 90%;
        
    }

}

p.cta-color {
    color:#fff;
}



/* GALLERY + OPEN FOTO'S Gallery */