@import url('fontawesome/css/font-awesome.min.css');

/* ======================================
   Inter font 
   Copyright 2020 The Inter Project Authors
   Licencja: SIL Open Font License, Version 1.1
   Plik licencji: /fonts/OFL.txt
   Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
   This Font Software is licensed under the SIL Open Font License, Version 1.1.
   This license is copied below, and is also available with a FAQ at:
   https://openfontlicense.org
====================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/static/Inter_18pt-Regular.woff2') format('woff2'),
        url('/fonts/static/Inter_18pt-Regular.ttf') format('truetype');
}

body {
    font-family: 'Inter', 'Verdana', sans-serif;
    margin: 0;
    background-color: #ffffff;
}

section.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/main-hero.jpeg');
    height: fit-content;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom-left-radius: 400px 50px;
    border-bottom-right-radius: 400px 50px;
    margin-top: 0;
    padding-top: 1rem;
    justify-content: center;
}

@supports (background-image: url("images/hero/webp/main-hero.webp")) {
    section.hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/main-hero.webp');
    }
}


section.hero h1 {
    text-align: center;
    align-self: center;
    color: #ffffff;
    font-size: 3em;
    width: 60%;
}

section.hero p {
    color: #ffffff;
    width: 60%;
    align-self: center;
    text-align: center;
}

div.hero-text {
    display: flex;
    flex-direction: column;
    margin-top: 6em;
}

section.subpage-hero-pricing, section.subpage-hero-offer, section.subpage-hero-contact, section.subpage-hero-attractions, section.subpage-hero-gallery,
section.subpage-hero-house-1, section.subpage-hero-house-2, section.subpage-hero-house-3, section.subpage-hero-house-4 {
    height: fit-content;
    display: flex;
    flex-direction: column;
    min-height: 35vh;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    border-bottom-left-radius: 400px 50px;
    border-bottom-right-radius: 400px 50px;
    justify-content: center;
}

section.subpage-hero-offer {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/offer-hero.jpg');
}

@supports (background-image: url("images/hero/webp/offer-hero.webp")) {
    section.subpage-hero-offer {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/offer-hero.webp');
    }
}

section.subpage-hero-pricing {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/pricing-hero.jpg');
}

@supports (background-image: url("images/hero/webp/pricing-hero.webp")) {
    section.subpage-hero-pricing {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/pricing-hero.webp');
    }
}

section.subpage-hero-attractions {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/attractions-hero.jpg');
}

@supports (background-image: url("images/hero/webp/attractions-hero.webp")) {
    section.subpage-hero-attractions {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/attractions-hero.webp');
    }
}

section.subpage-hero-contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/contact-hero.jpg');
}

@supports (background-image: url("images/hero/webp/contact-hero.webp")) {
    section.subpage-hero-contact {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/contact-hero.webp');
    }
}

section.subpage-hero-gallery {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/gallery-hero.jpeg');
}

@supports (background-image: url("images/hero/webp/gallery-hero.webp")) {
    section.subpage-hero-gallery {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/gallery-hero.webp');
    }
}

section.subpage-hero-house-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/house-1-hero.jpg');
}

@supports (background-image: url("images/hero/webp/house-1-hero.webp")) {
    section.subpage-hero-house-1 {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/house-1-hero.webp');
    }
}

section.subpage-hero-house-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/house-2-hero.jpg');
}

@supports (background-image: url("images/hero/webp/house-2-hero.webp")) {
    section.subpage-hero-house-2 {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/house-2-hero.webp');
    }
}

section.subpage-hero-house-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/house-3-hero.jpg');
}

@supports (background-image: url("images/hero/webp/house-3-hero.webp")) {
    section.subpage-hero-house-3 {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/house-3-hero.webp');
    }
}

section.subpage-hero-house-4 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/house-4-hero.jpg');
}

@supports (background-image: url("images/hero/webp/house-4-hero.webp")) {
    section.subpage-hero-house-4 {
        background-image: linear-gradient(rgba(0, 0, 0, 0.329), rgba(0, 0, 0, 0.5)), url('images/hero/webp/house-4-hero.webp');
    }
}

div.subpage-hero-text h1 {
    color: #ffffff;
    font-weight: 400;
    font-size: 2em;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    justify-content: space-between;
    z-index: 1000;
    background: transparent;
    margin-bottom: -4em;
}

.navbar-fixed-top.scrolled {
    background-color: #9d2929;
    transition: background-color 200ms linear;
}

nav a {
    text-decoration: none;
    font-size: 1em;
    color: #ffffff;
    width: fit-content;
    padding: 1em;
}

/* nav a:hover, span.fa.fa-caret-down:hover {
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
    background: linear-gradient(rgba(94, 89, 89, 0.5), rgba(170, 156, 156, 0.5)) 
} */

