/* ================================
             Kezdőlap
   ================================ */

html{
  scrollbar-color: #5B242A #BE9C83;
  width: 100%;
  max-width: none;
  margin: auto;
}

/* Csak nagyon széles, ultrawide nézetet fogunk vissza. */
@media (max-height: 1200px){
  html{
    max-width: 2000px;
  }
}

@media (max-height: 1400px){
  html{
    max-width: 2600px;
  }
}

body{
  font-family: "Cormorant Infant", serif;
  font-weight: 300;
  font-style: normal;
  background-color: white;
  font-size: clamp(14px, 1.2vw, 24px);
  overflow-x: hidden;
}

.right-section, .version-b, .arakcim, .gyik-page{
  padding-top: 10px;
}

footer{
  background-color: #5B242A;
  color: white; 
  padding: 1em;
  font-size: clamp(12px, 1.1vw, 24px);
  position: relative;
  z-index: 2;
}

footer img{
  width: 50%;
  min-width: 70px;
}

footer table{
  width: 40%;
  margin: 0 auto;
  text-align: center;
}

@media (max-width:900px) {
  footer table{
    width: 100%;
  }
}

footer hr{
  border-top: 1px solid white;
  opacity: 1;
  margin-left: -1em;
  margin-right: -1em;
}

footer p{
  margin-bottom: 0;
}

footer a{
  color: white;
  text-decoration: none;
}

footer .quote{
  margin-top: auto;
  font-size: clamp(14px, 1.3vw, 24px);
}

@media (max-width:375px) {
  footer{
    font-size: 11px;
  }
  footer .quote{
    font-size: 12px;
  }
}

.felkover{
  font-weight: bold;
}

.mediaicon {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #BE9C83;
  color: white;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.35s ease;
}

.mediaicon:hover{
  background-color: #BE9C83;
  color: white;
  transform: scale(1.08);
}

.mediaicon:focus, .mediaicon:active, .mediaicon:focus-visible{
  background-color: #BE9C83;
  color: white;
}

.navbar {
  --bs-navbar-color: #fff;
  font-size: large;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
  background-color: #BE9C83;
  padding: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  flex-direction: column;
  align-items: stretch;
}

.navbar > .container-fluid {
  width: 100%;
}

.navbar-top-strip {
  height: 20px;
  min-height: 20px;
  width: 100%;
  flex: 0 0 100%;
  background-color: #5B242A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 0.8vw, 14px);
  padding: 0 1rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.navbar-nav .nav-item {
    flex: 1 1 0;
    text-align: center;
}

.nav-item .nav-link{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Dropdown kinézet egységesítése */
.dropdown-menu {
    width: 100%;
    border: none;
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dropdown-item {
    text-align: center;
    color: white;
    padding-top: .9rem;
    padding-bottom: .9rem;
    background-color: #BE9C83;
}

.dropdown-item:hover {
    color: #BE9C83;
    background-color: white;
}

/* Fő nav-link hover */
.nav-link:hover {
    color: #BE9C83;
    background-color: white;
}

.uzenet{ 
    background-color: #5B242A;
    border: #BE9C83 2px solid;
    border-bottom: #BE9C83 3px solid;
}
.uzenet:hover{ color: #5B242A; }

/* ================================
   DROPDOWN SLIDE-DOWN ANIMÁCIÓ
   ================================ */
.navbar .dropdown-menu {
  display: block !important;
  position: static;
  width: 100%;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(-4px);
  transition:
    max-height .5s ease,
    opacity .5s ease,
    transform .5s ease,
    visibility 0s linear .5s;
}

/* ==============================================
   DROPDOWN SLIDE-DOWN ANIMÁCIÓ MOBILOS NÉZETBEN
   ============================================== */
.navbar .dropdown-menu.show {
  max-height: 800px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    max-height .5s ease,
    opacity .5s ease,
    transform .5s ease,
    visibility 0s;
}

@media (min-width: 451px) {
  .alap{
  height: 100vh;
  min-height: 700px;
}
}

@media (min-width: 992px) {
  /* Desktop: hoverre nyisson */
  .navbar .dropdown:hover > .dropdown-menu {
    max-height: 800px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      max-height .5s ease,
      opacity .5s ease,
      transform .5s ease,
      visibility 0s;
    }

    .alap{
        min-height: 720px;
    }
}


@media (max-width: 450px) {
  .alap{
    height: 670px;
  }
  .right-section{height: 370px;}
}



/* Mobilos dropdown-nyíl ikon stílus */
.navbar .dropdown-toggle {
  position: absolute;
  right: .75rem;
  transform: translateY(-50%);
  top: 25px;
  z-index: 1;
  padding: .25rem .5rem;
}

/* nyíl forduljon le/fel nyitáskor */
.navbar .dropdown-toggle::after {
  transition: transform .2s ease;
}
.navbar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.navbar .dropdown-toggle::after {
    margin-left: .35rem;
}

/* A fej blokk legyen a pozicionálási referencia */
.dropdown-head { position: relative; }

/* Fő oldal 2 része */

.left-section {
  background-color: #5B242A;
  color: white;
  text-align: center;
  font-size: clamp(20px, 2.5vw, 56px);
}
.right-section {
  background-color: white;
  color: #5B242A;
  background-size: cover;
}


/* Mobilos nézet */
@media (max-width: 992px) {
  .left-section {
    height: 33%; /* mobilon felül 1/3 */
    min-height: 300px;
  }
  #rotating-text {
  width: 150px;
  }
  .montage-text {
  font-size: clamp(22px, 3vw, 56px);
  margin-bottom: 1rem;
  text-align: center;
  }

  /* kör szöveg stílus */
  #rotating-text textPath {
    font-size: 92%;
    font-family: "Poppins";
    letter-spacing: 1.28rem;
    fill: #ffffff;
  }

  .idezetsor{
    height: 70%;
    margin-top: 40px;
  }

  .forgosor{
    margin-top: -40px;
    height: 30%;
  }

  .balcella{
    width: 80%;
    padding: 20px;
    font-weight: 500;
    margin: auto;
  }

  .fokep{
    width: 95%;
  }
}

.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active,
.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle:active,
.navbar .dropdown-toggle:focus-visible {
  box-shadow: none;
  outline: none;
  background-color: transparent;
  color: white;
}


.montage {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;   
  overflow: hidden;
  margin-top: 10px;
}

.m-img {
  opacity: 0;
  position: absolute;
  object-fit: cover;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
}

.slide-up    { transform: translateY(40px); }
.slide-down  { transform: translateY(-40px); }
.slide-left  { transform: translateX(40px); }
.slide-right { transform: translateX(-40px); }

.fade-in {
  transform: none;
}


/* Asztali nézet */
@media (min-width: 992px) {

.montage-text {
  font-size: clamp(20px, 2.8vw, 56px);
  margin-bottom: 1rem;
  text-align: center;
}


#rotating-text {
  width: 80%;
}

/* kör szöveg stílus */
#rotating-text textPath {
  font-size: 35%;
  font-family: "Poppins";
  fill: #ffffff;
}
.idezetsor,
.forgosor{
  height: 50%;
}

.balcella{
  width: 60%;
  padding: 40px;
  float: right;
}

.fokep{
  width: 75%;
}
.montage-overlay.animate{left: 10%; top:1.5%;}
}


