@font-face 
{
  font-family: 'OpenSans-All';
  src: url(betuk/OpenSans-VariableFont_wdth,wght.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: 'kanes';
    src: url(betuk/KanesRegular-ARg9M.ttf) format('truetype');
}

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

@font-face {
    font-family: 'classicM';
    src: url(betuk/OpenSans-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: 'CabinR';
    src: url(betuk/Cabin-Regular.ttf) format('truetype');
}

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

/* CSS Color Variables */
:root {
  --white-pure: white;
  --blue: #1f206b;
  --blue2: #111245;
  --blue2-transparent: #11124591;
  --beige: #dbd2aa;
  --beige-light: #cac4a9d8;
  --beige-light2: #cac4a98c;
  --hatter: #d1cebf;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
html, body {
    background-color: #ffffff;
    overflow-x: hidden;
}

/* ========== DESKTOP NAVIGATION ========== */
@media screen and (min-width: 1024px) {
    #overlap-group {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        height: clamp(6rem, 10vmax, 10rem);
        width: 100%;
        background-color: var(--hatter);
        box-sizing: border-box;
        z-index: 1100;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .fcim {
        display: none;
    }

    #logo-link {
        position: absolute;
        right: clamp(1rem, 2vmax, 4rem);
        display: block;
        width: clamp(7rem, 20vmax, 12rem);
        height: clamp(4rem, 12vmax, 8rem);
        line-height: 0;
        cursor: pointer;
    }

    #furesjologo {
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        opacity: 0;
        transform: translateY(-20px);
        animation: navLogoFadeIn 0.6s ease forwards;
    }

    #logo-link:hover #furesjologo {
        transform: scale(1.05);
    }

    @keyframes navLogoFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fline {
        display: none;
    }

    .overlap {
        position: absolute;
        left: clamp(2rem, 3vmax, 4rem);
        margin-bottom: 1vmax;
        width: clamp(2rem, 3vmax, 3rem);
        height: clamp(2rem, 3vmax, 3rem);
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .overlap:hover {
        transform: scale(1.1);
    }

    .hu {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        opacity: 0;
        transform: translateY(-20px);
        animation: navLogoFadeIn 0.6s ease forwards;
    }

    .lmenu {
        display: none;
        position: fixed;
        border-radius: clamp(0.3rem, 0.4vmax, 0.5rem);
        background-color: var(--hatter);
        backdrop-filter: blur(10px);
        margin-top: 5.8vmax;
        left: clamp(2rem, 3vmax, 4rem);
        padding: clamp(0.75rem, 1vmax, 1.25rem);
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .lmenu.active {
        z-index: 1100;
        display: block;
        opacity: 1;
        transform: translateY(0);
        list-style: none;
    }

    #lmenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #lmenu li {
        padding: clamp(0.25rem, 0.3vmax, 0.4rem) 0;
    }

    #lmenu a {
        cursor: pointer;
        text-decoration: none;
        display: block;
        transition: transform 0.2s ease;
    }

    #lmenu a:hover {
        transform: translateX(3px);
    }

    .lmkepek {
        padding: clamp(0.15rem, 0.2vmax, 0.25rem);
        width: clamp(1.8rem, 2.4vmax, 2.8rem);
        height: clamp(1.8rem, 2.4vmax, 2.8rem);
        border-radius: 50%;
        transition: box-shadow 0.2s ease;
    }

    .lmkepek:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    #felsomenu {
        position: absolute;
        display: flex;
        list-style: none;
        top: calc(50% + clamp(0.5rem, 1vmax, 1rem));
        transform: translateY(-50%);
        gap: clamp(1rem, 2vmax, 2.5rem);
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        padding: 0;
        left: calc(clamp(2rem, 3vmax, 4rem) + clamp(2rem, 3vmax, 3rem) + clamp(1rem, 1.5vmax, 2rem));
        right: calc(clamp(1rem, 2vmax, 4rem) + clamp(5rem, 17vmax, 9rem) + clamp(1rem, 1.5vmax, 2rem));
        width: auto;
        min-width: 0;
        white-space: nowrap;
        box-sizing: border-box;
    }
    
    /* Only center menu when there's enough space (wider screens) */
    @media screen and (min-width: 1200px) {
        #felsomenu {
            gap: clamp(1.2rem, 2.5vmax, 3rem);
        }
    }
    
    /* On smaller desktop screens, keep it centered but allow more flexibility */
    @media screen and (min-width: 1024px) and (max-width: 1199px) {
        #felsomenu {
            gap: clamp(0.8rem, 1.8vmax, 2rem);
        }
    }

    #felsomenu li {
        margin: 0;
        position: relative;
        opacity: 0;
        transform: translateY(-10px);
        animation: navMenuItemFadeIn 0.5s ease forwards;
    }

    /* Add vertical line between menu items (except last) */
    #felsomenu li:not(:last-child)::after {
        content: "";
        position: absolute;
        right: calc(-1 * clamp(0.5rem, 1vmax, 1.25rem));
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: clamp(1.2rem, 1.8vmax, 2rem);
        background-color: #1f206b;
        opacity: 0.3;
    }

    /* Staggered animation delays for menu items */
    #felsomenu li:nth-child(1) {
        animation-delay: 0.7s;
    }
    #felsomenu li:nth-child(2) {
        animation-delay: 0.85s;
    }
    #felsomenu li:nth-child(3) {
        animation-delay: 1s;
    }
    #felsomenu li:nth-child(4) {
        animation-delay: 1.15s;
    }
    #felsomenu li:nth-child(5) {
        animation-delay: 1.3s;
    }
    #felsomenu li:nth-child(6) {
        animation-delay: 1.45s;
    }

    @keyframes navMenuItemFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #felsomenu li a {
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color: #1f206b;
        background-color: transparent;
        padding: clamp(0.5rem, 0.6vmax, 0.75rem) clamp(0.8rem, 1.2vmax, 1.5rem);
        border-radius: clamp(0.4rem, 0.6vmax, 0.7rem);
        font-size: clamp(0.95rem, 1.15vmax, 1.2rem);
        letter-spacing: 0.05em;
        font-weight: 500;
        text-transform: uppercase;
        font-family: 'ebrima';
        transition: all 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #felsomenu li a::after {
        content: "";
        display: block;
        height: 0.1rem;
        width: 100%;
        background-color: #1f206b;
        transform: scaleX(0);
        transition: transform 0.33s ease;
        margin-top: 0.2rem;
    }

    #felsomenu li a:hover {
        color: #373886;
    }

    #felsomenu li a:hover::after {
        transform: scaleX(1);
    }

    #felsomenu li a.active {
        color: #373886;
        background-color: transparent;
        font-weight: 500;
    }

    #felsomenu li a.active::after {
        transform: scaleX(1);
        background-color: #373886;
    }

    #media {
        width: 100%;
        height: clamp(32rem, 40vmax, 50rem);
        position: relative;
        overflow: hidden;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: clamp(6rem, 8vmax, 9rem);
        isolation: isolate;
    }

    /* Allow overflow for kep4 to show full-size main image */
    #media:has(.kep4-container) {
        overflow: visible;
    }

    #hkep {
        width: 100%;
        height: 100%;
        display: block;
        line-height: 0;
        position: relative;
        z-index: 1;
    }

    .kep1, .kep2, .kep3, .kep4 {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Kepstilus 4: Container for layered background and main image */
    .kep4-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: visible;
    }

    /* Blurred background layer */
    .kep4-blur-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: repeat;
        background-size: auto;
        background-position: center;
        filter: blur(8px);
        -webkit-filter: blur(8px);
        z-index: 1;
    }

    /* Sharp main image on top */
    .kep4-main-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto;
        z-index: 2;
        pointer-events: none;
    }

    .kep1 {
        animation-name: kepj;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
    }

    @keyframes kepj {
        0% {
            opacity: 0;
            transform: scale(0.9);
        }
        100% {
            opacity: 1;
            transform: scale(0.85);
        }
    }

    #vidi {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .sotet {
        width: 100%;
        height: 100%;
        background-color: transparent;
    }

    .cim1 {
        animation-name: cimjobb;
        animation-duration: 1s;
        position: absolute;
        color: #ffffff;
        margin-bottom: 12vmax;
        font-size: clamp(3rem, 6vmax, 7rem);
        font-family: 'Playfair', serif;
        text-transform: uppercase;
        z-index: 5;
    }

    @keyframes cimjobb {
        0% {
            opacity: 0;
            transform: translateX(-50px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .cim2 {
        animation-duration: 1s;
        position: absolute;
        font-size: clamp(2rem, 3.5vmax, 4rem);
        box-sizing: border-box;
        color: #ffffff;
        text-transform: uppercase;
        font-family: 'Calibri', Arial, sans-serif;
        margin-bottom: 12vmax;
        text-align: center;
        width: 100%;
        z-index: 5;
    }

    .cim3 {
        animation-duration: 1s;
        position: absolute;
        font-size: clamp(3rem, 5.6vmax, 6.5rem);
        margin-bottom: 12vmax;
        box-sizing: border-box;
        color: #ffffff;
        text-transform: uppercase;
        font-family: 'Calibri', Arial, sans-serif;
        z-index: 5;
    }

    .cim4 {
        display: none;
    }

    .keptartalom1, .keptartalom2, .keptartalom3, .keptartalom4 {
        color: #ffffff;
        position: absolute;
        font-family: 'Calibri', Arial, sans-serif;
        text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
        line-height: 1.6;
        z-index: 5;
    }

    .keptartalom1 {
        animation-name: alsojobb;
        animation-duration: 1.2s;
        font-size: clamp(1.5rem, 2.2vmax, 2.5rem);
        margin-top: 13vmax;
    }

    @keyframes alsojobb {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .keptartalom2 {
        animation-duration: 1.2s;
        margin-top: 7vmax;
        border-radius: clamp(0.6rem, 0.9vmax, 1rem);
        padding: clamp(1rem, 2%, 2rem);
        font-size: clamp(1rem, 1.3vmax, 1.5rem);
        max-width: clamp(30rem, 50vmax, 55rem);
        background-color: rgba(0, 0, 0, 0.267);
        backdrop-filter: blur(1px);
        font-weight: 400;
        text-align: center;
        width: auto;
    }

    .keptartalom2-second {
        position: absolute;
        animation-duration: 1.2s;
        margin-top: 7vmax;
        border-radius: clamp(0.6rem, 0.9vmax, 1rem);
        padding: clamp(1rem, 2%, 2rem);
        font-size: clamp(1rem, 1.3vmax, 1.5rem);
        max-width: clamp(30rem, 50vmax, 55rem);
        background-color: rgba(0, 0, 0, 0.267);
        backdrop-filter: blur(1px);
        font-weight: 400;
        text-align: center;
        width: auto;
        background-color: #24231e;
    }

    .keptartalom3 {
        animation-duration: 1.2s;
        font-size: clamp(1rem, 1.3vmax, 1.5rem);
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(0px);
        font-weight: 500;
        max-width: clamp(30rem, 50vmax, 55rem);
        margin-top: 10vmax;
        padding: clamp(1.2rem, 1.6vmax, 2rem);
        border-radius: clamp(0.4rem, 0.5vmax, 0.6rem);
    }

    .keptartalom4 {
        display: none;
    }

    .ugomb, .gomb1, .gomb2, .gomb3, .gomb4 {
        animation-name: gomb3;
        animation-delay: 1s;
        position: absolute;
        box-sizing: border-box;
        text-transform: uppercase;
        font-family: 'ebrima';
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        z-index: 6;
    }

    @keyframes gomb3 {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ugomb {
        padding: clamp(1.2rem, 1.5vmax, 1.8rem) clamp(1.5rem, 2vmax, 2.5rem);
        font-size: clamp(0.9rem, 1.1vmax, 1.3rem);
        margin-top: 30vmax;
        border-radius: clamp(0.4rem, 0.5vmax, 0.6rem);
    }

    .gomb1 {
        padding: clamp(1.2rem, 1.5vmax, 1.8rem) clamp(1.5rem, 2vmax, 2.5rem);
        font-size: clamp(0.9rem, 1.1vmax, 1.3rem);
        margin-top: 25vmax;
        border-radius: clamp(0.4rem, 0.5vmax, 0.6rem);
        border: solid 0.05rem;
    }

    .gomb1:hover {
        opacity: 0.8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .gomb2 {
        background-color: #ededed;
        color: #0088ff;
        padding: clamp(1.2rem, 1.5vmax, 1.8rem) clamp(1.5rem, 2vmax, 2.5rem);
        font-size: clamp(0.9rem, 1.1vmax, 1.3rem);
        margin-top: 25vmax;
        right: clamp(2rem, 4vmax, 5rem);
        left: auto;
        border-radius: clamp(0.4rem, 0.5vmax, 0.6rem);
    }

    .gomb2:hover {
        background-color: #466790;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .gomb3 {
        padding: clamp(1.2rem, 1.5vmax, 1.8rem) clamp(1.5rem, 2vmax, 2.5rem);
        font-size: clamp(0.9rem, 1.1vmax, 1.3rem);
        margin-top: 25vmax;
        border-radius: clamp(0.4rem, 0.5vmax, 0.6rem);
        border: solid 0.05rem;
    }

    .gomb3:hover {
        opacity: 0.8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .gomb4 {
        padding: clamp(1.2rem, 1.5vmax, 1.8rem) clamp(1.5rem, 2vmax, 2.5rem);
        font-size: clamp(0.9rem, 1.1vmax, 1.3rem);
        margin-top: 25vmax;
        border-radius: clamp(0.4rem, 0.5vmax, 0.6rem);
        border: solid 0.05rem;
    }

    .gomb4:hover {
        opacity: 0.8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    #custombtnhely {
        border-radius: 50rem;
        box-sizing: border-box;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 36vmax;
        gap: clamp(0.3rem, 0.5vmax, 0.7rem);
        padding: clamp(0.5rem, 0.8vmax, 1rem);
        background-color: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(5px);
        z-index: 7;
    }
        
    .custombtn {
        cursor: pointer;
        width: clamp(0.7rem, 1vmax, 1.2rem);
        height: clamp(0.7rem, 1vmax, 1.2rem);
        border-radius: 50%;
        border: 0.1rem solid rgba(255, 255, 255, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
    }

    .custombtn:hover {
        border-color: rgba(255, 255, 255, 0.8);
        transform: scale(1.1);
    }

    #custombtnhely input[type="radio"] {
        display: none;
    }

    .custombtn .checkmark {
        display: none;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        background-color: #ffffff;
    }

    #custombtnhely input[type="radio"]:checked + .checkmark {
        display: block;
    }

    #balnyil, #jobbnyil {
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        width: clamp(3.5rem, 5vmax, 6rem);
        height: clamp(3.5rem, 5vmax, 6rem);
        box-sizing: border-box;
        position: absolute;
        margin-top: 5vmax;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        opacity: 0.6;
        transition: all 0.3s ease;
        z-index: 10;
    }

    #balnyil:hover, #jobbnyil:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0);
    }

    #balnyil {
        margin-right: 92vmax;
    }

    #balnyil:hover {
        margin-right: 93vmax;
    }

    #jobbnyil {
        margin-left: 92vmax;
    }

    #jobbnyil:hover {
        margin-left: 93vmax;
    }

    #balnyilkep, #jobbnyilkep {
        position: absolute;
        width: clamp(2.2rem, 3.2vmax, 3.8rem);
        height: clamp(2rem, 3vmax, 3.6rem);
        pointer-events: none;
    }

    #balnyilkep {
        margin-right: 0.3rem;
    }

    #jobbnyilkep {
        margin-left: 0.3rem;
    }
}

