@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* =========================================================
   🌊 LUXURY SEA VACATION
   PREMIUM COASTAL / RESORT DESIGN
========================================================= */


/* =========================================================
   SZÍNEK
========================================================= */

:root {

    /* ---------- ÓCEÁN ---------- */

    --sea-light: #DDF7FA;
    --sea-pale: #F2FCFD;

    --sky: #65C7DF;
    --sky-dark: #299DBA;

    --turquoise: #0FA3B1;
    --turquoise-dark: #087F8D;

    --ocean: #075B78;
    --ocean-dark: #043B52;

    --navy: #022B3A;


    /* ---------- HOMOK / VILÁGOS ---------- */

    --sand: #F7FBFA;
    --sand-warm: #FFF9ED;


    /* ---------- LUXUS ---------- */

    --gold: #229DA5;
    --gold-dark: #78D2FF;
    --gold-light: #E8CE91;


    /* ---------- SZÖVEG ---------- */

    --text-dark: #123C4A;
    --text: #315965;

    --text-light: #EAF9FC;

    --white: #FFFFFF;


    /* ---------- EFFEKT ---------- */

    --shadow:
        0 20px 55px rgba(2, 43, 58, .16);

    --shadow-heavy:
        0 25px 70px rgba(2, 43, 58, .28);


    --radius: 24px;

    --transition: .35s ease;
}


/* =========================================================
   ALAPOK
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;

    /* Anchor linkeknél ne takarja ki a navbar a címet */
    scroll-padding-top: 90px;
}


body {

    font-family:
        'Inter',
        Arial,
        sans-serif;

    background:
        var(--sand);

    color:
        #FFFFFF;

    line-height:
        1.7;
}


h1,
h2,
h3 {

    font-family:
        'Garamond',
        Georgia,
        serif;

    color:
        #FFFFFF;
}


img {

    max-width:
        100%;

    display:
        block;
}


a {

    text-decoration:
        none;

    color:
        inherit;
}


/* =========================================================
   NAVIGÁCIÓ
   FIXEN MINDIG LEGFELÜL
========================================================= */

.navbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        20px 6%;

    background:
        rgba(53, 191, 197, .88);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid rgba(212, 175, 55, .35);

    /*
       A navbar minden tartalom fölött marad.
       A görgetett szekciók mögé kerülnek.
    */

    z-index:
        99999;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 12px;

    font-family:
        'Garamond',
        Georgia,
        serif;

    font-size: 28px;
    font-weight: 700;

    color: #FFFFFF;
    letter-spacing: 1px;
}

.logo img {
    width: 48px;
    height: 48px;

    object-fit: cover;

    border-radius: 50%;

    display: block;

    border: 2px solid rgba(255, 255, 255, .65);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .25);
}


/* =========================================================
   MENÜ
========================================================= */

.nav-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    list-style:
        none;
}


.nav-menu a {

    color:
        #033767;

    font-weight:
        600;

    position:
        relative;
}


.nav-menu a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    background:
        var(--gold);

    transition:
        var(--transition);
}


.nav-menu a:hover::after {

    width:
        100%;
}


/* =========================================================
   HAMBURGER
========================================================= */

.hamburger {

    display:
        none;

    background:
        none;

    border:
        none;

    cursor:
        pointer;
}


.hamburger span {

    display:
        block;

    width:
        30px;

    height:
        3px;

    margin:
        6px;

    background:
        #FFFFFF;

    border-radius:
        10px;

    transition:
        .3s;
}


/* =========================================================
   🌅 HERO
========================================================= */

.hero {

    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        120px 20px 60px;


    background:

        linear-gradient(180deg,
            rgba(2, 43, 58, .18),
            rgba(7, 91, 120, .30)),

        url("../images/egypt-hero.jpg");

    background-size:
        cover;

    background-position:
        center;

    /*
       Nem adunk neki magas z-indexet,
       így a navbar mindig fölötte marad.
    */
}


/* =========================================================
   HERO KÁRTYA
========================================================= */

