* {
font-family: "Lobster", sans-serif;
}
body {
    background-color: blanchedalmond !important;
}
.Upper_area {

    color: black;
    font-size: 600%;
    padding-left: 2%;
    padding-top: 2%;
    padding-bottom: 1%;
}
.d-block {
    width: 100% !important;
    object-fit: cover !important;
    height: 60vh !important;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0)); /* gradient na wierzchu */
    background-size: cover;
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    background-position: center;
}
.carousel-item {
    filter: brightness(1.07);
}
h2 {
    text-align: center;
    font-size: 48px !important;
    padding: 1%;
}
div.left-promice {
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0)); /* gradient na wierzchu */
    background: url("niebo.jpg");
    float: left;
    width: 50%;
    height: 130vh;
    
    background-size: cover;
    display: block;
    object-position: center;
    background-position: top;
    filter: brightness(1.2);
}
div.right-promice {
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0)); /* gradient na wierzchu */
    background: url("lampa.jpg");
    float: right;
    width: 50%;
    height: 130vh;
    background-position: bottom, left;
    filter: brightness(1);
    background-size: cover;
}
div.left-promice > p.left-promice {
    color: black;
    padding: 7%;
    font-size: 140%;
    top: -20%;
}
div.right-promice > p.right-promice {   
    color: antiquewhite;
    position: absolute;
    top: 40%;
    padding: 7%;
    font-size: 140%;
}

div.back {
    background-color: burlywood;
   padding-top: 2%;
margin-top: 1%;
}
div.offer {
   
    display:grid;
    grid-template-columns: auto auto;
    justify-content: center;
    padding-top: 5%;
    align-items:center;
    /*mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0)); /* gradient na wierzchu */
    grid-gap:15vh;
}
div.janosik {
    font-size: 32px;
    display: grid;
    grid-template-columns: auto 50%;
    border-radius: 5vh;
    height: 30vh;
    width: 80vh;
    border: solid, 5px, black;
    background-color: blanchedalmond;
}
div.kwietna {
    font-size: 32px;
    background-color: blanchedalmond;
    display: grid;
    grid-template-columns: auto 50%;
    height: 30vh;
    width: 80vh;
    border-radius: 5vh;
    border: solid, 5px, black;
}
div.kontakt{
    border: rgb(0, 0, 0), 5px, solid;
    font-size: 200%;
    border-radius: 20px;
margin-left: 20%;
margin-right: 20%;
    background-color: blanchedalmond;
    margin-top: 70%;
    padding:1%;

}
img.offer {
    height: 28vh;
    padding: 3%;
    border-radius: 5vh;
}
h3.description {
    padding-top:2%;
    font-size: 28px;
}

button.offer{
      transition-duration: 0.4s;
}
button.offer:hover {
      background-color: burlywood;
}
footer{
    margin-top:1%;
}
div.galeria {
    font-size: 32px;
    column-count: 5; 
    column-gap: 1em;
    margin: 2%;
}
    div.galeria img {
        width: 100%;
        margin-bottom: 1em;
        display: block;
        border-radius:5%;
        border:solid black 3px;
    }
    div.galeria img:hover {
        cursor:pointer;
    }
.lightbox {
    display: none; /* ukryte domyślnie */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

    .lightbox img {
        max-width: 90vw;
        max-height: 90vh;
        box-shadow: 0 0 20px #000;
        border-radius: 10px;
    }

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}
div.reservation {
    border: solid 5px burlywood;
    width:30%;
    margin: 0 auto;
    height:10%;
    text-align:center;
    padding:1%;
    font-size:42px;
}
button.reservation{
    font-size:32px;
    
}
.lightbox-nav {
    background: transparent;
    border: none;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    padding: 1rem;
    user-select: none;
    width:100%;
    height:70%
}

.lightbox-nav:hover {
    color: #ccc;
}
@media (max-width: 768px) {

    /* Nagłówek mniejszy */
    div.kontakt{
    border: rgb(0, 0, 0), 5px, solid;
    font-size: 100%;
    border-radius: 20px;
margin-left: 20%;
margin-right: 20%;
    background-color: blanchedalmond;
    margin-top: 70%;
    padding:1%;

}
    .Upper_area {
        font-size: 200%;
        text-align: center;
    }
    div.back {
    background-color: burlywood;
   padding-top: 2%;
margin-top: 1%;
}

    /* Sekcje obok siebie -> jedna pod drugą */
    div.left-promice,
    div.right-promice {
        float: none;          /* wyłącza float */
        width: 100%;          /* pełna szerokość */
        height: auto;         /* dopasowanie wysokości */
        padding: 10% 5%;
        height: 45vh;
        background-position: center;
    }
    div.right-promice{
        padding-top: 5%;
        margin-top:-5%;
        margin-bottom: -50%;
    }

    div.left-promice > p.left-promice,
    div.right-promice > p.right-promice {
        font-size: 16px;
        padding: 5%;
        position: static;    /* usuwa absolute z prawej strony */
        width: 100%;
    }

    /* Sekcja ofertowa */
    div.offer {
        grid-template-columns: 1fr; /* zamiast 2 kolumn -> jedna */
        padding-top: 10%;
        margin-top: 10%;
        grid-gap: 5vh;
        padding: 5%;
    }

    div.janosik,
    div.kwietna {
        width: 100%;
        height: auto;
        padding: 5%;
        grid-template-columns: 1fr; /* obrazek nad tekstem */
        font-size: 20px;
    }

    img.offer {
        height: auto;
        max-width: 100%;
    }

    h3.description {
        font-size: 20px;
    }

    /* Galeria */
    div.galeria {
        column-count: 2; /* zamiast 5 kolumn */
        font-size: 20px;
    }

    /* Rezerwacja */
    div.reservation {
        width: 90%;
        font-size: 28px;
    }

    button.reservation {
        font-size: 20px;
    }
}