/* =========================
   VARIABLES
========================= */

:root {

    --green: #53613D;

    --green-dark: #263020;

    --green-light: #7D8C61;

    --orange: #E76F24;

    --cream: #F3F1E9;

    --white: #FFFFFF;

    --black: #151515;

    --gray: #747474;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background: var(--cream);

    color: var(--black);

}


/* =========================
   NAVBAR
========================= */

.navbar {

    width: 100%;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 6%;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 100;

    color: white;

}


.logo {

    color: white;

    text-decoration: none;

    font-size: 1.4rem;

    font-weight: 900;

    letter-spacing: -1px;

    line-height: 0.8;

}

.logo img{
    display: block;
    width: 150px;
}

.logo span {

    display: inline;

}


.logo small {

    display: block;

    font-size: 0.55rem;

    letter-spacing: 5px;

    margin-top: 7px;

}


.nav-links {

    display: flex;

    gap: 35px;

}

.nav-logo {
    display: none;
    position: absolute;
    width: 150px;
    top: 50px;
}

.nav-links a {

    color: white;

    text-decoration: none;

    font-size: 0.75rem;

    letter-spacing: 1.5px;

    font-weight: bold;

}


.menu-button {

    display: none;

}

.b{
    transition: all 1s;
}

.powered.nav {
    display: none;
    position: absolute;
    bottom: 50px;
}

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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    padding: 0 10%;

    color: white;

    background:

        url("assets/images/mbm02.jpg")

        center / cover

        no-repeat;
}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(22, 32, 18, 0.9),
            rgba(22, 32, 18, 0.5),
            rgba(0, 0, 0, 0.1)
        );

}


.hero-content {

    position: relative;

    max-width: 800px;

}


.hero-kicker {

    font-size: 0.8rem;

    letter-spacing: 5px;

    margin-bottom: 25px;

}


.hero h1 {

    font-size: clamp(3.5rem, 7vw, 7rem);

    line-height: 0.9;

    letter-spacing: -4px;

}


.hero h1 span {

    display: block;

    color: var(--orange);

}


.hero-description {

    max-width: 450px;

    margin-top: 30px;

    font-size: 1.1rem;

    line-height: 1.7;

}


.primary-button {

    display: inline-block;

    margin-top: 35px;

    padding: 18px 28px;

    background: var(--orange);

    color: white;

    text-decoration: none;

    font-size: 0.75rem;

    font-weight: bold;

    letter-spacing: 2px;

    transition: 0.3s;

}


.primary-button:hover {

    transform: translateY(-3px);

    background: white;

    color: var(--black);

}


.hero-scroll {

    position: absolute;

    bottom: 40px;

    right: 7%;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 0.65rem;

    letter-spacing: 3px;

    transform: rotate(90deg);

    transform-origin: right;

}


.scroll-line {

    width: 70px;

    height: 1px;

    background: var(--orange);

}


/* =========================
   LABELS
========================= */

.section-label {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.7rem;

    font-weight: bold;

    letter-spacing: 3px;

    color: var(--green);

}


.section-label span {

    width: 35px;

    height: 2px;

    background: var(--orange);

}


/* =========================
   INTRO
========================= */

.intro {

    max-width: 1000px;

    margin: auto;

    padding: 140px 8%;

}


.intro h2 {

    margin-top: 30px;

    font-size: clamp(3rem, 6vw, 6rem);

    line-height: 0.95;

    letter-spacing: -3px;

}


.intro h2 span {

    color: var(--green);

}


.intro p {

    max-width: 600px;

    margin-top: 40px;

    font-size: 1.1rem;

    line-height: 1.8;

    color: var(--gray);

}


/* =========================
   EVENTS
========================= */

.events {

    padding: 100px 7%;

    background: var(--green-dark);

    color: white;

}


.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 60px;

}


.section-heading h2 {

    margin-top: 25px;

    font-size: clamp(3rem, 5vw, 5rem);

    line-height: 0.9;

}


.section-heading h2 span {

    color: var(--orange);

}


.section-heading p {

    max-width: 300px;

    line-height: 1.7;

    color: #B7B7B7;

}


.events-grid {

    display: grid;

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

    gap: 30px;

}


/* =========================
   EVENT CARD
========================= */

.event-card {

    background: var(--cream);

    color: var(--black);

}


.event-image {

    height: 420px;

    background:

        url("assets/images/hero-bike1.webp")

        center / cover

        no-repeat;

}


.social-image {

    background:

        url("assets/images/mbm01.jpg")

        center / cover

        no-repeat;

}


.event-content {

    padding: 40px;

}


.event-date {

    display: flex;

    align-items: center;

    gap: 15px;

    color: var(--orange);

}


.event-date > span {

    font-size: 3rem;

    font-weight: bold;

}


.event-date strong {

    display: block;

    font-size: 0.75rem;

    letter-spacing: 2px;

}


.event-date small {

    color: var(--gray);

}


