/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {

  /* ======== banner =========== */

  .banner {
    padding: 150px 0px 50px;
  }

  .background-img {
    position: relative;
    height: 158px;
  }

  .testimonials {
    padding: 60px 0px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {

  /* ======= header ========= */

  header {
    .top-header {
      .top-deatils {
        a {
          font-size: 12px;
        }
      }

      .social-media {
        p {
          font-size: 12px;
        }
      }
    }

    .bottom-header {
      .menu {
        width: 100%;
        max-width: 42%;
      }

      nav {
        a {
          font-size: 14px;
        }

        ul {
          justify-content: space-between;
        }
      }

      .logo {
        width: 100%;
        max-width: 16%;

        img {
          width: 100%;
        }
      }
    }
  }

  .banner {
    padding: 90px 0px 30px;

    .container {
      gap: 60px;
    }
  }

  .about-us {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../upload/shap03.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    /* background: url(../upload/shap03.png); */
    padding: 40px 0px;
  }

  .round-logo {
    position: absolute;
    /* top: 0; */
    left: 20px;
    bottom: 100px;
  }

  .text-slide .big {
    font-size: 70px;
  }

  .gallery {
    padding: 40px 0px;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../upload/shap05.png);
    /* background: url(../upload/shap05.png); */
    background-repeat: no-repeat;
    background-position: top left;

    p {
      max-width: 100%;
    }
  }

  .testimonials {
    padding: 40px 0px;

    .testimonial-item {
      margin-top: 30px;
      padding: 20px;
    }
  }

  .menus {
    padding: 40px 0px;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../upload/shap01.png);
    /* background: url(../upload/shap01.png); */
    background-position: bottom left;
    background-repeat: no-repeat;

    p {
      max-width: 100%;
    }

    .menu-items {
      margin-top: 20px;
    }
  }

  .cta {
    padding: 40px 0px;
  }

  footer {
    padding: 40px 0px 0px;

    .container {
      gap: 20px;
    }

    h4 {
      font-size: 18px;
    }

    nav,
    .hours,
    .footer-details {
      margin-top: 15px;
    }

    .col1 {
      .logo {
        img {
          width: 115px;
        }
      }
    }

    .copy-right {
      margin-top: 20px;
    }
  }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

  header {
    .bottom-header {
      display: none;
    }

    .top-header {
      display: none;
    }

    .phone-bottom-header {
      padding: 10px 0px;
      display: block;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .call-icon {
        a {
          color: var(--primary-color);
        }
      }

      .logo {
        display: flex;

        img {
          width: 100%;
          max-width: 100px;
          border-radius: 10px;
        }
      }

      .primary-menu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 150px 20px;
        position: fixed;
        background: #fff;
        width: 100%;
        max-width: 350px;
        right: -100%;
        top: 0px;
        /* transform: translateY(-10px); */
        -webkit-transition: all .4s ease-in;
        -o-transition: all .4s ease-in;
        transition: all .4s ease-in;
        z-index: 1;
        height: 100vh;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;

        ul {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          gap: 15px;
        }

        nav {
          text-align: center;

          a {
            display: block;
            padding: 10px 0px;
            font-size: 18px;
            color: var(--black);
          }
        }

        /* display: none; */
      }

      .menu-icon {
        display: block;
        border: none;
        background: transparent;
        width: 40px;
        z-index: 9;
        font-size: 24px;
      }

      .primary-menu.active {
        right: 0%;
      }
    }
  }

  .banner {
    padding: 50px 0px 30px;

    p {
      width: 100%;
    }

    .banner-content {
      gap: 10px;
    }
  }

  .about-us {
    .container {
      flex-direction: column;
    }

    .about-content {
      width: 100%;
    }

    .about-img {
      width: 100%;
      text-align: start;

      img {
        width: 60%;
      }
    }
  }

  .round-logo {
    bottom: 0;
    right: 0;
  }

  .gallery {
    .album {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
  }

  .menus {
    .menu-items {
      flex-direction: column;
      gap: 10px;

      .item {
        width: 100%;
      }

      .menu-item {
        gap: 10px;
      }
    }
  }

  footer {
    .container {
      flex-wrap: wrap;
    }

    .col1 {
      width: 46%;
    }

    .col2 {
      width: 46%;
    }

    .col3 {
      width: 46%;
    }

    .col4 {
      width: 46%;
    }
  }

  /* =========== contact page ========== */
  .inner-banner {
    padding: 50px 0px;
  }

  #contact-page {
    .shop-details {
      flex-direction: column;
      padding: 30px 0px;
    }

    .shop-details .box {
      width: 100%;
    }

    .form-map {
      padding-bottom: 30px;

      .container {
        flex-direction: column-reverse;
        /* padding-bottom: 30px; */
        gap: 20px;
        padding: 0px;
      }

      .map {
        width: 100%;

        iframe {
          height: 300px;
        }
      }

      .main-form {
        padding: 20px;
        width: 100%;
      }
    }
  }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  p {
    font-size: 14px;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 30px;
  }

  h4 {
    font-size: 18px;
  }

  .about-us {
    padding: 30px 0px;

    .about-content {
      gap: 10px;
    }
  }

  .text-slide .big {
    font-size: 50px;
  }

  .gallery {
    padding: 30px 0;
  }

  .background-img {
    height: 78px;
  }

  .menus {
    padding: 30px 0px;

    .menu-items {
      p {
        margin-top: 8px;
      }

      .item {
        padding: 10px 0px;
      }

      .item-price {
        font-size: 18px;
      }
    }
  }

  footer {
    .container {
      flex-wrap: wrap;
    }

    .col1 {
      width: 100%;
    }

    .col2 {
      width: 100%;
    }

    .col3 {
      width: 100%;
    }

    .col4 {
      width: 100%;
    }

    h4 {
      margin-top: 0px;
    }
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 450px) {

  h2 {
    font-size: 24px;
  }

  h4 {
    font-size: 16px;
  }

  p {
    line-height: 22px;
  }

  .gallery {
    .album {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
  }

  .about-us {
    .about-img {
      img {
        width: 100%;
      }
    }
  }

  .round-logo {
    top: -100px;
    /* right: 0px; */
    width: 150px;
    height: 150px;
    left: 50%;
  }

  .test-svg {
    width: 120px;
    height: 150px;
    /* font-size: 20px; */
  }

  .cta {
    .container {
      flex-direction: column;
    }

    .cta-content {
      width: 100%;
      text-align: center;
    }

    .primary-btn {
      margin-top: 20px;
      width: 50%;
    }
  }
}