html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

.geomini {
    font-family: "Geomini", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 15vh;
    animation: fadeIn 1s ease forwards;
    font-family: "Geomini", sans-serif;
    overflow-x: hidden;
}

.header-div {
    width: 100%;
    height: 15vh;
    min-height: 90px;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 1000;
    transition: transform 0.4s ease;
    overflow: visible;
}

.header-div.hidden {
    transform: translateY(-100%);
}

.header {
    width: min(95%, 1400px);
    height: 100%;
    border-bottom: 1px solid goldenrod;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0;
    overflow: visible;
}

.logo {
    /* background-image: url(zlote_napisbok_przezroczyste.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    width: clamp(170px, 17vw, 320px);
    aspect-ratio: 2.6 / 1;
    height: auto;
    flex-shrink: 0;
    display: block;
    margin-left: 0;
    align-self: flex-start; */
    background-image: url(zlote.napisbok.przezroczyste2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30vw;
    height: 15vh;
}

.buttons-holder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    flex-wrap: nowrap;
    gap: clamp(0.3em, 1vw, 0.9em);
}

.header-button {
    width: auto;
    min-width: fit-content;
    padding: 0.8em 0.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.8rem, 0.65rem + 0.4vw, 1.05rem);
    color: rgb(101, 101, 101);
    transition: color 0.5s ease, transform 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    white-space: nowrap;
}

.header-button:hover {
    cursor: pointer;
    color: goldenrod;
    transform: scale(1.05);
}

.signIn {
    background-color: black;
    color: white;
    border-radius: 1em;
    transition: color 0.5s ease, background-color 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
    border: 1px solid black;
    padding: 0.8em 1.1em;
    font-size: clamp(0.9rem, 0.8rem + 0.45vw, 1.15rem);
}


.signIn:hover {
    background-color: white;
    color: black;
    border: 1px solid goldenrod;
    transform: scale(1.05);
}

/* ===================== DROPDOWN MENU (Wizyta / Dlaczego IS) ===================== */

.header-button-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-arrow-btn {
    background: none;
    border: none;
    color: rgb(101, 101, 101);
    font-size: 0.8em;
    cursor: pointer;
    padding: 0 0.3em;
    margin-left: -0.6em;
    transition: color 0.4s ease, transform 0.3s ease;
    font-family: "Geomini", sans-serif;
}

.header-button-dropdown:hover .dropdown-arrow-btn,
.header-button-dropdown.open .dropdown-arrow-btn {
    color: goldenrod;
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: white;
    border-radius: 1em;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    padding: 0.8em 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1001;
}

.header-button-dropdown:hover .dropdown-menu,
.header-button-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    padding: 0.7em 1.4em;
    font-size: 0.9em;
    color: rgb(101, 101, 101);
    white-space: nowrap;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.dropdown-item:hover {
    color: goldenrod;
    background-color: rgb(246, 242, 229);
}

.main-section {
    width: min(80%, 1400px);
    height: 55vh;
    margin-top: 4vh;
    display: flex;
    justify-content: center;
}

