* {
    box-sizing: border-box; /* Minden elem box-sizing beállítása */
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Világos háttérszín */
    color: #333; /* Sötétebb szöveg szín */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #91a89c; /* zöld háttér */
    color: white;
    padding: 15px 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Árnyék a fejléc alatt */
}

.logo img {
    height: 90px; /* Logó mérete */
}

nav {
    display: flex;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s; /* Áttűnés a háttérszín és a szöveg szín változásakor */
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Háttérszín a hover állapotban */
    color: #f4f4f4; /* Szöveg szín a hover állapotban */
}

section {
    padding: 40px 20px; /* Tágabb padding a szekciók körül */
    margin: 0; /* Eltávolítja a margót, hogy a szekciók teljes szélességben jelenjenek meg */
    width: 100%; /* Teljes szélesség */
    background-color: white; /* Fehér háttér a szekciókhoz */
    border-radius: 0; /* Lekerekített sarkok eltávolítása */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Árnyék a szekciók alatt */
}

h1 {
    color: #000000; /* Cím szín */
    margin-bottom: 20px; /* Térköz a cím alatt */
}

h2 {
    color: #000000; /* Cím szín */
    margin-bottom: 20px; /* Térköz a cím alatt */
}


.btn {
    background-color: #c1e1d1; /* Gomb háttérszín */
    color: white; /* Gomb szöveg színe */
    border: none; /* Határvonal eltávolítása */
    border-radius: 5px; /* Lekerekített sarkok */
    padding: 10px 15px; /* Térköz a gombon belül */
    cursor: pointer; /* Kézkurzor a gomb fölött */
    transition: background-color 0.3s; /* Animáció a hover hatásra */
}

.btn:hover {
    background-color: #91a89c; /* Sötétebb szín hover hatásra */
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #91a89c; /* Sötétbarna háttér */
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
}

.about-section {
    background-image: url('images/about-image.png'); /* A háttérkép elérési útja */
    background-size: cover; /* A kép kitölti a szakaszt */
    background-position: center; /* A kép középre van igazítva */
    height: 100vh; /* Teljes magasság */
    display: flex; /* Flexbox elrendezés */
    align-items: center; /* Középre igazítás függőlegesen */
    justify-content: center; /* Középre igazítás vízszintesen */
    color: white; /* Szöveg színe */
}

.about-image {
    position: absolute; /* Pozicionálás a háttérkép mögé */
    top: 0; /* Felső pozíció */
    left: 0; /* Bal pozíció */
    width: 100%; /* Kép szélessége */
    height: 100%; /* Kép magassága */
    object-fit: cover; /* Kép kitöltése a területen */
    z-index: -1; /* Háttérkép mögött */
}

.about-container {
    z-index: 1; /* A szöveg a háttérkép felett legyen */
    padding: 20px; /* Belső margó */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Árnyék a szöveg mögött */
}

.about-container h2 {
    font-size: 48px; /* Cím mérete */
    font-weight: bold; /* Félkövér szöveg */
    margin: 0; /* Nincs margó */
}

.about-container p {
    font-size: 24px; /* Szöveg mérete */
    margin-top: 10px; /* Felső margó, hogy az alcím közelebb kerüljön a címhez */
}

.about-container h1 {
    font-size: 24px; /* Szöveg mérete */
    margin-top: 10px; /* Felső margó, hogy az alcím közelebb kerüljön a címhez */
    color: rgb(228, 226, 226)
}


.btn {
    display: inline-block; /* Blokk szintű elem */
    background-color: #91a89c; /* Gomb háttérszín */
    color: white; /* Gomb szöveg szín */
    padding: 10px 20px; /* Padding a gomb körül */
    border-radius: 5px; /* Lekerekített sarkok */
    text-align: center; /* Középre igazított szöveg */
    text-decoration: none; /* Nincs aláhúzás */
    margin-top: 20px; /* Térköz a gomb felett */
    transition: background-color 0.3s; /* Áttűnés a háttérszín változásakor */
}

.btn:hover {
    background-color: #c1e1d1; /* Gomb háttérszín hover állapotban */
}

