@import url('https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,600;0,700;1,600&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

/* GENERAL */
:root {
    --header-font: 'Genos', 'Source Sans Pro';
    --font: 'titillium web', 'Segoe UI', Tahoma, Verdana, sans-serif;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font);
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    margin: 0px;
}

body { 
    background-color: #f7f7f7;
    overflow-x: hidden;
}

/* HEADER */

.header-container {
    position: fixed;
    width: 100svw;
    top: 0;
    z-index: 99;

    display: block;
}

.header-nav {
    margin-top: 40px;
    background-color: #2C2B2B;
    padding-top: 25px;
    padding-bottom: 25px;
}

.header-nav ul{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    list-style: none;
}

.header-nav ul a{
    font-family: var(--font);
    font-size: clamp(15px, 4vw ,23px);
    text-decoration: none;
    color: #FFF;
}

@media (max-width: 800px) {
    .header-wallonia {
        display: none !important;
    }

    .header-nav {
        display: none;
    }
}

.header-nav ul a:hover{
    text-decoration: underline;
}

.nav-img {
    position: absolute;
    width: 170px;
    height: 170px;
    left: 0;
    right: 0;
    margin-inline: auto;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background-color: #2C2B2B;
    border: 3px solid white;

    transform: translateY(-65px);
}

@media (max-width: 1500px) {
    .nav-img {
        display: none;
    }

    .nav-img-spacer {
        display: none;
    }
}

.header-wallonia {
    position: absolute;
    top: 0;

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    width: 100vw;
    height: 40px;

    padding-left: 25px;
    padding-right: 25px;

    background-color: #fff;
}

.header-wallonia a {
    text-decoration: none;
}

.header-rendeux {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 15px;
}

.header-rendeux-text {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 800; 
    color: #2C2B2B;
}

.hamburger-container {
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 99;

    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 45px;

    cursor: pointer;
}

.hamburger-container-up {
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 99;

    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 45px;

    cursor: pointer;
}

.hamburger-line {
    width: 80%;
    height: 5px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}

@media (max-width: 800px) {
    .hamburger-container {
        display: flex !important;
    }
}

.hamburger-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100svw;
    height: 0px;
    z-index: 98;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2C2B2B;

    transition: all 1s ease;
}

.hamburger-nav ul {
    display: none;
    list-style: none;
    padding-left: 0px;
    text-align: center;
}

.hamburger-nav ul a {
    font-family: var(--font);
    font-size: clamp(38px, 4vh , 40px);
    text-decoration: none;
    color: #FFF;
}

.hamburger-nav ul li {
    margin-bottom: 15px;
}

.hamburger-nav.active {
    height: 100vh;
}

.hamburger-nav.active ul {
    display: block;
}

/* ------------------------------------------------------------ */

.footer-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100vw;

    padding-top: 50px;
    padding-bottom: 50px;
    gap: 50px;


    background-color: #2C2B2B;
}

.footer-socials {
    color: #fff;
    flex-grow: 1;
    padding-left: 25px;
    padding-right: 25px;
    align-items: center;
}

.footer-socials h3 {
    text-align: center;
    font-family: var(--font);
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 55px;
}

.footer-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font);
    font-size: 20px;
    font-weight: 700; 
    margin-bottom: 10px;
    align-self: center;
}

.footer-spacer {
    width: 400px;
}

.footer-spacer a {
    color: #fff;
    text-decoration: none;
}

.footer-icons i {
    font-size: 25px;
}

.footer-icons span {
    margin-left: 25px;
}

.footer-devider {
    width: 3px;
    background-color: #fff;
    height: 300px;
    flex-grow: 0;
}

@media (max-width: 1100px) {
    .footer-devider {
        width: 0;
        height: 0;
    }
    
}

.footer-links {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding-left: 25px;
    padding-right: 25px;

    color: #fff;
}

.footer-sitemap {
    width: calc(40% - 25px);
}

.footer-sitemap H3 {
    font-size: 24px;
}

.footer-sitemap ul {
    list-style: none;
    padding-left: 0;
}

.footer-sitemap ul a {
    color: #FFF;
    text-decoration: none;
}

.footer-sitemap ul a:hover {
    text-decoration: underline;
}

.footer-copyright {
    position: absolute;
    bottom: 5px;
    right: 5px;

    color: #fff;
    font-size: 15px;
    font-weight: 200;
}

.footer-email {
    word-wrap: break-word;
}

/* HOVER BUTTON */

.hover-button {
    position: fixed;
    top: 250px;
    right: 0px;
    z-index: 50;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    height: 70px;
    width: 270px;

    transform: translateX(200px);
    transition: all 1s ease-in-out;
    
    background-color: #377951;
    border-radius: 15px 0px 0px 15px; 
    
    cursor: pointer;
}

