/* ==========================================================================
   Popup Video Player
   Triggered by any element with class "popupvideo" that has a
   data-video="<embed url>" attribute (e.g. a Canva "watch?embed" link).
   ========================================================================== */
@media only screen and (max-width: 960px) {
    .introduction_with_side_image_wrapper .content_block {
        z-index: 99;
    }
}
.intro_content .button2.popupvideo{ margin-top:0; color:#FFF; padding-right:40px;}
  .intro_content .button2.popupvideo:after{ right:10px;}
.intro_content .button2.popupvideo:hover{ color:var(--gold)}
.intro_content .button2.popupvideo:hover:after{ background:var(--gold)}


.pvp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.25s ease;
}
 
.pvp-overlay.is-active {
  display: flex;
  opacity: 1;
}
 
.pvp-modal {
  position: relative;
  width: 100%;
  max-width: 960px;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
 
.pvp-overlay.is-active .pvp-modal {
  transform: scale(1);
}
 
/* 16:9 responsive video frame */
.pvp-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
 
.pvp-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
 
.pvp-close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
 
.pvp-close:hover,
.pvp-close:focus-visible {
  background: rgba(255, 255, 255, 0.25);
}
 
.pvp-fullscreen-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: none; /* shown via JS only when the browser actually supports it */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
 
.pvp-fullscreen-btn.is-supported {
  display: flex;
}
 
.pvp-fullscreen-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
 
/* Lock page scroll while the modal is open */
body.pvp-lock {
  overflow: hidden;
}
 
/*
  Mobile / narrow screens: a small centered 16:9 box is where the trouble
  starts. On a narrow portrait phone that box works out to only ~150-200px
  tall, and Canva's own player controls (its center play button and its
  top-right "..." menu) get squeezed into that sliver and start to overlap.
 
  The fix isn't to rotate the device (see the JS file for why that's not
  reliable) — it's to stop starving the player for space. Below, the modal
  fills the whole viewport instead of a small box, so Canva's UI has full
  room to lay itself out and nothing overlaps.
*/
@media (max-width: 768px) {
  .pvp-overlay {
    padding: 0;
  }
 
  .pvp-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
  }
 
  .pvp-video-wrap {
    height: 100%;
    padding-top: 0;
    border-radius: 0;
  }
 
  .pvp-close {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    background: rgba(0, 0, 0, 0.55);
  }
 
  .pvp-fullscreen-btn {
    bottom: max(12px, env(safe-area-inset-bottom));
    right: max(12px, env(safe-area-inset-right));
  }
}