.contact-map-container {
    display: flex; /* Flexbox aktiválása */
    justify-content: center; /* Középre igazítás */
    align-items: flex-start; /* Felső igazítás */
    margin: 20px auto; /* Középre igazítás a szülőelemnek */
}

/* Kapcsolat szekció */
#contact {
    background-color: #f9f9f9; /* Világos háttérszín */
    padding: 40px 20px; /* Tágas padding */
    border-radius: 10px; /* Lekerekített sarkok */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Árnyék a szekció alatt */
    margin: 20px; /* Margó */
    max-width: 500px; /* Maximális szélesség */
    width: 45%; /* Szélesség */
    height: 600px; /* Fix magasság */
}

/* Mobil nézet */
@media (max-width: 600px) {
    .contact-map-container {
        flex-direction: column; /* Mobilon függőleges elrendezés */
        align-items: center; /* Középre igazítás */
    }

    #contact {
        width: 90%; /* Mobilon a szélesség 90% */
        max-width: none; /* Maximum szélesség eltávolítása */
        height: auto; /* Magasság automatikus beállítása */
        padding: 20px; /* Padding csökkentése mobilon */
    }
}

#map {
    background-color: #f9f9f9; /* Világos háttérszín */
    padding: 40px 20px; /* Tágas padding */
    border-radius: 10px; /* Lekerekített sarkok */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Árnyék a szekció alatt */
    margin: 20px; /* Margó */
    width: 35%; /* Szélesség */
    height: 600px; /* Fix magasság */
}

#map h2 {
    text-align: center; /* Középre igazított cím */
}

#contact h2 {
    color: #000000; /* Cím szín */
    margin-bottom: 10px; /* Térköz a cím alatt */
}

#contact p {
    margin-bottom: 20px; /* Térköz a bevezető szöveg alatt */
    color: #666; /* Szürke szöveg szín */
}

.form-group {
    margin-bottom: 20px; /* Térköz a mezők között */
    text-align: left; /* Balra igazított szöveg */
}

label {
    display: block; /* A címkék blokk szintű elemek */
    margin-bottom: 5px; /* Térköz a címke alatt */
    font-weight: bold; /* Félkövér címkék */
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Szélesség 100% */
    max-width: 300px; /* Maximális szélesség a mezőknek */
    padding: 10px; /* Padding a mezők körül */
    border: 1px solid #ccc; /* Határ */
    border-radius: 5px; /* Lekerekített sarkok */
    font-size: 16px; /* Betűméret */
    transition: border-color 0.3s; /* Áttűnés a határszín változásakor */
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #4a3c2a; /* Határszín fókusz állapotban */
    outline: none; /* Nincs outline */
}

button {
    background-color: #91a89c; /* Gomb háttérszín */
    color: white; /* Gomb szöveg szín */
    border: none; /* Nincs határ */
    padding: 10px 20px; /* Padding a gomb körül */
    border-radius: 5px; /* Lekerekített sarkok */
    cursor: pointer; /* Kéz kurzor */
    font-size: 16px; /* Betűméret */
    transition: background-color 0.3s; /* Áttűnés a háttérszín változásakor */
    display: inline-block; /* Középre igazítás */
    margin-top: 10px; /* Térköz a gomb felett */
}

button:hover {
    background-color: #c1e1d1; /* Gomb háttérszín hover állapotban */
}


#why-choose-us {
    background-color: #b0dcc6d6; /* Világos háttérszín */
    padding: 40px 20px; /* Tágas padding */
    margin: 20px auto; /* Középre igazítás */
    border-radius: 10px; /* Lekerekített sarkok */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Árnyék a szekció alatt */
    position: relative; /* Pozicionálás a díszítő elemhez */
}

#why-choose-us h2 {
    text-align: center; /* Cím középre igazítása */
    color: #000000; /* Cím szín */
    margin-bottom: 20px; /* Térköz a cím alatt */
    font-size: 2.5em; /* Cím mérete */
    position: relative; /* Pozicionálás a díszítő vonalhoz */
}

