/* Container for the iframe to ensure responsiveness */
.iframe-container {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Limits container size on very large screens */
  margin: 0 auto; /* Centers the container */
  padding: 1rem; /* Adds spacing around the iframe */
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

/* Styling for the title above the iframe with pulse animation */
.iframe-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 1rem 0; /* Space below title */
  text-align: center; /* Center the title */
  animation: pulse 2s ease-in-out infinite; /* Apply pulse animation */
}

/* Pulse animation keyframes */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Slightly scale up */
  }
  100% {
    transform: scale(1); /* Return to original size */
  }
}

/* Ensure iframe is responsive while maintaining aspect ratio */
.iframe-container iframe {
  width: 100%;
  height: 400px; /* Default height for larger screens */
  border: 0; /* Removes default iframe border */
  display: block; /* Prevents unwanted spacing */
}

/* Mobile devices (up to 576px, small screens) */
@media screen and (max-width: 576px) {
  .iframe-container {
    padding: 0.5rem;
  }
  .iframe-container iframe {
    height: 200px; /* Reduced height for small screens */
  }
  .iframe-title {
    font-size: 1.2rem; /* Smaller font for mobile */
  }
}

/* Tablets and medium devices (577px to 768px) */
@media screen and (min-width: 577px) and (max-width: 768px) {
  .iframe-container {
    padding: 0.75rem;
  }
  .iframe-container iframe {
    height: 300px; /* Moderate height for tablets */
  }
  .iframe-title {
    font-size: 1.3rem; /* Slightly larger for tablets */
  }
}

/* Laptops and desktops (769px to 1200px) */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .iframe-container iframe {
    height: 350px; /* Slightly smaller than default for mid-range screens */
  }
  .iframe-title {
    font-size: 1.4rem;
  }
}

/* Large desktops and 4K screens (1201px and above) */
@media screen and (min-width: 1201px) {
  .iframe-container iframe {
    height: 450px; /* Larger height for 4K displays */
  }
  .iframe-title {
    font-size: 1.6rem; /* Larger font for 4K */
  }
}

/* Ensure iframe scales appropriately on very small screens */
@media screen and (max-width: 360px) {
  .iframe-container iframe {
    height: 180px; /* Extra small height for tiny mobile devices */
  }
  .iframe-title {
    font-size: 1.1rem; /* Extra small font for tiny screens */
  }
}