/* =========================
   ALAPBEÁLLÍTÁSOK
========================= */

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

body{

    background:#050505;

    color:white;

    font-family:Arial, Helvetica, sans-serif;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

}



/* =========================
   FEJLÉC
========================= */

header{

    height:90px;

    background:black;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 60px;

}



/* LOGÓ */

.logo h1{

    color:#d4af37;

    font-size:50px;

}

.logo p{

    color:white;

    letter-spacing:3px;

    font-size:15px;

}



/* MENÜ */

nav{

    display:flex;

    gap:40px;

}

nav a{

    color:white;

    font-weight:bold;

    transition:.3s;

}

nav a:hover{

    color:red;

}

.active{

    color:red;

}



/* TELEFON GOMB */

.phone-btn{

    color:#d4af37;

    border:1px solid #d4af37;

    padding:16px 28px;

    border-radius:10px;

    font-weight:bold;

    transition:.3s;

}

.phone-btn:hover{

    background:#d4af37;

    color:black;

}



/* =========================
   KÖZÖS GOMBOK
========================= */

.gold-btn{

    display:inline-block;

    background:#d4af37;

    color:black;

    padding:18px 35px;

    border-radius:10px;

    font-weight:bold;

    transition:.3s;

    border:none;

    cursor:pointer;

}

.gold-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 20px rgba(212,175,55,.5);

}


.outline-btn{

    display:inline-block;

    color:#d4af37;

    border:2px solid #d4af37;

    padding:18px 35px;

    border-radius:10px;

    transition:.3s;

}


.outline-btn:hover{

    background:#d4af37;

    color:black;

}



/* PIROS VONAL */

.hero-line{

    width:300px;

    height:3px;

    background:red;

    margin:25px auto;

}


.mini-red-line{

    width:90px;

    height:2px;

    background:red;

    margin:20px auto 30px;

}
/* =========================
   FŐOLDAL HERO
========================= */

.hero{

    min-height:750px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:80px;

    background:
    linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.4)),
    url("../images/hatter.jpg");

    background-size:cover;

    background-position:center;

}


.hero-left{

    width:50%;

}


.hero-left h1{

    color:#d4af37;

    font-size:60px;

}


.hero-left h2{

    color:#d4af37;

    font-size:60px;

    margin-bottom:20px;

}


.hero-left h3{

    font-size:55px;

    margin-bottom:30px;

}


.hero-left p{

    color:#ddd;

    font-size:24px;

    line-height:40px;

}


.piros-vonal{

    width:450px;

    height:3px;

    background:red;

    margin-bottom:30px;

}


.hero-right{

    width:45%;

}


.hero-right img{

    width:100%;

}



/* ELÉRHETŐSÉGI ADATOK */

.adatok{

    margin-top:50px;

    display:grid;

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

    gap:25px;

}


.adat{

    color:#d4af37;

    font-size:20px;

}



/* =========================
   SZOLGÁLTATÁS KÁRTYÁK
========================= */

.services{

     width:150%;

    max-width:1400px;

    margin:auto;

    padding:80px 0 30px;


}


.section-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-bottom:50px;

}


.section-title h2{

    color:#d4af37;

    font-size:50px;

}


.line{

    width:180px;

    height:2px;

    background:red;

}


.services-grid{

    display:grid;

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

    gap:30px;

}


.service-card{

    background:#090909;

    border:1px solid rgba(212,175,55,.3);

    border-radius:15px;

    padding:25px;

    text-align:center;

    transition:.4s;

}


.service-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 20px rgba(212,175,55,.3);

}


.service-card img{

    width:150px;

    margin-bottom:25px;

}


.service-card h3{

    color:white;

    margin-bottom:15px;

}


.red-line{

    width:50px;

    height:3px;

    background:red;

    margin:auto auto 20px;

}


.service-card p{

    color:#ddd;

    line-height:1.7;

}



/* =========================
   MIÉRT MINKET
========================= */

.why-us{

    padding:80px 8%;

    text-align:center;

}


.why-us h2{

    color:#d4af37;

    font-size:50px;

    margin-bottom:50px;

}


.why-grid{

    display:grid;

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

    gap:25px;

}


.why-item{

    background:#080808;

    border:1px solid #d4af37;

    border-radius:15px;

    padding:25px;

    transition:.4s;

}


.why-item:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 20px rgba(212,175,55,.3);

}


.why-item img{

    width:120px;

    margin-bottom:20px;

}


.why-item h3{

    color:#d4af37;

    margin-bottom:15px;

}


.why-item p{

    line-height:1.7;

}



/* =========================
   ALSÓ HÁROM BLOKK
========================= */

.bottom-section{

    display:flex;

    gap:30px;

    padding:80px 8%;

}