.hero-content {

    width:
        clamp(320px, 88vw, 1450px);

    min-height:
        clamp(450px, 82vh, 750px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    padding:
        clamp(30px, 5vw, 80px);

    background:
        linear-gradient(180deg,
            rgba(2, 43, 58, .18),
            rgba(7, 91, 120, .30)),
        url("../images/bg_eredeti.png");

    background-repeat: no-repeat;

    background-size: cover;
    background-position: center center;


    border:
        1px solid rgba(255, 255, 255, .35);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-heavy);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    animation:
        fadeUp 1s ease;
}


/* =========================================================
   HERO CÍM
========================================================= */

.hero h1 {

    font-size:
        clamp(44px, 7vw, 82px);

    color:
        #FFFFFF;

    line-height:
        1.05;

    letter-spacing:
        -1px;

    margin-bottom:
        25px;


    text-shadow:
        0 4px 18px rgba(0, 0, 0, .55);
}


/* =========================================================
   HERO SZÖVEG
========================================================= */

.hero p {

    font-size:
        20px;

    max-width:
        700px;

    margin:
        auto;

    color:
        #FFFFFF;

    font-weight:
        500;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .65);
}


/* =========================================================
   🌊 GOMB
========================================================= */

.btn {

    display:
        inline-block;

    margin-top:
        35px;

    padding:
        16px 42px;


    background:

        linear-gradient(135deg,
            var(--gold),
            var(--gold-dark));


    color:
        #FFFFFF;

    border-radius:
        50px;

    font-weight:
        800;

    letter-spacing:
        .3px;


    box-shadow:
        0 12px 30px rgba(0, 0, 0, .25);


    transition:
        var(--transition);
}


.btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .30);
}


/* =========================================================
   SZEKCIÓK
   ÁTLÁTSZÓ - A HÁTTÉR LÁTSZÓDIK MÖGÖTTE
========================================================= */

.section {

    padding:
        120px 6%;

    /*
       FONTOS:
       Nem használunk background-color-t.
       A szekció teljesen átlátszó marad.
    */

    background:
        transparent;

    overflow:
        hidden;

    /*
       Anchor linkek esetén a navbar magasságát figyelembe veszi.
    */

    scroll-margin-top:
        90px;
}


/* =========================================================
   ALTERNÁLÓ SZEKCIÓ
   SZINTÉN ÁTLÁTSZÓ
========================================================= */

.section:nth-of-type(even) {

    background:
        transparent;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        60px;

    align-items:
        center;
}


/* =========================================================
   KÉP BLOKK
========================================================= */

.image-box {


    position: relative;


    overflow: hidden;


    border-radius:

        var(--radius);


    border:

        2px solid rgba(212, 175, 55, .35);



    box-shadow:

        var(--shadow);



    transition:

        var(--transition);


}




.image-box img {


    width: 100%;



    aspect-ratio:

        4/3;



    object-fit: cover;



    transition:

        .6s ease;


}





.image-box:hover img {


    transform:

        scale(1.06);


}





.image-box::after {


    content: "";


    position: absolute;


    inset: 0;



    background:


        linear-gradient(135deg,

            rgba(212, 175, 55, .35),

            transparent);



    opacity: 1;



    transition:

        .4s;


}





.image-box:hover::after {


    opacity: 1;


}



/* =========================================================
   ÓCEÁN OVERLAY
========================================================= */

.image-box::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(135deg,
            rgba(15, 163, 177, .30),
            transparent 60%);

    opacity:
        0;

    transition:
        .4s;
}


.image-box:hover::after {

    opacity:
        1;
}

.image-box {

    border-radius: 24px;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* =========================================================
   SZÖVEG
========================================================= */

.content h2 {

    font-size:
        clamp(34px, 5vw, 54px);

    color:
        #FFFFFF;

    line-height:
        1.08;

    margin-bottom:
        25px;
}


.content p {

    font-size:
        18px;

    color:
        #FFFFFF;

    line-height:
        1.8;

    font-weight:
        500;
}


/* =========================================================
   🔵 SÖTÉT ÓCEÁN SZEKCIÓ
   ÁTLÁTSZÓ MARAD
========================================================= */

.dark-section {

    position:
        relative;

    /*
       Nincs külön háttérszín.
       Így ez a szekció is átlátszó.
    */

    background:
        transparent;

    color:
        #FFFFFF;
}


.dark-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        url("../images/pattern.png");

    opacity:
        .04;

    pointer-events:
        none;
}


