body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Inter", sans-serif;

  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Full viewport height */
  background-color: #777;
}

.projects-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center items vertically */
  align-items: center; /* Center items horizontally */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  height: 100vh; /* Set the container to fill the entire viewport height */
}

.project {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
  scroll-snap-align: center;
  transition: transform 0.3s;
  cursor: pointer;
  position: relative;
}

.project img {
  width: 400px; /* Set the width to 4 inches */
  height: 100%; /* Set the height to 6 inches */
  max-width: 100%;
  transition: transform 0.3s;
  border-radius: 5px;
  row-gap: 50px;
}

.project-title {
  display: none;
  font-family: "BAYON", sans-serif;
  font-size: 30px; /* Set the font size to 40px */
  position: absolute;
  top: 50%; /* Position at the center vertically */
  left: 50%; /* Position at the center horizontally */
  transform: translate(-50%, -50%); /* Center the title text */
  background-color: #777; /* Remove the background */
  color: #000; /* Text color */
  padding: 10px; /* Add some padding for readability */
  border: none; /* Remove the border */
  z-index: 1; /* Place the title above the image */
}

.project:hover .project-title {
  display: block;
}

.project:hover {
  transform: scale(1.2); /* Adjust the scale factor as needed for image zoom */
}