/* ========== TABLET NAVIGATION ========== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #overlap-group {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        height: clamp(7rem, 10vmax, 11rem);
        width: 100%;
        background-color: var(--hatter);
        box-sizing: border-box;
        z-index: 1100;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .fcim {
        display: none;
    }

    #logo-link {
        position: absolute;
        right: 0vmax;
        display: block;
        width: clamp(9rem, 9vmax, 10rem);
        height: clamp(5rem, 6vmax, 7rem);
        line-height: 0;
        cursor: pointer;
    }

    #furesjologo {
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: translateY(-20px);
        animation: navLogoFadeIn 0.6s ease forwards;
    }

    #logo-link:hover #furesjologo {
        transform: scale(1.05) translateY(0);
    }

    @keyframes navLogoFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fline {
        display: none;
    }

    .overlap {
        position: absolute;
        left: 2vmax;
        margin-bottom: 3vmax;
        width: clamp(2.5rem, 3.5vmax, 4rem);
        height: clamp(2.5rem, 3.5vmax, 4rem);
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .overlap:hover {
        transform: scale(1.1);
    }

    .hu {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        opacity: 0;
        transform: translateY(-20px);
        animation: navLogoFadeIn 0.6s ease forwards;
    }

    .lmenu {
        display: none;
        position: fixed;
        border-radius: 0.5rem;
        background-color: var(--hatter);
        backdrop-filter: blur(10px);
        top: 5rem;
        left: 2vmax;
        padding: 1rem;
        z-index: 1100;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .lmenu.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    #lmenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #lmenu li {
        padding: 0.5rem 0;
        text-align: center;
    }

    #lmenu a {
        cursor: pointer;
        text-decoration: none;
        display: block;
    }

    .lmkepek {
        padding: 0.3rem;
        width: clamp(2.5rem, 3.5vmax, 4rem);
        height: clamp(2.5rem, 3.5vmax, 4rem);
        border-radius: 50%;
    }

    #felsomenu {
        position: absolute;
        display: flex;
        list-style: none;
        top: calc(50% + clamp(0.4rem, 0.8vmax, 0.8rem));
        transform: translateY(-50%);
        gap: clamp(0.8rem, 1.5vmax, 1.8rem);
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        padding: 0;
        left: calc(2vmax + clamp(2.5rem, 3.5vmax, 4rem) + clamp(1rem, 1.5vmax, 2rem));
        right: calc(0vmax + clamp(9rem, 9vmax, 10rem) + clamp(1rem, 1.5vmax, 2rem));
        width: auto;
        min-width: 0;
        white-space: nowrap;
        box-sizing: border-box;
    }
    
    /* Only center menu on tablet when there's enough space */
    @media screen and (min-width: 900px) and (max-width: 1023px) {
        #felsomenu {
            gap: clamp(0.6rem, 1.2vmax, 1.5rem);
        }
    }
    
    /* On smaller tablets, center if possible, otherwise use full width */
    @media screen and (min-width: 768px) and (max-width: 899px) {
        #felsomenu {
            gap: clamp(0.5rem, 1vmax, 1.2rem);
        }
    }

    #felsomenu li {
        margin: 0;
        position: relative;
        opacity: 0;
        transform: translateY(-10px);
        animation: navMenuItemFadeIn 0.5s ease forwards;
    }

    /* Add vertical line between menu items (except last) */
    #felsomenu li:not(:last-child)::after {
        content: "";
        position: absolute;
        right: calc(-1 * clamp(0.4rem, 0.75vmax, 0.9rem));
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: clamp(1rem, 1.5vmax, 1.8rem);
        background-color: #1f206b;
        opacity: 0.3;
    }

    /* Staggered animation delays for menu items */
    #felsomenu li:nth-child(1) {
        animation-delay: 0.7s;
    }
    #felsomenu li:nth-child(2) {
        animation-delay: 0.85s;
    }
    #felsomenu li:nth-child(3) {
        animation-delay: 1s;
    }
    #felsomenu li:nth-child(4) {
        animation-delay: 1.15s;
    }
    #felsomenu li:nth-child(5) {
        animation-delay: 1.3s;
    }
    #felsomenu li:nth-child(6) {
        animation-delay: 1.45s;
    }

    @keyframes navMenuItemFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #felsomenu li a {
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color: #1f206b;
        background-color: transparent;
        padding: clamp(0.4rem, 0.8vmax, 1rem) clamp(0.6rem, 1vmax, 1.2rem);
        border-radius: 0.5rem;
        font-size: clamp(0.8rem, 1.1vmax, 1.2rem);
        letter-spacing: 0.02em;
        font-weight: 500;
        text-transform: uppercase;
        font-family: 'ebrima';
        transition: all 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #felsomenu li a::after {
        content: "";
        display: block;
        height: 0.1rem;
        width: 100%;
        background-color: #1f206b;
        transform: scaleX(0);
        transition: transform 0.33s ease;
        margin-top: 0.2rem;
    }

    #felsomenu li a:hover {
        color: #373886;
    }

    #felsomenu li a:hover::after {
        transform: scaleX(1);
    }

    #felsomenu li a.active {
        color: #373886;
        background-color: transparent;
        font-weight: 500;
    }

    #felsomenu li a.active::after {
        transform: scaleX(1);
        background-color: #373886;
    }

    #media {
        width: 100%;
        height: clamp(30rem, 50vmax, 45rem);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: clamp(7rem, 10vmax, 11rem);
        isolation: isolate;
    }

    /* Allow overflow for kep4 to show full-size main image - Tablet */
    #media:has(.kep4-container) {
        overflow: visible;
    }

    #hkep {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        z-index: 1;
    }

    .kep1, .kep2, .kep3, .kep4 { 
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 1;
    }

    /* Kepstilus 4: Container for layered background and main image - Tablet */
    .kep4-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: visible;
    }

    /* Blurred background layer - Tablet */
    .kep4-blur-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: repeat;
        background-size: auto;
        background-position: center;
        filter: blur(8px);
        -webkit-filter: blur(8px);
        z-index: 1;
    }

    /* Sharp main image on top - Tablet */
    .kep4-main-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto;
        z-index: 2;
        pointer-events: none;
    }

    .kep1 {
        animation-name: kepj;
        animation-duration: 1.2s;
    }

    @keyframes kepj {
        0% {
            opacity: 0;
            transform: scale(1.05);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    #vidi {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cim1 {
        animation-name: cimjobb;
        animation-duration: 1s;
        position: absolute;
        color: #ffffff;
        margin-bottom: 18vmax;
        font-size: clamp(2.5rem, 5vmax, 6rem);
        font-family: 'Calibri', Arial, sans-serif;
        text-transform: uppercase;
        text-align: center;
        padding: 0 1rem;
        z-index: 5;
    }

    @keyframes cimjobb {
        0% {
            opacity: 0;
            transform: translateX(-30px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .cim2, .cim3, .cim4 {
        position: absolute;
        color: #ffffff;
        text-transform: uppercase;
        font-family: 'Calibri', Arial, sans-serif;
        text-align: center;
        padding: 0 1rem;
        z-index: 5;
    }

    .cim2 {
        font-size: clamp(2rem, 4vmax, 4.5rem);
        margin-bottom: 23vmax;
        margin-left: 0;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }

    .cim3 {
        font-size: clamp(2.5rem, 5vmax, 5.5rem);
        margin-bottom: 18vmax;
    }

    .cim4 {
        display: none;
    }

    .keptartalom1, .keptartalom2, .keptartalom3, .keptartalom4 {
        color: #ffffff;
        position: absolute;
        font-family: 'Calibri', Arial, sans-serif;
        text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
        line-height: 1.6;
        padding: 0 1rem;
        z-index: 5;
    }

    .keptartalom1 {
        animation-name: alsojobb;
        animation-duration: 1.2s;
        font-size: clamp(1.3rem, 2.5vmax, 2.2rem);
        margin-top: 15vmax;
        max-width: 80%;
        text-align: center;
    }

    @keyframes alsojobb {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .keptartalom2 {
        font-size: clamp(1rem, 2vmax, 1.5rem);
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(5px);
        margin-top: 12vmax;
        margin-left: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 1.5rem;
        border-radius: 0.8rem;
        max-width: 80%;
        text-align: center;
        width: auto;
    }

    .keptartalom2-second {
        font-size: clamp(1rem, 2vmax, 1.5rem);
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(5px);
        margin-top: 12vmax;
        margin-left: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 1.5rem;
        border-radius: 0.8rem;
        max-width: 80%;
        text-align: center;
        width: auto;
    }

    .keptartalom3 {
        font-size: clamp(1rem, 2vmax, 1.4rem);
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        margin-top: 12vmax;
        padding: 1.5rem;
        border-radius: 0.7rem;
        max-width: 80%;
    }

    .keptartalom4 {
        display: none;
    }

    .ugomb, .gomb1, .gomb2, .gomb3, .gomb4 {
        animation-name: gomb3;
        animation-delay: 1s;
        position: absolute;
        box-sizing: border-box;
        text-transform: uppercase;
        font-family: 'ebrima';
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        padding: 1rem 1.8rem;
        font-size: 1rem;
        border-radius: 0.5rem;
        z-index: 6;
    }

    @keyframes gomb3 {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ugomb {
        margin-top: 35vmax;
    }

    .gomb1 {
        margin-top: 32vmax;
        border: solid 0.05rem;
    }

    .gomb1:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }

    .gomb2 {
        background-color: #ededed;
        color: #0088ff;
        margin-top: 35vmax;
        right: clamp(1.5rem, 3vmax, 3rem);
        left: auto;
    }

    .gomb2:hover {
        background-color: #466790;
        transform: translateY(-2px);
    }

    .gomb3 {
        margin-top: 32vmax;
        border: solid 0.05rem;
    }

    .gomb3:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }

    .gomb4 {
        margin-top: 35vmax;
    }

    .gomb4:hover {
        opacity: 0.8;
        transform: translateY(-2px);
    }

    #custombtnhely {
        border-radius: 50rem;
        box-sizing: border-box;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 45vmax;
        gap: 0.5rem;
        padding: 0.8rem;
        background-color: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(5px);
        z-index: 7;
    }
        
    .custombtn {
        cursor: pointer;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        border: 0.12rem solid rgba(255, 255, 255, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #custombtnhely input[type="radio"] {
        display: none;
    }

    .custombtn .checkmark {
        display: none;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        background-color: #ffffff;
    }

    #custombtnhely input[type="radio"]:checked + .checkmark {
        display: block;
    }

    #balnyil, #jobbnyil {
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        width: clamp(3.5rem, 5vmax, 6rem);
        height: clamp(3.5rem, 5vmax, 6rem);
        box-sizing: border-box;
        position: absolute;
        margin-top: 5vmax;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        opacity: 0.6;
        transition: all 0.3s ease;
        z-index: 10;
    }

    #balnyil:hover, #jobbnyil:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0);
    }

    #balnyil {
        left: clamp(1rem, 2vmax, 2rem);
    }

    #jobbnyil {
        right: clamp(1rem, 2vmax, 2rem);
    }

    #balnyilkep, #jobbnyilkep {
        position: absolute;
        width: clamp(2.2rem, 3.2vmax, 3.8rem);
        height: clamp(2rem, 3vmax, 3.6rem);
        pointer-events: none;
    }

    #balnyilkep {
        margin-right: 0.3rem;
    }

    #jobbnyilkep {
        margin-left: 0.3rem;
    }
}