#why-choose-us h2::after {
    content: ""; /* Üres tartalom a díszítő vonalhoz */
    display: block; /* Blokk szintű elem */
    width: 50px; /* A vonal szélessége */
    height: 4px; /* A vonal magassága */
    background-color: #000000; /* A vonal színe */
    margin: 10px auto; /* Középre igazítás */
    border-radius: 2px; /* Lekerekített sarkok a vonalon */
}

.features-container {
    display: flex; /* Flexbox a boxok elrendezéséhez */
    flex-wrap: wrap; /* Flexbox wrap, hogy a boxok új sorba kerüljenek, ha szükséges */
    justify-content: center; /* Középre igazítás */
    gap: 20px; /* Térköz a boxok között */
}

.feature-box {
    background-color: white; /* Fehér háttér a boxokhoz */
    border: 1px solid #ddd; /* Határvonal */
    border-radius: 10px; /* Lekerekített sarkok */
    padding: 20px; /* Térköz a boxon belül */
    width: 300px; /* Box szélessége */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Árnyék a boxok alatt */
    transition: transform 0.2s; /* Animáció a hover hatásra */
}

.feature-box:hover {
    transform: scale(1.05); /* Növelés hover hatásra */
}

.feature-box h3 {
    color: #000000; /* Cím szín */
    margin-bottom: 10px; /* Térköz a cím alatt */
}

.feature-box p {
    color: #000000; /* Szürke szöveg szín */
}

#booking-process {
    background-color: #f9f9f9; /* Világos háttérszín */
    padding: 40px 20px; /* Tágas padding */
    margin: 20px auto; /* Középre igazítás */
    border-radius: 10px; /* Lekerekített sarkok */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Árnyék a szekció alatt */
}

#booking-process h2 {
    text-align: center; /* Cím középre igazítása */
    color: #010101; /* Cím szín */
    margin-bottom: 20px; /* Térköz a cím alatt */
    font-size: 2.5em; /* Cím mérete */
}

.process-container {
    display: flex; /* Flexbox a lépések elrendezéséhez */
    justify-content: center; /* Középre igazítás */
    align-items: center; /* Középre igazítás függőlegesen */
    flex-wrap: wrap; /* Flexbox wrap, hogy a lépések új sorba kerüljenek, ha szükséges */
}

.process-step {
    background-color: white; /* Fehér háttér a lépésekhez */
    border: 1px solid #ddd; /* Határvonal */
    border-radius: 10px; /* Lekerekített sarkok */
    padding: 20px; /* Térköz a lépésen belül */
    width: 200px; /* Lépés szélessége */
    text-align: center; /* Középre igazított szöveg */
    margin: 10px; /* Térköz a lépések között */
    position: relative; /* Pozicionálás a számhoz */
    transition: transform 0.2s; /* Animáció a hover hatásra */
    min-height: 150px; /* Minimális magasság a boxoknak */
}

.process-step:hover {
    transform: scale(1.05); /* Növelés hover hatásra */
}

.step-number {
    background-color: #91a89cc9; /* Szám háttérszín */
    color: white; /* Szám szöveg szín */
    border-radius: 50%; /* Kör alakú szám */
    width: 40px; /* Szám szélessége */
    height: 40px; /* Szám magassága */
    display: flex; /* Flexbox a szám középre igazításához */
    align-items: center; /* Középre igazítás függőlegesen */
    justify-content: center; /* Középre igazítás vízszintesen */
    margin: 0 auto 10px; /* Térköz a szám alatt */
}

.arrow {
    font-size: 2em; /* Nyíl mérete */
    color: #5d7e6d; /* Nyíl szín */
    margin: 0 10px; /* Térköz a nyíl körül */
}

.step-link {
    text-decoration: none; /* Aláhúzás eltávolítása */
    color: inherit; /* Örökli a szöveg színét */
}

