/* =====================================
   LARGE TABLETS
===================================== */

@media(max-width:1200px){

    .hero h1{

        font-size:52px;

    }


    .section-title h2{

        font-size:40px;

    }


    .about h2{

        font-size:38px;

    }

}


/* =====================================
   TABLETS
===================================== */

@media(max-width:992px){

    .top-bar{

        display:none;

    }


    .navbar{

        padding:15px 20px;

    }


    .navbar-nav{

        margin-top:20px;

    }


    .navbar-nav .nav-link{

        margin-left:0;

        padding:12px 0;

    }


    .navbar .btn{

        margin-top:15px;

        display:inline-block;

    }


    .hero{

        padding:80px 0;

        text-align:center;

    }


    .hero h1{

        font-size:45px;

    }


    .hero p{

        font-size:17px;

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-info{

        justify-content:center;

        flex-wrap:wrap;

    }


    .hero-info div{

        flex:0 0 45%;

    }


    .hero-image{

        margin-top:50px;

    }


    .about{

        text-align:center;

    }


    .about img{

        margin-bottom:40px;

    }


    .feature-box{

        text-align:left;

    }


    .counter-box{

        margin-bottom:40px;

    }


    .cta-box{

        padding:50px 30px;

    }


    .cta-box h2{

        font-size:36px;

    }


    .contact-cta{

        text-align:center;

    }


}


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

@media(max-width:768px){


    .section-padding{

        padding:70px 0;

    }


    .hero h1{

        font-size:36px;

        line-height:1.2;

    }


    .hero p{

        font-size:16px;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }


    .hero-buttons .btn{

        width:220px;

    }


    .hero-info{

        display:grid;

        grid-template-columns:1fr;

    }


    .hero-info div{

        width:100%;

    }


    .section-title h2{

        font-size:32px;

    }


    .about h2{

        font-size:32px;

    }


    .service-card{

        padding:30px 20px;

    }


    .process-card{

        margin-bottom:20px;

    }


    .industry-card{

        padding:30px 15px;

    }


    .portfolio-card img{

        height:220px;

    }


    .counter-box h2{

        font-size:40px;

    }


    .cta-box h2{

        font-size:30px;

    }


    .contact-cta h2{

        font-size:32px;

    }


    .footer{

        text-align:center;

    }


    .social-icons{

        justify-content:center;

    }

}


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

@media(max-width:480px){


    .navbar-brand span{

        font-size:20px;

    }


    .navbar-brand img{

        width:45px;

    }


    .hero h1{

        font-size:30px;

    }


    .hero-tag{

        font-size:13px;

    }


    .btn{

        padding:12px 25px;

    }


    .service-icon{

        width:65px;

        height:65px;

        font-size:25px;

    }


    .section-title h2{

        font-size:28px;

    }


    .testimonial-card{

        padding:25px;

    }


    .cta-box{

        border-radius:25px;

    }

}
/* =====================================
   LARGE TABLETS
===================================== */

@media(max-width:1200px){

    .hero h1{

        font-size:52px;

    }


    .section-title h2{

        font-size:40px;

    }


    .about h2{

        font-size:38px;

    }

}


/* =====================================
   TABLETS
===================================== */

@media(max-width:992px){

    .top-bar{

        display:none;

    }


    .navbar{

        padding:15px 20px;

    }


    .navbar-nav{

        margin-top:20px;

    }


    .navbar-nav .nav-link{

        margin-left:0;

        padding:12px 0;

    }


    .navbar .btn{

        margin-top:15px;

        display:inline-block;

    }


    .hero{

        padding:80px 0;

        text-align:center;

    }


    .hero h1{

        font-size:45px;

    }


    .hero p{

        font-size:17px;

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-info{

        justify-content:center;

        flex-wrap:wrap;

    }


    .hero-info div{

        flex:0 0 45%;

    }


    .hero-image{

        margin-top:50px;

    }


    .about{

        text-align:center;

    }


    .about img{

        margin-bottom:40px;

    }


    .feature-box{

        text-align:left;

    }


    .counter-box{

        margin-bottom:40px;

    }


    .cta-box{

        padding:50px 30px;

    }


    .cta-box h2{

        font-size:36px;

    }


    .contact-cta{

        text-align:center;

    }


}


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

@media(max-width:768px){


    .section-padding{

        padding:70px 0;

    }


    .hero h1{

        font-size:36px;

        line-height:1.2;

    }


    .hero p{

        font-size:16px;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }


    .hero-buttons .btn{

        width:220px;

    }


    .hero-info{

        display:grid;

        grid-template-columns:1fr;

    }


    .hero-info div{

        width:100%;

    }


    .section-title h2{

        font-size:32px;

    }


    .about h2{

        font-size:32px;

    }


    .service-card{

        padding:30px 20px;

    }


    .process-card{

        margin-bottom:20px;

    }


    .industry-card{

        padding:30px 15px;

    }


    .portfolio-card img{

        height:220px;

    }


    .counter-box h2{

        font-size:40px;

    }


    .cta-box h2{

        font-size:30px;

    }


    .contact-cta h2{

        font-size:32px;

    }


    .footer{

        text-align:center;

    }


    .social-icons{

        justify-content:center;

    }

}


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

@media(max-width:480px){


    .navbar-brand span{

        font-size:20px;

    }


    .navbar-brand img{

        width:45px;

    }


    .hero h1{

        font-size:30px;

    }


    .hero-tag{

        font-size:13px;

    }


    .btn{

        padding:12px 25px;

    }


    .service-icon{

        width:65px;

        height:65px;

        font-size:25px;

    }


    .section-title h2{

        font-size:28px;

    }


    .testimonial-card{

        padding:25px;

    }


    .cta-box{

        border-radius:25px;

    }

}