/* ==========================================
FALCON SPORTS
Responsive Stylesheet
========================================== */


/* ==========================================
COMMON MOBILE COMPONENTS
========================================== */

/* Hamburger Menu */

.menu-toggle{
    display:none;
    width:45px;
    height:45px;
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
}

.menu-toggle span{
    width:28px;
    height:3px;
    background:#081f63;
    border-radius:5px;
    transition:.3s;
}


/* ==========================================
TABLET
992px
========================================== */

@media (max-width:992px){

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

    .logo img{
        height:58px;
    }

    .header-right{
        display:none;
    }

    .menu-toggle{
        display:flex;
        margin-left:auto;
        position:relative;
        z-index:10000;
    }

    nav{
        position:fixed;
        top:0;
        right:-100%;
        width:100%;
        height:100vh;

        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;

        padding:100px 30px 30px;

        gap:22px;

        background:#fff;

        transition:.35s ease;

        z-index:9999;
    }

    nav.active{
        right:0;
    }

    nav a{
        width:100%;
        padding:15px 0;
        border-bottom:1px solid #ececec;
        font-size:16px;
    }

    nav a.active::after{
        display:none;
    }


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

    .hero{

    min-height:700px;

    align-items:flex-start;

    padding-top:120px;

    background-size:cover;

    background-position:72% center;

}

    .hero-content{

    width:100%;

    max-width:520px;

    padding:0 25px;

    margin:0;

}

    .hero h1{

    font-size:52px;

    line-height:.95;

    letter-spacing:-1px;

    margin-bottom:20px;

}

    .hero p{

    max-width:420px;

    font-size:16px;

    line-height:1.7;

}

    .hero-buttons{

    width:100%;

    max-width:280px;

}

.hero-buttons a{

    width:100%;

}

}
/* ==========================================
MOBILE
768px
========================================== */

@media (max-width:768px){

    /* HERO */

    .hero{
        min-height:620px;
        padding-top:90px;
        background-position:78% center;
    }

    .hero-content{
        padding:0 20px;
        max-width:300px;
    }

    .hero h1{
        font-size:42px;
        line-height:.95;
        letter-spacing:0;
    }

    .hero p{
        font-size:14px;
        line-height:1.6;
        max-width:260px;
    }

    .hero-buttons{
        max-width:220px;
    }

    .hero-buttons a{
        height:52px;
        font-size:13px;
    }

}