/* Mobil nézet */
@media (max-width: 600px) {
    #booking-process h2 {
        font-size: 2em; /* Cím betűméretének csökkentése mobilon */
    }

    .process-container {
        flex-direction: column; /* Mobilon függőleges elrendezés */
        align-items: center; /* Középre igazítás */
    }

    .process-step {
        width: 90%; /* Mobilon a lépések szélessége 90% */
        max-width: 300px; /* Maximum szélesség 300px */
        margin: 10px 0; /* Térköz a lépések között */
    }

    .arrow {
        font-size: 1.5em; /* Nyíl méretének csökkentése mobilon */
    }
}

#szolgáltatások {
    text-align: center; /* Középre igazítja a szöveget */
    padding: 20px 0; /* Térköz a szekció körül */
}

.service-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.service-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    padding: 15px;
    width: 300px; /* Állítsd be a kívánt szélességet */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column; /* Vertikális elrendezés */
    justify-content: space-between; /* Térköz a tartalom és a gomb között */
}

.service-box:hover {
    transform: scale(1.05);
}

.service-box img {
    width: 100%; /* Kép szélessége a box szélességéhez igazítva */
    height: auto; /* Arányos magasság */
}

.service-box h3 {
    margin: 10px 0;
}

.service-box ul {
    list-style-type: none;
    padding: 0;
}

.service-box ul li {
    margin: 5px 0;
}

.btn {
    display: inline-block;
    padding: 10px 15px;
    background: #91a89c; /* Zöld háttér */
    color: #fff; /* Fehér szöveg */
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    margin-top: auto; /* A gombot a box aljára helyezi */
}

.btn:hover {
    background: #c1e1d1; /* Sötétebb zöld a hover állapotban */
}

.rolunk {
    background-color: #f6f6f6; /* háttérszín */
    padding: 40px 20px; /* Tágas padding */
    border-radius: 10px; /* Lekerekített sarkok */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Árnyék a szekció alatt */
    margin: 20px auto; /* Középre igazítás */
}

.rolunk h2 {
    color: #050505; /* Sötétebb szín a címhez */
    text-align: center; /* Középre igazítás */
    margin-bottom: 20px; /* Térköz a cím alatt */
}

.rolunk h3 {
    color: #000000; /* Sötétebb szín a h 3 címekhez */
    margin-top: 15px; /* Térköz a h3 címek felett */
}

.rolunk p {
    line-height: 1.6; /* Jobb olvashatóság érdekében */
    margin-bottom: 15px; /* Térköz a bekezdések között */
}

.rolunk ul {
    list-style-type: disc; /* Pontos lista */
    padding-left: 20px; /* Bal oldali behúzás */
}

.rolunk li {
    margin-bottom: 10px; /* Térköz a listaelemek között */
}

.contact-info {
    background-color: #e9f5f0; /* Világos zöld háttérszín */
    padding: 20px; /* Tágas padding */
    border-radius: 8px; /* Lekerekített sarkok */
    margin-bottom: 20px; /* Alsó margó */
}

.contact-item {
    margin-bottom: 15px; /* Térköz a kontakt elemek között */
}

.contact-item strong {
    color: #2c3e50; /* Sötét szín a címkékhez */
    font-size: 1.2em; /* Nagyobb betűméret */
}

.contact-item a {
    color: #2980b9; /* Kék szín a linkekhez */
    text-decoration: none; /* Aláhúzás eltávolítása */
}

.contact-item a:hover {
    text-decoration: underline; /* Aláhúzás hover állapotban */
}

.centered-title {
    text-align: center; /* Középre igazítja a címet */
    margin-bottom: 20px; /* Térköz a cím alatt */
    color: #000000; /* Cím szín */
}

.footer {
    background-color: #91a89c; /* Háttérszín */
    padding: 20px 0; /* Felső és alsó padding */
    text-align: center; /* Középre igazítás */
}

.footer-content {
    display: flex; /* Flexbox használata */
    justify-content: center; /* Középre igazítás */
    margin-bottom: 20px; /* Margó az elérhetőségek és a jogi nyilatkozat között */
}

.contact-item {
    margin: 0 15px; /* Margó az egyes elérhetőségek között */
}

.footer-icon {
    width: 20px; /* Ikon szélessége */
    height: auto; /* Automatikus magasság */
}

