.hero-showcase { position: relative; isolation: isolate; display: block; background: #14241e; color: #fff; overflow: hidden; }
.hero-showcase .hero-backdrop { position: absolute; inset: 0; z-index: -2; }
.hero-showcase .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 1.1s ease, visibility 1.1s ease; }
.hero-showcase::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(5,21,17,.94),rgba(5,21,17,.72) 48%,rgba(5,21,17,.35)),linear-gradient(0deg,rgba(5,21,17,.6),transparent 60%); }
.hero-showcase .hero-content { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); align-items: center; gap: clamp(28px,5vw,80px); min-height: 500px; padding-top: 72px; padding-bottom: 72px; }
.hero-kicker { display: flex; align-items: center; gap: 10px; color: #f3dda0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; }
.hero-kicker > span { width: 7px; height: 7px; background: #f3dda0; border-radius: 50%; box-shadow: 0 0 0 5px rgba(243,221,160,.12); flex-shrink: 0; }
.hero-copy h1 { font-family: Georgia,serif; font-size: clamp(38px,4.5vw,64px); line-height: 1.1; font-weight: 500; letter-spacing: -.035em; margin: 0 0 24px; }
.hero-copy h1 > span { color: #f3dda0; }
.hero-description { color: #e1e7e3; font-size: 16px; line-height: 1.85; max-width: 550px; }
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.hero-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 15px 22px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s; }
.hero-button-primary { background: #9b1c53; color: #fff; }
.hero-button-primary:hover { background: #7f1644; }
.hero-button-secondary { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.hero-button-secondary:hover { background: rgba(255,255,255,.16); }
.hero-support { color: #e1e7e3; font-size: 13px; text-underline-offset: 4px; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 12px 20px; border-top: 1px solid rgba(255,255,255,.18); margin-top: 34px; padding-top: 23px; font-size: 11px; color: #dce5df; }
.hero-assurances i { color: #f3dda0; margin-right: 5px; }
.hero-verification { background: rgba(255,255,255,.94); color: #15291f; border: 1px solid rgba(255,255,255,.6); border-radius: 20px; padding: 30px; box-shadow: 0 24px 70px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.hero-card-label { color: #8a3156; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.hero-verification h2 { font-family: Georgia,serif; font-weight: 500; font-size: 32px; line-height: 1.15; margin: 16px 0; }
.hero-verification p { color: #526159; font-size: 13px; line-height: 1.8; }
.hero-verify-form { display: grid; gap: 10px; margin-top: 22px; }
.hero-verify-form label { font-size: 12px; font-weight: 700; }
.hero-verify-form input { width: 100%; min-width: 0; padding: 14px; background: #fff; border: 1px solid #d1dbd4; border-radius: 8px; color: #15291f; font: inherit; font-size: 14px; }
.hero-verify-form button { display: flex; justify-content: space-between; align-items: center; background: #8e1b4e; color: #fff; border: 0; border-radius: 8px; padding: 15px 17px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hero-verify-form button:hover { background: #70153d; }
.hero-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid #d9e0db; margin-top: 24px; padding-top: 20px; color: #65736b; font-size: 11px; }
.hero-card-stats strong { display: block; color: #203c2b; font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.hero-slider-controls { display: flex; justify-content: space-between; align-items: center; padding-bottom: 26px; gap: 20px; }
.hero-slider-controls[hidden] { display: none; }
.hero-slide-dots,.hero-slide-navigation { display: flex; align-items: center; gap: 10px; }
.hero-slide-dots button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.hero-slide-dots button::after { content: ''; width: 6px; height: 6px; background: rgba(255,255,255,.45); border-radius: 50%; }
.hero-slide-dots button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #f3dda0; }
.hero-slide-dots button[aria-pressed="true"]::after { background: #f3dda0; }
.hero-slide-navigation { color: #e1e7e3; font-size: 11px; letter-spacing: .15em; }
.hero-slide-navigation > span { margin-right: 10px; }
.hero-slide-navigation button { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 18px; cursor: pointer; }
.hero-showcase :is(a,button,input):focus-visible { outline: 3px solid #d6aa25; outline-offset: 4px; }
@media(max-width: 800px) { .hero-showcase .hero-content { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; padding-bottom: 40px; min-height: 0; } .hero-verification { max-width: 500px; width: 100%; } .hero-showcase::before { background: linear-gradient(90deg,rgba(5,21,17,.93),rgba(5,21,17,.7)); } }
@media(max-width: 480px) { .hero-kicker { font-size: 9px; letter-spacing: .09em; } .hero-verification { padding: 24px; border-radius: 16px; } .hero-copy h1 { font-size: 38px; } .hero-description { font-size: 14px; } .hero-support { width: 100%; margin-top: 6px; } .hero-button { padding: 14px 18px; } }
@media(prefers-reduced-motion: reduce) { .hero-showcase .hero-slide { transition: none; } }

 /* =========================
           MAIN SESSION BAR
        ========================== */
        .session-wrapper {
            display: flex;
            align-items: stretch;
            width: 100%;
            background: #ffffff;
            border: 1px solid #e3e8ef;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
        }

        /* =========================
           FIXED LEFT BOX
        ========================== */
        .current-session {
            width: 190px;
            min-width: 190px;
            position: relative;
            z-index: 10;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 18px 20px;

            background: #061f42;
            color: #ffffff;

            font-size: 16px;
            font-weight: 700;
            text-align: center;
            letter-spacing: 0.2px;
        }

        /* Small arrow */
        .current-session::after {
            content: "";
            position: absolute;
            right: -12px;
            top: 50%;
            transform: translateY(-50%);

            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 12px solid #061f42;

            z-index: 11;
        }

        /* =========================
           RIGHT SLIDER AREA
        ========================== */
        .session-slider {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            position: relative;

            background: #ffffff;
            padding: 10px 0 10px 22px;
        }

        /* =========================
           SLIDING TRACK
        ========================== */
        .session-track {
            display: flex;
            align-items: stretch;
            gap: 12px;

            width: max-content;

            animation: sessionScroll 20s linear infinite;
            will-change: transform;
        }

        /* Pause on mouse hover */
        .session-slider:hover .session-track {
            animation-play-state: paused;
        }

        /* JS adds this on touch */
        .session-slider.paused .session-track {
            animation-play-state: paused;
        }

        /* =========================
           CARDS
        ========================== */
        .session-card {
            width: 250px;
            min-width: 250px;

            display: flex;
            align-items: center;

            padding: 14px 16px;

            background: #ffffff;
            border: 1px solid #e3e8ef;
            border-radius: 8px;

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
        }

        .session-card:hover {
            transform: translateY(-2px);
            border-color: #b9c8da;
            box-shadow: 0 6px 18px rgba(6, 31, 66, 0.10);
        }

        .session-number {
            width: 38px;
            height: 38px;
            min-width: 38px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin-right: 12px;

            border-radius: 50%;

            background: #eef3f9;
            color: #061f42;

            font-size: 14px;
            font-weight: 800;
        }

        .session-content {
            min-width: 0;
        }

        .session-title {
            margin: 0 0 4px;

            color: #061f42;

            font-size: 15px;
            font-weight: 700;

            white-space: nowrap;
        }

        .session-text {
            margin: 0;

            color: #687385;

            font-size: 13px;

            white-space: nowrap;
        }

        /* =========================
           INFINITE LEFT SCROLL
        ========================== */
        @keyframes sessionScroll {
            from {
                transform: translateX(0);
            }

            to {
                /*
                 4 original cards:
                 4 × 250px = 1000px
                 4 gaps × 12px = 48px
                 Total = 1048px
                */
                transform: translateX(-1048px);
            }
        }

        /* =========================
           TABLET
        ========================== */
        @media (max-width: 991px) {

            .current-session {
                width: 165px;
                min-width: 165px;
                padding: 15px;
                font-size: 14px;
            }

            .session-card {
                width: 220px;
                min-width: 220px;
            }

            @keyframes sessionScroll {
                from {
                    transform: translateX(0);
                }

                to {
                    transform: translateX(-928px);
                }
            }
        }

        /* =========================
           MOBILE
        ========================== */
        @media (max-width: 576px) {

            .session-wrapper {
                border-radius: 7px;
            }

            .current-session {
                width: 115px;
                min-width: 115px;

                padding: 12px 8px;

                font-size: 12px;
                line-height: 1.3;
            }

            .current-session::after {
                right: -8px;

                border-top-width: 8px;
                border-bottom-width: 8px;
                border-left-width: 8px;
            }

            .session-slider {
                padding-left: 15px;
            }

            .session-track {
                gap: 8px;
            }

            .session-card {
                width: 190px;
                min-width: 190px;

                padding: 11px 12px;
            }

            .session-number {
                width: 32px;
                height: 32px;
                min-width: 32px;

                margin-right: 9px;

                font-size: 12px;
            }

            .session-title {
                font-size: 13px;
            }

            .session-text {
                font-size: 11px;
            }

            @keyframes sessionScroll {
                from {
                    transform: translateX(0);
                }

                to {
                    transform: translateX(-792px);
                }
            }
        }
/* Live sessions: populated from the admin ticket price chart. */
.session-shell { padding: 4px 6px; }
.session-wrapper {
    min-height: 92px;
    border: 1px solid rgba(155,28,83,.16);
    border-radius: 16px;
    background: #fffaf3;
    box-shadow: 0 12px 35px rgba(79,18,45,.1);
}
.current-session {
    width: 205px;
    min-width: 205px;
    gap: 12px;
    padding: 18px 22px;
    background: linear-gradient(135deg,#7d1744,#ad215e);
    text-align: left;
}
.current-session::after { border-left-color: #ad215e; }
.current-session > i {
    display: grid;
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid rgba(244,221,160,.4);
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    color: #f4dda0;
}
.current-session span { display: grid; gap: 2px; line-height: 1.18; }
.current-session small {
    color: #f4dda0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.session-slider {
    display: flex;
    align-items: center;
    padding: 10px 0 10px 24px;
    background: linear-gradient(90deg,#fffaf3,#fff);
}
.session-slider::after {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 52px;
    height: 100%;
    background: linear-gradient(90deg,transparent,#fff);
    content: '';
    pointer-events: none;
}
.session-track {
    gap: 0;
    animation: liveSessionScroll 28s linear infinite;
}
.session-group { display: flex; flex: none; gap: 12px; padding-right: 12px; }
.session-card {
    position: relative;
    width: 300px;
    min-width: 300px;
    gap: 12px;
    padding: 13px 14px;
    border-color: rgba(155,28,83,.13);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.session-card:hover {
    border-color: rgba(155,28,83,.42);
    box-shadow: 0 9px 24px rgba(155,28,83,.13);
}
.session-card:focus-visible { outline: 3px solid rgba(155,28,83,.32); outline-offset: 2px; }
.session-number {
    width: 39px;
    height: 39px;
    min-width: 39px;
    margin-right: 0;
    border-radius: 11px;
    background: #f9e8ef;
    color: #9b1c53;
}
.session-content { display: grid; flex: 1; gap: 2px; min-width: 0; }
.session-label {
    overflow: hidden;
    color: #90717f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.session-title {
    display: block;
    overflow: hidden;
    margin: 0;
    color: #381323;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.session-price { display: flex; align-items: baseline; gap: 5px; color: #9b1c53; white-space: nowrap; }
.session-price b { font-size: 14px; }
.session-price small { color: #8c7981; font-size: 9px; font-weight: 700; }
.session-arrow { color: #c79f37; font-size: 11px; transition: transform .2s ease; }
.session-card:hover .session-arrow { transform: translateX(3px); }
.session-empty { margin: 0 20px; color: #705763; font-size: 13px; font-weight: 700; }
@keyframes liveSessionScroll { to { transform: translate3d(-50%,0,0); } }
@media(max-width:991px) {
    .current-session { width: 180px; min-width: 180px; }
    .session-card { width: 275px; min-width: 275px; }
}
@media(max-width:576px) {
    .session-wrapper { min-height: 78px; border-radius: 12px; }
    .current-session { width: 128px; min-width: 128px; gap: 7px; padding: 11px 9px; }
    .current-session > i { flex-basis: 29px; width: 29px; height: 29px; border-radius: 8px; font-size: 11px; }
    .current-session span { font-size: 11px; }
    .current-session small { font-size: 7px; }
    .session-slider { padding: 8px 0 8px 14px; }
    .session-group { gap: 8px; padding-right: 8px; }
    .session-card { width: 238px; min-width: 238px; gap: 9px; padding: 10px; }
    .session-title { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) { .session-track { animation-duration: 55s; } }

      .lotis{
    padding:20px 0;
    color:#880039;
    overflow:hidden;
}
.lotis h1{
    font-size:48px;
    font-weight:900;
    letter-spacing:4px;
    margin:0;
    text-shadow:4px 5px 2px #ddd;
}
.lotis .sub{
    font-size:20px;
    font-style:italic;
    margin:5px 0 25px;
}
.lotis p{
    max-width:750px;
    font-size:14px;
    line-height:1.55;
    font-weight:700;
}
.lotis img{
    width:100%;
    max-width:520px;
    display:block;
    margin:auto;
}

@media(max-width:767px){
    .lotis{padding:40px 18px}
    .lotis h1{font-size:34px}
    .lotis .sub{font-size:16px;margin-bottom:18px}
    .lotis p{font-size:16px;line-height:1.6}
    .lotis img{max-width:380px;margin-top:25px}
}
.welcome{
    min-height:0;padding:48px 3%;color:#fff;
    background:linear-gradient(#174c7080,#174c7080),url('../../image/bg-section-about.jpg') center/cover no-repeat;
}
.welcome > .container-fluid > .row{align-items:center}
.welcome h1{font-size:20px;line-height:1.35;margin-bottom:28px}
.welcome-text{border-left:2px solid #fff;padding:10px 0 10px 30px;font-size:14px;line-height:1.6;text-align:justify}
.read-btn{display:inline-block;margin:20px 0 0 12px;padding:15px 52px;border:2px solid #ffc107;color:#063d62;text-decoration:none}
.people{position:relative;min-height:470px}
.person{position:absolute;width:45%;text-align:center;font-weight:600}
.person img{width:120px;height:150px;object-fit:cover;border-radius:5px;margin-bottom:18px}
.person p{margin:0;font-size:14px}.person small{font-size:14px}
.p1{top:0;left:29%}.p2{top:245px;left:0}.p3{top:245px;right:0}

@media(max-width:767px){
    .welcome{padding:40px 20px;min-height:auto}
    .welcome h1{font-size:27px;margin-bottom:25px}
    .welcome-text{padding:5px 0 5px 20px;font-size:15px;text-align:left}
    .read-btn{margin:25px 0 35px;padding:12px 35px}
    .people{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:30px 15px}
    .person{position:static;width:100%}
    .person:first-child{grid-column:1/3}
    .person img{width:150px;height:170px}
    .person p{font-size:14px}.person small{font-size:12px}
}
.gallery{
    padding:10px 0;color:#fff;overflow:hidden;
    background: #9b1c53 url(../img/lotis-header-bg.png) center / cover;
}
.gallery .tag{color:#ffd21c;font-size:17px}
.gallery h2{font-size:52px;font-weight:800;margin:8px 0 30px}
.gallery-card{position:relative;overflow:hidden;border-radius:16px;background:#ffffff15;
    border:1px solid #ffffff25;box-shadow:0 20px 50px #0004}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gallery-card:hover img{transform:scale(1.05)}
.main-photo{height:430px}
.thumb{height:205px}
.gallery-card span{position:absolute;left:18px;bottom:15px;padding:7px 13px;
    background:#0009;border-radius:20px;font-size:13px;backdrop-filter:blur(8px)}
.view-btn{display:inline-block;margin-top:25px;padding:12px 35px;border-radius:30px;
    background:#ffd21c;color:#082f47;text-decoration:none;font-weight:600;transition:.3s}
.view-btn:hover{background:#fff;color:#082f47;transform:translateY(-2px)}

@media(max-width:767px){
    .gallery{padding:50px 15px}
    .gallery h2{font-size:36px}
    .main-photo{height:280px}
    .thumb{height:160px}
}