/* ============================================================
   BEASTMUSCLE PUBLIC WEBSITE
   Recolored to match the admin panel's design system
   (assets/css/style.css) — same tokens, same "floating card"
   radius/shadow language, same fonts.
   ============================================================ */


/* ============================================================
   ROOT — copied from the admin theme so both surfaces share one
   brand palette. Keep in sync with assets/css/style.css if the
   admin palette ever changes.
   ============================================================ */

:root {

    --bm-primary: #F6080F;
    --bm-primary-hover: #FF3B42;
    --bm-primary-dark: #C40810;

    --bm-black: #080A0B;
    --bm-bg: #080A0B;
    --bm-bg-2: #101315;
    --bm-bg-3: #13171A;

    --bm-card: #161A1D;

    --bm-white: #F5F7F2;
    --bm-text: #D9DDDA;
    --bm-text-secondary: #B2B8BC;
    --bm-muted: #9AA1A6;
    --bm-muted-dark: #656C71;

    --bm-border: #272D31;
    --bm-border-light: #32393E;

    --bm-danger: #EF4444;

    --bm-radius-sm: 8px;
    --bm-radius: 14px;
    --bm-radius-lg: 20px;

    --bm-shadow-sm:
        0 4px 16px rgba(0, 0, 0, 0.22);

    --bm-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32);

    --bm-glow:
        0 0 30px rgba(246, 8, 15, 0.18);

    --bm-transition:
        all .25s ease;

}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background: var(--bm-bg);

    color: var(--bm-text);

    font-family:
        'Inter',
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.7;

}

a {
    text-decoration: none;
}

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


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        'Bebas Neue',
        sans-serif;

    letter-spacing: .5px;

    color: var(--bm-white);

    line-height: 1;

}

p {
    color: var(--bm-text);
}


/* ============================================================
   HEADER
   ============================================================ */

.bm-site-header {

    position: absolute;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 1000;

}

.bm-navbar {

    min-height: 90px;

    border-bottom:
        1px solid var(--bm-border);

    background:
        rgba(8,10,11,.72);

    backdrop-filter:
        blur(14px);

}


/* ============================================================
   BRAND
   ============================================================ */

.bm-brand {

    display:
        inline-flex;

    align-items:
        center;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size: 31px;

    letter-spacing: 1px;

    color: var(--bm-white);

}

.bm-brand-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        56px;

    height:
        56px;

    flex-shrink:
        0;

    background:
        var(--bm-white);

    border-radius:
        50%;

    box-shadow:
        var(--bm-shadow-sm);

}

.bm-brand-badge img {

    width:
        46px;

    height:
        46px;

    object-fit:
        contain;

}

.bm-brand:hover {

    color: var(--bm-white);

}


/* ============================================================
   NAVIGATION
   ============================================================ */

.bm-navbar .nav-link {

    color: var(--bm-text-secondary);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;

    padding:
        34px 14px !important;

    position: relative;

}

.bm-navbar .nav-link:hover,
.bm-navbar .nav-link.active {

    color: var(--bm-white);

}

.bm-navbar .nav-link::after {

    content: '';

    position: absolute;

    bottom: 22px;

    left: 14px;

    width: 0;

    height: 2px;

    background: var(--bm-primary);

    transition:
        var(--bm-transition);

}

.bm-navbar .nav-link:hover::after,
.bm-navbar .nav-link.active::after {

    width: calc(100% - 28px);

}

.bm-navbar-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 20px;

    margin-left: 20px;

}

.bm-navbar-staff-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--bm-muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

}

.bm-navbar-staff-link:hover {

    color: var(--bm-primary);

}


/* ============================================================
   MOBILE NAV
   ============================================================ */

.bm-navbar-toggler {

    border: 0;

    color: var(--bm-white);

    font-size: 28px;

}

.bm-navbar-toggler:focus {

    box-shadow: none;

}


/* ============================================================
   BUTTONS
   ============================================================ */

.bm-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding:
        11px 20px;

    border-radius: var(--bm-radius-sm);

    border: 1px solid transparent;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .7px;

    transition:
        var(--bm-transition);

}

.bm-btn-primary {

    background:
        var(--bm-primary);

    color:
        var(--bm-black);

}