.legal-notice {
    margin-top: 20px; /* Margó a jogi nyilatkozat felett */
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000; /* Magas z-index, hogy a banner mindig a tetején legyen */
}

.cookie-banner a {
    color: #91a89c; /* Link szín */
    text-decoration: underline; /* Aláhúzás */
}

.cookie-banner button {
    background-color: #91a89c; /* Gomb háttérszín */
    color: white; /* Gomb szöveg szín */
    border: none; /* Nincs keret */
    padding: 10px 20px; /* Padding */
    margin-left: 15px; /* Margó a gomb bal oldalán */
    cursor: pointer; /* Kéz kurzor */
}

#gallery {
    padding: 40px 20px; /* Tágas padding a galéria szekció körül */
    background-color: white; /* Fehér háttér a galéria szekcióhoz */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Árnyék a galéria alatt */
}

.gallery-title {
    text-align: center; /* Középre igazítás */
    color: #000000; /* Cím szín */
    margin-bottom: 10px; /* Térköz a cím alatt */
    font-size: 2.5em; /* Nagyobb betűméret a címhez */
}

.gallery-subtitle {
    text-align: center; /* Középre igazítás */
    color: #000000; /* Szürke szín az alcímhez */
    margin-bottom: 30px; /* Térköz az alcím alatt */
    font-size: 1.5em; /* Betűméret az alcímhez */
}

.gallery-container {
    display: flex; /* Flexbox elrendezés */
    justify-content: center; /* Középre igazítás */
    flex-wrap: wrap; /* Flex elemek újrahasználása */
    gap: 20px; /* Térköz a képek között */
}

.gallery-item {
    flex: 1 1 200px; /* Rugalmas szélesség, minimum 200px */
    max-width: 400px; /* Maximum szélesség 400px */
    overflow: hidden; /* Túlcsordulás elrejtése */
    border-radius: 10px; /* Lekerekített sarkok */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Árnyék a képek alatt */
    transition: transform 0.3s; /* Animáció a hover hatásra */
}

.gallery-item:hover {
    transform: scale(1.05); /* Növelés hover hatásra */
}

.gallery-item img {
    width: 100%; /* Kép szélessége a box szélességéhez igazítva */
    height: auto; /* Arányos magasság */
    display: block; /* Blokk szintű elem */
}

/* Mobil nézet */
@media (max-width: 600px) {
    .gallery-title {
        font-size: 2em; /* Cím betűméretének csökkentése mobilon */
    }

    .gallery-subtitle {
        font-size: 1.2em; /* Alcím betűméretének csökkentése mobilon */
    }

    .gallery-item {
        flex: 1 1 100%; /* Mobilon a képek teljes szélességben */
        max-width: 100%; /* Maximum szélesség 100% */
    }
}

/* Mobil stílusok */
.menu-toggle {
    display: none; /* Alapértelmezés szerint rejtve */
    flex-direction: column; /* Függőleges elrendezés */
    cursor: pointer; /* Kéz kurzor */
}

.menu-toggle .bar {
    height: 3px; /* Sáv magassága */
    width: 25px; /* Sáv szélessége */
    background-color: #333; /* Sáv szín */
    margin: 4px 0; /* Térköz a sávok között */
}

/* Alapértelmezett stílusok */
nav {
    position: relative;
}

.menu-toggle {
    display: none; /* Alapértelmezés szerint rejtve */
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle .bar {
    height: 3px;
    width: 25px;
    background-color: #333;
    margin: 4px 0;
}

/* Mobil nézet */
@media (max-width: 600px) {
    nav ul {
        display: none; /* Alapértelmezés szerint rejtve */
        flex-direction: column;
        position: relative;
        left: 0; /* A menü pozíciója */
        right: 50px; /* Bal oldalon való megjelenítés */
        background-color: #91a89c; /* Fekete háttérszín */
        width: 100%;
        z-index: 1;
    }

    nav ul.nav-links-visible {
        display: flex; /* Megjelenítés, ha a menü látható */
    }


    .menu-toggle {
        display: flex; /* Hamburger ikon megjelenítése */
    }
}


@media (min-width: 601px) {
    /* Styles for tablets and desktops */
}