/*===============================================
Template Name: Adelux - Padel Club & Community Bootstrap Template
Author:  https://themeforest.net/user/fox_creation
Description: Adelux is modern and elegant HTML5 Bootstrap template for Padel Club & Community. You can also use this template for any kind of business and services related to padel club, sports club, court booking, padel academy, padel website, racket sports, athletic center, sports coaching, padel court, training club, sports events, fitness website, and all other Padel Club & Community websites. etc.
Version: 1.0.0
================================================*/

/* Table of Content */
/* 01. Import Vendor */
/* 02. Global Site Settings */
/* 03. Keyframes Animation */
/* 04. Base Settings */
/* 05. Base Section */
/* 06. Base Container */
/* 07. Button Styles */
/* 08. Card Styles */
/* 09. Color Styles */
/* 10. Image Styles */
/* 11. Banner Styles */
/* 12. Heading Style */
/* 13. Form Styles */
/* 14. Header Styles */
/* 15. Sidebar Styles */
/* 16. Breadcrumb Styles */
/* 17. Link Style */
/* 18. About Styles */
/* 19. Chooseus Styles */
/* 20. Icon Styles */
/* 21. Booking Style */
/* 22. Contact Cta Styles */
/* 23. Underline Styles */
/* 24. Swiper Styles */
/* 25. Custom List Styles */
/* 26. Service Styles */
/* 27. Academy Section */
/* 28. Tournament Styles */
/* 29. Partnership Styles */
/* 30. Community Styles */
/* 31. Membership CTA Styles */
/* 31. Team Styles */
/* 32. Testimonial Styles */
/* 34. FAQ Styles */
/* 35. Pricing Styles */
/* 36. Blog Styles */
/* 37. Maps Style */
/* 38. Video Button Styles */
/* 39. Video Modal Styles */
/* 40. Animate Styles */
/* 41. 404 Style */
/* 42. Custom Spacing */
/* 43. Footer Styles */

/* 01. Import Vendor */
@import url('../webfonts/font-family-montserrat.css');
@import url('../webfonts/font-family-lato.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/flatpickr.min.css');
@import url('../css/vendor/swiper-bundle.min.css');
@import url('../css/vendor/animate.min.css');

/* 02. Global Site Settings */

:root{
    /* ============================================================
       DEUCE green identity (2026-09)
         warm paper  #F7F5F0  — lap hattere
         court green #1C4A34  — sotet szekcio
         ink         #0E1F17  — szoveg / cimek
         clay        #C4633F  — akcentus, kiemelt kartya
         tennis-ball #D8F26A  — CTA gombok
       A regi --accent-color-* nevek megmaradtak (a sablon sok
       helyen hivatkozik rajuk), csak az ertekuk valtozott.
       ============================================================ */
    --paper: #FFFFFF;
    --court-green: #1C4A34;
    --ink: #0E1F17;
    --clay: #C4633F;
    --clay-dark: #A94F2E;
    --clay-soft: #F2E2DA;
    --clay-soft-2: #E8D3C8;
    --ball: #D8F26A;
    --ball-dark: #C2DC55;

    --primary: #0E1F17;
    --secondary: #FFFFFF;
    --text-color: #5F5B56;
    --accent-color: #0E1F17;
    --accent-color-2: #D8F26A;
    --accent-color-3: #EFE7DD;
    --accent-color-4: #F7F5F0;
    --accent-color-5: #E3DCD3;
    --accent-color-6: #E4F79C;
    --accent-color-7: #C9C2B8;
    --accent-color-8: #B9AFA4;
    --accent-color-9: #8C8C8C14;
    --accent-transparent-white: #FFFFFF00;
    --accent-transparent-white-2: #FFFFFF14;
    --accent-transparent-black: #0000005C;
    --accent-transparent-black-2: #00000087;
    --font-family-1: "Montserrat", sans-serif;
    --font-family-2: "Lato", sans-serif;
    --animation-normal: 1.25s;
    --animation-slow: 2.25s;
    --animation-fast: 0.75s;

--navbar-height: 95px;

}

/* 03. Keyframes Animation */

/* ================================================================
   Mobil "kizoomolas" elleni vedelem.

   Tunet: telefonon gorgetes kozben az oldal hirtelen kisebbre
   zsugorodik, mintha kizoomolt volna. Ok: a beuszo animaciok
   (animate__fadeInLeft / fadeInRight) vizszintesen 100%-kal
   eltoljak az elemet, amig az animacio tart. Ilyenkor az elem
   kilog a kepernyo jobb szelen, a lap szelesebb lesz a
   viewportnal, es a Safari automatikusan kicsinyit, hogy
   kiferjen. (Az iOS a user-scalable=no-t figyelmen kivul hagyja,
   ezert a zoom tiltasa nem megoldas — a tullogast kell megszuntetni.)

   A megoldas a beuszas iranyanak cserele erintos eszkozon: igy
   eleve nem keletkezik vizszintes tullogas.

   FONTOS: a html/body szintjen NEM szabad overflow-x-et allitani.
   Attol a html/body gorgeto-kontenerre valt, es az oldal kozepen
   levo gorgetesre jatszo szekcio (.scroll-scrub-sticky,
   position: sticky) elveszti a viszonyitasi pontjat — elcsuszik.
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
    /* Az eredeti vedovonal: erintos eszkozon a body nem gorgethetp
       oldalra. (Csak a body-n, csak erintosre — a sticky igy jo.) */
    body {
        overflow-x: hidden;
    }

    /* A vizszintes beuszo animaciok helyett halvany felfele uszas.
       Ugyanaz a hatas, de sosem log ki oldalra. */
    .animate__animated.animate__fadeInLeft,
    .animate__animated.animate__fadeInRight {
        animation-name: deuceFadeInUp;
    }
}

@keyframes deuceFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Aki keri a csokkentett mozgast, annal egyaltalan nincs beuszas. */
@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        animation: none !important;
    }
    .animate-box {
        opacity: 1 !important;
    }
}

