/* ===== Alap ===== */
body{ background:#f4f8fc; }

/* ===== Hero ===== */
.hero{
  background:linear-gradient(135deg,#205d98 70%,#ffd600 100%);
  color:#fff; 
  text-align:center; 
  position:relative; 
  overflow:hidden;
  padding:70px 0 40px;
}
.hero img{ 
  max-width:330px; 
  filter:drop-shadow(0 4px 32px #0004); 
  margin-bottom:20px; }

/* ===== Kártyák / ikonok ===== */
.service-icon{
  font-size:2.7rem; 
  color:#205d98; 
  background:#ffd600; 
  border-radius:50%;
  width:64px; 
  height:64px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  margin:0 auto 15px;
  box-shadow:0 2px 10px #0002;
}
.service-icon i{ transition:transform .3s ease,color .3s ease; }
.service-icon i:hover{ transform:scale(1.2) rotate(5deg); color:#ffc107; }

.section-title{ 
  color:#205d98; 
  font-weight:700; 
  margin:50px 0 24px; }

.card{
  border:none; 
  border-radius:18px; 
  box-shadow:0 2px 18px #0001; 
  transition:transform .15s;
}
.card:hover{ transform:translateY(-6px) scale(1.03); }

.contact-link{ 
  color:#ffd600; 
  text-decoration:underline;
   font-weight:600; }

/* ===== Navbar doboz ===== */
.navbar{
  border-radius:2rem; 
  box-shadow:0 0 0 2px #ececec; 
  margin:32px auto 0; 
  padding:.3rem 1.2rem;
  max-width:1300px;
}
.navbar-brand{
  font-weight:900; 
  font-size:2rem; 
  -spacing:1px; 
  color:#232323!important; 
  margin-right:2rem;
}
.nav-link,.navbar-text{ 
  color:#232323!important; 
  font-weight:500; 
  margin:0 .2rem; }

/* Aktív tipográfia – a hátteret a kapszula adja */
.active-capsule{ 
  font-weight:700; 
  color:#232323!important; }

/* ===== CTA gomb ===== */
.btn-cta{ transition:transform .2s ease, box-shadow .2s ease; }
.btn-cta:hover{ transform:scale(1.1); box-shadow:0 .5rem 1rem rgba(255,193,7,.6); }
.btn-cta:active{ transform:scale(.98); box-shadow:0 .3rem .6rem rgba(255,193,7,.5); }

/* ===== Dropdown – ne foglaljon helyet becsukva ===== */
.navbar .dropdown-menu{
  display:none; 
  opacity:0; 
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  position:absolute; 
  inset:auto auto auto 0; 
  z-index:1000;
}
.navbar .dropdown-menu.show{ 
  display:block; 
  opacity:1; 
  transform:translateY(0); }

/* ===== Csúszó kapszula (desktop + mobil) ===== */
.navbar-nav{ position:relative; }
.nav-capsule{
  position:absolute; 
  background:#fff; 
  border-radius:9999px; 
  box-shadow:0 2px 8px #0001;
  transition:left .25s ease, width .25s ease, top .25s ease, height .25s ease;
  z-index:1; 
  pointer-events:none;
}
.navbar-nav .nav-link{ 
  position:relative; 
  z-index:2; 
}

/* ===== Hamburger / mobil finomhangolás ===== */
.navbar-toggler{ 
  border:none; 
  outline:none; 
}
.navbar-toggler:focus{ 
  box-shadow:none; 
}

/* Mobil: kisebb lekerekítés; nav-link inline-block, hogy a kapszula a szöveghez igazodjon.
   A nyelvválasztó előtt kis elválasztó ritmus. */
@media (max-width:991.98px){
  .navbar{ 
    border-radius:1.3rem; 
    padding:.7rem .5rem; }
  .navbar-brand{ 
    font-size:1.5rem; 
  }

  .navbar-collapse .nav-link{
    display:inline-block;        /* fontos a kapszula miatt */
    padding:.55rem 1rem;
    margin-left:.25rem;
    line-height:1.3;
  }

  .navbar-nav .lang-item{
    border-top:1px solid rgba(0,0,0,.08);
    padding-top:.5rem; 
    margin-top:.5rem;
  }
}

/* Modal galéria navigáció */
.gallery-nav{
  position:absolute;
  top:0; bottom:0;
  width:18%;
  border:0; background:transparent;
  cursor:pointer;
  z-index:5;
}
.gallery-prev{ left:0; }
.gallery-next{ right:0; }

/* ikonok */
.gallery-nav i{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:2.2rem;
  color:#fff;
  opacity:.85;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.gallery-nav:hover i{ opacity:1; }

/* opcionális: katt az egész képre -> next */
#galleryModal img{ cursor:pointer; }

/* A modalon belüli nagy overlay gombok ne takarják az X-et */
#galleryModal .gallery-nav{
  top: 56px;                      /* hagyjunk helyet felül az X-nek */
  height: calc(100% - 56px);
  z-index: 1060;                  /* bőven a tartalom fölött */
}

#galleryModal .btn-close{
  z-index: 1065;                  /* az overlay fölé kerüljön biztosan */
}

/* mobilon kicsit kisebb “safe zone” is elég */
@media (max-width: 575.98px){
  #galleryModal .gallery-nav{
    top: 48px;
    height: calc(100% - 48px);
  }
}

/* sliding pill */
.nav-capsule{
  position:absolute;
  left:0; top:0;
  background:#fff;
  border-radius:9999px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform .25s ease, width .25s ease, top .25s ease, opacity .15s ease;
  pointer-events:none;
  opacity:0; /* <- elsőre rejtve, amíg nem mérünk */
  z-index:1;
}
.navbar-nav .nav-link{ 
  position:relative; 
  z-index:2; 
  display:inline-block; 
}

.btn-cta.btn-cta-success:hover {
  transform: scale(1.1);
  box-shadow: 0 0.5rem 1rem rgba(25, 135, 84, 0.6); /* bootstrap success */
}
.btn-cta.btn-cta-success:active {
  transform: scale(0.98);
  box-shadow: 0 0.3rem 0.6rem rgba(25, 135, 84, 0.5);
}

/* Hover – ha nem aktív */
.custom-hover:hover:not(.active) {
  background-color: var(--bs-warning) !important;
  color: #000 !important;
  border-color: var(--bs-warning) !important;
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}

/* Aktív gomb (mindig maradjon árnyék) */
.custom-hover.active {
  background-color: var(--bs-warning) !important;
  color: #fff !important;
  border-color: var(--bs-warning) !important;
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.25) !important;
}

/* Ha épp kattintva van (egér lenyomás közben is maradjon) */
.custom-hover:active {
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.25) !important;
}


/* A modál max szélessége (asztali) */
#galleryModal .modal-dialog {
  max-width: min(1100px, 95vw);
}

