/* ==========================================================
   VELNORA OFFICIAL STYLESHEET
   VERSION 2.0
   PART 1 — GLOBAL + NAVIGATION + HERO + ABOUT
========================================================== */


/* ==========================================================
   01 — RESET
========================================================== */

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


/* ==========================================================
   02 — HTML / BODY
========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #000000;
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}


/* ==========================================================
   03 — GLOBAL ELEMENTS
========================================================== */

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

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

section {
    width: 100%;
    background: transparent;
}


/* ==========================================================
   04 — FIXED BACKGROUND WALLPAPER
========================================================== */

/*
   This stays fixed while the page scrolls.

   The ornaments are positioned on the LEFT and RIGHT
   sides only.

   They sit behind the entire website and NEVER move
   with the page content.
*/

.background-wallpaper {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: -10;
    overflow: hidden;
}


/* LEFT ORNAMENT */

.bg-left {
    position: absolute;
    top: 75%;
    left: -5px;
    width: 180px;
    transform: translateY(-50%);
    opacity: .18;
    pointer-events: none;
}


/* RIGHT ORNAMENT */

.bg-right {
    position: absolute;
    top: 25%;
    right: -5px;
    width: 180px;
    transform: translateY(-50%);
    opacity: .18;
    pointer-events: none;
}


/*
   Keeps all actual website content above
   the fixed background.
*/

.page-content {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   05 — BUTTONS
========================================================== */

.btn {
    display: inline-flex;

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

    padding: 15px 34px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #B78A2E
    );

    color: #ffffff;

    font-weight: 700;

    transition: 0.3s ease;

    cursor: pointer;
}

.btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(183, 138, 46, 0.35);
}


/* ==========================================================
   06 — NAVBAR
========================================================== */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 82px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 0 50px;

    background: rgba(5, 2, 13, 0.45);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    z-index: 9999;
}


/* ==========================================================
   07 — NAVBAR LOGO
========================================================== */

.logo {
    display: flex;

    align-items: center;

    flex-shrink: 0;
}


/*
   Your current HTML uses:

   <img class="mobile-logo">

   So we make the logo work on desktop as well.
*/

.logo img {
    width: 220px;
    height: auto;
}


/* Mobile logo starts hidden on desktop
   only if specifically required later. */


/* ==========================================================
   08 — NAVIGATION MENU
========================================================== */

.nav-menu {
    display: flex;

    align-items: center;
}


/* Navigation links */

.nav-menu a {
    display: block;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


/*
   Gold hover effect.
*/

.nav-menu a:hover {
    color: #B78A2E;
}


/* ==========================================================
   09 — NAVIGATION LIST
========================================================== */

.nav-menu ul {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;

    gap: 38px;
}

.nav-menu li {
    list-style: none;
}


/* ==========================================================
   10 — MOBILE MENU TOGGLE
========================================================== */

.menu-toggle {
    display: none;

    font-size: 28px;

    color: #ffffff;

    cursor: pointer;

    user-select: none;

    z-index: 10001;
}


/* ==========================================================
   11 — MOBILE HOME BUTTON
========================================================== */

.mobile-home {
    display: none;
}

.mobile-home svg {
    width: 28px;
    height: 28px;
}


/* ==========================================================
   12 — MOBILE MENU OVERLAY
========================================================== */

/*
   This creates the dark blurred background
   behind the mobile menu.
*/

.menu-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 9998;
}


/*
   Activated by main.js
*/

.menu-overlay.active {
    opacity: 1;

    visibility: visible;
}


/* ==========================================================
   13 — NAVIGATION ANIMATION
========================================================== */