.bottom-card{

    flex:1;

    background:#070707;

    border:1px solid #d4af37;

    border-radius:20px;

    padding:35px;

    transition:.4s;

}


.bottom-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 20px rgba(212,175,55,.3);

}


.bottom-card h2{

    color:#d4af37;

    text-align:center;

    margin-bottom:30px;

}


.bottom-card input,
.bottom-card textarea{

    width:100%;

    background:#111;

    color:white;

    border:1px solid #333;

    border-radius:10px;

    padding:15px;

    margin-bottom:15px;

}


.bottom-card textarea{

    height:120px;

}


.phone-number{

    color:red;

    font-size:30px;

    font-weight:bold;

}


.gallery-coming{

    text-align:center;

}


.camera-icon{

    font-size:90px;

    margin-bottom:25px;

}


.gallery-coming h3{

    color:#d4af37;

    font-size:30px;

    margin-bottom:20px;

}


.gallery-coming p{

    line-height:1.8;

}
/* =========================
   FOOTER
========================= */

footer{

    background:black;

    border-top:1px solid rgba(212,175,55,.3);

    padding:60px 8%;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}


.footer-left h2{

    color:#d4af37;

    font-size:50px;

}


.footer-left p{

    margin-top:10px;

}


.footer-middle,
.footer-right{

    display:flex;

    flex-direction:column;

}


.footer-middle h3,
.footer-right h3{

    color:#d4af37;

    margin-bottom:20px;

}


.footer-middle a,
.footer-right a{

    color:white;

    margin-bottom:15px;

    transition:.3s;

}


.footer-middle a:hover,
.footer-right a:hover{

    color:red;

}



/* =========================
   SZOLGÁLTATÁSOK HERO
========================= */

.services-hero{

    padding:120px 8% 80px;

    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.35)),
    url("../images/hatter.jpg");

    background-size:cover;

    background-position:center;

}


.services-hero h1{

    color:#d4af37;

    font-size:70px;

    margin-bottom:20px;

}


.services-hero p{

    color:white;

    font-size:28px;

}



/* =========================
   SZOLGÁLTATÁS KÁRTYÁK
========================= */

.service-box{

    background:#070707;

    border:1px solid rgba(212,175,55,.5);

    border-radius:20px;

    padding:45px;

    transition:.4s;

}


.service-box:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 25px rgba(212,175,55,.3);

}


.service-box img{

    width:180px;

    display:block;

    margin:auto;

    margin-bottom:30px;

}


.service-box h2{

    text-align:center;

    color:#d4af37;

    font-size:25px;

}


.service-box p{

    color:white;

    text-align:center;

    line-height:1.8;

    margin-bottom:30px;

}


.service-box ul{

    list-style:none;

}


.service-box li{

    color:white;

    margin-bottom:18px;

    font-size:18px;

}



/* =========================
   TERVEZD MEG RENDEZVÉNYED
========================= */

.plan-section{

    padding:100px 8%;

    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.35)),
    url("../images/hatter.jpg");

    background-size:cover;

}


.plan-section h2{

    color:#d4af37;

    font-size:60px;

    margin-bottom:20px;

}


.plan-section p{

    color:white;

    font-size:24px;

    margin-bottom:50px;

}


.plan-buttons{

    display:flex;

    justify-content:center;

    gap:30px;

}
/* ==========================
   GALÉRIA OLDAL
========================== */

.gallery-hero{

    padding:120px 8%;

    background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),
    url("../images/hatter.jpg");

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

}


.gallery-text h1{

    color:#d4af37;

    font-size:90px;

    margin-bottom:20px;

}


.gallery-text h2{

    color:white;

    font-size:40px;

    margin-bottom:35px;

}


.gallery-text p{

    color:white;

    font-size:24px;

    line-height:1.8;

}



/* KATEGÓRIA GOMBOK */

.gallery-categories{

    display:flex;

    justify-content:center;

    gap:25px;

    padding:50px 8%;

    flex-wrap:wrap;

}


.gallery-categories button{

    background:#070707;

    color:#d4af37;

    border:1px solid #d4af37;

    border-radius:10px;

    padding:20px 40px;

    cursor:pointer;

    transition:.3s;

    font-size:18px;

}


.gallery-categories button:hover{

    background:#d4af37;

    color:black;

}



/* KÖZÉPSŐ BLOKK */

.gallery-main{

    width:85%;

    margin:auto;

    padding:80px 60px;

    background:#070707;

    border:1px solid rgba(212,175,55,.5);

    border-radius:20px;

    text-align:center;

}


.camera-circle{

    width:120px;

    height:120px;

    border:2px solid #d4af37;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#d4af37;

    font-size:55px;

    margin:auto auto 35px;

}


.gallery-main h2{

    color:white;

    font-size:48px;

    margin-bottom:20px;

}


.gallery-main p{

    color:white;

    font-size:22px;

    line-height:1.8;

    margin-bottom:60px;

}



