/**************************************************
Body
**************************************************/
body {
    margin-right: 0;
    padding-right: 0;
}

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

.button-center{
    justify-content: center;
}
/**************************************************
Header banner
**************************************************/
.header-container {
    background-color: rgb(240, 240, 240);
    border-bottom: 1px solid rgb(224, 224, 224);
}

.header-a-button{
    text-decoration: none;
    color: #156634;
}

.header-a-button:hover{
    background-color: rgb(224, 224, 224);
}

.header-a-button img{

    width: 64px;
    height: auto;
}

.header-column-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-logo {
    max-width: 50%;
    height: auto;
}

.inner-row-header{
    height: 50%;
    width: auto;
    border-left: 1px solid rgb(224, 224, 224);
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-row-header:hover{
    background-color: rgb(224, 224, 224);
    color: #156634;
}

.border-1px-bottom-gray{
    border-bottom: 1px solid rgb(224, 224, 224);
}

.inner-row-header-h2{
    text-decoration: none;
    height: 50%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    display: inline-block;
}

.header-navigation-container{
    border-top: 1px solid rgb(230, 230, 230);
    
}

.navigation-container-column{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(240, 240, 240);
    height: auto;
    
}

.navigation-container-column a{
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    color: #156634;
}

.navigation-container-column a:hover{
    color: rgb(0, 140, 255);
}

.navigation-container-column div{
    text-align: center;
}

.inner-row-navigation{
    background-color: rgb(240, 240, 240);
    height: 100%;
    width: auto;
    border-left: 1px solid rgb(230, 230, 230);
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-row-navigation:hover{
    background-color: rgb(230, 230, 230);
    color: #156634;
    cursor:default;
}

.inner-row-navigation-p{
    text-decoration: none;
    padding-right: 0;
    height: 100%;
    width: auto;
    border-left: 1px solid rgb(230, 230, 230);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    display: inline-block;
}

/**************************************************
Dynamic banner
**************************************************/
.banner{
    margin:0;
    background-color: rgb(0, 140, 255);
    display: flex;
    align-items: center;
    height: 10vh;
    overflow: hidden;
}

.scroll{
    white-space: nowrap;

}

.scroll div{
    display: flex;
    gap:2em
}

.scroll p{
    font-size: 4em;
    color:white;
    font-weight: bold;
    margin-bottom: 0;
    line-height: 10px;
}

.RightToLeft {
    animation: RightToLeft 20s infinite linear;
}

@keyframes RightToLeft {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-50%)
    }
}

/**************************************************
Producten
**************************************************/
.width_80{
    padding-left: 10%;
    padding-right: 10%;
}

.width_80 h1{
    padding-top: 10px;
    text-align: center;
    color: #156634;
    font-weight: bold;
}

.animals-container img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    padding-top: 25px;
    transition: transform 0.3s ease;
    position: relative;
}
.animals-container h3{
    text-align: center;
    padding-top: 10px;
    color:#156634;
    font-weight: bold;
}
.animals-container img:hover{
    transform: scale(0.9);
}

/**************************************************
kennisbank
**************************************************/
.kennisbank{
    text-decoration: none;
    background-color: #156634;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 10vh;
    overflow: hidden;
    font-size: 4em;
    font-weight: bold;
}

.kennisbank:hover{
    background-color: #1f8847;
    color: white;
}

/***********************************************
Slider
***********************************************/
.hero{
    background-color: rgb(240, 240, 240);
    height: 600px;
    position: relative;
    margin-bottom: 0;
}

.hero h1{
    text-align: center;
    padding-top: 80px;
}

.slide-row{
    display: flex;
    width: 2400px;
    transition: 0.5s
}

.slide-col{
    width: 800px;
    height: 400px;
    position: relative;
}

.user-img{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
}

.user-img img{
    height: 100%;
    border-radius: 10px;
}