.nav-menu li {
    opacity: 0;

    transform: translateY(-12px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/*
   When menu becomes active,
   links animate into position.
*/

.nav-menu.active li {
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================
   14 — HERO
========================================================== */

.hero {
    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;
}


/* Hero video */

.hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*
   We intentionally keep this transparent
   so your video/image isn't darkened by an
   unnecessary overlay.
*/

.hero-overlay {
    background: transparent;
}


/* ==========================================================
   15 — HERO CONTENT
========================================================== */

.hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    padding: 20px;
}


/* Main hero logo */

.hero-main-logo {
    width: 320px;

    margin-bottom: 30px;

    filter:
        drop-shadow(
            0 0 35px rgba(139, 92, 246, 0.7)
        );

    animation:
        floatLogo 4s ease-in-out infinite;
}


/* Hero title image */

.hero-title-image {
    width: 100%;

    max-width: 720px;

    margin-bottom: 20px;
}


/* Hero paragraph */

.hero-content p {
    color: #d1d5db;

    font-size: 1.3rem;

    margin-top: 10px;
}


/* ==========================================================
   16 — HERO CTA
========================================================== */

.hero-cta {
    text-align: center;

    padding: 25px 20px 15px;

    background: transparent;
}

.hero-cta p {
    font-size: 2rem;

    color: #ffffff;

    margin: 0;

    font-style: italic;
}


/* ==========================================================
   17 — ABOUT SECTION
========================================================== */

.about {
    max-width: 1000px;

    margin: 0 auto;

    padding: 25px 20px;

    text-align: center;
}


/* About heading */

.about h2 {
    font-size: 3rem;

    background:
        linear-gradient(
            180deg,
            #E8C86E,
            #B78A2E
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    margin-bottom: 12px;
}


/* About paragraph */

.about p {
    font-size: 1.15rem;

    color: #d1d5db;

    line-height: 2;

    margin-bottom: 18px;
}


/* ==========================================================
   18 — ABOUT STORY
========================================================== */

.about-story {
    max-width: 1400px;

    margin: 0 auto;

    padding: 50px 20px;
}


/* About story layout */

.about-story-content {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 60px;

    align-items: center;
}


/* About story heading */

.about-story-text h2 {
    font-size: 3rem;

    background:
        linear-gradient(
            180deg,
            #E8C86E,
            #B78A2E
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    margin-bottom: 30px;
}


/* About story paragraphs */

.about-story-text p {
    color: #d1d5db;

    font-size: 1.15rem;

    line-height: 2;

    margin-bottom: 20px;
}


/* ==========================================================
   19 — ABOUT STORY LOGO
========================================================== */

.about-story-logo {
    display: flex;

    justify-content: center;
    align-items: center;
}


/* Logo inside About Story */

.about-story-logo img {
    width: 100%;

    max-width: 340px;

    filter:
        drop-shadow(
            0 0 35px rgba(139, 92, 246, 0.45)
        );

    animation:
        floatLogo 4s ease-in-out infinite;
}


/* ==========================================================
   20 — MOBILE NAVIGATION
========================================================== */

@media (max-width: 768px) {

        /* ------------------------------------------------------
       BACKGROUND — KEEP BELOW MOBILE NAVBAR
    ------------------------------------------------------ */

    .background-wallpaper {
        inset: 62px 0 0 0;
    }
    /* ------------------------------------------------------
       MOBILE NAVBAR
    ------------------------------------------------------ */

.navbar {
    height: 62px;

    padding: 0 14px;

    display: grid;

    grid-template-columns:
        50px
        1fr
        50px;

    align-items: center;

    /* Keep background ornaments completely hidden behind navbar */
    background: rgba(5, 2, 13, 0.98);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    z-index: 9999;
}


    /* ------------------------------------------------------
       MOBILE LOGO
    ------------------------------------------------------ */

    .logo {
        justify-content: center;
    }

    .logo img {
        width: 34px;
        height: 34px;

        object-fit: contain;
    }


    /* ------------------------------------------------------
       MOBILE HOME ICON
    ------------------------------------------------------ */

    .mobile-home {
        display: flex;

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

        color: #ffffff;

        z-index: 10001;
    }


    /* ------------------------------------------------------
       MOBILE HAMBURGER
    ------------------------------------------------------ */

    .menu-toggle {
        display: block;

        justify-self: end;

        font-size: 28px;

        color: #ffffff;

        z-index: 10001;
    }


    /* ------------------------------------------------------
       MOBILE MENU PANEL
    ------------------------------------------------------ */

    .nav-menu {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;

        /*
           The menu stops around the Store section
           rather than covering the entire page.
        */

        height: 0;

        overflow: hidden;

        background:
            rgba(5, 2, 13, 0.55);

        backdrop-filter:
            blur(40px) saturate(180%);

        -webkit-backdrop-filter:
            blur(40px) saturate(180%);

        border-bottom:
            1px solid rgba(232, 200, 110, 0.15);

        opacity: 0;

        transition:
            height 0.45s ease,
            opacity 0.35s ease;

        z-index: 10000;

        display: flex;

        justify-content: flex-start;
        align-items: flex-start;
    }


    /* ------------------------------------------------------
       OPEN MENU
    ------------------------------------------------------ */

    .nav-menu.active {
        height: 420px;

        opacity: 1;
    }


    /* ------------------------------------------------------
       MOBILE MENU LIST
    ------------------------------------------------------ */

    .nav-menu ul {
        list-style: none;

        width: 100%;

        margin: 0;

        padding: 100px 0 25px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;
    }


    /* ------------------------------------------------------
       MOBILE MENU ITEMS
    ------------------------------------------------------ */

    .nav-menu li {
        width: 100%;

        list-style: none;
    }


    /* ------------------------------------------------------
       MOBILE MENU LINKS
    ------------------------------------------------------ */

    .nav-menu a {
        display: block;

        width: 100%;

        padding: 16px 36px;

        font-size: 1.3rem;

        font-weight: 700;

        letter-spacing: 0;

        color: #ffffff;

        transition:
            color 0.3s ease,
            padding-left 0.3s ease;
    }


    /* Gold hover/touch state */

    .nav-menu a:hover {
        color: #E8C86E;

        padding-left: 50px;
    }


    /* ------------------------------------------------------
       MOBILE ABOUT
    ------------------------------------------------------ */

    .about {
        padding:
            25px 20px;
    }

    .about h2 {
        font-size: 2.2rem;
    }


    /* ------------------------------------------------------
       MOBILE ABOUT STORY
    ------------------------------------------------------ */

    .about-story {
        padding:
            50px 20px;
    }

    .about-story-content {
        grid-template-columns: 1fr;

        gap: 40px;

        text-align: center;
    }

    .about-story-text h2 {
        font-size: 2.2rem;
    }


/* ------------------------------------------------------
   MOBILE HERO
------------------------------------------------------ */

.hero {
    height: 500px;
    margin-top: 62px;
}

.hero-main-logo {
    width: 260px;
}

.hero-content p {
    font-size: 1rem;
}

.hero-cta p {
    font-size: 1.5rem;
}
}


/* ==========================================================
   END OF PART 1
========================================================== */
/* ==========================================================
   VELNORA OFFICIAL STYLESHEET
   PART 2 — EVENTS + CARDS + GALLERY + BOOKING
========================================================== */


/* ==========================================================
   21 — GENERAL ARTIST GRID
========================================================== */

.artist-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 1fr)
        );

    gap: 35px;

    margin-top: 25px;
}


/* ==========================================================
   22 — HOME EVENTS HORIZONTAL SLIDER
========================================================== */

/*
   The Upcoming Events section on the HOME page
   uses a horizontal scrolling card layout.

   Desktop:
   Cards are wider.

   Mobile:
   Cards become smaller so the next card is
   partially visible, showing users that they
   can swipe horizontally.
*/

#homeEventsContainer {
    display: flex;

    gap: 24px;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    padding: 10px 0 20px;

    /*
       Hide scrollbar while keeping scrolling
       functional.
    */

    scrollbar-width: none;
}


