body {
  margin: 0;
  margin-bottom: 500px;
  font-family: Arial, sans-serif;
  text-align: center;
  color: #333;
  line-height: 1.6;
}
h2 {
  margin-top: 50px;
  margin-bottom: 25px;
}
.banner {
  width: 100%;
  padding-top: 18.4%; /* Set to (height / width) * 100, e.g., 56.25% for 16:9 images */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.banner-link {
  display: block; /* Makes the link fill the entire banner area */
  text-decoration: none; /* Removes default underline styling for links */
}
.banner h1 {
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.5rem;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  margin: 0;
}
.banner h2 {
  position: absolute;
  top: 20%;
  left: 10%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  margin: 0;
}
.intro-text, .footer-text, .tutorial-text {
  max-width: 80%;
  margin: 20px auto;
  padding: 0 15px;
  font-size: 1.2rem;
  text-align: justify;
}
.footer-text {
  margin: 50px auto;
}
.buttons {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin: 20px auto;
  flex-wrap: wrap;
}
.button {
  position: relative;
  flex: 1 1 300px; /* Responsive scaling */
  max-width: 300px;
  height: 200px;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.25); /* Adjust hover effect by changing the value */
}
.button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 5px 10px; /* Add padding around the text */
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent gray background */
  border-radius: 5px; /* Rounded corners for the background */
}
.button-download span {
  color: #003d4d; /* Darker text color for contrast */
  font-size: 1.5rem; /* Text size */
  font-weight: bold;
  padding: 5px 10px;
}
.button-download {
  width: 25%; /* 75% of the page width */
  max-width: 800px; /* Optional: Set a maximum width to avoid the button becoming too large on wide screens */
  margin: 20px auto; /* Center the button horizontally and add vertical spacing */
  padding: 20px; /* Add internal padding for better size */
  background-color: #a4f4f9; /* Light aqua background */
  border-radius: 10px; /* Rounded corners for a modern look */
  text-align: center; /* Center the text */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: transform 0.2s ease; /* Smooth hover effect */
}

.centered-image {
  text-align: center; /* Center the image container */
  margin: 20px 0; /* Add some vertical spacing around the image */
}
.centered-image img {
  width: 50%; /* Scale the image to 50% of the page width */
  max-width: 100%; /* Prevent the image from exceeding its original size */
  height: auto; /* Maintain the aspect ratio */
}

.centered-video {
  text-align: center; /* Center the video container */
  margin: 20px 0; /* Add spacing above and below the video */
}
video {
  max-width: 100%; /* Ensure the video doesn't exceed the container width */
  height: auto; /* Maintain the aspect ratio */
}