/* ========== MOBILE NAVIGATION ========== */
@media screen and (max-width: 767px) {
    body {
        padding-top: clamp(5.5rem, 26vmin, 9rem);
    }

    #overlap-group {
        position: fixed;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: clamp(5.5rem, 26vmin, 9rem);
        height: auto;
        width: 100%;
        background-color: var(--hatter);
        box-sizing: border-box;
        z-index: 1100;
        text-transform: uppercase;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 0 1rem;
    }

    .fcim {
        display: none;
    }

    #logo-link {
        position: absolute;
        top: 35%;
        right: 0rem;
        transform: translateY(-50%);
        display: block;
        width: clamp(4.5rem, 24vmin, 9rem);
        height: clamp(3rem, 16vmin, 6rem);
        line-height: 0;
        cursor: pointer;
    }

    #furesjologo {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        object-fit: cover;
        margin: 0;
        opacity: 0;
        animation: navLogoFadeInMobile 0.6s ease forwards;
    }

    @keyframes navLogoFadeInMobile {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fline {
        display: none;
    }

    .overlap {
        position: absolute;
        left: 1rem;
        top: 20%;
        transform: translateY(-50%);
        width: clamp(1.8rem, 7vmin, 3rem);
        height: clamp(1.8rem, 7vmin, 3rem);
        cursor: pointer;
        margin: 0;
        opacity: 0;
        animation: navLogoFadeInMobile 0.6s ease forwards;
    }

    .hu {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }

    .lmenu {
        display: none;
        position: fixed;
        border-radius: 0.8rem;
        background-color: var(--hatter);
        backdrop-filter: blur(10px);
        top: clamp(4rem, 18vmin, 6rem);
        left: clamp(0.5rem, 2vmin, 1rem);
        z-index: 1100;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .lmenu.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    #lmenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #lmenu li {
        margin: 0.6rem 0;
        text-align: center;
    }

    #lmenu a {
        cursor: pointer;
        text-decoration: none;
        font-size: clamp(0.9rem, 3.5vmin, 1.2rem);
        color: #1f206b;
        display: block;
        padding: 0.8rem;
        padding-bottom: 0;
    }

    .lmkepek {
        width: clamp(2rem, 7vmin, 2.4rem);
        height: clamp(2rem, 7vmin, 2.4rem);
        vertical-align: middle;
        border-radius: 50%;
    }

    #felsomenu {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        list-style: none;
        gap: clamp(0.5rem, 2vmin, 1rem);
        justify-content: center;
        padding: 0;
        padding-bottom: clamp(0.2rem, 1.8vmin, 0.6rem);
        flex-wrap: nowrap;
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-height: fit-content;
        width: 60%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #felsomenu::-webkit-scrollbar {
        display: none;
    }

    #felsomenu li {
        margin: 0;
        flex-shrink: 0;
        flex-grow: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: fit-content;
        opacity: 0;
        transform: translateY(10px);
        animation: navMenuItemFadeInMobile 0.5s ease forwards;
    }

    /* Staggered animation delays for menu items */
    #felsomenu li:nth-child(1) {
        animation-delay: 0.7s;
    }
    #felsomenu li:nth-child(2) {
        animation-delay: 0.85s;
    }
    #felsomenu li:nth-child(3) {
        animation-delay: 1s;
    }
    #felsomenu li:nth-child(4) {
        animation-delay: 1.15s;
    }
    #felsomenu li:nth-child(5) {
        animation-delay: 1.3s;
    }
    #felsomenu li:nth-child(6) {
        animation-delay: 1.45s;
    }

    @keyframes navMenuItemFadeInMobile {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #felsomenu li a {
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color: #1f206b;
        background-color: transparent;
        padding: clamp(0.2rem, 0.8vmin, 0.45rem) clamp(0.4rem, 1.8vmin, 1rem);
        font-size: clamp(0.65rem, 3vmin, 0.85rem);
        font-family: 'ebrima';
        letter-spacing: clamp(0, 0.01em, 0.01em);
        font-weight: 500;
        text-transform: uppercase;
        border-left: none;
        white-space: nowrap;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }

    #felsomenu li a::after {
        content: "";
        display: block;
        height: 0.1rem;
        width: 100%;
        background-color: #1f206b;
        transform: scaleX(0);
        transition: transform 0.33s ease;
        margin-top: 0.15rem;
    }

    #felsomenu li a.active {
        color: #373886;
        font-weight: 500;
        background-color: transparent;
    }

    #felsomenu li a.active::after {
        transform: scaleX(1);
        background-color: #373886;
    }
    
    /* Extra small screens - even more compact */
    @media screen and (max-width: 360px) {
        #felsomenu {
            gap: clamp(0.3rem, 1.5vmin, 0.8rem);
        }
        #felsomenu li a {
            padding: clamp(0.15rem, 0.6vmin, 0.35rem) clamp(0.3rem, 1.5vmin, 0.8rem);
            font-size: clamp(0.5rem, 1.5vmin, 0.75rem);
            letter-spacing: 0;
        }
    }
    
    /* Very narrow screens - maximum shrinking */
    @media screen and (max-width: 320px) {
        #felsomenu {
            gap: clamp(0.2rem, 1.2vmin, 0.6rem);
        }
        #felsomenu li a {
            padding: clamp(0.1rem, 0.5vmin, 0.3rem) clamp(0.25rem, 1.2vmin, 0.6rem);
            font-size: clamp(0.45rem, 1.3vmin, 0.7rem);
            letter-spacing: 0;
        }
    }


    /* Hide offers (third) and contact (last) buttons on mobile */
    #felsomenu li:nth-child(3),
    #felsomenu li:last-child {
        display: none;
    }

    #media {
        width: 100%;
        height: clamp(20rem, 150vmin, 35rem);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: pan-y pinch-zoom;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        isolation: isolate;
    }

    /* Allow overflow for kep4 to show full-size main image - Mobile */
    #media:has(.kep4-container) {
        overflow: visible;
    }

    #hkep {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        position: relative;
        z-index: 1;
    }

    .kep1, .kep2, .kep3, .kep4 { 
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 1;
    }

    /* Kepstilus 4: Container for layered background and main image - Mobile */
    .kep4-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: visible;
    }

    /* Blurred background layer - Mobile */
    .kep4-blur-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: repeat;
        background-size: auto;
        background-position: center;
        filter: blur(8px);
        -webkit-filter: blur(8px);
        z-index: 1;
    }

    /* Sharp main image on top - Mobile */
    .kep4-main-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto;
        z-index: 2;
        pointer-events: none;
    }

    .kep1 {
        animation-name: kepj;
        animation-duration: 1.2s;
    }

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

    #vidi {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cim1, .cim2, .cim3, .cim4 {
        position: absolute;
        color: #ffffff;
        text-transform: uppercase;
        font-family: 'Calibri', Arial, sans-serif;
        text-align: center;
        padding: 0 1rem;
        animation-name: cimjobb;
        animation-duration: 1s;
        z-index: 5;
    }

    @keyframes cimjobb {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .cim1 {
        margin-bottom: clamp(10rem, 26vmin, 14rem);
        font-size: clamp(2rem, 8vmin, 3.5rem);
    }

    .cim2 {
        font-size: clamp(1.5rem, 5vmin, 2.5rem);
        margin-bottom: clamp(12rem, 38vmin, 17rem);
        margin-left: 0;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }

    .cim3 {
        font-size: clamp(1.8rem, 5.6vmin, 3rem);
        margin-bottom: clamp(10rem, 32vmin, 14rem);
    }

    .cim4 {
        display: none;
    }

    .keptartalom1, .keptartalom2, .keptartalom3, .keptartalom4 {
        color: #ffffff;
        position: absolute;
        font-family: 'Calibri', Arial, sans-serif;
        text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
        line-height: 1.5;
        max-width: 90%;
        animation-name: alsojobb;
        animation-duration: 1.2s;
        z-index: 5;
    }

    @keyframes alsojobb {
        0% {
            opacity: 0;
            transform: translateY(15px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .keptartalom1 {
        font-size: clamp(1rem, 3.3vmin, 1.4rem);
        margin-top: clamp(2rem, 8vmin, 4rem);
        text-align: center;
    }

    .keptartalom2 {
        margin-top: clamp(2rem, 8vmin, 4rem);
        margin-left: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0.4rem;
        padding: clamp(0.8rem, 2.4vmin, 1.2rem);
        font-size: clamp(0.9rem, 2.6vmin, 1.2rem);
        background-color: rgba(0, 0, 0, 0.144);
        /*backdrop-filter: blur(5px);*/
        font-weight: 400;
        text-align: center;
        width: auto;
    }

    .keptartalom2-second {
        margin-top: clamp(2rem, 8vmin, 4rem);
        margin-left: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0.4rem;
        padding: clamp(0.8rem, 2.4vmin, 1.2rem);
        font-size: clamp(0.9rem, 2.6vmin, 1.2rem);
        background-color: rgba(0, 0, 0, 0.144);
        backdrop-filter: blur(5px);
        font-weight: 400;
        text-align: center;
        width: auto;
        z-index: 6;
    }

    .keptartalom3 {
        font-size: clamp(0.9rem, 2.6vmin, 1.2rem);
        background-color: rgba(0, 0, 0, 0.26);
        /*backdrop-filter: blur(2px);*/
        font-weight: 500;
        margin-top: clamp(2rem, 4vmin, 3rem);
        padding: clamp(0.8rem, 2.6vmin, 1.2rem);
        border-radius: 0.4rem;
    }

    .keptartalom4 {
        display: none;
    }

    .ugomb {
        background-color: transparent;
        z-index: 6;
    }

    .gomb1, .gomb2, .gomb3, .gomb4 {
        animation-name: gomb3;
        animation-delay: 1s;
        position: absolute;
        box-sizing: border-box;
        text-transform: uppercase;
        font-family: 'ebrima';
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        padding: clamp(0.6rem, 2.8vmin, 1.2rem) clamp(1.4rem, 4vmin, 2rem);
        font-size: clamp(0.85rem, 2.8vmin, 1.1rem);
        border-radius: 0.4rem;
        z-index: 6;
    }

    @keyframes gomb3 {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .gomb1 {
        margin-top: clamp(14rem, 52vmin, 20rem);
        border: solid 0.05rem;
    }

    .gomb2 {
        background-color: rgba(55, 81, 112, 0.85);
        color: #0088ff;
        margin-top: clamp(12rem, 44vmin, 18rem);
        right: clamp(1rem, 3vmin, 2rem);
        left: auto;
        border: 0.05rem solid rgba(255, 255, 255, 0.6);
    }

    .gomb3 {
        margin-top: clamp(14rem, 52vmin, 20rem);
        border: solid 0.05rem;
    }

    .gomb4 {
        margin-top: clamp(12rem, 42vmin, 18rem);
        border: solid 0.05rem rgba(255, 255, 255, 0.6);
    }

    .gomb4:hover {
        opacity: 0.8;
        transform: translateY(-2px);
    }

    #custombtnhely {
        border-radius: 50rem;
        box-sizing: border-box;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        bottom: clamp(1rem, 4vmin, 2rem);
        gap: clamp(0.4rem, 1vmin, 0.6rem);
        padding: clamp(0.5rem, 1.5vmin, 0.8rem);
        background-color: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(5px);
        z-index: 7;
    }
        
    .custombtn {
        cursor: pointer;
        width: clamp(0.6rem, 2vmin, 0.9rem);
        height: clamp(0.6rem, 2vmin, 0.9rem);
        border-radius: 50%;
        border: 0.08rem solid rgba(255, 255, 255, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #custombtnhely input[type="radio"] {
        display: none;
    }

    .custombtn .checkmark {
        display: none;
        width: 65%;
        height: 65%;
        border-radius: 50%;
        background-color: #ffffff;
    }

    #custombtnhely input[type="radio"]:checked + .checkmark {
        display: block;
    }

    #balnyil, #jobbnyil {
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        width: clamp(2rem, 6.5vmin, 2.8rem);
        height: clamp(2rem, 6.5vmin, 2.8rem);
        box-sizing: border-box;
        position: absolute;
        bottom: clamp(1rem, 4vmin, 2rem);
        border-radius: 50%;
        border: none;
        cursor: pointer;
        opacity: 1;
        transition: all 0.3s ease;
        margin: 0;
        z-index: 10;
    }

    #balnyil {
        left: 0.5rem;
    }

    #jobbnyil {
        right: 0.5rem;
    }

    #balnyilkep, #jobbnyilkep {
        position: absolute;
        width: clamp(1.4rem, 4.8vmin, 2rem);
        height: clamp(1.4rem, 4.4vmin, 1.9rem);
        margin: 0;
        pointer-events: none;
    }

    /* Mobile floating offers widget */
    #mobile-offers-widget {
        position: fixed;
        bottom: clamp(1rem, 4vmin, 1.5rem);
        right: clamp(0.8rem, 3vmin, 1.2rem);
        background-color: var(--beige-light2);
        backdrop-filter: blur(10px);
        border-radius: clamp(0.6rem, 2vmin, 0.8rem);
        padding: clamp(0.8rem, 2.5vmin, 1rem) clamp(1rem, 3vmin, 1.2rem);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        max-width: clamp(12rem, 60vmin, 18rem);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        display: none;
    }

    #mobile-offers-widget.show {
        opacity: 1;
        transform: translateY(0);
        display: block;
    }

    #mobile-offers-widget .offers-text {
        color: var(--white-pure);
        font-family: Calibri, Arial, sans-serif;
        font-size: clamp(0.75rem, 2.2vmin, 0.95rem);
        margin-bottom: clamp(0.5rem, 1.5vmin, 0.7rem);
        line-height: 1.4;
        text-align: left;
    }

    #mobile-offers-widget .offers-button {
        display: inline-block;
        background-color: var(--blue2);
        color: var(--white-pure);
        padding: clamp(0.5rem, 1.5vmin, 0.7rem) clamp(1rem, 2.5vmin, 1.3rem);
        border-radius: clamp(0.4rem, 1vmin, 0.5rem);
        text-decoration: none;
        font-family: Calibri, Arial, sans-serif;
        font-size: clamp(0.7rem, 2vmin, 0.85rem);
        font-weight: 500;
        text-transform: uppercase;
        transition: all 0.3s ease;
        border: solid 0.08rem rgba(255, 255, 255, 0.3);
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    #mobile-offers-widget .offers-button:hover {
        background-color: var(--blue);
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Switch colors for rooms and gallery pages */
    body[data-page="rooms"] #mobile-offers-widget,
    body[data-page="gallery"] #mobile-offers-widget {
        background-color: var(--blue2-transparent);
    }

    body[data-page="rooms"] #mobile-offers-widget .offers-text,
    body[data-page="gallery"] #mobile-offers-widget .offers-text {
        color: var(--white-pure);
    }

    body[data-page="rooms"] #mobile-offers-widget .offers-button,
    body[data-page="gallery"] #mobile-offers-widget .offers-button {
        background-color: var(--beige-light2);
        color: var(--white-pure);
        font-weight: 600;
    }

    body[data-page="rooms"] #mobile-offers-widget .offers-button:hover,
    body[data-page="gallery"] #mobile-offers-widget .offers-button:hover {
        background-color: var(--beige-light);
        color: var(--white-pure);
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Hide widget on offers page */
    body[data-page="offers"] #mobile-offers-widget {
        display: none !important;
    }
}

