/* import custom fonts */
    @font-face {
        font-family: bpg_banner;
        font-display: swap;
        src: url('webfonts/bpg_banner.eot?') format('eot'),
        url('webfonts/bpg_banner.woff') format('woff'),
        url('webfonts/bpg_banner.ttf')  format('truetype'),
        url('webfonts/bpg_banner.svg#svgFontName') format('svg');
    }
    @font-face {
        font-family: bpg_banner_upper;
        font-display: swap;
        src: url('webfonts/bpg_banner_upper.eot?') format('eot'),
        url('webfonts/bpg_banner_upper.woff') format('woff'),
        url('webfonts/bpg_banner_upper.ttf')  format('truetype'),
        url('webfonts/bpg_banner_upper.svg#svgFontName') format('svg');
    }

/* reset default settings */
    html, body {
        padding: 0;
        height: 100%;
        color: #f0f0f0;
        margin: 0;
        background-color: #0b0b0d;
    }

    /* Premium ambient backdrop: fine grain over layered brand-red glows,
       over a heavily dimmed photo of the gym floor. The photo sits at the
       bottom of the stack and reads as texture rather than as an image, so
       body copy and the pricing cards stay fully legible. All layers are
       fixed so the backdrop stays anchored to the viewport while scrolling. */
    body {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
            radial-gradient(ellipse 90% 55% at 50% -15%, rgba(224, 56, 48, 0.20), transparent 62%),
            radial-gradient(ellipse 55% 45% at 105% 22%, rgba(224, 56, 48, 0.10), transparent 60%),
            radial-gradient(ellipse 55% 45% at -5% 68%, rgba(224, 56, 48, 0.08), transparent 60%),
            linear-gradient(180deg, rgba(11, 11, 14, 0.955) 0%, rgba(16, 16, 20, 0.94) 45%, rgba(9, 9, 11, 0.965) 100%),
            var(--site-bg, url("../img/gym-backdrop.jpg"));
        background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
        background-size: 180px 180px, cover, cover, cover, cover, cover;
        background-position: 0 0, center, center, center, center, center center;
    }
    .no-padding {
        padding: 0 !important;
    }
    .no-margin {
        margin: 0 !important;
    }
    .full-width {
        width: 100% !important;
    }
    .full-height {
        height: 100% !important;
    }
    iframe {
        border: none;
    }
    .clear {
        clear: both;
    }
    .middle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .noMiddle {
        display: flex;
        align-items: center;
    }
    .banner {
        font-family: bpg_banner;
        font-weight: normal;
    }
    .banner-upper {
        font-family: bpg_banner_upper;
        text-transform: uppercase;
        font-weight: normal;
    }
    .shadow {
        -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2);
        box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2);
    }