.bm-btn-primary:hover {

    background:
        var(--bm-primary-hover);

    color:
        var(--bm-black);

    transform:
        translateY(-2px);

    box-shadow:
        var(--bm-glow);

}

.bm-btn-outline {

    border-color:
        var(--bm-border-light);

    color:
        var(--bm-white);

    background:
        transparent;

}

.bm-btn-outline:hover {

    border-color:
        var(--bm-primary);

    color:
        var(--bm-primary);

}

.bm-btn-white {

    background:
        var(--bm-white);

    color:
        var(--bm-black);

}

.bm-btn-white:hover {

    background:
        var(--bm-primary);

    color:
        var(--bm-black);

}

.bm-btn-large {

    min-height: 52px;

    padding:
        14px 25px;

    font-size: 11px;

}


/* ============================================================
   HERO — real gym photo, faded from solid brand-dark on the left
   (where the headline text sits) to transparent on the right (so
   the photo itself reads through) — same layering technique as
   the original mockup, now with a real photo behind it.
   ============================================================ */

.bm-hero {

    min-height:
        900px;

    display:
        flex;

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;

    background:

        linear-gradient(
            90deg,
            var(--bm-bg) 0%,
            rgba(8, 10, 11, .82) 42%,
            rgba(8, 10, 11, .25) 100%
        ),

        url('../img/hero-bg.jpg')
        center 22% / cover
        no-repeat;

}

.bm-hero-overlay {

    position:
        absolute;

    inset: 0;

    background:

        linear-gradient(
            0deg,
            var(--bm-bg) 0%,
            transparent 25%
        );

}

.bm-hero-container {

    position:
        relative;

    z-index: 2;

}

.bm-eyebrow,
.bm-section-label {

    display:
        flex;

    align-items:
        center;

    gap: 10px;

    color:
        var(--bm-primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}

.bm-eyebrow span {

    width: 30px;

    height: 2px;

    background:
        var(--bm-primary);

}

.bm-hero-title {

    max-width:
        850px;

    margin:
        20px 0;

    font-size:
        clamp(72px, 9vw, 138px);

    letter-spacing:
        1px;

}

.bm-hero-title strong {

    display:
        block;

    color:
        var(--bm-primary);

    font-weight:
        400;

}

.bm-hero-text {

    max-width:
        540px;

    margin-bottom:
        30px;

    color:
        var(--bm-text-secondary);

    font-size:
        17px;

}

.bm-hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap: 12px;

}

.bm-hero-stats {

    display:
        flex;

    gap: 45px;

    margin-top:
        70px;

}

.bm-hero-stats div {

    display:
        flex;

    flex-direction:
        column;

}

.bm-hero-stats strong {

    color:
        var(--bm-white);

    font-size:
        29px;

    font-weight:
        900;

    line-height:
        1;

}

.bm-hero-stats span {

    margin-top:
        6px;

    color:
        var(--bm-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1px;

}

.bm-scroll {

    position:
        absolute;

    right:
        35px;

    bottom:
        40px;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap: 12px;

    writing-mode:
        vertical-rl;

    color:
        var(--bm-muted);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}

.bm-scroll i {

    color:
        var(--bm-primary);

    font-size:
        15px;

}


/* ============================================================
   SECTIONS
   ============================================================ */

.bm-section {

    padding:
        110px 0;

}

.bm-section-label {

    margin-bottom:
        13px;

}

.bm-section-title {

    margin:
        0;

    font-size:
        clamp(48px, 6vw, 76px);

}

.bm-section-title span {

    color:
        var(--bm-primary);

}

.bm-section-subtitle {

    max-width:
        500px;

    margin:
        15px auto 0;

    color:
        var(--bm-muted);

}


/* ============================================================
   ABOUT — real gym photo with a decorative offset border, same
   layered technique as the original mockup.
   ============================================================ */

.bm-about {

    background:
        var(--bm-bg);

}

.bm-about-image {

    position:
        relative;

    padding:
        0 25px 25px 0;

}

.bm-about-image::after {

    content:
        '';

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        80%;

    height:
        80%;

    border:
        2px solid var(--bm-primary);

    border-radius:
        var(--bm-radius-lg);

    z-index:
        0;

}

.bm-about-image img {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    height:
        540px;

    object-fit:
        cover;

    object-position:
        center 25%;

    border-radius:
        var(--bm-radius-lg);

    box-shadow:
        var(--bm-shadow);

}

.bm-image-badge {

    position:
        absolute;

    right:
        15px;

    top:
        40px;

    z-index:
        2;

    width:
        125px;

    height:
        125px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    background:
        var(--bm-primary);

    border-radius:
        var(--bm-radius);

    color:
        var(--bm-black);

}

.bm-image-badge strong {

    font-family:
        'Bebas Neue';

    font-size:
        48px;

    line-height:
        .8;

}

.bm-image-badge span {

    margin-top:
        8px;

    font-size:
        8px;

    font-weight:
        900;

    line-height:
        1.3;

    text-align:
        center;

}

.bm-section-text {

    color:
        var(--bm-muted);

    margin:
        20px 0;

}

.bm-about-features {

    display:
        grid;

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

    gap:
        13px;

    margin:
        30px 0;

}

.bm-about-features div {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--bm-text);

    font-size:
        12px;

    font-weight:
        600;

}

