*,
:after,
:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --green: #2e7d32;
    --green-dark: #1b5e20;
    --green-light: #4caf50;
    --green-sage: #93C572;
    --accent: #ff6f00;
    --accent-lt: #ffa726;
    --white: #fff;
    --off-white: #f9f9f4;
    --text: #333;
    --text-lt: #666;
    --border: #e0e0e0;
    --shadow: 0 4px 24px rgba(0, 0, 0, .10);
    --radius: 10px;
    --transition: .3s ease;
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1)
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: #FAF8F3;
    overflow-x: hidden;
    cursor: auto;
    padding-top: 0 !important
}

a {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%;
    display: block
}

ul {
    list-style: none
}

.how-it-work {
    background-color: rgba(232, 236, 233, .719);
    padding: 20px;
    border-radius: 8px
}

.how-it-work p {
    color: #128c7e
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    perspective: 1200px
}

@media(max-width:900px), (hover:none) {
    body {
        cursor: auto
    }
}

.jg-ts-layout {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    background-color: #f4f6f9;
    overflow: visible;
}

.jg-ts-sidebar {
    width: 25%;
    background: linear-gradient(rgba(20, 140, 65, .92), rgba(10, 90, 40, .95)), url('image_8f8da4.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 10px 0 25px rgba(0, 0, 0, .15);
    position: relative;
    z-index: 10;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px
}

.jg-ts-header {
    text-align: left;
    margin-bottom: 40px
}

.jg-ts-eyebrow {
    color: #a3f7bf;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .9rem;
    display: block
}

.jg-ts-header h2 {
    color: #fff;
    font-size: 2.5rem;
    margin: 15px 0 30px;
    line-height: 1.2
}

.jg-ts-btn {
    display: inline-block;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    transition: all .3s ease;
    border: 2px solid #fff;
    color: #fff;
    background: transparent
}

.jg-ts-btn:hover {
    background: #fff;
    color: #0a5a28
}

.jg-ts-highlight-box {
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid #a3f7bf;
    text-align: left;
    color: #fff;
    transition: all .3s ease
}

.jg-ts-highlight-box h3 {
    font-size: 1.4rem;
    margin: 0 0 15px;
    color: #a3f7bf
}

.jg-ts-highlight-box p {
    font-size: 1rem;
    color: #f0f0f0;
    line-height: 1.6;
    margin: 0
}

.jg-ts-book-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    background: #2e7d32;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background .3s ease, transform .2s ease
}

.jg-ts-book-btn:hover {
    background: #ff6f00;
    transform: translateY(-2px)
}

.jg-ts-slider-area {
    width: 75%;
    overflow: hidden;
    padding: 80px 0;
    display: flex;
    align-items: center
}

.jg-ts-tilted-wrapper {
    transform: rotate(-3deg) scale(1);
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%
}

.jg-ts-row {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    gap: 30px
}

.jg-ts-row-right {
    animation: jg-slideRightAnim 60s linear infinite;
    margin-left: -150px
}

.jg-ts-row-left {
    animation: jg-slideLeftAnim 60s linear infinite
}

.jg-ts-row:hover {
    animation-play-state: paused
}

.jg-ts-card {
    width: 320px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
    transition: transform .3s ease, box-shadow .3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column
}

.jg-ts-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .2)
}

.jg-ts-card-img {
    width: 100%;
    height: 180px;
    -o-object-fit: cover;
    object-fit: cover
}

.jg-ts-card-body {
    padding: 20px;
    text-align: center
}

.jg-ts-card-icon {
    font-size: 2rem;
    color: #148c41;
    margin-bottom: 10px
}

.jg-ts-card-title {
    font-size: 1.25rem;
    margin: 0 0 10px;
    color: #333
}

.jg-ts-card-link {
    text-decoration: none;
    color: #148c41;
    font-weight: 700
}

@keyframes jg-slideRightAnim {
    0% {
        transform: translateX(-50%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes jg-slideLeftAnim {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

@media(max-width:1024px) {
    .jg-ts-sidebar {
        width: 35%;
        padding: 40px 20px
    }

    .jg-ts-slider-area {
        width: 65%
    }
}

@media(max-width:768px) {
    .jg-ts-sidebar {
        width: 100%;
        min-height: auto;
        padding: 50px 20px;
        border-radius: 0 0 40px 40px
    }

    .jg-ts-slider-area {
        width: 100%;
        padding: 40px 0
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    :after,
    :before {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
    }

    [data-reveal],
    [data-reveal-img],
    [data-stagger-item] {
        opacity: 1 !important;
        transform: none !important
    }
}

.btn-primary {
    display: inline-block;
    position: relative;
    background: linear-gradient(135deg, var(--accent), var(--accent-lt));
    color: #fff;
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .3px;
    transition: transform .3s var(--spring), box-shadow .3s ease;
    border: none;
    white-space: nowrap;
    transform-style: preserve-3d
}

.btn-primary:hover {
    box-shadow: 0 14px 34px rgba(255, 111, 0, .4)
}

.btn-primary.full-w {
    width: 100%;
    text-align: center
}

.section-eyebrow {
    display: inline-block;
    color: var(--accent);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-lt), var(--green-sage));
    z-index: 1100;
    transition: width .08s linear;
    pointer-events: none
}

.jgw-scope {
    --jgw-green: #8ECA3C;
    --jgw-green-deep: #35521F;
    --jgw-green-tint: rgba(142, 202, 60, .12);
    --jgw-orange: #E89951;
    --jgw-ink: #23291d
}

.jgw-scope * {
    box-sizing: border-box
}

.jgw-scope ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.jgw-scope a {
    text-decoration: none
}

/* Buttons wapas dikhne chahiye — z-index aur position force */
#jgh2Hero .jgw-hero-actions-overlay {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 90px !important;
    z-index: 999 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#jgh2Hero .jgw-hero-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

#jgh2Hero .jgw-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #E89951 !important;
    color: #fff !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#jgh2Hero .jgw-btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #2e7d32 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 13px 26px !important;
    border-radius: 50px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 26px rgba(46, 125, 50, 0.4) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

#jgh2Hero .jgw-btn-ghost i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #1b5e20 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
}

#jgh2Hero .jgw-btn-ghost:hover {
    background: #388e3c !important;
    box-shadow: 0 0 26px 6px rgba(76, 175, 80, 0.65), 0 10px 30px rgba(46, 125, 50, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* Circle image slider — sirf active image dikhegi, baaki opacity 0 */
#jgwCircleSlider {
    position: absolute !important;
    z-index: 5 !important;
    top: 170px !important;
    right: 40px !important;
    width: 240px !important;
    height: 240px !important;
    border-radius: 50% !important;
    overflow: visible !important;
}

#jgwCircleSlider img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    opacity: 0 !important;
transition: opacity 1.1s var(--ease-out) !important;
    animation: none !important;
}

#jgwCircleSlider img.jgw-circle-active {
    opacity: 1 !important;
}

@media (max-width: 768px) {
    #jgwCircleSlider {
        display: none !important;
    }
}






.jgw-hero-wrap * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.jgw-hero-wrap {
    background: #17240f;
    padding: 0;
    margin: 0;
    width: 100%
}

.jgw-hero-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    background: #17240f;
    box-shadow: none;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.jgw-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0
}

.jgw-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 0
}

.jgw-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(23, 36, 15, .2)0, rgba(23, 36, 15, .1)40%, rgba(23, 36, 15, .35)100%)
}

.jgw-hero-logo-fixed {
    position: absolute;
    top: 1px;
    left: 24px;
    z-index: 41;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center
}

.jgw-hero-logo-fixed img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.jgw-hero-email-fixed {
    position: absolute;
    top: 34px;
    right: 24px;
    z-index: 41;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 9px 18px;
    border-radius: 50px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background .25s
}

.jgw-hero-email-fixed:hover {
    background: #E89951
}

@media(max-width:900px) {
    .jgw-hero-logo-fixed {
        width: 38px;
        height: 38px;
        top: 18px;
        left: 16px
    }

    .jgw-hero-email-fixed {
        display: none
    }
}

.jgw-hero-top {
    position: relative;
    z-index: 3;
    padding: 60px 60px 40px;
    color: #fff;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jgw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B5E18B;
    background: rgba(181, 225, 139, .14);
    border: 1px solid rgba(181, 225, 139, .28);
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 22px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.jgw-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35)
} */

/* .jgw-headline-script {
    font-style: italic;
    color: #B5E18B
}

.joygaon-wrapper {
    position: absolute;
    z-index: 5;
    right: 40px;
    top: 270px;
    width: 260px;
    height: 260px;
}

.jgw-hero-circle-img {
    position: relative;
    z-index: 5;
    right: auto;
    top: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    border: none;
    box-shadow: none;
    animation: jgwCircleBounce 2.6s ease-in-out infinite;
    transform-origin: center
}

@keyframes jgwCircleBounce {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }
}

.joygaon-wrapper::before {
    display: none;
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    z-index: 1;
    background: conic-gradient(from 0deg, #4caf50 0, #ffeb3b 20%, #ff9800 40%, #f44336 60%, #2196f3 80%, #4caf50 100%);
    animation: jgwRingSpin 3.5s linear infinite, jgwRingGlow 1.8s ease-in-out infinite;
    filter: blur(.5px)
}

.joygaon-wrapper::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    background: #fff
}

@keyframes jgwRingSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes jgwRingGlow {

    0%,
    100% {
        box-shadow: 0 0 12px 2px rgba(76, 175, 80, .55), 0 0 26px 6px rgba(255, 152, 0, .35)
    }

    50% {
        box-shadow: 0 0 26px 6px rgba(244, 67, 54, .7), 0 0 46px 14px rgba(33, 150, 243, .5)
    }
}

.joygaon-wrapper .jgw-spark-orbit {
    position: absolute;
    inset: -9px;
    z-index: 4;
    border-radius: 50%;
    pointer-events: none;
    animation: jgwRingSpin 2.2s linear infinite
}

.joygaon-wrapper .jgw-spark-orbit::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0, #fff59d 35%, rgba(255, 255, 255, 0)75%);
    box-shadow: 0 0 10px 4px #fff, 0 0 20px 8px #ffeb3b, 0 0 34px 14px rgba(255, 235, 59, .6);
    animation: jgwSparkPulse .9s ease-in-out infinite
}

@keyframes jgwSparkPulse {

    0%,
    100% {
        opacity: .7;
        transform: scale(.85)
    }

    50% {
        opacity: 1;
        transform: scale(1.25)
    }
}

@media(prefers-reduced-motion:reduce) {

    .jgw-hero-circle-img,
    .joygaon-wrapper .jgw-spark-orbit,
    .joygaon-wrapper .jgw-spark-orbit::before,
    .joygaon-wrapper::before {
        animation: none !important
    }
}

@media(max-width:1024px) {
    .joygaon-wrapper {
        width: 170px;
        height: 170px;
        right: 30px;
        top: 320px;
        /* pehle 260px tha */
    }
}

@media(max-width:768px) {
    .joygaon-wrapper {
        display: none
    }
}

.jgw-hero-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    background-color: #fff;
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .02)0, rgba(0, 0, 0, .02)1px, transparent 1px, transparent 4px);
    -webkit-clip-path: url(#jgwWaveClip);
    clip-path: url(#jgwWaveClip);
    padding: 60px 0 40px;
    margin-top: -50px;
    min-height: 200px;
    overflow: visible;
    flex-shrink: 0;
}

.jgw-doodle-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    opacity: .15;
    mix-blend-mode: multiply;
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5%
}

.jgw-wheel-wrapper {
    width: 440px;
    height: 440px;
    animation: jgwSpinWheel 20s linear infinite;
    transform-origin: center center
}

@keyframes jgwSpinWheel {}

.jgw-wheel-wrapper svg {
    display: block
}

.jgw-hero-bottom-text {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(24px, 6vw, 60px);
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

.jgw-text-block {
    flex: 1 1 50%;
    min-width: 280px
}

.jgw-hero-bottom-text h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    color: #35521F;
    margin-bottom: 14px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.jgw-hero-bottom-text h2 i {
    color: #E89951;
    font-size: 1.2em
}

.jgw-hero-bottom-text p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #4a5940;
    margin-bottom: 28px;
    max-width: 52ch
}

.jgw-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

.jgw-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #E89951, #F0AD70);
    color: #fff;
    padding: 15px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14.5px;
    box-shadow: 0 14px 32px rgba(232, 153, 81, .32);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s
}

.jgw-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(232, 153, 81, .42)
}

.jgw-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #35521F;
    font-weight: 500;
    font-size: 14.5px;
    padding: 15px 8px;
    transition: opacity .2s
}

.jgw-btn-ghost i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(68, 161, 148, .12);
    border: 1px solid rgba(68, 161, 148, .2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #44A194
}

.jgw-btn-ghost:hover {
    opacity: .75
}

.jgw-ride-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(68, 161, 148, .08);
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 13px;
    color: #44A194;
    font-weight: 500;
    margin-top: 6px
}

.jgw-ride-badge i {
    font-size: 16px;
    color: #E89951
}

@media(max-width:480px) {
    .jgw-hero-bottom {
        min-height: 120px;
        padding: 18px 0 16px;
    }
}

@media(max-width:768px) {
    .jgw-hero-top {
        padding: 40px 24px 60px;
        /* pehle 100px bottom padding tha, ab kam */
        flex: 1.4;
        /* video area ko zyada flex-share do */
    }

    .jgw-hero-bottom {
        -webkit-clip-path: none;
        clip-path: none;
        margin-top: -20px;
        border-radius: 0;
        padding: clamp(20px, 5vw, 28px) 0 clamp(16px, 4vw, 22px);
        min-height: 140px;
        /* pehle 180px tha, ab aur kam */
        flex-shrink: 1;
    }

    .jgw-hero-bottom-text {
        flex-direction: column;
        text-align: center;
        padding: 0 20px
    }

    .jgw-hero-actions {
        justify-content: center
    }

    .jgw-doodle-layer {
        opacity: .08;
        padding-right: 0;
        justify-content: center
    }

    .jgw-wheel-wrapper {
        width: 240px;
        height: 240px
    }
}

@media(max-width:480px) {
    .jgw-doodle-layer {
        opacity: .05
    }

    .jgw-wheel-wrapper {
        width: 160px;
        height: 160px
    }
}

.pf-section {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 20px; */
    background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0, 0, 0, .04)10px, rgba(0, 0, 0, .04)11px);
    min-height: 100vh
}

.pf-section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.pf-wrapper {
    width: 100%;
    max-width: 1400px;
    background: #fff;
    border-radius: 48px 48px 32px 32px;
    padding: 30px 35px 35px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .04);
    position: relative;
    overflow: hidden
}

.pf-wrapper::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(46, 125, 50, .03)0, transparent 70%);
    border-radius: 50%;
    pointer-events: none
}

.pf-hero {
    display: flex;
    gap: 40px;
    min-height: 520px;
    position: relative;
    z-index: 1
}

.pf-image-wrapper {
    flex: 1.4;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
    min-height: 400px;
    background: #f9f9f4
}

.pf-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity .8s cubic-bezier(.25, .46, .45, .94);
    opacity: 0
}

.pf-slide.active {
    opacity: 1
}

.pf-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 35px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7)0, transparent 100%);
    pointer-events: none
}

.pf-overlay .pf-tag {
    display: inline-block;
    background: rgba(76, 175, 80, .2);
    color: #93C572;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 40px;
    border: 1px solid rgba(76, 175, 80, .25);
    margin-bottom: 10px
}

.pf-overlay h2 {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 6px;
    color: #fff
}

.pf-overlay p {
    font-size: 1rem;
    color: #f9f9f4;
    opacity: .85;
    max-width: 80%
}

.pf-panel {
    flex: 1;
    min-width: 280px;
    background: #f9f9f4;
    border: 1px solid rgba(46, 125, 50, .08);
    border-radius: 32px;
    padding: 32px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .04);
    position: relative;
    overflow: hidden
}

.pf-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(46, 125, 50, .03)0, transparent 70%);
    pointer-events: none
}

.pf-panel-content {
    display: none;
    flex-direction: column;
    gap: 12px
}

.pf-panel-content.active {
    display: flex
}

.pf-name {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1b5e20
}

.pf-name small {
    display: block;
    font-size: .9rem;
    font-weight: 400;
    color: #2e7d32;
    margin-top: 4px
}

.pf-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 2px 0 4px
}

.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
    border: none;
    cursor: pointer
}

.pf-btn-gallery {
    background: rgba(46, 125, 50, .08);
    color: #1b5e20;
    border: 1px solid rgba(46, 125, 50, .12)
}

.pf-btn-gallery:hover {
    background: rgba(46, 125, 50, .16);
    transform: scale(1.04)
}

.pf-btn-order {
    background: #ff6f00;
    color: #fff
}

.pf-btn-order:hover {
    background: #ffa726;
    transform: scale(1.04);
    box-shadow: 0 8px 30px rgba(255, 111, 0, .25)
}

.pf-divider {
    border: none;
    border-top: 1px solid rgba(46, 125, 50, .08);
    margin: 2px 0
}

.pf-details {
    display: flex;
    align-items: center;
    gap: 14px
}

.pf-details-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0
}

.pf-details .pf-place-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1b5e20
}

.pf-details .pf-place-desc {
    font-weight: 400;
    font-size: .85rem;
    color: #2e7d32;
    display: block;
    margin-top: 2px
}

.pf-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #3d3d3d;
    padding: 16px 20px;
    background: #fff;
    border-radius: 16px;
    border-left: 3px solid #ff6f00;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .02)
}

.pf-highlights-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin-top: 4px
}

.pf-highlights-list li {
    font-size: .9rem;
    color: #4a4a4a;
    padding: 4px 0;
    border-bottom: 1px solid rgba(46, 125, 50, .05)
}

.pf-bottom {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid rgba(46, 125, 50, .06);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1
}

.pf-thumbs {
    display: flex;
    justify-content: space-around;
    gap: 14px;
    flex-wrap: wrap
}

.pf-thumb-card {
    width: 120px;
    background: #fff;
    border-radius: 16px;
    cursor: pointer;
    transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
    border: 2px solid transparent;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .02);
    position: relative;
    padding: 4px
}

.pf-thumb-card::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: linear-gradient(135deg, #a8e6cf, #d4f0ff, #e0b1ff, #ffb3ba);
    z-index: -1;
    filter: blur(8px);
    opacity: .8
}

.pf-thumb-card:hover {
    background: #fff;
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .06)
}

.pf-thumb-card.active {
    border-color: #ff6f00;
    background: #fff;
    box-shadow: 0 8px 30px rgba(255, 111, 0, .1);
    /* transform: translateY(-6px) */
}

.pf-thumb-card img {
    width: 100%;
    height: 70px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 6px;
    pointer-events: none;
    background: #f9f9f4
}

.pf-thumb-card .pf-thumb-title {
    font-size: .8rem;
    font-weight: 600;
    color: #1b5e20
}