@media (min-width: 992px)
{
  .img-1 { top: 3%; left: 0; width: 35%;} /* le */
  .img-2 { top: 9%; left: 31%; width: 17%;} /* jobbra */
  .img-3 { top: 1%; right: 2%; width: 46%;} /* egy helyben */
  .img-4 { top: 40%; right: 0; width: 19%;} /* balra */
  .img-5 { bottom: 4%; right: 13%; width: 17%;} /* le */
  .img-6 { bottom: 4%; left: 24%; width: 39%; z-index: 2;} /* fel */
  .img-7 { bottom: 8%; left: 2%; width: 27%; z-index: 1;} /* balra */
}

@media (601px <= width <= 992px){
  .img-1 { top: 13%; left: 0; height: 29%;} /* le */
  .img-2 { top: 5%; left: 31%; height: 32%;} /* jobbra */
  .img-3 { top: 4%; right: 2%; height: 38%;} /* egy helyben */
  .img-4 { top: 40%; right: 3%; height: 35%;} /* balra */
  .img-5 { bottom: 10%; right: 16%; height: 32%;} /* le */
  .img-6 { bottom: 4%; left: 26%; height: 33%; z-index: 2;} /* fel */
  .img-7 { bottom: 13%; left: 0; height: 45%; z-index: 1;} /* balra */
}

@media (max-width: 600px){
  .img-1 { top: 13%; left: 0; width: 35%;} /* le */
  .img-2 { top: 5%; left: 31%; width: 17%;} /* jobbra */
  .img-3 { top: 4%; right: 2%; width: 46%;} /* egy helyben */
  .img-4 { top: 40%; right: 3%; width: 19%;} /* balra */
  .img-5 { bottom: 10%; right: 16%; width: 17%;} /* le */
  .img-6 { bottom: 4%; left: 26%; width: 39%; z-index: 2;} /* fel */
  .img-7 { bottom: 13%; left: 0; width: 25%; z-index: 1;} /* balra */
}


@media (max-height: 930px){
.img-2 {max-width: 170px;}
.img-3 {max-width: 500px;}
.img-6 {max-width: 400px;}
.img-7 {max-width: 300px;}
}

@media (450px <= width <= 992px){
  .right-section{
  height: 60%;
  min-height: 370px;
  }
}

/* csak a körszöveg forog */
.circle-text {
  transform-origin: 50% 50%;
  animation: rotation 60s linear infinite;
}

