/* Sticky Section */
.topppa-sticky-section-yes {
  width: 100%;
  border-color: transparent;
  -webkit-transition: visibility 0s linear !important;
  -o-transition: visibility 0s linear !important;
  transition: visibility 0s linear !important;
}

.topppa-sticky-active {
  position: fixed !important;
}

.topppa-sticky-replace-header-yes + div,
.topppa-sticky-replace-header-yes + section,
.topppa-sticky-replace-header-yes + header {
  position: fixed;
  width: 100%;
  top: -1000px;
}

.topppa-section-full-height {
  height: 100% !important;
  background-color: transparent !important;
}

.topppa-sticky-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.topppa-visibility-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

.topppa-hidden-header {
  position: fixed !important;
  display: block !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.topppa-hidden-header-flex {
  position: fixed !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hide replacement sections when replacement is enabled */
.topppa-sticky-section-yes[data-topppa-replace-header=yes] + .elementor-element,
.topppa-sticky-section-yes[data-topppa-replace-header=yes] + .e-con,
.topppa-sticky-section-yes[data-topppa-replace-header=yes] + [data-element_type=container] {
  display: none !important;
}

/* Specific rule for Elementor editor */
.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .elementor-element,
.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .e-con,
.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + [data-element_type=container] {
  display: none !important;
}

/* Even more specific for editor mode */
body.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .elementor-element,
body.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .e-con,
body.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + [data-element_type=container] {
  display: none !important;
}

.topppa-none-out {
  display: none;
}

.topppa-fade-in {
  -webkit-animation-name: topppa-popup-animation-fade;
  animation-name: topppa-popup-animation-fade;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.topppa-fade-out {
  -webkit-animation-name: topppa-popup-animation-fade-out;
  animation-name: topppa-popup-animation-fade-out;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.topppa-slide-in {
  opacity: 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-animation-name: topppa-sticky-slide-in;
  animation-name: topppa-sticky-slide-in;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.topppa-slide-out {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-animation-name: topppa-sticky-slide-out;
  animation-name: topppa-sticky-slide-out;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.topppa-scale-in {
  opacity: 0;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-animation-name: topppa-sticky-scale-in;
  animation-name: topppa-sticky-scale-in;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.topppa-scale-out {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-animation-name: topppa-sticky-scale-out;
  animation-name: topppa-sticky-scale-out;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.topppa-bounce-in {
  opacity: 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-animation-name: topppa-sticky-bounce-in;
  animation-name: topppa-sticky-bounce-in;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.topppa-bounce-out {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-animation-name: topppa-sticky-bounce-out;
  animation-name: topppa-sticky-bounce-out;
  -webkit-animation-duration: var(--topppa-animation-duration, 500ms);
  animation-duration: var(--topppa-animation-duration, 500ms);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes topppa-sticky-slide-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes topppa-sticky-slide-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes topppa-sticky-slide-out {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes topppa-sticky-slide-out {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes topppa-popup-animation-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes topppa-popup-animation-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes topppa-popup-animation-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes topppa-popup-animation-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes topppa-sticky-scale-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes topppa-sticky-scale-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes topppa-sticky-scale-out {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes topppa-sticky-scale-out {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@-webkit-keyframes topppa-sticky-bounce-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  80% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes topppa-sticky-bounce-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  80% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes topppa-sticky-bounce-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
  40% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes topppa-sticky-bounce-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
  40% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes stickySlideTop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stickySlideBottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stickyFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}