/* For mobile phones: */
@media only screen and (max-width: 768px) {
    /* [class*="col-"] {
        width: 100%; */
        /* min-width: 368px;
    } */
    .col-s-12{
        width: 100%;
    }
    .left,
    .col-s-7 {
        width: 0;
        display: none;
    }
    .show_burger_menu {
      display: block;
      opacity: 1;
    }

    .burger-menu-button{
        display: flex;
        margin-left: 20px
      }

      h4.title {
        margin: 50px 10px;
      }
    .contact {
        flex: auto;
        justify-content: end;
        margin: 0px 20px;

    }
    .navigation {
        display: flex;
        justify-content: space-between;
    }
    section.intro{
        flex-direction: column;
        width: 100%;
        /* padding: 10px; */
      }
    
      .our-service {
        width: 100%;
      }
    section.features {
        flex-direction: column;
        align-items: center;
    }
    .features div{
        margin-top: 0;
    }

    .sub-text {
        flex-direction: column;
        justify-content: left;
        margin: 20px 0px;
        height: auto;
        align-items: flex-start;
    }
    .sub-text span{
        margin: 20px 0px;
    }


    section.our-approach-mobile-view {
        display: block;
    }
    section.our-approach {
        display: none;
    }

    .image-contents {
        width: 100%; 
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }
      .image-body {
        position: relative;
        opacity: 1;
        height: auto;
        width: auto;
        left: 0;
        top: 0px;
        display: flex;
        gap: 10px;
        flex-direction: column;
      }
      .content {
        position: relative;
        width: 312px;
      }
  
      .img-content {
        position: relative;
        width: 352px;
        height: 317px;
      }
  
      .even-row{
        flex-direction: column;
      }

      a.arrow-right {
        position: absolute;
        right: 0px;
      }
      a.arrow-left {
        position: absolute;
        left: 0px;
      }

      .customer-logos div {
        margin: 5px 15px;
      }

      .hide-logo{
        opacity: 0;
      }


      section.customer-refer {
        height: 600px;
      }

      p.text-body {
        width: 100%;
      }

      section.contact {
        flex-direction: column;
        padding: 50px 0px;
        background-size: 200%;
      }
  
      .descriptions {
        width: 95%;
      }
      form.contact-form {
        width: 95%;
      }

      .contact-info {
        margin: 10px;
      }
      .contact-info  div{
        width: 100%;
      }

      .social-contact{
        flex-direction: column;
        justify-content: center;
      }
      

    [class*="feature-group-"] {
       margin-top: 15px !important;
    }
    

}