/* Chrome / Edge / Safari scrollbar */

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


/* ==========================================================
   23 — HOME EVENT CARD SIZE
========================================================== */

#homeEventsContainer .event-card {
    /*
       Desktop card width.
    */

    flex: 0 0 380px;

    max-width: 380px;

    scroll-snap-align: start;
}


/* ==========================================================
   24 — EVENT CARD
========================================================== */

.event-card {
    position: relative;

    background:
        rgba(255, 255, 255, 0.05);

    border-radius: 22px;

    overflow: hidden;

    cursor: pointer;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* ==========================================================
   25 — EVENT CARD HOVER
========================================================== */

.event-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(183, 138, 46, 0.18);
}


/* ==========================================================
   26 — EVENT POSTER IMAGE
========================================================== */

.event-card img {
    width: 100%;

    height: auto;

    /*
       Keeps the poster proportions consistent.
    */

    aspect-ratio: 4 / 5;

    object-fit: cover;

    object-position: center;

    display: block;
}


/* ==========================================================
   27 — EVENT CARD INFORMATION
========================================================== */

.event-info {
    min-height: 95px;

    padding: 16px 18px;

    display: flex;

    flex-direction: column;

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

    text-align: center;
}


/* Event title */

.event-info h3 {
    font-size: 1rem;

    line-height: 1.35;

    font-weight: 700;

    margin: 0 0 8px;

    color: #ffffff;
}


/* Event date / secondary information */

.event-info p {
    font-size: 0.85rem;

    line-height: 1.5;

    font-weight: 500;

    color: #D4AF37;

    margin: 0;
}


/* ==========================================================
   28 — ARTIST CARDS
========================================================== */

.artist-card {
    background:
        rgba(255, 255, 255, 0.05);

    border-radius: 20px;

    overflow: hidden;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Artist card hover */

.artist-card:hover {
    transform: translateY(-8px);
}


/* Artist image */

.artist-card img {
    width: 100%;

    height: 320px;

    object-fit: cover;

    display: block;
}


/* Artist name */

.artist-card h3 {
    margin:
        22px 0 12px;

    text-align: center;
}


/* Artist description */

.artist-card p {
    padding:
        0 20px 25px;

    text-align: center;

    color: #d1d5db;
}


/* ==========================================================
   29 — GALLERY GRID
========================================================== */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 20px;

    margin-top: 60px;
}


/* ==========================================================
   30 — GALLERY IMAGE
========================================================== */

.gallery-grid img {
    width: 100%;

    height: 280px;

    object-fit: cover;

    border-radius: 20px;

    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* ==========================================================
   31 — GALLERY IMAGE HOVER
========================================================== */

.gallery-grid img:hover {
    transform: scale(1.03);

    box-shadow:
        0 20px 45px
        rgba(183, 138, 46, 0.22);
}


/* ==========================================================
   32 — BOOKING CTA
========================================================== */

.booking-cta {
    padding:
        60px 20px;

    margin-bottom: 0;

    text-align: center;

    /*
       Important:
       No background here.

       The fixed black wallpaper + ornaments
       should remain visible behind this section.
    */

    background: transparent;
}


/* ==========================================================
   33 — BOOKING CTA TITLE
========================================================== */

.booking-cta h2 {
    font-size: 3rem;

    margin-bottom: 20px;
}


/* ==========================================================
   34 — BOOKING CTA DESCRIPTION
========================================================== */

.booking-cta p {
    max-width: 700px;

    margin:
        0 auto 35px;

    color: #d1d5db;

    font-size: 1.15rem;

    line-height: 1.9;
}


/* ==========================================================
   35 — MOBILE EVENTS / CARDS
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------
       HOME EVENT SLIDER
    ------------------------------------------------------ */

    #homeEventsContainer {
        gap: 24px;

        padding:
            8px 12px 20px;
    }


    /* ------------------------------------------------------
       MOBILE EVENT CARD
    ------------------------------------------------------ */

    #homeEventsContainer .event-card {
        /*
           Small enough to show part of the next card.
        */

        flex:
            0 0 200px;

        max-width: 200px;

        scroll-snap-align: start;

        border-radius: 22px;

        overflow: hidden;

        margin: 0;
    }


    /* ------------------------------------------------------
       MOBILE EVENT POSTER
    ------------------------------------------------------ */

    #homeEventsContainer .event-card img {
        width: 100%;

        height: auto;

        aspect-ratio: 4 / 5;

        object-fit: cover;

        object-position: center;

        display: block;
    }


    /* ------------------------------------------------------
       MOBILE EVENT INFORMATION
    ------------------------------------------------------ */

    #homeEventsContainer .event-info {
        padding: 18px;
    }


    #homeEventsContainer .event-info h3 {
        font-size: 1.1rem;

        line-height: 1.35;

        margin-bottom: 10px;
    }


    #homeEventsContainer .event-info p {
        font-size: 0.85rem;
    }


    /* ------------------------------------------------------
       MOBILE ARTIST CARDS
    ------------------------------------------------------ */

    .artist-card img {
        height: 280px;
    }


    /* ------------------------------------------------------
       MOBILE GALLERY
    ------------------------------------------------------ */

    .gallery-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 40px;
    }


    .gallery-grid img {
        height: auto;

        aspect-ratio: 1 / 1;

        object-fit: cover;
    }


    /* ------------------------------------------------------
       MOBILE BOOKING CTA
    ------------------------------------------------------ */

    .booking-cta {
        padding:
            60px 20px;
    }


    .booking-cta h2 {
        font-size: 2.2rem;

        margin-bottom: 15px;
    }


    .booking-cta p {
        font-size: 1rem;

        line-height: 1.8;

        margin-bottom: 30px;
    }

}


