.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-7 .elementor-element.elementor-element-8049175{text-align:start;}.elementor-7 .elementor-element.elementor-element-8049175 img{width:30%;}.elementor-7 .elementor-element.elementor-element-7bb4f27{width:var( --container-widget-width, 114.086% );max-width:114.086%;--container-widget-width:114.086%;--container-widget-flex-grow:0;}.elementor-7 .elementor-element.elementor-element-7bb4f27.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(max-width:1024px){.elementor-7 .elementor-element.elementor-element-8049175 img{width:87%;}}@media(max-width:767px){.elementor-7 .elementor-element.elementor-element-8049175.elementor-element{--align-self:center;}.elementor-7 .elementor-element.elementor-element-8049175 img{width:90%;max-width:100%;}}/* Start custom CSS for html, class: .elementor-element-50f2f06 *//* ==========================================================================
   WERT STUDIO - HERO SECTION STYLES (LIGHT MODE START)
   ========================================================================== */

.hero-section {
    background-color: #ffffff; /* Tiszta fehér indulás */
    color: #0b0b0b;            /* Koromfekete szöveg */
    font-family: 'Inter', sans-serif;
    padding: 160px 20px 120px 20px; /* Nagyvonalú prémium térközök */
    display: flex;
    align-items: center;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- BAL OLDAL: A HATALMAS FŐCÍM --- */
.hero-title-box {
    width: 100%;
}

.hero-title-box h1 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin: 0;
    color: #0b0b0b;
}

/* --- JOBB OLDAL: A STRATÉGIAI LEÍRÁS ÉS GOMB --- */
.hero-content-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.hero-description {
    font-size: 20px;
    line-height: 1.6;
    color: #333333; /* Elegáns sötétszürke szövegszín */
    margin: 0;
    max-width: 540px; /* Korlátozott sorhossz a prémium olvashatóságért */
}