@property --progress {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@keyframes load {
    to {
        --progress: var(var(--value))
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

 .row {
  align-items: stretch; /* minden col azonos magasságot kap */
}

.row > .col {
  display: flex; /* a col maga is flex konténer lesz */
}

.row > .col > .card {
  flex: 1;       /* a card kitölti a col teljes magasságát */
}
/* ====================================================
   Naptar-sav: a ket Minup-kartya MINDIG egyforma magas,
   minden kepernyomereten. Korabban a ket iframe kulon
   min-height-et kapott (500 es 700 px), ezert desktopon
   kulonbozo maretuek voltak.
   ==================================================== */
.naptarIframe,
.naptarIframe2 {
    width: 100%;
    height: 700px;
    border-radius: 15px;
    border: 1px solid var(--accent-color-5);
}

/* A KET MINUP-NAPTAR kizarolag asztali nezetben latszik (992px-tol),
   ahol egymas mellett elfernek. 991px alatt hasznalhatatlanul keskeny
   lenne mindketto, ezert csak oket rejtjuk — a "We provide more than
   just sessions" agyag panel ugyanebben a szekcioban van, az VEGIG
   lathato marad. */
@media (max-width: 991px) {
    .naptarSection .booking-container {
        display: none !important;
    }
}

@media (max-width: 1025px) {
    .naptarIframe,
    .naptarIframe2 {
        height: 620px;
    }
    .naptarSection {
        padding-top: 20px !important;
    }
}
            .card-booking-form {
  position: relative;
}


/* Alap overlay (szürke réteg) */
.iframe-overlay {
    border: 1px solid var(--accent-color-5);
    border-radius:15px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;              /* alapból rejtve desktopon */
  pointer-events: auto;    /* blokkolja az iframe-et */
  transition: opacity 0.3s;
}

/* Hover desktopon */
.card-booking-form:hover .iframe-overlay {
  opacity: 1;
}

/* Mobilon mindig látszik */
@media (hover: none) and (pointer: coarse) {
  .iframe-overlay {
      backdrop-filter: blur(1px);
    opacity: 1;
  }
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: var(--font-family-2);
    color: var(--primary);
    background-color: var(--paper);
    font-size: 16px;
}

h1{
    font-size: 90px;
    font-weight: 700;
    line-height: 1.1em;
}

h2{
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2em;
}

h3{
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3em;
}

h4{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3em;
}

h5{
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
}

h6{
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'ruiga', var(--font-family-1);
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

p{
    color: var(--text-color);
    font-family: var(--font-family-2);
    font-size: 18px;
    margin-bottom: 20px;
}

button, a, .btn-title{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none;
}

ul{
    list-style: none;
}

/* 05. Base Section */

.section{
    padding: 120px 20px 120px 20px;
}

.section-banner-inner{
    padding: 230px 20px 120px 20px;
    border-radius: 30px 30px 30px 30px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.section-banner-inner::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.section-wrapper{
    padding: 30px 30px 30px 30px;
}

.section-community{
    background-color: var(--accent-color-4);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

.section-chooseus{
    background-color: var(--accent-color-4);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

.section-academy{
    background-color: var(--clay);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

.section-pricing{
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
}

/* 06. Base Container */

.hero-container{
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
}

/* 07. Button Styles */

/* DEUCE gomb: pirula, tennis-ball zold, fekete felkover felirat,
   finom sotet also el ("domboru" hatas). Nyil-karika nincs rajta. */
.btn{
    max-width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    padding: 0;
    border: 1px solid rgba(14, 31, 23, 0.16);
    transition: background-color 300ms ease, border-color 300ms ease;
    cursor: pointer;
}

.btn-accent{
    background-color: var(--ball);
}

.btn-accent:hover{
    background-color: var(--ball-dark);
}

/* Halvany agyag valtozat — a nem kiemelt kartyak CTA-ja */
.btn-clay-soft{
    background-color: var(--clay-soft);
    border-color: rgba(196, 99, 63, 0.22);
}

.btn-clay-soft:hover{
    background-color: var(--clay-soft-2);
}

.btn-clay-soft .btn-title{
    color: var(--clay);
}

.btn-title{
    padding: 16px 30px;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.banner-reviewer-container{
    display: block;
}

.testimonial-btn-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.testimonial-btn-container i{
    font-size: 21px;
    color: var(--accent-color);
}

.testimonial-btn {
    z-index: 70;
    pointer-events: auto;
    background: transparent;
    border: 0;
}

/* 08. Card Styles */

.card{
    border: none;
    border-radius: 20px 20px 20px 20px;
}

.card-banner-reviewer{
    background-color: var(--accent-transparent-white-2);
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: center;
    text-align: center;
    gap: 10px 10px;
    border-radius: 20px 20px 20px 20px;
    padding: 10px 10px 10px 10px;
    order: 2;
    position: relative;
    z-index: 1;
}

.card-banner-reviewer::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-banner-reviewer .banner-reviewer-container{
    background-color: var(--accent-color-6);
    border-radius: 135px 135px 135px 135px;
}

.card-banner-reviewer .banner-avatar{
    width: 40px;
    min-height: 40px;
    border: 5px solid var(--accent-color-6);
    border-radius: 1000px 1000px 1000px 1000px;
}

.card.banner-home-community{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    background-color: var(--accent-transparent-white-2);
    padding: 8px 20px 8px 8px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    height: auto;
    align-self: flex-start;
    max-height: none;
}

.card.banner-home-community::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-about-detail{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    width: 81%;
    height: auto;
    bottom: 0;
    left: 0;
    padding: 40px 40px 40px 40px;
    border-radius: 0px 20px 0px 20px;
    background-color: var(--accent-color-2);
}

.card-about-misson{
    display: flex;
    flex-direction: column;
    background-color: var(--accent-color-3);
}

.card-about-misson.card-about-mission--membership{
    background-color: var(--accent-color);
}

.col:nth-child(even) .card-about-misson {
    margin-bottom: -25px;
    transition: transform 0.3s;
}

.col:nth-child(even) .card-about-misson:hover {
    transform: translateY(-25px);
}

.card-about-mission--courth .card-content p,
.card-about-mission--tournament .card-content p{
    max-width: 100%;
}

.card-about-mission--academy .card-content p {
    max-width: 89%;
  }

.card-about-mission--membership .card-content p {
    max-width: 81%;
}

.card-about-misson .image-container{
    width: 100%;
    padding: 10px 10px 10px 10px;
}

.card-about-misson .image-container img{
    width: 100%;
    height: 150px;
}

.card-about-misson .card-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    padding: 20px 30px 30px 30px;
}

.card-about-misson .card-content p{
    margin-bottom: 0px;
}

/* DEUCE session-kartya: feher lap, felul lekerekitett kep,
   cim + leiras, alul hajszalvonal folott ar es "Details" pirula. */
.card-service{
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    background-color: var(--secondary);
    border: 1px solid var(--accent-color-5);
    border-radius: 22px;
    padding: 14px 14px 22px;
    box-shadow: 0 1px 2px rgba(14, 31, 23, 0.04);
    transition: transform 280ms ease, box-shadow 280ms ease,
                border-color 280ms ease;
    overflow: hidden;
    z-index: 1;
}

.card-service:hover{
    transform: translateY(-4px);
    border-color: var(--clay-soft-2);
    box-shadow: 0 14px 34px rgba(14, 31, 23, 0.10);
}

.service-media{
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.service-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 8px;
}

/* Szint-cimke a session-kartyan (Kezdo / Kozephalado-halado /
   Privat) — ugyanaz a nyelv, mint a berlet-kartyakon. */
.service-level{
    font-family: var(--font-family-1);
    font-size: 12px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--clay);
    margin-bottom: -2px;
}

.service-name{
    font-size: 26px;
    line-height: 1.15;
    color: var(--ink);
}

.service-desc{
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 0;
}

.service-foot{
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 8px 0;
    border-top: 1px solid var(--accent-color-5);
}

.service-price{
    font-family: 'ruiga', var(--font-family-1);
    font-size: 21px;
    font-weight: 700;
    color: var(--clay);
    white-space: nowrap;
}

.service-cta .btn-title{
    padding: 12px 24px;
    font-size: 15px;
}

/* "Reserve Your Court in Seconds" lepeskartya: vilagos agyag lap,
   apro agyagszinu sorszam, alatta cim es rovid leiras. */
.card-process{
    background-color: var(--clay-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 30px 34px;
    border-radius: 22px;
    transition: background-color 280ms ease, transform 280ms ease;
}

.card-process:hover{
    background-color: var(--clay-soft-2);
    transform: translateY(-4px);
}

.card-process .icon{
    width: auto;
    min-height: 0;
    display: block;
    border-radius: 0;
    background-color: transparent;
}

.card-process .icon h4{
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--clay);
    opacity: 0.75;
}

.card-process h4{
    font-size: 24px;
    line-height: 1.15;
    color: var(--ink);
}

.card-process p{
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 0;
}

.card-chooseus{
    align-self: center;
    align-items: center;
    text-align: center;
    background-color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-radius: 20px 20px 20px 20px;
    padding: 40px 40px 40px 40px;
    width: 100%;
    height: 100%;
}

.card-booking-cta{
    width: 45%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 40px 40px 40px;
    background-color: var(--accent-color);
}

.card-contact-cta{
    background-color: var(--accent-color-2);
    padding: 100px 100px;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 2;
}

.card-contact-cta::before{
    content: '';
    position: absolute;
    background-image: url('../images/Gp-5-e1750061403635.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.card-contact-cta.cta-small-banner{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-contact-cta.cta-small-banner::before{
    content: '';
    position: absolute;
    background-image: none;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.card-contact-cta.cta-small-banner a{
    color: var(--primary);
}

.card-contact-cta.cta-small-banner .cta-image{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 47%;
    z-index: -1;
}

.card-contact-cta.cta-small-banner .cta-image-container{
    margin: 0px -75px -60px 0px;
}

.card-contact-cta.cta-small-banner .cta-image-container img{
    max-width: 100%;
    height: auto;
}

.card-contact-cta.cta-small-banner .cta-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px 10px;
    color: var(--accent-color);
}

/* ============================================================
   Berlet-kartya. Alapbol mind a harom egyforma feher lap;
   amelyiken az eger van, az valt agyagszinu kiemelt allapotba
   (a CTA is zoldre). Erintokepernyon nincs hover — ott mind a
   harom egyforma marad.
   ============================================================ */
.card-pricing{
    display: flex;
    flex-direction: column;
    gap: 18px;
    background-color: var(--secondary);
    border: 1px solid var(--accent-color-5);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: background-color 320ms ease, border-color 320ms ease,
                transform 320ms ease, box-shadow 320ms ease;
}

.card-pricing:hover{
    background-color: var(--clay);
    border-color: var(--clay);
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(196, 99, 63, 0.28);
}

/* Szint-cimke a berlet neve felett (Kezdo / Kozephalado-halado /
   Privat edzes). Kiemelt (hoverelt) kartyan zoldre valt. */
.card-pricing .pricing-level{
    font-family: var(--font-family-1);
    font-size: 12px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--clay);
    margin-bottom: -8px;
    transition: color 320ms ease;
}

.card-pricing:hover .pricing-level{
    color: var(--ball);
}

.card-pricing .pricing-name{
    font-size: 24px;
    line-height: 1.2;
    color: var(--ink);
    transition: color 320ms ease;
}

.card-pricing .price{
    font-family: 'ruiga', var(--font-family-1);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    transition: color 320ms ease;
}

.card-pricing .price-currency{
    font-family: var(--font-family-1);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    transition: color 320ms ease;
}

.card-pricing .pricing-desc{
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 0;
    transition: color 320ms ease;
}

/* Kiemelt (hoverelt) allapot szinei */
.card-pricing:hover .pricing-name,
.card-pricing:hover .price,
.card-pricing:hover .price-currency,
.card-pricing:hover .pricing-desc,
.card-pricing:hover .pricing-benefit-list li{
    color: var(--secondary);
}

.card-pricing:hover .pricing-benefit-list li::before{
    color: var(--ball);
}

.card-pricing:hover .pricing-cta{
    background-color: var(--ball);
    border-color: rgba(14, 31, 23, 0.16);
}

.card-pricing:hover .pricing-cta .btn-title{
    color: var(--ink);
}

.card-pricing .pricing-cta{
    margin-top: auto;
    width: 100%;
}

.card-pricing .pricing-cta .btn-title{
    padding: 15px 24px;
    width: 100%;
    text-align: center;
}

.card-pricing .pricing-details{
    color: var(--secondary);
    display: flex;
    align-items: end;
}

.card-benefit{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    background-color: var(--accent-color-4);
    align-items: start;
    padding: 30px 30px 30px 30px;
}

.card-benefit .benefit-number{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    background-color: var(--accent-color-2);
    border-radius: 1000px 1000px 1000px 1000px;
    width: 70px;
    min-height: 70px;
}

.card-benefit .benefit-number h4{
    margin-bottom: 0;
}

.card-tournament{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 326px;
    height: 100%;
    padding: 10px 10px 10px 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-tournament::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color);
    opacity: 0.1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.card-tournament.main-event{
    background-image: url('../images/event-1.jpg');
    min-height: 724px;
}

.card-tournament.junior-padel-championship{
    background-image: url('../images/event-3.jpg');
}

.card-tournament.comunity-padel-night{
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: var(--accent-color-2);
}

.card-tournament.comunity-padel-night::before{
    position: absolute;
    inset: 0;
    background-image: url('../images/Gp-4.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.card-tournament.comunity-padel-night .tournament-tag{
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.card-tournament.comunity-padel-night .highlight-image{
    position: absolute;
    right: 0;
    top: 0;
    width: 57%;
    height: 100%;
    z-index: 1;
    margin: -20px -25px 0px 0px;
}

.card-tournament.tournament-cta{
    background-color: var(--accent-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card-tournament-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    border-radius: 17px 17px 17px 17px;
    padding: 30px 30px 30px 30px;
    background-color: var(--accent-transparent-white-2);
    color: var(--secondary);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.card-tournament-content::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-membership-cta.cta-content{
    background-color: var(--accent-color-2);
    display: flex;
    flex-direction: column;
    gap: 30px 30px;
    padding: 40px 40px 40px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-membership-cta.cta-content::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.6;
    background-image: url('../images/Gp-5-e1750061403635.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.card-membership-cta.cta-benefit{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 100%;
}

.card-team{
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.card-team-wrapper{
    display: flex;
    flex-direction: column;
    padding: 10px 10px 10px 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.card-team-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 17px 17px 17px 17px;
    padding: 20px 20px 20px 20px;
    background-color: var(--accent-transparent-white-2);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.card-team-content::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-testimonial{
    width: 55%;
    align-self: center;
    background-color: var(--accent-color-9);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-testimonial::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-blog{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.card-blog.card-blog-post .image-container img{
    border-radius: 20px 20px 0px 0px;
    transition: all 300ms;
}

.card-blog.card-blog-post:hover .image-container img{
    transform: rotate(2deg) scale(1.1);
    opacity: 0.8;
}

.card-blog.card-blog-post .blog-title{
    opacity: 1;
    transition: all 300ms;
}

.card-blog.card-blog-post:hover .blog-title{
    opacity: 0.8;
}

.card-blog-category{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
}

.card-blog-recent{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
}

.card-blog-tag{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
}

.card-booking-form{
    width: 60%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 30px;
    background-color: var(--accent-color);
    padding: 40px 40px 40px 40px;
}

.card-contact-form{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 30px;
    background-color: var(--accent-color);
    padding: 40px 40px 40px 40px;
}

/* 09. Color Styles */

.bg-accent-color{
    background-color: var(--accent-color);
}

.bg-accent-color-2{
    background-color: var(--accent-color-2);
}

.bg-accent-color-4{
    background-color: var(--accent-color-4);
}

.bg-accent-color-6{
    fill: var(--accent-color-6);
    transition: all 600ms;
    background-color: var(--accent-color-6);
}

.primary-accent{
    color: var(--primary);
}

.secondary-accent{
    color: var(--secondary) !important;
}

.accent-color{
    color: var(--accent-color);
}

.accent-color-2{
    color: var(--accent-color-2);
}

.accent-color-8{
    color: var(--accent-color-8);
}

/* 10. Image Styles */

.image-container{
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.image-container img:not(.banner-avatar) {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
}  

.home-community-img{
    width: 42%;
}

.home-community-img img{
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: center center;
    border-radius: 17px 17px 17px 17px;
}

.about-img img{
    width: 100%;
    height: 750px;
}

.chooseus-img{
    width: 100%;
    margin: 0 !important;
    height: 309px !important;
    filter: brightness(70%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
}

.service-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 500ms ease;
}

.card-service:hover .service-img{
    transform: scale(1.06);
}

.community-images{
    height: 700px !important;
}

.cta-benefit-img{
    max-width: 100% !important;
    width: 100% !important;
    height: 260px !important;
    filter: brightness(80%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
    border-radius: 17px 17px 17px 17px !important;
    object-fit: cover;
    object-position: center center;
}

.partner-img{
    max-width: 75%;
}

.benefit-img{
    width: 100%;
    height: 437px !important;
    filter: brightness(70%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
}

/* Coach cards — responsive sizing
   • >= 768px: side-by-side cards with equal heights — Bootstrap's
     own align-items:stretch already does that AS LONG AS each card
     has a definite height. We give .team-img a 4/5 aspect-ratio
     (height computed from its width) so the height is intrinsic.
   • < 768px: drop the aspect lock so the frame adopts the image's
     NATURAL ratio (no crop). Stacked layout reads better that way.
   No flex acrobatics on the wrapping <a> — keeping it as a plain
   block link avoids the empty/collapsed-layout failure mode. */
.team-card-container .col > a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.team-card-container .card-team {
    width: 100%;
}
.team-card-container .team-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.team-card-container .team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: scale(1);
    transition: transform 300ms ease;
    border-radius: 20px;
}
.team-card-container .team-img:hover img {
    transform: scale(1.06);
}

/* Mobile (< 768px) — single column, image at natural aspect */
@media (max-width: 767px) {
    .team-card-container .team-img {
        aspect-ratio: auto;
    }
    .team-card-container .team-img img {
        height: auto;
    }
}

.contact-cta-image{
    width: 38%;
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border-radius: 0px 0px 20px 0px;
    z-index: 1;
}

.contact-cta-image .image-wrapper{
    margin: 0px -63px -65px 0px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.contact-cta-image img{
    max-width: 100%;
    width: 82%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-bottom: 0;
}

.blog-image {
    position: relative;
}

.blog-image img {
    min-height: 450px;
    object-fit: cover;
    object-position: center;
    border-radius: 17px 17px 17px 17px;
}

.blog-image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--accent-transparent-black);
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.blog-image:hover::after{
    background-color: var(--accent-transparent-black-2);
}

.recent-post-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 20px 20px 20px 20px;
    justify-content: center;
}

.recent-post-image img {
    width: 100px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 11. Banner Styles */

.banner-home-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 250px 20px 60px 20px;
    border-radius: 30px 30px 30px 30px;
}

.banner-home-top{
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    justify-content: space-between;
}

.banner-home-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 100px 100px;
}

.banner-home-community-container{
    display: flex;
    flex-direction: column;
    width: 45%;
    height: auto;
}

.home-community-content{
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-community-highlight{
    color: var(--accent-color-2);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3em;
}

.banner-home-cta-container{
    width: 42%;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.banner-home-cta{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slideshow-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background-color: var(--accent-color);
}

.slideshow-container .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease-in-out, transform 5s ease-in-out;
    will-change: opacity, transform;
}

.slideshow-container .slide::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    opacity: 0.3;
    z-index: -1;
}

.slideshow-container .slide.active {
    opacity: 1;
    transform: scale(1.1);
    z-index: 2;
}

.slideshow-container .slide.preparing {
    opacity: 0;
    transform: scale(1);
    z-index: 0;
}


.banner-content-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px 0px;
    align-items: stretch;
}


.banner-home-reviewer-container{
    display: flex;
    flex-direction: row;
    gap: 30px 30px;
    justify-content: end;
    align-items: flex-end;
    align-self: stretch;
    width: 100%;
}

.banner-avatar {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    min-height: 50px;
    border-radius: 1000px 1000px 1000px 1000px;
    object-fit: cover;
    border: 2px solid var(--secondary);
}
.banner-avatar:not(:nth-child(1)){
    margin-left: -15px;
}

.banner-avatar-plus{
    background-color: var(--accent-color-2);
}

.banner-avatar-plus img{
    width: 80%;
}

.reviewer-card-description{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--accent-color-4);
}

.banner-home-title{
    width: 54%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-home-network{
    width: 47%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: center;
}

.banner-home-social{
    align-self: center;
    width: 100%;
    display: flex;
    gap: 10px 10px;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    order: 1;
}

.banner-home-social .social-container{
    position: relative;
    background-color: var(--accent-transparent-white-2);
    padding: 2px 14px 2px 14px;
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    z-index: 1;
    width: max-content;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
}

.banner-home-social .social-container i{
    color: var(--accent-color-2);
}

.banner-home-social .social-link-banner{
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    transition: all 0.3s;
}

.banner-home-social .social-link-banner:hover{
    color: var(--accent-color-2);
}

.testimonial-banner{
    background-image: url('../images/dummy-img-1920x900.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.banner-inner-about{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-booking{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-event{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-membership{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-service{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-coaching{
    background-image: url('../images/dummy-img-1920x900.jpg');
    background-position: bottom center;
}

.banner-inner-community{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-faq{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-blog{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-single-post{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-contact{
    background-image: url('../images/dummy-img-1920x900.jpg');
}

.banner-inner-404{
    background-image: url('../images/slide-1.jpg');
}

/* 12. Heading Style */

/* Szekcio-felirat ("MEMBERSHIP PACKAGE", "GET ANSWERS"): kicsi,
   csupa nagybetu, ritkitott, agyagszinu. Pirula-hatter es a zold
   pottyikon nelkul — a kepeken sincs rajta. */
.sub-heading{
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: var(--clay);
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.sub-heading > i.fa-circle{
    display: none;
}

.sub-heading-banner{
    background-color: transparent;
    color: var(--ball);
}

/* Sotet (court green) hatteren a felirat zold, nem agyagszinu. */
.section-academy .sub-heading{
    color: var(--ball);
}

.sub-heading-title{
    font-family: var(--font-family-1);
    font-size: 14px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.heading-section-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    max-width: 65%;
    text-align: center;
    align-self: center;
}

/* A berlet-szekcio cime balra igazitva all (6. kep), nem kozepen. */
.heading-section-container.pricing-heading{
    max-width: none;
    align-items: flex-start;
    align-self: flex-start;
    text-align: left;
    gap: 14px;
}

.heading-section-container.pricing-heading h2{
    max-width: 18ch;
}

.blog-title-container{
    padding-bottom: 30px;
    border-bottom: 3px solid var(--accent-color-2);
}

/* 13. Form Styles */

.form{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.form label{
    font-family: var(--font-family-2);
    font-size: 16px;
    color: var(--accent-color-2);
}

.form input,
.form textarea{
    font-family: var(--font-family-2);
    font-size: 16px;
    line-height: 1.3em;
    padding: 17px 17px 17px 17px;
    border-radius: 10px 10px 10px 10px;
    background-color: var(--primary);
    color: var(--secondary);
    box-shadow: none;
    border: none;
    outline: none;
}

.form input::placeholder,
.form textarea::placeholder{
    color: var(--text-color);
}

.form input#newsletter{
    border-radius: 100px 100px 100px 100px;
}

.dropdown-container {
    position: relative;
    width: 100%;
}

.dropdown-select {
    background-color: var(--primary);
    border: none;
    border-radius: 10px 10px 10px 10px;
    color: var(--secondary);
    outline: none;
    padding: 17px 17px 17px 17px;
    font-size: 16px;
    line-height: 1.3em;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px 20px;
    z-index: 2;
}

.dropdown-select i{
    color: var(--accent-color);
}

.dropdown-select:focus{
    border: solid 1px var(--accent-color);
}

.dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    z-index: 10;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-container.active .dropdown-list {
    display: block;
  }

.dropdown-option {
    background-color: var(--primary);
    padding: 15px 15px 15px 15px;
    border-color: var(--secondary);
    color: var(--secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
}

.dropdown-option:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.dropdown-option:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}


.dropdown-option:hover {
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.dropdown-option.selected {
    color: var(--accent-color-2);
    font-weight: 600;
}

.selected-text {
    color: var(--text-color);
    transition: color 0.2s ease;
}

.selected-text.has-value {
    color: var(--secondary);
}

.alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
  }

.success {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--secondary);
    color: var(--primary);
}

.success span,
.success p{
    color: var(--primary);
}
  
.error {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--secondary);
    color: var(--primary);
}

.error span,
.error p{
    color: var(--primary);
}
  
.check-icon,
.cross-icon {
    font-size: 1.5rem;
    margin-right: 10px;
}

.hidden{
    display: none;
}

/* 14. Header Styles */

.navbar-container {
    padding: 60px 60px 0px 60px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    z-index: 3;
}

.navbar{
    background-color: rgba(216, 242, 106, 1);
    border-radius: 20px 20px 20px 20px;
    position: relative;
    padding: 0px;
    z-index: 1;
}

.navbar::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.navbar-nav-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 20px 15px 20px;
}

.navbar .logo-container{
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar .logo-container img{
    width: 100%;
}

.navbar .nav-link-container{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: right;
}

.nav-link{
    font-family: var(--font-family-1);
    font-size: 20px;
    font-weight: 700;
    line-height: 1em;
    color: black;
    padding: 0px 20px 0px 20px !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.navbar-nav .nav-link.show{
    color: var(--clay) !important;
}

.dropdown-menu {
    background-color: var(--secondary);
    border-radius: 0;
    border: none;
    padding: 0;
    overflow: hidden;
    margin-top: 1.125em !important;
    border-radius: 0px 0px 20px 20px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
}

.dropdown-item{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    color: var(--accent-color);
    transition: all 300ms;
    padding: 15px 15px 15px 15px;
}

.dropdown-item:hover,
.dropdown-item.active{
    background-color: var(--secondary);
    color: var(--text-color);
}

.dropdown-toggle::after {
    display: none !important;
}

.navbar-cta-container{
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.nav-btn{
    display: none;
    padding: 8px 16px;
    background-color: var(--accent-color-2);
    color: var(--accent-color);
    box-shadow: none;
    transition: all 300ms ease;
    border: none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: none;
    font-size: 18px;
}

.nav-btn:hover{
    background-color: var(--accent-color-6);
}

/* 15. Sidebar Styles */

.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--accent-transparent-black-2);
    transition: left 0.4s ease-in-out;
    z-index: 10;
}

.sidebar-overlay.active{
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--secondary);
    color: var(--accent-color);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
}

.sidebar.active{
    transform: translateX(300px);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.sidebar-header .logo {
    width: 75%;
}

.close-btn {
    display: inline-block;
    justify-content: center;
    background-color: var(--accent-color-2);
    border-radius: 8px 8px 8px 8px;
    color: var(--accent-color);
    font-weight: 600;
    position: relative;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 18px;
    transition: all 300ms;
    border: none;
    outline: none;
}

.close-btn:hover{
    background-color: var(--accent-color-6);
    color: var(--accent-color);
}

.menu {
    list-style: none;
    padding: 0;
    margin-top: 0px;
}

.menu li {
    padding: 10px 15px 10px 15px;
}

.menu div {
    color: var(--accent-color);
    text-decoration: none;
    display: block;
    border-radius: 5px;
    transition: 0.3s;
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: 0px;
}

.menu div:hover,
.menu div.active,
.menu div.focus {
    color: var(--accent-color-2);
}

.sidebar-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-dropdown-btn {
    background: none;
    border: 1px solid var(--accent-color-2);
    color: var(--accent-color-2);
    font-size: 1rem;
    cursor: pointer;
    padding: 3px 15px;
    border-radius: 24px;
    transition: transform 0.3s ease;

}
.sidebar-dropdown-btn:hover {
    color: var(--accent-color-6);
    border: 1px solid var(--accent-color-6)
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

/* 16. Breadcrumb Styles */

.breadcrumb{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-item{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--accent-color-2);
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-icon{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--secondary);
}

.breadcrumb-item.recent{
    color: var(--secondary);
}

/* 17. Link Style */

.link-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--accent-color);
}

/* 18. About Styles */

.about-wrapper {
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    align-items: center;
  }

.about-image-container{
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 40%;
    overflow: hidden;
}

.about-content-description{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    width: 55%;
    justify-content: center;
}

.about-description-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 90%;
    align-self: flex-end;
    padding: 0px 0px 0px 30px;
    border: none;
    border-left: 2px solid var(--accent-color-2);
    overflow: hidden;
}

.about-description-container p{
    margin-bottom: 20px;
}

.about-highlight-box{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    border-top: 2px solid var(--accent-color-2);
    padding: 10px 0px 0px 0px;
}

.about-highlight-text{
    font-family: var(--font-family-1);
    font-size: 42px;
    font-weight: 700;
    line-height: 1em;
    color: var(--primary);
}

.welcome-about-wrapper{
    display: grid;
    grid-template-columns: 0.42fr 0.52fr;
    gap: 100px;
    justify-content: space-between;
}

/* 19. Chooseus Styles */

.chooseus-title-container{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.chooseus-card-container{
    width: 60%;
    display: flex;
    flex-direction: column;
}

.whychooseus-avatar-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0px 0px 20px 20px;
}

.chooseus-img-description{
    font-size: 16px;
    color: var(--accent-color-4);
}

/* 20. Icon Styles */

.icon-circle {
    position: relative;
    background-color: var(--accent-color);
    font-size: 24px;
    border: 1px solid var(--accent-color-2);
    color: var(--accent-color-2);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 300ms ease-in-out;
    transform: rotateZ(-45deg);
}

.icon-circle:hover{
    transform: rotateZ(0deg);
}

.circle-check-list {
    list-style: none;
    padding-left: 0;
}

.circle-check-list li {
    position: relative;
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3em;
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.circle-check-list li:last-child{
    margin-bottom: 0px;
}

.circle-check-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 1.125rem;
    display: inline-block;
}

.chooseus-icon{
    align-self: center;
    background-color: var(--accent-color-2);
    width: 80px;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    border-radius: 17px 17px 17px 17px;
}

.service-icon{
    align-self: center;
    background-color: var(--accent-color-2);
    width: 60px;
    display: flex;
    flex-direction: column;
    min-height: 60px;
    border-radius: 17px 17px 17px 17px;
}

.service-icon-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 0px 0px 20px;
    z-index: 1;
}

.booking-cta-icon{
    align-self: center;
    background-color: var(--accent-color-2);
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border-radius: 17px 17px 17px 17px;
}

.booking-cta-icon i{
    font-size: 32px;
}

.social-icon{
    border-radius: 9px 9px 9px 9px;
    font-size: 14px;
    padding: 0.5em;
    background-color: var(--accent-color-2);
    color: var(--accent-color);
    transition: all 300ms;
}
.social-icon:hover{
    transform: translateY(-8px);
    background-color: var(--accent-color-6);
}

.contact-icon{
    width: 50px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px 15px 15px 15px;
    background-color: var(--accent-color-2);
}

.contact-icon.footer-icon{
    border-radius: 50%;
}

/* 21. Booking Style */

.booking-content-wrapper{
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    align-items: center;
}

.booking-process-heading{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    text-align: start;
}

.booking-process-heading h2{
    max-width: 80%;
}

.booking-highlight-container{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    width: 40%;
}

.booking-benefit-container{
    width: 56%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
}

.booking-content-container{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    justify-content: flex-start;
    width: 55%;
}

.booking-tag-container{
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-end;
    width: 79%;
}

.booking-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--accent-color);
    font-weight: 400;
}

/* A naptar-sav mostantol egymas ALATT: felul a ket Minup naptar,
   alatta teljes szelessegben az agyagszinu "We provide more" panel. */
.booking-form-wrapper{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* ============================================================
   "We provide more than just sessions" — agyagszinu panel
   ============================================================ */
.more-panel{
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 40px 56px;
    background-color: var(--clay);
    border-radius: 28px;
    padding: 56px 56px 60px;
    color: var(--secondary);
}

.more-panel-intro{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.more-panel-title{
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    color: var(--secondary);
    max-width: 15ch;
}

.more-panel-lede{
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0;
    max-width: 44ch;
}

.more-panel-cta{
    margin-top: 6px;
}

.more-panel-list{
    list-style: none;
    padding-left: 0;
    margin: 0;
    align-self: center;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
}

.more-panel-list li{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    font-family: var(--font-family-2);
    font-size: 17px;
    line-height: 1.35;
    color: var(--secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.more-panel-list li::before{
    content: "/";
    font-family: var(--font-family-1);
    font-weight: 700;
    font-size: 18px;
    color: var(--ball);
    flex: 0 0 auto;
}

/* 22. Contact Cta Styles */

.contact-cta-content{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    width: 58%;
    position: relative;
    z-index: 2;
}

.contact-info-heading{
    color: var(--text-color);
}
/* 23. Underline Styles */

.underline-primary-accent{
    border-bottom: 1px solid var(--primary);
}

.underline-pricing{
    border-bottom: 1px solid white;
}

.underline-text-color{
    border-bottom: 1px solid var(--text-color);
}

.underline-accent-5{
    border-bottom: 1px solid var(--accent-color-5);
}

/* 24. Swiper Styles */

.swiperpartner {
    margin: 0px -150px 0px -150px;
    display: flex;
    justify-content: center;
}

/* 25. Custom List Styles */

.check-list{
    list-style: none;
    padding-left: 0;
}

.check-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
}

.check-list li:last-child{
    margin-bottom: 0px;
}

.check-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 20px;
    display: inline-block;
}

.check-list.alternative-list li{
    color: var(--accent-color);
}
.check-list.alternative-list li::before{
    color: var(--accent-color);
}

.pricing-benefit-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pricing-benefit-list li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--ink);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35em;
    transition: color 320ms ease;
}

.pricing-benefit-list li::before {
    content: "\2713";
    font-size: 15px;
    line-height: 1;
    color: var(--clay);
    flex: 0 0 auto;
    transition: color 320ms ease;
}

.pricing-benefit-list li:last-child {
    margin-bottom: 0px;
}
/*
.pricing-benefit-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.6em;
    font-size: 21px;
    display: inline-block;
}
*/
.chevron-circle-list{
    list-style: none;
    padding-left: 0;
}

.chevron-circle-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-circle-list a{
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-circle-list li:last-child{
    margin-bottom: 0px;
}

.chevron-circle-list li::before {
    content: "\f138";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 1.125rem;
    display: inline-block;
}

.chevron-list{
    list-style: none;
    padding-left: 0;
}

.chevron-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-list a{
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
}

.chevron-list li:last-child{
    margin-bottom: 0px;
}

.chevron-list li::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 16px;
    display: inline-block;
}

/* 26. Service Styles */

.service-title-container{
    padding-bottom: 30px;
    border-bottom: 3px solid var(--accent-color-2);
}

/* (A regi ratett service-overlay stilusok torolve — az uj
   session-kartya a .card-service blokkban van, 08. szekcio.) */

/* 27. Academy Section */

.academy-title-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px 50px;
    border-bottom: 3px solid var(--primary);
    position: relative;
}

.academy-heading-container{
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    text-align: start;
    padding-bottom: 50px;
    order: 1;
}

.academy-title-image{
    width: 22%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: flex-end;
    overflow: hidden;
    order: 2;
}

.academy-title-image img{
    margin: 0px 0px -52px 0px
}

.academy-title-cta{
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: start;
    padding-bottom: 50px;
    gap: 20px 20px;
    order: 3;
}

.academy-video-section{
    width: 100%;
    display: flex;
    justify-content: center;
}

.academy-video-container{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px 20px 20px 20px;
}

.academy-video-wrapper {
    position: relative;
    width: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 460px;
    background-color: var(--accent-color);
}

.academy-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translateX(-50%) scale(1.4);
    border: 0;
    border-radius: inherit;
    pointer-events: none;
}

.academy-video-wrapper .video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
}

.academy-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.academy-benefit-list li {
    width: 100%;
    position: relative;
    padding-left: 2em;
    color: var(--secondary);
    padding-bottom: 20px;
    margin-bottom: 10px;
    
}

.academy-benefit-list li:last-child {
    margin-bottom: none;
}

.academy-benefit-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 1em;
    line-height: var(--line-height, 1.6);
}

.academy-stat{
    font-family: var(--font-family-1);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--accent-color-2);
}

.academy-stat-description{
    font-size: 16px;
    color: var(--secondary);
    margin-bottom: 0px;
    text-align: start;
}

/* 28. Tournament Styles */

.tournament-grid {
    display: grid;
    grid-template-columns: 0.32fr 0.68fr;
    gap: 27px;
}

.tournament-feature{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

.tournament-schedule{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--secondary);
}

.tournament-cta-title{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    padding: 30px 0px 30px 30px;
    text-align: start;
}

.tournament-cta-image{
    width: 100% !important;
    height: 351px !important;
    object-fit: cover;
    object-position: center;
    border-radius: 17px 17px 17px 17px;
}

.tournament-event-list{
    display: flex;
    flex-direction: column;
    gap: 27px 27px;
}

.tournament-tag-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 76%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 10px 0px 10px;
    z-index: 2;
}

.tournament-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    
    backdrop-filter: blur(7px);
}

.other-tournament-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px 27px;
}

/* 29. Partnership Styles */

.partnership-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 20px 0px 20px 0px;
    border-radius: 20px 20px 20px 20px;
    background-color: var(--clay);
    position: relative;
    overflow: hidden;
}

/* 30. Community Styles */

.community-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.community-cta{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    width: 51%;
    top: 0;
    right: 0;
    background-color: var(--accent-color-2);
    border-radius: 0px 20px 0px 20px;
    padding: 40px 40px 40px 40px;
}

.community-icon{
    background-color: var(--accent-color-2);
    width: 80px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 17px 17px 17px 17px;

}

/* 31. Membership CTA Styles */

.membership-cta-description{
    font-weight: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--secondary);
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 30px 30px;
}

.cta-tag-container{
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    padding: 30px 30px 0px 0px;
    z-index: 2;
}

.cta-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}

.cta-benefit-title{
    padding: 0px 0px 30px 30px;
    position: absolute;
    width: 63%;
    left: 0;
    bottom: 0;
}

/* 32. Testimonial Styles */

.testimonial-content-container{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    justify-content: space-between;
    overflow: hidden;
}

.testimonial-side{
    width: 18%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 50px 50px;
    justify-content: space-between;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.testimonial-side .testimonial-avatar{
    border: 5px solid var(--accent-color-4);
}

.testimonial-side .testimonial-avatar--lg {
    width: 40%;
    height: 40%;
}

.testimonial-side .testimonial-avatar--md {
    width: 30%;
    height: 30%;
}

.testimonial-side .testimonial-avatar--sm {
    width: 25%;
    height: 25%;
}

.testimonial-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonial-slider-wrapper {
    display: flex;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

.testimonial-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;          
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.testimonial-slide.active {
    opacity: 1;
    transform: scale(1);
}

.testimonial-quote{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.8em;
    text-align: center;
    color: var(--accent-color);
    padding-bottom: 80px;
}

.testimonial-name{
    color: var(--accent-color);
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
}

.testimonial-designation{
    font-size: 16px;
    line-height: 1.8em;
}

.testimonial-nav-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 10px;
}

.testimonial-nav-btn.active{
    width: 10px;
    background-color: var(--accent-color-2);
}

.testimonial-nav-btn{
    width: 20px;
    height: 10px;
    border: none;
    border-radius: 10px 10px 10px 10px;
    background-color: var(--accent-color-7);
}


/* 33. Team Styles */

.team-content-wrapper{
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    height: 100%;
    align-items: start;
}

.team-card-container{
    width: 55%;
}

.team-title-wrapper{
    width: 40%;
    height: 100%;
    position: sticky;
    top: 20em;
    z-index: 9;
}

.team-title-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    text-align: start;
    justify-content: start;
    align-items: start;
}


/* 34. FAQ & Accordion Styles */

/* A FAQ mostantol egyhasabos: a cim felul, a kerdesek alatta
   teljes szelessegben (7. kep). Nincs tobbe ragadt oldalso cim. */
.faq-title-container{
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: start;
    justify-content: start;
    align-items: start;
}

/* Kerdes-kartyak: csukva feher, vekony kerettel; nyitva vilagos
   agyaggal kitoltve. A kitoltest a gomb es a nyilo resz festi, igy
   regebbi bongeszokben is jo (nem kell :has() tamogatas). */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.accordion .accordion-item {
    background-color: var(--secondary);
    border: 1px solid var(--accent-color-5);
    border-radius: 16px;
    outline: none;
    overflow: hidden;
    transition: border-color 280ms ease;
}

.accordion .accordion-item:has(> .accordion-collapse.show) {
    border-color: transparent;
}

.accordion .accordion-item .accordion-body{
    font-family: var(--font-family-2);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55em;
    color: var(--text-color);
    background-color: transparent;
    padding: 0px 28px 26px 28px;
}

/* A FAQ harmonikat sajat szkript vezerli (setupFaqAccordion), nem a
   Bootstrap collapse. Igy garantaltan csak EGY kerdes lehet nyitva,
   es a lenyilas/felcsukas animacioja mindig vegigfut, akkor is, ha
   kozben masik kerdesre kattintanak. A magassagot a bongeszo
   animalja; a hatterszin vegig ott van, ezert nem "ugrik be" a
   nyitas vegen. */
.accordion .accordion-collapse {
    background-color: var(--clay-soft);
    display: block;
    height: auto;          /* JS nelkul minden valasz olvashato marad;
                              a csukott allapotot a szkript allitja be */
    overflow: hidden;
    transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
}

.accordion .accordion-collapse.is-open {
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .accordion .accordion-collapse {
        transition: none;
    }
}

.accordion .accordion-button {
    background-color: transparent;
    color: var(--ink);
    border: none;
    font-family: var(--font-family-1);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35em;
    text-align: start;
    padding: 24px 28px 24px 28px;
    box-shadow: none;
    transition: background-color 280ms ease;
}

.accordion .accordion-button:not(.is-closed) {
    background-color: var(--clay-soft);
    color: var(--ink);
    padding-bottom: 14px;
}

.accordion-button::after{
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23C4633F" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.1em 1.1em;
    padding: 0.7em;
    border-radius: 50%;
    background-color: var(--clay-soft);
    width: 1.6em;
    height: 1.6em;
    flex: 0 0 auto;
    transition: background-color 280ms ease;
    content: "";
}
.accordion-button:not(.is-closed)::after{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffffff" class="bi bi-dash" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>');
    background-color: var(--clay);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.1em 1.1em;
}

/* 35. Pricing Styles */

.price-container{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
}

/* 36. Blog Styles */

.blog-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0px 30px 30px 30px;
    z-index: 2;
}

.meta-data{
    color: var(--accent-color-2);
}

.post-meta-data{
    color: var(--primary);
}

.recent-post-title{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--secondary);
    transition: all 300ms;
}

.recent-post-title:hover{
    color: var(--accent-color-2);
}

.blog-post-body{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 20px 20px 20px 20px;
    background-color: var(--accent-color-3);
}

.blog-title{
    font-family: var(--font-family-1);
    color: var(--primary);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3em;
}

.blog-tag-container{
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.blog-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}


.recent-post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recent-post-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.recent-post-thumb {
    flex: 0 0 100px;
}

.recent-post-thumb img {
    width: 100%;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
}

.recent-post-body {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.recent-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-content-wrapper{
    display: flex;
    flex-direction: row;
    gap: 50px 50px;
}

.post-main-content{
    width: 66%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.post-sidebar-wrapper{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
}

/* 37. Maps Style */

.maps{
    max-width: 100%;
    width: 100%;
    height: 400px;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

/* 38. Video Button Styles */

.request-loader {
    position: relative;
    width: 60px;
    min-height: 60px;
    border-radius: 50% !important;
    border: none;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
    font-size: 24px;
    aspect-ratio: 1/1;
    transition: all 300ms ease-in-out;
    z-index: 10;
    isolation: isolate;
}

.request-loader:hover {
    color: var(--accent-color);
    background-color: var(--accent-color-2);
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--accent-color-2);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: -1;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}

.test{
    display: flex;
    flex-direction: row;
    gap: 100px;
    overflow: clip;
    align-items: center;
}

/* 39. Video Modal Styles */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-transparent-black-2);
    z-index: 10;
    justify-content: center;
    align-items: center;
}

.my-modal {
    background-color: var(--secondary);
    padding: 0;
    border-radius: none;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

.my-modal iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 80vh;
}

.my-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: var(--font-size-3xl);
    cursor: pointer;
    font-weight: bold;
    color: var(--accent-color-2);
}

