header,
section,
footer {
    max-width: 100%;
}

.header-wrapper,
.gift-description,
.gift,
.subscribe,
.contact {
    width: 100%;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(42, 58, 94, 0.06);
    background: linear-gradient(135deg, rgba(240, 244, 250, 0.5), rgba(255, 255, 255, 0.5));
}


.header-wrapper {

    text-align: center;
    padding: 20px 15px;
    /* mobilbarát belső tér */
    border-radius: 10px;
    /* illeszkedik a general style-hoz */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/* ---------- Mobil szuperkeskeny 320px ---------- */
@media screen and (max-width: 339px) {
    .header-wrapper {
        flex-direction: column;
        align-items: center;
        padding: 15px 10px;
        gap: 15px;
    }

    .header-wrapper .image-wrapper img {
        width: 100%;
        max-width: 300px;
        /* kis képernyőn ne legyen túl nagy */
        height: auto;
        display: block;
        border-radius: 10px;
    }

    .header-wrapper .text {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    .header-wrapper .text .cta-btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
    }
}

/* ---------- Mobil normál 340px - 425px (Galaxy S20, stb.) ---------- */
@media screen and (min-width: 340px) and (max-width: 425px) {
    .header-wrapper {
        flex-direction: column;
        align-items: center;
        padding: 15px 20px;
        gap: 20px;
    }

    .header-wrapper .image-wrapper img {
        width: 100%;
        max-width: 100%;
        /* teljes konténer szélesség */
        height: auto;
        display: block;
        border-radius: 10px;
    }

    .header-wrapper .text {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    .header-wrapper .text .cta-btn {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 24px;
    }
}

/* iPhone 14 Pro Max és Surface Duo - Kép megfelelő megjelenítése */
@media screen and (max-width: 540px) {
    .header-wrapper .image-wrapper img {
        width: 100%;
        /* Kép szélessége 100% */
        max-width: 100%;
        /* A kép soha ne legyen szélesebb, mint a szülő */
        height: auto;
        /* A magasság arányos legyen */
        object-fit: contain;
        /* Kép arányainak megtartása */
        border-radius: 20px;
    }

    .header-wrapper {
        text-align: center;
        /* Igazítjuk a szöveget is */
        padding: 15px;
        /* Kisebb padding, hogy több hely maradjon */
    }
}




/* ---------- Tablet nézet - CTA gomb ---------- */
@media (min-width: 600px) and (max-width:767px) {
    .header-wrapper header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        /* térköz a cím, kép, gomb között */
        padding: 0 15px;
    }

    .header-wrapper .image-wrapper {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .header-wrapper .image-wrapper img {
        width: 100%;
        /* a kép kitölti a dobozt */
        height: auto;
        max-width: 100%;
        border-radius: 20px;
    }

    .header-wrapper .text {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        /* a szöveg doboza is kitölti a teret */
        max-width: 100%;
        margin: 0 auto;
    }

    .cta-btn {
        font-size: 1.375rem;
        /* kb. 22px - mobilon 20px volt */
        padding: 14px 0;
        /* kicsit több tap-target */
        max-width: 360px;
        /* ne legyen túl nagy */
        margin-top: 20px;
        /* extra tér a gomb felett */
    }
}

/* ---------- Laptop nézet 768px - 1024px ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-wrapper {
        padding: 10px 20px;
        /* nagyobb belső tér */
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    .header-wrapper header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 30px;
        width: 100%;
    }

    .header-wrapper header .text {
        display: flex;
        flex-direction: column;
        /* egymás alá rendezi */
        gap: 15px;
        /* vagy 15px, amennyi kell a cím-szöveg-gomb közé */
        padding-bottom: 20px;
    }

    .text h1 {
        margin-bottom: 0;
    }

    .text p {
        padding-bottom: 10px;
    }

    .text .cta-btn {
        margin-bottom: 10px;
    }

    .header-wrapper .image-wrapper {
        display: flex;
        /* flex konténer */
        justify-content: center;
        /* középre vízszintesen */
        align-items: center;
        /* középre függőlegesen */
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }

    .header-wrapper .image-wrapper img {
        max-width: 100%;
        /* a kép ne lógjon ki */
        width: 100%;
        height: auto;
        display: block;
        /* blokkszintű elem, hogy a margin auto működjön */
        margin: 0;
        /*középre helyezés, ha kell */
        border-radius: 20px;
    }
}