/* --- BUTTON (GOMB) STÍLUSOK (ALAPHELYZETBEN SÁRGA) --- */
.hero-actions {
    display: inline-block;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    background-color: #f9d500; /* Alapból a te sárga színkódod */
    color: #0b0b0b;            /* Fekete felirat a jó olvashatóságért */
    text-decoration: none;
    padding: 18px 36px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    border: 2px solid #f9d500; /* Sárga keret */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gomb Hover: Átvált koromfeketére és finoman kiemelkedik */
.hero-btn:hover {
    background-color: #0b0b0b; /* Fekete háttér */
    border-color: #0b0b0b;     /* Fekete keret */
    color: #ffffff;            /* A betű fehér lesz */
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Finom, sötét árnyék */
}


/* ==========================================================================
   ASZTALI GÉPES ELRENDEZÉS (DESKTOP - 992PX FELETT)
   ========================================================================== */
@media (min-width: 992px) {
    .hero-section {
        min-height: 80vh; /* Belépéskor majdnem a teljes képernyőt kitölti */
        padding-top: 200px; /* Helyet hagyunk a fixen ragadó menünek */
    }

    .hero-container {
        flex-direction: row; /* Egymás mellé rakja a két dobozt */
        align-items: flex-start;
        gap: 80px;
    }

    /* A főcím kapja a hely 55%-át */
    .hero-title-box {
        width: 55%;
    }

    .hero-title-box h1 {
        font-size: 76px; /* Brutális magazin-méret asztali gépen */
    }

    /* A leírás kapja a hely 45%-át, és egy kicsit lejjebb toljuk (Aszimmetria) */
    .hero-content-box {
        width: 45%;
        padding-top: 25px; 
    }
}

/* ==========================================================================
   MOBIL NÉZET (768PX ÉS ALATTA)
   ========================================================================== */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .hero-title-box h1 {
        font-size: 40px; /* Mobilon is jól olvasható, de masszív marad */
        letter-spacing: -1px;
    }

    .hero-description {
        font-size: 17px;
    }

    .hero-btn {
        width: 100%; /* Mobilon teljes szélességű gomb a kényelmes kattintáshoz */
        justify-content: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4ae2333 *//* ==========================================================================
   WERT STUDIO - SERVICES SECTION STYLES (STACKING CARDS EFFECT)
   ========================================================================== */

/* --- ALAP VÁLTOZÓK ÉS BEÁLLÍTÁSOK --- */
:root {
    --bg-color: #0b0b0b;
    --card-bg: #141414;
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --accent-color: #f9d500; /* A te sárga színkódod */
}

.services-section {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    padding: 140px 20px;
    position: relative;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- SZEKCIÓ FEJLÉC --- */
.services-header {
    margin-bottom: 80px;
}

.services-header .subtitle {
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.services-header h2 {
    font-size: 48px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* --- KÁRTYÁK ALAP ELRENDEZÉSE --- */
.services-grid {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Mobilon tisztes távolság egymás között */
    position: relative;
}

/* --- A KÁRTYA ALAP STÍLUSA --- */
.service-card {
    background-color: var(--card-bg);
    border: 1px solid #222;
    border-radius: 16px;
    padding: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    transition: border-color 0.4s ease;
    overflow: hidden;
}

/* --- INTERAKCIÓ: BAL OLDALI SÁRGA SÁV (HOVER) --- */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--accent-color);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    transform-origin: bottom;
}

.service-card:hover {
    border-color: var(--accent-color);
}

.service-card:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

/* --- KÁRTYA BELSŐ ELEMEI --- */
.card-counter {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
}

.card-content {
    flex: 1;
    max-width: 750px;
}

.card-tag {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 15px;
}

.service-card h3 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px 0;
    transition: color 0.3s ease;
}

.service-card:hover h3 {
    color: var(--accent-color);
}

.service-card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.card-arrow {
    font-size: 28px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.service-card:hover .card-arrow {
    color: var(--accent-color);
    transform: translateX(5px);
}


/* ==========================================================================
   ASZTALI GÉPES VALÓDI KÁRTYAPAKLI ANIMÁCIÓ (DESKTOP - 992PX FELETT)
   ========================================================================== */
@media (min-width: 992px) {
    .services-grid {
        gap: 0; /* Kikapcsoljuk a gap-et, hogy egymásra csúszhassanak */
    }

    .service-card {
        position: sticky;
        width: 100%;
        box-sizing: border-box;
        
        /* Mindegyik kártya ugyanabban a magasságban ragad le a képernyő tetejétől */
        top: 160px; 
        
        /* Hatalmas alsó térköz, ami fixen tartja a kártyát görgetés közben, 
           amíg a következő alulról meg nem érkezik és rá nem csúszik */
        margin-bottom: 300px; 
        
        /* Alapból minden kártya 100%-os méretű, sima átmenettel */
        transform: scale(1);
        transition: transform 0.3s ease, border-color 0.4s ease;
    }

    /* Az utolsó kártyának IS megadjuk a nagy alsó margót, így az egész szekció 
       addig a képernyőhöz láncolva marad, amíg az utolsó lap is a helyére nem kerül */
    .service-card:last-child {
        margin-bottom: 100px;
    }

    /* 
       A tiszta rétegződés (z-index) beállítása:
       Az 1. kártya van legalul, a 2. rácsúszik, a 3. pedig a legtetejére zár.
    */
    .service-card:nth-child(1) { z-index: 1; }
    .service-card:nth-child(2) { z-index: 2; }
    .service-card:nth-child(3) { z-index: 3; }

    /* Hover hatás: ha ráviszed az egeret arra, amelyik épp felül van, 
       kissé megemelkedik a prémium 3D érzetért */
    .service-card:hover {
        transform: translateY(-5px) scale(1.005);
        z-index: 10; /* Hoverkor kiemelkedik a pakliból */
    }
}


/* ==========================================================================
   MOBIL ÉS TABLET RESZPONZÍV NÉZET (768PX ÉS ALATTA)
   ========================================================================== */
@media (max-width: 768px) {
    .services-section {
        padding: 80px 15px;
    }
    
    .services-header h2 {
        font-size: 32px;
    }

    .service-card {
        padding: 40px 25px;
        flex-direction: column; /* Mobilon egymás alá rendeződnek a kártya elemei */
        gap: 15px;
    }

    .service-card h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .card-arrow {
        display: none; /* Mobilon elrejtjük a nyilat a letisztultságért */
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-56b2562 *//* ==========================================================================
   WERT STUDIO - VISION & VALUES (EDITORIAL MINIMALISM / TYPOGRAPHIC LINES)
   ========================================================================== */

/* --- KÖZÖS ALAPOK (FEHÉR HÁTTÉR, SÖTÉT SZÖVEGEK) --- */
.vision-values-section {
    background-color: #ffffff; /* Tiszta fehér alap */
    color: #0b0b0b;            /* Koromfekete szövegek */
    font-family: 'Inter', sans-serif;
    padding: 140px 20px;
    position: relative;
    border-top: 1px solid #e5e5e5;
}

.vision-values-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* --- BAL OSZLOP: A FIXEN RAGADÓ STRATÉGIAI SZÖVEG --- */
.section-sticky-left {
    width: 100%;
}

.vision-values-section .subtitle {
    color: #b59b00;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.vision-values-section h2 {
    font-size: 46px;
    font-weight: 800;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.15;
}

.vision-lead {
    font-size: 22px;
    line-height: 1.65;
    color: #222222;
    font-weight: 400;
    margin: 0;
}


/* --- JOBB OSZLOP: GÖRDÜLŐ TARTALOM --- */
.section-scroll-right {
    width: 100%;
}

/* A részleg feletti kis fejléc */
.values-header {
    margin-bottom: 40px;
}

.values-header .subtitle {
    color: #b59b00;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.values-header h2 {
    font-size: 48px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* Kártyák rácsa (Lista elrendezés) */
.values-grid {
    display: flex;
    flex-direction: column;
    gap: 0; /* Kikapcsoljuk a gap-et, mert a vonalak határolják a blokkokat */
}

/* MAGAZIN STÍLUSÚ ÉRTÉK BLOKK (Nincs háttér, csak alsó elválasztó vonal) */
.values-grid .value-card {
    background-color: transparent; /* Teljesen beolvad a fehér háttérbe */
    border: none;
    border-bottom: 1px solid #e5e5e5; /* Finom szürke elválasztó vonal */
    border-radius: 0; /* Elhagyjuk a lekerekítéseket */
    padding: 40px 0;  /* Csak alul-felül adunk neki teret */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: none; /* Semmi felesleges sallang */
    
    /* Minden belső elem finom mozgásáért felel */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* Ikonok doboza alaphelyzetben – Szuper letisztult, minimalista szürke */
.value-icon {
    color: #0b0b0b;
    background-color: #f7f7f7;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.value-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
    color: #0b0b0b;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.value-card p {
    font-size: 15px;
    line-height: 1.65;
    color: #555555; /* Elegáns középszürke a jó olvashatóságért */
    margin: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* --- INTERAKCIÓ: A FINOM REAGÁLÁS --- */
.value-card:hover {
    /* Az alsó elválasztó vonal felizzik az arculati sárgáddal */
    border-bottom-color: #f9d500; 
    padding-left: 10px; /* Finoman beljebb csúszik a teljes blokk hoverre */
}

/* Hoverre a szövegek is követik a finom mozgást */
.value-card:hover h3,
.value-card:hover p {
    /* Opcionális: ha akarod, itt is finomíthatsz, de a padding-left már elvégzi a munkát */
}

/* Hoverre az ikonbox megkapja a sárga hátteret */
.value-card:hover .value-icon {
    background-color: #f9d500;
    color: #0b0b0b;
}


/* ==========================================================================
   ASZTALI GÉPES ASZSZIMMETRIA (DESKTOP - 992PX FELETT)
   ========================================================================== */
@media (min-width: 992px) {
    .vision-values-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 80px;
    }

    .section-sticky-left {
        width: 45%;
        position: sticky;
        top: 180px;
    }

    .section-scroll-right {
        width: 55%;
    }
}


/* ==========================================================================
   MOBIL ÉS TABLET RESZPONZÍV NÉZET (768PX ÉS ALATTA)
   ========================================================================== */
@media (max-width: 768px) {
    .vision-values-section {
        padding: 80px 15px;
    }
    
    .vision-values-section h2 {
        font-size: 32px;
    }
    
    .values-header h2 {
        font-size: 36px;
    }
    
    .vision-lead {
        font-size: 18px;
    }
    
    .values-grid .value-card {
        padding: 30px 0;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-07cc233 */<style>
/* Alapbeállítások - a változók ha nincsenek, itt fixáltuk őket */
.portfolio-section {
    background-color: #000000;
    color: #ffffff;
    font-family: sans-serif;
    padding: 140px 20px;
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Sidebar */
.portfolio-sidebar { width: 100%; }
.portfolio-sidebar .subtitle { color: #f9d500; font-size: 14px; font-weight: 700; letter-spacing: 2px; display: block; margin-bottom: 10px; }
.portfolio-sidebar h2 { font-size: 48px; font-weight: 800; margin: 0 0 20px 0; text-transform: uppercase; }
.sidebar-text { color: #888; font-size: 16px; line-height: 1.6; max-width: 400px; }

/* Showcase */
.portfolio-showcase { display: flex; flex-direction: column; gap: 90px; }

.project-link { text-decoration: none !important; color: #ffffff !important; display: block; cursor: pointer; }

.project-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #141414;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(15%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
    display: block;
}

.project-link:hover .project-image-wrapper img {
    transform: scale(1.03);
    filter: grayscale(0%);
}

.project-category {
    font-size: 13px;
    text-transform: uppercase;
    color: #888;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.project-link:hover .project-category { color: #f9d500; }
.project-meta h3 { font-size: 28px; font-weight: 700; margin: 0; color: #ffffff; }

/* Desktop */
@media (min-width: 992px) {
    .portfolio-container { flex-direction: row; align-items: flex-start; }
    .portfolio-sidebar { width: 35%; position: sticky; top: 120px; }
    .portfolio-showcase { width: 65%; }
    .project-item:nth-child(even) { padding-left: 10%; width: 90%; }
}

/* Mobil */
@media (max-width: 768px) {
    .portfolio-section { padding: 80px 15px; }
    .portfolio-sidebar h2 { font-size: 36px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b5000f3 *//* ==========================================================================
   WERT STUDIO - CONTACT / CTA SECTION STYLES (LIGHT MODE)
   ========================================================================== */

.contact-section {
    background-color: #ffffff; /* Visszaváltunk fehér háttérre */
    color: #0b0b0b;            /* Sötét szövegek */
    font-family: 'Inter', sans-serif;
    padding: 140px 20px;
    border-top: 1px solid #e5e5e5;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* --- BAL OLDALI SZÖVEGES BLOKK --- */
.contact-info {
    flex: 1;
}

.contact-info .subtitle {
    color: #b59b00; /* Olvasható mély sárga fehér alapon */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.contact-info h2 {
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.contact-text {
    font-size: 18px;
    line-height: 1.65;
    color: #333333;
    margin-bottom: 40px;
    max-width: 500px;
}

/* Az írásbeliséget kiemelő biztonsági doboz */
.communication-note {
    background-color: #f7f7f7;
    border-left: 4px solid #f9d500; /* A te élénk sárgád */
    padding: 25px;
    border-radius: 0 12px 12px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #444444;
    max-width: 500px;
}

.communication-note strong {
    color: #0b0b0b;
    display: inline-block;
    margin-bottom: 5px;
}

/* --- JOBB OLDALI ŰRLAP (FORM) STÍLUSOK --- */
.contact-form-wrapper {
    flex: 1;
    width: 100%;
}

.contact-form {
    background-color: #ffffff;
    border: 2px solid #f9d500; /* Masszív sárga keret az arculatodhoz */
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    color: #0b0b0b;
}

/* Input mezők formázása (Minimál német stílus) */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 16px;
    background-color: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0b0b0b;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Amikor a felhasználó belekattint a mezőbe */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #0b0b0b; /* Feketére vált a belső keret */
    background-color: #ffffff;
}

/* A nagy sárga küldő gomb */
.submit-btn {
    width: 100%;
    background-color: #f9d500; /* Te sárgád */
    color: #0b0b0b;
    border: none;
    padding: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Gomb interakció (Hover) */
.submit-btn:hover {
    background-color: #0b0b0b; /* Átfordul koromfeketére */
    color: #ffffff;            /* A betű meg fehérre */
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   ASZTALI GÉPES ELRENDEZÉS (DESKTOP - 992PX FELETT)
   ========================================================================== */
@media (min-width: 992px) {
    .contact-container {
        flex-direction: row; /* Egymás mellé teszi a két oszlopot */
        align-items: center; /* Függőlegesen középre igazítja őket */
        gap: 80px;
    }
    
    .contact-info {
        position: sticky;
        top: 180px; /* Ez is finoman követi a görgetést, ha hosszabb lenne a form */
    }
}

/* ==========================================================================
   MOBIL NÉZET (768PX ÉS ALATTA)
   ========================================================================== */
@media (max-width: 768px) {
    .contact-section {
        padding: 80px 15px;
    }

    .contact-info h2 {
        font-size: 36px;
    }

    .contact-form {
        padding: 30px 20px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49ede2f *//* ==========================================================================
   WERT STUDIO - MAIN FOOTER STYLES (PREMIUM DARK MODE)
   ========================================================================== */

.main-footer {
    background-color: #0b0b0b; /* Koromfekete háttér */
    color: #ffffff;            /* Fehér szövegek */
    font-family: 'Inter', sans-serif;
    padding: 100px 20px 40px 20px;
    border-top: 1px solid #1a1a1a; /* Nagyon finom felső elválasztó vonal */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* --- FELSŐ RÉSZ: LOGÓ ÉS LINKECSOPORTOK --- */
.footer-top {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* A logó alapstílusa */
.footer-logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #ffffff;
}

/* A TE SÁRGA W BETŰD */
.footer-logo .accent-letter {
    color: #f9d500; /* Az arculati sárga színkódod */
}

.footer-tagline {
    font-size: 15px;
    color: #888888; /* Prémium tompított szürke */
    margin: 0;
}

/* Linkoszlopok elrendezése */
.footer-nav-groups {
    display: flex;
    gap: 60px;
}

.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-nav-col h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888888;
    margin: 0 0 5px 0;
}

.footer-nav-col a {
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Link hover: finoman átvált az arculati sárgára */
.footer-nav-col a:hover {
    color: #f9d500;
}


/* --- ALSÓ RÉSZ: COPYRIGHT ÉS BACK TO TOP --- */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    padding-top: 40px;
    border-top: 1px solid #1a1a1a; /* Elválasztó vonal a top és bottom között */
}

.copyright {
    font-size: 14px;
    color: #666666;
    margin: 0;
}

/* Vissza a tetejére gomb stílusa */
.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.back-to-top svg {
    transition: transform 0.3s ease;
}

/* Hover: a szöveg sárga lesz, a nyíl pedig finoman megmozdul felfelé */
.back-to-top:hover {
    color: #f9d500;
}

.back-to-top:hover svg {
    transform: translateY(-4px);
}


/* ==========================================================================
   ASZTALI GÉPES ELRENDEZÉS (DESKTOP - 768PX FELETT)
   ========================================================================== */
@media (min-width: 768px) {
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}/* End custom CSS */