.pf-thumb-card .pf-thumb-tag {
    font-size: .6rem;
    color: #2e7d32;
    display: block;
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.pf-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center
}

.pf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(46, 125, 50, .15);
    border: none;
    cursor: pointer;
    transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
    padding: 0
}

.pf-dot.active {
    background: #ff6f00;
    width: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 111, 0, .2)
}

.pf-dot:hover {
    background: #ffa726;
    transform: scale(1.2)
}

.pf-dot.active:hover {
    background: #ff6f00;
    transform: scale(1)
}

@media(max-width:1024px) {
    .pf-hero {
        gap: 25px;
        min-height: 450px
    }

    .pf-name {
        font-size: 2.2rem
    }

    .pf-thumb-card {
        width: 100px
    }

    .pf-thumb-card img {
        height: 60px
    }
}

@media(max-width:768px) {
    .pf-wrapper {
        /* padding: 20px; */
        border-radius: 28px
    }

    .pf-hero {
        flex-direction: column;
        min-height: auto;
        gap: 20px
    }

    .pf-image-wrapper {
        min-height: 260px;
        border-radius: 24px
    }

    .pf-overlay h2 {
        font-size: 1.8rem
    }

    .pf-overlay p {
        max-width: 100%;
        font-size: .9rem
    }

    .pf-panel {
        padding: 24px 20px
    }

    .pf-name {
        font-size: 1.8rem
    }

    .pf-desc {
        font-size: .95rem;
        padding: 14px 16px
    }

    .pf-highlights-list {
        grid-template-columns: 1fr
    }

    .pf-thumb-card {
        width: 90px;
        padding: 4px 4px 10px
    }

    .pf-thumb-card img {
        height: 50px
    }

    .pf-thumb-card .pf-thumb-title {
        font-size: .7rem
    }
}

@media(max-width:480px) {
    .pf-wrapper {
        padding: 12px;
        border-radius: 20px
    }

    .pf-image-wrapper {
        min-height: 180px;
        border-radius: 18px
    }

    .pf-overlay {
        padding: 20px 16px 16px
    }

    .pf-overlay h2 {
        font-size: 1.4rem
    }

    .pf-overlay p {
        font-size: .8rem
    }

    .pf-panel {
        padding: 16px 14px;
        border-radius: 20px;
        gap: 10px
    }

    .pf-name {
        font-size: 1.4rem
    }

    .pf-name small {
        font-size: .75rem
    }

    .pf-desc {
        font-size: .85rem;
        padding: 12px 14px;
        line-height: 1.5
    }

    .pf-btn {
        padding: 8px 16px;
        font-size: .8rem
    }

    .pf-details-icon {
        width: 38px;
        height: 38px;
        font-size: 1.2rem
    }

    .pf-details .pf-place-name {
        font-size: .95rem
    }

    .pf-details .pf-place-desc {
        font-size: .75rem
    }

    .pf-highlights-list li {
        font-size: .8rem
    }

    .pf-thumb-card {
        width: 70px;
        padding: 4px 4px 8px;
        border-radius: 12px
    }

    .pf-thumb-card img {
        height: 40px;
        border-radius: 10px
    }

    .pf-thumb-card .pf-thumb-title {
        font-size: .6rem
    }

    .pf-dot {
        width: 8px;
        height: 8px
    }

    .pf-dot.active {
        width: 20px
    }
}

.how-it-works {
    background: rgba(243, 249, 245, .05);
    padding: 0px 0;
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.hiw-step.first {
    background: #e74c3c !important
}

.hiw-step.second {
    background: var(--green) !important
}

.hiw-step.third {
    background: #74b9ff !important
}


.hiw-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden
}

.hiw-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.how-it-work {
    position: relative;
    z-index: 2
}

.hiw-header .section-eyebrow {
    color: var(--accent-lt)
}

.hiw-header h2 {
    color: #fff
}

.hiw-header p {
    color: rgba(255, 255, 255, .75)
}

.hiw-step h3 {
    color: #fff
}

.hiw-step p {
    color: rgba(255, 255, 255, .7)
}

.hiw-timeline-track {
    background: rgba(255, 255, 255, .15)
}

.hiw-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px
}

.hiw-header .section-eyebrow {
    display: inline-block;
    color: var(--accent);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px
}

.hiw-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-family: 'Playfair Display', serif;
    color: var(--green-dark);
    margin-bottom: 16px
}

.hiw-header p {
    color: var(--text-lt);
    font-size: 1.02rem;
    line-height: 1.7
}

.hiw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 100px;
    position: relative;
    z-index: 1
}

.hiw-timeline-track {
    position: absolute;
    top: 62px;
    left: 16.5%;
    right: 16.5%;
    height: 3px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    z-index: 0;
    display: none
}

.hiw-timeline-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--green-sage), var(--accent-lt));
    border-radius: 3px;
    transition: width 1.5s cubic-bezier(.16, 1, .3, 1)
}

.hiw-grid .hiw-step.in-view~.hiw-timeline-track .hiw-timeline-fill,
.hiw-grid.in-view .hiw-timeline-fill {
    width: 100%
}

@media(min-width:901px) {
    .hiw-timeline-track {
        display: block
    }
}

.hiw-step {
    background: #fff;
    border-radius: 10px;
    padding: 40px 30px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    position: relative;
    border-radius: 30%;
    z-index: 1;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .2s ease-out, box-shadow .3s ease;
    border: 1px solid rgba(0, 0, 0, .03);
    overflow: visible !important
}

.hiw-step:hover {
    box-shadow: 0 20px 44px rgba(0, 0, 0, .12);
    transform: translateY(-8px) scale(1.02)
}

.hiw-icon-wrap {
    position: relative;
    width: 130px;
    height: 150px;
    margin: 10px auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    z-index: 5
}

.hiw-icon {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 25px)) translateZ(30px) scale(1);
    width: 180%;
    height: 180%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: transform .5s var(--spring), filter .4s ease;
    overflow: visible !important;
    pointer-events: none
}

.hiw-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .3)) drop-shadow(0 4px 12px rgba(0, 0, 0, .15));
    transform: translateZ(40px) scale(1.1);
    transition: transform .5s var(--spring), filter .4s ease;
    will-change: transform
}

.hiw-step:hover .hiw-icon {
    transform: translate(-50%, calc(-50% - 55px)) translateZ(50px) scale(1.08) rotateY(-6deg) rotateX(4deg)
}

.hiw-step:hover .hiw-icon img {
    transform: translateZ(60px) scale(1.2) rotateY(-4deg);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)) drop-shadow(0 8px 20px rgba(0, 0, 0, .25))
}

.hiw-step h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: rgba(245, 248, 245, .989);
    margin-bottom: 12px;
    transform: translateZ(20px);
    position: relative;
    z-index: 2
}

.hiw-step p {
    font-size: .95rem;
    line-height: 1.7;
    transform: translateZ(10px);
    position: relative;
    z-index: 2
}

@media(max-width:900px) {
    .hiw-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
        gap: 30px
    }

    .hiw-step:hover {
        transform: none
    }

    .hiw-icon-wrap {
        width: 110px;
        height: 130px
    }

    .hiw-icon {
        width: 160%;
        height: 160%
    }

    .hiw-step:hover .hiw-icon {
        transform: translate(-50%, -50%) translateZ(30px) scale(1.04)
    }

    .hiw-step:hover .hiw-icon img {
        transform: translateZ(40px) scale(1.1)
    }

    .hiw-step:hover .hiw-num {
        transform: none
    }
}

@media(max-width:480px) {
    .hiw-icon-wrap {
        width: 90px;
        height: 110px
    }

    .hiw-icon {
        width: 150%;
        height: 150%
    }
}

.hiw-step[data-stagger-item] {
    opacity: 0;
    transform: translateY(46px) scale(.92);
    transition: opacity .65s var(--ease-out), transform .65s var(--spring)
}

.hiw-step[data-stagger-item].in-view {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.joy-about {
    position: relative;
    padding: 1.5rem 5vw;
    background: #FAF8F3;
    clear: both;
    overflow: hidden
}

.joy-about-container {
    max-width: 1240px;
    margin: 0 auto
}

.joy-about-flow {
    display: block;
    width: 100%;
    overflow: hidden
}

.joy-about-stage {
    float: left;
    width: 42%;
    min-width: 280px;
    height: 360px;
    margin-right: 3.5rem;
    margin-bottom: 0;
    position: relative;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center
}

.joy-about-rig {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d
}

.joy-about-frame {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    left: 50%;
    top: 50%;
    width: 170px;
    height: 240px;
    background: #fff;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .2);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform .75s cubic-bezier(.25, 1, .5, 1), opacity .75s cubic-bezier(.25, 1, .5, 1), z-index .75s step-end
}

.joy-about-frame img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover
}

.joy-about-frame[data-index="0"] {
    z-index: 5;
    transform: translate(-50%, -50%) translateZ(90px) rotateY(0deg);
    opacity: 1
}

.joy-about-frame[data-index="1"] {
    z-index: 4;
    transform: translate(8%, -50%) translateZ(40px) rotateY(-18deg) scale(.88);
    opacity: .85
}

.joy-about-frame[data-index="2"] {
    z-index: 3;
    transform: translate(50%, -50%) translateZ(-20px) rotateY(-28deg) scale(.75);
    opacity: .5
}

.joy-about-frame[data-index="3"],
.joy-about-frame[data-index="4"],
.joy-about-frame[data-index="5"],
.joy-about-frame[data-index="6"],
.joy-about-frame[data-index="7"] {
    z-index: 1;
    transform: translate(-50%, -50%) translateZ(-120px) scale(.6);
    opacity: 0
}

.joy-about-frame[data-index="8"] {
    z-index: 3;
    transform: translate(-150%, -50%) translateZ(-20px) rotateY(28deg) scale(.75);
    opacity: .5
}

.joy-about-frame[data-index="9"] {
    z-index: 4;
    transform: translate(-108%, -50%) translateZ(40px) rotateY(18deg) scale(.88);
    opacity: .85
}

.joy-about-side-text {
    overflow: hidden;
    min-width: 0
}

.joy-about-full-text {
    clear: both;
    padding-top: 1.5rem;
    width: 100%
}

.joy-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C97531;
    margin-top: .4rem;
    margin-bottom: .4rem;
    font-weight: 600
}

.joy-about-eyebrow::before {
    content: "";
    width: 20px;
    height: 1.5px;
    background: #E89951;
    display: inline-block
}

.joy-about-h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    margin-bottom: .6rem;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #35521F
}

.joy-about-h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    margin: 1rem 0 .4rem;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #35521F
}

.joy-about-p {
    font-size: .85rem;
    line-height: 1.65;
    color: #6B6A5C;
    margin-bottom: .8rem;
    text-align: justify
}

.joy-about-p strong {
    font-weight: 600;
    color: #2C2B22
}

.joy-about-bottom {
    clear: both;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    text-align: center
}

.joy-about-cta {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    color: #fff;
    background: #35521F;
    padding: .9rem 2.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    box-shadow: 0 12px 28px -10px rgba(28, 24, 20, .35);
    transition: all .3s ease
}

.joy-about-cta:hover {
    transform: translateY(-2px);
    background: #6FA82E
}

@media(max-width:1024px) {
    .joy-about-stage {
        width: 40%;
        height: 320px;
        margin-right: 2.5rem
    }

    .joy-about-frame {
        width: 150px;
        height: 210px
    }
}

@media(max-width:820px) {
    .joy-about-stage {
        float: none;
        width: 100%;
        height: 340px;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 1.5rem
    }

    .joy-about-side-text {
        overflow: visible
    }

    .joy-about-full-text {
        clear: none;
        padding-top: 0
    }

    .joy-about-frame {
        width: 150px;
        height: 210px
    }

    .joy-about-p {
        font-size: .85rem;
        line-height: 1.6;
        text-align: left
    }
}

@media(max-width:600px) {
    .joy-about {
        padding: 1rem 4vw
    }

    .joy-about-stage {
        height: 260px
    }

    .joy-about-frame {
        width: 110px;
        height: 155px;
        border-radius: 10px
    }

    .joy-about-h2 {
        font-size: 1.5rem
    }

    .joy-about-h3 {
        font-size: 1.1rem
    }

    .joy-about-p {
        font-size: .82rem;
        line-height: 1.55;
        text-align: left
    }

    .joy-about-cta {
        font-size: .75rem;
        padding: .6rem 1.5rem
    }
}

@media(max-width:400px) {
    .joy-about-stage {
        height: 200px
    }

    .joy-about-frame {
        width: 85px;
        height: 120px;
        border-radius: 8px
    }

    .joy-about-h2 {
        font-size: 1.2rem
    }

    .joy-about-p {
        font-size: .75rem
    }
}

.food-menu {
    padding: 80px 0
}

.food-menu .section-header {
    flex-direction: column;
    align-items: flex-start
}

.food-menu .section-header p {
    color: var(--text-lt);
    font-size: .95rem;
    margin-top: 8px
}

.fm-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px
}

.fm-eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 6px 20px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif
}

.fm-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #063e37;
    line-height: 1.2;
    margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
    letter-spacing: -.02em
}

.fm-subtitle {
    font-size: 1rem;
    color: #6b6b6b;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 24px;
    font-family: 'Poppins', sans-serif
}

.menu-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 44px;
    background: var(--off-white);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid var(--border);
    max-width: 420px
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 50px;
    border: none;
    background: transparent;
    color: var(--text-lt);
    font-size: .92rem;
    font-weight: 600;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
    font-family: inherit
}

.tab-btn i {
    font-size: .85rem
}

.tab-btn.active {
    background: var(--green);
    color: #fff;
    box-shadow: 0 8px 20px rgba(46, 125, 50, .3)
}

.tab-btn:not(.active):hover {
    color: var(--green)
}

.tab-content {
    display: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out)
}
.tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0)
}

.menu-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px
}

.menu-card {
    width: 100%;
    max-width: 280px;
    flex: 0 1 280px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .07);
    border: 1px solid rgba(0, 0, 0, .04);
    transition: transform .35s var(--spring), box-shadow .35s ease, border-color .35s ease;
    display: flex;
    flex-direction: column
}

.menu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 54px rgba(0, 0, 0, .16);
    border-color: rgba(46, 125, 50, .18)
}

.menu-card-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden
}

.menu-card-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .5s ease
}

.menu-card:hover .menu-card-img img {
    transform: scale(1.08)
}

.menu-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6)0, rgba(0, 0, 0, .05)50%, transparent 75%)
}

.menu-card-time {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .94);
    color: var(--green-dark);
    font-size: .74rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 50px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.menu-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.menu-card-tag {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--accent);
    background: rgba(255, 111, 0, .1);
    padding: 4px 11px;
    border-radius: 50px
}

.menu-card-body h3 {
    font-size: 1.18rem;
    font-family: 'Playfair Display', serif;
    color: var(--green-dark);
    line-height: 1.3
}

.menu-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-size: .78rem;
    font-weight: 600;
    width: -moz-fit-content;
    width: fit-content
}

.menu-open-btn {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--accent), var(--accent-lt));
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 50px;
    font-size: .84rem;
    font-weight: 600;
    transition: transform .3s var(--spring), box-shadow .3s ease, gap .3s ease;
    font-family: inherit;
    margin-top: 8px
}

.menu-open-btn:hover {
    box-shadow: 0 12px 28px rgba(255, 111, 0, .35);
    gap: 11px
}

@media(max-width:600px) {
    .menu-cards-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto
    }

    .menu-tabs {
        flex-direction: row;
    }

    .tab-btn {
        text-align: center
    }
}

.menu-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center
}

.menu-modal.open {
    display: flex
}

.menu-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 10, .78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px
}

.menu-modal-box {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 100vh;
    padding: 16px;
    border-radius: 14px;
    background: #5a3f28;
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .04)0, rgba(0, 0, 0, .04)2px, transparent 2px, transparent 5px), repeating-linear-gradient(180deg, #5e412b 0, #5e412b 1px, #4d361f 1px, #4d361f 2px, #5e412b 2px, #5e412b 5px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -4px 0 rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(30px) scale(.96);
    transition: opacity .35s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
    overflow: visible
}

.menu-modal.open .menu-modal-box {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.menu-modal-paper {
    position: relative;
    background: #fcfbf7;
    padding: 32px 26px 26px;
    border-radius: 2px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
    transform: rotate(-.8deg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")
}

.menu-modal-paper::-webkit-scrollbar {
    display: none
}

.menu-modal-paper::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    z-index: 5;
    background: radial-gradient(circle at 35% 30%, #ff6b6b, #c0392b);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 -2px 4px rgba(0, 0, 0, .4), inset 0 2px 4px rgba(255, 255, 255, .7);
    top: -8px;
    left: -8px
}

.menu-modal-paper::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 90px;
    height: 22px;
    border: 1px solid rgba(255, 105, 135, .3);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    z-index: 5;
    pointer-events: none
}

.menu-modal-close {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    background: linear-gradient(135deg, #fd320e, #f83c0e);
    color: #fff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 105, 135, .4), inset 0 0 10px rgba(255, 255, 255, .2);
    cursor: pointer;
    z-index: 15;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
}

.menu-modal-close:hover {
    transform: scale(1.15) rotate(12deg);
    background: linear-gradient(135deg, #1a8443, #24f976);
    box-shadow: 0 6px 20px rgba(35, 248, 127, .6)
}

.menu-modal-header {
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1.5px dashed rgba(46, 125, 50, .25)
}

.menu-modal-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1b5e20;
    margin-bottom: 8px;
    letter-spacing: .3px
}

.menu-modal-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff6f00;
    font-size: .8rem;
    font-weight: 600;
    background: rgba(255, 111, 0, .08);
    padding: 4px 16px;
    border-radius: 50px
}

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

.menu-modal-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    color: #3d3a2f;
    line-height: 1.5;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(46, 125, 50, .15)
}

.menu-modal-list li:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.menu-modal-list li::before {
    content: '✓';
    font-weight: 900;
    color: #2e7d32;
    font-size: .8rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: rgba(46, 125, 50, .08);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

@media(max-width:480px) {
    .menu-modal-box {
        padding: 12px;
        border-radius: 10px;
        max-height: 85vh
    }

    .menu-modal-paper {
        padding: 24px 16px 20px;
        max-height: calc(85vh - 70px)
    }

    .menu-modal-header h3 {
        font-size: 1.4rem
    }

    .menu-modal-list li {
        font-size: .85rem;
        padding: 10px 0
    }

    .menu-modal-close {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        top: -8px;
        right: -8px
    }
}

.kg3-stage {
    position: relative;
    width: 100%;
    min-height: 560px
}

.kg3-card {
    position: absolute;
    width: 22%;
    max-width: 230px;
    aspect-ratio: 4/5;
    background: #fff;
    padding: 10px 10px 26px;
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .1);
    cursor: pointer;
    opacity: 0;
    display: none;
    will-change: transform, opacity;
    transition: box-shadow .35s ease, transform .35s ease
}

