.elementor-90 .elementor-element.elementor-element-558061d{--display:flex;--min-height:80vh;--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;--justify-content:center;--gap:67px 67px;--row-gap:67px;--column-gap:67px;--padding-top:0%;--padding-bottom:0%;--padding-left:3%;--padding-right:3%;}.elementor-90 .elementor-element.elementor-element-558061d:not(.elementor-motion-effects-element-type-background), .elementor-90 .elementor-element.elementor-element-558061d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );background-image:url("https://vortexpetro.com/wp-content/uploads/2025/11/a.png");}.elementor-90 .elementor-element.elementor-element-1dbeb257{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-90 .elementor-element.elementor-element-517e3ffd{--e-transform-translateY:-37px;text-align:center;}.elementor-90 .elementor-element.elementor-element-517e3ffd.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-90 .elementor-element.elementor-element-517e3ffd .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:5.7vw;font-weight:bold;text-transform:none;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:1px;word-spacing:0em;color:#000000;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-90 .elementor-element.elementor-element-2b709ce8 .elementor-button{background-color:#131212;font-family:"Helvetica", Sans-serif;font-size:89px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;border-style:solid;border-width:0px 0px 0px 0px;border-radius:500px 500px 500px 500px;padding:13px 30px 15px 30px;}.elementor-90 .elementor-element.elementor-element-2b709ce8 .elementor-button:hover, .elementor-90 .elementor-element.elementor-element-2b709ce8 .elementor-button:focus{background-color:#000000;color:#A38408;}.elementor-90 .elementor-element.elementor-element-2b709ce8{--e-transform-translateY:-37px;--e-transform-scale:0.8;}.elementor-90 .elementor-element.elementor-element-2b709ce8 .elementor-button:hover svg, .elementor-90 .elementor-element.elementor-element-2b709ce8 .elementor-button:focus svg{fill:#A38408;}body.elementor-page-90:not(.elementor-motion-effects-element-type-background), body.elementor-page-90 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#181818;}@media(max-width:1024px){.elementor-90 .elementor-element.elementor-element-517e3ffd .elementor-heading-title{font-size:12vw;}.elementor-90 .elementor-element.elementor-element-2b709ce8 .elementor-button{font-size:46px;}}@media(max-width:767px){.elementor-90 .elementor-element.elementor-element-558061d{--min-height:72vh;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-90 .elementor-element.elementor-element-1dbeb257{--content-width:585px;--min-height:67px;}.elementor-90 .elementor-element.elementor-element-517e3ffd{width:var( --container-widget-width, 335px );max-width:335px;--container-widget-width:335px;--container-widget-flex-grow:0;text-align:left;}.elementor-90 .elementor-element.elementor-element-517e3ffd .elementor-heading-title{font-size:11vw;}.elementor-90 .elementor-element.elementor-element-2b709ce8 .elementor-button{font-size:24px;}}/* Start custom CSS for button, class: .elementor-element-2b709ce8 *//* helper class when hero is active */
body.hero-locked {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* ensure hero uses exact px height we set from JS */
.hero-landing {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important; /* will be overridden by inline style from JS to window.innerHeight px */
  max-height: 100% !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* content above bg */
.hero-landing .hero-content {
  position: relative !important;
  z-index: 2 !important;
}

/* make sure body doesn't bounce on iOS */
html, body {
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-558061d *//* ===============================
   HERO FULLSCREEN BACKGROUND IMAGE
   Replace ".elementor-90 .elementor-element.elementor-element-558061d" with your hero class/id
   e.g. .hero-landing or #hero
   =============================== */

/* base reset so nothing accidentally adds extra height */
html, body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  -webkit-text-size-adjust: 100% !important;
}

/* style for the hero container using background-image (recommended) */
.elementor-90 .elementor-element.elementor-element-558061d {
  /* pin visually to viewport - use fixed so it fills screen and no layout shift */
  position: fixed !important;
  inset: 0 !important;             /* top: 0; right: 0; bottom: 0; left: 0 */
  width: 100vw !important;

  /* try modern dynamic vh first, then iOS fallback, then --vh fallback */
  height: 100dvh !important;                    /* modern browsers */
  height: -webkit-fill-available !important;    /* iOS Safari fallback */
  height: calc(var(--vh, 1vh) * 100) !important;/* final fallback if --vh set by JS */

  min-height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  z-index: 9999 !important;

  /* center content */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* background image behaviour */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;

  /* prevent accidental pointer blocking for buttons if needed */
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* if you still have an img tag instead of CSS background, style it like this */
.elementor-90 .elementor-element.elementor-element-558061d img.hero-bg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: 100% !important;
  min-width: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* content above the background */
.elementor-90 .elementor-element.elementor-element-558061d .hero-content,
.elementor-90 .elementor-element.elementor-element-558061d .elementor-widget-wrap,
.elementor-90 .elementor-element.elementor-element-558061d .elementor-column,
.elementor-90 .elementor-element.elementor-element-558061d .elementor-widget {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* CTA and icons that must be above everything */
.elementor-90 .elementor-element.elementor-element-558061d .my-hero-button,
.elementor-90 .elementor-element.elementor-element-558061d .my-hero-icon {
  position: relative !important;
  z-index: 3 !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* reset direct children to avoid stray margins pushing page taller */
.elementor-90 .elementor-element.elementor-element-558061d > * {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* hide or push header while hero active - use if your theme header collides */
body.hero-active header,
body.hero-active .site-header {
  display: none !important; /* or use transform: translateY(-100%) if you prefer slide-up */
}

/* prevent overscroll bounce and limit default mobile scroll behaviours */
html, body, .elementor-90 .elementor-element.elementor-element-558061d {
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: pan-x pan-y !important;
}

/* responsive text and spacing - scale headings and padding nicely */
.elementor-90 .elementor-element.elementor-element-558061d .hero-content {
  padding: 40px 60px !important;
  text-align: center !important;
  max-width: 1200px !important;
  width: 100% !important;
}

/* big desktop heading */
.elementor-90 .elementor-element.elementor-element-558061d h1, .elementor-90 .elementor-element.elementor-element-558061d .hero-heading {
  font-size: clamp(36px, 5vw, 96px) !important;
  line-height: 1.02 !important;
  margin: 0 auto 12px auto !important;
  color: #000 !important; /* change if needed */
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}

/* subtitle smaller */
.elementor-90 .elementor-element.elementor-element-558061d .hero-sub {
  font-size: clamp(14px, 2.2vw, 20px) !important;
  margin: 0 auto 18px auto !important;
  color: rgba(0,0,0,0.8) !important;
}

/* CTA styling example - modify in Elementor or here */
.elementor-90 .elementor-element.elementor-element-558061d .my-hero-button {
  display: inline-block !important;
  padding: 14px 34px !important;
  border-radius: 40px !important;
  border: 2px solid rgba(0,0,0,0.2) !important;
  background: rgba(255,255,255,0.95) !important;
  text-decoration: none !important;
  color: #000 !important;
  font-size: 20px !important;
}

/* accessibility focus outline */
.elementor-90 .elementor-element.elementor-element-558061d .my-hero-button:focus {
  outline: 3px solid rgba(0,0,0,0.12) !important;
  outline-offset: 3px !important;
}

/* tablet and mobile tweaks */
@media (max-width: 1024px) {
  .elementor-90 .elementor-element.elementor-element-558061d {
    /* keep pinned but use dynamic mobile-friendly heights */
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;

    /* prefer dynamic vh, ios fallback and var fallback */
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    height: calc(var(--vh, 1vh) * 100) !important;

    overflow: hidden !important;
    z-index: 9999 !important;
  }

  /* reduce padding and font sizes to avoid overflow */
  .elementor-90 .elementor-element.elementor-element-558061d .hero-content {
    padding: 18px 20px !important;
    max-width: 100% !important;
  }

  .elementor-90 .elementor-element.elementor-element-558061d h1, .elementor-90 .elementor-element.elementor-element-558061d .hero-heading {
    font-size: clamp(22px, 8vw, 48px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.5px !important;
  }

  .elementor-90 .elementor-element.elementor-element-558061d .my-hero-button {
    padding: 12px 22px !important;
    font-size: 18px !important;
  }
}

/* small extra safety for very small screens */
@media (max-width: 420px) {
  .elementor-90 .elementor-element.elementor-element-558061d h1, .elementor-90 .elementor-element.elementor-element-558061d .hero-heading {
    font-size: clamp(20px, 9vw, 36px) !important;
  }
  .elementor-90 .elementor-element.elementor-element-558061d .hero-content {
    padding: 14px 12px !important;
  }
}

/* helper utility - if you want to allow release of hero on CTA click */
/* apply this class via JS or manually when you want the page to resume normal flow */
..elementor-90 .elementor-element.elementor-element-558061d-unpin {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 1 !important;
}

/* final note:
   - set the background image via Elementor Style tab for the section or with:
       .elementor-90 .elementor-element.elementor-element-558061d { background-image: url("path/to/image.jpg"); }
   - ensure there is no extra empty section directly after the hero in Elementor
   - if you still see tiny scroll, inspect the element after hero for margins or fixed headers
*//* End custom CSS */