.hover-button:hover {
    transform: translateX(0);
}

.hover-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 100%;
    border-right: #51A371 1px solid;
}

.hover-icon i {
    font-size: 35px;
    color: #fff;
}

.hover-text {
    padding-left: 15px;
    padding-right: 15px;
    color: #FFF;
    font-family: var(--header-font);
    font-size: 25px;
    font-weight: 400;
}

/* HERO SECTION */

.hero-container {
    position: relative;
    width: 100vw;
}

.hero-title {
    position: absolute;
    top: 250px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #FFF;
    font-family: var(--header-font);
    font-size: clamp(25px, 5vw, 65px);

    text-transform: uppercase;
}

.hero-container img {
    width: 100%;
    height: 40vw;
    min-height: 400px;
    max-height: 550px;
    object-fit: cover;
    object-position: center;
}

.large-hero {
    width: 100%;
    height: 35px;
    background-color: #377951;

    margin-top: 10px;
    margin-bottom: 10px;
}

.small-hero {
    width: 100%;
    height: 20px;
    background-color: #377951;

    margin-bottom: 10px;
}

/* INTRODUCTION SECTION */

.center {
    margin-top: 75px;
    margin-bottom: 75px;

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.introduction {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.introduction img {
    margin-bottom: 45px;
}

.introduction h2 {
    width: 750px;
    text-align: center;
    width: 100%;

    font-size: 40px;
    font-weight: 300; 
    font-family: 'titillium web';

    margin-bottom: 15px;
}

.introduction p {
    text-align: center;
    width: 40%;
    min-width: 350px;

    font-size: clamp(14px, 3vw, 25px);
    font-weight: 200; 
}

.lees-meer {
    font-weight: bold;
}

.short-intro {
    padding: 15px;
    display: none;
}

.long-intro {
    padding: 15px;
    display: none;
}

.visible-intro {
    display: block;
}

.lees-meer {
    cursor: pointer;
}

/* DIVIDER */

.green-divider-container {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 50px;
    margin-bottom: 75px;
}

.green-divider {
    width: 60%;
    height: 2px; 
    border-radius: 50%;
    background: #377951; 
}

.green-divider-price {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 35px;
}

.green-divider-p {
    width: 100%;
    height: 2px; 
    border-radius: 50%;
    background: #377951; 
}

/* ADRESS */

.adress {
    width: 100vw;
    text-align: center;
}

.adress h2 {
    font-size: clamp(30px, 5vw, 55px);
    font-weight: 700; 
}

.adress p{
    font-size: clamp(15px, 5vw, 30px);
    line-height: 10px;
    font-weight: 200;
    font-style: italic;

    margin-bottom: 100px;
    color: #8D8D8D;
}

/* RESIDENTIE FOTOS */

.residentie-fotos {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 10px;

    width: 100vw;
    padding: 0px 50px 50px 50px;
    margin: 50px 0px;

}

.residentie-fotos-left {
    display: flex;
    width: 45%;
    min-width: 300px;
    min-height: 500px;
    cursor: pointer;
}

.residentie-fotos-left img {
    flex-grow: 1;
    height: 100%;
    min-height: 500px;
    width: 100%;
    object-fit: cover;
}

.residentie-fotos-right {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    width: 37%;
    min-width: 300px;
    min-height: 500px;
    height: 100%;
    cursor: pointer;
}

.residentie-fotos-right img {
    flex-grow: 1;
    width: calc(50% - 5px); 
    min-width: 125px;
    object-fit: cover;
}

.residentie-fotos-background {
    position: absolute;
    bottom: 0px;
    height: 75%;
    width: 100%;

    background-color: #2C2B2B;
    
    z-index: -1;
}

@media (max-width: 800px) {
    .residentie-fotos-left {
        width: 100%;
    }

    .residentie-fotos-right {
        width: 100%;
    }
}

.residentie-fotos-link {
    position: absolute;
    bottom: 15px;
    right: 0px;
    left: 0px;
    margin: auto;

    display: flex;
    justify-content: center;

    width: 100%;


    text-decoration: none;
    cursor: pointer;
}

.residentie-fotos-button {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    color: #2C2B2B;
    font-family: var(--header-font);
    font-size: 25px;
    font-weight: 600;
    background-color: #fff;

    padding: 10px;
    border-radius: 15px;
    
    width: 275px;
    height: 50px;

    z-index: 5;
}

.residentie-fotos-button-text {
    height: 100%;
    padding-left: 10px;
    padding-right: 15px;
    flex-grow: 1;
    text-align: center;
    border-right: #2C2B2B 2px solid;

}

.residentie-fotos-button-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    width: 55px;
}

/* MODAL WINDOW */

.modal-photos-background {
    display: none;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;

    padding: 50px;

    background-color: rgba(44, 43, 43, 0.95);

    z-index: 999;
}

.modal-photos-container {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 50vw;
    min-width: 400px;
    height: 50vh;
}

.modal-carousel {
    position: relative;
}

.carousel-images img {
    display: none;
    height: 500px;
    width: 100%;
    object-fit: cover;
}

.carousel-images img.active {
    display: block;
}

.modal-photo-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 35px;

    z-index: 1000;
    color: #fff;
}