.bm-about-features i {

    color:
        var(--bm-primary);

}

.bm-text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--bm-primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

}

.bm-text-link:hover {

    color:
        var(--bm-white);

}


/* ============================================================
   PROGRAMS
   ============================================================ */

.bm-programs {

    background:
        var(--bm-bg-2);

}

.bm-section-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        50px;

}

.bm-section-heading > p {

    max-width:
        410px;

    margin:
        0;

    color:
        var(--bm-muted);

    font-size:
        13px;

}

.bm-program-card {

    position:
        relative;

    min-height:
        340px;

    padding:
        30px;

    background:
        var(--bm-card);

    border:
        1px solid var(--bm-border);

    border-radius:
        var(--bm-radius);

    box-shadow:
        var(--bm-shadow-sm);

    transition:
        var(--bm-transition);

    overflow:
        hidden;

}

.bm-program-card:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--bm-primary-dark);

    box-shadow:
        var(--bm-shadow);

}

.bm-program-number {

    position:
        absolute;

    top:
        15px;

    right:
        20px;

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

    font-family:
        'Bebas Neue';

    font-size:
        80px;

}

.bm-program-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        30px;

    background:
        rgba(246, 8, 15, .08);

    border-radius:
        var(--bm-radius-sm);

    color:
        var(--bm-primary);

    font-size:
        22px;

}

.bm-program-card h3 {

    margin-bottom:
        15px;

    font-size:
        25px;

}

.bm-program-card p {

    color:
        var(--bm-muted);

    font-size:
        12px;

}