div.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: first baseline;
}

span.fa.fa-caret-down {
    color: #ffffff;
    padding: 1em 1em 1em 0;
    border-radius: 0;
    margin: 0;
}

/* ===== DROPDOWN ===== */
.dropdown {
    position: relative;
    /* display: inline-block; */
}


div.dropdown a {
    border: none;
}

.dropbtn {
    /* display: flex; */
    align-items: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(94, 89, 89, 0.85);
    min-width: 180px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px;
    border-radius: 0.5em;
    top: 100%;
    left: 0;
    z-index: 1001;
    flex-direction: column;
}

.dropdown-content a {
    color: #ffffff;
    padding: 0.8em 1em;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

div.dropdown-content a {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    width: auto;
    border-radius: 0.5em;
}

.icon {
    display: none;
    font-size: 1.5em;
    color: white;
    cursor: pointer;
}

button.icon {
    background: none;
    border: none;
}

div.call-cta {
    border-radius: 1em;
    border: 1px solid #ffffff;
}

footer a {
    font-size: 1em;
    color: #ffffff;
    width: fit-content;
    margin: 0.1em;
}

span.privacy-settings-btn {
    text-decoration: underline;
    cursor: pointer;
}

div#iframe-consent-banner span a {
    color: #ffffff;
}

div.company-name {
    display: flex;
    align-items: center;
}

div.company-name a {
    padding-left: 2em;
}

main.content {
    display: flex;
    flex-wrap: wrap;
    min-height: 80vh;
    margin: 0 10% 0 10%;
}

div.reserve-button {
    display: flex;
    flex-basis: 100%;
    align-self: center;
    padding-bottom: 1em;
}

div.offer-button a, div.reserve-button a {
    background: #9D2929
}


a.button {
    text-decoration: none;
    align-items: center;
    font-size: 1em;
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
    color: #ffffff;
    display: inline-flex;
    height: 48px;
    max-width: 100%;
    padding: 0px 4em 0px 2em;
    text-align: center;
    width: auto;
    margin: 2em 0 1em 0;
    background: linear-gradient(rgba(94, 89, 89, 0.5), rgba(170, 156, 156, 0.5))
}

a.button:hover {
    background: #a06f6f;
}

section.offer-introduction {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

section.general-introduction {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 2em;
    justify-content: space-evenly;
}

div.general-image {
    align-self: center;
}

section.general-introduction img {
    width: 100%;
    max-width: 750px;
    height: auto;
    min-width: auto;
}

div.general-description {
    width: 35%;
    padding: 1em;
}

div.offer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

section.house-introduction {
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0em 0em 1em 0em;
    background: #ffffff;
    border-radius: 2em;
    padding: 2em;
    box-shadow: rgba(151, 0, 0, 0.2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(255, 0, 0, 0.12) 0 1px 18px 0
}

section.house-introduction img {
    width: 100%;
    height: 100%;
    border-radius: 2em;
    object-fit: cover;
}

h2 {
    color: #ca2222;
    font-size: 2em
}

div.google-reviews {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding-top: 2em;
}

footer {
    margin-top: 2em;
    display: flex;
    background-color: #9D2929;
    color: #ffffff;
    justify-content: space-around;
    flex-wrap: wrap;
}

div.contact-info {
    color: #ffffff;
}

div.company-description {
    width: 20%;
    padding-left: 2em;

}

div.footer-nav {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5em;
}

div.social-media {
    align-self: center;
}

.fa {
    padding: 10px;
    font-size: 15px;
    width: 15px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #ffffff;
    color: #9D2929;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;

}

.fa-instagram {
    background: #ffffff;
    color: #9D2929;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;

}

section.value-proposition {
    display: flex;
    flex-direction: row;
    margin-top: 2em;
    align-items: center;
    background: #e7e7e7;
    box-shadow: rgba(151, 0, 0, 0.2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(49, 48, 48, 0.12) 0 1px 18px 0;
    border-radius: 24px;
}

div.value-list {
    display: flex;
    flex-direction: column;
    padding: 1em;
}

div.value-introduction {
    width: 65%;
    padding: 1.2em;
}

div.value-list h4 {
    color: #9D2929;
    margin: 0.2em 0 0 0;
}

div.value-item {
    border-bottom: 1px solid #9D2929;
}

/* GALERIA */

.carousel-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    position: relative;
}

.carousel picture {
    width: 100%;
    height: 100%;
    display: none;
}

.carousel picture.active {
    display: block;
}

.carousel picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}


.controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.arrow {
    background-color: #9D2929;
    color: white;
    border: none;
    cursor: pointer;
    padding: 8px 15px;
    opacity: 1;
    transition: opacity 0.3s;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.arrow.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal img {
    max-width: 90%;
    max-height: 90%;
}

.modal .arrow, .main-prev,
.main-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(157, 41, 41, 0.8);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    font-size: 24px;
    border-radius: 5px;
}

.modal .modal-prev {
    left: 30px;
}

.modal .modal-next {
    right: 30px;
}

.modal .arrow.hidden {
    display: none;
}

.close {
    position: absolute;
    top: 30px;
    right: 50px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    user-select: none;
}

.close:hover {
    color: #ccc;
}

/* GALERIA */

/*Main gallery*/
.main-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1em;
}