/* ---------- Desktop nézet 1025px - 1919px ---------- */
@media (min-width: 1025px) and (max-width:1439px) {
    .header-wrapper header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        /* magasságot a legnagyobb elemhez igazítja */
        padding: 0px 30px;
        border-radius: 10px;
        text-align: center;
        margin: 0 auto;
        max-width: 100%;
        gap: 20px;
    }

    .header-wrapper .image-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: stretch;
        padding: 30px 0;
    }

    .header-wrapper .image-wrapper img {
        max-width: 100%;
        /* a kép ne legyen túl nagy */
        height: auto;
        border-radius: 20px;
    }

    .header-wrapper .text {
        flex: 1;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* középre igazítja függőlegesen */
        gap: 30px;


    }

    .cta-btn {
        font-size: 1.75rem;
        /* kb. 28px, arányos a nagyobb címekhez */
        padding: 16px 0;
        max-width: 90%;
        /* ne lógjon túl */
        margin: 40px auto 50px auto;
        /* kicsit több tér a gomb felett */
    }
}

/*--------- nagyobb monitorok-------*/

@media (min-width: 1440px) and (max-width: 1919px) {
    .header-wrapper {
        padding: 0;
        margin: 0 auto;
        text-align: center;
        background: linear-gradient(135deg, #f0f4fa, #ffffff);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .header-wrapper header {
        display: flex;
        flex-direction: row;
        /* két oszlop vízszintesen */
        align-items: center;
        /* függőlegesen középre */
        justify-content: center;
        gap: 30px;
        /* tér a két oszlop között */
        min-width: 100%;
    }

    .header-wrapper .image-wrapper {
        max-width: 50%;
    }

    .header-wrapper .image-wrapper img {
        text-align: center;
        max-width: 100%;
        height: auto;
        border-radius: 20px;
        margin: 30px;
    }

    .header-wrapper .text {
        flex: 1;
        text-align: center;
        /* a szöveg középre*/
        display: flex;
        /* fontos */
        flex-direction: column;
        /* egymás alatt rendezi */
        justify-content: center;
        /* függőleges középre igazít */
        align-items: center;
        gap: 10px;
        /* térköz a h1, p, gomb között */
        max-width: 600px;
        margin: 0 auto;
    }

    .header-wrapper .text h1 {
        margin: 0;
        padding: 0;
    }

    .cta-btn {
        margin-bottom: 10px;
        max-width: 600px;
        /* gomb szélesség */
        font-size: 2.625rem;
    }
}


/* ---------- Nagy képernyő 1920px+ ---------- */
@media screen and (min-width: 1920px) {
    .header-wrapper header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 60px;
        /* nagyobb padding */
        max-width: 1800px;
        margin: 0 auto;
        gap: 80px;
        /* tágabb tér a kép és a szöveg között */
    }

    .header-wrapper .image-wrapper,
    .header-wrapper .text {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
    }

    .header-wrapper .image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: cover;
        /* A kép kitölti a rendelkezésre álló helyet */
        border-radius: 20px;
        display: block;
    }

    .header-wrapper .text {
        text-align: center;
        /* a szöveg középre igazítva */
        width: 100%;
        max-width: 900px;
        /* szöveg szélesség korlátozása */
    }

    .header-wrapper .text .cta-btn {
        display: inline-block;
        margin-top: 20px;
        max-width: 80%;
    }
}



/*------------Gift-description szekció-----------*/
.divider {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gift-description {
    text-align: center;

}

.gift-description p {
    margin-bottom: 12px;
    /* kis térköz a szövegek között */
}


/* ---------- Gift szekció ---------- */
.gift h2 {
    margin-bottom: 16px;
}

.gift ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
}

.gift li {
    margin-bottom: 12px;
}

