/* =====================================================
   RESPONSIVE.CSS
   JARVIS DESIGNS
====================================================== */


/* ===============================
   Large Devices (≤ 1200px)
================================= */

@media (max-width:1200px){

    .hero h1{
        font-size:2.8rem;
    }

}


/* ===============================
   Laptop / Tablet
================================= */

@media (max-width:992px){

    section{
        padding:70px 0;
    }

    .navbar{
        padding:12px 0;
    }

    .navbar-brand img{
        height:48px;
    }

    .hero{

        min-height:auto;

        padding:70px 0;

        text-align:center;

    }

    .hero h1{

        font-size:2.5rem;

    }

    .hero p{

        margin:auto;

        margin-bottom:30px;

    }

    .hero .btn{

        margin-bottom:10px;

    }

    .hero-image{

        margin-top:40px;

        max-width:100%;

    }

    .carousel-item img{

        height:420px;

        object-fit:cover;

    }

    .section h2{

        font-size:2rem;

    }

}


/* ===============================
   Mobile Landscape
================================= */

@media (max-width:768px){

    section{

        padding:60px 0;

    }

    .hero{

        padding-top:40px;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .hero .btn{

        width:100%;

        margin-bottom:12px;

    }

    .hero .btn + .btn{

        margin-left:0 !important;

    }

    .carousel-item img{

        height:300px;

    }

    .service-card{

        padding:25px 20px;

    }

    .gallery-card img{

        height:240px;

    }

    .contact-box{

        margin-bottom:25px;

    }

    .footer{

        text-align:center;

    }

    .footer .text-lg-end{

        text-align:center !important;

        margin-top:20px;

    }

}


/* ===============================
   Small Phones
================================= */

@media (max-width:576px){

    .navbar-brand span{

        display:none;

    }

    .navbar-brand img{

        height:45px;

    }

    .hero h1{

        font-size:1.7rem;

    }

    .hero p{

        font-size:.90rem;

    }

    .badge{

        font-size:.80rem;

    }

    .section h2{

        font-size:1.7rem;

    }

    .gallery-card img{

        height:220px;

    }

    .contact-box{

        padding:20px;

    }

}


/* ===============================
   Extra Small Devices
================================= */

@media (max-width:400px){

    .hero h1{

        font-size:1.5rem;

    }

    .carousel-item img{

        height:220px;

    }

}