/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 
    /* banner part start */
    body{
        font-size: 17px;
        line-height: 30px;
    }

    /* header part start */
    .header .com-btn{
        background-color: #1E2A38;
        color: #fff;
    }
    .nav-item{
        border-bottom: 1px solid #d3d3d3;
        padding: 10px 0;
    }
    /* header part end */
    .banner-box{
        grid-template-columns: repeat(1,1fr);
        gap: 50px;
    }
    .banner::before{
        width: 100%;
        height: 30%;
        top: auto;
        bottom: 0;
    }
    .banner-content h1,
    .com-h1{
        font-size: 40px;
        line-height: 50px;
    }
    /* banner part end */

    /* what we do part start */
    .what-we-do-box{
        grid-template-columns: repeat(1,1fr);
    }
    .com-heading{
        font-size: 30px;
        line-height: 40px;
    }
    .single-what-we-do h3{
        font-size: 22px;
        line-height: 32px;
    }
    /* what we do part end */

    /* why part start */
    .why-box{
        grid-template-columns: repeat(1,1fr);
        gap: 50px;
        
    }
    .why-text{
        order: -1;
    }
    .why::before{
        width: 100%;
        height: 30%;
        
    }
    /* why part end */

    /* story part start */
    .story-img img{
        width: 200px;
        right: -20px;
        bottom: -50px;
    
    }
    .story-box{
        padding: 60px 30px;
    }
    /* story part end */

    /* =======about page start=========== */

    /* about banner part start */
    .about-banner-box{
        grid-template-columns: repeat(1,1fr);
    }
    .com-header{
        border-bottom: 1px solid #d3d3d3;
    }
    /* about banner part end */

    /* about img part start */
    .about-img{
        margin-top: 100px;
    }
    .about-img-box img{
        margin-top: -200px;
    }
    /* about img part end */

    /* our work part start */
    .our-work-box{
        grid-template-columns: repeat(1,1fr);
        gap: 60px;
    }
    .our-work-right{
        display: flex;
        flex-direction: column;
    }
    .our-work-right .our-work-img{
        order: -1;
    }
    /* our work part end */

    /* =======about page end=========== */

    /* =======contact page start=========== */
    .input-multi{
        grid-template-columns: repeat(1,1fr);
        gap: 24px;
    }
    ::placeholder{
        font-size: 16px;
    }
    /* =======contact page end=========== */
 }

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    /* header part start */
    .header .com-btn{
        background-color: #1E2A38;
        color: #fff;
    }
    .nav-item{
        border-bottom: 1px solid #d3d3d3;
        padding: 10px 0;
    }
    /* header part end */
    /* banner part start */
    .banner-box{
        grid-template-columns: repeat(1,1fr);
        gap: 50px;
    }
    .banner::before{
        width: 100%;
        height: 35%;
        top: auto;
        bottom: 0;
    }
    .banner-content h1,
    .com-h1{
        font-size: 50px;
        line-height: 65px;
    }
    /* banner part end */

    /* what we do part start */
    .what-we-do-box{
        grid-template-columns: repeat(1,1fr);
    }
    /* what we do part end */

    /* why part start */
    .why-box{
        grid-template-columns: repeat(1,1fr);
        gap: 50px;
        
    }
    .why-text{
        order: -1;
    }
    .why::before{
        width: 100%;
        height: 35%;
        
    }
    /* why part end */

    /* story part start */
    .story-img img{
        width: 220px;
        right: -20px;
        bottom: -50px;
    
    }
    /* story part end */

    /* =======about page start=========== */

    /* about banner part start */
    .about-banner-box{
        grid-template-columns: repeat(1,1fr);
    }
    .com-header{
        border-bottom: 1px solid #d3d3d3;
    }
    /* about banner part end */

    /* our work part start */
    .our-work-box{
        grid-template-columns: repeat(1,1fr);
        gap: 60px;
    }
    .our-work-right{
        display: flex;
        flex-direction: column;
    }
    .our-work-right .our-work-img{
        order: -1;
    }
    /* our work part end */

    /* =======about page end=========== */

    /* =======contact page start=========== */
    .input-multi{
        grid-template-columns: repeat(1,1fr);
        gap: 24px;
    }
    /* =======contact page end=========== */
 }

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 
    /* header part start */
    .header .com-btn{
        background-color: #1E2A38;
        color: #fff;
    }
    .nav-item{
        border-bottom: 1px solid #d3d3d3;
        padding: 10px 0;
    }
    /* header part end */
    /* banner part start */
    .banner-box{
        grid-template-columns: repeat(1,1fr);
        gap: 50px;
    }
    .banner::before{
        width: 100%;
        height: 40%;
        top: auto;
        bottom: 0;
    }
    /* banner part end */

    /* what we do part start */
    .what-we-do-box{
        grid-template-columns: repeat(1,1fr);
    }
    /* what we do part end */

    /* why part start */
    .why-box{
        grid-template-columns: repeat(1,1fr);
        gap: 50px;
        
    }
    .why-text{
        order: -1;
    }
    .why::before{
        width: 100%;
        height: 40%;
        
    }
    /* why part end */

    /* story part start */
    .story-img img{
        width: 250px;
        right: -20px;
        bottom: -63px;
    
    }
    /* story part end */

    /* =======about page start=========== */

    /* about banner part start */
    .about-banner-box{
        grid-template-columns: repeat(1,1fr);
        
    }
    .com-header{
        border-bottom: 1px solid #d3d3d3;
    }
    /* about banner part end */

    /* our work part start */
    .our-work-box{
        grid-template-columns: repeat(1,1fr);
        gap: 60px;
    }
    .our-work-right{
        display: flex;
        flex-direction: column;
    }
    .our-work-right .our-work-img{
        order: -1;
    }
    /* our work part end */

    /* =======about page end=========== */
 }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
    /* banner part start */
    .container{
        max-width: 1320px;
    }
    .banner-box{
        grid-template-columns: repeat(2,1fr);
        gap: 30px ;
        
    }
    .sec-padding{
        padding: 0 30px;
    }
    /* banner part end */

    /* why part start */
    .why-box{
        grid-template-columns: repeat(2,1fr);
        gap: 100px;
        
    }
    .why-img img{
        display: block;
        transform: translateX(70px);
    }
    /* why part end */
 }

/*Extra large devices (Extra large desktops, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1399.98px) { 
    /* banner part start */
    .container{
        max-width: 1320px;
    }
    /* banner part end */
 }

/*Extra large devices (Extra Extra large desktops, 1400px and up)*/
@media (min-width: 1400px) {  }