html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.no-gutter {
    --bs-gutter-x: 0
}

.form-floating > label {
    color: var(--pink);
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    color: var(--pink);
}

    /*Manual CSS*/
    .floating-menu-btn {
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 1056; /* above offcanvas backdrop (1055) */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.floating-menu-icon {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
}

    .floating-menu-icon::before,
    .floating-menu-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        background: #fff;
    }

    .floating-menu-icon::before {
        top: -6px;
    }

    .floating-menu-icon::after {
        top: 6px;
    }

#mobileMenu {
    z-index: 1100;
}

.modal-backdrop {
    z-index: 1058; /* or 1059 */
}

.modal {
    z-index: 1060;
}

/* Floating desktop auth pill (top-right) */
.auth-desktop {
    position: fixed;
    top: .75rem;
    right: .75rem;
    color: white;
    z-index: 1056;
    /*background: rgba(255,255,255,.9);*/
    /*backdrop-filter: blur(6px);*/
    /*border-radius: 9999px;*/
    /*padding: .25rem .5rem;*/
    /*box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);*/
}
    /* Make _LoginPartial render horizontally here */
    .auth-desktop .navbar-nav {
        flex-direction: row;
        margin-bottom: 0;
    }

    .auth-desktop .nav-link, .auth-desktop .btn-link {
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
    /* Keep the logout form inline */
    .auth-desktop form {
        display: inline;
    }

/* Bury Fit Style */
:root {
    --bg: #000;
    --text: #fff;
    --text-dark: #000;
    --form-text: #000;
    --muted: #bdbdbd;
    --pink: #ff2aa3;
    --green: #b6ff1a;
    --blue: #29d3ff;
    --glow: 0 0 16px rgba(255,255,255,.25);
    --green-glow: 0 0 18px rgba(182,255,26,.55), 0 0 40px rgba(182,255,26,.35);
    --pink-glow: 0 0 18px rgba(255,42,163,.55), 0 0 40px rgba(255,42,163,.35);
    --blue-glow: 0 0 18px rgba(41,211,255,.55), 0 0 40px rgba(41,211,255,.35);

    --logo-stretch: 1.6; /* tweak: 1.08–1.15 looks close to your sample */
    --logo-tracking: -0.02em; /* slight tightening */
}


.logo-tall {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 505;
    text-transform: uppercase;
    letter-spacing: var(--logo-tracking);
    line-height: 1; /* keep it compact */
    display: block; /* needed for transform */
    /*transform: scaleY(var(--logo-stretch));*/
    transform-origin: bottom; /* keeps the baseline in place */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 45px !important;
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif
}

.links {
    display: flex;
    gap: 28px
}

    .links a {
        color: var(--text);
        text-decoration: none;
        font-weight: 600;
        letter-spacing: .4px
    }
    .links form {
        color: var(--text);
        text-decoration: none;
        font-weight: 600;
        letter-spacing: .4px
    }

        .links a:hover {
            color: var(--pink);
            text-shadow: var(--pink-glow)
        }

/* HERO */
.hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 80px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0) 40%);
}

/* ===== Random, pulsing club-light glows ===== */
/* container for the lights */
.club-glows {
    position: absolute;
    inset: -10% -10% 0 -10%;
    pointer-events: none;
    z-index: 0;
}

/* outer: positioned by JS via left/top (no transform here) */
.glow {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    transition: left 4.5s ease-in-out, top 4.5s ease-in-out;
    transform: translate(-50%, -50%); /* center anchor */
}

/* inner core: handles color, blur, and pulse (scale/opacity) */
.glow__core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: blur(60px);
    mix-blend-mode: screen;
    opacity: .10;
    animation: clubPulse 10s ease-in-out infinite;
}

/* colors */
.glow--red .glow__core {
    background: radial-gradient(circle at 50% 50%, rgba(255,70,110,.55) 0 38%, rgba(255,70,110,0) 60%);
}

.glow--green .glow__core {
    background: radial-gradient(circle at 50% 50%, rgba(182,255,26,.55) 0 38%, rgba(182,255,26,0) 60%);
}