/*---------   Tablet és nagyobb nézetek 768px-tól kezdve -------*/

@media (min-width: 768px) and (max-width: 1024px) {
    .divider {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 30px;
        padding: 20px;
    }

    .divider section {
        flex: 1;
        max-width: 50%;
        text-align: center;
    }

    .gift-description,
    .gift {
        flex: 1;
        max-width: 50%;
    }
}

/*---------  Nagyobb tablet, laptop és kisebb képernyők 1025px-tól -------*/

@media (min-width: 1025px) and (max-width: 1919px) {
    .divider {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 30px;
        padding: 40px 30px;
    }

    .divider section {
        flex: 1;
        max-width: 50%;
        text-align: left;
    }

    .gift-description,
    .gift {
        flex: 1;
        max-width: 48%;
        padding: 30px;
    }

    .gift p,
    .gift li {
        font-size: 1.875rem;
        line-height: 1.6;
    }
}

/*--------- Laptop és kisebb monitorok 1025px fölött -------*/

@media (min-width: 1025px) and (max-width: 1919px) {
    .divider {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 30px;
        padding: 40px 30px;
    }

    .divider section {
        flex: 1;
        max-width: 50%;
        text-align: left;
    }

    .gift-description,
    .gift {
        flex: 1;
        max-width: 48%;
        padding: 30px;
    }

    .gift p,
    .gift li {
        font-size: 1.875rem;
        line-height: 1.6;
    }
}

/* ---------- 1920px és nagyobb képernyők - Divider egymás mellé ---------- */
@media (min-width: 1920px) {
    .divider {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 40px;
        padding: 40px 60px;
    }

    .divider section {
        flex: 1;
        max-width: 50%;
        text-align: left;
    }

    .gift-description,
    .gift {
        flex: 1;
        max-width: 48%;
        padding: 40px;
    }

    .gift p,
    .gift li {
        font-size: 2rem;
        line-height: 1.6;
    }
}






/* ---------- Subscribe szekció ---------- */

.subscribe form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #c6d5e9;
    border-radius: 10px;
    width: 100%;
}

.subscribe input[type="text"],
.subscribe input[type="email"] {
    font-size: 1.25rem;
    /* nagyobb betűméret */
    padding: 10px 14px;
    border: 1.5px solid #b0c4de;
    border-radius: 10px;
    transition: border 0.2s;
    width: 90%;
}

.subscribe button {
    font-size: 1.15rem;
    /* 18-19px */
    padding: 12px 10px;
    background: #2a3a5e;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    box-shadow: none;
    width: 90%;
}

.subscribe button:hover {
    background: #1a2540;
    transform: scale(1.04);
}


/* ---------- Contact szekció ---------- */


.contact {
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(42, 58, 94, 0.06);
    padding: 20px 10px;
    /* Igény szerint állítható */
}


/* Szöveg a háttér és az overlay fölött */
.contact>* {
    position: relative;
    z-index: 2;
    /* A szöveg mindig a réteg felett lesz */
}



.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    /* alsó térköz a következő elemhez */
}

.contact-list li {
    font-size: 1.3rem;
    /* kb. 21px, jól olvasható mobilon */
    line-height: 1.5;
    margin-bottom: 8px;
    /* kis távolság a sorok között */
    display: flex;
    align-items: center;
    justify-content: center;
    /* középre igazítja */
    gap: 8px;
    /* térköz ikon és szöveg között */
}

.contact-list li i {
    margin-right: 8px;
    /* ikon és szöveg közötti térköz */
    color: #3e5488;
    /* ikon színe */
    font-size: 1.2rem;
    /* az ikon arányos legyen a szöveggel */
    vertical-align: middle;
    /* szöveggel egyvonalban maradjon */
}


.contact-list li a {
    font-size: 1.3rem;
    /* linkek ugyanakkoraak, mint a szöveg */
    color: #3e5488;
    /* harmonizáljon a szöveggel */
    text-decoration: none;
    transition: color 0.2s;
}

/* Hover állapot - sötétebb árnyalat */
.contact-list li a:hover,
.social-links a:hover {
    color: #1a2540;
}




