.lp-section {
  padding: 80px 20px;
}

.lp-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

p {
  color: #555;
  margin-bottom: 15px;
}

/* HERO */
.hero {
  background: #f5f7f8;
}




.problem-section .section-intro {
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.section-intro {
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.problem-section .lp-grid {
    margin-top: 40px;
}

.problem-section .section-footer {
    margin-top: 80px;
    margin-bottom: 40px;
    font-size: 1.1rem;
}





/* 1. SZINT: Fejléc középre igazítása */
.instructor-header {
    text-align: center;
    margin-bottom: 50px;
}

.instructor-header .lead-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin-top: 10px;
}

/* 2. SZINT: Kétoszlopos rész */
.instructor-body {
    display: flex;
    align-items: flex-start;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
}

.instructor-image {
    flex: 0 0 400px; /* Portré szélessége */
}

.instructor-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.instructor-content {
    flex: 1;
}

.instructor-content p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: #444;
}

/* Ikonos lista */
.instructor-features {
    list-style: none;
    padding: 0;
    
    /* EZT ÁLLÍTSD: Függőleges távolság a felette lévő szövegtől */
    margin-top: 60px; 
    
    /* Ha az elemek egymástól való távolságát is akarod: */
    display: flex;
    flex-direction: column;
    gap: 1px; 
}

.instructor-features li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-weight: 500;
}

/* 3. SZINT: CTA középen */
.instructor-footer-cta {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid #f0f0f0;
}

