/* ==========================
   Mobile Responsive
========================== */

@media(max-width:768px){


    /* Hero */

    .hero{
        text-align:center;
        padding:50px 20px;
    }


    .hero h1{
        font-size:32px;
    }


    .hero h2{
        font-size:22px;
    }


    .hero p{
        font-size:16px;
    }


    .hero img{
        margin-top:30px;
    }



    /* Navbar */

    .navbar-brand{
        font-size:20px;
    }


    .nav-link{
        margin-left:0;
        padding:10px;
    }



    /* Buttons */

    .btn{
        width:100%;
        margin-bottom:10px;
    }



    /* Cards */

    .card{

        margin-bottom:20px;

    }


    .card img{

        height:200px;

    }



    /* Section */

    section{

        padding:40px 15px;

    }


    section h2{

        font-size:28px;

    }



    /* Statistics */

    .col-md-3 .card h1{

        font-size:35px;

    }



    /* Gallery */

    .gallery img{

        height:200px;

    }



    /* Footer */

    footer{

        text-align:center;

    }


}



/* Small Mobile */

@media(max-width:480px){


    .hero h1{

        font-size:28px;

    }


    .hero p{

        font-size:15px;

    }


    .navbar-brand{

        font-size:18px;

    }


    .card{

        border-radius:10px;

    }


}