.main-gallery picture,
.main-gallery img {
    overflow: hidden;
}

.main-gallery picture img,
.main-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: auto;
    min-width: 200px;
    margin: 1em;
    cursor: pointer;
    transition: transform 0.5s ease;
    object-fit: cover;
}

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

/* Modal */
.main-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    box-sizing: border-box;
}

.main-modal.show {
    display: flex;
}

.main-modal-content {
    max-width: 90%;
    max-height: calc(100vh - 80px);
    /* 40px paddingu z góry i dołu = 80px łącznego odstępu */
    object-fit: contain;
}



@keyframes zoomIn {
    from {
        transform: scale(0.6);
    }

    to {
        transform: scale(1);
    }
}


/* Krzyżyk zamknięcia */
.main-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.main-close:hover {
    color: #9d2929;
}

/* Strzałki w modalu głównej galerii */
.main-modal .arrow {
    background-color: rgba(157, 41, 41, 0.8);
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background 0.3s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.main-modal .arrow:hover {
    background-color: rgba(157, 41, 41, 1);
}

.main-modal .main-prev {
    left: 20px
}

.main-modal .main-next {
    right: 20px
}

.main-modal .hidden {
    visibility: hidden;
}


section.house-description, section.surroundings-description {
    display: flex;
    margin-top: 2em;
    align-items: center;
    justify-content: space-around;

}

div.house-description, div.surroundings-description {
    width: 40%;
    padding: 1em;
}

div.surroundings-map img {
    width: 100%;
    max-width: 800px;
    height: auto;
    min-width: auto;
}

div.surroundings-map {
    width: 45%;
}

section.surroundings-map {
    display: flex;
    justify-content: space-around;
    margin-top: 1em;
}

div.surroundings-map-description {
    width: 40%;
    padding: 1em;
}

div.pricing-table {
    background: #e7e7e7;
    margin: 2em 0em 2em 0em;
    padding: 2em;
    border-radius: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

div.table-description {
    width: 40%;
    padding: 1em;
}

div.table-block {
    width: 50%;
    padding: 1em;
    display: flex;
    flex-direction: column;
}

table, th, td {
    border-collapse: collapse;
    padding: 1em;
}

th, table {
    border: 1px solid #9D2929;
}

th {
    color: #9D2929;
    font-size: 1em;
}

td {
    border-right: 1px solid #7a1f1f;
    border-left: 1px solid #7a1f1f;
}

td:hover {
    background-color: #dfc5c5;
}

div.additional-fees, section.restaurants-shops, div.available-dates {
    width: 100%;
    background: #9d2929;
    border-radius: 2em;
    padding: 2em;
    margin-top: 1em;
}

div.available-dates {
    width: 100%;
}

div.additional-fees h2, ul, div.restaurants-shops h2, div.restaurants-shops h3, div.restaurants-shops p, div.available-dates p, div.available-dates h3 {
    color: #ffffff;
}


div.contact-card-introduction {
    width: 30%;
}

div.contact-card-introduction h1 {
    color: #ca2222;
}

div.contact-cards {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 2em 0 1em 0;
    flex-wrap: wrap;
    align-items: center;
}

div.contact-card {
    background: #9D2929;
    color: #ffffff;
    padding: 2em;
    border-radius: 1em;
    width: 15%;
    height: 60%;
}

div.contact-card a {
    color: #ffffff;
}

div.map {
    display: flex;
    width: 100%;
    flex-direction: column;
}

div.map li, div.surroundings-description li, div.house-description li, div.general-description li {
    color: #000000;
}

.accordion {
    background-color: #e7e7e7;
    color: #000000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-radius: 1em;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    background-color: #ffffff;
    overflow: hidden;
}

.accordion.active+.panel {
    background: #f7f4f4;
    border-radius: 1em;

}

div.frequent-questions {
    display: flex;
    flex-direction: column;
    width: 100%;
}

button.accordion {
    font-size: 18px;
    color: #000000;
    border-bottom: 1px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

i.fa.fa-angle-down {
    font-size: 1em;
}

div#iframe-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(31, 7, 7, 0.8);
    color: white;
    padding: 1em 2em;
    font-size: 0.8em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
}

button.accept-iframes-btn, button.reject-iframes-btn {
    background-color: #9D2929;
    font-size: 1em;
    color: #ffffff;
    border: none;
    border-radius: 24px;
    padding: 0.5em 1em;
    cursor: pointer;
    margin: 0.2em
}

div.map-placeholder {
    width: 100%;
    height: 450px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.486), rgba(0, 0, 0, 0.61)), url('images/map-preview.png');
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-repeat: no-repeat;
    background-size: cover;
    flex-direction: column;
    font-size: 1.2em;
    text-align: center;
}