/* KÉPRÁCS */

.gallery-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:60px;

}


.gallery-box{

    height:180px;

    background:linear-gradient(to right,#101010,#1b1b1b);

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

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    color:#444;

}



/* ALSÓ BANNER */

.next-event{

    margin-top:100px;

    padding:70px 8%;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.35)),
    url("../images/hatter.jpg");

    background-size:cover;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.next-left h2{

    color:#d4af37;

    font-size:48px;

    margin-bottom:20px;

}


.next-left p{

    color:white;

    font-size:24px;

}


.next-right{

    display:flex;

    flex-direction:column;

    gap:25px;

}
/* =========================
   FOGLALÁS OLDAL
========================= */

.booking-hero{

    padding:120px 8%;
    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),
    url("../images/hatter.jpg");

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

}

.booking-hero h1{

    color:#d4af37;
    font-size:90px;
    margin-bottom:10px;

}

.booking-hero h2{

    color:white;
    font-size:45px;
    margin-bottom:30px;

}

.booking-hero p{

    color:white;
    font-size:24px;

}



/* KÉT OSZLOP */

.booking-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    padding:80px 8%;

}



/* BAL OLDAL */

.calendar-box,
.offer-form{

    background:#070707;

    border:1px solid rgba(212,175,55,.5);

    border-radius:20px;

    padding:40px;

}


.calendar-box h2,
.offer-form h2{

    color:#d4af37;

    text-align:center;

    margin-bottom:40px;

}


.calendar-grid{

    display:grid;

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

    gap:15px;

}


.calendar-grid div{

    height:70px;

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

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.selected-day{

    border:2px solid #d4af37;

    color:#d4af37;

}


.offer-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.offer-form input,
.offer-form select,
.offer-form textarea{

    background:#111;

    color:white;

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

    border-radius:10px;

    padding:18px;

}


.offer-form textarea{

    min-height:140px;

}



/* LÉPÉSEK */

.booking-steps{

    padding:100px 8%;

    text-align:center;

}


.booking-steps h2{

    color:#d4af37;

    margin-bottom:70px;

}


.steps-grid{

    display:grid;

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

    gap:30px;

}


.step-box{

    background:#070707;

    border:1px solid rgba(212,175,55,.3);

    border-radius:20px;

    padding:40px;

}


.step-number{

    width:60px;

    height:60px;

    background:#d4af37;

    color:black;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 25px;

}
/* =========================
   KAPCSOLAT OLDAL
========================= */

.contact-hero{

    padding:120px 8%;
    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),
    url("../images/hatter.jpg");

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

}

.contact-hero h1{

    color:#d4af37;

    font-size:90px;

}


.contact-hero h2{

    color:white;

    font-size:45px;

    margin:25px 0;

}


.contact-main{

    display:grid;

    grid-template-columns:1fr 1.4fr;

    gap:40px;

    padding:80px 8%;

}


.info-card{

    background:#070707;

    border:1px solid rgba(212,175,55,.5);

    border-radius:20px;

    padding:30px;

    margin-bottom:25px;

}


.info-card h3{

    color:#d4af37;

    margin-bottom:15px;

}


.message-form{

    background:#070707;

    border:1px solid rgba(212,175,55,.5);

    border-radius:20px;

    padding:40px;

}


.message-form h2{

    color:#d4af37;

    text-align:center;

    margin-bottom:40px;

}


.message-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.message-form input,
.message-form select,
.message-form textarea{

    background:#111;

    color:white;

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

    border-radius:10px;

    padding:18px;

}


.message-form textarea{

    min-height:180px;

}

/* =========================
   HELYSZÍN ÉS TÉRKÉP
========================= */

.location-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    padding:0 8% 100px;

}


.map-box{

    background:#070707;

    border:1px solid rgba(212,175,55,.5);

    border-radius:20px;

    padding:40px;

}


.map-box h2{

    color:#d4af37;

    margin-bottom:25px;

}


.map-box p{

    margin-bottom:30px;

}


.map-placeholder{

    height:250px;

    background:#111;

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

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#555;

    margin-bottom:30px;

}


.country-box{

    background:#070707;

    border:1px solid rgba(212,175,55,.5);

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    padding:50px;

}


.country-box h2{

    color:#d4af37;

    font-size:40px;

    margin-bottom:25px;

}


.country-box h3{

    color:white;

    font-size:30px;

}



/* =========================
   MIÉRT ÉRDEMES
========================= */

.contact-why{

    padding:100px 8%;

}


.contact-why h2{

    color:#d4af37;

    text-align:center;

    margin-bottom:60px;

}


.why-grid{

    display:grid;

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

    gap:25px;

}


.why-card{

    background:#070707;

    border:1px solid rgba(212,175,55,.4);

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.4s;

}