/* középső szöveg */
.center-text {
  font-size: 60px;
  font-family: "Cormorant Infant";
  fill: #ffffff;
  font-weight: 300;
  letter-spacing: 2px;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.gomb{
    color: white;
    background-color: #5B242A;
    border-color: #5B242A;
    font-size: clamp(18px, 1.6vw, 32px);
    border-radius: 0;
    width:fit-content;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.uzenetgomb{
  color: white;
  background-color: #5B242A;
  border-color: #5B242A;
  font-size: clamp(15px, 1.6vw, 32px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
  width: fit-content;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.uzenetgomb:hover{
    color: #5B242A;
    background-color: white;
    border-color: #5B242A;
}

.gomb:hover{
    color: #5B242A;
    background-color: white;
    border-color: #5B242A;
}

.csomaggomb{
  margin: auto;
  display: block;
  font-size: clamp(22px, 2vw, 40px);
  width: fit-content;
}

.balcella{
  background-color: white;
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: clamp(14px, 1.4vw, 24px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
  text-align: justify;
  opacity: 0;
  transform: translateY(-40px); /* felülről jön le */

}
h1{
  color: #5B242A;
  font-size: 300%;
}

.kozepcella{
  line-height: 1;
  padding: 1em;
  text-align: center;
  font-size: clamp(25px, 2.5vw, 56px);
  background-color: white;
  color: #5B242A;
  overflow: hidden;
}

.fokep{
  margin-top: 50px;
  margin-bottom: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(40px);  /* alulról jön fel */
}

.fokepmobil{
  height: 200px;
  float: right;
  margin-top: -50px;
  margin-left: 10px;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);;
}

.left-section {
  transform: translateX(-100%);
}

.idezet {
  opacity: 0;
  transform: translateY(20px);
}

.forgocella {
  opacity: 0;
}

/* Animálások */
.left-section.animate {
  transform: translateX(0);
  transition: all 1s ease;
}

.idezet.animate {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

.forgocella.animate {
  opacity: 1;
  transition: opacity 0.6s ease;
}

.montage-overlay {
  opacity: 0;
  transition: opacity 0.6s ease;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  top: 3%;
}

.montage-overlay.animate {
  opacity: 1;
}


/* AKTÍV ÁLLAPOT */
.balcella.animate,
.fokep.animate
{
  opacity: 1;
  transform: translateY(0) translateX(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}


.gallery {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  grid-auto-flow: dense;
  border-top: white 6px solid;
  border-bottom: white 6px solid;
}

/* ÖSSZEVONÁSOK */
.fekvo {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.allo {
  grid-row: span 2;
  aspect-ratio: 2 / 3;
}

.negyzet {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
}

.csuszik{
  margin-top: -26%;
}

.item {
  overflow: hidden;
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .csuszik{
    margin-top: 0;
  }
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fekvo img {
  object-position: center 30%;
}

.fadein {
  opacity: 0;
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.fadein.is-visible {
  opacity: 1;
}

.fadeinleft {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.fadeinleft.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fadeinright {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.fadeinright.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.popup {
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.3s ease,
    transform 0.6s cubic-bezier(.34, 1.56, .64, 1);
}

.popup.is-visible {
  opacity: 1;
  transform: scale(1);
  animation: popupBounce 0.2s ease forwards;
}


@keyframes popupBounce {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* ================================
            Bemutatkozás
   ================================ */

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

.box {
  padding: 2rem;
}

.elsobekezd{
  background-image: linear-gradient(to bottom, #BE9C83, #be9c83bd);
  padding: 2em;
  padding-bottom: 0;
  text-align: justify;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
  margin-bottom: 2em;
}

.elsokep img{
  width: 100%;
}

.elsokep, .mobilcim{
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.3s ease,
    transform 0.6s cubic-bezier(.34, 1.56, .64, 1);
}

.elsokep.animate, .mobilcim.animate{
  opacity: 1;
  transform: scale(1);
  animation: popupBounce2 0.2s ease forwards;
}

@keyframes popupBounce2 {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.masodikbekezd{
  position: relative;
  background-color: white;
  padding: 2em;
  padding-bottom: 0;
  text-align:justify;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
  margin-bottom: 2em;
  z-index: 2;
}
.masodikkep img{
  width: 100%;
}


.layout {
  background: linear-gradient(
    to bottom,
    white 55%,
    #BE9C83 45%
  );
  padding: 2em;
  margin-top: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "bal-felso jobb"
    "bal-also  jobb";
  gap: 1rem;
}

/* Asztali */
@media (min-width: 992px){
  .elsobekezd{
    width: 40%;
    margin-top: 2em;
    transform: translateX(-150%);
  }
  .elsobekezd.animate{
    transform: translateX(0);
    transition: all 1s ease;
  }

  .elsokep{
  width: 40%;
  }

  .masodikbekezd{
    width: 40%;
    margin-top: 2em;
    transform: translateY(100px);
  }

  .masodikkep{
    width: 50%;
    padding: 0;
    opacity: 0;
    transform: translateY(-80px);
  }
  
  .masodikkep.animate, .masodikbekezd.animate{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }


  .bal-also, .bal-felso{
    width: 80%;
    height: fit-content;
    opacity: 0;
    transform: translateY(-80px);
  }

  .bal-also.animate, .bal-felso.animate{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .bal-felso{
    margin-bottom: 4em;
  }

  .shift-left {
  left: 8%;
}
}
/* MOBIL */
@media (max-width: 992px) {
  .version-a {
    flex-direction: column;
    overflow: hidden;
  }
  .version-b {
    flex-direction: column-reverse;
  }

  .elsobekezd, .elsokep, .masodikbekezd, .masodikkep{
    width: 80%;
  }

  .elsobekezd{
    transform: translateY(100px);
    opacity: 0;
  }

  .elsobekezd.animate{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .masodikkep{
    padding: 2em 0 0 0;
    transform: translateX(-120%);
  }

  .masodikbekezd{
    transform: translateX(120%);
  }

  .masodikkep.animate, .masodikbekezd.animate{
    transform: translateX(0);
    transition: all 1s ease;
  }
  .elsokep{
    margin-top: 8%;
  }
  
  .elsokep img{
    position: relative;
    margin-left: 25%;
    z-index: 1;
  }

  .bal-also, .bal-felso{
    margin: auto;
  }

  .bal-felso{
    opacity: 0;
    transform: translateY(80px);
  }

  .bal-also{
    transform: translateY(40%);
    opacity: 0;
  }

  .bal-also.animate, .bal-felso.animate{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .mobilcim{
    font-size: clamp(20px, 6vw, 50px);
    margin-bottom: -30%;
    margin-left: -8%;
    position: relative;
    z-index: 2;
  }

  .bal-also, .bal-felso{
    width: 90%;
  }
}

.bal-felso{
  background-image: linear-gradient(to bottom, #BE9C83, #be9c83bd);
  padding: 2em;
  padding-bottom: 0;
  text-align: justify;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 2;
}

.bal-also{
  background-color: white;
  padding: 2em;
  text-align: justify;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 2;
}

@media (max-width: 450px){
  .elsobekezd, .masodikbekezd, .bal-also, .bal-felso{
    width: 95%;
    padding: 1.25em;
    padding-bottom: 0;
  }

  .masodikkep{
    width: 95%;
  }

  .layout{
    padding: 0;
  }


  .bal-also{
    padding-bottom: 1.25em;
    margin-bottom: 1em;
  }
}


.bal-felso { grid-area: bal-felso; }
.bal-also  { grid-area: bal-also; }
.jobb      { grid-area: jobb;}

@media (max-width: 992px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bal-felso"
      "jobb"
      "bal-also";
  }
}

.timeline td{
  padding: 0 2% 0 2%;
  position: relative;
  width: 50%;
  vertical-align: top;
}

.timeline p{
  margin-top: 0.5rem;
  color: #5B242A;
  font-style: italic;
  text-align: center;
}

.timeline-kep-szoveg{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-kep-szoveg p{
  margin-top: -1rem;
}

.timeline img{
   width: 100%;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
}

.timeline{
  width: 100%;
}

.vonal{
  height: 1100%;
  width: 3px;
  background-color: black;
  position: absolute;
  right: 0;
  top: 140%;
  transform: translateY(-50%) translateX(50%);
  z-index: 1;
}

.mobilvonal{
  position: absolute;
  top: 100%;               /* pontosan az aljától indul */
  left: 50%;               /* vízszintes közép */
  transform: translateX(-50%);
  
 
  width: 3px;
  background-color: black;
  z-index: 1;
}

.timepoint{
  width: 4%;
  aspect-ratio: 1;
  background-color: black;
  border-radius: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
}


.shift-right {
  transform: translateX(-10%);
}

@media (max-width: 992px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bal-felso"
      "jobb"
      "bal-also";
  }

  .shift-right {
    transform: none;
  }

  .csomagalap{
    padding-top: 60px;
  }
}

@media (min-width: 992px){
  .csomagalap{
    padding-top: 70px;
  }
}

.csomagalap{
  height: 100vh;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #BE9C83;
}

.csomagcim{
  background-color: white;
  flex: 1 0 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(24px, 2.4vw, 50px);
  margin: 0;
}

.arak-stats{
  background-color: white;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22, .61, .36, 1);
}

.arak-stats-hidden {
  opacity: 1;
  transform: translateY(100%);
}

.arak-stats-visible {
  opacity: 1;
  transform: translateY(0);
}

.csomagcontainer {
  flex: 0 1 70%;
  min-height: fit-content;
  padding: 0.5rem 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: nowrap; /* NE törje sorba */
  background-color: #BE9C83;
}

.csomagok {
  width: 18%;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top-left-radius: 12em 12em;
  border-top-right-radius: 12em 12em;
  transform-origin: center center;
}

.csomagok img {
  width: 100%;
  object-fit: cover;
  border-top-left-radius: 12em 12em;
  border-top-right-radius: 12em 12em;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4),
              0 6px 20px rgba(0,0,0,0.6);
}

.csomag-leiras {
  width: 100%;
  background-color: #fff;
  padding: 1em 1em 0 1em;
  font-size: clamp(14px, 0.9vw, 22px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.4),
              0 6px 20px rgba(0,0,0,0.6);
}

.csomagkezdes .arakcim,
.csomagkezdes .araktext {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.csomagkezdes .arakcim.animate,
.csomagkezdes .araktext.animate {
  opacity: 1;
  transform: translateY(0);
}

.arakcim{
  text-align: center;
  font-size: clamp(32px, 2.6vw, 50px);
}

.araktext{
  text-align: center;
  font-size: clamp(22px, 2.4vw, 50px);
}

.csomag-leiras h3{
  font-size: clamp(14px, 1.2vw, 22px);
  text-align: center;
  color: #5B242A;
}

.tovabb{
  float: right;
  text-align: center;
  color: #5B242A;
  scroll-margin-top: 80px;
  line-height: 100%;
  margin-bottom: 1em;
}

#orak, #fotoalbum{
    scroll-margin-top: 90px;
}

#elvegeztem{
  scroll-margin-top: 0px;
}

.csomagok {
  transition: transform 0.38s cubic-bezier(.22, .61, .36, 1),
              box-shadow 0.38s ease;
  will-change: transform;
}

a.csomagok,
a.csomagok:visited {
  color: inherit;
  text-decoration: none;
}

.csomag-nav {
  display: none;
}

@media (max-width: 992px) {
  .csomagcontainer {
    opacity: 0;
    position: relative;
    min-height: 33rem;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
  }

  .csomagcontainer .csomagok {
    position: absolute;
    width: min(72%, 15rem);
    margin: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
  }

  .csomagcontainer .csomagok:hover {
    transform: none;
  }

  .csomagcontainer .csomagok.is-active {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 3;
  }

  .csomagcontainer .csomagok.is-prev {
    transform: translateX(-73%) scale(0.9);
    opacity: 0.35;
    z-index: 2;
  }

  .csomagcontainer .csomagok.is-next {
    transform: translateX(73%) scale(0.9);
    opacity: 0.35;
    z-index: 2;
  }

  .csomagcontainer .csomagok.is-hidden {
    transform: translateX(0) scale(0.8);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }

  .csomag-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.88);
    color: #5B242A;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }

  .csomag-nav-prev {
    left: 6%;
  }

  .csomag-nav-next {
    right: 6%;
  }

}


#value,
#value2 {
  display: inline-block;
  min-width: 2ch;
  color: #5B242A;
  font-weight: 600;
}


.araktext-typing {
  min-height: 1.3em;
}

.araktext-typing.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 0.08em;
  vertical-align: -0.1em;
  background-color: #5B242A;
  animation: blinkCaret 0.7s steps(1) infinite;
}

@keyframes blinkCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.csomagok.csomag-load-hidden {
  opacity: 0;
  transform: translateX(-45px) scale(0.85);
}

.csomagok.csomag-load-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: popupBounce2 0.35s ease forwards;
}

.fade-stat {
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 992px) {
  .csomagcontainer.csomag-load-hidden-mobile {
    opacity: 0;
  }

  .csomagcontainer.csomag-load-visible-mobile {
    opacity: 1;
    transition: opacity 0.8s ease;
  }
}

/* ======================================================= */
/* Desktop hover effect must override animation transforms */
/* ======================================================= */
@media (min-width: 992px) {
  /* original rule moved here (and forced) to ensure it wins
     against later animation rules that also set transform */
  .csomagok:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    cursor: pointer;
  }
}


h2{
  color: #5B242A;
  font-size: clamp(20px, 1.8vw, 35px);
  margin-bottom: 0;
}

.csomagkezdes{
  background-color: #BE9C83;
  padding-top: 60px;
  margin-bottom: 0.85em;
}

.csomagar{
  overflow: hidden;
  font-size: clamp(14px, 0.95vw, 22px);
  min-width: 350px;
  background-color: white;
  color: #5B242A;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4),
              0 6px 20px rgba(0,0,0,0.6);
}

.csomagar:hover{
  transform: scale(1.06);
}

.csomagar {
  transition: transform 0.35s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.35s ease;
}

a.csomagar {
  display: block;
  color: #5B242A;
  text-decoration: none;
  cursor: pointer;
}

a.csomagar:visited {
  color: #5B242A;
}

a.csomagar:focus-visible {
  outline: 3px solid #5B242A;
  outline-offset: 0.35rem;
}

.csomagar ul{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.alapcsomag{
  width: 22%;
  padding: 0;
  padding-bottom: 5px;
  border-top-left-radius: 13em 11em;
  border-top-right-radius: 13em 11em;
}

.alapcsomag img{
  width: calc(100% + 2em);
  object-fit: cover;
  aspect-ratio: 2 / 1;
  margin-bottom: 5px;
  margin-left: -1em;
  margin-right: -1em;
}

.maxicsomag img{
  width: calc(100% + 2em);
  object-fit: cover;
  aspect-ratio: 3 / 1;
  margin-bottom: 5px;
  margin-left: -1em;
  margin-right: -1em;
  border-left: white 15px solid;
  border-right: white 15px solid;
}

.maxicsomag{
  width: 24%;
  padding: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.maxicsomag::before{
  content: "";
  position: absolute;
  inset: 0;
  border: gold 8px double;
  pointer-events: none;
  z-index: 1;
}

.csomagkezdes .alapcsomag,
.csomagkezdes .maxicsomag,
.csomagkezdes .egyedicsomag,
.csomagkezdes .uzenetgomb {
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.csomagkezdes .uzenetgomb {
  transition: opacity 0.45s ease, transform 0.45s ease,
              background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.csomagkezdes .alapcsomag.animate,
.csomagkezdes .maxicsomag.animate,
.csomagkezdes .egyedicsomag.animate,
.csomagkezdes .uzenetgomb.animate {
  opacity: 1;
  transform: scale(1);
  animation: popupBounce2 0.25s ease;
}

.csomagkezdes .alapcsomag.animate:hover,
.csomagkezdes .maxicsomag.animate:hover,
.csomagkezdes .egyedicsomag.animate:hover {
  transform: scale(1.04);
}



.megeri{
  text-align: center;
  position: absolute;
  top: 6%;
  padding: 0.1em 0.1em 0.1em 0.1em;
  width: 60%;
  right: -20%;
  color: white;
  transform:rotateZ(45deg);
  transform: rotateZ(45deg);
  background-image: linear-gradient(to right, #311417, #81454c, #311417);
  z-index: 2;
}

.egyedicsomag{
  text-align: justify;
  width: 35%;
  padding: 1em;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: auto;
    font-size: clamp(18px, 1.2vw, 28px);
}

.egyedicsomag img{
  width: calc(100% + 2em);
  object-fit: cover;
  aspect-ratio: 3 / 1;
  object-position: center 35%;
  margin: -1em;
  margin-bottom: 1.5em;
}

.csomagar-row{
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media (min-width: 590px) {
  .alapcsomag{
    margin-top: -1em;
  }

  
}
.kiemelt{
  margin-bottom: 0;
  color: white;
  background-image: linear-gradient(to right, #311417, #81454c, #311417);
  text-align: center;
  padding: 0.7em 0.7em 0.7em 0.7em;
  font-size: clamp(16px, 1vw, 28px);
}

.hosszuleiras{
  max-width: 1250px;
  padding: 2em;
  padding-top: 1.5em;
  width: 70%;
  text-align: justify;
  margin: auto;
  margin-bottom: 2em;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4),
              0 6px 20px rgba(0,0,0,0.6);
}

.hosszuleiras {
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hosszuleiras.animate {
  transform: translateY(0);
  opacity: 1;
}

.hosszuleiras img{
  width: 40%;
}

.hosszuleiras h3{
  font-size: clamp(16px, 1.6vw, 33px);
}

@media (max-width: 992px) {
  .hosszuleiras{
    width: 90%;
  }

  .hosszuleiras img{
  width: 100%;
}
}

.title-underline{
  width: 10%; 
  min-width: 90px;
  height: auto;
  display: block;
  margin: auto;
  color: #6b2a3a; 
}

.section-title{
  text-align:center;
  color:#6b2a3a;
}



@media (min-width: 992px) {
  .gyik-page {
  margin-top: 60px;
  margin-bottom: 1.5em;
  width: 60%;
  }
}

@media (max-width: 992px) {
  .gyik-page {
  margin-top: 50px;
  margin-bottom: 20px;
  width: 95%;
  }

  .gyikkep {
    margin: auto;
  }
}


.gyik-main-title {
  opacity: 0;
  transition: opacity 0.8s ease;
  text-align: center;
  font-size: clamp(22px, 2.4vw, 50px);
}

.gyik-main-title.is-visible {
  opacity: 1;
}


.gyik-wrapper {
  display: flex;  
  justify-content: center; 
  gap: 1.5em;
  width: 100%;
  margin: auto;
}

@media (min-width: 992px) {
  .gyik-wrapper {
    align-items: flex-start;
  }
}

.gyik-item {
  border: 1px solid #e8d8cc;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
  width: 100%;
}

.gyik-question {
  width: 100%;
  border: 0;
  background-color: #BE9C83;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 10px 12px;
  font-size: clamp(14px, 1.1vw, 20px);
}

.gyik-question h2{
  font-size: clamp(20px, 1.6vw, 32px);
  color: white;
}

.gyik-question:hover {
  background-color: #5B242A;
}


.gyik-arrow {
  transition: transform .35s ease;
  font-size: 1.2em;
  line-height: 1;
  margin-left: 10px;
}

.gyik-answer {
  text-align: justify;
  max-height: 0;
  padding: 0 0.6em;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity: 0;
  transition: max-height .5s ease, opacity .35s ease, padding .35s ease;
  scrollbar-width: thin;
  scrollbar-color: #5B242A #f4e8df;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.gyik-answer::-webkit-scrollbar {
  width: 8px;
}

.gyik-answer::-webkit-scrollbar-track {
  background: #f4e8df;
}

.gyik-answer::-webkit-scrollbar-thumb {
  background-color: #5B242A;
  border-radius: 999px;
  border: 2px solid #f4e8df;
}

.gyik-answer p {
  margin: 0;
  margin-bottom: 0.5em;
  color: black;
  background-color: #fff;
}

.gyik-answer img{
  width: 50%;
  display: block;
  margin-left: 20%;
}

.gyik-answer h3{
  padding: 0.6em 0em 0.3em 0em;
  margin-bottom: 0;
  margin-top: 10px;
  font-size: clamp(16px, 1.4vw, 24px);
}

.gyik-item.active .gyik-arrow {
  transform: rotate(180deg);
}

.gyik-item.active .gyik-answer {
  opacity: 1;
  padding: 0.6em;
  overflow-y: auto;
}

.gyik-item.active .gyik-answer.gyik-answer-fit-content {
  overflow-y: hidden;
}

.gyikkep{
  width: 55%;
}

.gyik-image-intro {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.gyik-image-intro.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.gyikkep img{
  float: right;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4),
              0 6px 20px rgba(0,0,0,0.6);
}

@media (min-width: 992px) {
  .gyikkep {
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
  }

  .gyikkep img {
    float: none;
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }

  .gyik {
    flex: 1 1 0;
    min-width: 0;
  }
}

.gyik{
  width: 100%;
}

.gyik-item-intro {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.gyik-item-intro.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.pikto{
  color: #5B242A;
  text-align: center;
  width: 100%;
  background-color: #BE9C83;
}


.pikto table {
  margin: auto;
  width: 50%;
  border-collapse: separate;
  border-spacing: 0 1em;
}


.pikto img{
  width: 35%;
  margin: auto;
  display: block;
}

.pikto-cell {
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.34, 1.56, .64, 1);
}

.pikto-cell.is-visible {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 992px) {
  .pikto table {
    width: 100%;
  }
  
  .pikto img{
    width: 50%;
  }
}

/* ================================
            Vélemények
   ================================ */


.velemeny-page {
  padding-top: 70px;
  padding-bottom: 2rem;
  max-width: none;
}

.velemeny-main-title {
  text-align: center;
  font-size: clamp(22px, 2.4vw, 50px);
  color: #5B242A;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.velemeny-main-title.animate{
  opacity: 1;
}

.velemeny-layout {
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 80%;
}

.velemeny-left,
.velemeny-right {
  width: 50%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.velemeny-right.animate {
  opacity: 1;
}

.velemeny-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.velemeny-right img {
  width: 70%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4),
              0 6px 20px rgba(0,0,0,0.6);
}

.velemeny-slider {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  padding: 1rem;
}

.velemeny-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.45s ease;
}

.velemeny-slide.is-on-left {
  transform: translateX(-100%);
}

.velemeny-slide.is-active {
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.velemeny-slide.is-entering-next,
.velemeny-slide.is-entering-prev,
.velemeny-slide.is-leaving-next,
.velemeny-slide.is-leaving-prev {
  visibility: visible;
}

.velemeny-slide.is-entering-next {
  transform: translateX(100%);
}

.velemeny-slide.is-entering-prev {
  transform: translateX(-100%);
}

.velemeny-slide.is-leaving-next {
  z-index: 1;
  transform: translateX(-100%);
}

.velemeny-slide.is-leaving-prev {
  z-index: 1;
  transform: translateX(100%);
}

.velemeny-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.75rem;
}

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

.velemeny-gomb {
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.45s ease, transform 0.45s ease,
              background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.velemeny-gomb.animate {
  opacity: 1;
  transform: scale(1);
  animation: popupBounce2 0.25s ease forwards;
}

.velemeny-slider .csomag-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 999px;
  background-color: #5B242A;
  color: white;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.velemeny-nav-prev {
  left: 1rem;
}

.velemeny-nav-next {
  right: 1rem;
}

.velemeny-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0;
}

.velemeny-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: none;
  background-color: rgba(91, 36, 42, 0.35);
  cursor: pointer;
  padding: 0;
}

.velemeny-dot.is-active {
  background-color: #5B242A;
}

@media (min-width: 992px) {
  .velemeny-page {
    height: 100vh;
    width: 60%;
    min-width: 960px;
    min-height: 740px; 
  }

  .velemeny-left{
    transform: translateX(90%) scale(0.2);
  }

  .velemeny-left.animate {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}

@media (max-width: 992px) {
  .velemeny-layout {
    height: fit-content;
    flex-direction: column;
    gap: 1.4rem;
  }

  .velemeny-main-title, .gyik-main-title{
    padding: 0.5em;
    margin: 0;
  }

  .velemeny-right,
  .velemeny-left {
    width: 100%;;
    margin-bottom: 1em;
  }

  .velemeny-right {
    order: 1;
  }

  .velemeny-left {
    order: 2;
  }

  .velemeny-slider {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0.8rem 2.8rem;
  }


  .velemeny-slider .csomag-nav {
    width: 2.3rem;
    font-size: 1.55rem;
  }

  .velemeny-nav-prev {
    left: 0.6rem;
  }

  .velemeny-nav-next {
    right: 0.6rem;
  }

  .velemeny-right img {
  width: 60%;
  }

  .velemeny-left img{
  width: 100%;
  }

  .velemeny-left.animate{
    opacity: 1;
  }

  .velemeny-page {
    padding-top: 60px;
    width: 95%;
    height: fit-content;
    margin: auto;
  }
}


.blogbal img{
  display: block;
  width: 100%;
  float: right;
}

@media (max-width: 992px){
  .blogbal img{
    width: 80%;
    margin: auto;
    float: none;
  }
}

.blogjobb{
  display: block;
  color: #5B242A;
  font-size: clamp(24px, 2vw, 42px);
  text-align: center;
}

/* ================================
           Üzenet oldal
   ================================ */

.message-page {
  min-height: 100vh;
  padding-top: 80px;
}

.message-section {
    max-width: 1200px;
}

.message-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  align-items: start;
  gap: 2rem;
  max-width: 1040px;
  margin: 0 auto;
  transform: none;
}

.message-card {
  background-color: white;
  min-width: 0;
}

.message-contact-card {
  width: 100%;
  padding: 2rem 1.5rem;
  margin-top: 2em;
}


@media (min-width: 1300px) {
  .message-contact-card{
    margin-top: 3.8em
  }
}

@media (min-width: 1900px) {
  .message-contact-card{
    margin-top: 4.3em
  }
}

@media (min-width: 992px) {
  .message-layout {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem !important;
    max-width: 1040px;
    margin: 0 auto;
  }

  .message-card {
    flex: 1 1 auto;
    min-width: 0;
  }

  .message-contact-card {
    flex: 0 0 320px;
    width: 320px;
    align-self: flex-start;
  }
}

.message-contact-card h2 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  color: #5B242A;
  margin-bottom: 1.25rem;
}

.message-contact-title {
  display: inline-block;
  min-height: 1.3em;
}

.message-contact-title.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 0.08em;
  vertical-align: -0.1em;
  background-color: #5B242A;
  animation: blinkCaret 0.7s steps(1) infinite;
}

.js .message-contact-title:not(.is-typing):not(.is-typed) {
  color: transparent;
}

.message-contact-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: #5B242A;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.5;
}

.message-contact-item-intro {
  transform-origin: left center;
  will-change: transform, opacity;
}

.js .message-contact-item-intro {
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.js .message-contact-item-intro.is-visible {
  opacity: 1;
  transform: scale(1);
  animation: popupBounce2 0.25s ease;
}

.message-contact-item + .message-contact-item {
  margin-top: 1rem;
}

.message-contact-item:hover,
.message-contact-item:focus {
  color: #BE9C83;
}

.message-contact-icon {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #5B242A;
  color: #fff;
  font-size: 1rem;
}

.message-card .col-12{
  margin-top: 0;
}

.message-header {
  margin-bottom: 1rem;
}

.message-eyebrow {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #5B242A;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.message-header h1 {
  font-size: clamp(22px, 2.4vw, 50px);
  color: #5B242A;
  margin-bottom: 0;
  font-family: "Poppins";
}

.message-intro {
  max-width: 680px;
  margin: 0 auto;
    font-size: clamp(12px, 1.1vw, 24px);
}

.message-form .form-label {
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 1vw, 20px);
  letter-spacing: 0.04em;
  color: #5B242A;
  margin-bottom: 0;
  margin-top: 0.5em;
}

.message-form .form-control,
.message-form .form-select {
  border-radius: 0px;
  border: 1px solid rgba(91, 36, 42, 0.2);
  font-size: 1.05rem;
  box-shadow: none;
}

.message-form textarea.form-control {
  height: 150px;
  resize: vertical;
}

.message-form .form-select{
  border-radius: 16px;
}

.message-form .form-text {
  color: rgba(91, 36, 42, 0.75);
  margin-top: 0.5rem;
}

.package-disabled {
  opacity: 0.72;
}

.package-disabled .form-select {
  background-color: #f0ece7;

  cursor: not-allowed;
}

.message-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.message-check .form-check-input {
  margin-top: 0.28rem;
  width: 1.1rem;
  height: 1.1rem;
  border: #5B242A 1px solid;
}

.message-check .form-check-label {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}

.form-check-label a,
.hosszuleiras a,
.gyik-answer a {
  color: #5B242A;
  text-decoration: none;
  font-weight: 500;
}

.hosszuleiras .gomb{
  color: white;
}

.hosszuleiras .gomb:hover{
  color: #5B242A;
}

.message-submit {
  min-height: 58px;
  background-color: #5B242A;
  color: white;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.message-submit:hover,
.message-submit:focus,
.message-submit:active {
  background-color: #BE9C83 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(91, 36, 42, 0.18);
}

@media (max-width: 991px) {
  .message-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    gap: 1.5rem;
    max-width: 100%;
    transform: none;
  }

  .message-contact-card {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .message-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .message-card {
    width: 100%;
    border-radius: 22px;
  }
}

.feliratkozas-section{
  margin-top: 1em;
  scroll-margin-top: 7rem;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #BE9C83;
}

.feliratkozas-tartalom{
  width: min(1100px, calc(100% - 2rem));
  margin: 1.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 2em;
}

.feliratkozas-kep{
  width: min(100%, 420px);
  display: block;
}

.feliratkozas-kep-intro {
  transform-origin: center center;
  will-change: transform, opacity;
}

.js .feliratkozas-kep-intro {
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.js .feliratkozas-kep-intro.is-visible {
  opacity: 1;
  transform: scale(1);
  animation: popupBounce2 0.25s ease;
}

.feliratkozas-leiras{
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 1em;
}

.feliratkozas-leiras h3{
  font-size: clamp(20px, 1.8vw, 35px);
  color: #5B242A;
}

.feliratkozas-leiras h2{
  margin-bottom: 1em;
  font-size: clamp(24px, 2vw, 40px);
}

.feliratkozas-leiras ul{
  padding-left: 10%;
  margin-bottom: 2em;
}

.feliratkozas-leiras ul li{
  margin-top: 0;
  line-height: 110%;
}

.feliratkozas-leiras a{
  text-decoration: none;
  color: inherit;
}

@media (min-width: 992px) {
  .feliratkozas-tartalom{
    width: calc(100% - 1rem);
    margin: 1.5rem 0 0 auto;
    padding-left: 12%;
    padding-right: 1rem;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }

  .feliratkozas-kep{
    flex: 0 1 clamp(380px, 34vw, 560px);
    width: 40%;
    margin: auto;
  }

  .feliratkozas-leiras{
    flex: 0 1 min(56%, 760px);
    width: min(56%, 760px);
    padding-top: 0;
  }
}

@media (max-width: 991px) {
  .feliratkozas-leiras{
    min-width: 320px;
  }
}

body.impresszum-page{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.impresszum-page .aai-page{
  flex: 1 0 auto;
  margin: 0 auto;
}

body.impresszum-page footer{
  margin-top: auto;
}

.aai-page{
  width: 55%;
  min-width: 320px;
  margin: auto;
  padding-top: 100px;
  padding-bottom: 1em;
}

.aai-page h1{
  text-align: center;
  font-size: clamp(22px, 2.4vw, 50px);
  margin-bottom: 0.5em;
}

.aai-page ol li{
  margin-top: 1em;
}

.aai-page ul li{
  margin-top: 0;
  line-height: 90%;
}

.aai-page ol{
  padding-left: 1rem;
}

.aai-page ol li::marker {
  color: #5B242A;
  font-size: clamp(20px, 1.8vw, 35px);
  font-family: inherit;
  font-weight: 700;
}

.impresszum p{
  margin-bottom: 0;
}

.honeypot-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

#formStatus {
  white-space: pre-line;
}