.kg3-card:hover {
    box-shadow: 0 22px 44px rgba(0, 0, 0, .28), 0 4px 10px rgba(0, 0, 0, .14);
    z-index: 50 !important
}

.kg3-card img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    border-radius: 2px
}

.kg3-card:hover img {
    filter: brightness(1.03)
}

.kg3-card:hover {
    transform: rotate(0deg) scale(1.05) translateY(-6px) !important
}

@keyframes kg3In {
    0% {
        opacity: 0;
        transform: translate3d(160px, -160px, 0) rotate(22deg) scale(.55)
    }

    65% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(1)
    }
}

.kg3-card.kg3-in {
    animation: kg3In .75s cubic-bezier(.16, 1, .3, 1) both
}

@keyframes kg3OutBR {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(1)
    }

    70% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate3d(85vw, 78vh, 0) rotate(38deg) scale(.38)
    }
}

@keyframes kg3OutBL {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(1)
    }

    70% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate3d(-85vw, 78vh, 0) rotate(-38deg) scale(.38)
    }
}

@keyframes kg3OutTL {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(1)
    }

    70% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate3d(-85vw, -78vh, 0) rotate(-38deg) scale(.38)
    }
}

.kg3-card.kg3-out-br {
    animation: kg3OutBR 1.05s cubic-bezier(.55, .06, .68, .19) both;
    pointer-events: none;
    z-index: 60
}

.kg3-card.kg3-out-bl {
    animation: kg3OutBL 1.05s cubic-bezier(.55, .06, .68, .19) both;
    pointer-events: none;
    z-index: 60
}

.kg3-card.kg3-out-tl {
    animation: kg3OutTL 1.05s cubic-bezier(.55, .06, .68, .19) both;
    pointer-events: none;
    z-index: 60
}

#kg3Lightbox {
    transition: opacity .3s ease
}

#kg3LbImgWrap {
    transform: scale(.92);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1)
}

#kg3Lightbox.kg3-open #kg3LbImgWrap {
    transform: scale(1)
}

.kg3-slot-0 {
    left: 2%;
    top: 2%;
    --rot: -7deg
}

.kg3-slot-1 {
    left: 22%;
    top: 0%;
    --rot: 4deg
}

.kg3-slot-2 {
    left: 42%;
    top: 3%;
    --rot: -3deg
}

.kg3-slot-3 {
    left: 64%;
    top: 0%;
    --rot: 6deg
}

.kg3-slot-4 {
    left: 4%;
    top: 46%;
    --rot: 5deg
}

.kg3-slot-5 {
    left: 25%;
    top: 48%;
    --rot: -5deg
}

.kg3-slot-6 {
    left: 46%;
    top: 45%;
    --rot: 3deg
}

.kg3-slot-7 {
    left: 68%;
    top: 47%;
    --rot: -6deg
}

.kg3-card[class*="kg3-slot-"] {
    transform: rotate(var(--rot))
}

@media(max-width:768px) {
    .kg3-stage {
        width: 100%;
        max-width: 340px;
        height: 400px;
        min-height: 0;
        margin: 0 auto
    }

    .kg3-card {
        inset: 0 !important;
        left: auto !important;
        top: auto !important;
        margin: auto;
        width: 82vw;
        max-width: 300px;
        height: auto;
        aspect-ratio: 4/5
    }

    .kg3-card:hover {
        transform: rotate(0deg) scale(1.03) !important
    }
}

@media(max-width:420px) {
    .kg3-stage {
        height: 340px;
        max-width: 260px
    }

    .kg3-card {
        width: 86vw;
        max-width: 240px
    }
}

.contact-section {
    padding: 110px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    z-index: 1;
    clear: both
}

.contact-diagonal-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, var(--green-dark)0, var(--green)55%, var(--green-light)100%);
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
    transform: translateX(40px);
    opacity: 0;
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), clip-path .9s var(--ease-out)
}

.contact-section.diagonal-in .contact-diagonal-bg {
    opacity: 1;
    transform: translateX(0)
}

.contact-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start
}

.contact-info .section-eyebrow {
    margin-bottom: 8px
}

.contact-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    color: var(--green-dark);
    margin-bottom: 16px
}

.contact-info>p {
    color: var(--text-lt);
    line-height: 1.8;
    margin-bottom: 28px;
    font-size: .95rem;
    max-width: 420px
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px
}

.cd-item {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.cd-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    transition: transform .3s var(--spring)
}

.cd-item:hover .cd-icon {
    transform: scale(1.15) rotate(-10deg)
}

.cd-item>div {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.cd-item strong {
    font-size: .88rem;
    color: var(--green-dark)
}

.cd-item a,
.cd-item span {
    font-size: .88rem;
    color: var(--text-lt)
}

.cd-item a:hover {
    color: var(--green)
}

.contact-social {
    display: flex;
    gap: 10px
}

.contact-social a {
    width: 38px;
    height: 38px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .9rem;
    transition: background var(--transition), transform .3s var(--spring)
}

.contact-social a:hover {
    background: var(--accent);
    transform: translateY(-3px) rotate(8deg)
}

.contact-form-wrap {
    display: flex;
    justify-content: flex-end
}

.contact-form {
    background: #fff;
    border-radius: 22px;
    padding: 40px 38px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .22)
}

.cf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.contact-form h3 {
    font-size: 1.3rem;
    font-family: 'Playfair Display', serif;
    color: var(--green-dark);
    margin-bottom: 22px
}

.form-group {
    margin-bottom: 16px
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: .92rem;
    color: var(--text);
    background: var(--off-white);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition)
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--green);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(46, 125, 50, .12)
}

.form-group textarea {
    resize: vertical
}

@media(max-width:900px) {
    .contact-section {
        padding: 70px 0
    }

    .contact-diagonal-bg {
        clip-path: polygon(0 0, 100% 0, 100% 38%, 0 62%);
        transform: translateY(-30px)
    }

    .contact-section.diagonal-in .contact-diagonal-bg {
        transform: translateY(0)
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .contact-form-wrap {
        justify-content: stretch
    }

    .contact-form {
        max-width: 100%;
        padding: 30px 26px
    }
}

@media(prefers-reduced-motion:reduce) {
    .contact-diagonal-bg {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }
}

.jf-certificate-section {
    padding: 80px 0;
    background: #fafafa
}

.jf-cert-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px
}

.jf-cert-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px
}

.jf-cert-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ff9604;
    padding: 3px 10px;
    margin-bottom: 10px;
    font-family: Arial, sans-serif
}

.jf-cert-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #063e37;
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: -.02em
}

.jf-cert-subtitle {
    font-size: 1rem;
    color: #6b6b6b;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 24px;
    font-family: Arial, sans-serif
}

.jf-cert-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #ff6b35, #f59e0b);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    border-radius: 50px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    box-shadow: 0 8px 24px rgba(255, 107, 53, .3);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease
}

.jf-cert-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 34px rgba(255, 107, 53, .4)
}

.jf-cert-cta i {
    transition: transform .3s ease
}

.jf-cert-cta:hover i {
    transform: scale(1.1) rotate(-8deg)
}

.jf-cert-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center
}

.jf-cert-text p {
    color: #555;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 24px;
    font-family: Arial, sans-serif
}

.jf-cert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.jf-cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #0a7c6e;
    color: #0a7c6e;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    transition: all .3s ease
}

.jf-cert-badge i {
    color: #f59e0b;
    font-size: 1rem
}

.jf-cert-badge:hover {
    background: #0a7c6e;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(10, 124, 110, .2)
}

.jf-cert-badge:hover i {
    color: #fff
}

.jf-cert-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .1);
    border: 1px solid #e7e2da;
    transition: transform .4s ease, box-shadow .4s ease
}

.jf-cert-image:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .15)
}

.jf-cert-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    aspect-ratio: 5/4
}

.jf-cert-image-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #ff6b35, #f59e0b);
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(255, 107, 53, .3)
}

.jf-cert-image-badge i {
    font-size: 1rem
}

@media(max-width:992px) {
    .jf-cert-content {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .jf-cert-image {
        max-width: 500px;
        margin: 0 auto
    }

    .jf-cert-badges {
        justify-content: center
    }

    .jf-cert-text p {
        text-align: center
    }
}

@media(max-width:768px) {
    .jf-certificate-section {
        padding: 60px 0
    }

    .jf-cert-header {
        margin-bottom: 40px
    }

    .jf-cert-title {
        font-size: 1.8rem
    }

    .jf-cert-subtitle {
        font-size: .92rem
    }

    .jf-cert-badges {
        flex-direction: column;
        align-items: center
    }

    .jf-cert-badge {
        width: 100%;
        max-width: 280px;
        justify-content: center
    }

    .jf-cert-image-badge {
        top: 12px;
        right: 12px;
        padding: 6px 14px;
        font-size: .7rem
    }

    .jf-cert-cta {
        padding: 10px 24px;
        font-size: .85rem
    }
}

@media(max-width:480px) {
    .jf-certificate-section {
        padding: 40px 0
    }

    .jf-cert-title {
        font-size: 1.5rem
    }

    .jf-cert-eyebrow {
        font-size: 10px;
        padding: 4px 14px
    }

    .jf-cert-content {
        gap: 30px
    }

    .jf-cert-text p {
        font-size: .9rem
    }

    .jf-cert-image {
        border-radius: 14px
    }

    .jf-cert-image-badge {
        top: 10px;
        right: 10px;
        padding: 5px 12px;
        font-size: .65rem
    }

    .jf-cert-badge {
        font-size: .78rem;
        padding: 8px 14px;
        max-width: 100%
    }
}

.joygaon-footer {
    width: 100%;
    background: #f8faf6
}

.joygaon-footer__card {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    background: var(--green);
    box-shadow: 0 20px 50px -12px rgba(60, 100, 30, .25);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    padding: 140px 56px 44px;
    transition: padding .3s ease
}

.joygaon-footer__notch {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 120px;
    z-index: 1;
    pointer-events: none;
    display: block
}

.joygaon-footer__notch path {
    fill: #fffaf3
}

.joygaon-footer__logo-badge {
    position: absolute;
    top: -85px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: 2;
    padding: 10px;
    background: transparent;
    transition: width .3s ease, height .3s ease, top .3s ease
}

.joygaon-footer__logo-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 28px rgba(60, 100, 30, .2)
}

.joygaon-footer__logo-inner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.joygaon-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px
}

.joygaon-footer__col h4 {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
    letter-spacing: .02em;
    position: relative
}

.joygaon-footer__col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 32px;
    height: 3px;
    background: rgba(20, 140, 65, .92);
    border-radius: 4px
}

.joygaon-footer__tag {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3em;
    color: #fff;
    margin: 2px 0 18px;
    opacity: .8
}

.joygaon-footer__col--about p {
    font-size: 14.5px;
    line-height: 1.8;
    color: #fff;
    max-width: 400px;
    font-weight: 450
}

.joygaon-footer__link-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.joygaon-footer__link-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .25s ease, transform .25s ease
}

.joygaon-footer__link-list li a:hover {
    color: #fff;
    transform: translateX(4px)
}

.joygaon-footer__link-list li a::before {
    content: "◆";
    font-size: 8px;
    color: #fff;
    flex: none;
    opacity: .7
}

.joygaon-footer__scroll-wrap {
    position: relative;
    display: flex
}

.joygaon-footer__scroll-wrap .joygaon-footer__link-list {
    max-height: 190px;
    overflow-y: auto;
    padding-right: 14px;
    flex: 1
}

.joygaon-footer__scroll-wrap .joygaon-footer__link-list::-webkit-scrollbar {
    width: 4px
}

.joygaon-footer__scroll-wrap .joygaon-footer__link-list::-webkit-scrollbar-track {
    background: rgba(45, 90, 30, .12);
    border-radius: 4px
}

.joygaon-footer__scroll-wrap .joygaon-footer__link-list::-webkit-scrollbar-thumb {
    background: #2d5a1e;
    border-radius: 4px
}

.joygaon-footer__scroll-wrap .joygaon-footer__link-list {
    scrollbar-width: thin;
    scrollbar-color: #2d5a1e rgba(45, 90, 30, .12)
}

.joygaon-footer__contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px
}

.joygaon-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #fff;
    font-weight: 500
}

.joygaon-footer__contact-list a {
    color: #fff;
    text-decoration: none;
    font-weight: 500
}

.joygaon-footer__contact-list a:hover {
    color: #fff
}

.joygaon-footer__contact-list strong {
    color: #fff
}

.joygaon-footer__contact-icon {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(200, 110, 20, .15);
    transition: background .25s ease
}

.joygaon-footer__contact-icon svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8
}

.joygaon-footer__contact-list li:hover .joygaon-footer__contact-icon {
    background: rgba(255, 255, 255, .8)
}

.joygaon-footer__social-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.joygaon-footer__social-row a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .4);
    border: 1px solid rgba(200, 110, 20, .15);
    transition: all .3s ease;
    text-decoration: none
}

.joygaon-footer__social-row a svg {
    width: 17px;
    height: 17px;
    fill: #fff
}

.joygaon-footer__social-row a[aria-label="X"] svg path {
    stroke: #fff;
    fill: none
}

.joygaon-footer__social-row a:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(200, 110, 20, .15)
}

.joygaon-footer__social-row a:hover svg {
    fill: #F0AD70
}

.joygaon-footer__social-row a[aria-label="X"]:hover svg path {
    stroke: #F0AD70
}

.joygaon-footer__bottom {
    margin-top: 50px;
    padding-top: 22px;
    border-top: 1px solid rgba(200, 110, 20, .15);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #fff;
    font-weight: 500
}

.joygaon-footer__bottom a {
    color: #fff;
    text-decoration: none;
    font-weight: 500
}

.joygaon-footer__bottom a:hover {
    color: #E89951
}

@media(max-width:1024px) {
    .joygaon-footer__grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 44px;
        column-gap: 32px
    }

    .joygaon-footer__card {
        padding: 130px 40px 40px
    }
}

@media(max-width:768px) {
    .joygaon-footer {
        padding: 120px 4vw 40px
    }

    .joygaon-footer__card {
        padding: 120px 28px 32px;
        border-radius: 24px
    }

    .joygaon-footer__grid {
        gap: 36px 24px
    }

    .joygaon-footer__logo-badge {
        width: 160px;
        height: 160px;
        top: -72px
    }

    .joygaon-footer__notch {
        width: 300px;
        height: 105px
    }

    .joygaon-footer__col--about p {
        max-width: 100%
    }
}

@media(max-width:540px) {
    .joygaon-footer {
        padding: 100px 3vw 30px
    }

    .joygaon-footer__card {
        padding: 100px 18px 28px;
        border-radius: 20px
    }

    .joygaon-footer__grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .joygaon-footer__logo-badge {
        width: 130px;
        height: 130px;
        top: -60px;
        padding: 8px
    }

    .joygaon-footer__notch {
        width: 240px;
        height: 90px
    }

    .joygaon-footer__col h4 {
        font-size: 16px;
        margin-bottom: 18px
    }

    .joygaon-footer__col h4::after {
        width: 24px;
        bottom: -6px
    }

    .joygaon-footer__contact-list li {
        font-size: 13px
    }

    .joygaon-footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        margin-top: 36px;
        padding-top: 18px
    }

    .joygaon-footer__social-row {
        justify-content: center
    }

    .joygaon-footer__col--about p {
        font-size: 13.5px
    }

    .joygaon-footer__link-list li a {
        font-size: 13px
    }
}

@media(max-width:380px) {
    .joygaon-footer__card {
        padding: 90px 14px 24px
    }

    .joygaon-footer__logo-badge {
        width: 110px;
        height: 110px;
        top: -50px;
        padding: 6px
    }

    .joygaon-footer__notch {
        width: 200px;
        height: 75px
    }
}

.wa-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 54px;
    height: 54px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    z-index: 999;
    box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
    transition: background var(--transition), transform .3s var(--spring);
    animation: floatPulse 2.6s ease-in-out infinite
}

.wa-float:hover {
    background: #1ebe5d;
    transform: scale(1.15) rotate(8deg)
}

@keyframes floatPulse {

    0%,
    100% {
        box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
        transform: scale(1)
    }

    50% {
        box-shadow: 0 6px 30px rgba(37, 211, 102, .65);
        transform: scale(1.06)
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--reveal-delay, 0)*.09s)
}

[data-reveal].in-view {
    opacity: 1;
    transform: translateY(0)
}

[data-stagger-item] {
    opacity: 0;
    transform: translateY(46px) scale(.92) rotateX(12deg);
    transition: opacity .65s var(--ease-out), transform .65s var(--spring)
}

[data-stagger-item].in-view {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0)
}

[data-magnetic] {
    display: inline-block;
    will-change: transform;
    transition: transform .25s var(--spring), box-shadow .25s ease
}

@media(max-width:900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .hiw-grid {
        grid-template-columns: 1fr
    }
}

.jgq-scope,
.jgq-scope * {
    box-sizing: border-box
}

.jgq-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    width: 100%;
    transform: translateY(-120%);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08)
}

.jgq-sticky.jgq-visible {
    transform: translateY(0)
}

.jgq-sticky-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px
}

@media(min-width:640px) {
    .jgq-sticky-inner {
        padding: 12px 24px;
        gap: 20px
    }
}

.jgq-logo-img {
    height: 36px;
    width: auto;
    display: block
}

@media(min-width:768px) {
    .jgq-logo-img {
        height: 52px
    }
}

.jgq-float {
    position: relative;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: 16px 12px 0
}

@media(min-width:640px) {
    .jgq-float {
        padding: 22px 20px 0
    }
}

.jgq-float-inner {
    width: 100%;
    max-width: 820px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(90, 94, 88, .42), rgba(60, 64, 58, .34));
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 40px;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22)
}

.jgq-links {
    display: none;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
    flex: 1;
    justify-content: center;
    list-style: none
}

@media(min-width:1024px) {
    .jgq-links {
        display: flex
    }
}

.jgq-links>li {
    position: relative
}

.jgq-links>li>a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s
}

.jgq-sticky .jgq-links>li>a {
    color: #1a1a1a
}

.jgq-sticky .jgq-links>li>a:hover,
.jgq-sticky .jgq-links>li>a.jgq-active {
    background: rgba(0, 0, 0, .06);
    color: #E89951
}

.jgq-float .jgq-links>li>a {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .25)
}

.jgq-float .jgq-links>li>a:hover,
.jgq-float .jgq-links>li>a.jgq-active {
    background: rgba(255, 255, 255, .14)
}

.jgq-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: #fff;
    border-radius: 14px;
    border-top: 3px solid #E89951;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .16);
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .3s;
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
    list-style: none
}

.jgq-has-drop:hover .jgq-dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0)
}

.jgq-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #23291d;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap
}

.jgq-dropdown a:hover {
    background: rgba(142, 202, 60, .12);
    color: #35521F
}

.jgq-cta {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform .3s
}

@media(min-width:640px) {
    .jgq-cta {
        display: inline-flex
    }
}

