@media screen and (max-width: 767px) and (min-width: 320px) {
    .flipslider {
      padding: 1.5rem 15px;
      position: relative; /* For arrow positioning */
    }
  
    .flipheading {
      font-size: 17px;
      padding-bottom: 2px;
    }
  
    .flipbigheading {
      font-size: 30px;
      line-height: 32px;
      letter-spacing: 1px;
    }
  
    .gallery {
      display: none;
    }
  
    .resultbox {
      overflow-y: hidden !important;
      overflow-x: scroll !important;
      white-space: nowrap;
      position: relative;
      margin: 10px 0px 0px 0px;
      text-align: left;
      scroll-behavior: smooth; /* Smooth scrolling */
    }
  
    .resultbox::-webkit-scrollbar {
      display: none; /* Hide scrollbar */
    }
  
    .resultboxcolumn {
      display: inline-block;
      width: 75%;
    }
  
    /* Arrow Styles */
    .scroll-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      font-size: 24px;
      padding: 10px;
      cursor: pointer;
      z-index: 10;
    }
  
    .scroll-prev {
      left: 5px;
    }
  
    .scroll-next {
      right: 5px;
    }
  
    .scroll-arrow:hover {
      background: rgba(0, 0, 0, 0.8);
    }
    
  }