.bm-program-card a {

    position:
        absolute;

    bottom:
        27px;

    left:
        30px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--bm-primary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


/* ============================================================
   STATS
   ============================================================ */

.bm-stats-strip {

    padding:
        55px 0;

    background:
        var(--bm-primary);

}

.bm-big-stat {

    text-align:
        center;

    padding:
        15px;

    border-right:
        1px solid rgba(0,0,0,.15);

}

.bm-big-stat strong {

    display:
        block;

    color:
        var(--bm-black);

    font-family:
        'Bebas Neue';

    font-size:
        50px;

    line-height:
        1;

}

.bm-big-stat span {

    color:
        rgba(0,0,0,.65);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


/* ============================================================
   TRAINERS
   ============================================================ */

.bm-trainer-card {

    background:
        var(--bm-card);

    border:
        1px solid var(--bm-border);

    border-radius:
        var(--bm-radius);

    box-shadow:
        var(--bm-shadow-sm);

    overflow:
        hidden;

    transition:
        var(--bm-transition);

}

.bm-trainer-card:hover {

    border-color:
        var(--bm-border-light);

    box-shadow:
        var(--bm-shadow);

}

.bm-trainer-image {

    position:
        relative;

    overflow:
        hidden;

}

.bm-trainer-image img {

    width:
        100%;

    height:
        430px;

    object-fit:
        cover;

    transition:
        var(--bm-transition);

}

.bm-trainer-card:hover .bm-trainer-image img {

    transform:
        scale(1.04);

}

.bm-trainer-image-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        430px;

    background:

        radial-gradient(
            ellipse 380px 260px at 30% 15%,
            rgba(246, 8, 15, .16) 0%,
            transparent 60%
        ),

        var(--bm-bg-3);

    color:
        var(--bm-primary);

    font-family:
        'Bebas Neue';

    font-size:
        64px;

    letter-spacing:
        1px;

}

.bm-trainer-info {

    padding:
        25px;

}

.bm-trainer-info > span {

    color:
        var(--bm-primary);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

}

.bm-trainer-info h3 {

    margin:
        7px 0;

    font-size:
        30px;

}

.bm-trainer-info p {

    margin:
        0;

    color:
        var(--bm-muted);

    font-size:
        11px;

}

.bm-empty-panel {

    padding:
        60px 30px;

    background:
        var(--bm-card);

    border:
        1px dashed var(--bm-border-light);

    border-radius:
        var(--bm-radius);

    text-align:
        center;

    color:
        var(--bm-muted);

}

.bm-empty-panel i {

    display:
        block;

    margin-bottom:
        14px;

    font-size:
        30px;

    color:
        var(--bm-primary);

}


/* ============================================================
   PRICING
   ============================================================ */

.bm-pricing {

    background:
        var(--bm-bg-2);

}

.bm-price-card {

    position:
        relative;

    height:
        100%;

    padding:
        35px;

    background:
        var(--bm-card);

    border:
        1px solid var(--bm-border);

    border-radius:
        var(--bm-radius);

    box-shadow:
        var(--bm-shadow-sm);

    transition:
        var(--bm-transition);

}

.bm-price-card:hover {

    border-color:
        var(--bm-border-light);

    box-shadow:
        var(--bm-shadow);

}

.bm-price-header span {

    color:
        var(--bm-primary);

    font-family:
        'Bebas Neue';

    font-size:
        34px;

}

.bm-price-header p {

    margin:
        0;

    color:
        var(--bm-muted);

    font-size:
        11px;

}

.bm-price {

    margin:
        25px 0;

    color:
        var(--bm-white);

    font-family:
        'Bebas Neue';

    font-size:
        56px;

    line-height:
        1;

}

.bm-price small {

    font-family:
        'Inter';

    font-size:
        20px;

}

.bm-price span {

    color:
        var(--bm-muted);

    font-family:
        'Inter';

    font-size:
        9px;

    font-weight:
        700;

}

.bm-price-divider {

    height:
        1px;

    background:
        var(--bm-border);

    margin-bottom:
        25px;

}

.bm-price-card ul {

    list-style:
        none;

    padding:
        0;

    margin:
        0 0 30px;

}

.bm-price-card li {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px 0;

    color:
        var(--bm-text);

    font-size:
        11px;

}

.bm-price-card li i {

    color:
        var(--bm-primary);

}


/* ============================================================
   TESTIMONIAL
   ============================================================ */

.bm-testimonial {

    position:
        relative;

    padding:
        110px 0;

    background:

        linear-gradient(
            to bottom,
            rgba(5, 6, 7, .88) 0%,
            rgba(5, 6, 7, .88) 78%,
            rgba(5, 6, 7, 1) 100%
        ),

        url('../img/testimonial-bg.jpg')
        center 20% / cover
        no-repeat;

    text-align:
        center;

}

.bm-testimonial-content {

    max-width:
        850px;

    margin:
        auto;

}

.bm-quote {

    color:
        var(--bm-primary);

    font-family:
        Georgia,
        serif;

    font-size:
        100px;

    line-height:
        .6;

}

.bm-testimonial blockquote {

    margin:
        30px 0;

    color:
        var(--bm-white);

    font-family:
        'Bebas Neue';

    font-size:
        clamp(30px, 4vw, 48px);

    line-height:
        1.15;

}

.bm-testimonial-author {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    text-align:
        left;

}

.bm-testimonial-avatar {

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--bm-primary);

    border-radius:
        50%;

    color:
        var(--bm-black);

    font-size:
        11px;

    font-weight:
        900;

}

.bm-testimonial-author strong {

    display:
        block;

    color:
        var(--bm-white);

    font-size:
        11px;

}

.bm-testimonial-author span {

    display:
        block;

    color:
        var(--bm-muted);

    font-size:
        8px;

    letter-spacing:
        1px;

}


/* ============================================================
   CTA — real gym photo, same dark-fade layering as the Hero
   ============================================================ */