.btn-close {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--accent-color-2);
    padding: 16px 16px 16px 16px;
    opacity: 1;
    z-index: 21;
}

/* 40. Animate Styles */

.animate-box{
    opacity: 0;
}

.animated{
    animation-duration: var(--animation-normal);
}

.animated-delay-fast{
    animation-duration: var(--animation-fast);
}

.animated-delay-slow{
    animation-duration: var(--animation-slow);
}

/* 41. 404 Style */

.heading-notfound{
    color: var(--accent-color-2);
    font-family: var(--font-family-1);
    font-size: 200px;
    font-weight: 700;
    line-height: 0.8em;
}

.description-notfound{
    color: var(--secondary);
    margin: 0px auto 20px auto;
    max-width: 59%;
}

/* 42. Custom Spacing */

.gspace-0 { 
    gap: 0px 0px; 
}
.gspace-1 { 
    gap: 10px 10px; 
}
.gspace-2 { 
    gap: 20px 20px; 
}
.gspace-3 { 
    gap: 30px 30px; 
}
.gspace-4 { 
    gap: 40px 40px; 
}
.gspace-5 { 
    gap: 50px 50px; 
}
.gspace-100{
    gap: 100px 100px;
}
.gspace-x-0 { 
    column-gap: 0px; 
}
.gspace-x-1 { 
    column-gap: 10px; 
}
.gspace-x-2 { 
    column-gap: 20px; 
}
.gspace-x-3 { 
    column-gap: 30px; 
}
.gspace-x-4 { 
    column-gap: 40px; 
}
.gspace-x-5 { 
    column-gap: 50px; 
}
.gspace-x-100{
    column-gap: 100px;
}