.social-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 16px 0;
    align-items: center;
    justify-content: center;
}

.social-links li {
    display: block;
}

.social-links a img {
    /* display: inline-block;*/
    width: 40px;
    /* mobilbarát méret */
    height: 40px;
    transition: transform 0.2s;
}

.social-links a:hover img {
    transform: scale(1.15);
    filter: brightness(0.7);
}

.divider2 {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

/* --------- Mobil nézet (max-width: 767px) --------- */
@media (min-width: 600px) and (max-width: 767px) {

    .divider2 {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .divider2 section {
        max-width: 100%;
        text-align: center;
    }

    /* Subscribe űrlap mobil nézet */
    .subscribe form {
        padding: 15px;
    }

    .subscribe input[type="text"],
    .subscribe input[type="email"] {
        font-size: 1.25rem;
        padding: 10px;
        width: 100%;
    }

    .subscribe button {
        font-size: 1.2rem;
        padding: 12px;
        width: 100%;
    }

    /* Contact szakasz */
    .contact {
        max-width: 100%;
        padding: 30px 20px;

    }

    .contact-list li {
        font-size: 1.25rem;
    }

    .social-links {
        display: flex;
        flex-direction: row;
    }

    .social-links a img {
        width: 32px;
        height: 32px;
    }
}

/* --------- Tablet és Laptop nézet (768px - 1024px) --------- */
@media (min-width: 768px) and (max-width: 1024px) {

    .divider2 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: stretch;
        gap: 30px;
        padding: 30px;
    }

    .divider2 section {
        flex: 1;
        max-width: 48%;
    }

    .subscribe {
        order: 1;
    }

    /* Subscribe űrlap */
    .subscribe form {
        padding: 15px;
        gap: 20px;
    }

    .subscribe input[type="text"],
    .subscribe input[type="email"] {
        font-size: 1.2rem;
        padding: 12px;
        width: 100%;
    }

    .subscribe button {
        font-size: 1rem;
        padding: 14px;
        width: 100%;
    }

    /* Contact szakasz */
    .contact {
        order: 2;
        padding: 40px 30px;




    }

    .contact-list li {
        font-size: 1.3rem;
    }

    .social-links {
        flex-direction: row;
        gap: 20px;
    }

    .social-links a img {
        width: 32px;
        height: 32px;
    }
}

/* --------- Asztali nézet (1025px - 1919px) --------- */
@media (min-width: 1025px) and (max-width: 1919px) {
    .divider2 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 40px;
        padding: 40px;
    }

    .divider2 section {
        flex: 1;
        max-width: 48%;
    }

    /* Subscribe űrlap */
    .subscribe form {
        margin: 0 auto;
        padding: 20px;
        max-width: 100%;
        gap: 30px;
    }

    .subscribe input[type="text"],
    .subscribe input[type="email"] {
        font-size: 1.5rem;
        padding: 12px;
        width: 100%;
    }

    .subscribe button {
        font-size: 1.25rem;
        padding: 16px;
        width: 100%;
    }

    /* Contact szakasz */
    .contact {
        padding: 50px 40px;

    }

    .contact-list li {
        font-size: 1.375rem;
    }

    .social-links {
        flex-direction: row;
        gap: 30px;
    }

    .social-links a img {
        width: 40px;
        height: 40px;
    }
}

/* --------- Nagyképernyős nézet (1920px és nagyobb) --------- */
@media (min-width: 1920px) {
    .divider2 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 50px;
        padding: 50px;
    }

    .divider2 section {
        flex: 1;
        max-width: 48%;
    }

    /* Subscribe űrlap */
    .subscribe form {
        max-width: 100%;
        padding: 25px;
        margin: 0 auto;
        gap: 40px;
    }

    .subscribe input[type="text"],
    .subscribe input[type="email"] {
        font-size: 1.6rem;
        padding: 14px;
        width: 100%;
    }

    .subscribe button {
        font-size: 1.3rem;
        padding: 18px;
        width: 100%;
    }

    /* Contact szakasz */
    .contact {
        padding: 60px 50px;

    }

    .contact-list li {
        font-size: 1.5rem;
    }

    .social-links {
        display: flex;
        flex-direction: row;
        gap: 40px;
    }

    .social-links a img {
        width: 50px;
        height: 50px;
    }
}


