@font-face {
  font-family: 'Lato-Bold';
  src: url(betuk/Lato-Bold.ttf) format('truetype');
}

@font-face 
{
  font-family: 'OpenSans-All';
  src: url(betuk/OpenSans-VariableFont_wdth,wght.ttf) format('truetype');
}

@font-face {
  font-family: 'OpenSansR';
  src: url(betuk/OpenSans-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'OpenSansR-italic';
  src: url(betuk/OpenSans-Italic.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSans';
  src: url(betuk/NotoSans-Thin.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSans-italic';
  src: url(betuk/NotoSans-ThinItalic.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSansL';
  src: url(betuk/NotoSans-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'Calibri';
  src: url(betuk/calibri.ttf) format('truetype');
}

@font-face {
  font-family: 'CalibriB';
  src: url(betuk/calibrib.ttf) format('truetype');
}

@font-face {
  font-family: 'CalibriL';
  src: url(betuk/calibril.ttf) format('truetype');
}

@font-face {
  font-family: 'Ebrima';
  src: url(betuk/ebrima.ttf) format('truetype');
}

@font-face {
  font-family: 'Opensansb';
  src: url(betuk/OpenSans_SemiCondensed-ExtraBold.ttf) format("truetype");
}

@font-face {
  font-family: 'Litia';
  src: url(betuk/LilitaOne-Regular.ttf) format("truetype");
}

@font-face {
  font-family: 'Playfair';
  src: url(betuk/PlayfairDisplay-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'PlayfairM';
  src: url(betuk/PlayfairDisplay-Medium.ttf) format('truetype');
}

@font-face {
  font-family: 'RobotoR';
  src: url(betuk/Roboto-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'RobotoL';
  src: url(betuk/Roboto-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'Alora';
  src: url(betuk/Lora-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Murphy';
  src: url(betuk/claire-murphy-400.ttf) format('truetype');
}

@font-face {
  font-family: 'Lato';
  src: url(betuk/Lato-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'LatoL';
  src: url(betuk/Lato-Light.ttf) format('truetype');
}

/* CSS Color Variables */
:root {
  /* Text colors */
  --white: rgba(255, 255, 255, 0.95);
  --white-pure: white;
  --blue: #1f206b;
  --blue-transparent: #1f206b80;
  
  /* Accent colors */
  --gold: #caac02;
  --gold-light: #dbd6b8;
  --gold-medium: #c5c0a3;
  --gold-border: #a39e7c;
  --hatter: #d1cebf;
  
  /* Background colors */
  --beige: #dbd2aa;
  --beige-light: #cac4a9d8;
  --bg-dark: #02050f9e;
  --bg-button: #00155041;
  --bg-button-hover: #0120776c;
  --button-bg: #afa98e42;
  --button-bg-hover: #afa98e69;
  
  /* Shadow and hover colors */
  --shadow: rgba(0, 0, 0, 0.3);
  --purple: #2d2f9e;
  
  /* Font Variables - consistent across all devices */
  --font-heritage: 'Murphy';
  --font-content: 'OpenSans-All';
  --font-title: 'NotoSans';
  --font-title-light: 'NotoSansL';
  --font-button: 'CalibriL';
  --font-flip-text: 'NotoSans';
  --font-button-secondary: 'NotoSansL';
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  width: 100%;
}

/* Hide mobile menu on desktop */
@media screen and (min-width: 768px) {
  :root {
    --section-height: clamp(400px, 50vw, 900px);
  }

  /* Heritage section - matching reszletek style */
  #heritage {
    box-sizing: border-box;
    width: 100%;
    min-height: clamp(300px, 35vw, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /*background-color: var(--hatter);*/
    background-image: url(vhatter5.avif);
    background-size: contain;
    background-position: center;
    padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 3vw, 2rem);
  }

  .heritage-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
  }

  .heritage-item {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .heritage-item.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .heritage-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.3s;
  }

  .heritage-logo.visible {
    opacity: 1;
    transform: scale(1);
  }

  .heritage-logo img {
    width: clamp(180px, 22vw, 320px);
    height: auto;
    object-fit: contain;
  }

  .heritage-left {
    align-items: flex-start;
    text-align: left;
  }

  .heritage-right {
    align-items: flex-end;
    text-align: right;
  }

  .heritage-text {
    font-family: var(--font-heritage);
    font-size: clamp(1.2rem, 1.8vw, 2rem);
    color: var(--blue);
    letter-spacing: clamp(0.05rem, 0.08vw, 0.1rem);
    line-height: 1.4;
  }

  .heritage-year {
    font-family: var(--font-heritage);
    font-size: clamp(1.4rem, 2.2vw, 2.5rem);
    color: var(--blue);
    font-weight: 300;
    margin-top: clamp(0.5rem, 1vw, 1rem);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.3s;
  }

  .heritage-year.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .heritage-number {
    font-family: var(--font-heritage);
    font-size: clamp(1.4rem, 2.2vw, 2.5rem);
    color: var(--blue);
    margin-top: clamp(0.5rem, 1vw, 1rem);
    letter-spacing: clamp(-0.05rem, -0.05vw, -0.08rem);
    font-weight: 300;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.3s;
  }

  .heritage-number.visible {
    opacity: 1;
    transform: translateY(0);
  }

  #heritage-business {
    transition-delay: 0.2s;
  }

  #heritage-guests {
    transition-delay: 0.4s;
  }

  #bemutatkozas {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: var(--section-height);
    background-image: url(udvar.avif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .tartalom {
    width: clamp(300px, 60vw, 900px);
    max-width: 90%;
    color: var(--white-pure);
    background-color: var(--bg-dark);
    padding: clamp(2rem, 5vw, 5rem);
    border-radius: clamp(0.5rem, 1vw, 1.5rem);
    font-family: var(--font-content);
    font-size: clamp(0.9rem, 1.4vw, 1.4rem);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(-20%);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  .tmegy {
    opacity: 1;
    transform: translateY(0%);
  }
  
  .tartaloman {
    opacity: 1;
    transform: translateY(0%);
  }
  
  /*#blurhatter {
    background-image: url(soklogo.png);
    background-size: contain;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 50vmax;
  }*/
  
  
  #reszletek {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--section-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url(hatter5.5.avif);
    background-size: contain;
    background-position: center;
    padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 3vw, 2rem);
  }

  .reszletek-title {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 2.3vw, 3.5rem);
    color: var(--gold-medium);
    text-align: center;
    letter-spacing: clamp(0.05rem, 0.1vw, 0.15rem);
    margin-bottom: clamp(2rem, 9vw, 7rem);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reszletek-title.visible {
    opacity: 1;
    transform: translateY(0);
  }

  #reszletek ul {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .rrek {
    margin: 0 clamp(1.5rem, 3vw, 3rem);
    height: clamp(230px, 22vw, 350px);
    width: clamp(150px, 14vw, 220px);
    border: solid clamp(0.05rem, 0.08vw, 0.1rem) var(--gold-border);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    border-radius: clamp(0.4rem, 0.6vw, 0.8rem);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.02);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  .visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .rcim {
    margin-top: clamp(1rem, 2vw, 2rem);
    padding: clamp(0.2rem, 0.3vw, 0.4rem);
    color: var(--gold-light);
    font-family: var(--font-title-light);
    font-size: clamp(0.9rem, 1.3vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: clamp(0.02rem, 0.03vw, 0.04rem);
    width: 100%;
    text-align: center;
  }
  
  .rrek-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  #reszletek li img {
    width: clamp(60px, 6vw, 90px);
    height: clamp(60px, 6vw, 90px);
    margin-top: clamp(1.5rem, 2.8vw, 2.4rem);
    border-radius: clamp(0.4rem, 0.6vw, 0.8rem);
    object-fit: cover;
    display: block;
  }
  
  .radat {
    color: var(--gold-medium);
    font-family: var(--font-title-light);
    margin-top: clamp(1.5rem, 3.2vw, 2.5rem);
    font-size: clamp(1rem, 2.6vw, 3.2rem);
    letter-spacing: clamp(-0.02rem, -0.02vw, -0.03rem);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    text-align: center;
    width: 100%;
  }
  
  .radat.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  #rgomb {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: 'ebrima';
    text-transform: uppercase;
    font-size: clamp(0.9rem, 1.1vw, 1.2rem);
    background-color: rgba(255, 255, 255, 0.02);
    border: solid clamp(0.05rem, 0.08vw, 0.1rem) var(--gold-border);
    color: var(--gold-light);
    position: absolute;
    border-radius: clamp(0.3rem, 0.4vw, 0.5rem);
    padding: clamp(0.8rem, 1vw, 1.2rem) clamp(1.2rem, 1.4vw, 1.8rem);
    bottom: clamp(2rem, 3vw, 3rem);
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  #rgomb:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(-50%) translateY(-2px);
  }

  #ajanlat {
     width: 100%;
     min-height: var(--section-height);
     background-image: url("estimainiris.avif");
     background-size: cover;
     background-position: center center;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.3s ease;
     overflow: hidden;
  }

  .ajanlat-tartalom {
     text-align: center;
     width: 100%;
     /*max-width: 1400px;*/
     padding: clamp(1rem, 3vw, 2rem);
  }

  .text-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: clamp(0.8rem, 1.5vw, 2rem);
     flex-wrap: wrap;
  }

  .flip-text {
     color: var(--white-pure);
     font-family: var(--font-flip-text);
     font-size: clamp(1.8rem, 3vw, 5rem);
     letter-spacing: clamp(0.05rem, 0.08vw, 0.1rem);
     text-transform: uppercase;
     opacity: 0;
     transform: rotateX(30deg);
     transform-origin: bottom;
     margin: 0;
  }

  .flip-text.animate {
     animation: flipIn 0.5s forwards;
  }

  .flip-text.delayed {
     animation-delay: 0.5s;
  }

  @keyframes flipIn {
     0% {
        opacity: 0;
        transform: rotateX(30deg);
     }
     100% {
        opacity: 1;
        transform: rotateX(0deg);
     }
  }

  #agomb {
     border: solid clamp(0.05rem, 0.12vw, 0.2rem) #c4bda0;
     background-color: var(--button-bg);
     color: var(--white-pure);
     text-decoration: none;
     padding: clamp(1rem, 1.1vw, 1.5rem) clamp(1.5rem, 1.2vw, 2.5rem);
     border-radius: clamp(0.4rem, 0.6vw, 0.8rem);
     font-family: 'ebrima';
     font-size: clamp(1rem, 1vw, 1.3rem);
     text-transform: uppercase;
     transition: all 0.6s ease;
     opacity: 0;
     display: inline-block;
     margin-top: clamp(1.5rem, 8vw, 8.5rem);
  }

  #agomb.show {
     animation: fadeIn 0.5s forwards;
     animation-delay: 1.5s;
  }

  @keyframes fadeIn {
     0% {
        opacity: 0;
     }
     100% {
        opacity: 1;
     }
  }

  #agomb:hover {
     background-color: var(--button-bg-hover);
     transform: translateY(-2px);
  }
}