/* ==========================================================
   36 — SMALL PHONES
========================================================== */

@media (max-width: 480px) {

    #homeEventsContainer {
        gap: 18px;

        padding-left: 8px;
        padding-right: 8px;
    }


    #homeEventsContainer .event-card {
        flex:
            0 0 200px;

        max-width: 200px;
    }


    #homeEventsContainer .event-info {
        padding: 15px;
    }


    #homeEventsContainer .event-info h3 {
        font-size: 1rem;
    }


    .gallery-grid {
        gap: 15px;
    }


    .booking-cta h2 {
        font-size: 1.9rem;
    }

}


/* ==========================================================
   END OF PART 2
========================================================== */
/* ==========================================================
   VELNORA OFFICIAL STYLESHEET
   PART 3 — BOOKING + FOOTER + POPUPS + LOADER + UTILITIES
========================================================== */


/* ==========================================================
   37 — BOOKING FORM
========================================================== */

.booking-form {
    width: 100%;

    max-width: 720px;

    margin:
        60px auto;

    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* ==========================================================
   38 — BOOKING INPUTS
========================================================== */

.booking-form input,
.booking-form textarea {
    width: 100%;

    padding:
        16px 20px;

    border: none;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;

    outline: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1rem;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* ==========================================================
   39 — BOOKING INPUT FOCUS
========================================================== */

.booking-form input:focus,
.booking-form textarea:focus {
    background:
        rgba(255, 255, 255, 0.11);

    box-shadow:
        0 0 0 1px
        rgba(212, 175, 55, 0.55);
}


/* ==========================================================
   40 — BOOKING TEXTAREA
========================================================== */

.booking-form textarea {
    resize: vertical;

    min-height: 180px;
}


/* ==========================================================
   41 — BOOKING PLACEHOLDERS
========================================================== */

.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: #9ca3af;

    opacity: 1;
}


/* ==========================================================
   42 — FOOTER
========================================================== */

.footer {
    width: 100%;

    background: transparent;

    padding:
        20px 20px 30px;

    text-align: center;

    /*
       No border here.

       We want the fixed black wallpaper and
       ornaments to continue visually behind
       the footer.
    */
}


/* ==========================================================
   43 — FOOTER LOGO AREA
========================================================== */

.footer-logo {
    display: flex;

    flex-direction: column;

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

    width: 100%;

    margin:
        0 auto 25px;
}


/* ==========================================================
   44 — FOOTER ROUND LOGO
========================================================== */

.footer-round-logo {
    width: 90px;

    height: 90px;

    object-fit: contain;

    margin-bottom: 18px;

    filter:
        drop-shadow(
            0 0 18px
            rgba(212, 175, 55, 0.25)
        );
}


/* ==========================================================
   45 — FOOTER WORDMARK
========================================================== */

.footer-wordmark {
    width: 260px;

    max-width: 80%;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 10px
            rgba(212, 175, 55, 0.15)
        )
        drop-shadow(
            0 0 25px
            rgba(212, 175, 55, 0.08)
        );
}


/* ==========================================================
   46 — FOOTER TEXT
========================================================== */

.footer p {
    color: #9ca3af;

    margin-bottom: 12px;
}


/* ==========================================================
   47 — FOOTER SOCIAL LINKS
========================================================== */

.footer-social {
    display: flex;

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

    gap: 12px;

    margin:
        20px 0 10px;
}


/* Individual social button */

.footer-social a {
    width: 50px;

    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* Social hover */

.footer-social a:hover {
    background: #B78A2E;

    color: #05020d;

    transform:
        translateY(-5px);
}


/* ==========================================================
   48 — FOOTER COPYRIGHT
========================================================== */

.footer-copy {
    margin-top: 50px;

    font-size: 0.9rem;

    color: #6b7280;
}


/* ==========================================================
   49 — LIGHTBOX
========================================================== */

/*
   Full-screen image viewer used by the
   gallery / event image system.
*/

.lightbox {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 0, 0, 0.92);

    display: flex;

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

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    z-index: 100000;
}


/* ==========================================================
   50 — ACTIVE LIGHTBOX
========================================================== */

.lightbox.active {
    opacity: 1;

    visibility: visible;
}


/* ==========================================================
   51 — LIGHTBOX IMAGE
========================================================== */

.lightbox img {
    max-width: 92%;

    max-height: 88%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 0 45px
        rgba(183, 138, 46, 0.30);
}


/* ==========================================================
   52 — LIGHTBOX CLOSE BUTTON
========================================================== */

/*
   Your current HTML uses:

   .close-lightbox

   So this is the class we style.
*/

.close-lightbox,
.lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    font-size: 40px;

    line-height: 1;

    cursor: pointer;

    color: #ffffff;

    z-index: 100001;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* Close hover */

.close-lightbox:hover,
.lightbox-close:hover {
    color: #B78A2E;

    transform:
        scale(1.08);
}


/* ==========================================================
   53 — LIGHTBOX NAVIGATION BUTTONS
========================================================== */

.lightbox-btn {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.15);

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 100001;
}


/* Previous button */

.lightbox-btn.prev {
    left: 25px;
}


