/* ......../ media query /.......... */
/* ......../ Cell Phone Mode /.......... */

@media (max-width: 768px) {
    .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;
    }
  
    .navbar-container .hamburger-lines {
      display: block;
      height: 23px;
      width: 35px;
      position: absolute;
      top: 17px;
      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: #000000;
    }
  
    .navbar-container .hamburger-lines .line1 {
      transform-origin: 0% 0%;
      transition: transform 0.4s 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.4s ease-in-out;
    }
  
    .navbar .menu-items {
      padding-top: 100px;
      background: #525050;
      height: 100vh;
      max-width: 300px;
      transform: translate(-150%);
      display: flex;
      flex-direction: column;
      margin-left: -40px;
      padding-left: 50px;
      transition: transform 0.5s ease-in-out;
      box-shadow: 5px 0px 10px 0px #aaa;
    }
  
    .navbar .menu-items li {
      margin-bottom: 1.5rem;
      font-size: 1.3rem;
      font-weight: 500;
    }
  
    .logo {
      position: absolute;
      top: 5px;
      right: 15px;
      font-size: 2rem;
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .menu-items {
      transform: translateX(0);
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
      transform: rotate(35deg);
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
      transform: scaleY(0);
    }
  
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
      transform: rotate(-35deg);
    }
  
    /* ......./ Auto /......... */
  
    .food-container {
      flex-direction: column;
      align-items: stretch;
    }
  
    .food-type:not(:last-child) {
      margin-bottom: 3rem;
    }
  
    .food-type {
      box-shadow: 5px 5px 10px 0 #aaa;
    }
  
    .img-container {
      margin: 0;
    }
  }

  @media (max-width: 500px) {
    html {
      font-size: 65%;
    }
  
    .navbar .menu-items li{
        font-size: 1.6rem;
    }
  
    .testimonial-container {
      flex-direction: column;
      text-align: center;
    }
  
    .Services-section-container img {
      margin: auto;
    }
  
    .Services-section-item {
      flex-direction: column;
      text-align: center;
    }
  
    .form-container {
      width: 90%;
    }
  
    .contact-container {
      display: flex;
      flex-direction: column;
    }
  
    .contact-img {
      width: 90%;
      margin: 3rem auto;
    }
  
    .logo {
      position: absolute;
      top: 06px;
      right: 15px;
      font-size: 3rem;
    }
  
    .navbar .menu-items li {
      margin-bottom: 2.5rem;
      font-size: 1.8rem;
      font-weight: 500;
    }
  }
  
  @media (min-width: 769px) and (max-width: 1200px) {
    .img-container h3 {
      font-size: 1.5rem;
    }
  
    .img-container .btn {
      font-size: 0.7rem;
    }
  }
  
  @media (orientation: landscape) and (max-height: 500px) {
    .showcase-area {
      height: 50vmax;
    }
  }