.modal-photo-arrows div i {
    cursor: pointer;
}

.modal-arrows-background-left, .modal-arrows-background-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100px;
    z-index: 1050;
}

.modal-arrows-background-left {
    background: linear-gradient(90deg, rgba(44,43,43,0.6194678555015756) 12%, rgba(0,0,0,0) 100%);
}

.modal-arrows-background-right {
    background: linear-gradient(270deg, rgba(44,43,43,0.6194678555015756) 12%, rgba(0,0,0,0) 100%);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 1100;
}

/* FACILITIES SLIDER */

.facilities-slider-wrapper {
    display: flex;
    justify-content: center;
    
    width: 100vw;
    
    margin: 50px 0px;
}

.facilities-slider-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    height: 70px;
    border-radius: 50px;
    padding: 0px 50px;
    background-color: #dbdada;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.15) inset;
}

.facilities-slider-text {
    position: relative;
    display: flex;

    font-size: 20px;

    z-index: 5;
}

.facilities-slider-text span {
    cursor: pointer;
    width: 130px;
    text-align: center;
}

.facilities-slider-text span h3 {
    font-weight: 300;
    font-size: 20px;
}

.facilities-slider-background {
    position: absolute;
    z-index: 1;

    width: 150px;
    height: 55px;

    border-radius: 50px;
    background: #377951;
    transition: all 0.6s ease-in-out;
}

.facilities-slider-background.active1 {
    width: 120px;
    transform: translateX(2px);
}

.slider-overzicht.active  {
    color: #fff;
}

.facilities-slider-background.active2 {
    width: 130px;
    transform: translateX(128px);
}

.slider-gelijksvloers.active {
    color: #fff;
}

.facilities-slider-background.active3 {
    transform: translateX(252px);
}

.slider-verdiep.active {
    color: #fff;
}

.facilities-slider-background.active4 {
    width: 100px;
    transform: translateX(405px);
}

.slider-tuin.active {
    color: #fff;
}

.facilities-slider-background.active5 {
    width: 175px;
    transform: translateX(500px);
}

.slider-boerderij.active {
    color: #fff;
}

.huisregels-container {
    width: 100vw;
    text-align: center;
    margin-bottom: 100px;
    padding: 0px 50px;
}

.huisregels-container span {
    font-size: 20px;
    font-weight: 500;
}

.huisregels-container span a {
    color: black;
}

/* FACILITEITEN INFO */

.facilities-container {
    display: flex;
    justify-content: center;
    padding: 0px 50px;
    margin: 50px 0px 50px 0px;
    font-size: clamp(10px, 3vw, 12px);
}

.facilities-overzicht {
    position: relative;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    padding-bottom: 50px;
}

.facilities-overzicht.active {
    display: flex;
}

.facilities-gelijksvloers {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
}

.facilities-gelijksvloers.active {
    display: flex;
}

.facilities-verdiep {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
}

.facilities-verdiep.active {
    display: flex;
}

.facilities-tuin {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
}

.facilities-tuin.active {
    display: flex;
}

.facilities-boerderij {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
}

.facilities-boerderij.active {
    display: flex;
}

.info-container {
    flex-grow: 1;
    margin-bottom: 50px;
    max-width: 900px;
    padding: 0px 50px;
}

@media (max-width:  800px) {
    .info-container {
        padding-left: 100px;
        padding-right: 100px;
    }
}

.info-title {
    display: block;
    width: 100%;
    border-bottom: 1px solid #2C2B2B;
    margin-bottom: 15px;
    
    font-size: clamp(15px, 3vw, 25px);
    font-weight: 700;
}

.info-text {
    display: flex;
    flex-wrap: wrap;

    font-size: clamp(15px, 3vw, 25px);
}

.info-prijzen {
    display: flex;
    flex-wrap: wrap;

    padding-right: 25px;
    font-size: clamp(15px, 3vw, 25px);
}

.info-prijzen .full-size {
    line-height: clamp(15px, 3vw, 25px);
    margin-bottom: 40px;
}

