.body{background-color:red;}
.horizontal-scroll-container {
  width: 100%; /* Full width of the viewport */
  height: 720px; /* Adjust based on your content */
  overflow: hidden; /* Hide content outside the container */
  position: relative; /* For positioning arrows (later) */
  border: 1px solid #e0e0e0; /* Optional: Visual boundary */
}

.scroll-content {
  display: flex; /* Align items in a row */
  height: 100%; /* Match container height */
  width: max-content; /* Auto-adjust width to fit all items */
}
 
/* Style individual items */
.scroll-item {
  width: 1280px; /* Fixed width for items (adjust as needed) */
  height: 100%; /* Match content height */
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
}
 
/* Hide scrollbar for IE, Edge, and Firefox */
.horizontal-scroll-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}