/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --section-height: clamp(780px, 55vw, 650px);
  }

  .text-wrapper {
    flex-direction: row;
  }

  #bemutatkozas {
    background-size: 170%;
  }
}

/* Desktop-specific styles */
@media screen and (min-width: 1024px) {
  :root {
    --section-height: clamp(400px, 50vw, 900px);
  }

  #heritage {
    background-attachment: fixed;
  }

  #bemutatkozas {
    background-attachment: fixed;
  }

  #reszletek {
    background-attachment: fixed;
  }
}

/* Mobile-specific adjustments */
@media screen and (max-width: 767px) {
  body {
    margin-top: 0;
  }

  /* Heritage section - mobile: height similar to #bemutatkozas (e.g. 80vh) */
  #heritage {
    box-sizing: border-box;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url(vhatter5.avif);
    background-size: contain;
    background-position: center;
    padding: clamp(3rem, 10vw, 5rem) clamp(1rem, 4vw, 2rem);
  }

  .heritage-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2.5rem, 8vw, 4rem);
    width: 100%;
  }

  .heritage-item {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    width: 90%;
    max-width: 400px;
  }

  .heritage-item.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .heritage-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.3s;
  }

  .heritage-logo.visible {
    opacity: 1;
    transform: scale(1);
  }

  .heritage-logo img {
    width: clamp(100px, 30vw, 160px);
    height: auto;
    object-fit: contain;
  }

  .heritage-left {
    align-items: flex-start;
    text-align: left;
  }

  .heritage-right {
    align-items: flex-end;
    text-align: right;
  }

  .heritage-text {
    font-family: var(--font-heritage);
    font-size: clamp(1.1rem, 4vmin, 1.5rem);
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: clamp(0.03rem, 0.08vmin, 0.08rem);
    line-height: 1.4;
    width: 100%;
  }

  .heritage-year {
    font-family: var(--font-heritage);
    font-size: clamp(1.3rem, 5vmin, 1.8rem);
    color: var(--blue);
    font-weight: 300;
    margin-top: clamp(0.5rem, 2vmin, 1rem);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.3s;
  }

  .heritage-year.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .heritage-number {
    font-family: var(--font-heritage);
    font-size: clamp(1.3rem, 5vmin, 1.8rem);
    color: var(--blue);
    margin-top: clamp(0.5rem, 2vmin, 1rem);
    letter-spacing: clamp(-0.03rem, -0.05vmin, -0.05rem);
    font-weight: 300;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.3s;
  }

  .heritage-number.visible {
    opacity: 1;
    transform: translateY(0);
  }

  #heritage-business {
    transition-delay: 0.2s;
  }

  #heritage-guests {
    transition-delay: 0.4s;
  }

  #bemutatkozas {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 80vh;
    height: auto;
    background-image: url(udvar.avif);
    background-size: 205%;
    background-position: center;
    background-attachment: scroll;
    padding: clamp(2rem, 5vw, 3rem);
  }
  
  /* No appearing animation on mobile: content is visible immediately */
  #bemutatkozas .tartalom {
    width: 100%;
    max-width: 90%;
    color: var(--white-pure);
    background-color: rgba(0, 0, 0, 0.58);
    padding: clamp(2rem, 7vw, 3rem);
    border-radius: clamp(0.5rem, 1.4vmin, 1.5rem);
    font-family: var(--font-content);
    font-size: clamp(0.7rem, 3vmin, 1.1rem);
    line-height: 1.6;
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
  
  #bemutatkozas .tartalom.tmegy {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
  
  .tartaloman {
    opacity: 1;
    transform: translateY(0);
  }

  #reszletek {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url(hatter5.5.avif);
    background-size: 150%;
    background-repeat: repeat;
    background-position: center;
    background-attachment: scroll;
    padding: clamp(2rem, 6vw, 3rem);
    padding-top: clamp(3rem, 12vw, 5rem);
    padding-bottom: clamp(8rem, 26vw, 12rem);
    min-height: auto;
  }

  .reszletek-title {
    font-family: var(--font-title);
    font-size: clamp(1rem, 5vmin, 2.5rem);
    color: var(--gold-medium);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: clamp(0.03rem, 0.08vmin, 0.1rem);
    margin-bottom: clamp(2rem, 8vw, 3rem);
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reszletek-title.visible {
    opacity: 1;
    transform: translateY(0);
  }

  #reszletek ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .rrek {
    margin: clamp(2rem, 7vw, 3rem) auto;
    height: auto;
    width: 80%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: clamp(1rem, 1.6vmin, 1.5rem);
    text-decoration: none;
    opacity: 0;
    transform: translateY(6vmin);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    padding: clamp(0.5rem, 1vmin, 1rem);
    padding-bottom: clamp(1rem, 2vmin, 1.5rem);
    position: relative;
  }
  
  .visible {
    opacity: 1;
    transform: translateY(0);
  }

  .rcim {
    margin-top: clamp(0.5rem, 1vmin, 1rem);
    padding: clamp(0.5rem, 1vmin, 1rem);
    color: var(--gold-light);
    font-family: var(--font-title-light);
    font-size: clamp(0.9rem, 3.6vmin, 1.3rem);
    text-transform: uppercase;
    letter-spacing: clamp(0.05rem, 0.1vmin, 0.08rem);
    width: 100%;
  }
  
  .rrek-content {
    width: 100%;
    margin-top: clamp(1.5rem, 3vmin, 2rem);
    position: relative;
    min-height: clamp(100px, 20vmin, 120px);
    display: flex;
    align-items: center;
  }
  
  .rrek-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: clamp(0.05rem, 0.1vmin, 0.08rem);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 0;
  }
  
  #reszletek li img {
    width: clamp(60px, 11vmin, 80px);
    height: clamp(60px, 11vmin, 80px);
    object-fit: cover;
    position: absolute;
    right: calc(50% + clamp(2rem, 5vw, 3rem));
    z-index: 1;
  }
  
  .radat {
    position: absolute;
    left: calc(50% + clamp(2.8rem, 5vw, 3rem));
    color: var(--gold-medium);
    font-family: var(--font-title-light);
    font-size: clamp(1.8rem, 6vmin, 2.5rem);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(2vmin);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    text-align: center;
    z-index: 1;
    white-space: nowrap;
  }
  
  .radat.visible {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }

  #rgomb {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: 'ebrima';
    text-transform: uppercase;
    font-size: clamp(0.8rem, 2.5vmin, 1.1rem);
    background-color: rgba(255, 255, 255, 0.02);
    border: solid clamp(0.05rem, 0.1vmin, 0.1rem) var(--gold-border);
    color: var(--gold-light);
    position: absolute;
    border-radius: clamp(0.4rem, 0.8vw, 0.8rem);
    padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem);
    bottom: clamp(2rem, 3vw, 3rem);
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  #rgomb:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(-50%) translateY(-2px);
  }

  #ajanlat {
    width: 100%;
    height: auto;
    min-height: clamp(400px, 90vh, 650px);
    background-image: url("estimainiris.avif");
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    overflow: hidden;
    padding: clamp(3rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  }

 .ajanlat-tartalom {
    text-align: center;
    width: 100%;
    max-width: 90%;
    padding: clamp(1rem, 3vw, 2rem);
  }

 .flip-container {
    margin-bottom: clamp(2rem, 5vw, 4rem);
 }

 .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(5rem, 5vw, 3rem);
  }

 .flip-text {
    color: var(--white-pure);
    font-family: var(--font-flip-text);
    font-size: clamp(1.5rem, 6vmin, 2rem);
    text-transform: uppercase;
    margin: 0;
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: bottom;
    width: 100%;
    line-height: 1.3;
  }

 .flip-text.animate {
    animation: flipIn 0.5s forwards;
  }

 .flip-text.delayed {
    animation-delay: 0.5s;
  }

 @keyframes flipIn {
    0% {
       opacity: 0;
       transform: rotateX(90deg);
    }
    100% {
       opacity: 1;
       transform: rotateX(0deg);
    }
  }  

 #agomb {
    border: solid clamp(0.05rem, 0.1vmin, 0.1rem) #c4bda0;
    background-color: var(--button-bg);
    color: var(--white-pure);
    text-decoration: none;
    padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem);
    border-radius: clamp(0.4rem, 0.8vw, 0.8rem);
    font-family: 'ebrima';
    font-size: clamp(0.7rem, 2vmin, 1.1rem);
    text-transform: uppercase;
    transition: all 0.6s ease;
    opacity: 0;
    display: inline-block;
  }

 #agomb.show {
    animation: fadeIn 0.5s forwards;
    animation-delay: 1.5s;
  }  

 @keyframes fadeIn {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
  }

 #agomb:hover {
    background-color: var(--button-bg);
    transform: translateY(-2px);
  }
}