.user-text{
    background: rgb(0, 140, 255);
    width: 550px;
    height: 350px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
    color: white !important; 
    padding: 5px;
    box-sizing: border-box;
    z-index: 2;
    
}

.user-text p{
    font-size: 18px;
    line-height: 24px;
    padding: 15px;
}

.user-text h3{
    margin: 10px 15px;
}

.container-testimonial{
    width: 800px;
    height: 400px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.indicator{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -50px;
}

.btn_slider{
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 4px;
    border-radius: 15px;
    background: rgb(0, 140, 255);
    cursor: pointer;
    transition: 0.5s;
}

.active{
    width: 45px;
}

.testimonial{
    width:100%;
    height: 100%;
    overflow: hidden;
}

/**************************************************
kennisbank
**************************************************/
.jaren{
    text-decoration: none;
    background-color: #156634;
    color: white;
    text-align: center;
    height: 10vh;
    font-size: 4em;
    font-weight: bold;
}

/************************************************
Over Index
************************************************/
.row-over-index{
    padding-left: 10%;
    padding-right: 10%;
    position: absolute;
    padding-top: 15px;
    margin-bottom: 15px;
    height: 200px;
}

.over-index-text p{
    color: rgb(0, 140, 255);
    font-weight: bold;
}
.over-index-text h2{
    color:#156634 ;
    font-weight: bold;
}

.over-img {
padding-bottom: 100px;
}


.over-img img{
    margin-top: 10px;
    height: auto;
    width: 100%;
    border-radius: 8px;
}

/************************************************
Footers
************************************************/
.footer-index{
    margin-top: 600px;
    padding-top: 20px;
    background-color: rgb(224,224,224);
    height: auto;
    width: 100%;
    position: relative;
    margin-bottom: 0;
    position: absolute;
}

.footer{
    padding-top: 20px;
    background-color: rgb(224,224,224);
    height: auto;
    width: 100%;
    position: relative;
    margin-bottom: 0;
    position: absolute;
}

footer img{
    height: 64px;
    width: auto;
}

footer h2{
    color:#156634;
    font-weight: bold;
}

footer a{
    text-decoration: none;
    color: black;
}

.text{
    color: black;
}

/******************************************
Over pagina groene banner
******************************************/
.over-banner{
    text-decoration: none;
    background-color: #156634;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 10vh;
    overflow: hidden;
    font-size: 3em;
    font-weight: bold;
}

.over-banner .border-left-1px-green{
    border-left: 2px solid #13582e;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-over, .row-wie, .row-wat{
    padding-left: 10%;
    padding-right: 10%;
}

/*****************************************
Kennisbankpagina
*****************************************/
.card-title img{
    height: 64px;
    width: 64px;
    border: 4px solid #156634;
    border-radius: 50%;
    background-color: #156634;
}
.card-title a{
    text-decoration: none;
    font-weight: bold;
    color: #13582e;
    margin-left: 1%;
}

.card-title a:hover{
    color: rgb(0, 140, 255);
}

.animals-container-small .width_80 {
    width: 80%;
    margin: 0 auto; /* Center the container */
}

.animals-container-small .col-4 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    text-align: center;
}

.animals-container-small img {
    width: 50%;
    height: auto;
    border-radius: 50%;
    padding-top: 25px;
    transition: transform 0.3s ease;
    position: relative;
}

.animals-container-small h3 {
    padding-top: 10px;
    color: #156634;
    font-weight: bold;
}

.animals-container-small img:hover {
    transform: scale(0.9);
}

/*******************************************
Contactpagina
*******************************************/
/* CSS voor het contactformulier en de video */
#contact {
    position: relative;
    background-color: rgb(230, 230, 230);
}

#contact h1{
    color: #13582e;
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

#contact .half {
    display: flex;
    align-items: center;
}

#contact video {
    max-width: 100%;
    height: 100%;
    border-radius: 20px;
}

@media (max-width: 767px) {
    #contact .half {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*******************************************
Nieuws
*******************************************/
.nieuws h1{
    color: #13582e;
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}