.navbar{
    width:70%;

}
.header{
    padding: 10px;
    height: auto;
}

.nav-menu{
    flex-wrap: wrap;
   flex-direction: column;
   height:40px;
 justify-content: flex-start
}

.contact-btn{
    font-size: 11px;
    padding:10px 20px;
}
.logo b{
    font-size: 27px;
}
.logo span{
    font-size: 6px;
}


/* banner */
.banner{
 height: auto;
 justify-content: flex-start;
}
.banner img{
    width:70%;
}

.banner-title-box{
    max-width: 100%;
}
.banner-title {
    font-size: 20px;
    margin:20px;
}

.banner-title:nth-of-type(1) {
    font-size: 18px;
  }

  /* about */

  .about {
      height:auto;
    padding: 100px 30px;
    box-sizing: border-box
  }
  .about-logo {
      margin-bottom: 0;
  }
  .about-logo b{
      font-size:46px;
      line-height: 25px
  }
  .about-logo > span {
      font-size: 9px
  }
  .about-description {
      font-size: 12px;
      margin: 20px;
  }

  /* services */

  .services{
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
   
  }
  .service-card{
      height: auto;
  }
  .service-card img {
      width: 60%;
    margin-bottom: 20px;
  }
  
  .acheivement{
     flex-flow: column wrap;
      height: auto;
      align-items: center;
  }
  .acheivement>div{
      width: 100%;
  }
  .acheivement-logo img{
      width:70%;
      margin-bottom: 30px;
  }
  .acheivement-details h1{
      font-size: 26px;
  }
.acheivement-cards{
    padding: 0 10px;
    box-sizing: border-box;
}
.acheivement-card{
    padding-left: 20px;
}
  
.compatibility{
  height: 200px;
}

@media screen and (max-width : 380px) {
    .navbar{
        width:60% ;
        }
        .nav-menu a, .nav-menu span{
            font-size:8px;
        }
     .contact-btn{
         padding:10px;
     }
  }