/* Basic reset to remove margins and padding from body */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    height: 100vh; /* Full viewport height */
    background-color: #000; /* Optional: to give a black background around the image */
    overflow: hidden; /* Prevent scrolling */
}

/* Full-Screen Image Container */
.image-container {
    position: relative; /* Needed for absolute positioning of the play button */
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
}

/* Full-Screen Image Styling */
.image {
    width: 100%; /* Make the image fill the full width */
    height: 100%; /* Make the image fill the full height */
    object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}

/* Play button styling */
.play-button {
    position: absolute; /* Position the button absolutely over the image */
    top: 60%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #007bff; /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 20px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Play button icon color */
.play-button svg {
    fill: none;
    stroke: white; /* Set the icon color to white */
}

/* Hover effect */
.play-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Focus effect for accessibility */
.play-button:focus {
    outline: none;
    box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.8); /* Blue focus */
}
.text-overlay {
  position: absolute; /* Position the text relative to its parent container */
  top: 74%; /* Start the text from the vertical center */
  left: 50%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: white; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-size: 24px;
  width: 540px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}