.jgq-sticky .jgq-cta {
    background: linear-gradient(135deg, #E89951, #F0AD70);
    color: #fff
}

.jgq-float .jgq-cta {
    background: rgba(255, 255, 255, .92);
    color: #23291d
}

.jgq-cta:hover {
    transform: translateY(-2px)
}

.jgq-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .04);
    cursor: pointer;
    padding: 0 9px;
    flex-shrink: 0;
    margin-left: auto
}

@media(min-width:1024px) {
    .jgq-burger {
        display: none
    }
}

.jgq-float .jgq-burger {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .16)
}

.jgq-sticky .jgq-burger {
    border-color: rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .04)
}

.jgq-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    transition: transform .3s, opacity .3s
}

.jgq-sticky .jgq-burger span {
    background: #1a1a1a
}

.jgq-float .jgq-burger span {
    background: #fff
}

.jgq-burger.jgq-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.jgq-burger.jgq-active span:nth-child(2) {
    opacity: 0
}

.jgq-burger.jgq-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

.jgq-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

.jgq-overlay.jgq-open {
    opacity: 1;
    pointer-events: all
}

.jgq-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 85vw;
    max-width: 340px;
    height: 100%;
    height: 100dvh;
    background: #fff;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .15)
}

@media(min-width:480px) {
    .jgq-sidebar {
        width: 340px
    }
}

@media(min-width:768px) {
    .jgq-sidebar {
        width: 380px;
        max-width: 380px
    }
}

.jgq-sidebar.jgq-open {
    transform: translateX(0)
}

.jgq-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0
}

.jgq-sidebar-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f5f5f5;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333
}

.jgq-sidebar-close:hover {
    background: #e8e8e8
}

.jgq-sidebar-links {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 8px 20px 20px;
    margin: 0
}

.jgq-sidebar-links li {
    border-bottom: 1px solid #f0f0f0
}

.jgq-sidebar-links li a {
    display: block;
    padding: 13px 4px;
    color: #23291d;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none
}

.jgq-sidebar-links li a:hover {
    color: #E89951
}

.jgq-sidebar-label {
    padding: 12px 4px 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #44A194;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: none !important
}

.jgq-sidebar-sub a {
    padding-left: 16px;
    font-size: 13px;
    color: #555
}

.jgq-sidebar-cta {
    display: block;
    text-align: center;
    margin: 12px 20px 20px;
    padding: 13px;
    background: linear-gradient(135deg, #E89951, #F0AD70);
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0
}

.jgxE-trigger-wrap {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none
}

.jgxE-trigger-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(48%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #2f4d1c, #5a8a34);
    color: #fff;
    border: none;
    padding: 16px 26px 16px 22px;
    border-radius: 50px 0 0 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 16px 38px rgba(20, 40, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: opacity .4s ease, visibility .4s, transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, background .3s ease
}

.jgxE-trigger-btn.jgxE-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(-50%) translateX(32%);
    animation: jgxEPulse 2.2s ease-in-out 1
}

.jgxE-trigger-btn:hover {
    transform: translateY(-50%) translateX(4%);
    background: linear-gradient(135deg, #3d6224, #6FA82E);
    box-shadow: 0 20px 46px rgba(20, 40, 10, .45), inset 0 1px 0 rgba(255, 255, 255, .22)
}

.jgxE-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    font-size: 13px;
    flex-shrink: 0
}

.jgxE-trigger-arrow {
    font-size: 11px;
    transition: transform .35s ease;
    flex-shrink: 0
}

.jgxE-trigger-btn.jgxE-active .jgxE-trigger-arrow {
    transform: rotate(180deg)
}

@keyframes jgxEPulse {

    0%,
    100% {
        box-shadow: 0 16px 38px rgba(20, 40, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .16)
    }

    50% {
        box-shadow: 0 16px 38px rgba(20, 40, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 10px rgba(142, 202, 60, .2)
    }
}

@media(max-width:900px) {
    .jgxE-trigger-btn {
        padding: 13px 20px 13px 18px;
        font-size: 12.5px;
        gap: 9px
    }

    .jgxE-trigger-btn.jgxE-visible {
        transform: translateY(-50%) translateX(26%)
    }

    .jgxE-trigger-icon {
        width: 26px;
        height: 26px;
        font-size: 11px
    }
}

@media(max-width:560px) {
    .jgxE-trigger-text {
        display: none
    }

    .jgxE-trigger-btn {
        padding: 12px 16px;
        border-radius: 50%
    }

    .jgxE-trigger-btn.jgxE-visible {
        transform: translateY(-50%) translateX(18%)
    }

    .jgxE-trigger-arrow {
        display: none
    }
}

.jgxE-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 24, 14, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease
}

.jgxE-overlay.jgxE-show {
    opacity: 1;
    pointer-events: all
}

.jgxE-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 92vw;
    max-width: 1500px;
    height: 100vh;
    z-index: 99999;
    background-color: #fff;
    background-image: repeating-linear-gradient(90deg, rgba(53, 82, 31, .05)0, rgba(53, 82, 31, .05)1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(53, 82, 31, .03)0, rgba(53, 82, 31, .03)2px, transparent 2px, transparent 7px);
    box-shadow: -30px 0 90px rgba(0, 0, 0, .24);
    transform: translateX(100%);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden
}

.jgxE-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .03;
    mix-blend-mode: multiply;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
    z-index: 0
}

.jgxE-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 12% 15%, rgba(142, 202, 60, .1), transparent 45%), radial-gradient(circle at 88% 85%, rgba(232, 153, 81, .1), transparent 45%)
}

.jgxE-panel.jgxE-open {
    transform: translateX(0)
}

.jgxE-panel-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 28px;
    pointer-events: none
}

.jgxE-panel-badge {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #35521F;
    background: rgba(142, 202, 60, .14);
    border: 1px solid rgba(142, 202, 60, .32);
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 50px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.jgxE-close-btn {
    pointer-events: auto;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 40%;
    position: relative;
    z-index: 201;
    align-items: center;
    gap: 8px;
    border: none;
    background: linear-gradient(135deg, #35521F, #5a8a34) !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .2px;
    padding: 12px 22px 12px 16px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, box-shadow .3s ease
}

.jgxE-close-icon {
    font-size: 15px;
    transition: transform .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff
}

.jgxE-close-btn:hover {
    background: linear-gradient(135deg, #E89951, #F0AD70) !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 16px 36px rgba(232, 153, 81, .5)
}

.jgxE-close-btn:hover .jgxE-close-icon {
    background: rgba(255, 255, 255, .3);
    transform: rotate(90deg)
}

.jgxE-close-btn:active {
    transform: scale(.96)
}

@media(max-width:560px) {
    .jgxE-panel-topbar {
        padding: 16px 18px
    }

    .jgxE-panel-badge span {
        display: none
    }

    .jgxE-close-text {
        display: none
    }

    .jgxE-close-btn {
        padding: 10px;
        border-radius: 50%
    }

    .jgxE-close-icon {
        width: 22px;
        height: 22px
    }
}

.jgxE-trail-area {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: crosshair
}

.jgxE-trail-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 190px;
    border-radius: 10px;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 20px 44px rgba(28, 42, 32, .2), 0 2px 8px rgba(28, 42, 32, .1);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4) rotate(0deg);
    transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
    will-change: transform, opacity
}

.jgxE-trail-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.jgxE-trail-img.jgxE-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--jgxe-rot, 0deg))
}

.jgxE-trail-img.jgxE-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7) rotate(var(--jgxe-rot, 0deg)) translateY(-18px)
}

@media(max-width:700px) {
    .jgxE-trail-img {
        width: 100px;
        height: 128px;
        border-width: 4px
    }
}

.jgxE-center {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 90px 40px 40px;
    pointer-events: none
}

.jgxE-center-eyebrow {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #35521F;
    background: rgba(142, 202, 60, .12);
    border: 1px solid rgba(142, 202, 60, .3);
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 22px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.jgxE-center-title {
    pointer-events: auto;
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.8rem, 9vw, 7.4rem);
    letter-spacing: 1px;
    color: #1c2a20;
    line-height: 1;
    margin-bottom: 18px;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .6)
}

.jgxE-center-rule {
    pointer-events: auto;
    width: 70px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8ECA3C, #E89951);
    margin-bottom: 22px
}

.jgxE-center-text {
    pointer-events: auto;
    max-width: 560px;
    color: #4a5940;
    font-family: 'Poppins', sans-serif;
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 32px
}

.jgxE-center-cta {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #E89951, #F0AD70);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    padding: 15px 34px;
    border-radius: 50px;
    box-shadow: 0 14px 32px rgba(232, 153, 81, .35);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s
}

.jgxE-center-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(232, 153, 81, .45)
}

@media(max-width:700px) {
    .jgxE-panel {
        width: 96vw
    }

    .jgxE-center {
        padding: 80px 24px 30px
    }

    .jgxE-center-text {
        font-size: .92rem
    }
}

body.jgxE-lock {
    overflow: hidden
}

.jgxE-panel .jgxE-panel-topbar {
    z-index: 200 !important
}

/* ===== Falling Leaves ===== */
.jgx-leaves-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* bg-image ke upar, content ke niche rakhna ho to z-index adjust karo */
    overflow: hidden;
    pointer-events: none;
}

.jgx-leaf {
    position: absolute;
    top: -60px;
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: jgxLeafFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* apni 3 alag leaf PNG yaha lagao (transparent bg wali) */
.jgx-leaf--1 {
    background-image: url('/images/bg/leaf-im-Photoroom.png');
    width: 30px;
    height: 30px;
}

.jgx-leaf--2 {
    background-image: url('/images/bg/leaf-2.png');
    width: 38px;
    height: 38px;
}

.jgx-leaf--3 {
    background-image: url('/images/bg/leaf-3.png');
    width: 26px;
    height: 26px;
}

/* fall + sway + rotate — real hawa me girte patte jaisa feel */
@keyframes jgxLeafFall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }

    5% {
        opacity: .9;
    }

    25% {
        transform: translate(30px, 25vh) rotate(90deg);
    }

    50% {
        transform: translate(-25px, 50vh) rotate(180deg);
    }

    75% {
        transform: translate(35px, 75vh) rotate(270deg);
    }

    95% {
        opacity: .85;
    }

    100% {
        transform: translate(-15px, 105vh) rotate(360deg);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .jgx-leaf {
        display: none;
    }
}

@media(max-width:768px) {
    .jgx-leaf {
        transform: scale(.8);
    }
}

.jgx-gallery-bg {
    position: relative;
    background-color: #fff;
    background-image: repeating-linear-gradient(90deg, rgba(53, 82, 31, .05)0, rgba(53, 82, 31, .05)1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(53, 82, 31, .03)0, rgba(53, 82, 31, .03)2px, transparent 2px, transparent 7px)
}

.jgx-gallery-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .03;
    mix-blend-mode: multiply;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
    z-index: 0
}

.jgx-gallery-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 10% 10%, rgba(142, 202, 60, .08), transparent 45%), radial-gradient(circle at 90% 90%, rgba(232, 153, 81, .08), transparent 45%)
}

.jgx-gallery-bg>.max-w-\[1280px\] {
    position: relative;
    z-index: 1
}

.jgx-gallery-bg {
    position: relative;
    /* already hai, bas confirm kar lena */
}

.jgx-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin-top: 175px;
    background-image: url('/images/bg/leafbg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
    /* image ki visibility control karega, chaho to 1 kar do */
}

.jgAbt-page {
    background: #FAF8F3;
    font-family: 'Inter', sans-serif
}

.jgAbt-page * {
    box-sizing: border-box
}

.jgAbt-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px
}

.jgAbt-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 15% 20%, rgba(142, 202, 60, .16), transparent 55%), radial-gradient(circle at 85% 80%, rgba(232, 153, 81, .14), transparent 55%), linear-gradient(160deg, #1c2a15 0, #223318 55%, #17240f 100%);
    padding: 130px 24px 110px;
    -webkit-clip-path: url(#jgAbtWaveClip);
    clip-path: url(#jgAbtWaveClip)
}

.jgAbt-hero-noise {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .05;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px
}

.jgAbt-hero-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0
}

.jgAbt-hero-glow--a {
    width: 340px;
    height: 340px;
    top: -120px;
    left: -80px;
    background: rgba(142, 202, 60, .28);
    animation: jgAbtFloatA 9s ease-in-out infinite
}

.jgAbt-hero-glow--b {
    width: 300px;
    height: 300px;
    bottom: -140px;
    right: -60px;
    background: rgba(232, 153, 81, .24);
    animation: jgAbtFloatB 11s ease-in-out infinite
}

@keyframes jgAbtFloatA {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(30px, 20px) scale(1.08)
    }
}

@keyframes jgAbtFloatB {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(-24px, -18px) scale(1.06)
    }
}

.jgAbt-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    text-align: center
}

.jgAbt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B5E18B;
    background: rgba(181, 225, 139, .14);
    border: 1px solid rgba(181, 225, 139, .28);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 22px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.jgAbt-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
    margin-bottom: 18px
}

.jgAbt-title-script {
    font-style: italic;
    color: #B5E18B
}

.jgAbt-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
    max-width: 54ch;
    margin: 0 auto 40px
}

.jgAbt-hero-doodles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none
}

.jgAbt-hdoodle {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .16);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25))
}

.jgAbt-hdoodle--wheel {
    top: 14%;
    left: 6%;
    font-size: 54px;
    color: rgba(181, 225, 139, .22);
    animation: jgAbtSpinSlow 18s linear infinite
}

.jgAbt-hdoodle--kite {
    top: 22%;
    right: 10%;
    font-size: 34px;
    animation: jgAbtBob 6s ease-in-out infinite
}

.jgAbt-hdoodle--icecream {
    bottom: 16%;
    left: 12%;
    font-size: 30px;
    color: rgba(244, 185, 66, .24);
    animation: jgAbtBob 7s ease-in-out infinite .6s
}

.jgAbt-hdoodle--balloon {
    bottom: 22%;
    right: 8%;
    font-size: 16px;
    color: rgba(232, 153, 81, .3);
    animation: jgAbtBob 5s ease-in-out infinite .3s
}

@keyframes jgAbtSpinSlow {
    to {
        transform: rotate(360deg)
    }
}

@keyframes jgAbtBob {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-14px) rotate(6deg)
    }
}

@media(max-width:768px) {
    .jgAbt-hdoodle {
        opacity: .6
    }

    .jgAbt-hdoodle--wheel {
        font-size: 38px
    }
}

.jgAbt-crumb-wrap {
    display: flex;
    justify-content: center
}

.jgAbt-crumb {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .28))
}

.jgAbt-crumb-step {
    position: relative
}

.jgAbt-crumb-step a,
.jgAbt-crumb-step>span {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 34px 0 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .25s ease, transform .25s ease
}

.jgAbt-crumb-step--done {
    -webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 16px 50%);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 16px 50%);
    background: linear-gradient(135deg, #3D7A1F, #5FA032)
}

.jgAbt-crumb-step--done:first-child {
    -webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
    border-radius: 50px 0 0 50px
}

.jgAbt-crumb-step--current {
    margin-left: -18px;
    -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 16px 50%);
    clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 16px 50%);
    background: linear-gradient(135deg, #E87F24, #F4B942);
    border-radius: 0 50px 50px 0
}

.jgAbt-crumb-step--current>span {
    padding-left: 40px;
    padding-right: 30px
}

.jgAbt-crumb-step a:hover {
    filter: brightness(1.1);
    transform: translateY(-1px)
}

.jgAbt-crumb-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 11px;
    flex-shrink: 0
}

.jgAbt-crumb-step--current .jgAbt-crumb-dot {
    background: rgba(255, 255, 255, .3)
}

@media(max-width:480px) {

    .jgAbt-crumb-step a,
    .jgAbt-crumb-step>span {
        height: 44px;
        padding: 0 22px 0 20px;
        font-size: 12px
    }

    .jgAbt-crumb-step--current>span {
        padding-left: 30px;
        padding-right: 20px
    }

    .jgAbt-crumb-label {
        display: none
    }

    .jgAbt-crumb-dot {
        width: 20px;
        height: 20px
    }
}

.jgAbt-eyebrow-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C97A0F;
    background: rgba(232, 153, 81, .1);
    border: 1px solid rgba(232, 153, 81, .22);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 14px
}

.jgAbt-eyebrow-inline--alt {
    color: #3D7A1F;
    background: rgba(142, 202, 60, .12);
    border-color: rgba(142, 202, 60, .26)
}

.jgAbt-h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    color: #1F2E15;
    line-height: 1.2
}

.jgAbt-h2--dark {
    color: #1F2E15
}

.jgAbt-h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: #1F2E15;
    margin-bottom: 14px
}

.jgAbt-h3--accent {
    color: #C97A0F;
    font-style: italic
}

.jgAbt-lede {
    max-width: 78ch;
    color: #4A5940;
    font-size: 15px;
    line-height: 1.8;
    margin-top: 12px
}

.jgAbt-rule {
    display: block;
    width: 64px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #8ECA3C, #E89951)
}

.jgAbt-p {
    font-size: 14.5px;
    line-height: 1.85;
    color: #4A5940;
    margin-bottom: 16px;
    text-align: justify
}

.jgAbt-p--accent {
    color: #C97A0F
}

.jgAbt-p--emphasis {
    font-weight: 600;
    color: #1F2E15
}

.jgAbt-media-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 26px 60px -18px rgba(31, 46, 21, .35);
    aspect-ratio: 5/4
}

.jgAbt-media-frame--wide {
    aspect-ratio: 16/10
}

.jgAbt-media-frame img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1)
}

.jgAbt-words-media:hover .jgAbt-media-frame img,
.jgAbt-learn-media:hover .jgAbt-media-frame img {
    transform: scale(1.05)
}

.jgAbt-media-badge {
    position: absolute;
    left: 20px;
    bottom: -20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #1F2E15;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: 0 16px 34px -12px rgba(31, 46, 21, .35)
}

.jgAbt-media-badge i {
    color: #E87F24;
    font-size: 15px
}

.jgAbt-media-stamp {
    position: absolute;
    top: -16px;
    right: -12px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F4B942, #E87F24);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px -8px rgba(232, 127, 36, .6);
    border: 3px solid #fff;
    transform: rotate(8deg);
    animation: jgAbtStampPulse 3.4s ease-in-out infinite
}

.jgAbt-media-stamp span {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1
}

.jgAbt-media-stamp small {
    font-family: 'Poppins', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em
}

@keyframes jgAbtStampPulse {

    0%,
    100% {
        transform: rotate(8deg) scale(1)
    }

    50% {
        transform: rotate(8deg) scale(1.08)
    }
}

@media(max-width:480px) {
    .jgAbt-media-stamp {
        width: 62px;
        height: 62px;
        top: -10px;
        right: -8px
    }

    .jgAbt-media-stamp span {
        font-size: 14px
    }
}

.jgAbt-offer {
    margin-top: 60px;
    padding-top: 50px;
    border-top: 1.5px dashed rgba(31, 46, 21, .12)
}

