/* Back-to-top button */
.back-to-top-button {
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  cursor: pointer;
}

.back-to-top-button i {
  font-size: 20px;
  line-height: 1;
}

.back-to-top-button:hover {
  background-color: #fff;
  color: #000;
  transform: scale(1.1);
}

/* Reusable Elementor hover inversion.
   Add `spark-invert-hover` to a container's CSS Classes field. */
.spark-invert-hover {
  --spark-invert-bg: #000000;
  --spark-invert-fg: #ffffff;
  --spark-invert-hover-bg: #ffffff;
  --spark-invert-hover-fg: #000000;
  --spark-invert-border: currentColor;
  --spark-invert-duration: 320ms;
  --spark-invert-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  background-color: var(--spark-invert-bg) !important;
  border-color: color-mix(in srgb, var(--spark-invert-fg) 18%, transparent) !important;
  color: var(--spark-invert-fg) !important;
  isolation: isolate;
  transition:
    background-color var(--spark-invert-duration) var(--spark-invert-ease),
    border-color var(--spark-invert-duration) var(--spark-invert-ease),
    color var(--spark-invert-duration) var(--spark-invert-ease),
    box-shadow var(--spark-invert-duration) var(--spark-invert-ease),
    transform var(--spark-invert-duration) var(--spark-invert-ease);
}

.spark-invert-hover::before,
.spark-invert-hover::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 1px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to bottom, #000000, #888888);
  opacity: 0.3;
  transition: opacity 300ms ease-in-out;
}

.spark-invert-hover::before {
  left: 0;
}

.spark-invert-hover::after {
  right: 0;
}

.spark-invert-hover :where(
  h1, h2, h3, h4, h5, h6,
  p, span, small, strong, em, b,
  a, li, div,
  .elementor-heading-title,
  .elementor-icon,
  .elementor-icon-list-text,
  .elementor-button,
  .elementor-button-text,
  .pxl-item--title,
  .pxl-item--subtitle,
  .pxl-item--description,
  .pxl-heading-title,
  .pxl-heading-subtitle,
  .pxl-text-editor
) {
  color: inherit !important;
  transition:
    color var(--spark-invert-duration) var(--spark-invert-ease),
    border-color var(--spark-invert-duration) var(--spark-invert-ease),
    background-color var(--spark-invert-duration) var(--spark-invert-ease);
}

.spark-invert-hover :where(svg, i, .elementor-icon) {
  color: inherit !important;
}

.spark-invert-hover svg :where(path, circle, rect, polygon):not([fill="none"]) {
  fill: currentColor !important;
}

.spark-invert-hover svg :where(path, circle, rect, line, polyline, polygon):not([stroke="none"]) {
  stroke: currentColor !important;
}

.spark-invert-hover :where(svg, svg *) {
  transition:
    fill var(--spark-invert-duration) var(--spark-invert-ease),
    stroke var(--spark-invert-duration) var(--spark-invert-ease);
}

.spark-invert-hover :where(.elementor-button, .pxl-button, button, input[type="submit"]) {
  border-color: var(--spark-invert-border) !important;
}

.spark-invert-hover:hover,
.spark-invert-hover:focus-within {
  background-color: var(--spark-invert-hover-bg) !important;
  border-color: color-mix(in srgb, var(--spark-invert-hover-fg) 20%, transparent) !important;
  color: var(--spark-invert-hover-fg) !important;
}

.spark-invert-hover:hover::before,
.spark-invert-hover:hover::after,
.spark-invert-hover:focus-within::before,
.spark-invert-hover:focus-within::after {
  opacity: 0;
}

.spark-invert-hover:hover :where(.elementor-button, .pxl-button, button, input[type="submit"]),
.spark-invert-hover:focus-within :where(.elementor-button, .pxl-button, button, input[type="submit"]) {
  background-color: transparent !important;
  border-color: currentColor !important;
  color: inherit !important;
}

.spark-invert-hover[data-invert-theme="dark"],
.spark-invert-hover.spark-invert-hover--dark {
  --spark-invert-bg: #000000;
  --spark-invert-fg: #ffffff;
  --spark-invert-hover-bg: #ffffff;
  --spark-invert-hover-fg: #000000;
}

.spark-invert-hover[data-invert-theme="accent"],
.spark-invert-hover.spark-invert-hover--accent {
  --spark-invert-bg: #e9ff55;
  --spark-invert-fg: #000000;
  --spark-invert-hover-bg: #000000;
  --spark-invert-hover-fg: #e9ff55;
}

@media (prefers-reduced-motion: reduce) {
  .spark-invert-hover,
  .spark-invert-hover *,
  .spark-invert-hover *::before,
  .spark-invert-hover *::after {
    transition-duration: 1ms !important;
  }
}


/* Custom video play button */
.pxl-play-video-button,
.pxl-play-video-button *,
.pxl-play-video-button::before,
.pxl-play-video-button::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

.pxl-play-video-button .pxl-play-icon,
.pxl-play-video-button .pxl-play-icon svg,
.pxl-play-video-button .pxl-play-icon i {
  background: transparent !important;
  fill: currentColor !important;
  color: inherit !important;
}

.pxl-play-video-button .pxl-play-icon svg rect {
  display: none !important;
}

.pxl-play-video-button-wrapper .pxl-play-icon i,
.pxl-play-video-button-wrapper .pxl-play-icon svg {
  background: transparent !important;
  fill: currentColor;
  width: 48px;
  height: 48px;
  display: inline-block;
}



/* Mobile header */
#pxl-header-mobile .pxl-header-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
}

#pxl-header-mobile .pxl-header-inner .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.pxl-header-mobile .pxl-anchor-divider .pxl-icon-line:before,
.pxl-header-mobile .pxl-anchor-divider .pxl-icon-line:after {
    background: #343a40 !important;
}

/* Blog/archive spacing */
.blog #pxl-main,
.archive #pxl-main {
  padding-top: 0;
  padding-bottom: 0;
}

.single-post #pxl-main {
  padding-top: 0;
  padding-bottom: 0;
}

body.archive .spark-blog-template-hero {
  --padding-top: clamp(88px, 8vw, 112px) !important;
}

@media screen and (max-width: 767px) {
  .blog #pxl-main,
  .archive #pxl-main,
  .single-post #pxl-main {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.archive .spark-blog-template-hero {
    --padding-top: 78px !important;
  }
}