.bm-cta {

    position:
        relative;

    padding:
        140px 0;

    background:

        linear-gradient(
            to bottom,
            rgba(5, 6, 7, 1) 0%,
            rgba(5, 6, 7, 0) 14%
        ),

        linear-gradient(
            90deg,
            var(--bm-black) 0%,
            rgba(5, 6, 7, .82) 45%,
            rgba(5, 6, 7, .35) 100%
        ),

        url('../img/cta-bg.jpg')
        center 30% / cover
        no-repeat;

}

.bm-cta-content {

    position:
        relative;

    max-width:
        800px;

}

.bm-cta h2 {

    margin:
        15px 0;

    font-size:
        clamp(55px, 7vw, 90px);

}

.bm-cta h2 span {

    display:
        block;

    color:
        var(--bm-primary);

}

.bm-cta p {

    max-width:
        580px;

    color:
        var(--bm-text-secondary);

}

.bm-cta-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;

}


/* ============================================================
   CONTACT
   ============================================================ */

.bm-contact {

    background:
        var(--bm-bg);

}

.bm-contact-details {

    margin-top:
        35px;

}

.bm-contact-details > div {

    display:
        flex;

    gap:
        15px;

    margin-bottom:
        25px;

}

.bm-contact-details i {

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(246, 8, 15, .08);

    border-radius:
        var(--bm-radius-sm);

    color:
        var(--bm-primary);

}

.bm-contact-details strong {

    display:
        block;

    color:
        var(--bm-white);

    font-size:
        10px;

    letter-spacing:
        1px;

}

.bm-contact-details span {

    display:
        block;

    color:
        var(--bm-muted);

    font-size:
        11px;

}

.bm-contact-form {

    padding:
        40px;

    background:
        var(--bm-card);

    border:
        1px solid var(--bm-border);

    border-radius:
        var(--bm-radius);

    box-shadow:
        var(--bm-shadow-sm);

}

.bm-contact-form h3 {

    margin:
        0 0 8px;

    font-size:
        35px;

}

.bm-contact-form > p {

    color:
        var(--bm-muted);

    font-size:
        12px;

    margin-bottom:
        25px;

}

.bm-contact-form label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--bm-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

}

.bm-contact-form .form-control,
.bm-contact-form .form-select {

    min-height:
        48px;

    background:
        var(--bm-bg-3);

    border:
        1px solid var(--bm-border);

    border-radius:
        var(--bm-radius-sm);

    color:
        var(--bm-white);

    font-size:
        12px;

}

.bm-contact-form textarea.form-control {

    min-height:
        120px;

}

.bm-contact-form .form-control::placeholder {

    color:
        var(--bm-muted-dark);

}

.bm-contact-form .form-control:focus,
.bm-contact-form .form-select:focus {

    border-color:
        var(--bm-primary);

    box-shadow:
        0 0 0 2px rgba(246, 8, 15, .12);

    background:
        var(--bm-bg-3);

    color:
        var(--bm-white);

}


/* ============================================================
   FOOTER
   ============================================================ */

.bm-footer {

    padding:
        70px 0 0;

    background:
        var(--bm-black);

    border-top:
        1px solid var(--bm-border);

}

.bm-footer-brand {

    display:
        inline-flex;

    margin-bottom:
        15px;

}

.bm-footer p {

    max-width:
        350px;

    color:
        var(--bm-muted);

    font-size:
        11px;

}

.bm-footer-contact {

    list-style:
        none;

    padding:
        0;

    margin:
        0;

}

.bm-footer-contact li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        14px;

    color:
        var(--bm-muted);

    font-size:
        11px;

    line-height:
        1.5;

}

.bm-footer-contact i {

    flex-shrink:
        0;

    margin-top:
        2px;

    color:
        var(--bm-primary);

    font-size:
        13px;

}

.bm-footer-contact strong {

    display:
        block;

    color:
        var(--bm-white);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

    margin-bottom:
        2px;

}

.bm-footer-contact a {

    color:
        var(--bm-muted);

}

.bm-footer-contact a:hover {

    color:
        var(--bm-primary);

}

.bm-socials {

    display:
        flex;

    gap:
        7px;

    margin-top:
        20px;

}

