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

header{
    background:#171717;
    position:sticky;
    top:0;
    z-index:1000;
}

.navbar{
    max-width:1200px;
    margin:auto;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    position:relative;
}

/* Center the logo */
.logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

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

/* Navigation */
.nav-links{
    display:flex;
    list-style:none;
    gap:35px;
    margin-left:60px;
}

.nav-links a{
    color:#fff;
    font-weight:500;
}

.nav-links a:hover,
.nav-links a.active{
    color:#f47b00;
}

/* Right side */
.icons{
    margin-left:auto;
}

.cart{
    color:#fff;
    font-size:22px;
}

/* Hamburger */
.menu-btn{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

.icons i{
    color:#fff;
    font-size:24px;
    cursor:pointer;
    transition:.3s;
}

.icons i:hover{
    color:#f47b00;
}

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

@media (max-width:768px){

    /* Navbar */

    .navbar{
        padding:0 20px;
    }

    .menu-btn{
        display:block;
        background:none;
        border:none;
        color:#fff;
        font-size:30px;
        cursor:pointer;
        z-index:1002;
    }

    .logo img{
        width:70px;
    }

    .cart{
        font-size:22px;
    }

    /* Mobile Menu */

    .nav-links{
        position:fixed;
        top:70px;
        left:0;

        width:100vw;
        height:0;

        margin:0;
        padding:0;

        overflow:hidden;

        list-style:none;
        background:#171717;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:35px;

        transition:height .35s ease;

        z-index:999;
    }

    .nav-links.active{
        height:320px;
        padding-top:40px;
    }

    .nav-links li{
        list-style:none;
        margin:0;
        padding:0;
    }

    .nav-links a{
        color:#fff;
        font-size:20px;
        font-weight:500;
        text-decoration:none;
    }

    .nav-links a.active{
        color:#f47b00;
    }

    /* Training */

    .training{
        padding:60px 20px;
    }

    .training h1{
        font-size:38px;
    }

    .cards{
        gap:20px;
    }

    .card{
        width:100%;
    }

    /* Booking */

    .booking{
        padding:70px 20px;
    }

    .booking h2{
        font-size:36px;
    }

    .booking button{
        width:100%;
        max-width:280px;
    }

    /* FAQ */

    .faq{
        grid-template-columns:1fr;
        gap:50px;
        padding:0 20px;
    }

    .faq-title h2{
        font-size:42px;
        text-align:center;
    }

    .faq-item h3{
        font-size:22px;
    }

    /* Contact */

    .contact{
        padding:70px 0;
    }

    .contact-container{
        display:flex;
        flex-direction:column;
        gap:50px;
        padding:0 25px;
    }

    .contact-info{
        width:100%;
        max-width:100%;
        text-align:center;
    }

    .contact-info h2{
        font-size:42px;
        margin-bottom:25px;
    }

    .contact-info > p{
        max-width:320px;
        margin:0 auto 35px;
        line-height:1.8;
    }

    .info{
        text-align:center;
        margin-bottom:25px;
    }

    .info h4{
        margin-bottom:8px;
    }

    .info p{
        margin:0;
    }

    .contact-form{
        width:100%;
    }

    .contact-form form{
        width:100%;
    }

    .contact-form input,
    .contact-form textarea{
        width:100%;
    }

    .contact-form button{
        width:100%;
    }

    body{
        overflow-x:hidden;
    }

}