.glow--blue .glow__core {
    background: radial-gradient(circle at 50% 50%, rgba(41,211,255,.55) 0 38%, rgba(41,211,255,0) 60%);
}

/* gentle breathing — scale only the core, not the positioned wrapper */
@keyframes clubPulse {
    0%,100% {
        opacity: .10;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(1.06);
    }
}


/* Equalizer (bottom anchored; middle bar = blue) */
.eq {
    position: relative;
    z-index: 1; /* above glows */
    display: inline-flex;
    align-items: flex-end;
    gap: 12px;
    height: 110px;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 14px rgba(255,255,255,.12));
}

.bar {
    position: relative;
    width: 22px;
    height: 100%;
    border-radius: 8px;
    background: #101010;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #1a1a1a;
}

    .bar .fill {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: var(--h);
        border-radius: 8px;
        background: var(--c);
        box-shadow: var(--glow-color);
        animation: rise 1400ms ease-in-out infinite;
        transform-origin: bottom center;
    }

    .bar:nth-child(1) .fill {
        animation-delay: .00s
    }

    .bar:nth-child(2) .fill {
        animation-delay: .12s
    }

    .bar:nth-child(3) .fill {
        animation-delay: .24s
    }

    .bar:nth-child(4) .fill {
        animation-delay: .36s
    }

    .bar:nth-child(5) .fill {
        animation-delay: .48s
    }

@keyframes rise {
    0%,100% {
        height: var(--h)
    }

    50% {
        height: calc(var(--h) + 18px)
    }
}

.hero h2 {
    position: relative;
    z-index: 1;
    font-size: clamp(32px,6vw,56px);
    margin: 0 0 12px;
    font-weight: 800;
    letter-spacing: .5px
}

.hero p, .hero span {
    position: relative;
    z-index: 1;
    color: var(--muted);
    font-size: clamp(16px,2.2vw,20px);
    margin: 0 0 28px
}

/* ===== Neon Buttons ===== */
.btn-neon {
    --radius: 8px;
    --pad-y: 14px;
    --pad-x: 22px;
    --fw: 800;
    --bg: linear-gradient(90deg, var(--pink), var(--green));
    --txt: #0b0b0b;
    --ring: 0 0 0 0 rgba(255,42,163,.0);
    --glow-outer: 0 0 22px rgba(255,42,163,.35), 0 0 22px rgba(182,255,26,.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--pad-y) var(--pad-x);
    border-radius: var(--radius);
    border: 0;
    background: var(--bg);
    color: var(--txt);
    font-weight: var(--fw);
    letter-spacing: .4px;
    text-decoration: none;
    box-shadow: var(--glow-outer);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    cursor: pointer;
}

    .btn-neon:hover {
        /*transform: translateY(-2px);*/
        filter: brightness(1.10);
        /*color: var(--text-dark);*/
    }

    .btn:active {
        transform: translateY(0);
        filter: brightness(.98);
    }

    /* Keyboard focus ring */
    .btn:focus-visible {
        outline: none;
        box-shadow: var(--glow-outer), 0 0 0 3px rgba(255,255,255,.15);
    }

/* Size helpers */
.btn--sm {
    --pad-y: 10px;
    --pad-x: 16px;
    --radius: 12px;
    font-weight: 700;
}

.btn--lg {
    --pad-y: 16px;
    --pad-x: 26px;
    --radius: 18px;
    font-size: 1.05rem;
}

/* Variants */
.btn--primary { /* default gradient already set */
}

