@media (max-width: 600px) {
    .navbar {
      opacity: 0.95;
    }
  
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines {
      display: block;
    }
  
    .navbar-container {
      display: block;
      position: relative;
      height: 64px;
    }
  
    .navbar-container input[type="checkbox"] {
      position: absolute;
      display: block;
      height: 32px;
      width: 30px;
      top: 20px;
      left: 20px;
      z-index: 5;
      opacity: 0;
      cursor: pointer;
    }
  
    .navbar-container .hamburger-lines {
      display: block;
      height: 28px;
      width: 35px;
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  
    .navbar-container .hamburger-lines .line {
      display: block;
      height: 4px;
      width: 100%;
      border-radius: 10px;
      background: #333;
    }
  
    .navbar-container .hamburger-lines .line1 {
      transform-origin: 0% 0%;
      transition: transform 0.3s ease-in-out;
    }
  
    .navbar-container .hamburger-lines .line2 {
      transition: transform 0.2s ease-in-out;
    }
  
    .navbar-container .hamburger-lines .line3 {
      transform-origin: 0% 100%;
      transition: transform 0.3s ease-in-out;
    }
  
    .navbar .menu-items {
      padding-top: 100px;
      background: #fff;
      height: 100vh;
      max-width: 300px;
      transform: translate(-150%);
      display: flex;
      flex-direction: column;
      margin-left: -40px;
      padding-left: 40px;
      transition: transform 0.5s ease-in-out;
      box-shadow: 5px 0px 10px 0px #aaa;
      overflow: scroll;
    }
  
    .navbar .menu-items li {
      margin-bottom: 1.8rem;
      /* font-size: 1.1rem; */
      font-weight: 500;
    }
  
    .logo {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 2.5rem;
    }

    .mainlogo img {
        left: -82px;
        position: relative;
        width: 80%;
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .menu-items {
      transform: translateX(0);
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
      transform: rotate(45deg);
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
      transform: scaleY(0);
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
      transform: rotate(-45deg);
    }
  }








@media screen and (max-width: 600px) {
    .section-padding.text-center {
        width: 400px;
        padding: 30px 0px;
    }
    .section-padding {
        width: 450px;
    }
    p.vzbzs {
        width: 100%;
        font-size: 15px;
    }
    
    section#whybuy .col-md-2 {
        width: 90%;
        margin: auto;
    }
    
    .section-padding.text-center h3 {
        font-size: 30px;
    }
    
    .abt-heading.text-center h1 {
        font-size: 30px;
    }
    
    .home-demo.text-center h3 {
        font-size: 30px;
    }
    .container-fluid.abt.section-padding {
        padding: 30px 0px;
    }
    .navbar .menu-items {
        display: grid;
        width: 100%;
        position: absolute;
        padding: 0px;
        max-width: 430px;
        height: 455px;
        top: -6px;
        padding-top: 91px
    }
    
    .mainlogo img {
        left: 25px;
        position: relative;
        width: 80%;
    }
    
    
    
    ul.menu-items a {
        font-size: 30px;

        padding-left: 40px;
    }


    section#about,section#range-section {
        /* width: 100%; */
        overflow: hidden;
    }
    
    div.section-padding {
        width: 100%;
        padding: 0 15px;
    }
    
    .abt-matter.text-center {
        padding: 0 20px;
    }
    
    .botmpart {
        padding-left: 40px;
    }
    .navbar .menu-items li a:hover {
        color: red;
    }

    .socialimg {
      padding-left: 10px;
  }
}