.half-size {
    width: 50%;
    min-width: 350px;
    line-height: 50px;
}

.full-size {
    width: 100%;
    min-width: 350px;
    line-height: 50px;
}

.kinderboerderij-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kinderboerderij-img-full {
    position: relative;
    width: 100%;
    height: 400px;
}

.kinderboerderij-img-full:hover .kinderboerderij-background {
    display: flex;
}

.kinderboerderij-img-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kinderboerderij-img-half {
    position: relative;
    width: calc(50% - 5px);
    aspect-ratio: 1/1;
    max-height: 400px;
}

.kinderboerderij-img-half img{
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
    max-height: 400px;
}

.kinderboerderij-img-half:hover .kinderboerderij-background {
    display: flex;
}

.kinderboerderij-background {
    display: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 43, 43, 0.85);

    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: #fff;
}

@media (max-width: 1000px) {
    .info-container {
        width: 700px;
    }
}

@media (max-width: 800px) {
    .info-container {
        width: 100%;
    }
}


/* ACTIVITEITEN SLIDER */

.slider-placer {
    position: relative;
    z-index: 0;
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    width: 100vw;
    margin-bottom: 50px;
}

.slider-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 400px;
    height: 70px;
    border-radius: 50px;
    padding-left: 25px;
    padding-right: 25px;
    background-color: #dbdada;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.15) inset;
}

.slider-container h3 {
    position: relative;
    z-index: 2;
    width: 33%;
    text-align: center;
    cursor: pointer;
}

.slider-background {
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 55px;

    border-radius: 50px;
    background: #377951;
    transition: all 0.6s ease-in-out;
}

.slider-background.left {
    transform: translateX(-15px);
}

.slider-background.right {
    transform: translateX(215px);
}

.active-slider {
    color: white;
}


/* Image Slide-in */

.adventure-title { 
    font-size: clamp(35px, 3vw, 50px);
    font-weight: 600; 
    font-family: 'titillium web';
    text-align: center;
    color: #2C2B2B; 

    width: 100%;
    margin-bottom: 75px;
}

.info-text-activiteit {
    display: block;
    width: 100vw;
    padding: 0px 50px;
    color: #2C2B2B;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 50px;
    margin-top: 50px;
}

.activiteit-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
    margin-bottom: 200px;
}

.sightseeing-section {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
    margin-bottom: 200px;
}

.activiteit-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 70%;
}

.activiteit-img {
    position: static;
    z-index: 2;
    width: 50%;
    aspect-ratio: 1 / 0.75;
    min-width: 300px;
    transition: all 1s ease-in-out;
}

.translate-left {
    transform: translateX(-100%);
}

.translate-right {
    transform: translateX(100%);
}

.activiteit-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activiteit-text {
    position: static;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 50%;
    min-width: 300px;
    padding: 15px;
    background: white;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);;
}

.activiteit-text H3 {
    width: 100%;
    color: #2C2B2B;
    text-align: center;
    font-size: clamp(25px, 5vw, 40px);
    font-weight: 700;
}

.activiteit-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
}

.activiteit-text p {
    text-align: center;
    color: #2C2B2B;
    font-size: clamp(12px, 1vw, 25px);
    font-weight: 400;
    padding: 0px 20px;
}

.activiteit-text a {
    width: 100%;
    text-align: center;
    color: #2C2B2B;
    text-decoration: none;
}

.price-color {
    color: black;
}

.price-no-color {
    color: #C8C8C8;
}

.car-time i {
    margin-right: 10px;
}

@media (max-width: 857px) {
    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }
}

/* CONTACT PAGE */

.contact-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    justify-content: center;
}

.contact-container h2 {
    font-size: clamp(35px, 3vw, 50px);
    font-weight: 600; 
    font-family: 'titillium web';
    text-align: center;
    color: #2C2B2B; 

    width: 100%;
    margin-bottom: 75px;
}

.contact-left {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    width: 50%;
    min-width: 400px;
    height: 500px;

    padding: 50px;
}

.contact-left h3 {
    color: #2C2B2B;
    text-align: center;
    font-family: var(--header-font);
    font-size: 40px;
    font-weight: 600;
    width: 100%;
}