/* Next button */

.lightbox-btn.next {
    right: 25px;
}


/* Button hover */

.lightbox-btn:hover {
    background: #B78A2E;

    color: #05020d;
}


/* ==========================================================
   54 — GALLERY POPUP
========================================================== */

.popup {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.85);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 99999;
}


/* ==========================================================
   55 — ACTIVE POPUP
========================================================== */

.popup.active {
    opacity: 1;

    visibility: visible;
}


/* ==========================================================
   56 — POPUP CONTENT
========================================================== */

.popup-content {
    width:
        min(95%, 1000px);

    max-height: 90vh;

    background:
        #111111;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.55);
}


/* ==========================================================
   57 — POPUP IMAGE
========================================================== */

.popup img {
    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;
}


/* ==========================================================
   58 — POPUP BODY
========================================================== */

.popup-body {
    padding: 30px;
}


/* ==========================================================
   59 — POPUP TITLE
========================================================== */

.popup-body h2 {
    color: #B78A2E;

    margin-bottom: 15px;
}


/* ==========================================================
   60 — LOADER
========================================================== */

.loader {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        #05020d;

    display: flex;

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

    z-index: 200000;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}


/* ==========================================================
   61 — HIDDEN LOADER
========================================================== */

.loader.hidden {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* ==========================================================
   62 — LOADER CIRCLE
========================================================== */

.loader-circle {
    width: 70px;

    height: 70px;

    border:
        5px solid
        rgba(255, 255, 255, 0.12);

    border-top-color:
        #E8C86E;

    border-radius: 50%;

    animation:
        spin 1s linear infinite;
}


/* ==========================================================
   63 — LOADER ANIMATION
========================================================== */

@keyframes spin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* ==========================================================
   64 — SECTION TITLES
========================================================== */

.section-title {
    text-align: center;

    font-size: 3rem;

    color: #B78A2E;

    margin-bottom: 20px;
}


/* ==========================================================
   65 — SECTION SUBTITLE
========================================================== */

.section-subtitle {
    max-width: 750px;

    margin:
        0 auto 60px;

    text-align: center;

    color: #d1d5db;

    line-height: 1.9;
}


/* ==========================================================
   66 — GENERAL CONTAINER
========================================================== */

.container {
    width:
        min(1200px, 90%);

    margin:
        0 auto;
}


/* ==========================================================
   67 — SPACING UTILITIES
========================================================== */

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-4 {
    margin-top: 40px;
}

.mt-5 {
    margin-top: 60px;
}


.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-3 {
    margin-bottom: 30px;
}

.mb-4 {
    margin-bottom: 40px;
}

.mb-5 {
    margin-bottom: 60px;
}


/* ==========================================================
   68 — MOBILE BOOKING FORM
========================================================== */

@media (max-width: 768px) {

    .booking-form {
        width: 100%;

        margin:
            40px auto;

        gap: 16px;
    }


    .booking-form input,
    .booking-form textarea {
        padding:
            15px 16px;

        font-size: 1rem;
    }


    .booking-form textarea {
        min-height: 160px;
    }


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .footer {
        padding:
            60px 20px 25px;
    }


    .footer-logo {
        margin:
            45px auto 25px;
    }


    .footer-round-logo {
        width: 90px;

        height: 90px;

        margin-bottom: 18px;
    }


    .footer-wordmark {
        width: 260px;

        max-width: 80%;
    }


    .footer-social {
        gap: 14px;
    }


    .footer-social a {
        width: 45px;

        height: 45px;
    }


    /* ------------------------------------------------------
       LIGHTBOX
    ------------------------------------------------------ */

    .lightbox {
        padding: 20px;
    }


    .lightbox img {
        max-width: 94%;

        max-height: 82%;
    }


    .close-lightbox,
    .lightbox-close {
        top: 20px;

        right: 20px;

        font-size: 36px;
    }


    .lightbox-btn {
        width: 45px;

        height: 45px;

        font-size: 22px;
    }


    .lightbox-btn.prev {
        left: 12px;
    }


    .lightbox-btn.next {
        right: 12px;
    }


    /* ------------------------------------------------------
       POPUP
    ------------------------------------------------------ */

    .popup {
        padding: 15px;
    }


    .popup-content {
        width: 95%;

        border-radius: 18px;
    }


    .popup-body {
        padding: 20px;
    }


    .popup-body h2 {
        margin-bottom: 12px;
    }


    /* ------------------------------------------------------
       SECTION TITLES
    ------------------------------------------------------ */

    .section-title {
        font-size: 2rem;

        margin-bottom: 15px;
    }


    .section-subtitle {
        font-size: 1rem;

        margin-bottom: 40px;

        line-height: 1.8;
    }

}


/* ==========================================================
   69 — SMALL PHONE POLISH
========================================================== */

@media (max-width: 480px) {

    .booking-form {
        margin:
            30px auto;
    }


    .footer {
        padding:
            50px 15px 25px;
    }


    .footer-round-logo {
        width: 80px;

        height: 80px;
    }


    .footer-wordmark {
        width: 230px;
    }


    .footer-copy {
        font-size: 0.8rem;

        margin-top: 40px;
    }


    .lightbox-btn {
        width: 40px;

        height: 40px;

        font-size: 20px;
    }


    .lightbox-btn.prev {
        left: 8px;
    }


    .lightbox-btn.next {
        right: 8px;
    }


    .section-title {
        font-size: 1.8rem;
    }

}


/* ==========================================================
   END OF PART 3
========================================================== */
/* ==========================================================
   VELNORA OFFICIAL STYLESHEET
   PART 4 — UTILITIES + FINAL POLISH + MEMORY POPUP
========================================================== */


/* ==========================================================
   70 — TEXT UTILITIES
========================================================== */

.text-center {
    text-align: center;
}

.text-white {
    color: #ffffff;
}

.text-muted {
    color: #d1d5db;
}


/* ==========================================================
   71 — FLEX UTILITIES
========================================================== */

.flex {
    display: flex;
}

.flex-center {
    display: flex;

    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;

    justify-content: space-between;
    align-items: center;
}


/* ==========================================================
   72 — GRID UTILITIES
========================================================== */

.grid-2 {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 40px;
}

.grid-3 {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 35px;
}


/* ==========================================================
   73 — GENERIC CARD
========================================================== */

.card {
    background:
        rgba(255, 255, 255, 0.05);

    border-radius: 20px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Generic card hover */

.card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(183, 138, 46, 0.15);
}


/* ==========================================================
   74 — CUSTOM SCROLLBAR
========================================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #05020d;
}

::-webkit-scrollbar-thumb {
    background: #B78A2E;

    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}


/* ==========================================================
   75 — TEXT SELECTION
========================================================== */

::selection {
    background: #B78A2E;

    color: #05020d;
}


/* ==========================================================
   76 — FADE UP ANIMATION
========================================================== */

.fade-up {
    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* Activated state */

.fade-up.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   77 — HOVER SCALE
========================================================== */

.hover-scale {
    transition:
        transform 0.3s ease;
}

.hover-scale:hover {
    transform:
        scale(1.03);
}


/* ==========================================================
   78 — ROUNDED IMAGE
========================================================== */

.image-rounded {
    border-radius: 20px;

    overflow: hidden;
}


/* ==========================================================
   79 — TABLET RESPONSIVE
========================================================== */

@media (max-width: 992px) {

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }


    .container {
        width: 92%;
    }

}


/* ==========================================================
   80 — MOBILE GLOBAL POLISH
========================================================== */

@media (max-width: 768px) {

    body {
        font-size: 15px;
    }


    /* ------------------------------------------------------
       MOBILE BUTTONS
    ------------------------------------------------------ */

    .btn {
        width: 100%;

        max-width: 320px;
    }


    /*
       The Home Events "Explore All Events"
       button remains compact.
    */

    #homeEvents .btn {
        padding:
            12px 28px;

        font-size:
            0.95rem;

        width: auto;
    }


    /* ------------------------------------------------------
       MOBILE SECTIONS
    ------------------------------------------------------ */

    section {
        padding-left: 20px;

        padding-right: 20px;
    }

}


