.elementor-36521 .elementor-element.elementor-element-a1e2143{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36521 .elementor-element.elementor-element-a1e2143:not(.elementor-motion-effects-element-type-background):not(.cmsmasters-bg-effect), .elementor-36521 .elementor-element.elementor-element-a1e2143 > .elementor-motion-effects-container > .elementor-motion-effects-layer, .elementor-36521 .elementor-element.elementor-element-a1e2143 > .cmsmasters-bg-effects-container > .cmsmasters-bg-effects-element{background:url("https://gm-worlds.com/wp-content/uploads/2025/10/GrunksTavern-Pixelart-WebP-100kb-Max-1000-px.webp") 50% 50%;background-size:cover;}.elementor-36521 .elementor-element.elementor-element-a1e2143.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-36521 .elementor-element.elementor-element-4215856{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:15%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-36521 .elementor-element.elementor-element-4215856.e-con{--align-self:center;}.elementor-36521 .elementor-element.elementor-element-19dff87{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:40px 40px 40px 40px;box-shadow:5px 9px 10px 0px rgba(0,0,0,0.5);--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36521 .elementor-element.elementor-element-19dff87:not(.elementor-motion-effects-element-type-background):not(.cmsmasters-bg-effect), .elementor-36521 .elementor-element.elementor-element-19dff87 > .elementor-motion-effects-container > .elementor-motion-effects-layer, .elementor-36521 .elementor-element.elementor-element-19dff87 > .cmsmasters-bg-effects-container > .cmsmasters-bg-effects-element{background-color:#FFFFFFDB;}.elementor-36521 .elementor-element.elementor-element-19dff87.e-con{--align-self:center;}.elementor-36521 .elementor-element.elementor-element-abc4573 > .elementor-widget-container{margin:-10% 0% -10% 0%;}@media(max-width:1024px){.elementor-36521 .elementor-element.elementor-element-4215856{--justify-content:flex-start;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-36521 .elementor-element.elementor-element-19dff87{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-36521 .elementor-element.elementor-element-abc4573 > .elementor-widget-container{margin:-10% 0% -10% 0%;}}@media(max-width:767px){.elementor-36521 .elementor-element.elementor-element-4215856{--justify-content:flex-start;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:20%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-36521 .elementor-element.elementor-element-19dff87{--width:73vw;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36521 .elementor-element.elementor-element-abc4573 > .elementor-widget-container{margin:-20% 0% -20% 0%;padding:0% 0% 0% 0%;}}@media(min-width:768px){.elementor-36521 .elementor-element.elementor-element-19dff87{--width:25%;}}@media(max-width:1024px) and (min-width:768px){.elementor-36521 .elementor-element.elementor-element-19dff87{--width:44vw;}}@media(min-width:1601px){.elementor-36521 .elementor-element.elementor-element-4215856{--padding-top:10%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-36521 .elementor-element.elementor-element-abc4573 > .elementor-widget-container{margin:-10% 0% -10% 0%;}.elementor-36521 .elementor-element.elementor-element-abc4573.elementor-element{--flex-grow:1;--flex-shrink:0;}}/* Start of your custom CSS rules for container, class: .elementor-element-a1e2143 */ /* === Base: full-screen hero with Elementor background video === */
.elementor-36521 .elementor-element.elementor-element-a1e2143 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 0;
}

/* Video wrapper must fill */
.elementor-36521 .elementor-element.elementor-element-a1e2143 > .elementor-background-video-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

/* Desktop/tablet: center + cover */
.elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container iframe.elementor-background-video-embed,
.elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 177.78vh !important;   /* 16:9 cover for tall screens */
  height: 100vh !important;
  object-fit: cover !important;
  border: none !important;
  pointer-events: none !important;
}

/* === MOBILE: pan/zoom video + keep the fallback perfectly aligned === */
@media (max-width: 767px) {

  /* VIDEO (YT iframe or MP4) */
  .elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container iframe.elementor-background-video-embed,
  .elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container video {
    transform: translate(-62%, -50%) scale(0.9) !important;
    transform-origin: center center !important;
  }

  /* FALLBACK — case A: pseudo-element (::before) used by some Elementor builds */
  .elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container::before {
    content: "";
    position: absolute;
    inset: 0;
    /* scale(0.9) ≈ background-size 111.11% */
    background-size: 111.11% auto !important; /* 1 / 0.9 */
    background-position: 62% 50% !important;  /* match translate(-62%,-50%) */
    z-index: 0;
  }

  /* FALLBACK — case B: background image set directly on the wrapper */
  .elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container {
    background-size: 111.11% auto !important;
    background-position: 62% 50% !important;
    background-repeat: no-repeat !important;
  }

  /* FALLBACK — case C: real <img> node (used by some themes/plugins) */
  .elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container img,
  .elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container .elementor-background-video-embed-placeholder,
  .elementor-36521 .elementor-element.elementor-element-a1e2143 .elementor-background-video-container .e-background-video__fallback {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 177.78vh !important;
    height: 100vh !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    transform: translate(-62%, -50%) scale(0.9) !important;
    transform-origin: center center !important;
    z-index: 0 !important;
  }
} /* End of your custom CSS rules */
/* Start of your page custom CSS rules */ /* Adjust for Tablet */
@media (max-width: 1024px) {
    .responsive-form-container iframe {
        height: 500px; /* Or any height that works well on tablets */
    }
}

/* Adjust for Mobile */
@media (max-width: 767px) {
    .responsive-form-container iframe {
        height: 450px; /* A shorter height for mobile phones */
    }
} /* End of your page custom CSS rules */