.gspace-y-0 { 
    row-gap: 0px; 
}
.gspace-y-1 { 
    row-gap: 10px; 
}
.gspace-y-2 { 
    row-gap: 20px; 
}
.gspace-y-3 { 
    row-gap: 30px; 
}
.gspace-y-4 { 
    row-gap: 40px; 
}
.gspace-y-5 { 
    row-gap: 50px; 
}
.gspace-y-100{
    row-gap: 100%;
}

/* Grid spacing (row-gap & column-gap) */

.grid-spacer-0{
    --bs-gutter-x: 0px;
    --bs-gutter-y: 0px;
}

.grid-spacer-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-spacer-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-spacer-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-spacer-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-spacer-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-spacer-100{
    --bs-gutter-x: 100px;
    --bs-gutter-y: 100px;
}

/* Grid spacing (column-gap) */

.grid-spacer-x-0 {
    --bs-gutter-x: 0px;
}
.grid-spacer-x-1 {
    --bs-gutter-x: 10px;
}
.grid-spacer-x-2 {
    --bs-gutter-x: 20px;
}
.grid-spacer-x-3 {
    --bs-gutter-x: 30px;
}
.grid-spacer-x-4 {
    --bs-gutter-x: 40px;
}
.grid-spacer-x-5 {
    --bs-gutter-x: 50px;
}
.grid-spacer-x-100{
    --bs-gutter-x: 100px
}

