.video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000; /* Black background for letterboxing */
  overflow: hidden;
  display: flex;
  align-items: center; /* Center video vertically */
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* For larger screens, maintain video size while keeping full width */
@media (min-width: 1024px) {
  .video-section {
      height: 90vh; /* Slightly smaller on desktop for better proportion */
  }

  .video-wrapper {
      max-width: 1600px; /* Maximum width for very large screens */
      max-height: 900px; /* Maximum height based on 16:9 ratio */
      padding-top: 0;
      height: 100%;
      margin: 0 auto;
  }
}

/* For mobile devices in landscape */
@media (max-width: 1023px) and (orientation: landscape) {
  .video-section {
      height: auto;
      padding: 2rem 0;
  }

  .video-wrapper {
      width: 90%;
      margin: 0 auto;
  }
}

/* For mobile devices in portrait */
@media (max-width: 767px) and (orientation: portrait) {
  .video-section {
      height: auto;
      padding: 2rem 0;
  }

  .video-wrapper {
      width: 100%;
      padding-top: 56.25%; /* Maintain 16:9 aspect ratio */
  }
}