/* Small tablet adjustments */
@media screen and (min-width: 481px) and (max-width: 767px) {
  #bemutatkozas {
    min-height: 100vh;
  }

  #heritage {
    min-height: 100vh;
  }

  .tartalom {
    max-width: 85%;
    font-size: clamp(0.8rem, 2.4vmin, 1.15rem);
  }

  #reszletek {
    padding-top: clamp(3.5rem, 10vw, 4.5rem);
  }

  .rrek {
    width: 75%;
    max-width: 450px;
  }

  .text-wrapper {
    gap: clamp(1.2rem, 3.5vw, 2rem);
  }
}

/* Extra small viewports */
@media screen and (max-width: 360px) {
  #heritage {
    padding: clamp(2rem, 8vw, 4rem) clamp(0.75rem, 3vw, 1.5rem);
  }
  .heritage-item {
    width: 95%;
  }
  .tartalom {
    max-width: 92%;
    font-size: clamp(0.75rem, 4vmin, 1rem);
  }
}

@media screen and (max-width: 320px) {
  #heritage {
    padding: clamp(1.5rem, 6vw, 3rem) clamp(0.5rem, 2.5vw, 1rem);
  }
  .rrek {
    width: 90%;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  #bemutatkozas,
  #reszletek,
  #ajanlat {
    background-image: none;
    background-color: var(--white-pure);
  }
  
  .desktop {
    display: none;
  }
}