/* Grid spacing (row-gap) */

.grid-spacer-y-0 {
    --bs-gutter-y: 0px;
}
.grid-spacer-y-1 {
    --bs-gutter-y: 10px;
}
.grid-spacer-y-2 {
    --bs-gutter-y: 20px;
}
.grid-spacer-y-3 {
    --bs-gutter-y: 30px;
}
.grid-spacer-y-4 {
    --bs-gutter-y: 40px;
}
.grid-spacer-y-5 {
    --bs-gutter-y: 50px;
}
.grid-spacer-y-100{
    --bg-gutter-y: 100px
}

/* 43. Footer Styles */

.footer-content-container{
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ============================================================
   Labléc (9. kep): negy oszlop — markanev + szlogen + ikonok,
   EXPLORE, CONTACT, BOOK. A logo szovegkent all, nem kepkent.
   ============================================================ */
.footer-logo-container{
    display: flex;
    justify-content: start;
    align-items: flex-start;
}

/* "DEUCE." szokep: a nev feher, a pont a marka zoldje. */
.footer-wordmark{
    font-family: 'ruiga', var(--font-family-1);
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--secondary);
}

.footer-wordmark .wordmark-dot{
    color: var(--ball);
}

.footer-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
    padding-bottom: 60px;
}

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

.footer-col-title{
    font-family: var(--font-family-1);
    font-size: 13px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-color-7);
    margin-bottom: 4px;
}

.footer-link{
    font-family: var(--font-family-1);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--secondary);
    cursor: pointer;
    transition: color 240ms ease;
}

.footer-link:hover{
    color: var(--ball);
}

.footer-text{
    font-family: var(--font-family-1);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--secondary);
}

.footer-brand-col{
    gap: 22px;
}

/* A foglalas-gomb a tobbi oszlop FELIRATANAK vonalaban all —
   ezert nincs fole kulon "Book" cimke. */
.footer-book-col{
    align-items: flex-start;
}

.footer-book-col .btn{
    margin-top: -4px;
}

/* A labléc hattere fekete (nem az --ink zoldes-fekete). */
footer .bg-accent-color{
    background-color: #000000;
}

.footer-slogan{
    font-family: var(--font-family-1);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--secondary);
}

.footer-social-icon{
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    align-items: center;
}

.footer-social-icon .social-icon{
    border-radius: 50%;
}

.footer-copyright-container{
    display: flex;
    flex-direction: row-reverse;
    gap: 20px 24px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    padding: 24px 0px 26px 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-legalink-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px 20px;
}

.footer-legalink-container .divider{
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: var(--primary);
}

.legalink{
    font-family: var(--font-family-1);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3em;
    color: var(--accent-color-7);
    transition: color 300ms;
}

.legalink:hover{
    color: var(--ball);
}

.footer-copyright-container h6{
    font-family: var(--font-family-1);
    font-size: 15px;
    font-weight: 500;
    color: var(--accent-color-7) !important;
}

.legalink:hover{
    color: var(--secondary);
}
/**************************\
  Basic Modal Styles
\**************************/

.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}

/* ================================================================
   A felugro ablakok retegsorrendje.

   A .modal osztalynev UTKOZIK a Bootstrap sajat .modal-javal, ami
   z-index: 1055-ot ad neki. Mivel az elem pozicionalt, ez sajat
   reteget nyit: barmit is irunk a belsejebe (pl. a .modal__overlay
   10050-et), az EZEN BELUL rendezodik — vagyis az egesz ablak az
   1055-os szinten marad, a suti-sav (9998/9999) ALATT.
   Ezert magat a burkolo .modal elemet kell feljebb emelni.
   A betolto (10100) igy is legfelul marad.
   ================================================================ */
.modal.micromodal-slide {
  z-index: 10050;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
}