/* top block */
    nav {
        z-index: 2;
    }
    nav ul {
        list-style: none;
    }
    .navbar-light .navbar-toggler,
    .navbar-light .navbar-toggler.collapsed {
        border: none;
    }
    .fa-bars {
        color: #e03830;
    }
    .menu-link {
        display: block;
        color: #e03830;
        padding: 36px 25px 0 25px;
        font-size: 1.4rem;
        font-weight: 600;
        transition: color 0.25s ease;
    }
    .menu-link:hover {
        color: #ff6b60;
        text-decoration: none;
    }

    /* Navbar logo — constrained by height so it scales proportionally
       (source art is 836x234). Keeps the header balanced on every breakpoint. */
    .menu-logo .menu-link {
        padding: 0 30px;
    }
    .menu-logo img,
    .logo-sm img {
        height: auto;
        max-height: 62px;
        width: auto;
        max-width: 100%;
        display: block;
        filter: drop-shadow(0 4px 14px rgba(224, 56, 48, 0.35));
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    .menu-logo img:hover,
    .logo-sm img:hover {
        transform: scale(1.04);
        filter: drop-shadow(0 6px 20px rgba(224, 56, 48, 0.55));
    }
    /* Hero: the free-weights floor behind the logo, nav and slogan. The scrim
       is darkest at the very top (so the white nav links stay readable) and
       again at the very bottom, where it fades into the page backdrop so the
       photo has no hard edge against the pricing section. */
    .top-block {
        position: relative;
        background-image:
            linear-gradient(180deg,
                rgba(8, 8, 10, 0.90) 0%,
                rgba(8, 8, 10, 0.70) 32%,
                rgba(13, 13, 16, 0.82) 70%,
                rgba(24, 23, 26, 0.94) 92%,
                rgba(26, 25, 27, 0.97) 100%),
            url("../img/gym-hero.jpg");
        background-repeat: no-repeat, no-repeat;
        background-size: cover, cover;
        background-position: center, center 42%;
    }
    .slogan {
        z-index: 2;
        margin: 130px 0 130px 0;
        font-size: 60px;
        position: relative;
        letter-spacing: 4px;
        color: #e03830;
        /* Brand glow plus a dark drop shadow, so the slogan holds up over the
           lighter parts of the hero photo as well as over flat dark. */
        text-shadow: 0 0 40px rgba(224, 56, 48, 0.40), 0 3px 18px rgba(0, 0, 0, 0.9);
    }
    /* Same idea for the header links sitting directly on the photo. */
    .top-block .menu-link {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    }
    .content {
        position: relative;
        background: transparent;
    }
    .shadow-bg {
        display: none;
    }
    /* Pricing cards: frosted dark glass with a soft brand-red rim.
       Lifts gently on hover so the grid feels responsive without
       changing any layout dimensions. */
    .price-block {
        z-index: 2;
        margin: 40px 0 40px 0;
        min-height: 535px;
        position: relative;
        text-align: center;
        border: 1px solid rgba(224, 56, 48, 0.55);
        border-radius: 18px;
        background:
            linear-gradient(160deg, rgba(224, 56, 48, 0.12) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(0, 0, 0, 0.25) 100%);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow:
            0 18px 45px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
            0 -1px 0 rgba(255, 255, 255, 0.05) inset;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.35s ease,
                    border-color 0.35s ease;
    }
    /* Sheen along the top edge */
    .price-block::after {
        content: '';
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 107, 96, 0.75), transparent);
        pointer-events: none;
    }
    .price-block:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 107, 96, 0.9);
        box-shadow:
            0 28px 60px rgba(0, 0, 0, 0.65),
            0 0 34px rgba(224, 56, 48, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    }
    .price-block h1 {
        width: 90px;
        height: 90px;
        margin: 0 auto;
        border-radius: 200px;
        -moz-border-radius: 200px;
        -webkit-border-radius: 200px;
        border: 2px solid #e03830;
        font-size: 48px;
        line-height: 84px;
        font-weight: bold;
        color: #e03830;
        background: radial-gradient(circle at 50% 40%, rgba(224, 56, 48, 0.20), transparent 70%);
        box-shadow: 0 0 22px rgba(224, 56, 48, 0.30);
    }
    .price-block h2 {
        color: #e03830;
    }
    .price-block h3 {
        font-size: 18px;
        line-height: 24px;
    }
    .price-block h4 {
        left: 0;
        bottom: 40px;
        display: block;
        position: absolute;
    }
    /* Contact band: the cardio floor and window wall. Longhand properties on
       purpose — index.php sets `background-color: transparent` inline on this
       element, and the `background` shorthand would be overridden by it. */
    .join {
        font-size: 35px;
        position: relative;
        letter-spacing: 4px;
        background-image:
            linear-gradient(180deg,
                rgba(12, 12, 16, 0.96) 0%,
                rgba(10, 10, 13, 0.76) 30%,
                rgba(10, 10, 13, 0.78) 70%,
                rgba(12, 12, 16, 0.96) 100%),
            url("../img/gym-contact.jpg");
        background-repeat: no-repeat, no-repeat;
        background-size: cover, cover;
        background-position: center, center;
    }
    /* The window wall in the contact photo is the brightest thing on the page,
       so lift the address / phone / hours off it with a soft shadow. */
    .join i,
    .join h5,
    .join p,
    .join a {
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.7);
    }
    .join i {
        z-index: 2;
        position: relative;
    }
    .join h5 {
        font-size: 24px;
        line-height: 38px;
    }
    .join a {
        color: #e03830;
    }
    .join a:hover {
        color: #e03830;
        text-decoration: none;
    }
    .join-shadow {
        display: none;
    }
    .info {
        cursor: pointer;
        font-size: 42px;
        margin: 0 0 50px 0;
        color: #e03830;
    }
    .info:hover {
        color: rgba(224,56,48,0.5);
    }
    .info p {
        color: #FFF;
        display: none;
        padding: 15px;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 1px;
        border: 3px solid #e03830;
        background: rgba(0,0,0,0.7);
    }
    /* Map section: inset, rounded and framed so it reads as a designed
       component rather than a raw full-bleed iframe. */
    .map-section {
        padding: 0 24px 70px;
    }
    .map-frame {
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(224, 56, 48, 0.45);
        box-shadow:
            0 26px 60px rgba(0, 0, 0, 0.6),
            0 0 40px rgba(224, 56, 48, 0.12);
    }
    .map {
        height: 460px;
        overflow: hidden;
        position: relative;
    }
    .map iframe {
        left: 0;
        top: 0;
        position: absolute;
        /* Tone the stock Google tiles toward the site's dark palette */
        filter: grayscale(38%) contrast(1.06) brightness(0.92);
    }

    /* Address card floating over the map */
    .map-card {
        position: absolute;
        top: 28px;
        right: 28px;
        z-index: 12;
        width: 310px;
        padding: 22px 22px 20px;
        border-radius: 16px;
        background: linear-gradient(160deg, rgba(20, 20, 24, 0.94) 0%, rgba(10, 10, 12, 0.96) 100%);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border: 1px solid rgba(224, 56, 48, 0.5);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
        text-align: left;
        font-family: 'Inter', sans-serif;
        letter-spacing: 0;
    }
    .map-card-brand {
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .map-card-brand img {
        max-height: 40px;
        width: auto;
        display: block;
    }
    .map-card-row {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        margin-bottom: 11px;
        font-size: 0.95rem;
        line-height: 1.45;
        color: #eaeaea;
    }
    .map-card-row i {
        color: #e03830;
        font-size: 0.95rem;
        margin-top: 3px;
        flex-shrink: 0;
        width: 16px;
        text-align: center;
    }
    .map-card-row a {
        color: #eaeaea;
        text-decoration: none;
        transition: color 0.25s ease;
    }
    .map-card-row a:hover {
        color: #ff6b60;
    }
    .map-card-btn {
        display: block;
        margin-top: 18px;
        padding: 12px 16px;
        text-align: center;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.95rem;
        color: #ffffff;
        text-decoration: none;
        background: linear-gradient(135deg, #e8443b 0%, #c9302a 100%);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 8px 22px rgba(224, 56, 48, 0.35);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease, box-shadow 0.3s ease;
    }
    .map-card-btn:hover {
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-2px);
        filter: brightness(1.08);
        box-shadow: 0 12px 30px rgba(224, 56, 48, 0.5);
    }

    @media (max-width: 991px) {
        .map-section { padding: 0 16px 50px; }
        .map { height: 420px; }
        .map-card {
            position: static;
            width: auto;
            margin: 0;
            border-radius: 0;
            border-left: none;
            border-right: none;
            border-bottom: none;
        }
    }
    .footer {
        padding: 30px 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.65));
        border-top: 2px solid #e03830;
        box-shadow: 0 -12px 40px rgba(224, 56, 48, 0.10);
    }

