.iframe-container {
  width: 100%;
  height: 100vh;  /* Full height on desktop */
  display: block;
}
.button {
  background: none; /* Remove background */
  border: none; /* Remove border */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  width: 400px; /* Set width */
  height: 400px; /* Set height */
  cursor: pointer; /* Show pointer cursor on hover */
  position: absolute; /* Position the button absolutely */
  top: 450px; /* Adjust top position */
  left: 0; /* Adjust left position */
  opacity: 0; /* Make the button fully transparent */
  z-index: 1000; /* Ensure the button is above the iframe */
  outline: none; /* Remove the default outline */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}
.button:hover {
  opacity: 0; /* Keep the button fully transparent on hover */
  background-color: transparent; /* Remove background color on hover */
}
@media screen and (max-width: 768px) {
  .iframe-container {
      width: 100vw;  /* Use full viewport width */
      height: 100vh; /* Use full viewport height */
      position: absolute;
      left: 0;
      top: 0;
      background-color: #fff; /* Prevent white flash */
  }

  .iframe-container iframe {
      width: 100%;
      height: 100%;
      border: none;
  }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .button {
      display: none; /* Hide the button */
  }
}
@media screen and (max-width: 480px) {
  .button {
      width: 102%;   /* Full width */
      height: 50vh;  /* Adjust height */
      top: 60vh;    /* Lower position */
      left: -1vw;    /* Center it */
      opacity: 0;   /* Make it visible */
  }
}
@media screen and (max-width: 375px) {
  .button {
      width: 102%;   /* Full width */
      height: 50vh;  /* Adjust height */
      top: 64vh;    /* Lower position */
      left: -1vw;    /* Center it */
      opacity: 0;   /* Make it visible */
  }
}
/* Style the logo overlay */
.logo-overlay {
    position: absolute; /* Position the logo absolutely */
    top: 10px; /* Adjust top position */
    left: 10px; /* Adjust left position */
    z-index: 1000; /* Ensure the logo is above the iframe */
}

/* Style the logo image */
.logo {
    width: 40px; /* Adjust logo width */
    height: auto; /* Maintain aspect ratio */
}
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
  height: 100%;
}
.button:focus,
.button:active {
    outline: none; /* Remove outline on focus and active states */
    box-shadow: none; /* Remove box shadow (if any) */
}
.button:hover {
  opacity: 0; /* Keep the button fully transparent on hover */
  background-color: transparent; /* Remove background color on hover */
}