.section-3 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 32px 16px 40px;
}

/* két kártya egymás mellett, középre húzva */
.section-3-div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 960px;
}

/* egy kártya */
.section-3-item {
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.13);
    overflow: hidden; /* a kép sarkai is kerekedjenek */
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* kép felül, egységes méret */
.section-3-img {
    width: 100%;
    aspect-ratio: 4 / 3; /* egységes képarány */
    object-fit: cover; /* vág, de nem torzít */
    display: block;
}

/* szöveg a kártya belsejében */
.section-3-item p {
    padding: 18px 20px 20px;
    margin: 0;
    color: #2f2f2f;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

/* quote blokk, ugyanabban a section-3-ban */
.section-3-quote {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    max-width: 960px;
    margin: 60px auto 0;
    padding: 0 16px;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Háttér dísz képek maradnak abszolúton */
.section-vass-logo1 {
    position: absolute !important;
    top: -388px;
    left: -733px;
    width: calc(100% + 466px);
    max-width: 1120px;
}
.section-vass-logo5 {
    position: absolute !important;
    top: 0px;
    right: -752px;
    width: calc(100% + 466px);
    max-width: 1120px;
}

/* bal oldali álló kép – olyan magas, mint a szövegblokk */
.section-3-quote-image {
    flex: 0 0 280px; /* kb. portré szélesség, ahogy tetszik */
    border-radius: 24px;
    overflow: hidden; /* hogy a sarkok szépen kerekedjenek */
}

.section-3-quote-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* a kép kitölti a rendelkezésre álló magasságot, vágással */
}

/* jobb oldali szöveg + gomb, háttérszín NINCS */
.section-3-quote-text {
    flex: 1 1 auto;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}

.section-3-quote-text p {
    margin: 0 0 12px;
}

/* gomb alatta – meglévő stílus + kicsi térköz */
.section-3-quote-button {
    margin-top: 26px;
    max-width: 360px; /* opcionális, hogy ne legyen túl széles */
    text-transform: uppercase; /* a gomb stílusa nagybetűs */
}

/* A teljes blokk – a három kártya konténere */
.section-3-steps {
    width: 100%;
    max-width: 960px;
    margin: 40px auto 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Egy kártya sor */
.section-3-step {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* 2. kártya: desktopon fordított (szöveg bal, kép jobb) */
/* .section-3-step--reverse {
    flex-direction: row;
} */

/* képblokk bal/jobb oldalon */
.section-3-step-media {
    flex: 0 0 40%;
}

/* vízszintes (fekvő) képek egységesítése */
.section-3-step-img {
    width: 100%;
    aspect-ratio: 4 / 3; /* fekvő arány, tetszés szerint állíthatod */
    object-fit: cover;
    border-radius: 20px; /* sarkok kerekítése */
    display: block;
}

/* szövegblokk */
.section-3-step-copy {
    flex: 1 1 auto;
    color: #2f2f2f;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

.section-3-step-copy h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.section-3-step-copy p {
    margin: 0;
}

/* Reszponzív – mobilon egymás alatt, kép felül */
@media (max-width: 768px) {
    .section-3-quote {
        flex-direction: column;
        align-items: center;
        text-align: left; /* vagy center, ha jobban tetszik */
    }

    .section-3-quote-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 340px;
    }

    .section-3-quote-image img {
        height: auto; /* kisebb kijelzőn ne legyen túl magas */
    }

    .section-3-quote-button {
        width: 100%;
        max-width: none;
    }
    .section-vass-logo1,
    .section-vass-logo2 {
        display: none !important;
    }
}

/* mobil: kártyák egymás alatt */
@media (max-width: 768px) {
    .section-3-div {
        grid-template-columns: 1fr;
    }
    .section-vass-logo1,
    .section-vass-logo5 {
        display: none !important;
    }
    .section-3-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 2. kártyánál is ugyanúgy: kép felül, szöveg alul */
    .section-3-step--reverse {
        flex-direction: column-reverse;
    }

    .section-3-step-media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 360px;
    }

    .section-3-step-copy {
        width: 100%;
    }
}
@media (max-width: 1100px) {
    .section-vass-logo1,
    .section-vass-logo5 {
        display: none !important;
    }
}

.divider {
    position: relative;
    width: 100%;
    height: 140px; /* adunk fix magasságot, hogy a csík + logó szépen elférjen */
    margin: 48px 0;

    display: flex;
    align-items: center;
    justify-content: center;

    /* háttér: kis fák csíkja, középen a lyukkal */
    background-image: url("/img/section3/facskak.png");
    background-repeat: no-repeat;
    background-position: center center; /* középre igazítva, hogy a lyuk középre essen */
    background-size: auto 89px; /* eredeti magasság, szélesség arányosan */
}

.divider-logo {
    width: 121px;
    height: 121px;
    display: block;
    object-fit: contain;
}

/* Mobil finomhangolás */
@media (max-width: 600px) {
    .divider {
        height: 120px;
        margin: 32px 0;
        background-size: auto 70px; /* kicsit alacsonyabb csík, hogy ne legyen túl nagy */
    }

    .divider-logo {
        width: 90px;
        height: 90px;
    }
}