/* responsive */
    @media only screen and (max-width: 768px) {
        .price-block {
            margin: 20px 0;
        }
        .slogan {
            font-size: 18px;
            margin: 100px 0 20px 0;
        }
        /* iOS Safari mis-handles `background-attachment: fixed` (it sizes the
           image to the whole document, so a `cover` photo ends up hugely
           zoomed). Scroll the backdrop with the page on small screens. */
        body {
            background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
        }
        /* Portrait phones crop a landscape hero very tightly, so lean harder
           on the scrim to keep the logo and slogan clear of the machinery. */
        .top-block {
            background-position: center, center 50%;
            background-image:
                linear-gradient(180deg,
                    rgba(8, 8, 10, 0.90) 0%,
                    rgba(8, 8, 10, 0.72) 35%,
                    rgba(10, 10, 13, 0.82) 70%,
                    rgba(12, 12, 16, 0.97) 100%),
                url("../img/gym-hero.jpg");
        }
    }
    @media screen and (min-width: 601px) and (max-width: 767px){
        .navbar {
            margin-left: 0;
        }
    }
    @media only screen and (max-width: 600px) {
        nav {
            
            margin: 0 !important;
        }
        .logo-sm img {
            max-height: 42px;
            width: auto;
            margin: 0 auto;
        }
        .menu-logo {
            display: none;
        }
        .price-block {
            background:
                linear-gradient(160deg, rgba(224, 56, 48, 0.14) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.7) 100%);
        }
        
        /* Fix social media links alignment on mobile */
        .social-links {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 15px !important;
            margin-top: 1.5rem !important;
        }
        
        .social-links a {
            margin: 0 !important;
            font-size: 1.2rem !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            width: 100% !important;
            max-width: 200px !important;
        }
        
        .social-links a i {
            margin-right: 8px !important;
            display: inline-block !important;
        }
        
        /* Mobile navigation adjustments */
        .navbar {
            padding: 0.5rem 1rem !important;
        }
        
        .menu-link {
            font-size: 1.2rem !important;
            padding: 8px 12px !important;
        }
    }

.topcorner{
    position:absolute;
    top:0;
    right:0;
}

.pointer {
    cursor: pointer;
}