.dark-section .container {

    position:
        relative;

    z-index:
        99998;
}


.dark-section h2 {

    color:
        #FFFFFF;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .25);
}


.dark-section p {

    color:
        #EAF9FC;

    font-weight:
        500;
}


/* =========================================================
   FORDÍTOTT BLOKK
========================================================= */

.reverse .image-box {

    order:
        2;
}


/* =========================================================
   GALÉRIA
   ÁTLÁTSZÓ
========================================================= */

.gallery {

    text-align:
        center;

    background:
        transparent;

    scroll-margin-top:
        90px;
}


.gallery .content {

    max-width:
        700px;

    margin:
        0 auto 50px;
}


.gallery .content p {

    color:
        #FFFFFF;
}


.gallery-grid {

    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        25px;
}


.gallery-grid img {

    width:
        100%;

    height:
        300px;

    object-fit:
        cover;

    border-radius:
        var(--radius);

    border:
        2px solid rgba(15, 163, 177, .18);

    box-shadow:
        0 10px 30px rgba(2, 43, 58, .10);

    transition:
        .5s;
}


.gallery-grid img:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 40px rgba(2, 43, 58, .20);
}


/* =========================================================
   🌊 FOOTER
========================================================= */

footer {

    padding:
        45px 20px;

    text-align:
        center;

    background:
        var(--navy);

    color:
        var(--gold-light);

    font-weight:
        600;
}


/* =========================================================
   SOCIAL IKONOK
========================================================= */

.social-icons {

    display:
        flex;

    gap:
        25px;

    margin-top:
        40px;
}


.social-icons a {

    width:
        75px;

    height:
        75px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;


    background:
        rgba(255, 255, 255, .08);


    border:
        2px solid rgba(255, 255, 255, .25);


    font-size:
        38px;


    transition:
        .35s ease;


    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, .06);
}


.social-icons a:hover {

    transform:
        translateY(-8px) scale(1.08);

    background:
        var(--turquoise);

    color:
        #FFFFFF;

    border-color:
        var(--gold);

    box-shadow:
        0 15px 35px rgba(15, 163, 177, .35);
}


/* =========================================================
   SOCIAL SZÍNEK
========================================================= */

.social-icons a:nth-child(1) {
    color: #25D366;
}

.social-icons a:nth-child(2) {
    color: #1877F2;
}

.social-icons a:nth-child(3) {
    color: #E1306C;
}

.social-icons a:nth-child(4) {
    color: #FFFFFF;
}


/* =========================================================
   ANIMÁCIÓ
========================================================= */