.instructor-footer-cta p {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Gomb stílus (Arany/Barna árnyalat) */
.lp-button {
    display: inline-block;
    padding: 18px 45px;
    background-color: #d4a017;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.lp-button:hover {
    background-color: #b88a14;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 160, 23, 0.3);
}

.instructor-features .icon {
    font-size: 1.3rem;
    color: #d4a017; /* Az aranybarna színed */
    min-width: 30px; /* Hogy az ikonok egy vonalban kezdődjenek */
    display: inline-block;
}

.instructor-features li {
    display: flex;
    align-items: center;    /* Ez húzza függőlegesen középre a szöveget az ikon mellett */
    gap: 15px;             /* Távolság az ikon és a szöveg között */
    margin-bottom: 12px;   /* A listaelemek közötti távolság */
    
    /* A konkrét betű/sor magasság: */
    line-height: 1.4;      /* 1.2 és 1.6 között érdemes állítani az olvashatósághoz */
    font-size: 0.95rem;     /* A betűméret */
}








/* FAQ Konténer */
.faq-grid {
    max-width: 800px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

/* Egyedi kérdés blokk */
.faq-item {
    background: #f9fbfb;
    border: 1px solid #eef2f3;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: #ffffff;
    border-color: #d4a017;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* Kérdés része */
.faq-question {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.faq-question i {
    color: #d4a017;
    font-size: 1.2rem;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #2c3e50;
    font-weight: 700;
}

/* Válasz része */
.faq-answer {
    padding-left: 33px; /* Az ikon alá ne lógjon be a szöveg */
    border-left: 2px solid #f0e6d2;
    margin-left: 10px;
}

.faq-answer p {
    margin: 0;
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
}


.faq-cta {
  text-align: center;
  margin-top: 40px;
}

.faq-cta-text {
  margin-bottom: 50px;
  font-size: 18px;
  color: #333;
}


.testimonials-course {
  padding: 100px 4% 40px;
  background-color: #f1f4fa; /* Nagyon halvány kék/szürke háttér */
  font-family: "Inter", "Segoe UI", sans-serif;
}

.testimonials-course .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* Ez viszi középre a címet, alcímet és a gombokat */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mobil nézet */






/* Részletek szekció elrendezése */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px; /* Vízszintes távolság a két oszlop között */
    margin-top: 80px; /* Távolság a felette lévő szekciótól */
    margin-bottom: 80px; /* Távolság az alatta lévő szekciótól */
    align-items: center; /* Függőleges középre igazítás */
}

/* 2. A bal oldali információs blokk (Most már definiálva!) */
.details-info {
    /* Most már balra zárunk, nem center */
    text-align: left; 
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 20px; /* Egy kis belső margó a bal széltől */
}



.info-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.info-item i {
    color: #d4a017;
    font-size: 1.5rem;
    margin-top: 3px;
}

.info-item strong {
    display: block;
    font-size: 1.1rem;
    color: #333;
}

.includes-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #eef2f3;
}

.includes-box h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.includes-box .lp-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.includes-box .lp-list i {
    color: #27ae60;
}




.lp-gallery {
  display: flex;
  gap: 15px; /* Távolság a képek között */
  flex-wrap: wrap; /* Mobil kijelzőn egymás alá törnek */
  justify-content: center;
  margin: 20px 0;
}

.lp-image {
  flex: 1 1 calc(33.333% - 15px); /* Három oszlopos elrendezés */
  min-width: 250px; /* Minimum szélesség, mielőtt egymás alá ugranának */
}

.lp-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* Opcionális: lekerekített sarkok */
  object-fit: cover;
}




/* Árkártya stílusa */
.price-card {
    background: white;
   padding: 50px 50px;
   margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Enyhébb árnyék */
    border: 2px solid #eef2f3; /* Finom, alig látható keret */
    position: relative;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Rugalmas animáció */
    cursor: pointer;
}
.price-card:hover {
    border-color: #d4a017; /* Itt vált aranyra a keret */
    transform: translateY(-1px) scale(1.01); /* Kiemelkedik és kicsit megnő */
    box-shadow: 0 25px 50px rgba(212, 160, 23, 0.2); /* Aranyos tónusú árnyék */
}

/* A gomb is reagálhat, ha a kártyára lépsz */
.price-card:hover .cta-button {
    background-color: #b88a14;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.price-card:hover {
    border-color: #d4a017; /* Itt vált aranyra a keret */
    transform: translateY(-10px) scale(1.02); /* Kiemelkedik és kicsit megnő */
    box-shadow: 0 25px 50px rgba(212, 160, 23, 0.2); /* Aranyos tónusú árnyék */
}

/* A gomb is reagálhat, ha a kártyára lépsz */
.price-card:hover .cta-button {
    background-color: #b88a14;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}




.promo-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #28A745;
    color: white;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.price-label {
    display: block;
    font-size: 1rem;
    color: #666;
}

.price-value {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #333;
    margin: 10px 0;
}

.normal-price {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 25px;
}



.payment-terms {
    background: #fdfaf5;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.small-note {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.3;
}

.urgency-note {
    color: #e67e22;
    font-weight: 600;
    font-size: 0.9rem;
    
    margin-bottom: 85px;     /* Megtoljuk a helyet a gomb előtt */
    line-height: 1.6;
}

.cta-button.large {
    width: 100%;
    padding: 20px;
    font-size: 1.1rem;
}







/* Kártya belső elemei */
.lp-card .icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
}

.lp-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: #333;
}

.lp-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-more {
    color: #d4a017;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.lp-card:hover .card-more {
    transform: translateX(5px);
}




.lp-program-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%; /* Hogy egyforma magasak legyenek */
}

.lp-program-card .icon {
    color: #d4a017;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.lp-program-card h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.lp-program-card .lp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp-program-card .lp-list li {
    font-size: 0.9rem;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #444;
}

.lp-program-card .lp-list li strong {
    color: #d4a017; /* Az időpontok kaptak egy kis színt a jobb olvashatóságért */
    display: inline-block;
    min-width: 85px; /* Hogy az időpontok utáni szöveg nagyjából egy vonalba kerüljön */
}

/* Kiemelt kártya (Amit biztosítunk) */
.highlight-card i {
    animation: pulse 2s infinite; /* Egy kis extra csillogás az utolsó kártyának */
}

/* Wellness kiemelés a szekción belül */
.lp-wellness-highlight {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #eef2f3;
    border-left: 5px solid #d4a017; /* Arany hangsúly az elején */
    padding: 25px 35px;
    border-radius: 15px;
    margin: 100px auto;
    max-width: 900px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    text-align: left;
    gap: 25px;
}