.btn--green {
    --bg: linear-gradient(90deg, #7dff00, #b6ff1a);
    --glow-outer: 0 0 22px rgba(182,255,26,.45), 0 0 42px rgba(182,255,26,.25);
}

.btn--pink {
    /*--bg: linear-gradient(90deg, #ff2aa3, #ff5cc3);   ff00a0  */
    --bg: linear-gradient(90deg, #090909, #ff00a0);
    --glow-outer: 0 0 22px rgba(255,42,163,.55), 0 0 42px rgba(255,42,163,.25);
    color: white;
}

.btn--blue {
    --bg: linear-gradient(90deg, #29d3ff, #6de6ff);
    --glow-outer: 0 0 22px rgba(41,211,255,.55), 0 0 42px rgba(41,211,255,.25);
}

.btn-two-line {
    display: inline-flex; /* so the two lines sit nicely */
    flex-direction: column;
    align-items: center; /* center text horizontally */
    text-decoration: none;
}

    .btn-two-line .btn-title {
        font-size: 1rem; /* or whatever your button text is */
        line-height: 1.2;
    }

    .btn-two-line .btn-subtitle {
        font-size: 0.7rem; /* smaller line */
        opacity: 0.8; /* slightly lighter */
    }

/* Outline on black with neon edge + text */
    .btn--outline {
    --txt: #f7f7f7;
    background: transparent;
    border: 2px solid rgba(255,255,255,.15);
    box-shadow: inset 0 0 12px rgba(255,255,255,.06);
}

    .btn--outline.btn--pink {
        border-color: rgba(255,42,163,.55);
        color: #ffd7ee;
        text-shadow: var(--pink-glow);
    }

    .btn--outline.btn--green {
        border-color: rgba(182,255,26,.55);
        color: #f0ffd1;
        text-shadow: var(--green-glow);
    }

    .btn--outline.btn--blue {
        border-color: rgba(41,211,255,.55);
        color: #d9f7ff;
        text-shadow: var(--blue-glow);
    }

/* Ghost text-only with neon text glow */
.btn--ghost {
    --txt: #f7f7f7;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-shadow: 0 0 8px rgba(255,255,255,.12);
}

    .btn--ghost.btn--pink {
        color: #ffd7ee;
        text-shadow: var(--pink-glow);
    }

    .btn--ghost.btn--green {
        color: #f0ffd1;
        text-shadow: var(--green-glow);
    }

    .btn--ghost.btn--blue {
        color: #d9f7ff;
        text-shadow: var(--blue-glow);
    }

/* Icon helper (for SVGs or <span class="icon">) */
.btn .icon {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    line-height: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none
    }

        .btn:hover, .btn:active {
            transform: none;
            filter: none
        }
}


.section {
    padding: 72px 0
}

.center {
    text-align: center
}

.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3,1fr)
}

@media (max-width:980px) {
    .grid {
        grid-template-columns: repeat(2,1fr)
    }
}

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

.page-logo {
    max-width: 200px;
    margin: auto;
}

.card {
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35)
}

    .card h4 {
        margin: 0 0 8px;
        font-size: 20px;
        color: var(--pink);
        text-shadow: var(--pink-glow)
    }

    .card p, .card span {
        margin: 0;
        color: #ccc
    }

.text-pink {
    color: var(--pink) !important;
    text-shadow: var(--pink-glow) !important;
}

.text-green {
    color: var(--green) !important;
    text-shadow: var(--green-glow) !important;
}

.text-blue {
    color: var(--blue) !important;
    text-shadow: var(--blue-glow) !important;
}

.about {
    background: #090909;
    border-top: 1px solid #161616;
    border-bottom: 1px solid #161616
}

    .about h3 {
        font-size: clamp(24px,4.5vw,34px);
        margin: 0 0 10px
    }

    .about p {
        color: #cfcfcf;
        max-width: 820px;
        margin: 0 auto
    }

.contact p {
    color: #d0d0d0
}

.icon-check {
    width: 24px;
    height: 24px;
}

.icon-ccbig path:nth-of-type(1), .icon-ccbig circle {
    stroke: var(--pink);
}
/* circle colour */
.icon-ccbig path:nth-of-type(2) {
    stroke: var(--green);
}
/* tick colour */

    /* two-tone: circle vs tick */
    .icon-check circle {
        stroke: var(--pink);
    }
    /* circle color (slate-500-ish) */
    .icon-check path {
        stroke: var(--green);
    }
    /* tick color (green-500) */

    /* optional: adjust thickness */
    .icon-check circle, .icon-check path {
        stroke-width: 2.25;
    }

.benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

    .benefits li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

.icon-ccbig {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin-top: 2px;
}
/* Titles + subtext */
.benefit-title {
    font-weight: 600;
    line-height: 1.2;
}

