/* Montserrat betűtípus betöltése. */

        /* montserrat-regular - latin_latin-ext */
        @font-face {
            font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url('fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        }
        /* montserrat-italic - latin_latin-ext */
        @font-face {
            font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
            font-family: 'Montserrat';
            font-style: italic;
            font-weight: 400;
            src: url('fonts/montserrat-v31-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        }
        /* montserrat-700 - latin_latin-ext */
        @font-face {
            font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 700;
            src: url('fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        }
        /* montserrat-700italic - latin_latin-ext */
        @font-face {
            font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
            font-family: 'Montserrat';
            font-style: italic;
            font-weight: 700;
            src: url('fonts/montserrat-v31-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        }

/* A :root egy speciális tároló, ahol globális változókat (pl. színeket) hozunk létre */

        :root {
            --primary-color: #2c3e50; /* Létrehozunk egy sötétkék színt, amit elnevezünk primary-colornek */
            --accent-color: #3498db;  /* Létrehozunk egy élénkkék színt, amit elnevezünk accent-colornek */
            --text-color: #333;       /* Egy sötétszürke szín a normál szövegeknek */
            --bg-color: #f0f2f5;      /* Egy nagyon világos szürke szín az oldal hátterének */
            --red-color: #e74c3c;     /* Piros szegényszín a hibabejelentőnek.*/
        }

/* Ez a globális alapértelmezett betűméret és innentől csak rem értékeket adok meg */

        html {
            font-size: 13px; /* Ez a globális alapértelmezett méret */
            scroll-behavior: smooth;
        }

/* Ez a láthatatlan igazító doboz, ami középen tartja a tartalmat */

        .container {
            max-width: 100%;         /* Maximálisan 800 pixel szélesre engedjük kinyúlni a dobozt nagy monitoron */
            margin: 0 auto;           /* A '0 auto' automatikusan egyenlő távolságra teszi a jobb és bal margót, így középre kerül */
            padding: 0 10px;          /* Jobb és bal oldalon hagyunk 10 pixel biztonsági sávot, hogy mobilon se ragadjon a kód a kijelző szélére */
            box-sizing: border-box;   /* Biztosítja, hogy a padding belső margó ne növelje meg a doboz 800 pixeles fix szélességét */
        }

/* A legnagyobb befoglaló szürke átlátszó doboz */

        .card {
            max-width: 70%;             /* Maximálisan 800 pixel szélesre engedjük kinyúlni a dobozt nagy monitoron */
            background-color: rgba(240, 240, 240, 0.6); /* Világosszürke átlátszó háttér */
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            margin: 0 auto;         /* A '0 auto' automatikusan egyenlő távolságra teszi a jobb és bal margót, így középre kerül */
            padding: 0 0px;         /* Jobb és bal oldalon hagyunk 20 pixel biztonsági sávot, hogy mobilon se ragadjon a kód a kijelző szélére */
            box-sizing: border-box; /* Biztosítja, hogy a padding belső margó ne növelje meg a doboz 800 pixeles fix szélességét */
        }

/* Felső kapcsolat sáv formázása */

       /* Globális beállítások a felső kapcsolat sávhoz */
        .top-bar { 
            padding: 5px 0; /* Megfelelő térköz felül és alul */
            text-align: center; 
            width: 100%; 
        } 

        /* Egységes betűszín és méret minden nézetben */
        .top-phone, .top-email { 
            font-family: 'Montserrat', sans-serif; 
            font-style: normal; 
            font-size: 1.1rem; /* Finom, prémium betűméret */
            font-weight: 600; /* Félkövér kiemelés a kép alapján */
            letter-spacing: 0.5px; 
        } 

        .top-phone a, .top-email a {
            color: #2c3e50; /* Elegáns sötétkék szín */
            text-decoration: none; /* Aláhúzás eltávolítása */
            /*border-bottom: 1px dashed #2c3e50;*/ /* Helyette egy elegánsabb, szaggatott fehér vonallal húzzuk alá a linket */
        }

        /* Csak az emoji ikonokat célozzuk meg és készítjük fel a mozgásra */
        .top-phone a, .top-email a {
            transition: color 0.3s ease;
        }

        /* Hover hatás: az egész link színe finoman változik, az ikon megmozdul */
        .top-phone a:hover, .top-email a:hover {
            color: #2980b9;
        }


/* A Header formázása */
        
        /* A fejléc  sávjának formázása */
        header {
            background-color: rgba(0, 55, 252, 0.5); /* Kék háttér */
            border-radius: 20px;
            margin: 0px 0px;
            color: white;
            padding: 20px 20px 20px 20px; /* Felül, Jobb, Alul, Bal oldalon üres térköz*/
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }

        /* A fejlécben lévő kép és szöveg egymás mellé rendezése */
        .header-grid {
            display: flex;            /* Bekapcsoljuk a Flexbox elrendezést, ami alapból egymás mellé teszi a benne lévő elemeket */
            align-items: center;      /* Függőlegesen tökéletesen egymás közepéhez igazítja a képet és a szöveget */
            gap: 25px;                /* 25 pixel távolságot (rést) hagy a profilkép és a szöveg között */
            }

        /* A profilkép formázása */
        .profile-img {
            width: 115px;             /* A kép szélessége fixen 130 pixel */
            height: 125px;            /* A kép magassága fixen 140 pixel */
            object-fit: cover;        /* Ha a fotó arányai eltérnének, nem torzítja el, hanem intelligensen levágja a széleit */
            border-radius: 20px;       /* 8 pixeles finom lekerekítést ad a fotó sarkainak */
            border: 2px solid rgba(255, 255, 255, 0.4); /* 40%-os átlátszóságú fehér keret */
            max-width: 100%;          /* Biztosítja, hogy a kép soha ne legyen szélesebb, mint a kijelző, amin nézik */
            box-shadow: 8px 8px 4px -7px rgba(255, 255, 255, 0.6);
        }

        /* Header betűtípusok formázása*/
        .focim {
            font-size: 1.875rem;
            font-weight: 400;
            letter-spacing: -0.3px;    /* Kicsit közelebb hozza a betűket a prémium hatásért */
            margin-bottom: 0px;        /* Távolság a név és az alcím között */
            margin-top: 12px;          /* Biztosítja, hogy a h1 ne nyomja el magát fentről */
        }

        /* "Társasházkezelés Szolnokon" rész */
        .subtitle {
            font-size: 1.25rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.8px; /* Szellősebbé teszi a csupa nagybetűs szöveget */
            margin-top: 10px;
            margin-bottom: 10px; /* Távolság az alcím és az idézet között */
            opacity: 0.9;
        }
        /* „Mérnöki szemlélettel” idézet */
        .motto {
            font-size: 1.25rem;
            font-weight: 500;
            font-style: italic;
            margin-top: 0px;
            opacity: 0.8; /* Finoman a háttérbe tolja, így jobb lesz a szöveges hierarchia */
        }
        
/* Az egész weboldal törzsét (minden látható elemet) formázó rész */

        body {
            font-family: 'Montserrat', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
            line-height: 1.5;                      /* Beállítjuk a sorközt, hogy a sorok ne érjenek egymáshoz */
            color: var(--text-color);              /* Alkalmazzuk a korábban létrehozott sötétszürke szövegszínt */
            background-color: var(--bg-color);     /* Alkalmazzuk a korábban létrehozott világosszürke háttérszínt */
            margin: 0;                             /* Kiveszünk minden alapértelmezett külső margót a böngésző széléről */
            padding: 0;                            /* Kiveszünk minden alapértelmezett belső margót */
            overflow-x: hidden;                    /* Megakadályozzuk, hogy az oldal jobb-bal irányba elmozduljon vagy görgethető legyen */
            /* Background Map Setup */
            background-image: url('hatter.webp');
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            -webkit-text-size-adjust: 100%; /* Megakadályozza, hogy az in-app böngészők átméretezzék a betűket iOS-en */
            text-size-adjust: 100%;         /* Megakadályozza az automata átméretezést Androidon */
        }

/* A szolgáltatások kártyák (dobozok) dizájnja */

        .section {
            background-color: rgba(255, 255, 255, 0.3);  /* A kártya háttere tiszta fehér */
            padding: 30px 30px; /* 30px fent és lent, 30px jobb és bal oldalon */
            margin: 25px 0;                    /* Két kártya között függőlegesen 25 pixel távolságot tartunk */
            border-radius: 16px;               /* Modern, 16 pixeles nagy saroklekerekítést adunk a doboznak */
            box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Nagy kiterjedésű, de rendkívül halvány árnyék a lebegő hatásért */
            border-left: 4px solid var(--accent-color); /* Egy elegáns, 4 pixel vastag élénkkék csík a kártya bal szélén */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04), inset 0 0 0 0 var(--accent-color);            
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Finom, ruganyos átmenetet állít be az animációhoz */
        }

        /* Mi történjen, ha a felhasználó az egérrel a kártya felé mutat (:hover) */
        .section:hover {
            transform: translateY(-5px);       /* A kártya fizikailag 5 pixellel feljebb emelkedik a képernyőn */
            box-shadow: 0 20px 40px rgba(0,0,0,0.1), inset 4px 0 0 0 var(--accent-color); /* Az árnyéka felerősödik és megnő, mélységérzetet adva */
            /*border-left-width: 8px;*/            /* Az interaktivitás jeleként a bal oldali kék csík kétszer olyan vastag lesz */
        }

        /* Piros szegély árnyék a hibabejelentés oldalon */
        #pirosszegely:hover {
            transform: translateY(-5px);       /* A kártya fizikailag 5 pixellel feljebb emelkedik a képernyőn */
            box-shadow: 0 20px 40px rgba(0,0,0,0.1), inset 4px 0 0 0 var(--red-color); /* Az árnyéka felerősödik és megnő, mélységérzetet adva */
        } 

        /* A kártyákon belüli alcímek (h2) formázása */
        h2 {
            margin-top: 0;                     /* Eltüntetjük a felső felesleges üres teret */
            margin-right: 0; 
            margin-left: 0;
            margin-bottom: 8px;                /* Nullára állítjuk az alsó margót */
            font-size: 1.2rem;                 /* Beállítjuk az alcím betűméretét */
            color: var(--primary-color);       /* Sötétkék színt adunk neki */
            border-bottom: 1px solid #eee;     /* Egy nagyon vékony, halványszürke elválasztó vonalat teszünk a cím alá */
            padding-bottom: 8px;               /* 3 pixel helyet hagyunk a betű és az aláhúzás között */
        }

        /* A kártyákon belüli leíró szövegek formázása */
        .content {
            margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0px; /* Töröljük a margókat */
            font-size: 1.1rem;                 /* Jól olvasható, nagyobb betűméret */
            text-align: justify;               /* Sorkizárttá tesszük a szöveget, mint a könyvekben */
            hyphens: auto;                     /* Bekapcsolja az automatikus szóelválasztást, ha a sorkizárás miatt túl nagy rések lennének */
            word-wrap: break-word;             /* Ha egy szó túl hosszú lenne, nem engedi kilógni a dobozból, hanem kényszerítve eltöri */
            line-height: 1.5; /* <--- EZT ADDD HOZZÁ! Ez ad egy kellemes, szellős sorközt a szövegnek */

        }

        /* A műszaki biztonság kártya választóvonala */
        .valaszto-vonal {
            /* Eltüntetjük a böngésző alapértelmezett keretét */
            border: none;
            /* Megadjuk a vonal vastagságát */
            height: 2px;
            /* Beállítjuk a színét (használhatod a korábbi kék vagy piros színeidet is!) */
            background-color: #f0f2f5; 
            /* Távolság a vonal ALATT és FELETT (20px felül és alul, 0 két oldalt) */
            margin: 5px 0;
        }

/* Footer formázása */

        footer {
            background-color: rgba(44, 62, 80, 0.6);  /* A sötétkék háttér alkalmazása */
            color: white;                      /* A szöveg színe tiszta fehér lesz benne */
            padding: 20px;                     /* 20 pixel belső térközt adunk neki */
            text-align: center;                /* Középre igazítjuk a benne lévő telefonszámot és e-mailt */
            border-radius: 8px;                /* 8 pixeles saroklekerekítés */
            margin: 30px 0;                    /* Fent és lent 30 pixel távolságot hagyunk az utolsó kártyától és az oldal aljától */
            font-size: 1.1rem;                 /* Betűméret beállítása */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Elegáns alsó árnyék a láblécnek */
            box-sizing: border-box;            /* Biztosítja a helyes dobozméretezést */
            word-wrap: break-word;             /* Mobilon megakadályozza, hogy az e-mail cím kilógjon a dobozból */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            font-family: 'Montserrat', sans-serif; 
            letter-spacing: 0.5px; 
        }

        /* A láblécben lévő kattintható linkek (e-mail, telefon) formázása */
        footer a {
            color: #fff;                        /* A linkek színe is maradjon fehér */
            text-decoration: none;                /* Eltüntetjük a böngésző által automatikusan rátett sima aláhúzást */
            border-bottom: 1px dashed #fff;     /* Helyette egy elegánsabb, szaggatott fehér vonallal húzzuk alá a linket */
        }

        /* Elérhetőségek ne legyenek dőlt betűtípussal */
        address {
            font-style: normal;
        }
        
/* A menüsor formázása */

        /* Főnavigáció tároló rács */
        .fo-navigacio { 
        /* Konténer lekérdezés aktiválása: ez a varázslat engedi meg, hogy a betűk mérete a gomb szélességéhez igazodva zsugorodjon */
            container-type: inline-size; 
            display: grid; /* Aktiválja a rácsos elrendezést (Grid) */
            /* FIX 4 oszlop alapértelmezetten: asztali gépen minden gomb egymás mellett, 1 sorban van */
            grid-template-columns: repeat(4, 1fr); 
            gap: 12px; /* 12 pixel fix távolság a gombok között minden irányban */
            margin-top: 10px; /* 10 pixel külső távolság a teljes menüsor felett */
            border-top: 1px solid rgba(255, 255, 255, 0.2); /* Vékony, 20%-ban áttetsző fehér választóvonal a menü felett */
            padding-top: 17px; /* 15 pixel belső távolság a felső vonal és a gombok között */
        } 

        /* Akadálymentes, intelligensen zsugorodó gombok formázása */
        .nav-link { 
            color: white; /* A gombban lévő szöveg színe fehér lesz */
            /* FONTOS: A betűméret a gomb szélességének 7.5%-a lesz (7.5cqw). Így ha a gomb területe szűkül, a betű is kisebb lesz! 
            A clamp() parancs pedig biztosítja, hogy egy minimum (0.7rem) és maximum (0.85rem) méret között mozogjon, így sosem lesz túl óriási vagy olvashatatlanul pici. */
            font-size: clamp(0.7rem, 7.5cqw, 0.85rem); 
            font-weight: 600; /* Félkövér betűtípus a jobb és tiszta olvashatóságért */
            text-transform: uppercase; /* Minden betűt automatikusan nagybetűssé alakít */
            letter-spacing: 0.5px; /* Finom, 0.5 pixeles betűköz a jobb helykihasználásért a gombokon belül */
            text-decoration: none; /* Teljesen eltünteti a linkek alatti alapértelmezett aláhúzást */
            text-align: center; /* Vízszintesen tökéletesen középre igazítja a gomb szövegét */
            display: flex; /* Rugalmas dobozzá alakítja a gomb belsejét (Flexbox) */
            align-items: center; /* Függőlegesen tökéletesen középre zárja a gomb szövegét */
            justify-content: center; /* Vízszintesen is középre rendezi a gomb szövegét */
            min-height: 45px; /* Minimum 45 pixel magas a gomb, de ha nő a betű, lefelé tágulhat */
            padding: 10px 8px; /* Belső térköz: 10 pixel alul-felül, 8 pixel a két oldalon a szavak védelmében */
            background-color: rgba(255, 255, 255, 0.15); /* Finom, 15%-ban áttetsző fehér háttérszínt ad */
            border: 1px solid rgba(255, 255, 255, 0.25); /* Nagyon vékony, 25%-ban áttetsző fehér keret a gomb körül */
            border-radius: 50px; /* Erős kerekítés, amitől megkapja a gomb a modern kapszula alakot */
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Beállítja, hogy minden animáció 0.3 másodperc alatt, lágyan menjen végbe */
            box-sizing: border-box; /* Biztosítja, hogy a keret és a belső térköz ne nyújtsa túl a gombot a rácson */
            white-space: nowrap; /* Szigorúan megtiltja a böngészőnek, hogy két sorba törje a szavakat */
        } 

        /* Egér ráviteli (Hover) effekt */
        .nav-link:hover { 
            background-color: rgba(255, 255, 255, 1); /* Az egér rávitelekor a háttér teljesen tömör (100%-os) fehérré válik */
            color: #0037fc; /* A gomb szövege átvált a weboldalad jellegzetes kék színére */
            transform: translateY(-2px); /* Az Y tengelyen függőlegesen 2 pixellel megemeli a gombot (lebegő hatás) */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Finom, 20%-os sötét árnyékot vet a gomb alá a lebegés érzetének erősítésére */
        }

/* Egyebek*/
       
        /* Az összes h1 (főcím) és h2 (alcím) formázása */
        h1, h2 {
            font-weight: 700;       /* Megadjuk, hogy a címek mindig vastag (félkövér) betűsek legyenek */
            letter-spacing: -0.5px; /* Összébb húzzuk a betűk közötti távolságot a modernebb hatásért */
        }

        /* Egyedi formázási osztály a kiemelt fontosságú kifejezésekhez */
        .bold-blue {
            color: var(--primary-color);       /* Sötétkék színt ad a kijelölt szövegrésznek */
            font-weight: 700;                  /* Teljesen félkövérré/vastaggá teszi azt */
        }

/* ==========================================================================
   ÚJ ŰRLAP FORMÁZÁSOK (Ajánlatkérés és Hibajelentés oldal)
   ========================================================================== */

/* Az űrlap (form) egészének a formázása */
.web-form {
    display: flex;           /* Aktiváljuk a flexbox elrendezést */
    flex-direction: column;  /* Az űrlap elemei egymás alá, oszlopba rendeződnek */
    gap: 18px;               /* 18 pixel fix távolság (rés) a függőleges mezők között */
    margin-top: 15px;        /* 15 pixel külső térköz az űrlap teteje felett */
}

/* Egy-egy beviteli blokk tároló doboza (címke + beviteli mező együtt) */
.form-group {
    display: flex;           /* Flexbox elrendezés a belső elemeknek */
    flex-direction: column;  /* A címke és a mező egymás alá kerüljön */
    gap: 6px;                /* 6 pixel finom távolság a felirat és a beviteli doboz között */
    text-align: left;        /* Biztosítja, hogy a szövegek balra zártak legyenek */
}

/* Az űrlapmezők feletti szöveges feliratok (címkék) stílusa */
.form-group label {
    font-family: 'Montserrat', sans-serif; /* A weboldal fő betűtípusának alkalmazása */
    font-size: 0.95rem;      /* Kicsit kisebb méret, mint a normál szöveg, a prémium hatásért */
    font-weight: 600;        /* Félkövér kiemelés, hogy jól látható legyen, mit kell kitölteni */
    color: var(--primary-color); /* A :root-ban megadott elegáns sötétkék színt használjuk */
}

/* Az egysoros beviteli mezők (input) és a többsoros szövegdobozok (textarea) közös formázása */
.form-group input,
.form-group textarea {
    font-family: 'Montserrat', sans-serif; /* Itt is kötelezővé tesszük a fő betűtípust */
    font-size: 1rem;         /* Normál, jól olvasható betűméret a gépelt szövegnek */
    padding: 10px 12px;      /* Belső margó: 10px fent-lent, 12px két oldalt, hogy kényelmes legyen gépelni */
    border: 1px solid rgba(44, 62, 80, 0.3); /* Halvány, 30%-osan áttetsző sötétkék keret a mezők körül */
    border-radius: 8px;      /* Modern, 8 pixeles saroklekerekítés a dobozoknak */
    background-color: rgba(255, 255, 255, 0.8); /* 80%-ban áttetsző fehér háttér, hogy átszűrődjön a térkép */
    color: var(--text-color); /* A gépelt szöveg színe a globális sötétszürke lesz */
    box-sizing: border-box;  /* Garantálja, hogy a belső padding ne növelje meg a mező fix szélességét */
    transition: all 0.3s ease; /* Minden változást (szín, keret, árnyék) 0.3 másodperc alatt lágyan animál */
    width: 100%;             /* A mezők teljesen kitöltik a rendelkezésre álló szélességet */
}

/* Fókusz hatás: Mi történjen, ha a felhasználó belekattint egy beviteli mezőbe */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;           /* Eltávolítjuk a böngészők által rátett csúnya, alapértelmezett keretet */
    border-color: var(--accent-color); /* A keret színe átvált az élénkebb kék színedre */
    background-color: #fff;  /* A háttér tiszta, nem áttetsző fehérré válik a jobb olvashatóságért */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3); /* Finom, halványkék ragyogás (árnyék) a doboz körül */
}

/* Az űrlapok alján lévő Küldés gombok egyedi formázása */
.submit-btn {
    font-family: 'Montserrat', sans-serif; /* Montserrat betűtípus a gombon is */
    font-size: 1rem;         /* Jól látható, határozott betűméret */
    font-weight: 700;        /* Teljesen félkövér/vastag betűk */
    text-transform: uppercase; /* Minden betűt automatikusan nagybetűssé alakít, mint a menüben */
    letter-spacing: 0.5px;   /* Finom betűköz a prémium és tiszta megjelenésért */
    color: white;            /* A gomb feliratának színe tiszta fehér */
    background-color: var(--accent-color); /* Alapértelmezetten az élénkkék háttérszínt kapja meg */
    border: none;            /* Eltüntetjük a gomb alapértelmezett szegélyét */
    border-radius: 50px;     /* Erős, 50 pixeles lekerekítés, amitől megkapja a modern kapszula alakot */
    padding: 12px 25px;      /* Kényelmes belső térköz: 12px fent-lent, 25px a gomb két szélén */
    cursor: pointer;         /* Ha az egér rámutat, a nyíl átváltozik a kattintásra felszólító kéz ikonná */
    transition: all 0.3s ease; /* 0.3 másodperces lágy átmenet az animációkhoz */
    margin-top: 10px;        /* 10 pixel külső távolság a felette lévő utolsó mezőtől */
    align-self: center;      /* Asztali gépen a gombot középre igazítja az űrlapon belül, nem nyújtja szét */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Halvány alsó árnyék, hogy a gomb finoman lebegjen */
}

/* Hover hatás: Mi történjen, ha a felhasználó az egérrel a Küldés gomb felé mutat */
.submit-btn:hover {
    transform: translateY(-2px); /* A gomb az Y tengelyen fizikailag 2 pixellel feljebb emelkedik */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* Az árnyéka felerősödik, erősítve a lebegés érzetét */
    opacity: 0.9;            /* Minimálisan áttetszővé válik, jelezve az interaktivitást */
}

/* Reszponzív rész: Mi történjen az űrlappal a mobil kijelzőkön (768 pixel alatt) */
@media (max-width: 768px) {
    .submit-btn {
        width: 100%;         /* Mobilon a gomb felveszi a teljes szélességet a könnyebb megnyomhatóságért */
    }
}


/* Mobilnézet beállítások*/



        /* Reszponzív rész: Mi történjen, ha a kijelző szélessége kisebb, mint 768 pixel (pl. okostelefonok) */
        @media (max-width: 768px) {
            /* Mobilon a betűméret növekedésének megakadályozása. */
            html, body, * {
            -webkit-text-size-adjust: 100% !important;
            -moz-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            }
            .card {
            max-width: 100%;             /* Maximálisan 800 pixel szélesre engedjük kinyúlni a dobozt nagy monitoron */
           }
            /* Mobilon a fejlécben lévő képet és szöveget egymás ALÁ rendezzük (flex-direction: column) */
            .header-grid { 
            flex-direction: column; 
            text-align: center;
            gap: 15px;
            }
            
            header {
            padding: 40px 10px 20px 10px;
            }

            .section { 
            padding: 30px 10px 30px 25px; /* Felső Jobb Alsó Bal */
            }

            .section hr { 
            margin: 10px 0; /* Margó az elválasztóvonal körül a szolgáltatási kártyáknál. */
            }
            
            /* Mobilon kikapcsoljuk a sorkizárást és balra igazítjuk a szöveget */
            .content { 
            text-align: left; 
            line-height: 1.6; /* <--- EZT ADDD HOZZÁ! Ez ad egy kellemes, szellős sorközt a szövegnek */
            }
            
            /* Mobilon beljebb húzzuk a fő konténert, hogy maximálisan kihasználjuk a kis kijelzőt */
            .container { padding: 0 0px; }

            /* Mobil nézet: Sortörés főcímnél */
            #nev, #titulus {
            display: block; /* Mobilon egymás alá rakja őket (külön sorba) */
            margin-bottom: 5px;
            }

            /* Mobil nézet: Sortörés footernél */
            .footer-email {
            display: block; /* Mobilon egymás alá rakja őket (külön sorba) */
            margin-bottom: 10px;
            }

            /* Mobil nézet: footernél kisebb padding */
            footer {
            padding: 15px;  /* 15 pixel belső térközt adunk neki */
            }

            /* Header betűtípus formázása „Mérnöki szemlélettel” idézet */
            .motto {
            margin-bottom: 0px; /* ÚJ SOR: Teljesen eltünteti az üres teret a mottó alól mobilon */
            }

            /* Elrejtjük az email címet mobilon, mert túl sok helyet foglal */
            .top-email { 
            display: none !important; 
            } 
    
            /* A telefonszám középre igazítva, önállóan jelenik meg */
            .top-phone { 
            display: block; 
            width: 100%;
            text-align: center;
            } 

            html {
            font-size: 1rem; /* <--- EZ A VARÁZSLAT! A 16px 90%-a. Ez az egész oldalt lekicsinyíti asztali gépen! */
            }



        }


/* Asztali nézet beállítások */


        @media (min-width: 769px) {
            #nev, #titulus {
            display: inline; /* Laptopon visszaállítja őket egy sorba, egymás mellé */
            }
            html {
            font-size: 0.8rem; /* <--- EZ A VARÁZSLAT! A 16px 90%-a. Ez az egész oldalt lekicsinyíti asztali gépen! */
            }
            .top-email {
            display: inline; /* Megjelenik az email asztali gépen */
            margin-right: 100px; /* Távolság az email és a telefonszám között */
            }
            .top-phone {
            display: inline;
            }
            .footer-email {
            display: inline; /* Megjelenik az email asztali gépen */
            margin-right: 100px; /* Távolság az email és a telefonszám között */
            }

        }

/* FIX 2X2-ES ELRENDEZÉS MOBILON ÉS TABLETEN */

        @media (max-width: 768px) {
            .fo-navigacio { 
            /* Mobilon felülbíráljuk az asztali nézetet: Szigorúan 2 oszlopos (2x2) lesz a rács, nincs több felemás sor! */
            grid-template-columns: repeat(2, 1fr); 
            }
        }

/* BIZTONSÁGI ZÓNA: ULTRA KICSI TELEFONOKHOZ VAGY EXTRÉM BETŰNAGYÍTÁSHOZ */

        @media (max-width: 360px) {
            .fo-navigacio { 
            /* Ha a telefon kijelzője már kritikusan kicsi, akkor a tiszta olvashatóságért egymás alá teszi a gombokat 1 oszlopba */
            grid-template-columns: 1fr; 
            }
        }

/* --- HIBABEJELENTŐ OLDAL EGYEDI PIROS FÓKUSZ HATÁSA --- */

            /* Ha a piros témájú űrlapon belül kattintunk egy mezőbe */
            .form-error-theme .form-group input:focus,
            .form-error-theme .form-group textarea:focus {
            border-color: #e74c3c; /* A keret a kék helyett a szekció piros színére vált */
            box-shadow: 0 0 8px rgba(231, 76, 60, 0.4); /* Finom pirosas-narancssárga ragyogás az űrlapmező körül */
            }

/* --- SIKERES ELKÜLDÉS OLDAL FORMÁZÁSA --- */

            /* Középre zárja a teljes tartalom blokkot */
            .success-section {
            text-align: center;
            padding: 40px 20px;
            }

            /* A zöld kör alakú pipa ikon formázása */
            .success-icon {
            font-size: 3rem;
            color: #2ecc71; /* Kellemes zöld szín */
            background-color: rgba(46, 204, 113, 0.1); /* Halvány zöld háttérkarika */
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 50%;
            margin: 0 auto 20px auto; /* Középre helyezi és alsó térközt ad neki */
            display: flex;
            align-items: center;
            justify-content: center;
            }

            /* Finom térköz a kártyák felett a navigáláskor */
            [id^="toresvonal"], #szolgaltatasok {
            scroll-margin-top: 30px;
            }

            /* Kényszerítjük az űrlapokat és gombokat az egységes betűtípus használatára */
            input, textarea, button, select {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 1rem;
            }

            /* Biztosítjuk, hogy a köszönő oldal gombja mobilon beszűküljön és ne lógjon ki */
            .card a button, 
            .submit-btn,
            button,
            a[href="index.html"] button,
            a[href="index.html#toresvonal"] button {
            max-width: 100% !important;
            width: 100% !important;
            box-sizing: border-box !important;
            }

            /* Ha a fehér kártya belső oldalpárnázása túl kicsi mobilon, adunk neki teret */
            @media (max-width: 768px) {
                .card {
                    padding-left: 8px !important;
                    padding-right: 8px !important;
                }
            }

/* GÖRDÜLÉSALAPÚ KÁRTYA ANIMÁCIÓ (KIZÁRÓLAG AZ INDEX.HTML-EN) */
            
            @media (max-width: 768px) {
    
            /* A #fooldal-test miatt ez a szabály a többi oldalon LÁTHATATLAN, így azok 100% eredetiek maradnak! */
            #fooldal-test .section, #fooldal-test .office-grid {
                transition: box-shadow 0.3s ease !important;
                border-left: 4px solid var(--accent-color) !important; /* Csak a főoldali kártyák kapnak alap kék élt */
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            }

            /* Az effektus aktiválása kizárólag a főoldalon belül */
            #fooldal-test .section.aktiv-kartya, #fooldal-test .office-grid.aktiv-kartya {
            transform: none !important;
            box-shadow: 
            0 12px 25px rgba(0, 0, 0, 0.15), 
            inset 4px 0 0 0 var(--accent-color) !important; /* Szövegmozgás nélküli vastagítás trükk */
            }
    
            /* Mobil hover letiltása, szigorúan csak a főoldalon */
            #fooldal-test .section:hover:not(.aktiv-kartya) {
            transform: none !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            }

            /* Aktív állapot megtartása érintéskor, szigorúan csak a főoldalon */
            #fooldal-test .section.aktiv-kartya:hover {
            transform: none !important;
            box-shadow: 
            0 12px 25px rgba(0, 0, 0, 0.15), 
            inset 4px 0 0 0 var(--accent-color) !important;
            }
        }





        