.event-content h3 {

    margin-top: 25px;

    font-size: 2.2rem;

    line-height: 0.95;

}


.event-content p {

    margin-top: 20px;

    line-height: 1.7;

    color: var(--gray);

}


.event-details {

    display: flex;

    justify-content: space-between;

    margin-top: 35px;

    padding-top: 20px;

    border-top: 1px solid #D5D5D5;

    font-size: 0.65rem;

    letter-spacing: 1px;

    font-weight: bold;

}


.event-button {

    display: flex;

    justify-content: space-between;

    margin-top: 30px;

    color: var(--green);

    text-decoration: none;

    font-size: 0.75rem;

    font-weight: bold;

    letter-spacing: 1.5px;

}


.event-button span {

    font-size: 1.3rem;

}


/* =========================
   EXPERIENCE
========================= */

.experience {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 700px;

}


.experience-image {

    background:

        url("assets/images/mbm02.jpg")

        center / cover

        no-repeat;

}


.experience-content {

    padding: 100px 12%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.experience-content h2 {

    margin-top: 30px;

    font-size: clamp(3rem, 5vw, 5.5rem);

    line-height: 0.9;

}


.experience-content h2 span {

    color: var(--orange);

}


.experience-content p {

    margin-top: 35px;

    line-height: 1.8;

    color: var(--gray);

}


.experience-stats {

    display: flex;

    gap: 35px;

    margin-top: 60px;

}


.experience-stats div {

    display: flex;

    flex-direction: column;

}


.experience-stats strong {

    font-size: 2rem;

    color: var(--green);

}


.experience-stats span {

    margin-top: 8px;

    font-size: 0.65rem;

    letter-spacing: 2px;

}


/* =========================
   SOCIAL
========================= */

.social-section {

    text-align: center;

    padding: 140px 20px;

    background: var(--green);

    color: white;

}


.social-section .section-label {

    justify-content: center;

    color: var(--cream);

}


.social-section h2 {

    margin-top: 30px;

    font-size: clamp(3rem, 6vw, 6rem);

    line-height: 0.9;

}


.social-section h2 span {

    color: var(--orange);

}


.social-section p {

    max-width: 500px;

    margin: 30px auto;

    line-height: 1.7;

    color: #D9DDCF;

}


.social-links {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-top: 40px;

}


.social-links a {

    color: white;

    text-decoration: none;

    font-size: 0.75rem;

    letter-spacing: 2px;

    font-weight: bold;

}


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

.contact {

    padding: 100px 7%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.contact h2 {

    margin-top: 25px;

    font-size: clamp(2.5rem, 5vw, 5rem);

    line-height: 0.95;

}


.contact h2 span {

    display: block;

    color: var(--green);

}


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

footer {

    padding: 50px 7%;

    background: var(--black);

    color: #888;

    display: grid;

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

    align-items: center;

    gap: 30px;

    font-size: 0.7rem;

}


.footer-logo {

    color: white;

    font-size: 1.2rem;

    font-weight: bold;

}

.footer-logo img {
    width: 100px;
}


.footer-logo small {

    display: block;

    font-size: 0.45rem;

    letter-spacing: 5px;

}


.powered {

    text-align: right;

}

.rigths {
     
    text-align: center;
     
}


.powered a {

    color: white;

    text-decoration: none;

}


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

@media (max-width: 800px) {


    .nav-links {

        display: flex;
        position: fixed;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;

        transform: translateX(-100%);
        transition: all 1s;

        background-color: #53613D;
        padding: 40px;

    }

    .nav-links.active {
        transform: translateX(0);
    }

    .menu-button {

        display: block;
        position: fixed;
        top: 30px;
        right: 30px;

        background: none;

        border: none;

        z-index: 99999;

    }

    .b {
        display: block;
        width: 30px;
        height: 4px;

        border-radius: 5px;

        background-color: white;
    }

    .b-1, .b-2 {
        margin-bottom: 4px;
    }

    .b.close {
        background-color: #E76F24;
    }

    .b-2.close {
        transform: scaleX(0);
    }

    .b-1.close {
        transform: rotate(-45deg) translateY(11.5px);
    }

    .b-3.close {
        transform: rotate(45deg) translateY(-11.5px);
    }

    .section-heading {

        flex-direction: column;

        align-items: start;

        gap: 30px;

    }


    .events-grid {

        grid-template-columns: 1fr;

    }


    .experience {

        grid-template-columns: 1fr;

    }


    .experience-image {

        min-height: 500px;

    }


    .contact {

        flex-direction: column;

        align-items: start;

        gap: 20px;

    }


    footer {

        grid-template-columns: 1fr;

    }

    .footer-logo {

        width: 100%;
        align-items: center;
        justify-content: center;

    }

    .footer-logo img {

        display: block;
        margin: auto;
        width: 200px;

    }

    .powered {

        text-align: center;

    }

    .powered.nav, .nav-logo {
        display: block;
    }

}