/* Reset for the page */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #007bff; /* Bright blue background */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* Container for centering content */
.container {
  position: relative;
  text-align: center;
  width: 100%;
}

/* Large HELLO text styling */
.hello-text {
  font-size: 12vw; /* Adjusted for better readability on all devices */
  color: white;
  letter-spacing: 5px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 1; /* Ensure the text is behind the megaphone */
  position: relative;
}

/* Megaphone container */
.megaphone-container {
  position: absolute;
  width: 100%;
  height: 200px; /* Adjust height to match megaphone size */
  top: 50%; /* Position container at the vertical center */
  transform: translateY(-50%); /* Ensure it aligns with the center of the text */
  overflow: hidden;
}

/* Megaphone image styling */
.megaphone {
  position: absolute;
  width: 25vw; /* Responsive megaphone size */
  height: auto;
  top: 0; /* Align directly in the middle of the HELLO */
  right: -25vw; /* Start from outside the right side */
  animation: moveMegaphone 1.5s forwards; /* Move over Hello in 3s */
  z-index: 2; /* Ensure megaphone is over the text */
}

/* Keyframe for moving the megaphone over the "Hello" text */
@keyframes moveMegaphone {
  0% {
    right: -25vw; /* Start from outside the screen on the right */
  }
  100% {
    right: calc(100% - 25vw); /* Adjust to stop just after the 'H' */
  }
}

/* Hidden arrow initially */
.arrow-container {
  visibility: hidden; /* Use visibility instead of display to keep layout */
  text-decoration: none;
  color: white;
  font-size: 6vw; /* Larger arrow for prominence */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 80vw; /* Adjust to position arrow after the "O" */
  animation: bounce 1.5s infinite; /* Bouncing animation for the arrow */
  z-index: 3; /* Ensure the arrow is clickable */
}

/* Arrow bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(15px);
  }
}

/* Responsive Styling */
@media (max-width: 768px) {
  .hello-text {
    font-size: 14vw; 
    /* Adjust size for smaller devices */
  }
  .megaphone {
    top: 20%;
    width: 30vw; /* Increase size for smaller screens */
  }
  .arrow-container {
    font-size: 8vw; /* Larger arrow on smaller devices */
  }
}

@media (max-width: 480px) {
  .hello-text {
    font-size: 18vw; /* Further adjust for very small devices */
  }
  .megaphone {
    top: 20%;
    width: 35vw; /* Increase size for small devices */
  }
  .arrow-container {
    font-size: 10vw; /* Even larger arrow size for small devices */
  }
}

/* Let's Talk image styling */
.letstalk {
  position: absolute;
  bottom: 0px; /* Adjust as necessary */
  right: 40px; /* Adjust as necessary */
  width: 150px; /* Set a desired width for the image */
  height: 18 rem; /* Maintain aspect ratio */
  display: none; /* Initially hidden */
  z-index: 4; /* Ensure it's above other elements */
}