/* ==========================================================
   81 — SMALL PHONE POLISH
========================================================== */

@media (max-width: 480px) {

    .hero-title-image {
        max-width: 100%;
    }


    .section-title {
        font-size: 1.8rem;
    }


    .about h2,
    .booking-cta h2 {
        font-size: 1.8rem;
    }


    .footer-social {
        flex-wrap: wrap;
    }

}


/* ==========================================================
   82 — NAVIGATION LIST CLEANUP
========================================================== */

/*
   Removes browser-generated bullets/markers
   from the navigation list.

   This is deliberately kept separate from the
   actual navigation layout.
*/

header .nav-menu ul,
header .nav-menu ol {
    list-style: none;
}

header .nav-menu li {
    list-style: none;
}

header .nav-menu li::marker {
    content: "";
}


/* ==========================================================
   83 — MEMORY GALLERY POPUP
========================================================== */

.gallery-popup {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 0, 0, 0.92);

    display: flex;

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

    padding: 20px;

    z-index: 999999;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* ==========================================================
   84 — ACTIVE MEMORY POPUP
========================================================== */

.gallery-popup.active {
    opacity: 1;

    visibility: visible;
}


/* ==========================================================
   85 — MEMORY POPUP IMAGE
========================================================== */

.gallery-popup img {
    max-width: 92%;

    max-height: 88%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 0 45px
        rgba(183, 138, 46, 0.30);
}


/* ==========================================================
   86 — MEMORY POPUP MOBILE
========================================================== */

@media (max-width: 768px) {

    .gallery-popup {
        padding: 15px;
    }


    .gallery-popup img {
        max-width: 94%;

        max-height: 82%;
    }

}


/* ==========================================================
   END OF PART 4
========================================================== */
/* ==========================================================
   VELNORA OFFICIAL STYLESHEET
   PART 5 — FINAL GALLERY + HOME EVENTS + FINAL OVERRIDES
========================================================== */


/* ==========================================================
   87 — GALLERY SLIDER
========================================================== */

.gallery-slider {
    position: relative;

    width:
        min(95vw, 1100px);

    display: flex;

    justify-content: center;
    align-items: center;
}


/* ==========================================================
   88 — GALLERY SLIDER IMAGE
========================================================== */

.slider-image {
    width: 100%;

    max-height: 90vh;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 0 40px
        rgba(0, 0, 0, 0.5);
}


/* ==========================================================
   89 — GALLERY ARROWS
========================================================== */

.gallery-arrow {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.15);

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 2;
}


/* Gallery arrow hover */

.gallery-arrow:hover {
    background: #B78A2E;

    color: #05020d;
}


/* ==========================================================
   90 — LEFT GALLERY ARROW
========================================================== */

.left-arrow {
    left: 20px;
}


/* ==========================================================
   91 — RIGHT GALLERY ARROW
========================================================== */

.right-arrow {
    right: 20px;
}


/* ==========================================================
   92 — GALLERY POPUP CLOSE
========================================================== */