/* Desktop (Bootstrap lg és fölötte) */
@media (min-width: 992px) {
  .modal__container {
    width: calc(100vw - 80px);
    height: calc(100vh - 80px);
  }
}

/* Tablet és mobil */
@media (max-width: 991.98px) {
  .modal__container {
    width: 100%;
    height: 100%;
  }
}

.modal__header {
  display: flex;
  align-items: center;
    justify-content: flex-end;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {
  line-height: 1.5;
  color: rgba(0,0,0,.8);
 height: calc(100% - 20px) !important;
}

.modal__btn {
  font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #e6e6e6;
  color: rgba(0,0,0,.8);
  border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}



/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}
/* CSS */
.image-rotator {
  position: relative;
  width: 100%;
  height: 480px;          /* állítsd igény szerint */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Szürke overlay, középre igazított szöveggel */
.image-rotator .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* szürke/átlátszó */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* ne blokkolja a kattintást, ha nem szükséges */
}

.image-rotator .overlay-text {
  color: #fff;
  font-family: 'ruiga', var(--font-family-1);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  padding: 0.5rem 1rem;
}
.card-pricing {
  display: flex;
  flex-direction: column;   /* függőlegesen rendezze a belső blokkokat */
  height: 100%;             /* kitöltse a col teljes magasságát */
}

.card-pricing > .d-flex:first-child {
  flex-shrink: 0;           /* felső sáv fix magasság */
}

.card-pricing > p,
.card-pricing > .pricing-benefit-list {
  flex-shrink: 0;           /* ezek is fixen megmaradnak */
}

.card-pricing > a.btn {
  margin-top: auto;         /* gomb mindig az aljára kerül */
}
.row > .col {
  display: flex;
}

.row > .col > .card-pricing {
  flex: 1; /* minden card azonos magasságot kap */
}

/* (Itt eredetileg egy media-query-bol kiszakadt, feltetel nelkuli
   body { overflow-x: hidden } allt — a sablonbol maradt. Szandekosan
   meghagyjuk: a body-ra tett vizszintes vagas a lapra "tolodik fel",
   a body maga nem valik gorgeto-kontenerre, igy a sticky szekcio jo.
   Ha ez valaha html-re is rakerul, a gorgetesre jatszo szekcio
   elcsuszik — lasd a fajl elejen a magyarazatot. */
  body {
    overflow-x: hidden;
  }

@media screen and (min-width: 1025px){
    .lang-switch {
     position:fixed !important;
      bottom: 20px;
      left: 30px !important;
     z-index:1900;
    }
}
 .lang-switch {
     position:absolute;
      bottom: 20px;
      left: 20px;
     z-index:1900;
    }
.lang-switch button {
      background: #333;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .lang-switch button:hover {
      background: #555;
    }
 @font-face {
  font-family: 'suzanne';          /* tetszőleges név */
  src: url('../webfonts/atp-suzanne.woff') format('woff');
  font-weight: normal;               /* vagy bold, ha vastag */
  font-style: normal;                /* vagy italic */
  font-display: swap;                /* gyors betöltéshez ajánlott */
}
    @font-face {
  font-family: 'ruiga';          /* tetszőleges név */
  src: url('../webfonts/ruiga.woff') format('woff');
  font-weight: normal;               /* vagy bold, ha vastag */
  font-style: normal;                /* vagy italic */
  font-display: swap;                /* gyors betöltéshez ajánlott */
}
        .topNavbarSticky
        {
             position:sticky !important;
            top: -30px;
            z-index: 10;
        }
        @media (max-width: 768px) {
  .topNavbarSticky {
    top: -10px;
  }
}
        .topNavbarSticky .navbar {
  transition: background-color 0.5s ease; /* animáció beállítása */
}
        .topNavbarSticky.scrolled .navbar
        {
            background: rgba(216, 242, 106, 0.55) !important;
        }
        .maplist {
            width: 100%;
            height: 400px;
        }
        
        /* Tennis-ball pin marker (mapboxgl.Marker element).
           IMPORTANT: no `transition` on the marker root — any CSS
           transition fights Mapbox's per-frame transform update
           and re-introduces the pan/zoom lag we had earlier. The
           hover scale-up lives on an inner ::after pseudo so the
           marker root's transform stays untouched. */
        .court-marker {
            width: 40px;
            height: 40px;
            cursor: pointer;
            will-change: transform;
            line-height: 0;
        }
        .court-marker img {
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;        /* click bubbles to root */
            user-select: none;
            -webkit-user-drag: none;
            transition: transform 180ms ease;
            transform-origin: 50% 50%;
        }
        .court-marker:hover img {
            transform: scale(1.12);
        }
        
        /* Court name popup — site-matched white card with the
           lemon-yellow close button. Explicit background prevents
           any transparency regression from underlying Mapbox CSS. */
        .mapboxgl-popup-content {
            padding: 12px 32px 12px 16px;
            font-family: var(--font-family-1, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
            font-size: 14px;
            font-weight: 700;
            color: var(--ink, #0E1F17);
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06);
        }
        .court-popup .mapboxgl-popup-content {
            white-space: nowrap;
        }
        .mapboxgl-popup-close-button {
            font-size: 16px;
            line-height: 1;
            padding: 4px 8px;
            color: var(--ink, #0E1F17);
            background: transparent;
            border-radius: 6px;
        }
        .mapboxgl-popup-close-button:hover {
            background: rgba(15, 16, 17, 0.06);
        }
        /* Make sure the tip uses the same white as the bubble */
        .mapboxgl-popup-tip {
            border-top-color: #ffffff !important;
            border-bottom-color: #ffffff !important;
        }
   
/* ================================================================
   Landing / Hero section — always fills the full browser viewport.
   Layout (vertical):
     [ top-block ]  subtitle -> title -> heading -> CTA   (left aligned)
     [ flex grow / breathing space ]
     [ bottom-block ] lang switcher (left) | socials (right)
   ================================================================ */

/* Hero — fills the visible viewport. The gap below it (see
   `margin-bottom` rule a few selectors down) collapses on first
   scroll, sliding the next section up; this masks iOS Safari's
   transparent bottom toolbar bleed-through without forcing the
   hero behind the toolbar (which broke layout previously). */
.section-wrapper.section-wrapper-main {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    /* Invisible gap below the hero on first paint — keeps the
       next section out of the iOS translucent-toolbar zone.
       Collapses to 0 once .framed is added, in lockstep with
       the white-frame transition. */
    margin-bottom: 60dvh;
    position: relative;
    display: flex;
    transition: padding 700ms cubic-bezier(0.4, 0, 0.2, 1),
                margin-bottom 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.section-wrapper.section-wrapper-main > .banner-home-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    transition: border-radius 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Once the user has scrolled past the trigger threshold,
   the section keeps its white rounded frame permanently AND the
   gap below collapses (everything below slides up smoothly). */
.section-wrapper.section-wrapper-main.framed {
    padding: 30px;
    min-height: 100vh;
    min-height: 100dvh;
    margin-bottom: 0;
}
.section-wrapper.section-wrapper-main.framed > .banner-home-container {
    border-radius: 30px;
    /* compensate the section padding so the inner container
       can still fill the viewport visually */
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
}

/* Background video fills the entire hero (was inline-styled before) */
.banner-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Tartalek allokep a video helyett — alapbol rejtve, a JS kapcsolja
   be, ha a lejatszas nem indul el (lasd setupHeroVideoFallback). */
.banner-bg-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    display: none;
}

.hero-video-failed .banner-bg-video { display: none; }
.hero-video-failed .banner-bg-fallback { display: block; }

.section-wrapper.section-wrapper-main .hero-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 140px 40px 56px;
    position: relative;
    z-index: 2;
}

/* CSS Grid distribution:
   row 1 (1fr) — fills, top-block centered inside it (equal space
                 above and below the text)
   row 2 (auto) — bottom-block flush at the very bottom edge.
   This guarantees the hero text floats in the middle while the
   lang/social row stays pinned to the hero's bottom padding. */
.container-banner {
    width: 100%;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1;
}

.banner-top-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 760px;
    grid-row: 1;
    align-self: center;
    justify-self: start;
}

.banner-bottom-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    grid-row: 2;
    align-self: end;
}

/* ================================================================
   A nyitokepernyo felso blokkjanak igazitasa EGYETLEN kapcsolon
   all. Korabban szetcsuszott: a responsive.css 767px alatt minden
   .secondary-accent elemet kozepre igazit, es a hero H1-e meg a
   bevezeto szovege viseli ezt az osztalyt — igy 569 es 767 px
   kozott ok kozepre ugrottak, mikozben a "Play. Connect. Belong."
   felirat es a gomb balra maradt (azok csak 568px alatt kozepesedtek).
   Mostantol a negy elem egyszerre valt, ugyanannal a hatarnal.
   ================================================================ */
.banner-top-block {
    --hero-align: flex-start;
    --hero-text: left;
    --hero-rule-mx: 0;
    align-items: var(--hero-align);
    text-align: var(--hero-text);
}

.banner-top-block .box-banner {
    justify-content: var(--hero-align);
}

/* A .secondary-accent altalanos kozepre-igazitasat a heron belul
   felulirjuk — itt a kapcsolo dont. */
.banner-top-block .secondary-accent,
.banner-top-block .banner-display-title,
.banner-top-block .banner-lede {
    text-align: var(--hero-text);
}

.banner-top-block .banner-rule {
    margin-left: var(--hero-rule-mx);
    margin-right: var(--hero-rule-mx);
}

@media (max-width: 767px) {
    .banner-top-block {
        --hero-align: center;
        --hero-text: center;
        --hero-rule-mx: auto;
    }
}

.box-banner {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.banner-bottom-block .box-banner.banner-lang {
    width: auto;
    justify-content: flex-start;
}

.banner-bottom-block .box-banner.banner-social {
    width: auto;
    justify-content: flex-end;
}

/* Responsive: tablet */
@media (max-width: 1025px) {
    .section-wrapper.section-wrapper-main .hero-container {
        padding: 140px 24px 36px;
    }
    .section-wrapper.section-wrapper-main {
        margin-bottom: 50dvh;
    }
    .banner-top-block {
        max-width: 100%;
    }
}

/* Responsive: mobile */
@media (max-width: 568px) {
    .section-wrapper.section-wrapper-main .hero-container {
        padding: 120px 16px 28px;
    }
    .section-wrapper.section-wrapper-main {
        margin-bottom: 40dvh;
    }
    .banner-top-block {
        gap: 16px;
        justify-self: stretch;
        max-width: 100%;
    }
    .banner-bottom-block {
        flex-direction: column-reverse;
        align-items: center;
        gap: 16px;
        justify-self: stretch;
    }
    .banner-bottom-block .box-banner.banner-lang,
    .banner-bottom-block .box-banner.banner-social {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================
   Landing — designer-level typography polish (beta 2.html opt-in).
   Tags below are only present in beta 2.html so beta.html is
   unaffected (no .banner-display-title, .banner-lede etc. there).
   ================================================================ */

/* Dark gradient overlay above the bg video, under the text — keeps
   white type legible against any frame of the video loop.           */
.banner-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.15) 35%,
            rgba(0, 0, 0, 0.15) 65%,
            rgba(0, 0, 0, 0.55) 100%);
}
.section-wrapper.section-wrapper-main .hero-container {
    z-index: 2; /* keep content above .banner-bg-overlay */
}

