/* Essentia overrides for the live-site snapshot pages (loaded after the original styles). */

/* our fixed animated page background shows through: no page / section colours */
.wp,
.wp .wpb {
  background: none !important;
  min-height: 0 !important;
}
.wp {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
/* the theme's html{} rules land on .wp: never let it become a scroll box */
main.wpm > .wp {
  overflow: visible !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
}
main.wpm {
  padding-top: var(--hh, 76px);
}
@media (max-width: 1024px) {
  main.wpm {
    padding-top: var(--hh, 62px);
  }
}
.wpm ~ .foot {
  position: relative;
  z-index: 1;
}
.wp .elementor-section:not(.bg_canvas_covered),
.wp .e-con,
.wp .elementor-column > .elementor-widget-wrap {
  background-color: transparent !important;
}

/* ThemeREX background canvas (circle that grows from the arrow) */
.wp .bg_canvas {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wp .bg_canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* entrance animations start hidden */
.wp .elementor-invisible {
  visibility: hidden;
}

/* Revolution-slider hero (home automation) */
.wp .ess-rev {
  position: relative;
  /* Revolution Slider grid: 1920x984 / 1440x700 / 778x700 / 480x480 */
  min-height: 48.6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.wp .ess-rev-v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp .ess-rev-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.wp .ess-rev-in {
  position: relative;
  z-index: 1;
  max-width: 1454px;
  padding: 120px 24px 140px;
}
.wp .ess-rev-t1,
.wp .ess-rev-t2 {
  margin: 0;
  color: #fff;
  font-family: var(--theme-font-h1_font-family, 'Plus Jakarta Sans'), sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 6.7vw, 128px);
  line-height: 1.02;
  letter-spacing: -1px;
  opacity: 0;
  transform: translateY(40px);
  animation: essRevIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards 0.3s;
}
.wp .ess-rev-t2 {
  animation-delay: 0.6s;
}
.wp .ess-rev-line {
  display: block;
  width: 100%;
  height: 1px;
  margin: 40px auto;
  background: rgba(255, 255, 255, 0.5);
  transform: scaleX(0);
  animation: essRevLine 1.2s ease forwards 0.9s;
}
.wp .ess-rev-p {
  margin: 0 auto;
  max-width: 1454px;
  font-size: clamp(16px, 1.3vw, 25px);
  line-height: 1.25;
  color: #fff;
  opacity: 0;
  animation: essRevFade 1.2s ease forwards 1.2s;
}
.wp .ess-rev-arrow {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  animation: essRevBob 2s ease-in-out infinite;
}
@media (min-width: 1441px) {
  .wp .ess-rev { min-height: 51.25vw; }
}
@media (max-width: 1239px) {
  .wp .ess-rev { min-height: min(90vw, 100vh); }
}
@media (max-width: 766px) {
  .wp .ess-rev { min-height: 100vw; }
  .wp .ess-rev-in { padding: 60px 18px 80px; }
  .wp .ess-rev-line { margin: 20px auto; }
}
@keyframes essRevIn {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes essRevLine {
  to {
    transform: scaleX(1);
  }
}
@keyframes essRevFade {
  to {
    opacity: 1;
  }
}
@keyframes essRevBob {
  50% {
    transform: translateY(8px) rotate(45deg);
  }
}

/* contact form messages */
.wp .wpcf7-response-output {
  margin-top: 1em;
}
.wp .wpcf7 form.submitting .wpcf7-submit {
  opacity: 0.6;
  pointer-events: none;
}

/* light theme: original "light" scheme of the theme, keep transparent page */
[data-theme='light'] .wp .bg_canvas canvas {
  opacity: 0.92;
}

/* Royal tabs: show the active panel with a fade (the plugin did this in JS) */
.wp .wpr-tab-content .wpr-tab-content-inner {
  transition: opacity 0.5s ease;
}
.wp .wpr-tab-content-active .wpr-tab-content-inner {
  opacity: 1;
}

/* the theme sets html{font-size:17px} (16px on phones): keep its rem maths inside the snapshot */
.wp {
  --wp-rem: 17px;
}
@media (max-width: 767px) {
  .wp {
    --wp-rem: 16px;
  }
}

/* pages whose original header floated over the hero */
main.wpm.wpm-over {
  padding-top: 0;
}

/* WebGL image hover effects are not ported: always show the picture */
.wp [class*='trx_addons_image_effects_on_'] img {
  opacity: 1 !important;
  visibility: visible !important;
}