/* =================================
   LARGE DEVICE (1200px+)
================================= */

@media (min-width:1200px){

    .hero-section h1{

        font-size:52px;

    }


    .service-card{

        min-height:320px;

    }

}




/* =================================
   TABLET DEVICE
   992px - 1199px
================================= */


@media(max-width:1199px){


    .navbar-brand{

        font-size:20px;

    }


    .hero-section{

        padding:70px 0;

    }


    .hero-section h1{

        font-size:42px;

    }


}





/* =================================
   TABLET / SMALL LAPTOP
   768px - 991px
================================= */


@media(max-width:991px){


    .top-bar{

        display:none;

    }



    .navbar-nav{

        padding-top:20px;

    }

    .navbar-collapse{

    max-height:calc(100vh - 70px);

    overflow-y:auto;
    
    -webkit-overflow-scrolling:touch;
}



    .nav-item{

        margin-bottom:10px;

    }



    .hero-section{

        text-align:center;

    }



    .hero-section img{

        margin-top:40px;

    }



    .hero-section .btn{

        margin-bottom:10px;

    }



    .statistics-section .col-md-6{

        margin-bottom:30px;

    }



}






/* =================================
   MOBILE DEVICE
   576px - 767px
================================= */


@media(max-width:767px){



    body{

        font-size:14px;

    }



    .hero-section{

        padding:40px 0;

    }




    .hero-section h1{

        font-size:32px;

        line-height:1.3;

    }




    .hero-section p{

        font-size:15px;

    }




    .hero-section .btn{

        width:100%;

        margin:5px 0;

    }





    .service-card{

        padding:25px!important;

    }




    .service-icon{

        font-size:35px;

    }




    .statistics-section h2{

        font-size:32px;

    }





    .footer-section{

        text-align:center;

    }





    .social-links{

        margin-bottom:20px;

    }




}





/* =================================
   SMALL MOBILE
   Below 576px
================================= */


@media(max-width:575px){



    .navbar-brand{

        font-size:16px;

    }




    .hero-section h1{

        font-size:28px;

    }




    .badge{

        font-size:11px;

    }




    .display-4{

        font-size:28px;

    }





    .card-body{

        padding:20px;

    }




    .cta-section h2{

        font-size:25px;

    }





}





/* =================================
   EXTRA SMALL DEVICE
   Below 400px
================================= */


@media(max-width:400px){



    .hero-section h1{

        font-size:24px;

    }




    .navbar-brand{

        font-size:14px;

    }




    .btn{

        padding:8px 18px;

    }


}