.main-section-photo {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(na\ glowna.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    animation: fadeIn 2.3s ease forwards;
    opacity: 0;
    overflow: hidden;
    color: white;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

.main-section-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.75) 75%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.method-section {
    width: min(80%, 1400px);
    height: 70vh;
    margin-top: 10vw;
    padding-bottom: 10vw;
}

.method-description {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    gap: 5vw;
}

.left-collumn {
    width: 40%;
    height: 100%;
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.right-collumn {
    width: 33%;
    height: 100%;
    background-image: url(wCzymPomagam.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    border-radius: 1.5em;
}

.left-collumn.visible,
.right-collumn.visible {
    opacity: 1;
    transform: translateX(0);
}

.title {
    font-size: clamp(2.2rem, 1.2rem + 3vw, 5rem);
    text-align: center;
    margin: 0 auto;
    padding: 2vh 2vh 0;
    font-weight: bold;
}

.title-line {
    width: 80%;
    height: 1px;
    background-color: goldenrod;
    margin: 2vh auto 4vh;
}

.description {
    font-size: 1.1em;
    text-align: center;
    color: rgb(101, 101, 101);
}

.description p {
    margin: 0 0 1.5em;
}

.description p:last-child {
    margin-bottom: 0;
}

.method-section,
.metoda-section,
.oferta-section,
.opinie-section,
.aboutMe-section,
.wizyta-section,
.cennik-section,
.faq-section,
.kontakt-section,
#rolf-section,
#przygotowanie-section,
#przebieg-section {
    scroll-margin-top: 15vh;
}

.oferta-section {
    width: 100%;
    margin-top: 10vw;
    padding-bottom: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oferta-cards {
    width: min(80%, 1400px);
    display: flex;
    justify-content: center;
    gap: 3vw;
    margin-top: 4vh;
}

.oferta-card {
    width: 27%;
    background-color: rgb(246, 242, 229);
    border-radius: 1.5em;
    padding: 3vh 2vw;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(40px);
}

.oferta-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.oferta-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(218, 165, 32, 0.2);
}

.oferta-card-number {
    font-size: 2em;
    color: goldenrod;
    font-weight: bold;
    margin-bottom: 1vh;
}

.oferta-card-title {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 1.5vh;
}

.oferta-card-description {
    font-size: 1em;
    color: rgb(101, 101, 101);
    line-height: 1.5;
}

/* ===================== O METODZIE ===================== */

.metoda-section {
    width: 100%;
    margin-top: 10vw;
    padding-bottom: 10vw;
    background-color: rgb(246, 242, 229);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metoda-holder {
    width: min(80%, 1400px);
    margin: 4vh auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vh;
}

.metoda-opis {
    max-width: 800px;
    text-align: center;
    color: rgb(101, 101, 101);
    font-size: 1.1em;
    line-height: 1.7;
}

.rolf-card {
    width: 100%;
    background-color: white;
    border-radius: 1.5em;
    display: flex;
    align-items: center;
    gap: 4vw;
    padding: 4vh 4vw;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.rolf-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.rolf-photo {
    width: 20%;
    min-width: 140px;
    aspect-ratio: 1 / 1;
    background-color: lightgray;
    border-radius: 1.5em;
    flex-shrink: 0;
    background-image: url(ida-photo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.rolf-content {
    flex-grow: 1;
}

.rolf-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 1.5vh;
}

.rolf-bio {
    color: rgb(101, 101, 101);
    line-height: 1.6;
    margin-bottom: 2vh;
}

.rolf-links {
    display: flex;
    gap: 1.5vw;
    flex-wrap: wrap;
}

.rolf-link {
    border: 1px solid goldenrod;
    border-radius: 1em;
    padding: 0.6em 1.2em;
    font-size: 0.9em;
    color: rgb(101, 101, 101);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.rolf-link:hover {
    background-color: goldenrod;
    color: white;
}

/* ===================== OPINIE ===================== */

.opinie-section {
    width: 100%;
    padding: 8vh 0 10vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.opinie-holder {
    width: min(80%, 1400px);
    margin: 4vh auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3vh 3vw;
}

.opinie-card {
    width: 42%;
    display: flex;
    flex-direction: column;
    background-color: rgb(246, 242, 229);
    border-radius: 1.5em;
    padding: 3vh 2vw;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.opinie-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.opinie-stars {
    color: goldenrod;
    font-size: 1.3em;
    margin-bottom: 1.5vh;
}

.opinie-text {
    font-size: 0.95em;
    color: rgb(101, 101, 101);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 2vh;
}

.opinie-text.scroll-text {
    max-height: 130px;
    text-align: left;
}

.opinie-author {
    font-weight: bold;
    text-align: right;
}

.opinie-more-link {
    margin-top: 4vh;
    text-align: center;
    color: rgb(101, 101, 101);
}

.opinie-more-link a {
    color: goldenrod;
    text-decoration: underline;
}

/* ===================== O MNIE ===================== */

.aboutMe-section {
    width: 100%;
    margin-top: 10vw;
    padding-bottom: 10vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aboutMe-holder {
    width: min(80%, 1400px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 5vw;
}

.aboutMe-photo {
    width: 35%;
    height: 35vh;
    background-image: url(portert.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1.5em;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.aboutMe-photo.visible {
    opacity: 1;
    transform: translateX(0);
}

.aboutMe-content {
    width: 55%;
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.aboutMe-content.visible {
    opacity: 1;
    transform: translateX(0);
}

.aboutMe-content .title {
    text-align: left;
    font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem);
    padding: 0;
    margin: 0;
}

.aboutMe-content .title-line {
    margin: 2vh 0 4vh;
    width: 60%;
}

.aboutMe-content .description {
    text-align: left;
    line-height: 1.7;
}

.organizacje-holder {
    display: flex;
    gap: 2vw;
    margin-top: 4vh;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Wspólny „box” – pilnujemy tej samej wysokości */
.organizacja-logo {
    height: 140px;                    /* wspólna wysokość dla obu */
    border: 1px solid goldenrod;
    border-radius: 1em;
    padding: 0.8em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;         /* całe logo zawsze widoczne */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Logo nr 1 – EGSI: stała szerokość */
#EGSI {
    width: 260px;                     /* dopasuj, jeśli chcesz inną */
    background-image: url(egsi.png);
}

/* Logo nr 2 – „strukturalna”: szerokość z aspect-ratio */
#strukturalna {
    width: auto;
    aspect-ratio: 4 / 3;              /* dostosuj do proporcji pliku */
    background-image: url("strukturalna.png");
    background-color: rgb(140,198,62);
}

/* ===================== JAK WYGLĄDA WIZYTA ===================== */

.wizyta-section {
    width: 100%;
    margin-top: 10vw;
    padding-bottom: 10vw;
    background-color: rgb(246, 242, 229);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wizyta-intro {
    max-width: 800px;
    text-align: center;
    color: rgb(101, 101, 101);
    font-size: 1.1em;
    margin: 2vh auto 0;
}

.wizyta-holder {
    width: min(80%, 1400px);
    margin: 4vh auto 0;
    display: flex;
    gap: 5vw;
}

.wizyta-kroki {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 3vh;
}

.wizyta-krok {
    display: flex;
    gap: 1.5vw;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.wizyta-krok.visible {
    opacity: 1;
    transform: translateY(0);
}

.wizyta-krok-numer {
    font-size: 1.6em;
    font-weight: bold;
    color: goldenrod;
    flex-shrink: 0;
    width: 2.2em;
}

.wizyta-krok-tytul {
    font-weight: bold;
    font-size: 1.15em;
    margin-bottom: 0.5vh;
}

.wizyta-krok-opis {
    color: rgb(101, 101, 101);
    line-height: 1.5;
}

.wizyta-boczne {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 3vh;
}
/* .gabinet-photo-holder{
    width: 100%;
    height: 22vh;
    display: flex;
    gap: 1em;
} */

.gabinet-photo {
    width: 100%;
    height: 30vh;
    background-color: lightgray;
    border-radius: 1.5em;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    background-image: url(gabinet.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* #gabinet-photo2{

    background-image: url(gabinet2.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

} */

.gabinet-photo.visible {
    opacity: 1;
    transform: translateX(0);
}

.wskazowki-card {
    background-color: white;
    border-radius: 1.5em;
    padding: 3vh 2vw;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.wskazowki-tytul {
    font-weight: bold;
    margin-bottom: 1.5vh;
}

.wskazowki-lista {
    margin: 0;
    padding-left: 1.2em;
    color: rgb(101, 101, 101);
    line-height: 1.8;
}

/* ===================== SESJE I CENNIK ===================== */

.cennik-section {
    width: 100%;
    margin-top: 10vw;
    padding-bottom: 10vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cennik-holder {
    width: min(80%, 1400px);
    margin: 4vh auto 0;
    display: flex;
    justify-content: center;
    gap: 3vw;
}

.cennik-card {
    width: 27%;
    background-color: rgb(246, 242, 229);
    border-radius: 1.5em;
    padding: 4vh 2vw;
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.4s ease;
}

.cennik-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.cennik-card-highlight {
    background-color: black;
    color: white;
}

.cennik-card-highlight .cennik-card-price {
    color: goldenrod;
}

.cennik-card-highlight .cennik-card-description {
    color: rgb(210, 210, 210);
}

.cennik-card-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 1.5vh;
}

.cennik-card-price {
    font-size: 2.2em;
    font-weight: bold;
    color: goldenrod;
    margin-bottom: 1.5vh;
}

.cennik-card-description {
    font-size: 0.95em;
    color: rgb(101, 101, 101);
    line-height: 1.5;
}

.cennik-cta {
    margin-top: 5vh;
}

/* ===================== FAQ ===================== */

.faq-section {
    width: 100%;
    margin-top: 10vw;
    padding-bottom: 10vw;
    background-color: rgb(246, 242, 229);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-holder {
    width: min(70%, 900px);
    margin: 4vh auto 0;
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
}

.faq-item {
    background-color: white;
    border-radius: 1.2em;
    padding: 2vh 2vw;
    cursor: pointer;
}

.faq-pytanie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.faq-plus {
    color: goldenrod;
    font-size: 1.3em;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1em;
}

.faq-item.open .faq-plus {
    transform: rotate(45deg);
}

.faq-odpowiedz {
    color: rgb(101, 101, 101);
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin-top 0.4s ease;
}

.faq-odpowiedz.scroll-text {
    max-height: 0;
}

.faq-item.open .faq-odpowiedz.scroll-text {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 1.5vh;
}

.faq-odpowiedz p {
    margin: 0 0 1em;
}

.faq-odpowiedz p:last-child {
    margin-bottom: 0;
}

/* ===================== KONTAKT I STOPKA ===================== */

.kontakt-section {
    width: 100%;
    padding: 8vh 0 6vh;
    background-color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kontakt-holder {
    width: min(70%, 1200px);
    margin: 4vh auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vh;
}

.kontakt-info {
    display: grid;
    grid-template-columns: repeat(1fr 1fr 1fr);
    grid-template-rows: repeat(1fr 1fr);
    gap: 4vh 2vw;
    width: 100%;
}

.kontakt-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: rgb(101, 101, 101);
    font-size: 1.1em;
}

.kontakt-label {
    color: goldenrod;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    margin-bottom: 0.5vh;
}

.kontakt-fb-link {
    text-decoration: underline;
    text-decoration-color: goldenrod;
}

.kontakt-mapa {
    width: 100%;
    height: 30vh;
    background-color: rgb(246, 242, 229);
    border-radius: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(101, 101, 101);
}

.kontakt-button {
    background-color: black;
    color: white;
    border: 1px solid black;
    border-radius: 1em;
    padding: 1.5vh 3vw;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
    font-family: "Geomini", sans-serif;
    cursor: pointer;
    transition: color 0.5s ease, background-color 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
}

.kontakt-button:hover {
    background-color: white;
    color: black;
    border: 1px solid goldenrod;
    transform: scale(1.05);
}

.stopka-nawigacja {
    width: min(90%, 1200px);
    margin-top: 6vh;
    padding-top: 3vh;
    border-top: 1px solid rgb(230, 225, 210);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1vh 2.5vw;
}

.stopka-link {
    color: rgb(101, 101, 101);
    font-size: 0.95em;
    transition: color 0.4s ease;
}

.stopka-link:hover {
    color: goldenrod;
}

.kontakt-cta {
    margin-top: 3vh;
}

#title-oferta,
#title-opinie {
    width: 70%;
}

#title-oferta {
    text-align: right;
}

#title-opinie {
    text-align: left;
}

#title-kontakt {
    width: 100%;
    text-align: center;
}

/* ===================== SCROLLABLE LONG TEXT ===================== */

.scroll-text {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 1em;
    text-align: left;
}

.scroll-text::-webkit-scrollbar {
    width: 6px;
}

.scroll-text::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-text::-webkit-scrollbar-thumb {
    background-color: goldenrod;
    border-radius: 10px;
}

.description.scroll-text {
    text-align: left;
}

.pomagam-lista {
    margin: 0 0 1.5em;
    padding-left: 1.2em;
    line-height: 1.6;
}

.pomagam-lista li {
    margin-bottom: 0.4em;
}

/* ===================== SESJE ETAPY (recipe) ===================== */

.metoda-subtitle {
    font-weight: bold;
    font-size: 1.15em;
    margin: 0 0 0.8em;
}

.sesje-etapy {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin-top: -1vh;
}

.sesja-etap {
    flex: 1;
    background-color: white;
    border-radius: 1.5em;
    padding: 3vh 1.5vw;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.sesja-etap-numer {
    font-weight: bold;
    color: goldenrod;
    font-size: 1.2em;
    margin-bottom: 1vh;
}

.sesja-etap-opis {
    color: rgb(101, 101, 101);
    line-height: 1.5;
    font-size: 0.95em;
}

.rolf-quote {
    font-style: italic;
    color: rgb(80, 80, 80);
    border-left: 2px solid goldenrod;
    padding-left: 1em;
    margin: 1em 0 !important;
}

.rolf-links-label {
    font-weight: bold;
    margin: 2vh 0 1vh;
}

/* ===================== OPINIE INTRO ===================== */

.opinie-intro {
    max-width: 800px;
    text-align: center;
    color: rgb(101, 101, 101);
    margin: 0 auto 2vh;
}

/* ===================== PO SESJI ===================== */

.po-sesji-card {
    width: min(80%, 1400px);
    margin: 5vh auto 0;
    background-color: white;
    border-radius: 1.5em;
    padding: 3vh 3vw;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.po-sesji-tekst {
    color: rgb(101, 101, 101);
    line-height: 1.6;
}

.po-sesji-tekst p {
    margin: 0 0 1em;
}

.po-sesji-tekst p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1400px) {
    .header-button {
        width: auto;
        padding: 0 0.7vw;
        font-size: clamp(0.75rem, 0.65rem + 0.4vw, 0.95rem);
    }

    .title {
        font-size: clamp(2rem, 1.1rem + 2.6vw, 3.5rem);
    }
}

@media (max-width: 1024px) {
    .header-div {
        height: auto;
        min-height: 0;
    }

    .header {
        width: 100%;
        height: auto;
        min-height: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 1.4vh 0;
        padding: 1.6vh 0 1.2vh;
        overflow: visible;
    }

    .main {
        padding-top: 24vh;
    }

    .logo {
        align-self: center;
        width: clamp(200px, 40vw, 300px);
    }

    .buttons-holder {
        width: 100%;
        height: auto;
        align-self: center;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: clamp(0.5em, 2vw, 1.2em);
        padding: 0.2em 5vw;
    }

    .buttons-holder::-webkit-scrollbar {
        display: none;
    }

    .header-button-dropdown {
        flex-shrink: 0;
    }

    .dropdown-item {
        padding: 0.6em 1.2em;
        font-size: 0.85em;
    }

    .header-button {
        font-size: clamp(0.8rem, 0.75rem + 0.4vw, 1rem);
        margin-right: 0;
        flex-shrink: 0;
    }

    .signIn {
        margin-left: 0;
        padding: 0.7em 1em;
    }

    .main-section {
        width: min(92%, 1000px);
        height: 35vh;
    }

    .method-section {
        width: min(92%, 1000px);
        margin-top: 8vh;
        padding-bottom: 8vh;
        height: auto;
    }

    .method-description {
        flex-direction: column;
        align-items: center;
        gap: 4vh;
    }

    .left-collumn,
    .right-collumn {
        width: 100%;
    }

    .right-collumn {
        height: 40vh;
    }

    .title {
        font-size: clamp(1.8rem, 1rem + 2.8vw, 3rem);
    }

    .oferta-cards {
        width: min(92%, 1000px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .oferta-card {
        width: 45%;
        margin-bottom: 3vh;
    }

    .metoda-holder {
        width: min(92%, 1000px);
    }

    .sesje-etapy {
        flex-direction: column;
    }

    .po-sesji-card {
        width: min(92%, 1000px);
    }

    .rolf-card {
        flex-direction: column;
        text-align: center;
    }

    .rolf-bio,
    .rolf-bio p {
        text-align: left;
    }

    .rolf-links,
    .rolf-links-label {
        justify-content: center;
        text-align: center;
    }

    .opinie-holder {
        width: min(92%, 1000px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .opinie-card {
        width: 45%;
        margin-bottom: 3vh;
    }

    .aboutMe-holder {
        width: min(92%, 1000px);
        flex-direction: column;
        text-align: center;
    }

    .aboutMe-photo {
        width: 60%;
        height: 35vh;
    }

    .aboutMe-content {
        width: 90%;
    }

    .aboutMe-content .title,
    .aboutMe-content .title-line {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .aboutMe-content .description {
        text-align: center;
    }

    .organizacje-holder {
        justify-content: center;
    }

    .wizyta-holder {
        width: min(92%, 1000px);
        flex-direction: column;
    }

    .wizyta-kroki,
    .wizyta-boczne {
        width: 100%;
    }

    .cennik-holder {
        width: min(92%, 1000px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .cennik-card {
        width: 45%;
        margin-bottom: 3vh;
    }

    .faq-holder {
        width: min(92%, 1000px);
    }

    .kontakt-holder {
        width: min(92%, 1000px);
    }

    .kontakt-info {
        grid-template-columns: repeat(3, 1fr);
        gap: 3vh 4vw;
    }

    #title-oferta,
    #title-opinie {
        width: 90%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .main {
        width: 100%;
        padding-top: 24vh;
        align-items: center;
        overflow-x: hidden;
    }

    .header-div {
        height: auto;
        min-height: 0;
    }

    .header {
        width: 100%;
        height: auto;
        min-height: 0;
        justify-content: center;
        border-bottom: none;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 2vh 4vw 1.5vh;
        overflow: visible;
    }

    /* rząd 1: duże logo na środku */
    .logo {
        align-self: center;
        width: clamp(220px, 55vw, 340px);
        height: 12vh;
        min-height: 90px;
        margin-bottom: 1.5vh;
    }

    /* Siatka 8-kolumnowa (podwójna rozdzielczość):
       - pierwsze 4 elementy zajmują po 2 kolumny -> wypełniają cały rząd 2
       - kolejne 3 elementy też po 2 kolumny, ale przesunięte o 1 kolumnę
         w prawo (start od kolumny 2 zamiast 1) -> rząd 3 wychodzi wycentrowany */
    .buttons-holder {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        justify-items: center;
        align-items: start;
        row-gap: 0.5vh;
        column-gap: 1vw;
        overflow: visible;
        padding: 0;
    }

    .buttons-holder > :nth-child(1) { grid-column: 1 / 3; }
    .buttons-holder > :nth-child(2) { grid-column: 3 / 5; }
    .buttons-holder > :nth-child(3) { grid-column: 5 / 7; }
    .buttons-holder > :nth-child(4) { grid-column: 7 / 9; }
    .buttons-holder > :nth-child(5) { grid-column: 2 / 4; }
    .buttons-holder > :nth-child(6) { grid-column: 4 / 6; }
    .buttons-holder > :nth-child(7) { grid-column: 6 / 8; }

    /* Kluczowa poprawka nachodzenia się tekstu:
       elementy grid domyślnie nie chcą się skurczyć poniżej naturalnej
       szerokości tekstu - min-width:0 wymusza zawijanie zamiast overflow */
    .header-button-dropdown,
    .header-button {
        min-width: 0;
        max-width: 100%;
    }

    .header-button-dropdown {
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
        row-gap: 0;
    }

    .header-button-dropdown .dropdown-arrow-btn {
        margin-left: 0;
        margin-top: -0.5em;
    }

    .header-button {
        font-size: clamp(0.68rem, 0.62rem + 0.35vw, 0.85rem);
        padding: 0.4em 0.3em;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.25;
    }

    .dropdown-arrow-btn {
        margin-left: 0;
    }

    .signIn {
        margin-left: 0;
        padding: 0.6em 0.8em;
    }

    .main-section {
        width: 92%;
        height: 35vh;
        margin-left: auto;
        margin-right: auto;
    }

    .main-section-photo {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    .main-section-photo::after {
        height: 70%;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 25%, rgba(255,255,255,0.9) 70%, rgba(255,255,255,1) 100%);
    }

    .method-section,
    .metoda-section,
    .oferta-section,
    .opinie-section,
    .aboutMe-section,
    .wizyta-section,
    .cennik-section,
    .faq-section,
    .kontakt-section {
        width: 100%;
        margin-top: 8vh;
        padding-bottom: 8vh;
    }

    .method-description {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
        align-items: center;
        gap: 4vh;
    }

    .left-collumn,
    .right-collumn {
        width: 100%;
    }

    .right-collumn {
        height: 30vh;
    }

    .title {
        font-size: clamp(1.6rem, 1rem + 2.2vw, 2.2rem);
    }

    .title-line {
        width: 60%;
    }

    .description {
        font-size: 1em;
    }

    .oferta-cards,
    .opinie-holder,
    .aboutMe-holder,
    .kontakt-holder,
    .metoda-holder,
    .wizyta-holder,
    .cennik-holder,
    .faq-holder,
    .po-sesji-card {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
    }

    .oferta-card,
    .opinie-card,
    .cennik-card {
        width: 100%;
    }

    .aboutMe-photo {
        width: 80%;
        height: 30vh;
    }

    .aboutMe-content {
        width: 100%;
    }

    .aboutMe-content .title {
        font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
    }

    .kontakt-info {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 2vh;
    }

    .kontakt-item {
        text-align: center;
        align-items: center;
    }

    .kontakt-button {
        width: 80%;
        padding: 2vh 0;
    }

    .stopka-nawigacja {
        flex-direction: column;
        align-items: center;
        gap: 1.5vh;
    }

    #title-oferta,
    #title-opinie {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 1.8vh 3vw 1.3vh;
    }

    /* rząd 1: logo na środku */
    .logo {
        width: clamp(190px, 60vw, 260px);
        height: 10vh;
        min-height: 75px;
        margin-bottom: 1.2vh;
    }

    /* siatka 12-kolumnowa (wspólna wielokrotność 3 i 4),
       żeby oba rzędy wypełniały całą szerokość i były
       automatycznie, równo wycentrowane */
    .buttons-holder {
        grid-template-columns: repeat(12, 1fr);
        row-gap: 0.4vh;
        column-gap: 0.8vw;
    }

    /* rząd 2: pierwsze 3 odnośniki - każdy zajmuje 4/12 kolumn */
    .buttons-holder > :nth-child(1) { grid-column: 1 / 5; }
    .buttons-holder > :nth-child(2) { grid-column: 5 / 9; }
    .buttons-holder > :nth-child(3) { grid-column: 9 / 13; }

    /* rząd 3: kolejne 4 odnośniki - każdy zajmuje 3/12 kolumn */
    .buttons-holder > :nth-child(4) { grid-column: 1 / 4; }
    .buttons-holder > :nth-child(5) { grid-column: 4 / 7; }
    .buttons-holder > :nth-child(6) { grid-column: 7 / 10; }
    .buttons-holder > :nth-child(7) { grid-column: 10 / 13; }

    .header-button-dropdown,
    .header-button {
        min-width: 0;
        max-width: 100%;
    }

    .header-button-dropdown {
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }

    .header-button {
        font-size: clamp(0.62rem, 0.55rem + 0.4vw, 0.78rem);
        padding: 0.35em 0.2em;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.2;
    }

    .dropdown-arrow-btn {
        margin-left: 0;
    }

    .signIn {
        margin-left: 0;
        padding: 0.5em 0.6em;
        font-size: clamp(0.65rem, 0.55rem + 0.45vw, 0.85rem);
    }
}
/* ===================== POPUP: BRAK PLIKÓW COOKIE ===================== */

.cookie-popup {
    position: fixed;
    left: 50%;
    bottom: 3vh;
    transform: translate(-50%, 150%);
    z-index: 1000;
    width: min(90%, 700px);
    background-color: white;
    color: black;
    border-radius: 1em;
    border: 1px solid goldenrod;
    padding: 2.5vh 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2vh;
    box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.25);
    transition: transform 0.6s ease;
    font-family: "Geomini", sans-serif;
}

.cookie-popup.visible {
    transform: translate(-50%, 0);
}

.cookie-popup-text {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

.cookie-popup-button {
      background-color: black;
    color: white;
    border-radius: 1em;
    transition: color 0.5s ease, background-color 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
    border: 1px solid black;
    padding: 0.8em 1.4em;
    font-size: clamp(0.9rem, 0.8rem + 0.45vw, 1.15rem);
}

.cookie-popup-button:hover {
    background-color: white;
    color: black;
    border: 1px solid goldenrod;
    transform: scale(1.05);
}

@media (max-width: 600px) {
    .cookie-popup {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 2vh;
    }

    .cookie-popup-button {
        width: 100%;
        padding: 1.5vh 0;
    }
}