body { margin: 0; padding: 0; font-family: sans-serif;
}
.container { position: relative; height: 100vh; overflow: hidden;
}
.centered-image { width: 100%; height: 100vh; object-fit: cover;
}

.centered-input { position: absolute; bottom: 23%; left: 50%; transform: translateX(-50%); 
  max-width: 260px; width: 100%; height: 40px; padding: 10px; padding-right: 20px; border: 
  1px solid #ddd; border-radius: 5px; text-align: center; box-sizing: border-box; z-index: 
  9999; display: inline-block; visibility: visible; background-color: rgba(255, 255, 255, 
  0.65); /* Semi-transparent white background */ color: #000000 !important; /* Ensures text 
  color is black */ font-size: 16px; /* Adjusts text size for readability */
}
.centered-input::placeholder { font-style: italic; color: #000000 !important; /* Ensures placeholder text is 
  also black for visibility */
}
.transparent-button { position: absolute; bottom: 16%; left: 50%; /* Center relative to the 
  viewport */ transform: translateX(-50%); /* Shift back to truly center */ height: 40px; 
  padding: 0 20px; /* Horizontal padding only */ border: 1px solid #ddd; border-radius: 
  5px; cursor: pointer; box-sizing: border-box; z-index: 9999; display: inline-block; 
  visibility: visible; background-color: rgba(51, 51, 51, 0.5); /* Matching the input 
  field's background */ color: #f2f2f2; /* Text color */ font-size: 16px; /* Matching the 
  input field's text size */ line-height: 40px; /* This will vertically center the text 
  within the button */ -webkit-appearance: none; /* Removes the default browser styling */
}