.jgAbt-offer-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #F4B942, #E87F24);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 8px 18px -6px rgba(232, 127, 36, .55)
}

.jgAbt-offer-item {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
}

.jgAbt-offer-item:hover {
    transform: translateX(6px)
}

.jgAbt-offer-note {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4A5940;
    font-size: 13.5px;
    line-height: 1.7
}

.jgAbt-offer-note i {
    color: #3D7A1F;
    font-size: 16px
}

.jgAbt-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #E89951, #F0AD70);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 28px;
    max-width: 230px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 14px 32px -10px rgba(232, 153, 81, .55);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
    margin-top: 8px
}

.jgAbt-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -10px rgba(232, 153, 81, .6)
}

.jg-pinstripe-bg {
    background-color: #fff;
    background-image: repeating-linear-gradient(90deg, rgba(20, 20, 20, .035)0, rgba(20, 20, 20, .035)1px, transparent 1px, transparent 5px)
}

.jgAbt-stats {
    position: relative;
    overflow: hidden;
    padding: 100px 24px
}

.jgAbt-stats-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden
}

.jgAbt-stats-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.jgAbt-stats-overlay {
    position: absolute;
    inset: 0;
    /* margin: 3%;
    margin-bottom: 7%; */
    background: rgba(232, 236, 233, .719)
}

.jgAbt-stats-noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .07;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px
}

.jgAbt-stats-content {
    position: relative;
    z-index: 2
}

.jgAbt-stats-doodles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none
}

.jgAbt-doodle {
    position: absolute;
    display: inline-flex;
    color: rgba(255, 255, 255, .14)
}

.jgAbt-doodle--wheel {
    top: 8%;
    right: 8%;
    font-size: 90px;
    color: rgba(181, 225, 139, .14);
    animation: jgAbtSpinSlow 24s linear infinite
}

.jgAbt-doodle--balloon {
    top: 20%;
    left: 8%;
    font-size: 14px;
    color: rgba(244, 185, 66, .35);
    animation: jgAbtBob 5s ease-in-out infinite
}

.jgAbt-doodle--ticket {
    bottom: 14%;
    left: 14%;
    font-size: 30px;
    color: rgba(232, 153, 81, .25);
    animation: jgAbtBob 6.5s ease-in-out infinite .4s;
    transform: rotate(-14deg)
}

.jgAbt-doodle--star {
    bottom: 22%;
    right: 14%;
    font-size: 22px;
    color: rgba(255, 255, 255, .22);
    animation: jgAbtBob 4.5s ease-in-out infinite .2s
}

.jgAbt-eyebrow--stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(244, 185, 66, .12);
    border: 1px solid rgba(244, 185, 66, .28);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 18px
}

.jgAbt-h2--light {
    color: green
}

.jgAbt-rule--light {
    background: linear-gradient(90deg, #F4B942, #8ECA3C)
}

.jgAbt-stat-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 34px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease, background .3s ease
}

.jgAbt-stats-cta {
    display: flex;
    justify-content: center;
    margin-top: 52px
}

.jgAbt-cta--light {
    background: linear-gradient(135deg, #8ECA3C, #5FA032);
    box-shadow: 0 14px 32px -10px rgba(142, 202, 60, .5)
}

.jgAbt-cta--light:hover {
    box-shadow: 0 20px 44px -10px rgba(142, 202, 60, .6)
}

@media(max-width:768px) {
    .jgAbt-stats {
        padding: 70px 20px
    }

    .jgAbt-doodle--wheel {
        font-size: 60px
    }
}

.jgAbt-stat-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .4)
}

.jgAbt-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .28)
}

.jgAbt-stat-card--rose .jgAbt-stat-icon {
    background: linear-gradient(135deg, #f43f5e, #fb7185)
}

.jgAbt-stat-card--green .jgAbt-stat-icon {
    background: linear-gradient(135deg, #3D7A1F, #5FA032)
}

.jgAbt-stat-card--amber .jgAbt-stat-icon {
    background: linear-gradient(135deg, #C97A0F, #E87F24)
}

.jgAbt-stat-card--blue .jgAbt-stat-icon {
    background: linear-gradient(135deg, #2563eb, #3b82f6)
}

.jgAbt-stat-number {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    color: #fff;
    line-height: 1;
    margin-bottom: 6px
}

.jgAbt-stat-label {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .7);
    text-transform: uppercase
}

[data-jgabt-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--jgabt-delay, 0)*.12s)
}

[data-jgabt-reveal].jgAbt-in-view {
    opacity: 1;
    transform: translateY(0)
}

[data-jgabt-stagger]>* {
    opacity: 0;
    transform: translateY(28px) scale(.96);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.34, 1.56, .64, 1)
}

[data-jgabt-stagger].jgAbt-in-view>* {
    opacity: 1;
    transform: translateY(0) scale(1)
}

@media(prefers-reduced-motion:reduce) {

    [data-jgabt-reveal],
    [data-jgabt-stagger]>*,
    .jgAbt-hero-glow--a,
    .jgAbt-hero-glow--b {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important
    }
}

/* Wavy hero edge — desktop only */
@media(max-width:1024px) {
    .jgAbt-hero {
        -webkit-clip-path: none;
        clip-path: none
    }
}

@media(max-width:768px) {
    .jgAbt-hero {
        padding: 80px 20px 50px
    }
}

@keyframes joygaonPulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

.jg-arch-card {
    border-radius: 30%;
    padding: 40px 28px 34px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    overflow: visible !important;
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.jg-arch-icon-wrap {
    position: relative;
    width: 130px;
    height: 150px;
    margin: 10px auto 4px;
    overflow: visible !important
}

.jg-arch-icon-img {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 25px)) scale(1.1);
    width: 180%;
    height: 180%;
    -o-object-fit: contain;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .3)) drop-shadow(0 4px 12px rgba(0, 0, 0, .15));
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .4s ease;
    pointer-events: none
}

.jg-arch-card:hover .jg-arch-icon-img {
    transform: translate(-50%, calc(-50% - 55px)) scale(1.35) rotateY(-4deg);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)) drop-shadow(0 8px 20px rgba(0, 0, 0, .25))
}

.jg-arch-number {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -.01em
}

.jg-arch-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95);
    margin-bottom: 10px
}

.jg-arch-desc {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    max-width: 26ch;
    margin: 0 auto
}

@media(max-width:480px) {
    .jg-arch-icon-wrap {
        width: 100px;
        height: 120px
    }

    .jg-arch-card {
        padding: 34px 20px 24px;
        min-height: 300px
    }

    .jg-arch-desc {
        font-size: .78rem
    }
}

.jg-contact2 {
    position: relative;
    display: flex;
    min-height: 640px;
    overflow: visible !important;   /* was hidden — this was clipping the marquee image */
    isolation: isolate;
}

.jg-contact2-grid {
    position: relative;
    z-index: 1;
    flex: 1;
    display: grid;
    grid-template-columns: 32% 1fr;
    min-height: 640px;
    overflow: visible;               /* just in case */
}
.jg-contact2-stripe {
    display: flex;
    flex-direction: column;
    width: 14px;
    flex-shrink: 0
}

.jg-contact2-stripe span {
    flex: 1
}

.jg-contact2-stripe span:nth-child(1) {
    background: #e74c3c
}

.jg-contact2-stripe span:nth-child(2) {
    background: #f5a623
}

.jg-contact2-stripe span:nth-child(3) {
    background: #f4d35e
}

.jg-contact2-stripe span:nth-child(4) {
    background: #8ECA3C
}

.jg-contact2-stripe span:nth-child(5) {
    background: #128c7e
}

.jg-contact2-grid {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: 32% 1fr;
    min-height: 640px 
}

.jg-contact2-info {
    position: relative;
    background: #fff;
    padding: 70px 70px 40px;
    display: flex;
    align-items: center
}

.jg-contact2-vertical-label {
    position: absolute;
    left: -70px;
    /* top: 50%; */
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 4px;
    text-transform: lowercase;
    /* color: rgba(0, 0, 0, .08); */
    white-space: nowrap
}

.jg-contact2-details {
    display: flex;
    flex-direction: column;
    gap: 26px
}

.jg-contact2-row strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: #1a1a1a;
    margin-bottom: 4px
}

.jg-contact2-row span,
.jg-contact2-row a {
    font-size: .88rem;
    color: #555;
    line-height: 1.6
}

.jg-contact2-row a:hover {
    color: #ff6f00
}

.jg-contact2-social {
    display: flex;
    gap: 10px;
    margin-top: 4px
}

.jg-contact2-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: background .3s ease, transform .3s ease
}

.jg-contact2-social a:hover {
    background: #ff6f00;
    transform: translateY(-3px)
}

.jg-contact2-form-wrap {
    position: relative;
    background: var(--green);
    padding: 70px 70px 60px 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    z-index: 1
}

.jg-contact2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: -moz-fit-content;
    width: fit-content;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px
}

.jg-contact2-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 14px
}

.jg-contact2-desc {
    font-size: .92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .85);
    max-width: 42ch;
    margin-bottom: 26px
}

.jg-contact2-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 460px
}

.jg-contact2-form .form-group:nth-child(3),
.jg-contact2-form .form-group:nth-child(4),
.jg-contact2-form .form-group:nth-child(5) {
    grid-column: 1/-1
}

.jg-contact2-form input,
.jg-contact2-form select,
.jg-contact2-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    outline: none;
    transition: border-color .3s ease, background .3s ease
}

.jg-contact2-form input::-moz-placeholder,
.jg-contact2-form textarea::-moz-placeholder {
    color: rgba(255, 255, 255, .65)
}

.jg-contact2-form input::placeholder,
.jg-contact2-form textarea::placeholder {
    color: rgba(255, 255, 255, .65)
}

.jg-contact2-form select option {
    color: #1a1a1a
}

.jg-contact2-form input:focus,
.jg-contact2-form select:focus,
.jg-contact2-form textarea:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .18)
}

.jg-contact2-form textarea {
    resize: vertical
}

.jg-contact2-submit {
    grid-column: 1/-1;
    justify-self: start;
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 13px 34px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: transform .3s var(--spring), background .3s ease;
    margin-top: 4px
}

.jg-contact2-submit:hover {
    background: #ff6f00;
    transform: translateY(-3px)
}

.jg-contact2-char {
    position: absolute;
    top: 0;
    left: 32%;
    transform: translateX(-50%);
    height: 100%;
    width: 340px;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none
}

.jg-contact2-char img {
    max-height: 92%;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35))
}

@media(max-width:1024px) {
    .jg-contact2-form-wrap {
        padding: 70px 40px 50px 90px
    }

    .jg-contact2-char {
        width: 260px
    }
}

@media(max-width:900px) {
    .jg-contact2-grid {
        grid-template-columns: 1fr
    }

    .jg-contact2-info {
        padding: 50px 30px 30px 60px
    }

    .jg-contact2-form-wrap {
        padding: 50px 30px
    }

    .jg-contact2-char {
        display: none
    }

    .jg-contact2-vertical-label {
        display: none
    }
}

@media(max-width:600px) {
    .jg-contact2-form {
        grid-template-columns: 1fr
    }

    .jg-contact2-form .form-group {
        grid-column: 1/-1 !important
    }

    .jg-contact2-title {
        max-width: 100%
    }
}

.jg-cert2 {
    position: relative;
    overflow: hidden;
    background: #fff
}

.jg-cert2-stripe-top,
.jg-cert2-stripe-bottom {
    height: 14px;
    width: 100%;
    background: #4caf50
}

.jg-cert2-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 32%;
    min-height: 600px
}

.jg-cert2-left {
    position: relative;
    background: #e05a4e;
    padding: 70px 90px 60px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    z-index: 1
}

.jg-cert2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: -moz-fit-content;
    width: fit-content;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px
}

.jg-cert2-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    line-height: 1.2;
    margin-bottom: 16px;
    max-width: 14ch
}

.jg-cert2-title span {
    display: block;
    font-style: italic;
    color: #ffe082
}

.jg-cert2-desc {
    font-size: .95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
    max-width: 46ch;
    margin-bottom: 26px
}

.jg-cert2-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px
}

.jg-cert2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .4);
    color: #fff;
    padding: 9px 18px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 600;
    transition: all .3s ease
}

.jg-cert2-badge:hover {
    background: #fff;
    color: #e05a4e;
    transform: translateY(-3px)
}

.jg-cert2-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    background: #1a1a1a;
    color: #fff;
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: transform .3s var(--spring), background .3s ease
}

.jg-cert2-cta:hover {
    background: #ff6f00;
    transform: translateY(-3px)
}

.jg-cert2-right {
    background: #fff;
    padding: 70px 60px 60px 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.jg-cert2-image {
    position: relative;
    width: 100%;
    max-width: 320px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
    border: 1px solid #e7e2da;
    margin-bottom: 24px
}

.jg-cert2-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    aspect-ratio: 5/4
}

.jg-cert2-image-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #ff6b35, #f59e0b);
    color: #fff;
    padding: 8px 14px;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(255, 107, 53, .3)
}

.jg-cert2-note {
    font-size: .85rem;
    line-height: 1.7;
    color: #666;
    max-width: 32ch
}

.jg-cert2-char {
    position: absolute;
    top: 0;
    left: 68%;
    transform: translateX(-50%);
    height: 100%;
    width: 320px;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none
}

.jg-cert2-char img {
    max-height: 90%;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .3))
}

@media(max-width:1024px) {
    .jg-cert2-left {
        padding: 60px 60px 50px 50px
    }

    .jg-cert2-right {
        padding: 60px 40px 50px 70px
    }

    .jg-cert2-char {
        width: 240px
    }
}

@media(max-width:900px) {
    .jg-cert2-grid {
        grid-template-columns: 1fr
    }

    .jg-cert2-left {
        padding: 50px 30px
    }

    .jg-cert2-right {
        padding: 50px 30px
    }

    .jg-cert2-char {
        display: none
    }
}

/* ===== Sidebar Accordion (Services / Picnic Offers) ===== */
.jgq-sidebar-accordion {
    border-bottom: 1px solid #f0f0f0;
}

.jgq-sidebar-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 13px 4px;
    font-size: 14.5px;
    font-weight: 500;
    color: #23291d;
    cursor: pointer;
    font-family: inherit;
}

.jgq-sidebar-acc-btn:hover {
    color: #E89951;
}

.jgq-acc-arrow {
    font-size: 11px;
    transition: transform .3s ease;
    color: #44A194;
}

.jgq-sidebar-acc-btn[aria-expanded="true"] .jgq-acc-arrow {
    transform: rotate(180deg);
}

.jgq-sidebar-acc-panel {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.16, 1, .3, 1);
}

.jgq-sidebar-acc-panel.jgq-acc-open {
    max-height: 600px;
    /* enough to fit all items */
}

.jgq-sidebar-acc-panel li a {
    display: block;
    padding: 10px 4px 10px 16px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
}

.jgq-sidebar-acc-panel li a:hover {
    color: #E89951;
}

/* Active article — row background handled inline via bg-primary-900 class in JS */
.accordion-panel {
    animation: fadeIn .3s var(--ease-out);
}
.fade-in {
    animation: fadeIn .45s var(--ease-out);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}





.jgn-nav * {
    box-sizing: border-box;
}

.jgn-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    width: 100%;
    padding: 18px 16px 0;
    transition: padding .45s cubic-bezier(.16, 1, .3, 1);
}

.jgn-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 50px;
    transition: background .45s ease, box-shadow .45s ease, border-color .45s ease,
        backdrop-filter .45s ease, padding .45s ease, border-radius .45s ease,
        max-width .45s ease;
    /* default (on-hero) look: dark glass pill */
    background: linear-gradient(135deg, rgba(90, 94, 88, .42), rgba(60, 64, 58, .34));
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

/* ---------- LOGO ---------- */
.jgn-logo {
    flex: none;
    display: flex;
    align-items: center;
    padding-left: 6px;
}

.jgn-logo img {
    height: 34px;
    width: auto;
    display: block;
}

/* ---------- LINKS ---------- */
.jgn-links {
    display: none;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
    flex: 1;
    justify-content: center;
    list-style: none;
}

@media (min-width: 1024px) {
    .jgn-links {
        display: flex;
    }
}

.jgn-links>li {
    position: relative;
}

.jgn-links>li>a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s, color .2s;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.jgn-links>li>a:hover,
.jgn-links>li>a.jgn-active {
    background: rgba(255, 255, 255, .14);
}

.jgn-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: #fff;
    border-radius: 14px;
    border-top: 3px solid #E89951;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .16);
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .3s;
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
    list-style: none;
}

.jgn-has-drop:hover .jgn-dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.jgn-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #23291d;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.jgn-dropdown a:hover {
    background: rgba(142, 202, 60, .12);
    color: #35521F;
}

/* ---------- CTA ---------- */
.jgn-cta {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform .3s, background .3s, color .3s;
    background: rgba(255, 255, 255, .92);
    color: #23291d;
}

@media (min-width: 640px) {
    .jgn-cta {
        display: inline-flex;
    }
}

.jgn-cta:hover {
    transform: translateY(-2px);
}

/* ---------- BURGER ---------- */
.jgn-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
    padding: 0 9px;
    flex-shrink: 0;
    margin-left: auto;
    transition: background .3s, border-color .3s;
}

@media (min-width: 1024px) {
    .jgn-burger {
        display: none;
    }
}

.jgn-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #fff;
    transition: transform .3s, opacity .3s, background .3s;
}

.jgn-burger.jgn-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.jgn-burger.jgn-active span:nth-child(2) {
    opacity: 0;
}

.jgn-burger.jgn-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   SOLID STATE — everywhere except hero (Image 2 look)
   ============================================================ */
.jgn-nav.jgn-solid {
    padding: 0;
}

.jgn-nav.jgn-solid .jgn-inner {
    max-width: 100%;
    border-radius: 0 0 20px 20px;
    padding: 10px 24px;
    background: rgba(255, 255, 255, .9);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

.jgn-nav.jgn-solid .jgn-links>li>a {
    color: #1a1a1a;
    text-shadow: none;
}

.jgn-nav.jgn-solid .jgn-links>li>a:hover,
.jgn-nav.jgn-solid .jgn-links>li>a.jgn-active {
    background: rgba(0, 0, 0, .06);
    color: #E89951;
}

.jgn-nav.jgn-solid .jgn-cta {
    background: linear-gradient(135deg, #E89951, #F0AD70);
    color: #fff;
}

.jgn-nav.jgn-solid .jgn-burger {
    border-color: rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .04);
}

.jgn-nav.jgn-solid .jgn-burger span {
    background: #1a1a1a;
}

/* Prevent flash-of-wrong-style: hide nav briefly until JS decides state */
.jgn-nav.jgn-init-hidden {
    opacity: 0;
}

.jgn-nav {
    opacity: 1;
    transition: opacity .3s ease, padding .45s cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 640px) {
    .jgn-nav .jgn-inner {
        gap: 20px;
    }
}

/* ============================================================
   SIDEBAR (mobile drawer) — shared across both states
   ============================================================ */
.jgn-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

.jgn-overlay.jgn-open {
    opacity: 1;
    pointer-events: all;
}

.jgn-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 85vw;
    max-width: 340px;
    height: 100%;
    height: 100dvh;
    background: #fff;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .15);
}