.benefit-sub {
    color: #6b7280;
    line-height: 1.35;
    margin-top: 2px;
}

/*.form-floating > .form-control {
    color: var(--form-text);
}*/

/* Anchor the floating label on the left */
/*.form-floating > label {
    left: .75rem;*/ /* position from the left */
    /*right: auto;*/ /* stop anchoring to the right */
    /*text-align: left;
}*/

/* Ensure input text is left-aligned (in case a parent sets text-end) */
/*.form-floating > .form-control {
    text-align: left;
}*/

/*.form-floating > .form-control {
    color: var(--form-text);
}

    .form-floating > .form-control::placeholder {
        color: transparent;
    }*/


/* Align floating labels and input text to the left */
/*.form-floating > label {
    text-align: left !important;
}

.form-floating > .form-control {
    text-align: left;
}*/

/* If you also see actual placeholders elsewhere */
/*.form-control::placeholder {
    text-align: left;
}*/

.icon-ccbig {
    width: 22px;
    height: 22px;
}
    /* optional two tone again */
    .icon-ccbig path:nth-of-type(1), .icon-ccbig circle {
        stroke: var(--pink);
    }

    .icon-ccbig path:nth-of-type(2) {
        stroke: #22c55e;
    }

.form-check-input:checked {
    background-color: #C1FF05;
    border-color: #C1FF05;
}

    /* change the tick to black (override Bootstrap SVG) */
    .form-check-input:checked[type="checkbox"] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    }

/* if you ever use indeterminate */
.form-check-input:indeterminate {
    background-color: #C1FF05;
    border-color: #C1FF05;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 10h10'/%3e%3c/svg%3e");
}

.text-muted-blue {
    color: var(--blue) !important;
}

#bookingModal .btn-close {
    filter: invert(1);
    opacity: 1; /* make it fully visible */
}

    #bookingModal .btn-close:hover {
        opacity: .75;
    }

/* booking modal glow */
/*#bookingModal .modal-content {
    border: 1px solid rgba(0, 162, 255, 0.6);*/ /* bluish border */
    /*box-shadow: 0 0 20px rgba(0, 162, 255, 0.35);
    background: #000;*/ /* keep your dark background */
    /*color: #fff;
}*/

#bookingModal .modal-content {
    border: 1px solid #00a2ff;
    box-shadow: 0 0 25px rgba(0, 162, 255, 0.55);
}

.modal-backdrop.show {
    opacity: 0.7; /* default is 0.5 – bump it up */
}




.about-page {
    background: #000; /* your dark background */
    color: #fff;
}

.page-logo {
    max-height: 80px;
}

.about-heading {
    color: #ff2f92; /* pink heading like your screenshot */
    font-weight: 700;
}

.about-box {
    border: 2px solid #ff2f92;
    padding: 1.25rem;
    background: rgba(0,0,0,0.35);
}

.about-photo-box {
    width: 100%;
    max-width: 210px;
    min-height: 180px;
    background: #555;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.qual-heading {
    color: #c2ff29; /* neon-lime like your “text-green” */
    font-weight: 700;
}

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

    .qual-list li {
        margin-bottom: .4rem;
    }

.about-action-image {
    border-radius: 4px;
    /* optional glow */
    box-shadow: 0 0 18px rgba(0,0,0,.35);
}

/* mobile spacing tweaks */
@media (max-width: 767.98px) {
    .about-photo-box {
        margin: 0 auto 1.5rem;
    }
}

.modal-content.club-modal {
    background: #000;
    color: #fff;
    border: 1px solid #00a2ff; /* pink border */
    box-shadow: 0 0 22px rgba(0, 162, 255, 0.55);
}

.btn-close {
    filter: invert(1);
}

/*@media (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }*/

        /* center the last item in its row */
        /*.grid > :last-child {
            grid-column: 2 / 3;*/ /* put it in the middle column */
        /*}
}*/

.social-links .social-icon {
    height: 60px; /* consistent size */
    width: auto;
    display: block;
}

.social-links {
    justify-content: center;
}

/*@media (min-width: 768px) {
    .social-links {
        justify-content: center;
    }*/
    /* optional center on desktop */
/*}*/