@media (max-width: 319px){
    .section{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .video_content{
        display: none;
    }
    .navbar_list{display: none;}
    .mobnavbar-collapse{
        width: 100%;
        display: block;
    }
    .work_flow ul li::before{
        display: none;
    }
    .our_partner .carousel-indicators{
        bottom: -25px;
    }
    .about_detail ul li{
        width: 100%;
    }
    .about_detail ul li .card-body{
        padding: 0;
    }
    .timeline_section{
        display: none;
    }
    .contacton_card{
        display: initial;
    }
    .footer_offices .card img {
        width: auto;
    }
    nav .nav-link.active, .navbar-nav .show>.nav-link{
        border: none;
    }

}
@media (min-width: 320px) and (max-width: 575px){
    .section{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .navbar_list{display: none;}
    nav .nav-link:focus, .nav-link:hover{
        border: 0 !important;
    }
    nav .nav-link.active, .navbar-nav .show>.nav-link{
        border: none;
    }
h1{
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font) !important; */
    line-height: 2rem;
}
h2{
    font-size: 2.625rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.625rem;
}
h3{
    font-size: 2.375rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.375rem;
}
h4{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h5{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h6{
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.125rem;
}
.small{
    font-size: 0.675rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 0.875rem;
}
strong{
    font-weight: bold;
    font-size: 14px;
    line-height: 1rem;
}
p{
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
    text-align: justify;
    /* letter-spacing: 0px; */
}
ul, ol{
    padding-left: 2rem;
}
.blog-header-containt{
    display: none;
}
    .navigation-wrap{
        background-color: rgb(51, 51, 51) !important;
    }
    .mobnavbar-collapse{
        width: 100%;
        display: block;
    }
    .video_content{
        display: none;
    }
    .header-form{
        display: none;
    }
    .orange-strip{
        text-align: center;
    }
    .orange-strip h6{
        display: block;
    }
    .services{
        display: none;
    }
    .services-iconbox div:nth-child(odd){
        border:none;
    }
    .benefit-section{
        background-image: none;
    }
    .benefit-section .iconbox span img{
        width: 20%;
    }
    .work_flow ul li{
        width: 100%;
    }
    .work_flow ul li::before{
        display: none;
    }
    
    .inner{
        padding: 1rem;
    }
    .pillars_section{
        border: none;
    }
    .our_partner .carousel-indicators{
        bottom: -25px;
    }
    .about_detail ul li{
        width: 100%;
    }
    .about_detail ul li .card-body{
        padding: 0;
    }
    .jumbotron_white ul{
        padding: 0 !important;
    }
    .jumbotron_white ul li{
       width: 100%;
    }
    .timeline_section{
        display: none;
    }
    .footer_offices .card img {
        width: auto;
    }
}
@media (min-width: 576px) and (max-width: 767px){
    .section{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .navbar_list{display: none;}
    nav .nav-link:focus, .nav-link:hover{
        border: 0 !important;
    }
    nav .nav-link.active, .navbar-nav .show>.nav-link{
        border: none;
    }
h1{
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font) !important; */
    line-height: 2rem;
}
h2{
    font-size: 2.625rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.625rem;
}
h3{
    font-size: 2.375rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.375rem;
}
h4{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h5{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h6{
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.125rem;
}
.small{
    font-size: 0.675rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 0.875rem;
}
strong{
    font-weight: bold;
    font-size: 14px;
    line-height: 1rem;
}
p{
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
    text-align: justify;
    /* letter-spacing: 1px; */
}
    .blog-header-containt{
        top:6rem;
    }
    .navigation-wrap{
        background-color: rgb(51, 51, 51) !important;
    }
    .mobnavbar-collapse{
        width: 100%;
        display: block;
    }
    .video_content{
        top:5rem;
    }
    .header-form{
        display: none;
    }
    .orange-strip{
        text-align: center;
    }
    .orange-strip h6{
        display: block;
    }
    .our_partner .carousel-indicators{
        bottom: -40px;
    }
    .pillars_section{
        border: 1px solid #ccc !important;
    }
    .about_detail ul li{
        width: 48%;
    }
    .about_detail ul li .card-body{
        padding: 0;
    }
    .contacton_card{
        display: initial;
    }
    .footer_offices .card img {
        width: auto;
    }
}





@media (min-width: 768px) and (max-width: 991px){
.container{
    max-width: 650px !important;
}
nav .nav-link:focus, .nav-link:hover{
    border: 0 !important;
}
h1{
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font) !important; */
    line-height: 2rem;
}
h2{
    font-size: 2.625rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.625rem;
}
h3{
    font-size: 2.375rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.375rem;
}
h4{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h5{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h6{
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.125rem;
}
.small{
    font-size: 0.675rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 0.875rem;
}
strong{
    font-weight: bold;
    font-size: 14px;
    line-height: 1rem;
}
p{
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
    text-align: justify;
    /* letter-spacing: 1px; */
}
    .blog-header-containt{
        top:6rem;
    }
    .navigation-wrap{
        background-color: rgb(51, 51, 51) !important;
    }
    .navbar ul{
        display: none;
    }
    .mobile_nav{
        display: block !important;
    }
    .mobnavbar-collapse{
        width: 100%;
        display: block;
    }
    .navbar-collapse{
        width: 100%;
        color: var(--white-color);
    }
    .navbar-expand-lg .navbar-collapse{
        display: flex !important;
    }
    .video_content{
        top:7rem;
    }
    .header-form{
        width: 100%;
    }
    .orange-strip{
        text-align: center;
    }
    .orange-strip h6{
        display: block;
    }
    .services span {
        padding: 0.5rem 0.9rem;
    }
    .tech-iconbox {
        margin-top: 2rem;
        text-align: center;
        border: 1px solid #B6B6B6;
        background-color: var(--white-color);
        padding: 0.8rem;
        border-radius: 10px;
        overflow: hidden;
    }
    .benefit-section{
        background-image: none;
    }
    /* .work_flow ul li::before{
        display: none;
    } */
    .work_flow ul li{
        width: 12rem;
    }
    .case_studyright .video-thumbnail{
        max-height: 15rem;
    }
    .about_detail ul li{
        width: 44%;
    }
}
@media (min-width: 992px) and (max-width: 1200px){
    
h1{
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font) !important; */
    line-height: 2rem;
}
h2{
    font-size: 2.625rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.625rem;
}
h3{
    font-size: 2.375rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 2.375rem;
}
h4{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h5{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
}
h6{
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.125rem;
}
.small{
    font-size: 0.675rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--white-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 0.875rem;
}
strong{
    font-weight: bold;
    font-size: 14px;
    line-height: 1rem;
}
p{
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--text-color);
    text-transform: capitalize;
    /* font-family: var(--primary-font); */
    line-height: 1.5rem;
    text-align: left;
    /* letter-spacing: 1px; */
}
.header-form{
    width: 55%;
}
.blog-header-containt{
    top:5rem;
}
    .video_content{
        top:10rem;
    }
    .work_flow ul li{
        width: 12rem;
    }
}
@media (min-width: 1199px) and (max-width: 1400){
   
}




/* --------------- extra css for spacial sections --------- */
@media screen and (max-width: 64rem){
    .col{
      width: calc(33.333333% - 2rem);
    }
  }
  
  @media screen and (max-width: 48rem){
    .col{
      width: calc(50% - 2rem);
    }
  }
  
  @media screen and (max-width: 32rem){
    .col{
      width: 100%;
      margin: 0 1rem 2rem 0;
    }
  }