/* ==========================================
   Responsive Styles
========================================== */

/* Large Tablets */
@media (max-width:1200px){

    h1{
        font-size:48px;
    }

    h2{
        font-size:36px;
    }

    .hero-grid,
    .download-grid{

        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        margin-top:40px;

    }

    .timeline{

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

    }

}

/* Tablets */

@media (max-width:992px){

    .navbar{

        display:none;

        position:absolute;

        top:90px;
        left:0;

        width:100%;

        background:#fff;

        box-shadow:0 10px 30px rgba(0,0,0,.1);

        padding:30px;

    }

    .navbar.active{

        display:block;

    }

    .navbar ul{

        flex-direction:column;

        gap:20px;

    }

    .menu-btn{

        display:block;

    }

    .stats-grid{

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

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:auto auto 25px;

    }

}

/* Mobile */

@media (max-width:768px){

    .container{

        width:92%;

    }

    h1{

        font-size:36px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:16px;

    }

    .hero{

        padding-top:140px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-image img{

        width:260px;

    }

    .sports-grid,
    .feature-grid,
    .stats-grid,
    .timeline{

        grid-template-columns:1fr;

    }

    .download-grid{

        gap:40px;

    }

    .qr-placeholder{

        width:220px;

        height:220px;

    }

    .faq-question{

        font-size:16px;

        padding:20px;

    }

    .cta-box{

        padding:50px 25px;

    }

}

/* Small Phones */

@media (max-width:480px){

    .header .container{

        padding:15px 0;

    }

    .logo img{

        height:52px;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:26px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

    .stat-card{

        padding:25px;

    }

    .sport-card,
    .feature-card,
    .step{

        padding:25px;

    }

    .download-list li{

        font-size:15px;

    }

}