@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(40px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


.hidden {

    opacity:
        0;

    transform:
        translateY(50px);

    transition:
        .8s ease;
}


.show {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   HAMBURGER ANIMÁCIÓ
========================================================= */

.hamburger.open span:nth-child(1) {

    transform:
        rotate(45deg) translate(6px, 6px);
}


.hamburger.open span:nth-child(2) {

    opacity:
        0;
}


.hamburger.open span:nth-child(3) {

    transform:
        rotate(-45deg) translate(7px, -7px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px) {

    .container {

        gap:
            40px;
    }

    .gallery-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* =========================================================
   MOBIL
========================================================= */

@media(max-width:768px) {

    .navbar {

        padding:
            18px 25px;
    }


    .hamburger {

        display:
            block;
    }


    .nav-menu {

        position:
            absolute;

        top:
            75px;

        left:
            -100%;

        width:
            100%;

        flex-direction:
            column;

        gap:
            25px;

        padding:
            35px 0;


        background:
            rgba(12, 132, 152, .97);


        backdrop-filter:
            blur(15px);

        -webkit-backdrop-filter:
            blur(15px);

        box-shadow:
            0 20px 40px rgba(2, 43, 58, .15);

        transition:
            .4s;

        z-index:
            99997;
    }


    .nav-menu.active {

        left:
            0;
    }


    .hero {

        min-height:
            90vh;

        padding:
            100px 15px 40px;
    }


    .hero-content {

        min-height:
            75vh;

        padding:
            35px 25px;
    }


    .hero h1 {

        font-size:
            40px;
    }


    .hero p {

        font-size:
            17px;
    }


    .section {

        padding:
            80px 25px;

        scroll-margin-top:
            85px;
    }


    .container {

        grid-template-columns:
            1fr;
    }


    .reverse {

        display:
            flex;

        flex-direction:
            column;
    }


    .reverse .image-box {

        order:
            0;
    }


    .gallery-grid {

        grid-template-columns:
            1fr;
    }


    .gallery-grid img {

        height:
            260px;
    }


    .btn {

        width:
            100%;

        text-align:
            center;
    }


    .social-icons {

        justify-content:
            center;

        gap:
            20px;
    }


    .social-icons a {

        width:
            70px;

        height:
            70px;

        font-size:
            34px;
    }
}


/* ================================
   KIS MOBIL
================================ */


@media(max-width:420px) {



    .logo {


        font-size:

            22px;


    }





    .hero h1 {


        font-size:

            34px;


    }




}
/* =========================================================
   🔝 Z-INDEX RÉTEGEK – VÉGLEGES
========================================================= */

/*
   1. NAVBAR
   Mindig minden tartalom előtt.
*/

.navbar {
    position: fixed !important;

    top: 0;
    left: 0;

    z-index: 2147483647 !important;

    isolation: isolate;
}


/*
   2. MOBIL MENÜ
   A navbaron belül, de minden oldal-tartalom előtt.
*/

.nav-menu {
    z-index: 2147483646 !important;
}


/*
   3. HAMBURGER
*/

.hamburger {
    position: relative;
    z-index: 2147483647;
}


/*
   4. OLDAL TARTALMA
   A szekciók a navbar mögötti rétegben maradnak.
*/

.hero,
.section,
.gallery,
footer {
    position: relative;
    z-index: 1;
}


/*
   5. SZEKCIÓK BELSŐ TARTALMA
   NEM kaphat magas z-indexet.
*/

.container,
.content,
.image-box,
.gallery-grid {
    position: relative;
    z-index: 2;
}


/*
   6. FONTOS:
   A dark-section korábbi 99998 értékét
   teljesen megszüntetjük.
*/

.dark-section .container {
    position: relative;
    z-index: 2 !important;
}


/*
   7. DARK SECTION HÁTTÉR
   A tartalom mögött marad.
*/

.dark-section::before {
    z-index: 0;
}


/*
   8. HERO CONTENT
*/

.hero-content {
    position: relative;
    z-index: 2;
}


/*
   9. A HERO ÉS SZEKCIÓK SOHA NE KERÜLJENEK
   A NAVBAR FÖLÉ.
*/

.hero,
.section,
.gallery,
.dark-section,
footer {
    z-index: 1 !important;
}

/* =========================================================
   🏺 EGYIPTOMI CÍMEK – NAGYOBB BETŰMÉRET
========================================================= */

h1,
h2,
h3 {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
}


/* HERO főcím */

.hero h1 {
    font-size: clamp(48px, 7.5vw, 92px);
    line-height: 1.05;
    letter-spacing: 2px;
}


/* Szekció címek */

.content h2 {
    font-size: clamp(40px, 5.5vw, 62px);
    line-height: 1.1;
    letter-spacing: 1.5px;
}


/* Navigáció */

.nav-menu a {
    font-size: 17px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    letter-spacing: 1px;
}


/* LOGO */

.logo {
    font-size: 30px;
    font-family: 'Cinzel', Georgia, serif;
}
/* =========================================================
   📱 MOBIL CÍMEK
========================================================= */

@media (max-width: 768px) {

    .hero h1 {
        font-size: 44px;
    }

    .content h2 {
        font-size: 42px;
    }

    .nav-menu a {
        font-size: 18px;
    }
}

@media (max-width: 420px) {

    .hero h1 {
        font-size: 36px;
    }

    .content h2 {
        font-size: 36px;
    }
}