/* ======================================================
   RÓLAM OLDAL – TELJES, TISZTÍTOTT STÍLUSLAP
   ====================================================== */

/* --- 1. ALAPOK ÉS ELRENDEZÉS --- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.container-inner {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

section {
    padding: 60px 20px;
    width: 100%;
}

.bg-white { background-color: #ffffff; }
.bg-light { background-color: #f8f9fa; }
.bg-accent { background-color: #f3f4f6; }

.section-slim {
    padding-top: 5px;
    padding-bottom: 5px;
}

section.section-slim p {
    margin: 0;
}

/* --- 2. HERO SZAKASZ --- */
.hero {
    text-align: center;
}

.hero .subtitle {
    display: block;
    margin-top: 60px !important; /* Ez tolja lefelé a feliratot */
    margin-bottom: 15px;         /* Ez pedig a főcímtől (H1) tartja a távolságot */
}
.hero-header {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.hero p {
    font-size: 1.125rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto 30px;
}

/* --- 3. SPLIT BLOKK (KÉP ÉS SZÖVEG) --- */
.about-split, .about-split-2 {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
}

.about-split.reverse {
    flex-direction: row-reverse;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.about-text h2 {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 0;
}

.about-text h3 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 30px;
}

.about-text p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-text p:last-child {
    margin-bottom: 0;
}

.about-image-wrapper {
    flex: 0 0 400px;
    max-width: 100%;
}

.about-image-wrapper img, .about-profile-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    display: block;
}

.about-image-center img {
    width: 600px;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    margin: 0 auto;
}

/* --- 4. LISTA STÍLUSOK --- */
.about-list {
    list-style: none;
    padding-left: 0;
}

.about-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.about-list li i {
    color: #d4a017 !important;
    width: 25px;
    font-size: 1.2rem;
    margin-right: 12px;
}

.experience-group {
    margin-bottom: 40px;
}

.group-title {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #d4a017;
    display: inline-block;
}

/* --- 5. IDÉZETEK ÉS ÉRTÉKELÉSEK --- */
.testimonial-intro {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 25px auto;
}

.testimonial-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.testimonial-card {
    background: #ffffff;
    padding: 20px 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #d4a017;
    flex: 1;
    min-width: 280px;
    max-width: 420px;
}

.testimonial-text {
    font-style: italic;
    font-size: 1.15rem; /* Megnövelt betűméret (kb. 18-19px) */
    line-height: 1.7;    /* Kicsit szellősebb sorok a könnyebb olvashatóságért */
    color: #333;
    margin-bottom: 15px;
}

/* Ez pedig a név és város (Attila, Szombathely) részre */
.testimonial-author, .testimonial-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;    /* Nagyobb betű a névnek is */
    color: #666;
    margin-top: 10px;
}



.cta-section-wrapper, .cta-inner {
    display: flex;
    flex-direction: column; /* Egymás alá teszi a szöveget és a gombot */
    align-items: center;    /* Vízszintesen középre igazítja az elemeket */
    text-align: center;     /* A szöveget magát is középre zárja */
    margin-top: 60px;       /* Legyen hely az idézet és a gomb között */
    margin-bottom: 60px;
    width: 100%;            /* Töltse ki a rendelkezésre álló szélességet */
}

/* Ha a gombod egy link (a tag), biztosítsuk, hogy ne nyúljon el teljes szélességben */
.cta-section-wrapper .btn-bt, .cta-inner .btn-bt {
    display: inline-block;
    width: auto;            /* Csak akkora legyen, amekkora a szöveg benne */
    min-width: 250px;       /* De legyen elég hangsúlyos */
    margin-top: 20px;       /* Távolság a gomb feletti szövegtől */
}
.cta-section-wrapper p, .cta-inner p {
    margin-bottom: 30px !important; /* Nagyobb távolság a szöveg és a gomb között */
    line-height: 1.6;
}

.testimonial-name {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-about {
    max-width: 700px;
    margin: 50px auto;
    padding: 30px;
    background-color: #f8f9fa;
    border-left: 4px solid #d4a017;
    border-radius: 10px;
}

.problem-intro {
    text-align: center;
    max-width: 800px;      /* Hogy ne nyúljon el a képernyő széléig */
    margin: 0 auto 50px auto !important; /* Középre helyezi a blokkot és helyet hagy alatta */
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
}

/* Keressük meg a gomb körüli konténert, és tegyük középre */
.cta-section-wrapper-tapasztalat, 
.cta-inner-tapasztalat {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Vízszintes középre igazítás */
    text-align: center;     /* Szöveg középre */
    padding: 60px 20px;     /* Hogy legyen hely alatta-felette */
}

/* A szöveg és a gomb közötti távolság növelése */
.cta-section-wrapper-tapasztalat p, 
.cta-lead-text-tapasztalat {
    margin-bottom: 35px !important; 
    font-size: 1.1rem;
    line-height: 1.6;
}


.cta-lead-text {
    margin-bottom: 20px !important; /* Hogy ne zavarjon be más margó */
}

/* --- 6. ÉRTÉKEK ÉS KINEK AJÁNLOM (GRID) --- */

/* Az előnyök kártyák címei */
.about-value h3 {
    color: #1a5276 !important; /* Szép mélykék szín */
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700;
}

/* Maguk a kártyák (hogy a szöveg is középen legyen bennük) */
.about-value {
    text-align: center;
    padding: 30px;
}

.about-values, .target-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.about-value, .target-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 2px solid transparent;
}