/* ---------- Footer szekció ---------- */

.footer-wrapper footer {
    display: flex;
    flex-direction: column;
    /* egymás alá */
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* távolság az elemek között */
    padding: 15px;
    /* kényelmes belső tér mobilon */
    text-align: center;


}

.footer-wrapper .footer-left p {
    font-size: 1rem;
    /* kb. 16px */
    margin: 0;
    /* eltünteti a felesleges margót */
    text-align: center;
    /* mobilon középre */
}

.footer-wrapper .footer-right a {
    font-size: 1.375rem;
    /* kb. 22px */
    margin: 0;
    /* eltünteti a felesleges margót */
    text-align: center;
    /* mobilon középre */
    color: #3e5488;
    /* harmonizáljon a szöveggel */
    text-decoration: none;
    transition: color 0.2s;
}


.footer-wrapper .footer-right a:hover {
    color: #1a2540;
    transform: scale(1.15);
    filter: brightness(0.7);
}

@media (min-width: 600px) and (max-width: 767px) {
    .footer-wrapper footer {
        flex-direction: column;
        /* egymás mellé kerülnek */
        padding: 20px 30px;
        gap: 14px;
    }

    .footer-wrapper .footer-left p {
        font-size: 1.125rem;
        /* maradhat a mobilhoz hasonló */
        text-align: left;
        /* bal oldali és jobb oldali igazítás */
        margin: 0;
    }


    .footer-wrapper .footer-right a {
        font-size: 1.375rem;
        /* kb. 22px */
        text-align: right;
        margin: 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .footer-wrapper footer {
        display: flex;
        flex-direction: row;
        /* egymás mellé */
        justify-content: space-between;
        align-items: stretch;
        /* egyforma magasság */
        gap: 20px;
        /* hézag a két doboz között */
        padding: 0 20px;
        /* oldalt legyen padding */
        border: none;
        box-shadow: none;
        /* ne legyen árnyék */
    }

    .footer-wrapper .footer-left,
    .footer-wrapper .footer-right {
        flex: 1;
        /* egyforma szélesség */
        display: flex;
        align-items: center;
        /* függőlegesen középre */
        justify-content: center;
        /* vízszintesen középre */
        text-align: center;
    }

    .footer-wrapper .footer-left {
        position: relative;
        /* kell a pseudo-elemhez */
    }

    /* függőleges elválasztó a két szöveg között */
    .footer-wrapper .footer-left::after {
        content: "";
        position: absolute;
        right: -10px;
        /* távolság a vonalhoz */
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 1.5em;
        /* a szöveg magasságához igazítva */
        background-color: #1a2540;
        /* a címsor színe */
    }

    .footer-wrapper .footer-left p {
        font-size: 1.25rem;
        /* kb. 20px */
    }

    .footer-wrapper .footer-right p a {
        font-size: 1.5rem;
    }
}

/* --------- Asztali nézet (1025px - 1919px) --------- */
@media (min-width: 1025px) and (max-width: 1919px) {
    .footer-wrapper footer {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: space-between;
        padding: 20px 60px;
        position: relative;
    }

    .footer-wrapper .footer-left p {
        font-size: 1.25rem;
        text-align: left;
    }

    .footer-wrapper .footer-right p {
        text-align: center;
        font-size: 1.5rem;
    }

    .footer-wrapper footer::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 1.5em;
        width: 1px;
        background-color: #1a2540;
    }
}

/* --------- Nagyképernyős nézet (1920px és fölötte) --------- */
@media (min-width: 1920px) {
    .footer-wrapper footer {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: space-between;
        padding: 25px 100px;
    }

    .footer-wrapper .footer-left p,
    .footer-wrapper .footer-right p {
        font-size: 1.5rem;
    }

    .footer-wrapper .footer-right a {
        font-size: 1.4rem;
    }
}