@media (min-width: 480px) {
    .jgn-sidebar {
        width: 340px;
    }
}

@media (min-width: 768px) {
    .jgn-sidebar {
        width: 380px;
        max-width: 380px;
    }
}

.jgn-sidebar.jgn-open {
    transform: translateX(0);
}

.jgn-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: 300px;
    height: 100%;
    height: 100dvh;
    background: #fff;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .15);
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    overflow: hidden;
}

@media (min-width: 480px) {
    .jgn-sidebar {
        width: 300px;
    }
}

@media (min-width: 768px) {
    .jgn-sidebar {
        width: 320px;
        max-width: 320px;
    }
}

.jgn-sidebar.jgn-open {
    transform: translateX(0);
}

.jgn-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.jgn-sidebar-header img {
    height: 30px;
    width: auto;
}

.jgn-sidebar-close {
    width: 30px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f2f2f2;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23291d;
    flex-shrink: 0;
    transition: background .2s ease;
}

.jgn-sidebar-close:hover {
    background: #e6e6e6;
}

.jgn-sidebar-links {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 4px 20px 12px;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.jgn-sidebar-links::-webkit-scrollbar {
    display: none;
}

.jgn-sidebar-links li {
    border-bottom: 1px solid #eee;
    margin-left: 15px;
}

.jgn-sidebar-links li a {
    display: block;
    padding: 16px 4px 16px 15px;
    color: #23291d;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
}

.jgn-sidebar-links li a:hover,
.jgn-sidebar-links li a.jgn-active {
    color: #E89951;
}

.jgn-sidebar-accordion {
    border-bottom: 1px solid #eee;
    margin-left: 15px;
}

.jgn-sidebar-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 16px 4px 16px 15px;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 500;
    color: #23291d;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s ease;
}

.jgn-sidebar-acc-btn:hover,
.jgn-sidebar-acc-btn.jgn-acc-active {
    color: #E89951;
}

.jgn-acc-arrow {
    font-size: 12px;
    transition: transform .3s ease;
    color: #44A194;
    flex-shrink: 0;
}

.jgn-sidebar-acc-btn[aria-expanded="true"] .jgn-acc-arrow {
    transform: rotate(180deg);
}

.jgn-sidebar-acc-panel {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.16, 1, .3, 1);
}

.jgn-sidebar-acc-panel.jgn-acc-open {
    max-height: 600px;
    padding-bottom: 6px;
}

.jgn-sidebar-acc-panel li {
    border-bottom: none;
}

.jgn-sidebar-acc-panel li a {
    display: block;
    padding: 10px 4px 10px 18px;
    font-size: clamp(12.5px, 3.6vw, 14px);
    color: #555;
    text-decoration: none;
}

.jgn-sidebar-acc-panel li a:hover {
    color: #E89951;
}

.jgn-sidebar-cta {
    display: block;
    text-align: center;
    margin: 14px 20px 20px;
    padding: 14px;
    background: linear-gradient(135deg, #E89951, #F0AD70);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: clamp(13px, 3.8vw, 15px);
    letter-spacing: .02em;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 12px 28px rgba(232, 153, 81, .35);
    transition: transform .3s ease, box-shadow .3s ease;
}

.jgn-sidebar-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(232, 153, 81, .45);
}

@media (max-width: 360px) {
    .jgn-sidebar {
        width: 88vw;
        max-width: 280px;
    }
}

/* ============================================================
   RESPONSIVE FINE-TUNING
   ============================================================ */
@media (max-width: 1023px) {
    .jgn-nav .jgn-inner {
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .jgn-nav {
        padding: 12px 10px 0;
    }

    .jgn-nav.jgn-solid .jgn-inner {
        padding: 8px 14px;
    }

    .jgn-logo img {
        height: 28px;
    }
}

@media (max-width: 380px) {
    .jgn-logo img {
        height: 24px;
    }

    .jgn-burger {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   JGN NAV — PATCH 2
   Hero state: pill shrinks to just the links, centered.
   Logo sits fixed top-left, Book Now fixed top-right (outside pill).
   Solid state (unchanged from before): full-width bar with
   logo + links + CTA all inside one row.
   ============================================================ */

.jgn-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ---------- outer logo / cta (hero state only) ---------- */
.jgn-logo-outer,
.jgn-cta-outer {
    flex: none;
    position: relative;
    z-index: 2;
}

.jgn-logo-outer img {
    height: 80px;
    width: auto;
    display: block;
}

/* Hide the ones meant for solid state, by default (hero) */
.jgn-logo-inner {
    display: none;
}

.jgn-cta-inner {
    display: none;
}

/* ---------- pill (hero state): just links, small + centered ---------- */
.jgn-nav .jgn-inner {
    flex: none;
    max-width: 620px;
    width: auto;
    justify-content: center;
}

.jgn-nav .jgn-inner .jgn-links {
    margin: 0;
}


/* Top/hero state mein wapas aate waqt INSTANT switch, no shrink animation */
.jgn-nav.jgn-instant,
.jgn-nav.jgn-instant .jgn-inner {
    transition: none !important;
    animation: none !important;
}
/* ============================================================
   SOLID STATE — restore the full bar exactly as before
   ============================================================ */
.jgn-nav.jgn-solid {
    justify-content: center;
    /* .jgn-inner will stretch to full width itself */
}

.jgn-nav.jgn-solid .jgn-logo-outer,
.jgn-nav.jgn-solid .jgn-cta-outer {
    display: none;
}

.jgn-nav.jgn-solid .jgn-logo-inner {
    display: flex;
    align-items: center;
    flex: none;
    padding-left: 6px;
}

.jgn-nav.jgn-solid .jgn-logo-inner img {
    height: 34px;
    width: auto;
    display: block;
}

.jgn-nav.jgn-solid .jgn-cta-inner {
    display: inline-flex;
}

.jgn-nav.jgn-solid .jgn-inner {
    max-width: 100%;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
}

/* ============================================================
   RESPONSIVE — hide Book Now everywhere below 640px
   (it's already available inside the sidebar, no need to repeat)
   ============================================================ */
@media (max-width: 639px) {

    .jgn-cta-outer,
    .jgn-cta-inner {
        display: none !important;
    }
}

/* Hero-state logo scales down a bit on small/medium screens */
@media (max-width: 900px) {
    .jgn-logo-outer img {
        height: 36px;
    }
}

@media (max-width: 480px) {
    .jgn-logo-outer img {
        height: 30px;
    }

    .jgn-nav {
        padding-left: 8px;
        padding-right: 8px;
        gap: 8px;
    }
}

/* Below 1024px the burger still needs to show inside the hero pill too */
@media (max-width: 1023px) {
    .jgn-nav .jgn-inner {
        justify-content: space-between;
        max-width: 100%;
    }
}




body.jg-artcl-body-scope {
    font-family: 'Inter', sans-serif;
    background-color: #fff;
    background-image: repeating-linear-gradient(90deg, rgba(31, 46, 21, .025) 0, rgba(31, 46, 21, .025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(31, 46, 21, .015) 0, rgba(31, 46, 21, .015) 2px, transparent 2px, transparent 7px);
}

.jg-artcl-heading {
    font-family: 'Poppins', sans-serif;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: #5FA032;
    border-radius: 4px;
}

.jg-artcl-prose {
    font-size: 1.05rem;
    color: #334229;
}

.jg-artcl-prose p {
    margin-bottom: 1.5rem;
    line-height: 1.95;
}

.jg-artcl-subhead {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #1F2E15;
    font-size: 1.35rem;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(95, 160, 50, 0.15);
}

.jg-artcl-prose blockquote {
    border-left: 4px solid #5FA032;
    background: rgba(142, 202, 60, 0.08);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #1F2E15;
    font-family: 'Poppins', sans-serif;
    border-radius: 0 12px 12px 0;
    font-size: 1.1rem;
}

.jg-artcl-bg-wrap {
    position: relative;
    background-color: #fff;
    background-image: repeating-linear-gradient(90deg, rgba(31, 46, 21, .025) 0, rgba(31, 46, 21, .025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(31, 46, 21, .015) 0, rgba(31, 46, 21, .015) 2px, transparent 2px, transparent 7px);
}

.jg-artcl-bg-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .025;
    mix-blend-mode: multiply;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
    z-index: 0;
}

.jg-artcl-bg-inner {
    position: relative;
    z-index: 1;
}

/* Inline image styling for article content */
.jg-artcl-inline-img {
    float: left;
    width: 300px;
    max-width: 45%;
    margin: 6px 32px 20px 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(31, 46, 21, 0.3);
    border: 1px solid rgba(31, 46, 21, .08);
    background: #fff;
}

.jg-artcl-inline-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4/5;
}

.jg-artcl-inline-caption {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #4A5940;
    text-align: center;
    padding: 10px;
    background: #F7F1DE;
    border-top: 1px solid rgba(31, 46, 21, 0.05);
}

@media (max-width: 768px) {
    .jg-artcl-inline-img {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px;
    }

    .jg-artcl-inline-img img {
        aspect-ratio: 16/9;
    }
}

/* Swiper Control Overrides for "More from" slider */
.jg-artcl-swiper-btn-next,
.jg-artcl-swiper-btn-prev {
    color: #3D7A1F !important;
    background: #F7F1DE;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(31, 46, 21, 0.1);
    transition: all 0.3s ease;
}

.jg-artcl-swiper-btn-next:hover,
.jg-artcl-swiper-btn-prev:hover {
    background: #5FA032;
    color: #fff !important;
}

.jg-artcl-swiper-btn-next::after,
.jg-artcl-swiper-btn-prev::after {
    font-size: 16px;
    font-weight: 800;
}

.jg-artcl-slider-wrap .swiper-pagination-bullet {
    background: #4A5940 !important;
    opacity: 0.3;
}

.jg-artcl-slider-wrap .swiper-pagination-bullet-active {
    background: #5FA032 !important;
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}

.jg-related-card {
    transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.35s ease;
}

.jg-related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px -12px rgba(31, 46, 21, 0.25);
}

.jgArtclSwiper {
    cursor: grab;
}

.jgArtclSwiper:active {
    cursor: grabbing;
}


.jgBlog-page {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(90deg, rgba(60, 55, 45, .025) 0, rgba(60, 55, 45, .025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(60, 55, 45, .015) 0, rgba(60, 55, 45, .015) 2px, transparent 2px, transparent 7px);
}

.jgAbt-page {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(90deg, rgba(60, 55, 45, .025) 0, rgba(60, 55, 45, .025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(60, 55, 45, .015) 0, rgba(60, 55, 45, .015) 2px, transparent 2px, transparent 7px);
}





/* checkout page  */

/* ===== all styles are scoped inside .jg-booking-wrap ===== */
.jg-booking-wrap {
    /* Colors, radius etc. are intentionally NOT redefined here —
               this page reuses the SAME variables already declared in
               style.css (:root): --green, --green-dark, --green-light,
               --green-sage, --accent, --accent-lt, --white, --off-white,
               --border, --text, --text-lt, --radius.
               Only one page-specific value is kept below, uniquely named
               so it can never collide with anything in style.css. */
    --jgbk-shadow: 0 8px 32px rgba(27, 94, 32, .10);

    /* — grid background pattern (exactly like .jgBlog-page / .jgAbt-page) — */
    background-color: #fff;
    background-image:
        repeating-linear-gradient(90deg, rgba(60, 55, 45, .025) 0, rgba(60, 55, 45, .025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(60, 55, 45, .015) 0, rgba(60, 55, 45, .015) 2px, transparent 2px, transparent 7px);

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 130px 20px 60px;
    font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
}

.jg-booking-wrap *,
.jg-booking-wrap *::before,
.jg-booking-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== main card ===== */
.jg-booking-card {
    max-width: 920px;
    width: 100%;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--jgbk-shadow);
    overflow: hidden;
    border: 1px solid rgba(46, 125, 50, .10);
}

/* ===== header ===== */
.jg-booking-header {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-light) 100%);
    padding: 28px 32px 24px;
    color: var(--white);
    position: relative;
}

.jg-booking-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-lt), var(--green-sage));
}

.jg-booking-header-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.jg-booking-header-title i {
    font-size: 28px;
    color: var(--accent-lt);
}

.jg-booking-header-sub {
    font-size: 15px;
    font-weight: 300;
    opacity: 0.85;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

/* ===== body ===== */
.jg-booking-body {
    padding: 28px 32px 32px;
}

/* ===== section title ===== */
.jg-booking-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid rgba(46, 125, 50, .12);
    padding-bottom: 10px;
}

.jg-booking-section-title i {
    color: var(--accent);
    font-size: 20px;
}

/* ===== contact grid ===== */
.jg-booking-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.jg-booking-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jg-booking-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.3px;
}

.jg-booking-form-group label i {
    color: var(--green-sage);
    width: 18px;
    font-size: 14px;
}

.jg-booking-form-group input {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    background: var(--off-white);
    transition: border 0.25s, box-shadow 0.25s;
    outline: none;
    width: 100%;
}

.jg-booking-form-group input:focus {
    border-color: var(--green-light);
    box-shadow: 0 0 0 4px rgba(76, 175, 80, .10);
    background: var(--white);
}

.jg-booking-form-group input::placeholder {
    color: #b0aea8;
    font-weight: 300;
}

/* ===== table wrap ===== */
.jg-booking-table-wrap {
    overflow-x: auto;
    margin-bottom: 22px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.jg-booking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 580px;
}

.jg-booking-table thead {
    background: var(--green-dark);
    color: var(--white);
}

.jg-booking-table thead th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.jg-booking-table thead th:first-child {
    border-radius: 10px 0 0 0;
}

.jg-booking-table thead th:last-child {
    border-radius: 0 10px 0 0;
}

.jg-booking-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.jg-booking-table tbody tr:last-child td {
    border-bottom: none;
}

.jg-booking-table tbody tr:nth-child(even) {
    background: rgba(147, 197, 114, .06);
}

.jg-booking-table tbody tr:hover {
    background: rgba(46, 125, 50, .04);
}

.jg-booking-pkg-name {
    font-weight: 500;
    color: var(--green-dark);
}

.jg-booking-pkg-detail {
    font-size: 12px;
    color: var(--text-lt);
    display: block;
    font-weight: 400;
}

.jg-booking-price-cell {
    font-weight: 600;
    color: var(--green);
}

.jg-booking-qty-cell {
    text-align: center;
    font-weight: 500;
}

.jg-booking-amount-cell {
    font-weight: 700;
    color: var(--green-dark);
    text-align: right;
}

.jg-booking-amount-cell.zero {
    color: var(--text-lt);
    font-weight: 400;
}

.jg-booking-row-selected {
    background: rgba(46, 125, 50, .06) !important;
    border-left: 3px solid var(--accent);
}

.jg-booking-row-selected .jg-booking-pkg-name {
    color: var(--accent);
}

/* ===== summary grid ===== */
.jg-booking-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: var(--off-white);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 22px;
    border: 1px solid var(--border);
}

.jg-booking-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.jg-booking-summary-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(46, 125, 50, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-size: 13px;
}

.jg-booking-summary-item .jg-booking-label {
    display: block;
    font-size: 12px;
    color: var(--text-lt);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 3px;
}

.jg-booking-summary-item .jg-booking-label i {
    display: none;
}

.jg-booking-summary-item .jg-booking-value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    word-break: break-word;
    overflow-wrap: break-word;
}

.jg-booking-summary-item .jg-booking-value.highlight {
    color: var(--green-dark);
}

.jg-booking-summary-item .jg-booking-value.accent {
    color: var(--accent);
    font-size: 16px;
}

.jg-booking-summary-item .jg-booking-text-col {
    min-width: 0;
}

/* ===== total row ===== */
.jg-booking-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(46, 125, 50, .06), rgba(147, 197, 114, .10));
    border-radius: 10px;
    padding: 16px 22px;
    border: 1.5px solid rgba(46, 125, 50, .15);
    margin-bottom: 24px;
}

.jg-booking-total-row .jg-booking-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.jg-booking-total-row .jg-booking-label i {
    color: var(--accent);
    font-size: 22px;
}

.jg-booking-total-row .jg-booking-amount {
    font-size: 26px;
    font-weight: 800;
    color: var(--green-dark);
    letter-spacing: 0.5px;
}

.jg-booking-total-row .jg-booking-amount span {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-lt);
}

/* ===== pay section ===== */
.jg-booking-pay-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.jg-booking-secure {
    font-size: 13px;
    color: var(--text-lt);
    display: flex;
    align-items: center;
    gap: 6px;
}

.jg-booking-secure i {
    color: var(--green-light);
    font-size: 16px;
}

.jg-booking-btn-pay {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lt) 100%);
    color: var(--white);
    border: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(255, 111, 0, .30);
}

.jg-booking-btn-pay i {
    font-size: 20px;
}

.jg-booking-btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255, 111, 0, .40);
}

.jg-booking-btn-pay:active {
    transform: translateY(0);
}

/* ===== responsive (scoped) ===== */
@media (max-width: 768px) {
    .jg-booking-body {
        padding: 20px 16px 24px;
    }

    .jg-booking-header {
        padding: 22px 20px 18px;
    }

    .jg-booking-header-title {
        font-size: 21px;
    }

    .jg-booking-contact-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .jg-booking-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .jg-booking-summary-item {
        padding: 9px 10px;
    }

    .jg-booking-total-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px;
    }

    .jg-booking-total-row .jg-booking-amount {
        font-size: 22px;
    }

    .jg-booking-pay-section {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .jg-booking-btn-pay {
        justify-content: center;
        padding: 14px 24px;
        font-size: 16px;
    }

    .jg-booking-secure {
        justify-content: center;
    }

    .jg-booking-table {
        font-size: 13px;
        min-width: 480px;
    }

    .jg-booking-table thead th,
    .jg-booking-table tbody td {
        padding: 10px 10px;
    }
}

@media (max-width: 480px) {
    .jg-booking-wrap {
        padding: 100px 10px 30px;
    }

    .jg-booking-card {
        border-radius: 10px;
    }

    .jg-booking-header-title {
        font-size: 18px;
        flex-wrap: wrap;
    }

    .jg-booking-header-sub {
        font-size: 13px;
    }

    .jg-booking-section-title {
        font-size: 16px;
    }

    .jg-booking-table {
        font-size: 12px;
        min-width: 380px;
    }

    .jg-booking-table thead th,
    .jg-booking-table tbody td {
        padding: 8px 8px;
    }

    .jg-booking-summary-item .jg-booking-value {
        font-size: 14px;
    }

    .jg-booking-summary-item .jg-booking-value.accent {
        font-size: 15px;
    }

    .jg-booking-total-row .jg-booking-amount {
        font-size: 20px;
    }

    .jg-booking-btn-pay {
        font-size: 15px;
        padding: 12px 20px;
    }
}