.contact-spacer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.contact-info {
    width: 400px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.contact-info i {
    color: #2C2B2B;
    font-size: 25px;
}

.contact-info span {
    flex-grow: 1;
    text-align: center;

    color: #2C2B2B;
    font-size: 20px;
    font-weight: 400;
}

.contact-right {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: center;
    align-self: center;
    padding: 50px;
    width: 50%;
    min-width: 400px;
    height: 650px;
    background-color: #2C2B2B;
}

.contact-right h3 {
    color: #fff;
    text-align: center;
    font-family: var(--header-font);
    font-size: 40px;
    font-weight: 600;
    width: 100%;
}

.contact-right form {
    width: 80%;
}

.contact-img {
    flex-grow: 1;
    width: 50%;
    min-width: 400px;
    height: 500px;
}

.contact-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nieuwsbrief-info {
    width: 400px;
}

.nieuwsbrief-info p {
    font-size: clamp(12px, 4vw, 20px);
    font-weight: 200;
    padding-bottom: 100px;
}

.contact-left form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.form-group {
    position: relative;
    display: flex;
    justify-content: start;
    width: 100%;
    margin-bottom: 15px;
}

.form-group input {
    height: 40px;
    width: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #fff;
    margin-bottom: 25px;
    color: #fff;
    font-size: 25px;
}

.form-group textarea {
    width: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-size: 25px;
}

.form-group label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #fff;
    font-size: 25px;
    transition: all 0.5s ease-in-out;
}

.form-group input:not(:placeholder-shown):valid + label,
.form-group textarea:not(:placeholder-shown):valid + label {
    top: -1.5em;
    font-size: 0.8em;
    color: #a1a1a1;
}

.news-email-form {
    border-bottom: 2px solid #2C2B2B !important;
    color: #2C2B2B !important;
}

.news-email-label {
    color: #2C2B2B !important;
    top: -1.5em !important;
    font-size: 1em !important;
}

.error-input {
    border-bottom: 2px red solid !important;
}

.error-text {
    color: red;
}

form {
    position: relative;
}

.form-submit {
    position: absolute;
    bottom: 0;
    right: 0;

    display: flex;
    flex-wrap: nowrap;
    color: #FFF;
    text-align: center;
    align-items: center;
    font-family: var(--header-font);
    font-size: 25px;
    font-weight: 600;
    background-color: #377951;
    padding: 10px;
    border-radius: 15px;
    text-decoration: none;
    width: 275px; 

    cursor: pointer;
}

.form-submit span {
    border-right: #51A371 2px solid;
    height: 100%;
    padding-left: 10px;
    padding-right: 15px;
    flex-grow: 1;
}

.form-submit i {
    padding-left: 10px;
    width: 45px;
}

.submit-spacer {
    bottom: -50px
}

/* Google embeds */

.maps-embed {
    width: 100vw;
    height: 450px;

    margin-top: 100px;
    margin-bottom: 100px;
}

.maps-embed iframe {
    width: 100vw;
    height: 100%;
    border: none;
    outline: none;
}

.afstand-routes {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin-bottom: 100px;
}

/* REVIEW CONTAINER */

.review-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
    margin-top: 200px;
    margin-bottom: 200px;
}

.review-container H3 {
    width: 100%;
    color: #2C2B2B;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 50px;
}

.review-form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    max-width: 1000px;
}

.review-info {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    width: 50%;
}

.review-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: calc(50% - 25px);
    height: 125px;
    padding: 0px 25px 25px 25px;
    min-width: 400px;
}

.review-stars {
    display: none;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: calc(50% - 25px);
    height: 125px;
    padding: 0px 25px 25px 25px;
    min-width: 400px;
    font-size: 50px;
}


.review-text p {
    color: #2C2B2B;
    text-align: center;
    font-size: 25px;
    font-weight: 400;
}

.review-message {
    width: 100%;
}

.review-text-box {
    padding-left: 15px;
}

.review-form-submit {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: var(--header-font);
    font-size: 25px;
    font-weight: 600;
    background-color: #377951;
    padding: 10px;
    border-radius: 15px;
    text-decoration: none;
    width: 275px; 

    cursor: pointer;
}

.review-form-submit span {
    border-right: #51A371 2px solid;
    height: 100%;
    padding-left: 10px;
    padding-right: 15px;
    flex-grow: 1;
    text-align: center;
}

.review-form-submit i {
    padding-left: 10px;
    width: 45px;
}

.review-form-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
    min-width: 250px;
}

.review-form-group input {
    height: 40px;
    width: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #fff;
    margin-bottom: 25px;
    color: #fff;
    background-color: #2C2B2B;
    font-size: 25px;
    padding-left: 15px;
}

.review-form-group textarea {
    width: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #fff;
    color: #fff;
    background-color: #2C2B2B;
    font-size: 25px;
}

.review-info .review-form-group {
    width: calc(50% - 25px);
    flex-grow: 1;
}

.review-form-group label {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #fff;
    font-size: 25px;
    transition: all 0.5s ease-in-out;
}

.review-form-group input:not(:placeholder-shown):valid + label,
.review-form-group textarea:not(:placeholder-shown):valid + label {
    top: -1.5em;
    font-size: 0.8em;
    color: #a1a1a1;
}

