:root {
    --bs-primary: #916C04;
    --bs-secondary: #F8F9FA;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #212529;
}

.btn-primary {
    background-color: #916C04;
    border-color: #916C04;
}

.btn-primary:hover {
    background-color: #7A5803;
    border-color: #7A5803;
    text-decoration: none;
}

.logo {
    max-height: 140px;
}

.text-primary {
    color: #916C04 !important;
}

.text-primary:hover {
    color: #7A5803 !important;
    text-decoration: none;
}

.ratio16x9custom {
    width: 100%;
    height: 500px;
}

.map-iframe {
    border: 0;
    width: 100%;
    height: 500px;
}

.hero {
    height: 700px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-image {
    background-image: url('../images/hero.webp');
}

.property-hero-image {
    background-image: url('../images/property-hero.webp');
}

.impressum-hero-image {
    background-image: url('../images/pool-site-view.webp');
}

.contact-hero-image {
    background-image: url('../images/accommodation-facilities.webp');
}

.thumbnail {
    width: auto;
    margin: 0 auto;
    cursor: pointer;
}

.lightbox-image {
    width: 100%;
}

.hero h1 {
    font-size: 1.7rem;
}

@media screen and (max-width: 768px) {
    .navbar-nav a {
        width: 100%;
        text-align: center;
        padding: 5px 0px;
        margin: 10px 0px;
    }

    .thumbnail {
        margin: 10px 0;
    }

    .lightbox-image {
        width: 100%;
    }

    .hero {
        height: 400px;
    }

    .logo {
        max-height: 100px;
    }
}