div.shapo-placeholder {
    width: 100%;
    height: 450px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.486), rgba(0, 0, 0, 0.61)), url('images/review-preview.png');
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.2em;
    background-repeat: no-repeat;
    background-size: cover;
    flex-direction: column;
    text-align: center;
}

@media screen and (max-width: 775px) {
    nav {
        flex-direction: row;
        align-items: flex-start;
        background: #9d2929;
        border: none;
    }

    nav a:hover, span.fa.fa-caret-down:hover {
        box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
        background: linear-gradient(rgba(94, 89, 89, 0.5), rgba(170, 156, 156, 0.5))
    }

    span.fa.fa-caret-down {
        color: #000000;
        text-align: center;
        padding: 1em;
    }

    footer {
        flex-direction: column;
        padding: 1em;
    }

    div.company-description {
        width: 100%;
        padding: 0;
    }

    div.social-media {
        align-self: auto;
    }

    div.company-name {
        align-self: center;
    }

    div.nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #e7e7e7;
    }

    .nav-links a {
        padding: 0.75em 1em;
        text-align: left;
        width: 100%;
        color: #000000;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
    }

    .nav-links.show {
        display: flex;
    }

    section.value-proposition {
        flex-direction: column;
    }

    div.value-introduction {
        width: auto;
    }

    .icon {
        display: block;
        padding: 0.2em;
    }

    div.dropdown {
        border-top: 1px solid rgba(0, 0, 0, 0.2)
    }

    .dropdown {
        width: 100%;
    }

    .dropbtn {
        justify-content: space-between;
        width: 100%;
    }

    .dropdown-content {
        position: static;
        background-color: #f0f0f0;
        box-shadow: none;
        border-radius: 0;
        display: none;
    }

    .dropdown-content a {
        color: #000000;
        padding-left: 2em;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    div.dropdown.active .dropdown-content {
        display: block;
    }

    .carousel {
        height: fit-content;
    }


    div.general-description {
        width: 100%;
    }

    div.hero-text h1 {
        font-size: 2em;
    }

    section.house-introduction {
        width: 100%;
    }

    div.contact-card-introduction {
        width: 100%;
    }

    div.contact-card {
        width: 80%;
        height: auto;
        margin-top: 1em;
    }

    section.surroundings-description, section.house-description, section.surroundings-map {
        flex-direction: column;
    }

    section.surroundings-map {
        align-items: center;
    }

    div.surroundings-description, div.house-description, div.table-description, div.surroundings-map-description {
        width: 100%;
    }

    div.surroundings-map {
        width: 100%;
    }

    div.table-block {
        padding: 0.5em;
        width: 100%;
    }

}

@media screen and (max-width: 960px) {
    div.call-cta {
        display: none;
    }
}


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

    section.hero h1, section.hero p {
        width: 80%;
    }

    div.subpage-hero-text {
        text-align: center;
    }

    div.pricing-table {
        padding: 0em;
    }

}

@media screen and (min-width:775px) {

    /* pokaz dropdown po najechaniu */
    .dropdown:hover .dropdown-content {
        display: flex;
    }

    nav a:hover, span.fa.fa-caret-down:hover {
        text-decoration: underline #ffffff 2px;
    }
}


@media screen and (max-width: 1400px) and (min-width:775px) {
    section.value-proposition {
        flex-direction: column;
    }

    div.value-introduction {
        width: auto;
    }

    div.contact-card-introduction {
        width: 100%;
    }

    div.contact-cards {
        flex-direction: column;
        align-items: flex-start;
    }

    div.contact-card {
        width: 50%;
        height: auto;
        margin-top: 1em;
    }

    section.house-description, section.surroundings-description, section.surroundings-map {
        flex-direction: column;
        flex-wrap: wrap;
    }

    div.house-description, div.surroundings-description, div.surroundings-map-description {
        width: fit-content;
    }

    section.surroundings-map {
        align-items: center;
    }

    div.surroundings-map {
        width: 80%;
    }

    .gallery-item {
        width: 40%;
    }

}

@media screen and (max-width: 1500px) {
    div.general-description {
        width: 100%;
    }

}