/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    body{
        font-size: 16px;
    } 
    /* header part start */
    .logo{
        width: 180px;
    }
    .ham-menu{
        margin-right: 5px;
    }
    /* header part end */

    /* banner part start */
    .banner{
        background-position: top left;
        min-height: 400px;
    }
    .banner-content h1{
        
        font-size: 30px;
    }
    .banner-content p{
        font-size: 16px;
    }
    
    .banner-content{
        padding: 0;
    }
    
    /* banner part end */

    /* our mission part start */
    .our-mission-middle img{
        height: 400px;
    }
    .our-mission-middle{
        grid-template-columns: repeat(1,1fr);
    }
    .our-mission-middle h4{
        font-size: 20px;
    }
    .com-heading{
        font-size: 30px;
    }
    /* our mission part end */

    /* partner part start */
    .single-partner{
        max-width: 280px;
    }
    /* partner part end */

    /* network part start */
    .network-box,
    .single-network{
        grid-template-columns: repeat(1,1fr);
    }
    .single-network{
        justify-content: center;
        gap: 20px;
        text-align: center;
    }
    .single-network img{
        max-width: 180px;
    }
    /* network part end */

    /* about part start */
    .about{
        margin: 0;
    }
    .aobut-top img{
        height: 280px;
        object-position: left center;
    }
    .about-box{
        display: block;
    }
    /* about part end */

    /* service part start */
    .services-box,
    .solutions-box{
        grid-template-columns: repeat(1,1fr);
    }
    .solutions-box h3{
        font-size: 20px;
        
    }
    /* service part end */

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

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    body{
        font-size: 16px;
    }
    /* banner part start */
    .banner-content h1{
        font-size: 38px;
    }
    /* banner part end */

    /* our mission part start */
    .our-mission-middle img{
        height: 400px;
    }
    .our-mission-middle{
        grid-template-columns: repeat(1,1fr);
    }
    /* our mission part end */

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

    /* about part start */
    .about{
        margin: 0;
    }
    .aobut-top img{
        height: 350px;
    }
    .about-box{
        display: block;
    }
    /* about part end */

    /* service part start */
    .services-box,
    .solutions-box{
        grid-template-columns: repeat(1,1fr);
    }
    /* service part end */

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

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 

    /* our mission part start */
    .our-mission-middle img{
        height: 400px;
    }
    .our-mission-middle{
        gap: 30px;
    }
    /* our mission part end */

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

    /* about part start */
    .about{
        margin: 0;
    }
    .aobut-top img{
        height: 450px;
    }
    .about-box{
        display: block;
    }
    /* about part end */

    /* service part start */
    .services-box,
    .solutions-box{
        grid-template-columns: repeat(1,1fr);
    }
    /* service part end */

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

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {  }

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

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








/* ============================== */

@media (max-width: 991.98px) { 
    .header-nav{
        max-width: 320px;
        width: 100%;
        height: 100vh;
        background-color: rgba(19, 99, 162, 1);
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 100;
        padding: 50px 30px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .5);
        transition: .3s all linear;
    }
    .header-nav.active{
        right: 0;
    }
    .header-nav ul{
        flex-direction: column;
        gap: 25px;
    }
    .header-nav ul li a::before{
        background-color: #fff;
    }
    .header-nav ul li a{
        color: #fff;
    }
    .close-btn{
        display: inline-block;
        font-size: 25px;
        font-weight: 500;
        color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }
    .header-box{
        display: flex;
        justify-content: space-between;
    }
    .ham-menu{
        width: 30px;
        cursor: pointer;
    }
    .ham-menu span{
        display: inline-block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: rgba(19, 99, 162, 1);
        position: relative;
    }
    .ham-menu span::before,
    .ham-menu span::after{
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgba(19, 99, 162, 1);
        position: absolute;
        left: 0;
    }
    .ham-menu span::before{
        top: -7px;
    }
    .ham-menu span::after{
        bottom: -7px;
    }
 }