.close-popup {
    position: absolute;

    top: -60px;

    right: 0;

    font-size: 45px;

    line-height: 1;

    color: #ffffff;

    cursor: pointer;

    transition:
        color 0.3s ease;
}


/* Close hover */

.close-popup:hover {
    color: #B78A2E;
}


/* ==========================================================
   93 — GENERAL FADE-IN
========================================================== */

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* ==========================================================
   94 — HOME EVENTS WRAPPER
========================================================== */

.events-slider {
    width: 100%;

    overflow: hidden;

    margin-top: 40px;
}


/* ==========================================================
   95 — HOME EVENTS HEADER
========================================================== */

/*
   Your current Home page has:

   Upcoming Events
   Discover our latest events.
   Explore All Events

   These are intentionally aligned LEFT.
*/

#homeEvents {
    text-align: left;
}


/* Home Events heading */

#homeEvents h2 {
    text-align: left;

    margin-bottom: 10px;
}


/* Home Events description */

#homeEvents > p {
    text-align: left;

    margin-bottom: 18px;
}


/* ==========================================================
   96 — HOME EVENTS BUTTON
========================================================== */

#homeEvents .btn {
    display: inline-flex;

    width: auto;

    padding:
        8px 18px;

    font-size: 0.9rem;

    margin-bottom: 25px;
}


/* ==========================================================
   97 — HOME EVENTS CONTAINER
========================================================== */

/*
   This is intentionally kept as a horizontal
   slider on the Home page.
*/

#homeEventsContainer {
    display: flex;

    gap: 24px;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    padding:
        10px 10px 25px;

    scrollbar-width: none;
}


/* Hide scrollbar */

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


/* ==========================================================
   98 — HOME EVENT CARD FINAL WIDTH
========================================================== */

/*
   IMPORTANT:

   This is the FINAL card size from your old CSS.

   The old stylesheet had 380px, 68%, 62%, 200px
   and finally 220px.

   We keep ONLY the final intended value here.
*/

#homeEventsContainer .event-card {
    flex:
        0 0 220px;

    max-width: 220px;

    scroll-snap-align: start;

    transition:
        transform 0.35s ease;
}


/* ==========================================================
   99 — HOME EVENT CARD HOVER
========================================================== */

#homeEventsContainer .event-card:hover {
    transform:
        translateY(-8px);
}


/* ==========================================================
   100 — FINAL HOME EVENT CARD IMAGE
========================================================== */

#homeEventsContainer .event-card img {
    width: 100%;

    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    object-position: center;
}


/* ==========================================================
   101 — FINAL HOME EVENT INFO
========================================================== */

#homeEventsContainer .event-info {
    min-height: 70px;

    padding:
        10px 12px;
}


/* Home event title */

#homeEventsContainer .event-info h3 {
    font-size: 0.82rem;

    line-height: 1.25;

    margin-bottom: 4px;
}


/* Home event date */

#homeEventsContainer .event-info p {
    font-size: 0.72rem;

    line-height: 1.4;

    margin: 0;
}


/* ==========================================================
   102 — FINAL FOOTER SOCIAL POLISH
========================================================== */

/*
   The old stylesheet had a later footer-social
   override.

   This is kept here as the final definition.
*/

.footer-social {
    display: flex;

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

    gap: 30px;

    margin:
        30px 0 40px;
}


.footer-social a {
    width: 54px;

    height: 54px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

    color: #ffffff;

    font-size: 22px;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* Footer social hover */

.footer-social a:hover {
    background: #D4AF37;

    color: #05020d;

    transform:
        translateY(-4px);
}


/* ==========================================================
   103 — FINAL GALLERY MOBILE
========================================================== */

@media (max-width: 768px) {

    .gallery-arrow {
        width: 45px;

        height: 45px;

        font-size: 22px;
    }


    .left-arrow {
        left: 10px;
    }


    .right-arrow {
        right: 10px;
    }


    .close-popup {
        top: -45px;

        font-size: 34px;
    }


    /* ------------------------------------------------------
       HOME EVENTS
    ------------------------------------------------------ */

    #homeEventsContainer {
        gap: 12px;

        padding:
            8px 12px 20px;
    }


    /*
       Keep the final 220px card size on mobile too.
    */

    #homeEventsContainer .event-card {
        flex:
            0 0 220px;

        max-width: 220px;
    }


    #homeEventsContainer .event-info {
        min-height: 70px;

        padding:
            10px 12px;
    }


    #homeEventsContainer .event-info h3 {
        font-size: 0.82rem;

        line-height: 1.25;
    }


    #homeEventsContainer .event-info p {
        font-size: 0.72rem;
    }


    /* ------------------------------------------------------
       FOOTER SOCIAL
    ------------------------------------------------------ */

    .footer-social {
        gap: 14px;
    }


    .footer-social a {
        width: 45px;

        height: 45px;

        font-size: 20px;
    }

}


/* ==========================================================
   104 — FINAL SMALL PHONE GALLERY
========================================================== */

@media (max-width: 480px) {

    .gallery-arrow {
        width: 40px;

        height: 40px;

        font-size: 20px;
    }


    .left-arrow {
        left: 6px;
    }


    .right-arrow {
        right: 6px;
    }


    .close-popup {
        top: -40px;

        font-size: 30px;
    }

}
/* ==========================================================
   RELIVE THE MOMENTS — HORIZONTAL MEMORY SLIDER
========================================================== */

/* Memory cards container */

#memoriesContainer {
    display: flex;

    width: 100%;

    gap: 24px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 10px 10px 25px;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}


/* Hide scrollbar — Chrome / Edge / Safari */

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


/* Individual memory cards */