.bm-socials a {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--bm-bg-3);

    border-radius:
        var(--bm-radius-sm);

    color:
        var(--bm-muted);

    border:
        1px solid var(--bm-border);

    transition:
        var(--bm-transition);

}

.bm-socials a:hover {

    background:
        var(--bm-primary);

    border-color:
        var(--bm-primary);

    color:
        var(--bm-black);

}

.bm-footer h4 {

    margin:
        5px 0 18px;

    color:
        var(--bm-white);

    font-family:
        'Inter';

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

}

.bm-footer ul {

    list-style:
        none;

    padding:
        0;

    margin:
        0;

}

.bm-footer li {

    margin-bottom:
        7px;

}

.bm-footer li a {

    color:
        var(--bm-muted);

    font-size:
        11px;

}

.bm-footer li a:hover {

    color:
        var(--bm-primary);

}

.bm-newsletter {

    display:
        flex;

    border:
        1px solid var(--bm-border);

    border-radius:
        var(--bm-radius-sm);

    overflow:
        hidden;

}

.bm-newsletter input {

    flex:
        1;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    background:
        var(--bm-bg-3);

    color:
        var(--bm-white);

    padding:
        12px;

    font-size:
        11px;

}

.bm-newsletter input::placeholder {

    color:
        var(--bm-muted-dark);

}

.bm-newsletter button {

    width:
        50px;

    border:
        0;

    background:
        var(--bm-primary);

    color:
        var(--bm-black);

}

.bm-footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        55px;

    padding:
        22px 0;

    border-top:
        1px solid var(--bm-border);

    color:
        var(--bm-muted-dark);

    font-size:
        9px;

}

.bm-footer-bottom div {

    display:
        flex;

    gap:
        20px;

}

.bm-footer-bottom a {

    color:
        var(--bm-muted-dark);

}

.bm-footer-bottom a:hover {

    color:
        var(--bm-primary);

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

    .bm-navbar {

        min-height:
            75px;

    }

    .bm-navbar .nav-link {

        padding:
            10px 0 !important;

    }

    .bm-navbar .nav-link::after {

        display:
            none;

    }

    .bm-navbar .navbar-collapse {

        padding:
            20px 0;

        background:
            rgba(8,10,11,.97);

    }

    .bm-navbar-actions {

        margin-left:
            0;

        margin-top:
            16px;

        justify-content:
            center;

    }

    .bm-hero {

        min-height:
            800px;

    }

    .bm-hero-title {

        font-size:
            clamp(65px, 12vw, 100px);

    }

    .bm-section-heading {

        align-items:
            start;

        flex-direction:
            column;

    }

}


@media (max-width: 767px) {

    .bm-section {

        padding:
            75px 0;

    }

    .bm-hero {

        min-height:
            750px;

    }

    .bm-hero-title {

        font-size:
            70px;

    }

    .bm-hero-text {

        font-size:
            14px;

    }

    .bm-hero-stats {

        gap:
            20px;

        margin-top:
            45px;

    }

    .bm-hero-stats strong {

        font-size:
            23px;

    }

    .bm-hero-stats span {

        font-size:
            7px;

    }

    .bm-scroll {

        display:
            none;

    }

    .bm-about-image img {

        height:
            360px;

    }

    .bm-about-features {

        grid-template-columns:
            1fr;

    }

    .bm-big-stat {

        border-right:
            0;

        border-bottom:
            1px solid rgba(0,0,0,.15);

    }

    .bm-trainer-image img,
    .bm-trainer-image-placeholder {

        height:
            380px;

    }

    .bm-contact-form {

        padding:
            25px;

    }

    .bm-footer-bottom {

        align-items:
            start;

        flex-direction:
            column;

    }

}


@media (max-width: 480px) {

    .bm-brand-badge {

        width:
            44px;

        height:
            44px;

    }

    .bm-brand-badge img {

        width:
            36px;

        height:
            36px;

    }

    .bm-hero-title {

        font-size:
            60px;

    }

    .bm-hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }

    .bm-hero-buttons .bm-btn {

        width:
            100%;

    }

    .bm-hero-stats {

        justify-content:
            space-between;

    }

    .bm-hero-stats strong {

        font-size:
            20px;

    }

    .bm-section-title {

        font-size:
            48px;

    }

}