body {
    background-image: url(images/background.png);
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #f5f1ec;
}

nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    
    color: #000;
}

.nav-inner {
    width: 90%;
    margin: auto;
    padding: 1.5vh 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 1.4vw;
    font-weight: 600;
    letter-spacing: .2vw;
}

.nav-links a {
    margin-left: 3vw;
    font-size: 1vw;
    text-decoration: none;
    transition: opacity .3s ease;
    color: #000;
}

.nav-links a:hover {
    opacity: 1;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-inner {
    width: 80%;
    text-align: center;
    animation: fadeIn 1s ease forwards;
}

.logo {
    width: 34vw;
    min-width: 22%;
    margin-bottom: 2vh;
}

.year {
    font-size: 1.1vw;
    letter-spacing: .25vw;
    color: #e6d3bd;
    margin-bottom: 4vh;
}

.opis {
    padding: 4vw;
    background: rgba(255,248,240,.14);
    border-radius: 2vw;
    box-shadow: 0 1vw 2vw rgba(0,0,0,.25);
    font-size: 1.15vw;
    line-height: 190%;
    text-align: justify;
}

table {
    width: 90%;
    margin: 8vh auto;
    animation: fadeIn 1s ease forwards;
    border-collapse: collapse;
}
td {
    height: 30vh;
    width: 22.5vw;
    padding: 0.5vw;
}

td {
    word-break: break-word; /* lub overflow-wrap: break-word; */
    white-space: normal;
}

td img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: .8vw;
    transition: transform .4s ease;
}


td img:hover {
    transform: scale(1.02);
}

footer {
    padding: 4vh 0;
    text-align: center;
    font-size: .9vw;
    opacity: .6;
}


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

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 0.5vw;
    box-shadow: 0 1vw 2vw rgba(0,0,0,.5);
    transition: transform 0.3s ease;
}

.lightbox-content:hover {
    transform: scale(1.02);
}

.lightbox .close {
    position: absolute;
    top: 2vh;
    right: 3vw;
    color: #fff;
    font-size: 3vw;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

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

    .hero {
        min-height: auto;
        padding: 10vh 0 6vh;
    }

    .hero-inner {
        width: 92%;
    }

    .logo {
        width: 70vw;
        margin-bottom: 2vh;
    }

    .year {
        font-size: 3.5vw;
        margin-bottom: 3vh;
    }

    .opis {
        padding: 6vw;
        font-size: 3vw;
        line-height: 170%;
        border-radius: 5vw;
    }
/*.gallery {
        margin: 3vh auto;
        gap: 3vw;
        grid-template-columns: repeat(2, 1fr);
    }
    */


    footer {
        font-size: 3vw;
        padding: 3vh 0;
    }

    .nav-logo {
        font-size: 6vw;
        letter-spacing: .3vw;
    }

    .nav-links a {
        font-size: 6vw;
        margin-left: 4vw;
    }
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4vw;
    color: #fff;
    cursor: pointer;
    padding: 1vw;
    user-select: none;
    transition: color 0.3s ease;
}

.arrow:hover {
    color: #e6d3bd;
}

.arrow.left {
    left: 2vw;
}

.arrow.right {
    right: 2vw;
}

@media (max-width: 768px) {
    .arrow {
        font-size: 10vw;
    }
}

.lightbox-content.slide-left {
    animation: slideLeft 0.35s ease;
}

.lightbox-content.slide-right {
    animation: slideRight 0.35s ease;
}
.sticky-contact {
    position: fixed;
    right: 2vw;
    bottom: 3vh;
    z-index: 999;
    font-family: 'Montserrat', sans-serif;
}

.sticky-toggle {
    background: #fff;
    color: #000;
    width: 7vw;
    border: none;
    padding: 1vw 1.8vw;
    border-radius: 3vw;
    font-size: .9vw;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 .6vw 1.2vw rgba(0,0,0,.3);
    transition: transform .3s ease, background .3s ease;
}

.sticky-toggle:hover {
    background: #f1e3d2;
    transform: translateY(-2px);
}

.sticky-panel {
    position: absolute;
    width: 8vw;
    bottom: 120%;
    right: 0;
    background: rgba(0,0,0,.85);
    border-radius: 1vw;
    padding: .8vw;
    display: flex;
    flex-direction: column;
    gap: .6vw;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all .3s ease;
}

.sticky-panel a {
    color: #fff;
    text-decoration: none;
    font-size: .85vw;
    padding: .6vw 1vw;
    border-radius: .6vw;
    background: rgba(255,255,255,.08);
    transition: background .3s ease;
}

.sticky-panel a:hover {
    background: rgba(255,255,255,.18);
}

