@import url('https://fonts.googleapis.com/css?family=Oxygen');

/* Algemene layout */
body {
    margin: 0;
    font-family: 'Oxygen';
    background-color: #202225;;
    color: #fff;
    overflow-x: hidden;
}
a {
    text-decoration: none;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.125rem;
}

.btn-primary-s {
    display: inline-block;
    vertical-align: middle;
    padding: 1.4em 2.4em 1.3em;
    background-color: #3e5aa8;
    border-radius: 80px;
    color: #ffffff;
    font-weight: 700;
    font-size: 100%;
    max-width: 40px;
    max-height: 20px;
    position: inherit;
    
}

.btn-primary-s:hover {
    background-color: #3e5aa886;
    color: #ffffff !important;
    cursor: pointer;
}

.btn-navbar {
    background-color: #202225;
    color: #ffffff;
    font-weight: 700;
    font-size: 100%;

}

.btn-navbar:hover {
    background-color: #373a3d;
    color: #ffffff ;
    cursor: pointer;
}

/* Navigatie */
.navbar {
    background-color: #34459C;
    color: white;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center; 
    align-items: center;    
    position: relative;
}

.navbar-light .navbar-nav .nav-link {
    color: white;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #3e5aa8;
}


.navbar-brand{
    position: absolute;
    left: 20px;

}

.navbar-brand img {
    width: 100%;
    height: 7.25rem;
    padding-bottom: 20px;
    
}

.navbar-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* hierdoor blijven de buttons boven de navbar-brand staan anders kun je er niet op klikken*/
}

.navbar-buttons .btn {
    padding-top: 10px;
padding-bottom: 10px;
}
/*-------------------------------------------------------------------------------------------------------------*/

/*Top*/
.main-section {

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.main-section hr {
    background-color: white;
    height: 2px;
    width: 100%;
    margin-top: 1em;
}


.index{
    background: url('../img/NikeAction.jpg') no-repeat;
    background-size: cover;
    background-position: center;
}
.huisvesting_img{
    background: url('../img/vesting.jpg') no-repeat;
}
.overons_img{
    background: url('../img/Jan_Nestor.png') no-repeat;
    background-size: 70%;
    background-position: center;
}

video.gallerij-vid {
    width: 65%; 
    height: 65%; 
    object-fit: cover; 
    display: block; 
}


.main-section .content-wrapper {
    width: 100%;
}
/*---------------------------------------------------------------------------------------------------------------*/



/*info*/
.features{
    text-align: center;
}
.title {
    font-weight: 700;
    padding-top: 30px;
}
.description, .card-description, .footer-big p {
    color: #ffffff;
    font-weight: 300;
    
}
/*-------------------------------------------------------------------------------------------------*/




.grid-map-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    min-height: 500px;
  }

/*Image grid*/

.image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
  }

  .image-grid img {
    flex-basis: 35%;
    max-width: 45%;
    margin: 10px;
  }

  .image-grid img:nth-child(3) {
    flex-basis: 30%;
    max-width: 45%;
  }
/*------------------------------------------------------------------------------------------------*/
.vl {
    width: 2px;
    background-color: white;
    height: 100%; 
    position: absolute; 
    left: 53%; 
    top: -22px;
}
/*Map*/

.map-section {
    display: flex;
    justify-content: space-around;
    margin: 20px;
  }

  .map-text {
    width: 45%;
  }

  .map-image {
    width: 100%;
  }

  .map-image img {
    width: 100%;
    height: auto;
  }
/*------------------------------------------------------------------------------------------------*/




/* Gallery Container */
.gallery-container {
    margin-top: 20px;
    width: 90%;
   
}

/* Filter Buttons Styling */
.filter-buttons {
    margin-bottom: 20px;
    text-align: center;
}

.dog-filter-btn,
.cert-filter-btn {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #3e5aa8;
    color: white;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

.dog-filter-btn:hover,
.cert-filter-btn:hover {
    background-color: #2d4372;
}

.dog-filter-btn.active,
.cert-filter-btn.active {
    background-color: #2d4372;
}

/* Dog Gallery Styling */
.dog-gallery-section {
    margin-bottom: 50px;
    
}

.dog-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    flex: 0 0 70%;
}
.gallery-content {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
}



.dog-gallery-text {
    flex: 0 0 30%; 
    padding: 20px; 
    color: #ffffff; 
}

.dog-gallery-text h4 {
    font-size: 1.5em; 
}