.why-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 20px rgba(212,175,55,.3);

}


.why-card h3{

    color:#d4af37;

    margin-bottom:20px;

}


.why-card p{

    line-height:1.8;

}



/* =========================
   HOVER EFFEKTEK
========================= */

.service-box,
.service-card,
.step-box,
.info-card,
.why-item,
.why-card,
.bottom-card{

    transition:.4s;

}


.service-box:hover,
.service-card:hover,
.step-box:hover,
.info-card:hover,
.why-item:hover,
.why-card:hover,
.bottom-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 20px rgba(212,175,55,.3);

}



/* =========================
   MOBILNÉZET
========================= */

@media(max-width:1200px){

    .services-grid,
    .steps-grid,
    .why-grid{

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

    }

}


@media(max-width:900px){

    header{

        flex-direction:column;

        height:auto;

        padding:30px;

        gap:20px;

    }


    nav{

        flex-wrap:wrap;

        justify-content:center;

    }


    .hero,
    .booking-main,
    .contact-main,
    .location-section,
    .next-event,
    .bottom-section{

        flex-direction:column;

        display:flex;

    }


    .hero-left,
    .hero-right{

        width:100%;

    }


    .gallery-grid{

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

    }


    footer{

        grid-template-columns:1fr;

    }

}


@media(max-width:600px){

    .services-grid,
    .steps-grid,
    .why-grid,
    .gallery-grid{

        grid-template-columns:1fr;

    }


    .hero-left h1,
    .booking-hero h1,
    .contact-hero h1,
    .gallery-text h1,
    .services-hero h1{

        font-size:50px;

    }

}
.contact-phone i{
    animation: pulse 2s infinite;
}

@keyframes pulse{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }
}
/* =========================
   KÖSZÖNŐ OLDAL
========================= */

.thanks-section{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px;

    background:
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.75)),
    url("../images/hatter.jpg");

    background-size:cover;

    background-position:center;

}


.thanks-box{

    width:100%;

    max-width:800px;

    background:rgba(10,10,10,.9);

    border:2px solid #d4af37;

    border-radius:25px;

    padding:80px 50px;

    text-align:center;

}


.thanks-icon{

    width:120px;

    height:120px;

    margin:auto;

    margin-bottom:40px;

    border-radius:50%;

    border:3px solid #d4af37;

    color:#d4af37;

    font-size:70px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.thanks-box h1{

    color:#d4af37;

    font-size:70px;

    margin-bottom:20px;

}


.thanks-box h2{

    color:white;

    margin-bottom:30px;

}


.thanks-box p{

    color:#ddd;

    line-height:1.9;

    margin-bottom:20px;

    font-size:20px;

}
/* TÉRKÉP */

.map-box{

    width:100%;

    margin-top:50px;

    border:2px solid #d4af37;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 0 25px rgba(212,175,55,.2);

}
.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.calendar-header button{

    background:none;

    border:none;

    color:#d4af37;

    font-size:30px;

    cursor:pointer;

}

.calendar-header h3{

    color:#d4af37;

}

.calendar-weekdays{

    display:grid;

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

    text-align:center;

    margin-bottom:15px;

    color:#d4af37;

}

.calendar-grid{

    display:grid;

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

    gap:10px;

}

.day{

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid rgba(212,175,55,.5);

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

.day:hover{

    background:#d4af37;

    color:black;

}

.selected{

    background:#d4af37;

    color:black;

}

.booked{

    background:red;

    border:none;

    cursor:not-allowed;

}
.booked-day{

    background:#c40000;

    color:white;

    cursor:not-allowed;

}

.booked-day:hover{

    background:#c40000;

    transform:none;

}
/* ALSÓ KAPCSOLATI SÁV */

.contact-banner{
    margin:100px auto;
    max-width:1400px;

    background:#070707;
    border:1px solid rgba(212,175,55,.4);
    border-radius:25px;

    padding:60px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
}

.contact-banner-left{
    flex:1;
}

.contact-banner-left h2{
    color:#d4af37;
    font-size:50px;
    margin-bottom:20px;
}

.contact-text{
    color:white;
    font-size:22px;
    line-height:1.8;
    margin-bottom:40px;
}

.contact-banner-right{
    flex:1;

    display:flex;
    flex-direction:column;
    gap:25px;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:20px;

    color:white;
    font-size:24px;
    padding:20px;

    background:#111;
    border:1px solid rgba(212,175,55,.2);
    border-radius:15px;

    transition:.3s;
}

.contact-item:hover{
    border-color:#d4af37;

    box-shadow:
    0 0 20px rgba(212,175,55,.3);

    transform:translateX(10px);
}
/* AJÁNLATOT KÉREK GOMB */

.hero a{
    color:#d4af37;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;

    transition:.3s;
}

.hero a:hover{
    color:white;
}