/* =========================================================
   AIRBOUND — TRAMPOLINE RENTALS
   Main Stylesheet
========================================================= */


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

:root {
    /* =====================================================
       BRAND COLORS
       ===================================================== */
    --coral: #EF767A;
    --blue: #456990;
    --mint: #E0F5F1;
    --green: #49DCB1;
    --yellow: #EEB868;


    /* =====================================================
       BRAND DARK VARIANTS
       ===================================================== */
    --coral-dark: #D95F64;
    --blue-dark: #355574;
    --mint-dark: #BFE5DE;
    --green-dark: #20B88F;
    --yellow-dark: #C99243;


    /* =====================================================
       SOFT / SURFACE COLORS
       ===================================================== */
    --coral-soft: rgba(239, 118, 122, 0.12);
    --blue-soft: rgba(69, 105, 144, 0.16);
    --mint-soft: rgba(224, 245, 241, 0.12);
    --green-soft: rgba(73, 220, 177, 0.12);
    --yellow-soft: rgba(238, 184, 104, 0.12);


    /* =====================================================
       NEUTRALS & BACKGROUNDS
       ===================================================== */
    --black: #0D0D0E;
    --dark: #16161A;
    --dark-soft: #222228;

    --white: #FFFFFF;
    --off-white: #F0F0F5;

    --gray-light: #2A2A32;
    --gray: #A0A0AB;
    --gray-dark: #C4C4CD;


    /* =====================================================
       SEMANTIC ASSIGNMENTS
       ===================================================== */
    --accent: var(--coral);
    --secondary: var(--blue);
    --highlight: var(--green);
    --decorative: var(--yellow);


    /* =====================================================
       UI STRUCTURE
       ===================================================== */
    --border: #2A2A32;
    --container: 1200px;
    --transition: 0.3s ease;
}

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

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

html {
    scroll-behavior: smooth;

    scroll-padding-top: 90px;
}

body {
    font-family: "Inter", sans-serif;

    background: var(--white);
    color: var(--black);

    line-height: 1.6;

    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;

    width: 100%;
}

a {
    color: inherit;

    text-decoration: none;
}

button {
    font: inherit;
}

ul {
    list-style: none;
}


/* =========================================================
   GLOBAL
========================================================= */

.container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;
}

.section {
    padding: 120px 0;
}

.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: var(--green-dark);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.section-eyebrow i {
    font-size: 0.8rem;
}

.section-heading {
    max-width: 720px;

    margin: 0 auto 70px;

    text-align: center;
}

.section-heading h2,
.intro-content h2,
.events-content h2 {
    font-family: "Barlow Condensed", sans-serif;

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

    font-weight: 900;

    line-height: 0.88;

    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.section-heading h2 span,
.intro-content h2 span,
.events-content h2 span {
    color: var(--accent-dark);
}

.section-heading p {
    max-width: 550px;

    margin: 25px auto 0;

    color: var(--gray);

    font-size: 1rem;
}


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

.primary-button,
.secondary-button,
.nav-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 15px 23px;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.primary-button {

    background: var(--accent);

    color: var(--black);

    border: 2px solid var(--accent);
}

.primary-button:hover {

    background: var(--white);

    border-color: var(--white);

    transform: translateY(-3px);
}

.secondary-button {

    border: 2px solid rgba(
        255,
        255,
        255,
        0.55
    );

    color: var(--white);
}

.secondary-button:hover {

    background: var(--white);

    border-color: var(--white);

    color: var(--black);
}


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

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(
        16,
        16,
        20,
        0.82
    );

    backdrop-filter: blur(15px);

    border-bottom: 1px solid rgba(
        255,
        255,
        255,
        0.08
    );

    transition:
        background var(--transition),
        box-shadow var(--transition);
}

.navbar.scrolled {

    background: rgba(
        16,
        16,
        20,
        0.98
    );

    box-shadow:
        0 12px 35px rgba(
            0,
            0,
            0,
            0.2
        );
}

.navbar-container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    min-height: 82px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* Logo */

.logo {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--white);
}

.logo-icon {

    width: 70px;

    display: grid;

    place-items: center;

    /*background: var(--accent);*/

    color: var(--black);

    border-radius: 50%;

    font-size: 0.95rem;
}

.logo-text {

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.75rem;

    font-weight: 900;

    letter-spacing: 0.04em;
}


/* Desktop navigation */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 26px;
}

.desktop-nav > a:not(.nav-button) {

    position: relative;

    color: rgba(
        255,
        255,
        255,
        0.78
    );

    font-size: 0.78rem;

    font-weight: 600;

    transition: color var(--transition);
}

.desktop-nav > a:not(.nav-button)::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--accent);

    transition: width var(--transition);
}

.desktop-nav > a:not(.nav-button):hover {

    color: var(--white);
}

.desktop-nav > a:not(.nav-button):hover::after {

    width: 100%;
}


/* Active navigation */

.desktop-nav > a.active:not(.nav-button) {

    color: var(--white);
}

.desktop-nav > a.active:not(.nav-button)::after {

    width: 100%;
}


/* Nav CTA */

.nav-button {

    padding: 12px 19px;

    background: var(--green);

    color: var(--black);

    border: 2px solid var(--green-dark);
}

.nav-button:hover {

    background: var(--white);

    border-color: var(--white);

    transform: translateY(-2px);
}


/* Mobile menu */

.mobile-menu-button {

    display: none;

    width: 44px;
    height: 44px;

    place-items: center;

    background: transparent;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.2
    );

    color: var(--white);

    cursor: pointer;
}

.mobile-nav {

    display: none;
}


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

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    background-image:
        url("../img/back.jpeg");

    background-size: cover;

    background-position: center;

    color: var(--white);

    overflow: hidden;
}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.62) 42%,
            rgba(0, 0, 0, 0.12) 100%
        );
}

.hero-content {

    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;

    padding-top: 90px;
}

.hero-content .section-eyebrow {

    color: var(--yellow);
}

.hero-content h1 {

    max-width: 900px;

    font-family:
        "Barlow Condensed",
        sans-serif;

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

    font-weight: 900;

    line-height: 0.78;

    letter-spacing: -0.035em;

    text-transform: uppercase;
}

.hero-content h1 span {

    display: block;

    color: var(--yellow);
}

.hero-content > p {

    max-width: 590px;

    margin: 32px 0;

    color: rgba(
        255,
        255,
        255,
        0.82
    );

    font-size: 1.08rem;
}

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.hero-trust {

    margin-top: 55px;

    display: flex;

    flex-wrap: wrap;

    gap: 25px;
}

.hero-trust div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(
        255,
        255,
        255,
        0.7
    );

    font-size: 0.72rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.hero-trust i {

    color: var(--accent);

    font-size: 0.9rem;
}

.hero-scroll {

    position: absolute;

    right: 35px;
    bottom: 35px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    color: rgba(
        255,
        255,
        255,
        0.6
    );

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    writing-mode: vertical-rl;
}

.hero-scroll i {

    color: var(--accent);
}