@media(max-width: 1199px) {
   .container {
      max-width: 95%;
      --bs-gutter-x: 30px
   }
}

@media(max-width: 991px) {
   .header {
      padding: 12px 0;
   }

   .header-backdrop,
   .header-close-btn,
   .header-hamburger-btn {
      display: block;
   }

   .header-hamburger-btn {
      height: 75px;
      width: 90px;
      cursor: pointer;
      border: 0;
      background-color: transparent;
   }

   .header-hamburger-btn span {
      display: block;
      height: 3px;
      width: 24px;
      background-color: var(--black-90);
      position: relative;
      margin: auto;
   }

   .header-hamburger-btn span::before,
   .header-hamburger-btn span::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--black-90);
   }

   .header-hamburger-btn span::before {
      top: -8px;
   }

   .header-hamburger-btn span::after {
      top: 8px;
   }

   .header-close-btn {
      height: 30px;
      width: 30px;
      background: none;
      position: absolute;
      right: 15px;
      top: 15px;
      color: var(--black-70);
      border: 0;
      border-radius: 5px;
      cursor: pointer;
   }

   .header-menu {
      position: fixed;
      width: 250px;
      height: 100vh;
      top: 0;
      right: -250px;
      z-index: 1000;
      padding: 70px 0 50px;
      transition: all 0.5s ease;
      background-color: var(--white);
      box-shadow: var(--shadow);
      overflow-y: auto;
      visibility: hidden;
   }

   .header-menu.open {
      right: 0;
      visibility: visible;
   }

   .header .menu-item {
      display: block;
      margin: 0;
   }

   .header .menu-item>a {
      display: flex;
      justify-content: center;
      padding: 12px 15px;
      border-bottom: 1px solid var(--grey);
   }

   .header-backdrop {
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: 0.5;
      transition: all 0.5s ease;
      visibility: hidden;
      background-color: var(--white);
   }

   .header-backdrop.active {
      visibility: visible;
      opacity: 0.8;
   }

   .section-title .title {
      font-size: 30px;
   }

   .services-section .text-box {
      margin-right: 35px;
   }

   .contact-item {
      padding-left: 30px;
      width: 100%;
   }

   .contact-items .map {
      padding-left: 30px;
   }

   .map iframe {
      width: 300px;
   }
}

@media(max-width: 875px) {
   .container {
      --bs-gutter-x: 15px
   }

   .box {
      padding: 20px 15px;
   }

   .contact-form {
      min-width: 200px;
   }

}

@media (max-width: 768px) {
   .product-info-grid {
      grid-template-columns: 1fr;
   }

   #product-image {
      max-width: 100%;
   }

   .back-button {
      font-size: 1.1em;
   }

}

@media(max-width: 750px) {

   .box {
      padding: 20px 15px;
   }

   .section-title .title {
      font-size: 1.8em;
   }

   .services-item,
   .services-item.reverse {
      flex-direction: column;
   }

   .services-item .img-box,
   .services-item .text-box {
      margin: 0 auto;
      position: relative;
   }

   .services-item .img-box {
      padding-bottom: 20px;
   }

   .contact-section .contact-items .contact-item,
   .contact-section .contact-form {
      position: relative;
      margin-right: auto;
      margin-left: auto;
   }

   .contact-section .contact-item:nth-child(1) {
      margin-top: 20px;
   }

   .contact-items {
      padding-left: 0;
   }

   .map iframe {
      display: none;
   }

   .mobile-map {
      visibility: visible;
   }

}

@media(max-width: 500px) {
   body {
      font-size: 16px;
   }

   h2 {
      font-weight: 400;
      font-size: 1.8em;
   }

   p {
      font-size: 1.5em;
      line-height: 1.5;
   }

   ul {
      font-size: 1.2em;
      font-weight: 400;
   }

   .slides-section img {
      margin-top: 20px;
      padding-top: 20px;
      height: 100%;
   }

   .about-section .text-box .title {
      font-size: 1.6em;
      font-weight: 600;
   }

   footer {
      flex-direction: column;
      margin: 10px;
      padding: 10px;
      gap: 10px;
      text-align: center;
   }

   .footer-item .social-icon {
      font-size: 1.5em;
   }

   .header-main .logo {
      width: 90px;
      height: 90px;
   }

   .contact-item .icon-box {
      width: 30px;
      height: 30px;
   }

   #product-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 0 5px;
   }

   .product-list .product-card {
      height: 90%;
      margin: 5px 0;
      padding: 8px;
   }

   .product-card img {
      max-width: 100%;
   }

   .product-card h4 {
      font-size: 1.2em;
      line-height: 1.2;
   }

   .price-and-cart .price,
   .price-and-cart .add-cart {
      font-size: 14px;
      padding: 0px;
   }

   .products-section {
      padding-top: 10px;
   }

   .filter-button-wrapper {
      position: relative;
      margin-top: 10px;
      text-align: left;
   }

   .filter-toggle-btn {
      position: absolute;
      top: -40px;
      right: 15px;
      z-index: 10;
   }

   .pagination-container button,
   .page-number {
      font-size: 10px;
      padding: 5px 8px;
   }

   #cart-icon {
      font-size: 30px;
   }

   .breadcrumb {
      font-size: 14px;
   }

   .breadcrumb i {
      display: none;
   }

   div.category-item {
      margin: 1px;
      width: 155px;
   }

}