.review-approve {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: 25px;
    gap: 50px;
}

.approve-box {
    display: flex;
    flex-wrap: nowrap;
    gap: 50px;
    align-items: center;
    padding-left: 25px;
}

.approve-box input {
    height: 25px;
    width: 25px;
}

.review-approve .review-form-submit {
    height: 50px !important;
    width: 275px !important;
}

.approve-box p span {
    font-size: 12px;
    font-style: italic;
    font-weight: 300; 
}

.approve-box input[type="checkbox"]:checked {
    background-color: #2C2B2B;
}

/* PROMOTIES */

.promotie-containers {
    position: relative;
    width: 100vw;

    margin-top: -50px;
}

.promotie-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 100%;
    background-color: #2C2B2B;
    z-index: -1;
}

.promotie-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;

    width: 100%;
    padding-top: 100px;
    padding-right: 25px;
}

.promotie-info {
    position: relative;
}

.promotie-info img {
    object-fit: cover;
}

.promotie-img-background {
    position: absolute;
    bottom: 0;

    height: 100px;
    width: 100%;
    background: linear-gradient(0deg, #377951 0%, #377951 14.06%, rgba(55, 121, 81, 0.00) 100%);

    transition: all 0.3s ease-in-out;
}

.promotie-info span {
    position: absolute;
    bottom: 15px;

    width: 100%;

    color: #FFF;
    text-align: center;
    font-family: var(--header-font);
    font-size: 30px;
    font-weight: 600;

    transition: all 0.3s ease-in-out;
}

.promotie-img-line {
    position: absolute;
    bottom: -9px;

    height: 6px;
    width: 100%;
    background-color: #377951;
}

.promotie-info:hover .promotie-img-background {
    height: 100%;
}

.promotie-info:hover span {
    transform: translateY(-100px);
    font-size: 40px;
}

.vroegboek-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;

    height: 0px;

    overflow: hidden;

    transition: all 0.7s ease;
}

.vroegboek-info h3 {
    width: 100%;

    color: #2C2B2B;
    text-align: center;
    font-size: 65px;
    font-weight: 600;

    margin-bottom: 50px;
}

.vroegboek-info p {
    text-align: center;
    width: 50vw;
    max-width: 750px;
    min-width: 300px;
    margin-bottom: 75px;

    font-size: clamp(12px, 5vw, 23px);
}

.vroegboek-info.hover {
    height: auto;

    padding-top: 75px;
}

.info-spacer {
    margin-top: 50px;
    margin-bottom: 0px !important;
}

/* CALENDAR*/

.section-calendar {
    position: relative;
    margin-bottom: 150px;
}

.calendar-locked {
    padding-top: 50px;
    padding-bottom: 50px;
    top: -50px;
    position: absolute;
    width: 100%;
    height: calc(100% + 100px);
    z-index: 5;
    background-color: rgba(44, 43, 43, 0.75);
}

/* PRIVACY */

.legal_container {
    width: 45vw;
    min-width: 300px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;

    padding-bottom: 150px;
}

.legal_container h2 {
   margin-top: 35px;
   margin-bottom: 15px;
}

.info {
    padding-top: 15px;
}

.vragen {
    margin-top: 50px;
}

/* ERROR 404 */
.missing_page {
    height: 100svh;
}

.missing_page img {
    width: 100vw;
    height: 90svh;
    min-height: 400px;
    max-height: 2000px;
    object-fit: cover;
    object-position: center;
}

.title-404 {
    margin-top: -300px;
}

/* Call to action */

.call-to-action {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 450px;
    background-color: #2C2B2B;
    margin-bottom: 150px;
}

.cta-left {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 50%;
    overflow: hidden;
}

.cta-left img {
    position: relative;
    z-index: 2;
}