/* Eyebrow — uppercase, letter-spaced, dot-separated trio */
.banner-eyebrow .sub-heading-banner {
    display: inline-flex;
    align-items: center;
}
.banner-eyebrow .sub-heading-title {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    font-size: clamp(12px, 1.1vw, 15px);
    color: var(--ball, #D8F26A);
}
.banner-eyebrow .eyebrow-sep {
    opacity: 0.55;
    transform: translateY(-1px);
    font-weight: 400;
}

/* Display H1 — fluid clamp typography to fill the available canvas */
.banner-display-title {
    font-size: clamp(40px, 7.2vw, 104px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}
.banner-title-accent {
    color: var(--ball, #D8F26A);
    font-style: italic;
    font-weight: 800;
}

/* Hairline accent between H1 and lede */
.banner-rule {
    width: 88px;
    height: 3px;
    border-radius: 999px;
    background: var(--ball, #D8F26A);
    margin: 4px 0 4px 0;
    opacity: 0.95;
}

/* Lede H3 — readable measure, comfortable line-height */
.banner-lede {
    font-size: clamp(16px, 1.55vw, 22px);
    line-height: 1.5;
    max-width: 56ch;
    margin: 0;
    font-weight: 400;
    opacity: 0.92;
}

/* Primary CTA — give the hero button more presence */
.banner-cta-btn {
    transform: translateZ(0);
}
.banner-cta-btn .btn-title {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Smaller bottom-row language pill (replaces inline scale(0.7)) */
.banner-lang-btn {
    transform: scale(0.78);
    transform-origin: left center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.banner-lang-btn:hover,
.banner-lang-btn:active {
    transform: scale(0.78);
    box-shadow: none;
}

/* Mobile typography tightening for the polish layer */
@media (max-width: 568px) {
    .banner-eyebrow .sub-heading-title {
        gap: 8px;
        letter-spacing: 0.18em;
    }
    .banner-display-title {
        font-size: clamp(34px, 9vw, 56px);
        line-height: 1.06;
    }
    .banner-lede {
        font-size: 16px;
    }
    .banner-lang-btn {
        transform-origin: center;
    }
}

/* Tablet / mobile tuning for the framed (scrolled) hero */
@media (max-width: 1025px) {
    .section-wrapper.section-wrapper-main.framed {
        padding: 20px;
    }
    .section-wrapper.section-wrapper-main.framed > .banner-home-container {
        border-radius: 24px;
        min-height: calc(100vh - 40px);
        min-height: calc(100dvh - 40px);
    }
}
@media (max-width: 568px) {
    .section-wrapper.section-wrapper-main.framed {
        padding: 10px;
    }
    .section-wrapper.section-wrapper-main.framed > .banner-home-container {
        border-radius: 18px;
        min-height: calc(100vh - 20px);
        min-height: calc(100dvh - 20px);
    }
}

/* ================================================================
   Map section — responsive aspect ratio (replaces fixed 400px).
   ================================================================ */
.maplist {
    width: 100%;
    height: auto !important;       /* override the earlier 400px rule */
    aspect-ratio: 16 / 10;
    min-height: 280px;
    max-height: 560px;
}
@media (max-width: 1025px) {
    .maplist {
        aspect-ratio: 4 / 3;
        max-height: 480px;
    }
}
@media (max-width: 568px) {
    .maplist {
        aspect-ratio: 1 / 1;
        min-height: 320px;
    }
}

/* ================================================================
   Scroll-scrub video section (between Memberships and About Us).
   - Sticky pins UNDER the floating navbar (top of canvas aligns
     with menubar bottom edge).
   - Section background is white.
   - Above 1165px viewport, the canvas frame stops scaling and
     stays centered (max-width: 1165px) with white space on sides.
   - 20px white blur-style fade on all four canvas edges.
   - Caption is an overlay that slides from below the sticky to
     the VERTICAL CENTER of the sticky as the user scrolls.
   ================================================================ */
.scroll-scrub-section {
    position: relative;
    height: 320vh;
    background: #fff;
    overflow: clip;
}
.scroll-scrub-sticky {
    position: sticky;
    top: var(--navbar-height, 95px);
    height: calc(100vh - var(--navbar-height, 95px));
    height: calc(100dvh - var(--navbar-height, 95px));
    width: 100%;
    overflow: hidden;
    background: #fff;
    /* flex container so the .scroll-scrub-frame (max-width 1165)
       is automatically centered horizontally on wide viewports */
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.scroll-scrub-frame {
    position: relative;
    width: 100%;
    max-width: 1165px;
    height: 100%;
    overflow: hidden;
    background: #fff;
}
.scroll-scrub-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    /* Belt-and-suspenders white fallback in case the canvas
       is briefly visible before the JS fillRect() runs. */
    background: #fff;
}

/* Soft white blur-style edge fade on LEFT, RIGHT and BOTTOM only
   (no top fade per design — the canvas top sits flush against the
   menu-bar bottom). The fade is 50px wide with a multi-stop
   gradient, starting at 70% opacity for a gentle, photographic
   feathered edge (much softer than a hard vignette). */
.scroll-scrub-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(to top,
            rgba(255,255,255,0.78) 0%,
            rgba(255,255,255,0.50) 25%,
            rgba(255,255,255,0.22) 55%,
            rgba(255,255,255,0.06) 80%,
            rgba(255,255,255,0) 100%)              bottom / 100% 100px no-repeat,
        linear-gradient(to right,
            rgba(255,255,255,0.78) 0%,
            rgba(255,255,255,0.50) 25%,
            rgba(255,255,255,0.22) 55%,
            rgba(255,255,255,0.06) 80%,
            rgba(255,255,255,0) 100%)              left   / 100px 100% no-repeat,
        linear-gradient(to left,
            rgba(255,255,255,0.78) 0%,
            rgba(255,255,255,0.50) 25%,
            rgba(255,255,255,0.22) 55%,
            rgba(255,255,255,0.06) 80%,
            rgba(255,255,255,0) 100%)              right  / 100px 100% no-repeat;
}

/* Caption overlay — covers the entire sticky area; content (the
   text) is flex-centered, so when transform = translateY(0) the
   text sits at the vertical centre of the sticky (i.e. the centre
   of the visible viewport below the navbar). Initial translateY
   = 100% pushes the whole caption below the sticky (clipped by
   overflow: hidden). */
.scroll-scrub-caption {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;          /* stacks the two .caption-line spans */
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding: 0 32px;
    color: black;
    font-family: 'ruiga', var(--font-family-1, sans-serif);
    font-size: clamp(28px, 4.2vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    transform: translateY(100%);
    opacity: 0;
    will-change: transform, opacity;
    /* No CSS transition — JS sets these every rAF tick. */
}
/* Each line is forced onto its own row AND prevented from wrapping
   internally — guarantees exactly two lines at every viewport size. */
.scroll-scrub-caption .caption-line {
    display: block;
    white-space: nowrap;
}
.scroll-scrub-caption .accent {
    color: var(--ball);
    font-style: italic;
}

@media (max-width: 1025px) {
    .scroll-scrub-section { height: 300vh; }
    /* Slightly narrower fade on tablet */
    .scroll-scrub-frame::after {
        background:
            linear-gradient(to top,
                rgba(255,255,255,0.78) 0%,
                rgba(255,255,255,0.50) 25%,
                rgba(255,255,255,0.22) 55%,
                rgba(255,255,255,0.06) 80%,
                rgba(255,255,255,0) 100%)              bottom / 100% 36px no-repeat,
            linear-gradient(to right,
                rgba(255,255,255,0.78) 0%,
                rgba(255,255,255,0.50) 25%,
                rgba(255,255,255,0.22) 55%,
                rgba(255,255,255,0.06) 80%,
                rgba(255,255,255,0) 100%)              left   / 36px 100% no-repeat,
            linear-gradient(to left,
                rgba(255,255,255,0.78) 0%,
                rgba(255,255,255,0.50) 25%,
                rgba(255,255,255,0.22) 55%,
                rgba(255,255,255,0.06) 80%,
                rgba(255,255,255,0) 100%)              right  / 36px 100% no-repeat;
    }
}

/* >= 1000px viewport — much thicker, much stronger feathered fade.
   Edge color = 100% solid white; the gradient progresses gently
   toward the centre and ends fully transparent. Side fade is 280px
   wide, bottom is 160px tall, no top fade. */
@media (min-width: 1000px) {
    .scroll-scrub-frame::after {
        background:
            linear-gradient(to top,
                rgba(255,255,255,1)    0%,
                rgba(255,255,255,0.98) 8%,
                rgba(255,255,255,0.90) 18%,
                rgba(255,255,255,0.72) 32%,
                rgba(255,255,255,0.50) 48%,
                rgba(255,255,255,0.28) 65%,
                rgba(255,255,255,0.12) 82%,
                rgba(255,255,255,0)    100%) bottom / 100% 160px no-repeat,
            linear-gradient(to right,
                rgba(255,255,255,1)    0%,
                rgba(255,255,255,0.98) 8%,
                rgba(255,255,255,0.90) 18%,
                rgba(255,255,255,0.72) 32%,
                rgba(255,255,255,0.50) 48%,
                rgba(255,255,255,0.28) 65%,
                rgba(255,255,255,0.12) 82%,
                rgba(255,255,255,0)    100%) left   / 280px 100% no-repeat,
            linear-gradient(to left,
                rgba(255,255,255,1)    0%,
                rgba(255,255,255,0.98) 8%,
                rgba(255,255,255,0.90) 18%,
                rgba(255,255,255,0.72) 32%,
                rgba(255,255,255,0.50) 48%,
                rgba(255,255,255,0.28) 65%,
                rgba(255,255,255,0.12) 82%,
                rgba(255,255,255,0)    100%) right  / 280px 100% no-repeat;
    }
}
@media (max-width: 568px) {
    .scroll-scrub-section { height: 280vh; }
    .scroll-scrub-caption {
        padding: 0 16px;
        /* Keeps the two lines from wrapping on tiny screens —
           ensures the explicit <br> remains the only line break. */
        font-size: clamp(18px, 5.5vw, 30px);
    }
    .scroll-scrub-frame::after {
        background:
            linear-gradient(to top,
                rgba(255,255,255,0.78) 0%,
                rgba(255,255,255,0.50) 25%,
                rgba(255,255,255,0.22) 55%,
                rgba(255,255,255,0.06) 80%,
                rgba(255,255,255,0) 100%)              bottom / 100% 24px no-repeat,
            linear-gradient(to right,
                rgba(255,255,255,0.78) 0%,
                rgba(255,255,255,0.50) 25%,
                rgba(255,255,255,0.22) 55%,
                rgba(255,255,255,0.06) 80%,
                rgba(255,255,255,0) 100%)              left   / 24px 100% no-repeat,
            linear-gradient(to left,
                rgba(255,255,255,0.78) 0%,
                rgba(255,255,255,0.50) 25%,
                rgba(255,255,255,0.22) 55%,
                rgba(255,255,255,0.06) 80%,
                rgba(255,255,255,0) 100%)              right  / 24px 100% no-repeat;
    }
}
/* (Orphan rules from earlier scroll-scrub iterations cleaned out.) */

/* ================================================================
   Membership Tennis / Padel tabs (in #memberships).
   ================================================================ */
/* Cim-sor: balra a felirat + cim, jobbra a Tennis/Padel kapcsolo. */
.membership-head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.membership-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: var(--clay-soft);
    border-radius: 999px;
    margin: 0;
    flex: 0 0 auto;
}
.membership-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--clay);
    font-family: var(--font-family-1, sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    padding: 12px 30px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 320ms ease, color 320ms ease;
}
.membership-tab-btn:hover {
    color: var(--clay-dark);
}
.membership-tab-btn[aria-selected="true"] {
    background: var(--clay);
    color: var(--secondary);
}
.membership-tab-btn[aria-selected="true"]:hover {
    color: var(--secondary);
}
.membership-tab-btn .tab-icon {
    font-size: 15px;
}

/* A privat fulon csak ket berlet van — ne balra logjanak. */
.membership-tab-panel .row.row-centered {
    justify-content: center;
}

.membership-tabs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
}

/* Grid-stack so both panels share the same cell — guarantees the
   crossfade animation is visually IDENTICAL in both directions
   (Tennis→Padel and Padel→Tennis). No layout jump because both
   panels are always in the same place.
   The cell sizes to the taller of the two panels. */
.membership-tabs-content {
    width: 100%;
    display: grid;
    grid-template-areas: "stack";
    grid-template-columns: 1fr;
}
.membership-tab-panel {
    grid-area: stack;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 380ms ease, transform 380ms ease;
    pointer-events: none;
    /* While inactive, ignore for AT and pointer */
}
.membership-tab-panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Initial pre-JS state: hide non-default panels so they don't
   flash before script init removes the attribute. */
.membership-tab-panel[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .membership-head {
        align-items: flex-start;
    }
}

@media (max-width: 568px) {
    .membership-tab-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ================================================================
   Cookie consent — accept-only gate.
   While the visitor hasn't accepted yet:
     • <html> gets .cookie-locked  → body scroll is suppressed
     • .cookie-blocker fades in    → blur-frosted backdrop that
                                     intercepts every click outside
                                     the banner
     • .cookie-banner slides up    → contains the single accept CTA
   After click: blocker fades out, lock is removed, banner slides
   away. Stored under localStorage 'deuce_cookie_consent'.
   ================================================================ */

/* Stops scroll while consent is pending. */
html.cookie-locked,
html.cookie-locked body {
    overflow: hidden !important;
}

/* Full-viewport frosted backdrop — sits below the banner, above
   the page content. Captures all clicks. */
.cookie-blocker {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}
.cookie-blocker.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    max-width: 720px;
    margin: 0 auto;
    padding: 22px 24px;
    background: #ffffff;
    color: var(--ink, #0E1F17);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08);
    font-family: var(--font-family-1, sans-serif);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity   400ms ease;
    pointer-events: none;
}
.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.cookie-banner-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.cookie-banner-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ball, #D8F26A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink, #0E1F17);
    font-size: 20px;
}
.cookie-banner-text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink, #0E1F17);
}
.cookie-banner-text strong {
    display: block;
    font-family: 'ruiga', var(--font-family-1, sans-serif);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}
.cookie-banner-text a {
    color: var(--ink, #0E1F17);
    text-decoration: underline;
    cursor: pointer;
}
.cookie-banner-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.cookie-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-family-1, sans-serif);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: background-color 240ms ease, color 240ms ease, transform 240ms ease;
    white-space: nowrap;
}
.cookie-banner-btn--primary {
    background: var(--ball, #D8F26A);
    color: var(--ink, #0E1F17);
}
.cookie-banner-btn--primary:hover {
    background: #c4e240;
    transform: translateY(-1px);
}
.cookie-banner-btn--secondary {
    background: transparent;
    color: var(--ink, #0E1F17);
    border: 1.5px solid rgba(15, 16, 17, 0.18);
}
.cookie-banner-btn--secondary:hover {
    background: rgba(15, 16, 17, 0.05);
    border-color: rgba(15, 16, 17, 0.32);
}

/* Tablet — stack actions row below text */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 18px 18px 16px;
    }
    .cookie-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .cookie-banner-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .cookie-banner-actions {
        width: 100%;
        gap: 6px;
    }
    .cookie-banner-btn {
        flex: 1 1 auto;
        padding: 11px 16px;
        font-size: 13px;
    }
}

/* Footer email link — green hover (brand lemon-green). The inner
   <h5> uses .secondary-accent with !important, so we need
   !important here too to win the cascade on hover. */
.footer-email-link {
    text-decoration: none;
}
.footer-email-link h5 {
    transition: color 220ms ease;
}
.footer-email-link:hover h5,
.footer-email-link:focus-visible h5 {
    color: var(--ball, #D8F26A) !important;
}

%
/* A terkep kurzora jelzi, hogy zarolt-e: amig nem kattintottak bele,
   nem "fogd meg" kez, hanem sima mutato (lasd setupMapGestureGate). */
.maplist .mapboxgl-canvas-container.mapboxgl-interactive { cursor: pointer; }
.maplist.map-unlocked .mapboxgl-canvas-container.mapboxgl-interactive { cursor: grab; }
.maplist.map-unlocked .mapboxgl-canvas-container.mapboxgl-interactive:active { cursor: grabbing; }

/* ================================================================
   Nyitokepernyo alacsony, de szeles ablakban (pl. 1600x620).
   A H1 a szelesseg alapjan mereteződik (7.2vw), ezert szeles de
   alacsony ablakban a cim + szoveg + gomb + also sor osszesen
   tobb helyet keszt, mint amennyi fuggolegesen van — a nyelvvalto
   es a social ikonok kicsusztak a kepbol. Itt a kepernyo
   MAGASSAGA szerint is visszavesszuk a mereteket.
   ================================================================ */
@media (min-width: 992px) and (max-height: 860px) {
    .section-wrapper.section-wrapper-main .hero-container {
        padding: 112px 40px 40px;
    }
    .banner-top-block {
        gap: 16px;
    }
    .banner-display-title {
        font-size: clamp(36px, 5.2vw, 72px);
    }
    .banner-lede {
        font-size: clamp(15px, 1.2vw, 18px);
    }
    .banner-rule {
        margin: 0;
    }
}

@media (min-width: 992px) and (max-height: 700px) {
    .section-wrapper.section-wrapper-main .hero-container {
        padding: 96px 40px 28px;
    }
    .banner-top-block {
        gap: 12px;
    }
    .banner-display-title {
        font-size: clamp(32px, 4.2vw, 56px);
    }
    .banner-lede {
        font-size: 15px;
    }
    .banner-eyebrow .sub-heading-title {
        font-size: 12px;
        letter-spacing: 0.16em;
    }
    .banner-cta-btn .btn-title {
        padding: 13px 26px;
    }
    .banner-lang-btn {
        transform: scale(0.64);
    }
    .banner-lang-btn:hover,
    .banner-lang-btn:active {
        transform: scale(0.64);
    }
}

@media (min-width: 992px) and (max-height: 600px) {
    .section-wrapper.section-wrapper-main .hero-container {
        padding: 88px 40px 20px;
    }
    .banner-display-title {
        font-size: clamp(28px, 3.4vw, 44px);
    }
    .banner-rule {
        display: none;
    }
    .banner-social .social-container {
        padding: 6px 12px;
    }
}

/* ================================================================
   Events — dinamikus kartyak (index.php + /admin)
   A Sessions .card-service kartyajara epul; csak az esemeny-
   specifikus reszek (datum, jelolok, dij, linkek) jonnek ide.
   ================================================================ */
.events-grid > .col { max-width: 420px; }
.events-grid .card-event { height: 100%; }
.card-event .event-place { margin-top: -4px; }

/* Egyetlen esemeny: kiemelt kartya a teljes szelessegben. Mobilon a
   szokasos allo kartya; 992px folott fekvo: kep balra, szoveg jobbra. */
.events-grid--single > .col { max-width: 100%; }
@media (min-width: 992px) {
    .events-grid--single .card-event {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: 40px;
        row-gap: 0;
        padding: 16px 32px 16px 16px;
    }
    /* A kep NEM szabja meg a kartya magassagat: abszolut kitolti a helyet,
       a magassagot a szoveg (de legalabb 400px) adja. */
    .events-grid--single .card-event .service-media {
        grid-row: 1 / span 2;
        position: relative;
        aspect-ratio: auto;
        min-height: 400px;
    }
    .events-grid--single .card-event .service-media .service-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .events-grid--single .card-event .service-body {
        align-self: center;
        gap: 14px;
        padding: 24px 0 8px;
    }
    .events-grid--single .card-event .service-name { font-size: 34px; }
    .events-grid--single .card-event .event-desc { font-size: 17px; }
    .events-grid--single .card-event .service-foot { padding: 20px 0 16px; }
    /* kep nelkul: a szoveg toltse ki a teljes kartyat */
    .events-grid--single .card-event:not(:has(.service-media)) {
        grid-template-columns: 1fr;
        padding: 24px 40px;
    }
}

.card-event .event-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.card-event .event-date i { color: var(--clay); font-size: 13px; }
.card-event .event-desc { white-space: pre-line; }

.event-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.event-flag {
    font-family: var(--font-family-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 100px;
    background: var(--accent-color-4);
    border: 1px solid var(--accent-color-5);
    color: var(--text-color);
}
.event-flag-draft { background: var(--ball); border-color: transparent; color: var(--ink); }
.card-event.is-past .service-img { filter: grayscale(0.6); opacity: 0.85; }

.event-fee { display: flex; flex-direction: column; gap: 6px; }
.event-fee-label {
    font-family: var(--font-family-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text-color);
}

.event-links { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.event-fb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clay-soft);
    border: 1px solid rgba(196, 99, 63, 0.22);
    color: var(--clay);
    transition: background-color 300ms ease;
}
.event-fb:hover { background: var(--clay-soft-2); color: var(--clay); }

/* Elonezet-jelzo (csak bejelentkezett adminnak, ?preview=1) */
.preview-bar {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 10000;
    max-width: calc(100% - 32px);
    padding: 10px 18px;
    border-radius: 100px;
    border: 1px solid var(--ball);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-family-1);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Events — cimkek a kepen, "Betelt" allapot, naptar-gomb */
.card-event .service-media { position: relative; }
.event-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}
.event-tag {
    font-family: var(--font-family-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    padding: 7px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    box-shadow: 0 2px 10px rgba(14, 31, 23, 0.15);
}
.event-tag--few_spots { background: var(--clay); color: #fff; }
.event-tag--sold_out  { background: var(--ink); color: #fff; }
.event-tag--new,
.event-tag--free      { background: var(--ball); color: var(--ink); }
.event-flags .event-tag { box-shadow: none; border: 1px solid var(--accent-color-5); }

.service-cta.is-sold-out {
    cursor: default;
    opacity: 0.55;
    background: var(--accent-color-4);
    border-color: var(--accent-color-5);
}
.service-cta.is-sold-out .btn-title { color: var(--text-color); }
.event-cal i { font-size: 17px; }
/* A naptar-gomb csak erintokepernyos (telefon/tablet) eszkozon latszik */
.event-cal { display: none; }
@media (hover: none) and (pointer: coarse) {
    .event-cal { display: inline-flex; }
}

/* ================================================================
   /admin-bol jovo tartalom (2026-10)
   ================================================================ */

/* Nyelvvalto: 3+ nyelvnel lenyilo lista a gomb folott */
.lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-family-1);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.lang-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 30;
    min-width: 190px;
    padding: 6px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px 8px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-family-1);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.lang-menu-item:hover,
.lang-menu-item:focus-visible { background: var(--accent-color-4); }
.lang-menu-item .lang-code { font-size: 11px; }

/* Szolgaltatas-kartya, ami nem kattinthato */
.card-service.is-static { cursor: default; }

/* Edzo-kartya: az egesz kartya link (ha van), a kozossegi ikonok folotte */
.coach-card .team-img { position: relative; }
.coach-card-link { position: absolute; inset: 0; z-index: 1; }
.coach-card .card-team-wrapper { pointer-events: none; }
.coach-card .coach-social { pointer-events: auto; position: relative; z-index: 2; }
.coach-card .coach-role { margin: 4px 0 0; opacity: 0.85; }

/* GYIK: a valaszban a sortores megmarad */
#faqAccordion .accordion-body { white-space: pre-line; }