@media (max-width: 380px) {
    .jg-booking-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== print (scoped) ===== */
@media print {
    .jg-booking-wrap {
        padding: 0;
        background: #fff !important;
        background-image: none !important;
    }

    .jg-booking-card {
        box-shadow: none;
        border: 1px solid #ddd;
        border-radius: 0;
    }

    .jg-booking-btn-pay {
        background: var(--green-dark) !important;
        box-shadow: none !important;
    }

    .jg-booking-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .jg-booking-table thead {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .jg-booking-total-row {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Prevent footer's floating circular logo (which overlaps -85px upward by design)
           from sitting on top of the booking card — add a clear gap on this page only */
.jg-booking-wrap+footer.joygaon-footer {
    margin-top: 30px;
}

.jg-booking-wrap+footer.joygaon-footer .joygaon-footer__card {
    padding-top: 150px;
}

@media (max-width: 768px) {
    .jg-booking-wrap+footer.joygaon-footer {
        margin-top: 20px;
    }
}


/* =============================================================
   JOYGAON TICKET BOOKING PAGE STYLES (jgtk- namespace)
   Paste this block directly into style.css — fully scoped,
   no class or CSS-variable names collide with existing styles.
   ============================================================= */

/* =============================================================
       JOYGAON TICKET BOOKING — SCOPED STYLES (jgtk- namespace)
       All selectors below are prefixed with .jgtk- / --jgtk- so this
       block can be copy-pasted into style.css with zero conflicts.
       ============================================================= */
.jgtk-page,
.jgtk-page *,
.jgtk-page *::before,
.jgtk-page *::after {
    box-sizing: border-box;
}

.jgtk-page {
    --jgtk-green: #8FBF5C;
    --jgtk-green-light: #B4DE8B;
    --jgtk-green-pale: #EFFFC7;
    --jgtk-sand: #EFE4C2;
    --jgtk-navy: #2A3B70;
    --jgtk-navy-deep: #1C2A54;
    --jgtk-orange: #E89951;
    --jgtk-orange-deep: #C97531;
    --jgtk-white: #FFFFFF;
    --jgtk-ink: #26311F;
    --jgtk-ink-soft: #5C6B4E;
    --jgtk-off-white: #FBFBF5;
    --jgtk-border: #E4E9D6;
    --jgtk-radius: 16px;
    --jgtk-radius-lg: 22px;
    --jgtk-shadow-sm: 0 6px 18px rgba(42, 59, 112, 0.08);
    --jgtk-shadow-md: 0 14px 34px rgba(42, 59, 112, 0.12);
    --jgtk-shadow-lg: 0 24px 56px rgba(42, 59, 112, 0.16);
    --jgtk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --jgtk-page-pad: 24px;

    font-family: 'DM Sans', sans-serif;
    color: var(--jgtk-ink);
    background-color: #fbfbf7;
    background-image:
        repeating-linear-gradient(90deg, rgba(60, 55, 45, 0.025) 0px, rgba(60, 55, 45, 0.025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(60, 55, 45, 0.015) 0px, rgba(60, 55, 45, 0.015) 2px, transparent 2px, transparent 7px);
    line-height: 1.6;
    min-height: 100vh;
}

.jgtk-page-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--jgtk-page-pad);
}

.jgtk-invoice-wrap {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 var(--jgtk-page-pad) 8px;
}

/* ---------- Invoice Header ---------- */
.jgtk-invoice-header {
    background: linear-gradient(135deg, #16924E 0%, #0F7A40 100%);
    padding: 20px 32px;
    border-radius: var(--jgtk-radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(15, 122, 64, 0.28);
    position: relative;
    overflow: hidden;
}

.jgtk-invoice-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 85% -10%, rgba(255, 255, 255, 0.14), transparent 55%);
    pointer-events: none;
}

.jgtk-invoice-header .jgtk-brand-cluster {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.jgtk-invoice-header .jgtk-brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.jgtk-invoice-header .jgtk-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jgtk-invoice-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.jgtk-invoice-header .jgtk-eyebrow {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-top: 2px;
    display: block;
}

.jgtk-invoice-header .jgtk-invoice-tag {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50px;
    padding: 7px 18px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.jgtk-section-card {
    background: #ffffff;
    border-radius: var(--jgtk-radius-lg);
    box-shadow: var(--jgtk-shadow-md), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid rgba(42, 59, 112, 0.05);
    transition: box-shadow 0.3s ease;
}

.jgtk-section-card:hover {
    box-shadow: var(--jgtk-shadow-lg), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.jgtk-section-header {
    padding: 20px 28px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    border-bottom: 1px solid var(--jgtk-border);
    background: linear-gradient(180deg, var(--jgtk-off-white), #ffffff);
}

.jgtk-section-header .jgtk-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jgtk-section-header .jgtk-title-wrap .jgtk-icon {
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--jgtk-green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jgtk-section-header .jgtk-title-wrap h2 {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--jgtk-navy);
    line-height: 1.2;
}

.jgtk-section-header .jgtk-title-wrap .jgtk-timing {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--jgtk-ink-soft);
}

.jgtk-section-header .jgtk-includes-note {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--jgtk-ink-soft);
    background: var(--jgtk-off-white);
    border: 1px solid var(--jgtk-border);
    padding: 5px 14px;
    border-radius: 50px;
}

.jgtk-section-body {
    padding: 22px 28px 26px;
}

.jgtk-bill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2ed;
    flex-wrap: wrap;
    gap: 6px;
    transition: opacity 0.2s ease;
}

.jgtk-bill-row:last-child {
    border-bottom: none;
}

.jgtk-bill-row.jgtk-zero-qty {
    opacity: 0.45;
}

.jgtk-bill-row .jgtk-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 160px;
}

.jgtk-bill-row .jgtk-item-left .jgtk-qty-badge {
    background: var(--jgtk-green-pale);
    color: var(--jgtk-navy-deep);
    font-weight: 700;
    font-size: 13px;
    padding: 3px 13px;
    border-radius: 50px;
    min-width: 30px;
    text-align: center;
    border: 1px solid rgba(42, 59, 112, 0.06);
}

.jgtk-bill-row .jgtk-item-left .jgtk-item-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--jgtk-ink);
}

.jgtk-bill-row .jgtk-item-left .jgtk-item-sub {
    font-size: 12px;
    color: var(--jgtk-ink-soft);
    font-weight: 400;
    display: block;
    margin-top: 1px;
}

.jgtk-bill-row .jgtk-item-right {
    font-weight: 700;
    font-size: 15px;
    color: var(--jgtk-navy);
    text-align: right;
    min-width: 90px;
}

.jgtk-bill-row .jgtk-item-right .jgtk-price-strike {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--jgtk-ink-soft);
    text-decoration: line-through;
    display: block;
}

.jgtk-bill-row .jgtk-item-right .jgtk-price-online {
    color: var(--jgtk-orange-deep);
}

.jgtk-qty-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 16px 0 6px;
    padding-top: 14px;
    border-top: 1px dashed var(--jgtk-border);
}

.jgtk-qty-toggle-group .jgtk-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--jgtk-ink-soft);
}

.jgtk-qty-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--jgtk-border);
    border-radius: 50px;
    overflow: hidden;
    background: #fff;
}

.jgtk-qty-toggle button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    color: var(--jgtk-navy);
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.jgtk-qty-toggle button:hover {
    background: var(--jgtk-green);
    color: #fff;
}

.jgtk-qty-toggle button:active {
    transform: scale(0.9);
}

.jgtk-qty-toggle span {
    min-width: 22px;
    text-align: center;
    font-weight: 700;
    font-size: 13.5px;
    padding: 0 4px;
    color: var(--jgtk-ink);
}

.jgtk-totals-box {
    margin-top: 18px;
    background: var(--jgtk-off-white);
    border-radius: var(--jgtk-radius);
    padding: 18px 22px 18px;
    border: 1px solid var(--jgtk-border);
}

.jgtk-total-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
    color: var(--jgtk-ink-soft);
    flex-wrap: wrap;
    gap: 4px;
}

.jgtk-total-line .jgtk-label {
    font-weight: 500;
}

.jgtk-total-line .jgtk-value {
    font-weight: 600;
    color: var(--jgtk-ink);
}

.jgtk-total-line.jgtk-subtotal {
    font-weight: 600;
    color: var(--jgtk-ink);
}

.jgtk-total-line.jgtk-discount {
    color: var(--jgtk-orange-deep);
}

.jgtk-total-line.jgtk-discount .jgtk-value {
    color: var(--jgtk-orange-deep);
    font-weight: 700;
}

.jgtk-total-line.jgtk-grand {
    border-top: 2px solid var(--jgtk-border);
    margin-top: 10px;
    padding-top: 14px;
    font-size: 18px;
}

.jgtk-total-line.jgtk-grand .jgtk-label {
    font-weight: 700;
    color: var(--jgtk-navy);
    font-size: 16.5px;
}

.jgtk-total-line.jgtk-grand .jgtk-value {
    font-weight: 800;
    color: var(--jgtk-orange-deep);
    font-size: 23px;
}

.jgtk-coupon-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 50px;
    background: #fdf6e3;
    border: 2px dashed var(--jgtk-orange);
    color: var(--jgtk-orange-deep);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s var(--jgtk-spring);
    font-family: 'DM Sans', sans-serif;
    margin-top: 6px;
}

.jgtk-coupon-trigger:hover {
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 8px 24px rgba(232, 153, 81, 0.20);
    border-color: var(--jgtk-orange-deep);
}

.jgtk-coupon-trigger .jgtk-badge-new {
    background: var(--jgtk-orange);
    color: #fff;
    font-size: 9px;
    padding: 2px 10px;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.jgtk-coupon-applied-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--jgtk-green-pale);
    border: 1.5px solid var(--jgtk-green);
    border-radius: 50px;
    padding: 5px 14px 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--jgtk-navy-deep);
    margin-top: 6px;
}

.jgtk-coupon-applied-badge .jgtk-remove-coupon {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
    background: none;
    border: none;
    padding: 0 4px;
    color: var(--jgtk-navy-deep);
}

.jgtk-coupon-applied-badge .jgtk-remove-coupon:hover {
    opacity: 1;
    transform: scale(1.2);
}

.jgtk-savings-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--jgtk-green-pale);
    border-radius: 50px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--jgtk-navy-deep);
    border: 1px solid var(--jgtk-green-light);
    margin-top: 6px;
}

.jgtk-savings-badge .jgtk-savings-amount {
    color: var(--jgtk-orange-deep);
    font-weight: 800;
}

.jgtk-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid var(--jgtk-border);
}

.jgtk-date-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.jgtk-date-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--jgtk-off-white);
    border: 1px solid var(--jgtk-border);
    border-radius: 50px;
    padding: 7px 16px 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--jgtk-ink);
}

.jgtk-date-item .jgtk-date-icon {
    font-size: 14px;
    opacity: 0.6;
}

.jgtk-date-item input[type="date"] {
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--jgtk-navy);
    outline: none;
    padding: 0;
    width: 122px;
    cursor: pointer;
}

.jgtk-date-item input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    padding: 2px;
    cursor: pointer;
}

.jgtk-date-item.jgtk-readonly {
    background: #f5f6f3;
}

.jgtk-date-item.jgtk-readonly input[type="date"] {
    color: var(--jgtk-ink-soft);
    cursor: default;
}

.jgtk-btn-book {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--jgtk-orange), #F0AD70);
    color: #fff;
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s var(--jgtk-spring), box-shadow 0.3s ease;
    box-shadow: 0 12px 28px rgba(232, 153, 81, 0.30);
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}

.jgtk-btn-book:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(232, 153, 81, 0.45);
}

.jgtk-btn-book:active {
    transform: scale(0.96);
}

.jgtk-btn-book:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.jgtk-coupon-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    animation: jgtkFadeInBlur 0.35s ease;
}

.jgtk-coupon-modal-overlay.jgtk-active {
    display: flex;
}

@keyframes jgtkFadeInBlur {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    100% {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
}

.jgtk-coupon-modal {
    background: #fff;
    border-radius: var(--jgtk-radius);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px 28px 28px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.30);
    animation: jgtkModalSlideUp 0.4s var(--jgtk-spring);
}

@keyframes jgtkModalSlideUp {
    0% {
        transform: translateY(40px) scale(0.94);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.jgtk-coupon-modal .jgtk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.jgtk-coupon-modal .jgtk-modal-header h2 {
    font-family: 'Playfair Display', serif;
    color: var(--jgtk-navy);
    font-size: 24px;
}

.jgtk-coupon-modal .jgtk-modal-header .jgtk-close-modal {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: var(--jgtk-ink-soft);
    transition: transform 0.3s ease, color 0.3s ease;
    padding: 0 6px;
    line-height: 1;
}

.jgtk-coupon-modal .jgtk-modal-header .jgtk-close-modal:hover {
    transform: rotate(90deg);
    color: var(--jgtk-navy);
}

.jgtk-coupon-modal .jgtk-modal-sub {
    color: var(--jgtk-ink-soft);
    font-size: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--jgtk-border);
    padding-bottom: 14px;
}

.jgtk-coupon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .jgtk-coupon-grid {
        grid-template-columns: 1fr;
    }
}

.jgtk-coupon-card {
    background: var(--jgtk-off-white);
    border-radius: var(--jgtk-radius);
    padding: 16px 16px 14px;
    border: 2px solid var(--jgtk-border);
    transition: all 0.3s var(--jgtk-spring);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
}

.jgtk-coupon-card:hover {
    transform: translateY(-3px);
    border-color: var(--jgtk-orange);
    box-shadow: 0 8px 24px rgba(232, 153, 81, 0.12);
}

.jgtk-coupon-card .jgtk-coupon-code {
    font-weight: 800;
    font-size: 16px;
    color: var(--jgtk-navy);
    letter-spacing: 0.5px;
    background: var(--jgtk-green-pale);
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 4px;
}

.jgtk-coupon-card .jgtk-coupon-discount {
    font-size: 22px;
    font-weight: 800;
    color: var(--jgtk-orange-deep);
    line-height: 1.1;
}

.jgtk-coupon-card .jgtk-coupon-desc {
    font-size: 13px;
    color: var(--jgtk-ink-soft);
    margin-top: 2px;
}

.jgtk-coupon-card .jgtk-coupon-min {
    font-size: 11px;
    color: var(--jgtk-ink-soft);
    margin-top: 4px;
    opacity: 0.7;
}

.jgtk-coupon-card .jgtk-coupon-apply-btn {
    margin-top: 10px;
    padding: 8px 0;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, var(--jgtk-navy), var(--jgtk-navy-deep));
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'DM Sans', sans-serif;
    width: 100%;
}

.jgtk-coupon-card .jgtk-coupon-apply-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(42, 59, 112, 0.25);
}

.jgtk-coupon-card .jgtk-coupon-apply-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.jgtk-coupon-card.jgtk-featured {
    border-color: var(--jgtk-orange);
    background: linear-gradient(135deg, #fef9e7, #fdf6e3);
}

.jgtk-coupon-card.jgtk-featured::after {
    content: '⭐ POPULAR';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--jgtk-orange-deep);
    background: rgba(232, 153, 81, 0.12);
    padding: 2px 12px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.jgtk-coupon-card.jgtk-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

.jgtk-confetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.jgtk-toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--jgtk-navy-deep);
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-weight: 600;
    font-size: 14px;
    z-index: 99998;
    opacity: 0;
    transition: all 0.6s var(--jgtk-spring);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'DM Sans', sans-serif;
    max-width: calc(100vw - 40px);
    text-align: center;
}

.jgtk-toast-notification.jgtk-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.jgtk-night-stats-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 14px 0 4px;
    padding: 12px 16px;
    background: var(--jgtk-off-white);
    border-radius: var(--jgtk-radius);
    border: 1px solid var(--jgtk-border);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--jgtk-ink-soft);
}

.jgtk-night-stats-mini span strong {
    color: var(--jgtk-ink);
    font-weight: 600;
}

.jgtk-night-stats-mini .jgtk-stat-value {
    font-weight: 700;
    color: var(--jgtk-navy);
    margin-left: 4px;
}

.jgtk-hidden {
    display: none !important;
}