/* Loading indicator */
.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(40px, 8vw, 50px);
    height: clamp(40px, 8vw, 50px);
    border: clamp(4px, 1vw, 5px) solid #f3f3f3;
    border-top: clamp(4px, 1vw, 5px) solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 9999;
}

.loading-indicator::after {
    content: attr(data-progress);
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(12px, 2.5vw, 14px);
    color: #333;
    white-space: nowrap;
}

.error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ff5252;
    color: white;
    padding: clamp(15px, 4vw, 20px);
    border-radius: clamp(4px, 1vw, 5px);
    text-align: center;
    z-index: 9999;
    font-family: Arial, sans-serif;
    max-width: 90%;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

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

/* ========== COMMON FOOTER STYLES ========== */
/* Desktop Footer (min-width: 768px) */
@media screen and (min-width: 768px) {
    .desktop {
        position: relative;
        width: 100%;
        background-color: var(--hatter);
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #1f206b;
        font-family: 'ebrima';
        font-size: clamp(0.9rem, 1.2vw, 1.1rem);
        padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
    }

    .desktop h2 {
        font-size: clamp(1.5rem, 3vw, 2rem);
        margin-bottom: clamp(1rem, 2vw, 2rem);
        text-align: center;
    }
    
    #info1, #info2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        gap: clamp(1rem, 3vw, 2rem);
        margin: clamp(1rem, 2vw, 2rem) 0;
        width: 100%;
        max-width: 1200px;
    }
    
    #info1 li, #info2 li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem;
    }
    
    .text, .text2 {
        color: #1f206b;
        font-family: 'ebrima';
        font-size: clamp(0.9rem, 1.2vw, 1.1rem);
        text-align: center;
        line-height: 1.5;
    }
    
    .text2 {
        text-decoration: underline;
    }
    
    .icon, .icon2 {
        width: clamp(1.2rem, 1.8vw, 1.8rem);
        height: clamp(1.2rem, 1.8vw, 1.8rem);
        flex-shrink: 0;
    }
    
    .logo {
        margin-top: clamp(2rem, 3.5vw, 3.5rem);
    }
    
    .logo img {
        width: clamp(100px, 7vw, 120px);
        height: clamp(60px, 4vw, 80px);
        object-fit: cover;
    }
    
    .button-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: clamp(1.5rem, 2vw, 2rem);
    }
    
    .button {
        background-color: #f2d547;
        color: #1f206b;
        padding: clamp(0.7rem, 0.8vw, 1rem) clamp(1rem, 1.2vw, 1.5rem);
        font-size: clamp(0.9rem, 1vw, 1.1rem);
        font-family: "Arial", Helvetica, sans-serif;
        border-radius: clamp(0.3rem, 0.4vw, 0.5rem);
        cursor: pointer;
        text-align: center;
        transition: background-color 0.3s ease;
        border: none;
    }

    .button:hover {
        background-color: #e0c440;
    }
    
    #szvonal {
        border: none;
        border-top: clamp(0.08rem, 0.1vw, 0.15rem) solid #1f206b;
        width: min(90%, 1200px);
        margin: clamp(2rem, 4vw, 3rem) 0;
    }

    .columns-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(2rem, 5vw, 4rem);
        margin: clamp(2rem, 3vw, 3rem) 0;
        width: 100%;
    }

    .link-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.75rem, 1.5vw, 1rem);
        min-width: 150px;
    }

    .footer-btn {
        color: #1f206b;
        font-family: 'ebrima';
        font-size: clamp(0.85rem, 1.2vw, 1rem);
        text-decoration: none;
        transition: color 0.3s ease, transform 0.2s ease;
        padding: 0.25rem 0.5rem;
    }

    .footer-btn:hover {
        color: #2d2f9e;
        transform: translateY(-2px);
    }

    footer {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        width: 100%;
        max-width: 1200px;
        font-size: clamp(0.75rem, 1vw, 0.9rem);
        padding: 1rem;
        font-family: 'ebrima';
        color: #1f206b;
        text-align: center;
    }
}