.wellness-icon {
    font-size: 2.5rem;
    color: #d4a017;
    flex-shrink: 0;
}

.wellness-text h3 {
    margin: 0 0 5px 0;
    font-size: 1.25rem;
    color: #333;
}

.wellness-text p {
    margin: 0;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

/* Kiemelt kényelmi szolgáltatások blokk */
.lp-amenities-highlight {
    background: #ffffff;
    border: 1px solid #eef2f3;
    border-radius: 20px;
    padding: 35px;
    margin: 40px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.amenities-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.amenities-header i {
    color: #d4a017;
    font-size: 1.5rem;
}

.amenities-header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 15px;
    transition: transform 0.2s ease;
}

.amenity-item:hover {
    transform: translateY(-3px);
}

.amenity-item i {
    font-size: 1.8rem;
    color: #d4a017;
    background: #fdfaf5;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.amenity-item span {
    font-size: 0.95rem;
    font-weight: 500;
    color: #555;
    line-height: 1.3;
}





/* --- Színes Ikonok a Programhoz és a Kényelmi blokkhoz --- */

/* 1. Program kártyák ikonjai (élénk színek) */
.fa-door-open { color: #5dade2 !important; } /* Világoskék - Megérkezés */
.fa-sun { color: #f39c12 !important; }       /* Napsárga - Délelőtt */
.fa-moon { color: #5d6d7e !important; }      /* Szürkéskék - Este */
.fa-heart { color: #e74c3c !important; }     /* Piros - Útravaló/Szeretet */

/* 2. Kényelmi blokk (Amenities) ikonjai */
.fa-utensils { 
    color: #e67e22 !important; /* Narancs - Étel */
}
.fa-bed { 
    color: #3498db !important; /* Kék - Szállás */
}
.fa-user-graduate { 
    color: #a04000 !important; /* Barna/Bronz - Oktató */
}
.fa-leaf { 
    color: #27ae60 !important; /* Zöld - Környezet */
}
.fa-spa, .fa-hot-tub { 
    color: #1abc9c !important; /* Türkiz - Wellness */
}

/* --- Ikonok hátterének finomítása (hogy ne legyen túl sárga) --- */
.amenity-item i {
    background: #fdfdfd !important; 
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    /* Ezüstös-fehér háttér, hogy a színes ikonok "leugorjanak" róla */
}

/* Wellness kiemelés csíkja (maradjon arany, az elegáns) */
.lp-wellness-highlight {
    border-left: 5px solid #d4a017 !important;
    background: #ffffff !important;
}





.final-text-box {
    max-width: 700px;
    margin: 40px auto 80px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #444;
}

.urgency-text {
    color: #2c3e50;
    margin-top: 20px;
    font-size: 1.25rem;
}

/* Bizalmi ikonok a gomb alatt */
.final-trust-badges {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 0.95rem;
    color: #888;
}

.final-trust-badges i {
    color: #27ae60;
    margin-right: 5px;
}

/* Figyelemfelkeltő lüktetés a gombnak */
.pulse-animation {
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(212, 160, 23, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}





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









/* BENEFITS */
.lp-benefits {
  display: flex;
  flex-wrap: wrap;       /* Ha nem férnek el, törjenek több sorba */
  justify-content: center;
  gap: 10px 25px;        /* Első érték a sorok, második az oszlopok közti távolság */
  margin: 50px 0;
  
}

.lp-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px 6px 0;
  font-weight: 500;
}

.lp-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px 6px 0;
  font-weight: 500;
}

/* Ikon színek – tudatosan választva */
.icon-brain {
  color: #4caf50; /* zöld – egyensúly, idegrendszer */
}

.icon-energy {
  color: #ff9800; /* narancs – energia */
}

.icon-stress {
  color: #2196f3; /* kék – nyugalom */
}

.icon-sleep {
  color: #673ab7; /* lila – mély pihenés */
}

.icon-tools {
  color: #795548; /* barna – stabilitás, “gyakorlat” */
}
/* GRID */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;               /* 20px-ről 30px-re növelve a szellősebb hatásért */
  max-width: 1100px;       /* 1100px-ről 1200px-re növelve */
  margin: 60px auto 0;     /* A felső margót 60px-re növeltem, hogy elváljon a képtől/szövegtől */
  padding: 0 20px;         /* Biztonsági margó a széleken, hogy mobilon ne érjen ki a kijelző széléig */
}

.lp-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* IMAGE PLACE */


/* LIST */
.lp-list {
  list-style: none;
  padding: 0;
}

.lp-list li {
  margin: 10px 0;
}

/* PROGRAM */
.lp-program div {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

/* FAQ */
.lp-faq div {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

/* FINAL */
.final {
  background: #f9fafb;
}

.lp-eyebrow {
  display: block;
  text-align: center;
  color: #d4a017;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  margin-bottom: 15px;
}

/* képek */
.lp-image {
  height: 300px;
  background: #ddd;
  border-radius: 20px; /* Megnöveltem, hogy látványosabb legyen a kérésed alapján */
  margin: 60px auto 0;
  max-width: 900px;
  overflow: hidden;    /* Ez vágja le a kép sarkait a konténerhez igazítva */
  display: flex;       /* Flexbox a legegyszerűbb a belső igazításhoz */
  justify-content: center;
  align-items: center;
}

.lp-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Így a kép kitölti a 300px magasságot torzulás nélkül */
  display: block;
}


.lp-image.large {
  height: 400px;
}

.lp-image.small {
  height: 200px;
}

.hero-img {
  height: 350px;
}

.bg-white {
  background-color: #ffffff;
}

.bg-light {
  background-color: #f0f7fc;
}

.bg-soft {
  background-color: #eef3f6;
}

.bg-highlight {
  background: linear-gradient(180deg, #f9fbfb, #eef3f6);
}












/* Enyhe szürke háttér a videós résznek, hogy ne olvadjon össze a fehérrel */
.bg-light {
    background-color: #f8f9fa;
}






/* VIDEÓ SZEKCIÓ VÉGLEGES JAVÍTÁSA */
.video-wrapper {
    max-width: 850px;
    margin: 40px auto 0;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff; /* Így a sávok egységesen feketék maradnak */
}

.video-responsive {
    position: relative;
    width: 100%;
    /* A padding-bottom értékének növelésével lesz nagyobb az alsó sáv. 
       A 75% egy 4:3-as arányt ad, ami több helyet hagy alul a 16:9-es videónak. */
    padding-bottom: 70%; 
    height: 0;
}

.video-cta {
  margin-top: 50px;

  text-align: center;
}

.video-cta-text {
  font-size: 18px;
  margin-bottom: 40px;
  color: #333;
}


.video-cta .cta-button {
    margin-top: 40px;    /* Távolság a gomb feletti szöveg és a gomb között */
    display: inline-block; /* Hogy a margin-top biztosan működjön */
}


/* Font Awesome ikonok alapstílusa a kártyákon belül */
.lp-card .icon i {
    font-size: 2rem; /* Megfelelő, hangsúlyos méret */
    display: block;
    margin: 0 auto 20px; /* Középre helyezés és távolság */
    transition: transform 0.3s ease; /* Hover effekt animáció */
}

/* --- Színes ikonok osztályok alapján --- */

/* 🌬️ Tüdő és légzés tisztítása */
.fa-wind {
    color: #5dade2; /* Világosabb, "levegős" kék */
}

/* 🌿 Máj funkciók támogatása */
.fa-leaf {
    color: #52be80; /* Élénkebb, "fa elem" zöld */
}

/* 🔋 Mély őszi feltöltődés */
.fa-battery-full {
    color: #f4d03f; /* Meleg, "energia" sárga/arany */
}

/* 🛡️ Erősebb immunrendszer */
.fa-shield-alt {
    color: #e67e22; /* Figyelemfelkeltő, "védelem" narancs (őszi szín) */
}

/* ☑️ Kezdőknek is ajánlott */
.fa-check-circle {
    color: #27ae60; /* Megbízható, "jóváhagyás" sötétzöld */
}

/* Hover effekt: az ikon finoman megnő, de megtartja a színét */


.fa-battery-three-quarters {
    color: #e74c3c !important; /* Energikus sárga/arany szín */
}


.fa-sync-alt {
    color: #9b59b6 !important; /* Elegáns lila */
}



/* Ikonok színei (ex-inline styles) */
.icon-blue { color: #5dade2; }
.icon-yellow { color: #f4d03f; }
.icon-green { color: #52be80; }
.icon-red { color: #e74c3c; }
.icon-brown { color: #d4a373; }
.icon-purple { color: #a569bd; }
.icon-success { color: #27ae60; }
.icon-wellness-blue { color: #3498db; }

/* Alsó CTA blokk (ex-inline styles) */
.video-cta-footer {
  margin-top: -50px;
  text-align: center;
}

/* Ha a böngésző nem ismeri az aspect-ratio-t (régebbi mobilok) */
@supports not (aspect-ratio: 16 / 9) {
    .video-responsive {
        padding-bottom: 56.25%;
        height: 0;
    }
}

/* --- RESPONSIVE MEGOLDÁSOK (992px és 768px) --- */

/* 1. TABLET ÉS KISEBB LAPTOP (992px alatt) */
@media (max-width: 992px) {
    .lp-container, 
    .contact-form-section,
    .form-card {
        padding-left: 30px !important; /* Itt még kicsit nagyobb margó */
        padding-right: 30px !important;
        box-sizing: border-box;
    }

    .lp-grid {
        grid-template-columns: 1fr 1fr; /* 2 oszlopos elrendezés 992px alatt */
        gap: 25px;
    }
}

/* 2. MOBIL (768px alatt) */
@media (max-width: 768px) {
    /* Az oldal szélétől tartott biztos margó */
    .lp-container, 
    .contact-form-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Az űrlap kártya teljes szélességre vált */
    .form-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 25px 15px !important; /* Belül is legyen levegő */
        margin: 20px 0 !important;
        box-sizing: border-box;
    }

    /* A kártyák (problémák) egymás alá kerülnek */
    .lp-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Számlázási adatok mezői egymás alá */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Címek méretezése, hogy ne lógjanak ki */
    h1, h2 {
        font-size: 1.6rem !important;
        word-wrap: break-word; /* Ha túl hosszú lenne egy szó, eltöri */
    }

    /* Gombok mobilra optimalizálva */
    .cta-button, 
    .submit-btn {
        width: 100% !important;
        display: block;
        text-align: center;
    }



/* Megakadályozzuk, hogy a szám és a Ft szétváljon */
  .price-value {
    display: block !important; /* Vagy inline-block */
    white-space: nowrap !important; /* Ez a legfontosabb: tiltja a törést */
    font-size: clamp(2.2rem, 9vw, 2.8rem) !important; /* Dinamikusan csökkenő méret */
    font-weight: 800;
    color: #222;
    margin: 10px 0;
  }

  /* Opcionális: Ha külön span-ben van a Ft, vagy csak kicsinyíteni akarod az egység végét */
  /* Ha a HTML-ben csak simán oda van írva, hogy 89 000 Ft, akkor a fenti white-space: nowrap megoldja a gondot. */

  .normal-price span {
    font-size: 0.9rem !important;
    display: block;
    margin-top: 10px;
  }






}












/* --- MOBIL NÉZET ÉS MARGÓK (Tiszta lap) --- */

/* ============================================================
   VÉGLEGES MOBIL JAVÍTÁS (Csak 768px alatt)
   ============================================================ */

@media (max-width: 768px) {
    
    /* 1. Alapmárgók és tárolók - hogy ne érjen ki a szélére semmi */
    .lp-container, 
    .contact-form-section,
    section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Fejléc korrekció - ne takarja el a címet a fix menü */
    main, 
    .hero,
    section:first-of-type {
        margin-top: 0px !important; /* A menü magassága */
    }

    /* 3. Szekciók közötti felesleges fehér tér csökkentése */
    .lp-section, 
    section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* 4. JELENTKEZÉSI ŰRLAP MOBIL JAVÍTÁSA */
    /* Ez javítja a szétesett mezőket: image_99edcd.png */
    .form-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        margin: 0 auto !important;
        background: #ffffff !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100% !important;
        display: block !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        font-size: 16px !important; /* Megelőzi az automatikus zoomolást */
        box-sizing: border-box !important;
    }

    .form-row {
        display: block !important; /* Egymás alá kerül az irányítószám és város */
    }

    /* 5. ÁRAK ÉS KÁRTYÁK - Egymás alá rendezés */
    /* Ez javítja az egymásra csúszást: image_9bc367.png */
    .lp-grid, 
    .pricing-container, 
    .info-grid,
    .details-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .lp-card, 
    .price-card, 
    .info-card {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 6. KÉPEK - Szürke keret eltüntetése és margó */
    /* Javítja a szürke hátteret: image_9bafe3.png */
    .image-container, 
    .lp-image {
        background: transparent !important;
        padding: 0 !important;
        height: auto !important;
        margin-top: 10px !important;
    }

    .image-container img, 
    .lp-image img,
    .instructor-image img {
        width: 100% !important;
        border-radius: 15px !important;
        display: block !important;
    }

    /* 7. SZÖVEG ÉS CÍMEK */
    /* Csökkenti az üres tereket: image_9bb803.png */
    h1, h2 {
        font-size: 1.6rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    .lp-eyebrow {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .section-intro {
        margin-bottom: 20px !important;
    }

    /* 8. GOMBOK */
    .cta-button, 
    .submit-btn,
    .lp-button {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.final-trust-badges {
        display: grid !important;
        /* Három oszlopra osztjuk, hogy egymás mellett maradjanak, de egyenlő helyet kapjanak */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        margin-top: 20px !important;
    }

    .final-trust-badges span {
        display: flex !important;
        flex-direction: column !important; /* IKON FELÜL, SZÖVEG ALATTA */
        align-items: center !important;    /* Középre igazítja őket egymáshoz képest */
        text-align: center !important;
        font-size: 0.75rem !important;      /* Kicsit kisebb betű, hogy elférjen */
        line-height: 1.2 !important;
    }

    .final-trust-badges i {
        margin-right: 0 !important;        /* Nem kell oldalsó margó, ha alatta van a szöveg */
        margin-bottom: 8px !important;     /* De kell egy kis hely az ikon és szöveg közé */
        font-size: 1.2rem !important;
    }







    /* 1. Szekció és konténer szűkítése */
    .instructor-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* 2. Fejléc (Cím és idézet) tömörítése */
    .instructor-header {
        margin-bottom: 15px !important; /* Itt volt a nagy üres tér a kép felett */
        text-align: center;
    }

    .instructor-header h2 {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    .instructor-header .lead {
        margin-bottom: 0 !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    /* 3. Kép és tartalom közötti hézag eltüntetése */
    .instructor-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* Ez húzza össze a képet a szöveggel */
        margin-top: 15px !important;
    }

    .instructor-image {
        margin-bottom: 0 !important;
    }

    .instructor-image img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 10px;
    }

    /* 4. Szöveges rész finomítása */
    .instructor-content p {
        margin-bottom: 12px !important;
        font-size: 0.95rem !important;
    }

    /* 5. A lista (ikonok) tömörítése */
    .instructor-features {
        margin-top: 15px !important;
        padding-left: 0 !important;
        list-style: none !important;
    }

    .instructor-features li {
        margin-bottom: 8px !important;
        font-size: 0.9rem !important;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    /* 6. Alsó gomb rész (CTA) */
    .instructor-footer-cta {
        margin-top: 20px !important;
        padding-top: 15px !important;
        text-align: center;
        border-top: 1px solid #eee; /* Opcionális: egy finom elválasztó */
    }

    .instructor-footer-cta p {
        margin-bottom: 10px !important;
        font-weight: bold;
    }

    .instructor-footer-cta .cta-button {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

.cta-button, 
.lp-button, 
.submit-btn {
    margin-bottom: 35px !important; /* Itt tudod állítani a távolságot (35-40px az ideális) */
    margin-top: 10px !important;    /* A gomb feletti rész maradjon kicsi */
}
  
    
}