.jgtk-flex-center {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 700px) {
    .jgtk-page {
        --jgtk-page-pad: 16px;
    }

    .jgtk-invoice-header {
        padding: 16px 20px;
    }

    .jgtk-invoice-header h1 {
        font-size: 21px;
    }

    .jgtk-section-header {
        padding: 16px 20px 12px;
    }

    .jgtk-section-body {
        padding: 18px 20px 22px;
    }

    .jgtk-bill-row {
        padding: 8px 0;
    }

    .jgtk-bill-row .jgtk-item-left .jgtk-item-name {
        font-size: 14px;
    }

    .jgtk-totals-box {
        padding: 15px 16px 14px;
    }

    .jgtk-total-line.jgtk-grand {
        font-size: 16px;
    }

    .jgtk-total-line.jgtk-grand .jgtk-value {
        font-size: 20px;
    }

    .jgtk-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .jgtk-date-group {
        justify-content: center;
    }

    .jgtk-date-item input[type="date"] {
        width: 105px;
        font-size: 12px;
    }

    .jgtk-btn-book {
        justify-content: center;
        padding: 13px 20px;
        font-size: 14px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .jgtk-section-card {
        border-radius: 16px;
    }

    .jgtk-invoice-header {
        border-radius: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .jgtk-section-body {
        padding: 14px 16px 18px;
    }

    .jgtk-bill-row .jgtk-item-left {
        gap: 8px;
        min-width: 130px;
    }

    .jgtk-bill-row .jgtk-item-left .jgtk-qty-badge {
        font-size: 12px;
        padding: 2px 10px;
        min-width: 24px;
    }

    .jgtk-bill-row .jgtk-item-right {
        font-size: 14px;
        min-width: 65px;
    }

    .jgtk-total-line {
        font-size: 13px;
    }

    .jgtk-total-line.jgtk-grand .jgtk-value {
        font-size: 18px;
    }

    .jgtk-date-item {
        padding: 5px 12px 5px 10px;
        font-size: 12px;
    }

    .jgtk-date-item input[type="date"] {
        width: 90px;
        font-size: 11px;
    }

    .jgtk-coupon-trigger {
        font-size: 12px;
        padding: 5px 14px;
    }

    .jgtk-section-header .jgtk-title-wrap h2 {
        font-size: 18px;
    }
}

/* ============================================================
   PERFECT NAVBAR SCROLL & SLIDE FIX (NO BOUNCE, NO GROWING)
   ============================================================ */

/* 1. Base State (Hero Pill): Top par absolute rahega */
.jgn-nav {
    position: absolute !important;
    top: 0;
    transform: translateY(0);
    transition: padding 0.3s ease, background 0.3s ease !important;
}

.jgn-nav .jgn-inner {
    transition: all 0.3s ease !important;
    /* Sirf chote wale ke liye transition */
}

/* 2. Hidden State: Gayab hote hi INSTANTLY bada ho jayega (No animation) */
.jgn-nav.jgn-hide-up {
    position: fixed !important;
    top: -150px !important;
    /* Screen ke upar chupa diya */
    transform: translateY(0) !important;
    animation: none !important;
    transition: none !important;
    /* Transition kill kar diya taaki achanak bada ho jaye */
}

.jgn-nav.jgn-hide-up .jgn-inner {
    transition: none !important;
    /* Bada hone ki animation rok di */
}

/* 3. Solid State: Smoothly niche aayega aur bina bounce kiye ruk jayega */
.jgn-nav.jgn-solid {
    position: fixed !important;
    top: 0 !important;
    transform: translateY(0) !important;
    /* 'ease-out' ka use kiya hai taaki bounce (uchalne) wali problem na aaye */
    animation: navSlideDown 0.35s ease-out forwards !important;
    transition: none !important;
}

@keyframes navSlideDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

/* Dono states (Hidden aur Solid) mein element pehle se hi Full Width rahega */
.jgn-nav.jgn-hide-up .jgn-inner,
.jgn-nav.jgn-solid .jgn-inner {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 0 20px 20px !important;
    padding: 10px 24px !important;
    background: rgba(255, 255, 255, .9) !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08) !important;
    /* Yaha sir color/border transition allow kiya hai, width ki nahi */
    transition: background 0.3s ease, border-color 0.3s ease !important;
}

/* Chote wale logo aur button instantly gayab ho jayenge */
.jgn-nav.jgn-hide-up .jgn-logo-outer,
.jgn-nav.jgn-hide-up .jgn-cta-outer,
.jgn-nav.jgn-solid .jgn-logo-outer,
.jgn-nav.jgn-solid .jgn-cta-outer {
    display: none !important;
}

/* Bade wale logo aur button instantly aa jayenge */
.jgn-nav.jgn-hide-up .jgn-logo-inner,
.jgn-nav.jgn-solid .jgn-logo-inner {
    display: flex !important;
    padding-left: 6px !important;
    max-width: 200px !important;
    opacity: 1 !important;
}

.jgn-nav.jgn-hide-up .jgn-cta-inner,
.jgn-nav.jgn-solid .jgn-cta-inner {
    display: inline-flex !important;
    max-width: 200px !important;
    opacity: 1 !important;
    padding: 10px 20px !important;
}

/* Colors set for Full-Width version */
.jgn-nav.jgn-hide-up .jgn-links>li>a,
.jgn-nav.jgn-solid .jgn-links>li>a {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

.jgn-nav.jgn-hide-up .jgn-burger,
.jgn-nav.jgn-solid .jgn-burger {
    border-color: rgba(0, 0, 0, .12) !important;
    background: rgba(0, 0, 0, .04) !important;
}

.jgn-nav.jgn-hide-up .jgn-burger span,
.jgn-nav.jgn-solid .jgn-burger span {
    background: #1a1a1a !important;
}

/* Mobile Devices Hide CTA */
@media (max-width: 639px) {

    .jgn-cta-outer,
    .jgn-cta-inner {
        display: none !important;
    }
}

/* ============================================================
   MOBILE RESPONSIVE HERO PILL FIX (LOGO & BURGER INSIDE)
   ============================================================ */
@media (max-width: 1023px) {

    /* 1. Screen ke edges se margin/padding set karna */
    .jgn-nav:not(.jgn-solid):not(.jgn-hide-up) {
        width: 100% !important;
        padding: 16px 20px !important;
    }

    /* 2. Outer Logo aur CTA ko mobile par poori tarah hide karna */
    .jgn-nav .jgn-logo-outer,
    .jgn-nav .jgn-cta-outer,
    .jgn-nav .jgn-cta-inner {
        display: none !important;
    }

    /* 3. Box (Pill) ke andar wale Logo ko show karna */
    .jgn-nav .jgn-logo-inner {
        display: flex !important;
        opacity: 1 !important;
        max-width: 200px !important;
        padding-left: 4px !important;
        align-items: center !important;
    }

    /* Mobile ke liye logo ka size thoda adjust karna */
    .jgn-nav .jgn-logo-inner img {
        height: 36px !important;
    }

    /* 4. Pill Box ko full width banake Logo aur Burger ko dur-dur (space-between) karna */
    .jgn-nav:not(.jgn-solid):not(.jgn-hide-up) .jgn-inner {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        padding: 8px 16px !important;
        border-radius: 50px !important;
    }

    /* Burger icon ko right side me perfect align karna */
    .jgn-nav .jgn-burger {
        margin-left: 0 !important;
    }
}

/* ============================================================
   MOBILE: HIDE BOOK NOW & PERFECT LEFT-RIGHT ALIGNMENT
   ============================================================ */
@media (max-width: 1023px) {

    /* 1. Book Now button ko har jagah se ZIDDI tarike se hide karo */
    .jgn-nav .jgn-cta,
    .jgn-cta-outer,
    .jgn-cta-inner {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }

    /* 2. Main Navbar aur Inner Pill ko poori width do */
    .jgn-nav {
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        justify-content: center !important;
    }

    .jgn-nav .jgn-inner {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        /* Items ko left-right dhakelta hai */
        align-items: center !important;
        padding: 8px 16px !important;
    }

    /* 3. Logo ko exactly Left aur Hamburger ko Right mein lock karo */
    .jgn-nav .jgn-logo-inner {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        max-width: none !important;
    }

    .jgn-nav .jgn-burger {
        display: flex !important;
        margin: 0 !important;
        padding: 0 4px !important;
    }

    /* 4. Baaki sab kuch (Outer logo, Links) clean up karo */
    .jgn-nav .jgn-links,
    .jgn-nav .jgn-logo-outer {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}



/* ============================================================
   MOBILE & TABLET: MOVE HERO TEXT ONLY (BUTTONS STAY AT BOTTOM)
   ============================================================ */
@media (max-width: 1023px) {

    /* Sirf 'Escape to Joygaon' text ko upar shift karega */
    .jgw-hero-top {
        transform: translateY(-10vh) !important;
    }
}

@media (max-width: 768px) {

    /* Mobile screen par text ko thoda aur upar karega */
    .jgw-hero-top {
        transform: translateY(-15vh) !important;
    }
}

/* ============================================================
   MOBILE: PICNIC SECTION FIXES (HIDE OVERLAY & THUMBNAIL SLIDER)
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Image ke upar ka text (overlay) mobile par completely hide karna */
    .pf-overlay {
        display: none !important;
    }

    /* 2. Thumbnails ko ek horizontal scrollable slider banana */
    .pf-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Cards ko ek hi line mein rakhne ke liye */
        justify-content: flex-start !important;
        overflow-x: auto !important;
        /* Horizontal scroll enable karna */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /* Mobile par ekdum smooth swiping ke liye */
        gap: 12px !important;
        padding-bottom: 10px !important;
        /* Niche thodi space taaki cut na ho */
    }

    /* Scrollbar ko hide karna taaki UI clean dikhe */
    .pf-thumbs::-webkit-scrollbar {
        display: none !important;
    }

    /* Har thumbnail card ki width fix rakhna taaki wo shrink na ho */
    .pf-thumb-card {
        flex: 0 0 auto !important;
        /* Shrink hone se rokna */
        width: 105px !important;
        /* Card ka perfect mobile size */
    }
}

/* ============================================================
   JOYGAON — VIDEO + L-SHAPE IMAGE SLIDER GALLERY (jgvl- namespace)
   Add this whole block to style.css (or link as a separate file
   after style.css). All selectors are prefixed jgvl- so nothing
   collides with existing rules.
   ============================================================ */

.jgvl-gallery-bg,
.jgvl-gallery-bg * {
  box-sizing: border-box;
}

/* Same page background feel as the rest of the site: solid #fff
   + faint pinstripe grid + soft radial glows */
.jgvl-gallery-bg {
  position: relative;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(90deg, rgba(53, 82, 31, .05) 0, rgba(53, 82, 31, .05) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(53, 82, 31, .03) 0, rgba(53, 82, 31, .03) 2px, transparent 2px, transparent 7px);
  padding: 90px 24px 100px;
  overflow: hidden;
}

.jgvl-bg-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .03;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

.jgvl-bg-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(142, 202, 60, .08), transparent 45%),
    radial-gradient(circle at 92% 88%, rgba(232, 153, 81, .08), transparent 45%);
}

.jgvl-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.jgvl-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 46px;
}

.jgvl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3D7A1F;
  background: rgba(142, 202, 60, .12);
  border: 1px solid rgba(142, 202, 60, .28);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.jgvl-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.2;
  color: #1F2E15;
}

.jgvl-title span {
  color: #C97A0F;
  font-style: italic;
}

.jgvl-subtitle {
  margin-top: 12px;
  font-size: .98rem;
  line-height: 1.7;
  color: #6B6A5C;
}

/* ---------- Stage: video (70/70) + L-shape slider ---------- */
.jgvl-stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 62vw, 640px);
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 70% 30%;
  gap: 10px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

/* VIDEO occupies the top-left cell only — rounded on all 4
   corners, framed with a solid white border like a photo card */
.jgvl-video-box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 5px solid #fff;
  box-shadow: 0 24px 54px -16px rgba(31, 46, 21, .38);
}

.jgvl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jgvl-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 36, 15, .05) 0%, rgba(23, 36, 15, .1) 55%, rgba(23, 36, 15, .45) 100%);
  pointer-events: none;
}

.jgvl-video-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 8px 16px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.jgvl-video-badge i {
  color: #B5E18B;
  font-size: 13px;
}

/* RIGHT video box — sits ONLY in the top-right grid cell
   (30% width x 70% height). Hosts a second looping video,
   framed the same way as the main video and bottom train. */
.jgvl-slider-right {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  position: relative;
  overflow: hidden;
  background: #17240f;
  border-radius: 24px;
  border: 5px solid #fff;
  box-shadow: 0 24px 54px -16px rgba(31, 46, 21, .38);
}

.jgvl-video-side {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BOTTOM train — horizontal strip, sits ONLY in the bottom row,
   full width (100% width x 30% height). Square photos scroll
   leftward continuously, continuing the same train past the
   corner, and loop seamlessly. Together the two strips trace
   the inverted-L footprint around the video. */
.jgvl-slider-bottom {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 8px;
  border-radius: 24px;
  border: 5px solid #fff;
  box-shadow: 0 24px 54px -16px rgba(31, 46, 21, .38);
}

/* --- horizontal track (bottom strip): scrolls LEFT, loops at 50% --- */
.jgvl-track-h {
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 100%;
  width: max-content;
  animation: jgvlTrainLeft 34s linear infinite;
  will-change: transform;
}

@keyframes jgvlTrainLeft {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* pause the bottom train on hover, like the rest of the site's marquees */
.jgvl-slider-bottom:hover .jgvl-track-h {
  animation-play-state: paused;
}

/* square photo "coaches" */
.jgvl-sq {
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(31, 46, 21, .18);
  border: 1px solid rgba(31, 46, 21, .08);
}

/* bottom/horizontal strip: full track height, square via aspect-ratio */
.jgvl-track-h .jgvl-sq {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
}

/* thin seam lines between the video and the two train strips */
.jgvl-l-seam-v {
  position: absolute;
  top: 0;
  left: 70%;
  width: 2px;
  height: 70%;
  background: rgba(255, 255, 255, .5);
  z-index: 3;
  pointer-events: none;
}

.jgvl-l-seam-h {
  position: absolute;
  left: 0;
  top: 70%;
  height: 2px;
  width: 70%;
  background: rgba(255, 255, 255, .5);
  z-index: 3;
  pointer-events: none;
}

/* ---------- CTA ---------- */
.jgvl-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.jgvl-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #E89951, #F0AD70);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  padding: 15px 34px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(232, 153, 81, .35);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

.jgvl-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(232, 153, 81, .45);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .jgvl-gallery-bg {
    padding: 70px 18px 80px;
  }

  .jgvl-stage {
    height: clamp(420px, 130vw, 620px);
    grid-template-columns: 62% 38%;
    grid-template-rows: 62% 38%;
    border-radius: 22px;
  }

  .jgvl-l-seam-v {
    left: 62%;
    height: 62%;
  }

  .jgvl-l-seam-h {
    top: 62%;
    width: 62%;
  }
}

@media (max-width: 560px) {
  .jgvl-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 55% 45%;
    height: auto;
    aspect-ratio: 3/4;
    border-radius: 18px;
  }

  /* On very small screens: stack — video full width on top,
     the two slider boxes sit side-by-side below it (L collapses
     into a simple 2-column row so each stays properly sized) */
  .jgvl-video-box {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .jgvl-slider-right {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .jgvl-slider-bottom {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .jgvl-l-seam-v,
  .jgvl-l-seam-h {
    display: none;
  }

  .jgvl-video-badge {
    font-size: 11px;
    padding: 7px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jgvl-track-h {
    animation: none !important;
  }
}

/* ---------- clickable train photos ---------- */
.jgvl-sq {
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.jgvl-sq:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 26px rgba(31, 46, 21, .3);
}

/* ---------- fullscreen lightbox ---------- */
.jgvl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 20, 10, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .3s ease;
}

.jgvl-lightbox.jgvl-lightbox-open {
  display: flex;
  opacity: 1;
}

.jgvl-lightbox-frame {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  transform: scale(.92);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  border: 5px solid #fff;
  background: #fff;
}

.jgvl-lightbox.jgvl-lightbox-open .jgvl-lightbox-frame {
  transform: scale(1);
}

.jgvl-lightbox-frame img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.jgvl-lightbox-close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.jgvl-lightbox-close:hover {
  background: rgba(255, 255, 255, .24);
  transform: rotate(90deg);
}

@media (max-width: 560px) {
  .jgvl-lightbox-close {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
}
.jgvl-clickable {
  cursor: pointer;
}

.jgvl-video,
.jgvl-video-side {
  transition: transform .3s ease;
}

.jgvl-clickable:hover .jgvl-video,
.jgvl-clickable:hover .jgvl-video-side {
  transform: scale(1.02);
}

.jgvl-lightbox-frame video {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.jg-contact2-char-right {
  position: absolute;
  top: 300px;
  right: 0px;
  width: 300px;
  z-index: 6;
  pointer-events: none;
}

.jg-contact2-char-right img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .3));
}

@media (max-width: 1024px) {
  .jg-contact2-char-right {
    width: 240px;
    top: 400px;
    right: -40px;
  }
}

@media (max-width: 900px) {
  .jg-contact2-char-right {
    display: none;
  }
}   

.jg-ts-sidebar {
  position: relative; /* required so the absolute child positions relative to this box */
}

.jg-ts-sidebar-char {
  position: absolute;
  top: -140px;
  right: 50px;
  width: 200px;
  z-index: 1;
  pointer-events: none;
}

.jg-ts-sidebar-char img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .3));
}

@media (max-width: 1024px) {
  .jg-ts-sidebar-char {
    width: 150px;
    top: -104px;
    right: 58px;
  }
}

@media (max-width: 768px) {
  .jg-ts-sidebar-char {
    width: 180px;
    top: -130px;
    right: 6px;
  }
}

@media (max-width: 480px) {
  .jg-ts-sidebar-char {
    width: 100px;
    top: -70px;
    right: -10px;
  }
}

.jg-contact2-top-marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  z-index: 4;
  /* overflow: hidden; */
  pointer-events: none;

    overflow: visible !important;
}

.jg-contact2-marquee-img {
  position: absolute;
  top: -4%;
  left: 100%;               /* starts just off-screen right */
  height: 100%;
  width: auto;
  object-fit: contain;
  transform: translate(0, -100%);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
  animation: jgContact2Cycle 16s linear infinite;
  will-change: transform;
}

/* Travel: right → fully off-screen left, then pause 2s, then jump back to start */
@keyframes jgContact2Cycle {
  0% {
    left: 100%;
    transform: translate(0, -50%);
  }
  65% {
    left: -30%;               /* fully exits left side */
    transform: translate(0, -50%);
  }
  65.01%, 99.99% {
    left: -30%;                /* holds off-screen during the 2s pause */
    transform: translate(0, -50%);
  }
  100% {
    left: 100%;
    transform: translate(0, -50%);
  }
}

@media (max-width: 900px) {
  .jg-contact2-top-marquee {
    height: 90px;
  }
}

@media (max-width: 600px) {
  .jg-contact2-top-marquee {
    height: 70px;
  }
}
.jg-contact2 {
  position: relative;
  display: flex;
  min-height: 640px;
  isolation: isolate;     /* NEW: forces a clean stacking context for this section */
}

.jg-contact2-grid {
  position: relative;
  z-index: 1;             /* NEW: explicit, lower than marquee */
  flex: 1;
  display: grid;
  grid-template-columns: 32% 1fr;
  min-height: 640px;
}

.jg-contact2-top-marquee {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 180px;
  z-index: 999;           /* bumped up, well above grid's z-index:1 */
  overflow: visible;
  pointer-events: none;
}

@media(max-width:900px) {
    .jg-contact2-grid {
        grid-template-columns: 1fr !important;
    }

    .jg-contact2-info {
        padding: 50px 30px 30px 60px;
    }

    .jg-contact2-form-wrap {
        padding: 50px 30px;
    }

    .jg-contact2-char {
        display: none;
    }

    .jg-contact2-vertical-label {
        display: none;
    }
}

@media(max-width:600px) {
    .jg-contact2-form {
        grid-template-columns: 1fr;
    }

    .jg-contact2-form .form-group {
        grid-column: 1/-1 !important;
    }

    .jg-contact2-title {
        max-width: 100%;
    }
}

/* ============================================================
   JG-ARTCL RELATED-ARTICLES SWIPER — sizing & responsive fixes
   ============================================================ */
.jgArtclSwiper {
    width: 100%;
    overflow: hidden;
    padding-bottom: 6px; /* room for pagination dots below cards */
}

.jgArtclSwiper .swiper-wrapper {
    align-items: stretch; /* equal-height cards in a row */
}

.jgArtclSwiper .swiper-slide {
    height: auto;
    display: flex;
}

.jg-related-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.jg-related-card .aspect-\[4\/3\] {
    flex-shrink: 0;
}

.jg-related-card > div:last-child {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.jg-related-card > div:last-child p {
    flex: 1;
}

/* Nav arrows: hide on small screens (finger-swipe is enough there) */
.jg-artcl-swiper-btn-prev,
.jg-artcl-swiper-btn-next {
    border-radius: 50%;
}

.jg-artcl-swiper-btn-prev.swiper-button-disabled,
.jg-artcl-swiper-btn-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 767px) {
    .jg-artcl-swiper-btn-prev,
    .jg-artcl-swiper-btn-next {
        display: none !important;
    }
}

/* Pagination dots spacing */
.jgArtclSwiper .swiper-pagination {
    position: relative;
    margin-top: 20px;
}

.jgArtclSwiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
}

/* Header row: stack heading above arrows on mobile */
@media (max-width: 640px) {
    .jg-artcl-bg-wrap .flex.flex-col.md\:flex-row {
        align-items: flex-start;
    }
}