.cta-cirle {
    position: absolute;
    z-index: 1;
    right: -200px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 700px;
    width: 600px;
    border-radius: 50%;
    background: radial-gradient(78.54% 59.55% at 50% 50%, #2C2B2B 51.04%, #333 75.52%, rgba(255, 255, 255, 0.78) 87.5%, rgba(51, 51, 51, 0.78) 98.96%);
}

.cta-right {
    display: block;
    width: 50%;
    top: 0;
    bottom: 0;
    margin: auto auto;
    padding-left: 50px;
    padding-right: 50px;
}

.cta-right h3 {
    width: 100%;
    color: #FFF;
    font-size: clamp(30px, 5vw, 55px);
    font-weight: 700; 
}

.cta-right p {
    max-width: 500px;
    color: #FFF;
    font-size: clamp(14px, 3vw, 25px);
    font-weight: 275;
    line-height: 40px; /* 48.04px */ 
}

@media (max-width: 800px) {
    .cta-left {
        display: none;
    }

    .cta-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-left: 25px;
        padding-right: 25px;
    }

    .cta-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.cta-right a {
    text-decoration: none;
}

/* PROMOTIES */

.announcement {
    width: 100%;
    text-align: center;
    font-size: clamp(1vw, 50px, 5vw);
    font-family: var(--header-font);
    margin-bottom: 50px;
    margin-top: -50px;
    background-color: #377951;
    color: #fff;
    padding: 10px 25px 10px 25px;
}

.promo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0px 50px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.promo-actie {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    border-radius: 15px;
    cursor: pointer;
}

.promo-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    padding: 10px 25px;
    gap: 25px;
    width: 100%;
    height: 80px;
    border-radius: 15px;
    background-color: #fff;
}

.promo-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2C2B2B;
    border-radius: 50%;
    height: 50px;
    aspect-ratio: 1/1;
}

.promo-logo img {
    height: 90%;
}

.promo-text h4 {
    font-size: clamp(17px, 3vw, 20px);
}

.promo-text p {
    color: #8D8D8D; 
    font-size: clamp(12px, 3vw, 17px);
    margin-top: -8px;
}

.promo-drop {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-end;
    padding-bottom: 15px;
    width: 100%;
    height: 70px;
    background-color: #377951;
    border-radius: 15px;

    transform: translateY(-75px);
    transition: all 0.7s ease;
    box-shadow: 0px 9px 5px 0px rgba(0, 0, 0, 0.35);
}

.promo-drop p {
    color: #FFF; 
    font-size: 20px;
    font-weight: 600;
}

.cta-btn {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #2C2B2B;
    font-family: var(--header-font);
    font-size: 15px;
    font-weight: 600;
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
    width: 150px;
    cursor: pointer;
    height: 30px;
}

.cta-btn-text {
    border-right: #2C2B2B 2px solid;
    padding-left: 10px;
    padding-right: 15px;
    flex-grow: 1;
    text-align: center;
}

.cta-btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 45px;
}

.promo-actie:hover .promo-drop {
    border-radius: 0px 0px 15px 15px;
    transform: translateY(-15px);
}

.promo-btn {
    margin-top: 50px;
    margin-left: 50px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #2C2B2B;
    font-family: var(--header-font);
    font-size: 25px;
    font-weight: 600;
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
    width: 275px;
    cursor: pointer;
    width: 275px;
    height: 50px;
}

.promo-btn-text {
    border-right: #2C2B2B 2px solid;
    height: 100%;
    padding-left: 10px;
    padding-right: 15px;
    flex-grow: 1;
    text-align: center;
}

.promo-btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    width: 45px;
}


/* STAR RATING */

.fa-star {
    color: #daa520;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
}

.fa-star:hover ~ .fa-star {
    color: #d3d3d3;
}

.selected {
    color: #daa520;
}

.unselected {
    color: #d3d3d3;
}

.no-promo {
    text-align: center;
    font-size: 35px;
    font-weight: 200;
    margin-bottom: 50px;
    margin-top: -50px;
    color: #2C2B2B;
    padding: 10px 25px 10px 25px;
    border-radius: 15px;
}

.promo-announcement-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

.promo-card {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 350px;
    padding: 15px 25px 15px 25px;
    background-color: #377951;
    border-radius: 15px;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.25);
}

.promo-card p {
    flex-grow: 1;
    font-family: var(--header-font);
    color: #fff;
    font-weight: bold;
    font-size: 25px;
    margin-bottom: 25px;
    width: 100%;
}

.promo-code-container {
    width: 100%;
}

.promo-tag {
    font-family: var(--header-font);
    color: #fff;
    font-size: 20px;
    font-style: italic;
}

.promo-line {
    height: 2px;
    border-radius: 50px;
    background-color: #fff;
    width: 100%;
    margin-bottom: 5px;
}

.promo-code {
    font-family: var(--header-font);
    display: flex;
    width: 100%;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
}

/* GRONDPLAN BTN */

.blueprint-link {
    position: absolute;
    bottom: 0px;
    right: 0;
    display: flex;
    justify-content: center;
    text-decoration: none;
    width: 100%;

    cursor: pointer;
}

.blueprint-button {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-family: var(--header-font);
    font-size: 25px;
    font-weight: 600;
    background-color: #377951;

    padding: 10px;
    border-radius: 15px;
    
    width: 275px;
    height: 50px;

    z-index: 5;
}