.dog-gallery-text p {
    font-size: 1em; 
}
.dog-gallery .gallery-item {
    flex: 1 1 calc(33.333% - 40px);
    max-width: calc(33.333% - 40px);
    margin-bottom: 20px;
    transition: transform 0.3s ease-in-out;
}

.dog-gallery .gallery-item:hover {
    transform: scale(1.05);
}

.dog-gallery .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}


/* Cert Gallery Styling */
.cert-gallery-text {
    flex: 30% 0 0; 
    padding: 20px; 
    color: #ffffff; 
}

.cert-gallery-text h4 {
    font-size: 1.5em; 
}

.cert-gallery-text p {
    font-size: 1em; 
}
.cert-gallery-section {
    display: flex; 
    flex-direction: row; 
    align-items: flex-start;
    margin-top: 50px;
}

.cert-gallery {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
}

.cert-gallery .gallery-item {
    flex: 0 0 70%;
    width: 200px;
    transition: transform 0.3s ease-in-out;
}


.cert-gallery .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}
/*--------------------------------------------------------------------------------------------*/




/*middle*/
.main-content {
    background-color: rgb(49, 51, 55);
    width: 100%;
    clip-path: polygon(50% 10%, 100% 0, 100% 39%, 100% 90%, 50% 100%, 50% 100%, 0 90%, 0% 43%, 0 0);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 70%;
    overflow-x: hidden;
    flex: 2;
    
}

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10vh;
    justify-content: center;
}

.image-container img {
    width: 100%; 
    max-width: 600px; 
    height: 70%; 
    margin-top: 20px;
    padding-top: 7.5vh;
}

.image-container a {
    margin-top: 10px;
    justify-content: center;
}

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    margin-bottom: 100px;
    padding-top: 10vh;
    text-align: center;
    flex: 0 0 30%;
    
}
.icon{
    transition: .5s ease-in-out;
    font-size: 5em;
    color: white;
}

.icon:hover{
    animation-name: bouncy;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    cursor: pointer;
}

.icon a{
    color: white;
}

.icon a:hover{
    color: #3e5aa8;
}

@keyframes bouncy {
    0%   {transform: translateY(0px);}
    25%   {transform: translateY(-10px);}
    50%   {transform: translateY(0px);}
    75%   {transform: translateY(-10px);}
    100%   {transform: translateY(0px);}
}
/*--------------------------------------------------------------------------*/

/*Grid voor over ons*/
.overons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
    color: #fff; 
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(33.333% - 40px); 
}

.grid-item img {
    width: 100%;
    max-width: 300px; 
    border-radius: 5px;
    height: 400px; 
}

.grid-item p {
    margin-top: 8px;
    text-align: center;
    font-size: 1em;
}
/*--------------------------------------------------------------------------*/



/*Flex Box boogaloo*/
.flex-container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    padding: 20px;
    margin: 0 auto; 
    margin-bottom: 10vh;
}

.flex-item {
    flex: 1; 
    margin: 7.5vw;
    min-width: 250px; 
    max-width: 33%; 
}

.flex-item h4, .flex-item p {
    margin: 10px 0;
}
/*-----------------------------------------------------------------------------*/

/*Footer stuff*/
footer {
    background-color: #3e5aa8;
    padding: 20px 0; 
}

.footer-flex {
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    text-align: center; 
}

.footer-content {
    color: white; 
}

.excl {
    display: block;
}
.excl a {
    color: lightblue;
}
/*---------------------------------------------------------------------------------*/



/*Responsive boogaloo*/
@media screen and (max-width: 768px) {
    .dog-gallery .gallery-item {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

    .cert-gallery .gallery-item {
        width: 150px;
    }
    .main-content {
        flex-direction: column; 
        height: auto; 
    }

    .flex-item {
        max-width: 90%; 
        margin: 10px auto; 
    }

    .text-container, .image-container {
        max-width: 100%; 
    }

    .image-grid img {
        flex: 1 1 calc(50% - 20px); 
        max-width: calc(50% - 20px);
    }
}

@media screen and (max-width: 480px) {
    .dog-gallery .gallery-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .cert-gallery .gallery-item {
        width: 120px;
    }
    .navbar-buttons {
        flex-direction: column; 
    }

    .navbar-brand img {
        height: 5rem; 
    }

    .btn-primary-s {
        padding: 1em; 
        max-width: 90%; 
    }
    .image-grid img {
        flex: 1 1 100%; 
        max-width: 100%;
    }


}
/*----------------------------------------------------------*/