.nav-link {
    white-space: normal !important;
    
    /* EZ A LÉNYEG: Ha egy szó nem fér ki, a böngésző kötelezően elvágja és új sorba teszi */
    overflow-wrap: break-word !important;
    hyphens: auto !important; /* Ha a böngésző támogatja, kötőjellel töri el */
    
    text-align: center !important;
    padding: 8px 4px !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- BRUTÁLIS, MAGYAROSÍTOTT GLOBÁLIS TÖRÉS --- */
html, body, div, p, span, a, h1, h2, h3, h4, h5, h6, button, label {
    /* Engedélyezi a szavak normális elvágását */
    hyphens: auto !important; /* Ha a böngésző támogatja, kötőjellel töri el */

    
    /* HA A SZÓ TÚL HOSSZÚ, KÖNYÖRTELENÜL KÉNYSZERÍTI A TÖRÉST BÁRHOL */
    
    /* Bekapcsolja a magyar elválasztást (ha a html lang="hu" be van állítva) */
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
}

/* Álló állapotban eltünteti az emailt felülről és egymás alá rakja az elérhetőségeket a footerben */

            @media (orientation: portrait) {
    /* Ide jönnek az álló helyzetre érvényes stílusok */
            .top-email { 
            display: none !important; 
            } 

            /* Mobil nézet: Sortörés footernél */
            .footer-email {
            display: block; /* Mobilon egymás alá rakja őket (külön sorba) */
            margin: 0%;
            padding-bottom: 5%;
            }
        }