.blueprint-button-text {
    height: 100%;
    padding-left: 10px;
    padding-right: 15px;
    flex-grow: 1;
    text-align: center;
    border-right: #51A371 2px solid;

}

.blueprint-button-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    width: 55px;
}

/* BLUEPRINT MODAL */

.blueprint-modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;

    width: 100%;
    height: 100%;
    background-color: rgba(44, 43, 43, 0.95);;

    z-index: 999;

    padding: 50px;
}

.blueprint-modal img {
    max-width: 550px;
    max-height: 515px;
}

@media (max-width: 1350px) {
    .blueprint-modal img {
        max-width: 300px;
        max-height: 281px;
    }
}

.modal-blueprint-close {
    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 1100;
}

/* DROPDOWN FACILITIES */
.facilities-dropdown {
    position: relative;
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
}

.facilities-dropdown select {
    padding: 10px;
    font-size: 22px;
    font-weight: 500;
    border: 1px solid #ccc;
    border-radius: 15px;
    min-width: 300px;
    cursor: pointer;
    text-align: center;
}
  
.facilities-dropdown select:focus {
    outline: none;
}
  
  /* Styling the dropdown arrow */
.facilities-dropdown select::-ms-expand {
    display: none;
}
  
.facilities-dropdown select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
  
  /* Styling dropdown options */
.facilities-dropdown option {
    font-size: 16px;    
}

.dropdown-select {
    position: relative;
}

.dropdown-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 250px;
}

@media (max-width: 900px) {
    .facilities-slider-wrapper {
        display: none;
    }

    .facilities-dropdown {
        display: flex;
    }
}

.prijs-container {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: -50px;
}

.adventure-title {
    margin-top: 100px;
    width: 100%;
}


/* Prijzen */
.prijs-overzicht {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    padding-bottom: 50px;

    padding-left: 50px;
}

/* MINI FARM MARKUP */

.center-farm {
    width: 100%;
    display: flex;
    justify-content: center;
}

.farm-title {
    width: 100%;
    font-size: clamp(30px, 5vw, 55px);
    font-weight: 700; 
    text-align: center;
}

.general-farm-information {
    max-width: 850px;
    margin-bottom: 100px;
    padding-left: 25px;
    padding-right: 25px;
}

.general-farm-information h3 {
    font-size: clamp(15px, 5vw, 25px);
    font-weight: 700; 
    margin-top: 45px;
    margin-bottom: 10px;
}

.general-farm-information p { 
    font-size: clamp(14px, 3vw, 25px);
    font-weight: 200;
}

/* NEWS CONTAINER */

.news-container {
    width: 100vw;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 100px;
    margin-top: -50px;
}

.news-container h2 {
    text-align: center;
    width: 100%;
    font-size: 40px;
    font-weight: 300;
    font-family: var(--header-font);
    margin-bottom: 15px;
    margin-bottom: 50px;
}

.news-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    gap: 50px;
    scrollbar-width: thin;
    padding: 0px 5px;
}

@media (max-width: 1000px) {
    .news-wrapper {
        justify-content: flex-start;
    }
}

.news-item-container {
    position: relative;
    max-width: 400px;
    min-width: 300px;
    height: 500px;
    margin-bottom: 15px;

    border-radius: 15px;

    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    
}

.news-img-details {
    position: relative;
    width: 100%;
    height: 30%;
}

.news-img-details img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.news-details {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 5px 10px;

    background-image: linear-gradient(180deg, rgba(44,43,43,0.2) 0%, rgba(0,0,0,0.8) 100%);
}

.news-location, .news-date {
    color: #fff;
    width: 100%;
}

.news-location i, .news-date i {
    margin-right: 15px;
}

.news-text {
    padding: 15px 15px;
}

.news-button {
    position: absolute;
    bottom: 15px;
    right: 15px;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    background-color: #377951;
    padding: 10px;
    border-radius: 15px;
    text-decoration: none;
    cursor: pointer;
}

.news-button a {
    color: #FFF;
    font-family: var(--header-font);
    text-decoration: none;
}

.news-aanrader {
    position: absolute;
    top: 15px;
    right: 15px;
}

.news-aanrader span {
    background-color: #bb1b1b;
    border-radius: 15px;
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.news-img-details-large {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.news-img-details-large img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 15px;
}

.news-details-large {
    display: flex;
    flex-wrap: wrap;
    height: 10%;
    width: 100%;
    padding: 5px 10px;
    border-radius: 0px 0px 15px 15px;
    background-color: #2C2B2B;
}

.news-location-large, .news-date-large {
    color: #fff;
    width: 100%;
}

.news-location-large i, .news-date-large i {
    margin-right: 15px;
}

.tourisme-logo {
    margin-top: 25px;
}