.about-value:hover, .target-card:hover {
    transform: translateY(-5px);
    border: 2px solid #d4a017;
    box-shadow: 0 15px 40px rgba(212, 160, 23, 0.15);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: #f0f7ff;
    color: #d4a017;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 20px;
    font-size: 1.5rem;
}

/* --- 7. KIEMELT SZÖVEGEK --- */
.about-target-fent, .about-target {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-target-fent p, .about-lead {
    font-size: 1.25rem;
    color: #467d9c;
    font-style: italic;
    line-height: 1.6;
    text-align: center;
    max-width: 800px;
    display: block;

    /* NÖVELT TÉRKÖZ: */
    /* 80px távolság felül és alul, auto középre igazítás kétoldalt */
    margin: 40px auto !important; 
    
    /* Opcionális: ha mobilon soknak tűnik a 80px, 
       akkor a media query-ben majd lejjebb vesszük. */
}

.about-middle-quote {
    max-width: 900px;
    margin: 0 auto 50px auto;
    text-align: center;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
}

/* --- 8. CTA SZAKASZ ÉS GOMBOK --- */
.cta-full {
    width: 100%;
    background: #f3f3f3;
    padding: 80px 20px;
    display: flex;
    justify-content: center; 
    align-items: center;
    text-align: center;
}

.cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
}

.btn-bt {
    display: inline-block;
    padding: 12px 24px;
    background-color: #444;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: bold;
}

.btn-bt:hover {
    background-color: #222;
    transform: translateY(-2px);
}

.about-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* --- 9. RESZPONZÍV BEÁLLÍTÁSOK (Media Queries) --- */

/* Nagyobb tablet / Kis monitor */
@media (max-width: 1250px) {
    .about-values, .target-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet nézet */
@media (max-width: 992px) {
    .about-split, .about-split.reverse, .about-split-2 {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .about-text h2 {
        text-align: center;
    }

    .about-image-wrapper {
        flex: 0 0 100%;
        order: -1; /* Kép felülre */
    }

    .hero h1 {
        font-size: 2rem;
    }
}

/* Mobil nézet */
@media (max-width: 768px) {
    section {
        padding: 40px 15px;
    }

    .about-values, .target-grid {
        grid-template-columns: 1fr;
    }

    .about-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-bt {
        width: 100%;
        text-align: center;
    }

    .about-target-fent p, .about-target p, .about-lead {
        font-size: 1.1rem;
    }

    .section-header h2 {
        font-size: 1.6rem;
    }

.about-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Távolság a listaelemek között */
  }

.about-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    
    /* EZ A KULCS: Balra zárjuk a szöveget, hogy ne legyen hézag a szavak közt */
    text-align: left !important; 
    justify-content: flex-start !important;
  }

  /* Kényszerítsük a belső szövegeket is balra */
  .about-list li div, 
  .about-list li span,
  .about-list li strong {
    text-align: left !important;
    display: inline !important; /* Visszaállítjuk sima folyószövegre */
  }

  /* Egy kis extra: ha a "17 év" után túl sok a szóköz a HTML-ben, 
     ez a kód összehúzza őket egyetlen szóközre */
  .about-list li {
    white-space: normal !important;
  }


}
@media (max-width: 768px) {
    /* 1. A listaelemek közötti távolság csökkentése */
    .about-list li {
        margin-bottom: 12px !important; /* Itt vedd lejjebb (pl. 25-ről 12-re) */
        gap: 10px !important;
    }

    /* 2. A szekciók (Hivatalos minősítések stb.) közötti távolság csökkentése */
    .experience-group {
        margin-bottom: 25px !important; /* Kevesebb hely a csoportok között */
    }

    /* 3. A sárga aláhúzott cím alatti távolság csökkentése */
    .group-title {
        margin-bottom: 15px !important; 
        padding-bottom: 3px !important;
    }

    /* 4. A sorok közötti távolság (line-height) finomítása a szövegen belül */
    .about-list li span {
        line-height: 1.3 !important; /* Szorosabb sorok, ha a szöveg több sorba törik */
    }

    /* 1. Csökkentjük a gombot tartalmazó wrapper felső távolságát */
    .cta-section-wrapper-tapasztalat, 
    .cta-inner-tapasztalat {
        margin-top: 10px !important; /* Itt vedd le a 60px-et 10-re */
        padding-top: 10px !important;
        padding-bottom: 40px !important; /* Alul maradhat a hely a gomb alatt */
    }

    /* 2. Ha a "Vágj bele..." szövegnek van külön margója, azt is fixáljuk */
    .cta-lead-text {
        margin-top: 0 !important;
        margin-bottom: 20px !important; /* Távolság a szöveg és a gomb között */
        font-size: 1rem !important;
    }

    /* 3. Az utolsó tapasztalat csoport alatti extra hely eltávolítása */
    .experience-group:last-of-type {
        margin-bottom: -20px !important;
    }
}