/* A képszínpad: minden kép ebben jelenik meg aránytartóan */
.gallery-stage {
  width: 100%;
  height: clamp(360px, 72vh, 820px);  /* fix-érzet, de reszponzív */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;  /* fekete háttér, mint most */
  overflow: hidden;  /* ne lógjon ki semmi */
}

/* A kép aránytartóan férjen bele a színpadba */
.gallery-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;  /* fontos: ne torzuljon */
}

/* Navigációs overlay gombok a színpad fölött maradjanak */
#galleryModal .gallery-nav {
  top: 56px;                           /* ne takarja a bezáró gombot */
  height: calc(72vh - 56px);           /* pont a stage magasságához igazítva */
}
@media (max-width: 576px) {
  .gallery-stage { height: 60vh; }
  #galleryModal .gallery-nav { height: calc(60vh - 48px); top: 48px; }
}


/* Reszponzív, nagy méret – 260px és 500px között, nézethez igazítva */
.lottie-wrap {
  --lottie-size: clamp(260px, 34vw, 500px);
}

.lottie-wrap dotlottie-wc {
  width: var(--lottie-size);
  height: var(--lottie-size);   /* a webkomponensnek kell fix magasság is */
  display: block;
}

/* Ha túl közel van a szöveghez, kis távolság: */
@media (min-width: 992px) {
  .lottie-wrap { margin-left: 1rem; }
}


/*Nyelvválaszto pointer*/
.dropdown-item {
  cursor: pointer;
}


/* Alap: legyen picit lejjebb és áttetsző */
.navbar .dropdown-menu {
  display: block;                 /* hogy animálható legyen */
  opacity: 0;
  visibility: hidden;
  margin-top: 8px;                /* innen fog „felcsúszni” */
  transition: opacity .25s ease, margin-top .25s ease, visibility 0s linear .25s;
}

/* Nyitott állapot: teljesen látszik, feljebb csúszva */
.navbar .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
  transition: opacity .25s ease, margin-top .25s ease, visibility 0s;
}

.navbar .dropdown-menu { transition-delay: .1s, .1s, 0s; }


/* XL alatt: carousel legyen hangsúlyosabb felül */
@media (max-width: 1199.98px) {
  .hero-card .hero-left .ratio {
    /* magasabb képarány (alap 56.25% helyett) */
    --bs-aspect-ratio: 42%;
  }
  .hero-card .left-content {
    max-width: 100%;
  }
  .hero-card .btn-cta {         /* gombok kényelmesebbek mobilon */
    width: 100%;
  }
}











/* XS–LG: alul vágás, de színesség marad */
@media (max-width: 1199.98px) {
  .hero-left {
    overflow: hidden; /* levágja, ami túl lóg alul és jobbra */
  }
  .hero-left .lottie-bg {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    opacity: 1; /* teljes szín */
  }
}

/* XL+: semmi vágás, teljes szín */
@media (min-width: 1200px) {
  .hero-left {
    overflow: visible;
  }
  .hero-left .lottie-bg {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    opacity: 1;
  }
}




/* --- KL Hero Lottie: végleges, ütközésmentes verzió --- */
.hero-left { position: relative; }

/* háttérként, mindig legyen méret */
.hero-left .lottie-bg{
  position:absolute;
  inset:-30% -5% auto -30%;
  width:160%;
  height:160%;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

/* a host mérete – ez számít! */
.hero-left .lottie-bg dotlottie-wc{
  display:block;
  width:100%;
  height:100%;
  transform:scale(1.15);
}



@media (max-width: 576px) {
  .ratio.ratio-16x9 {
    --bs-aspect-ratio: 66% !important; /* kicsit magasabb mobilon */
  }
}

@media (max-width: 576px) {
  #heroCarousel {
    min-height: 240px; /* vagy amekkora jól néz ki */
  }
}

/* --- Lottie védőréteg: semmi util ne tudja lenullázni --- */
.hero-left .lottie-bg { position:absolute; inset:-30% -5% auto -30%; width:160%; height:160%; pointer-events:none; z-index:0; overflow:hidden; }

.hero-left .lottie-bg,
.hero-left .lottie-bg dotlottie-wc {
  display:block !important;
  visibility:visible !important;
}

.hero-left .lottie-bg dotlottie-wc {
  width:100% !important;
  height:100% !important;
  transform:scale(1.15) !important; /* a .noTransform ellen is */
}

@media (max-width: 1199.98px){
  .hero-left { overflow:hidden; }
  .hero-left .lottie-bg {
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  }
}
@media (min-width: 1200px){
  .hero-left { overflow:visible; }
  .hero-left .lottie-bg {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }
}