.sticky-contact.active .sticky-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 768px) {

    .sticky-contact {
        right: 4vw;
        bottom: 4vh;
    }

    .sticky-toggle {
        width: auto;
        font-size: 4vw;
        padding: 3.5vw 6vw;
        border-radius: 10vw;
        box-shadow: 0 2vw 4vw rgba(0,0,0,.35);
    }

    .sticky-panel {
        width: 33vw;
        bottom: 115%;
        padding: 4vw;
        gap: 3vw;
        border-radius: 6vw;
    }

    .sticky-panel a {
        font-size: 4vw;
        padding: 4vw;
        border-radius: 4vw;
        text-align: center;
        line-height: 140%;
    }
}

#kontakt {
    background: #ffffff;
    color: #111;
    padding: 2vw 0 1.8vw;
    border-top: 1px solid #eee7df;
    font-family: 'Montserrat', sans-serif;
}

.kontakt-inner {
    width: 86%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.5vw;
}

.kontakt-col {
    display: flex;
    flex-direction: column;
    gap: .25vw;
    font-size: .8vw;
    line-height: 140%;
}

.kontakt-title {
    font-weight: 500;
    letter-spacing: .12vw;
    font-size: .65vw;
    text-transform: uppercase;
    color: #9c8a76;
}

.kontakt-main {
    font-weight: 500;
    font-size: .9vw;
}

#kontakt a {
    color: #111;
    text-decoration: none;
    transition: opacity .2s ease;
}

#kontakt a:hover {
    opacity: .6;
}


@media (max-width: 768px) {

    #kontakt {
        padding: 6vw 0;
    }

    .kontakt-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 3.5vw;
    }

    .kontakt-col {
        font-size: 3.6vw;
        gap: .6vw;
    }

    .kontakt-title {
        font-size: 2.6vw;
        letter-spacing: .3vw;
    }

    .kontakt-main {
        font-size: 4vw;
    }
}
    .sticky-contact {
    transition: opacity .35s ease, transform .35s ease;
}
.gallery-caption {
    width: fit-content;
    margin: 7vh auto 3.5vh;
    padding: .9vw 2.6vw;
    font-size: .95vw;
    letter-spacing: .28vw;
    text-transform: uppercase;
    color: #e6d3bd;

    background: rgba(255,248,240,.10);
    border: 1px solid rgba(230,211,189,.28);
    border-radius: 2vw;
    box-shadow: 0 .8vw 1.6vw rgba(0,0,0,.28);
    backdrop-filter: blur(8px);

    position: relative;
}


.gallery-caption::before,
.gallery-caption::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3.5vw;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(230,211,189,.6),
        transparent
    );
}

.gallery-caption::before {
    right: 100%;
    margin-right: 1.4vw;
}

.gallery-caption::after {
    left: 100%;
    margin-left: 1.4vw;
}

@media (max-width: 768px) {
  .gallery-caption {
    font-size: 4vw;       
    padding: 3vw 6vw;        
    border-radius: 8vw;
    letter-spacing: .5vw;
    margin: 7vh auto 4.5vh;
}

.gallery-caption::before,
.gallery-caption::after {
    width: 7vw;             
}
}
html {
    scroll-behavior: smooth;
}
.sticky-category {
    position: fixed;
    right: 2vw;
    top: 7.67vh;
    z-index: 998;
    font-family: 'Montserrat', sans-serif;
}

.category-toggle {
    background: #fff;
    color: #000;
    border: none;
    padding: 0.8vw 2vw;
    border-radius: 3vw;
    font-size: 0.9vw;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.6vw 1.2vw rgba(0,0,0,.3);
    transition: background 0.3s, transform 0.3s;
}

.category-toggle:hover {
    background: #f1e3d2;
    transform: translateY(-2px);
}

.category-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5vw;
    background: rgba(0,0,0,.85);
    padding: 0.8vw;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    gap: 0.6vw;
    opacity: 0;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.category-panel a {
    color: #fff;
    text-decoration: none;
    font-size: 0.85vw;
    padding: 0.6vw 1vw;
    border-radius: 0.6vw;
    background: rgba(255,255,255,.08);
    transition: background 0.3s;
}

.category-panel a:hover {
    background: rgba(255,255,255,.18);
}

.sticky-category.active .category-panel {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
}

@media (max-width: 768px) {
    .sticky-category {
        left: auto;
        right: 3vw;
        top: 12vh;
    }

    .category-toggle {
        font-size: 4vw;
        padding: 3vw 5vw;
        border-radius: 10vw;
        box-shadow: 0 2vw 4vw rgba(0,0,0,.35);
    }

    .category-panel {
        bottom: auto;
        top: 100%;
        right: 0;
        width: 35vw;
        padding: 3vw;
        gap: 2vw;
        border-radius: 6vw;
        transform: scaleY(0);
        transform-origin: top;
        margin-top: 1vw;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .sticky-category.active .category-panel {
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto;
    }


    .category-panel a {
        font-size: 4vw;
        padding: 3vw;
        border-radius: 4vw;
        text-align: center;
        line-height: 140%;
    }
}