/* Mobile Footer (max-width: 767px) */
@media screen and (max-width: 767px) {
    .desktop {
        position: relative;
        width: 100%;
        background-color: var(--hatter);
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #1f206b;
        font-family: 'ebrima';
        font-size: clamp(0.9rem, 3vmin, 1.1rem);
        padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 3vw, 2rem);
    }

    .desktop h2 {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
        margin-bottom: clamp(1.5rem, 3vw, 2rem);
        text-align: center;
        font-family: 'ebrima';
    }
    
    #info1 {
        width: 100%;
        max-width: 90%;
        margin-top: clamp(2rem, 5vw, 3rem);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        list-style: none;
        gap: 0;
    }
    
    #info1 li {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: clamp(1rem, 3vw, 1.5rem);
        margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
        padding-left: 0;
        position: relative;
    }

    #info2 {
        width: 100%;
        max-width: 90%;
        margin-top: clamp(1.5rem, 4vw, 2.5rem);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        list-style: none;
        gap: 0;
    }
    
    #info2 li {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: clamp(1rem, 3vw, 1.5rem);
        margin-bottom: clamp(0.3rem, 1vw, 0.5rem);
        padding-left: 0;
        position: relative;
    }
    
    .text {
        color: #1f206b;
        font-family: 'ebrima';
        font-size: clamp(0.75rem, 2.4vmin, 1rem);
        text-align: left;
        line-height: 1.5;
        position: relative;
        padding-left: clamp(2.5rem, 8vw, 3.5rem);
        display: inline-block;
    }

    .text2 {
        color: #1f206b;
        text-decoration: underline;
        font-family: 'ebrima';
        font-size: clamp(0.85rem, 2.4vmin, 1rem);
        text-align: left;
        line-height: 1.5;
        position: relative;
        padding-left: clamp(2.5rem, 8vw, 3.5rem);
        display: inline-block;
    }
    
    .icon {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: clamp(1.2rem, 5vw, 2rem);
        height: clamp(1.2rem, 5vw, 2rem);
    }

    .icon2 {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: clamp(1.5rem, 5vw, 2rem);
        height: clamp(1.5rem, 5vw, 2rem);
    }
    
    .logo {
        margin-top: clamp(2rem, 3.5vw, 3rem);
    }
    
    .logo img {
        width: clamp(80px, 7vmin, 100px);
        height: clamp(50px, 4vmin, 70px);
        object-fit: cover;
    }
    
    .button-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: clamp(1.5rem, 2vw, 2rem);
    }
    
    .button {
        background-color: #f2d547;
        color: #1f206b;
        padding: clamp(0.7rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem);
        font-size: clamp(0.9rem, 3vmin, 1.1rem);
        font-family: "Arial", Helvetica, sans-serif;
        border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
        cursor: pointer;
        text-align: center;
        transition: background-color 0.3s ease;
        border: none;
    }

    .button:hover {
        background-color: #e0c440;
    }
    
    #szvonal {
        border: none;
        border-top: clamp(0.08rem, 0.12vw, 0.15rem) solid #1f206b;
        width: 90%;
        margin-top: clamp(2rem, 5vw, 3rem);
    }

    .columns-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: clamp(2rem, 6vw, 3rem);
        margin-top: clamp(2rem, 5vw, 3rem);
        margin-bottom: clamp(2rem, 5vw, 3rem);
        flex-wrap: wrap;
    }

    .link-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 3vw, 1.5rem);
    }

    .footer-btn {
        color: #1f206b;
        font-family: 'ebrima';
        font-size: clamp(0.7rem, 2.5vmin, 1rem);
        text-decoration: none;
        transition: color 0.3s ease, transform 0.2s ease;
        padding: 0.25rem 0.5rem;
    }

    .footer-btn:hover {
        color: #2d2f9e;
        transform: translateY(-2px);
    }

    footer {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: clamp(0.5rem, 2vw, 1rem);
        width: 100%;
        font-size: clamp(0.7rem, 2vmin, 0.9rem);
        padding: clamp(0.5rem, 2vw, 1rem);
        font-family: 'ebrima';
        color: #1f206b;
        text-align: center;
    }
}

/* SEO: single H1 per page - style like section title */
.page-main-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1rem auto;
    text-align: center;
    max-width: 90%;
}

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