#memoriesContainer .event-card {
    flex: 0 0 280px;

    width: 280px;

    max-width: 280px;

    scroll-snap-align: start;

    background: rgba(255,255,255,.05);

    border-radius: 22px;

    overflow: hidden;

    cursor: pointer;

    transition: transform .35s ease,
                box-shadow .35s ease;

    backdrop-filter: blur(10px);
}


/* Memory card image */

#memoriesContainer .event-card img {
    width: 100%;

    height: 350px;

    object-fit: cover;

    object-position: center;

    display: block;
}


/* Memory card information */

#memoriesContainer .event-info {
    min-height: 100px;

    padding: 16px 18px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;
}


/* Memory title */

#memoriesContainer .event-info h3 {
    margin: 0 0 6px;

    font-size: 1rem;

    line-height: 1.35;

    font-weight: 700;

    color: #ffffff;
}


/* Memory location */

#memoriesContainer .event-info p {
    margin: 0;

    font-size: .85rem;

    font-weight: 500;

    color: #D4AF37;
}


/* Memory date */

#memoriesContainer .event-info span {
    margin-top: 4px;

    font-size: .8rem;

    color: #d1d5db;
}


/* Desktop hover */

#memoriesContainer .event-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(183,138,46,.18);
}


/* ==========================================================
   MOBILE MEMORY SLIDER
========================================================== */

@media (max-width: 768px) {

    #memoriesContainer {

        gap: 16px;

        padding:
            10px
            0
            25px;
    }


    #memoriesContainer .event-card {

        /*
           Shows roughly one full card
           with part of the next card visible.
        */

        flex: 0 0 78%;

        width: 78%;

        max-width: 78%;

        scroll-snap-align: start;
    }


    #memoriesContainer .event-card img {

        width: 100%;

        height: auto;

        aspect-ratio: 4 / 5;

        object-fit: cover;
    }


    #memoriesContainer .event-info {

        min-height: 90px;

        padding: 14px 12px;
    }


    #memoriesContainer .event-info h3 {

        font-size: .95rem;
    }


    #memoriesContainer .event-info p {

        font-size: .8rem;
    }


    #memoriesContainer .event-info span {

        font-size: .75rem;
    }

}
/* ==========================================================
   RELIVE SECTION LAYOUT
========================================================== */

.memories-section {
    max-width: 1400px;

    margin: 0 auto;

    padding:
        50px 20px;
}


.memories-section > p {
    max-width: 750px;

    margin:
        0 auto 35px;

    text-align: center;

    color: #d1d5db;

    font-size: 1.15rem;

    line-height: 1.9;
}


/* Mobile */

@media (max-width: 768px) {

    .memories-section {
        padding:
            40px 20px;
    }


    .memories-section > p {

        font-size: 1rem;

        line-height: 1.8;

        margin-bottom: 25px;
    }

}
/* END OF PART 5 */
/* ======================================================
   STORE PAGE — MOBILE NAVBAR SPACING
====================================================== */

/* ======================================================
   FINAL STORE MOBILE NAVBAR FIX
====================================================== */

/* ======================================================
   FINAL FIX — VELNORA STORE HEADING
====================================================== */

@media (max-width: 768px) {

    .store-hero {
        position: relative !important;
        margin: 0 !important;
        padding: 110px 20px 40px !important;
        min-height: 220px !important;
        overflow: visible !important;
    }

    .store-hero h2 {
        display: block !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;

        margin: 0 0 20px 0 !important;

        color: #D4AF37 !important;
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;

        z-index: 999 !important;
    }

    .store-hero p {
        display: block !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;

        margin: 0 !important;

        z-index: 999 !important;
    }

}
/* ==========================================================
   VELNORA HERO — CMS VIDEO / IMAGE / SLIDESHOW
   ========================================================== */

.hero {
    position: relative;
    width: 100%;
    height: 600px;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

/* ==========================================================
   CMS SLIDESHOW
   ========================================================== */

.hero-slideshow {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;
}

/* ==========================================================
   INDIVIDUAL SLIDES
   ========================================================== */

.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-color: #000;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0;

    transition: opacity 1.2s ease-in-out;

    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

/* ==========================================================
   HERO VIDEO
   ========================================================== */

.hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

    display: none;
}

/* ==========================================================
   HERO OVERLAY
   ========================================================== */

.hero .hero-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.03) 45%,
            rgba(0, 0, 0, 0.70)
        );
}

/* ==========================================================
   HERO CONTENT
   ========================================================== */

.hero .hero-content {
    position: relative;
    z-index: 10;
}

/* ==========================================================
   NAVBAR ABOVE HERO
   ========================================================== */

.navbar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100%;

    z-index: 10000 !important;
}

/* ==========================================================
   MOBILE HERO
   ========================================================== */

@media (max-width: 768px) {

    .hero {
        width: 100vw !important;

        margin-top: 62px !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        /*
         * Portrait hero.
         * 2:3 matches your event posters.
         */
        height: 150vw !important;

        min-height: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        background: #000 !important;
    }

    .hero-slideshow {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }

    .hero-slide {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        /*
         * Fills the entire phone width.
         */
        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

        opacity: 0;

        transform: none !important;

        transition:
            opacity 1.2s ease-in-out !important;

        z-index: 1 !important;
    }

    .hero-slide.active {
        opacity: 1 !important;
        z-index: 2 !important;
    }

    .hero .hero-overlay {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 5 !important;

        pointer-events: none !important;
    }

    .hero-video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        z-index: 1 !important;
    }

    .hero .hero-content {
        position: relative !important;
        z-index: 10 !important;
    }
}

/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 480px) {

    .hero {
        width: 100vw !important;

        height: 150vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

}