.elementor-kit-6{--e-global-color-primary:#F7F8FC;--e-global-color-secondary:#00B2FF;--e-global-color-text:#B8BAC6;--e-global-color-accent:#7B2CFF;--e-global-color-af4ac6b:#0B0B0F;--e-global-color-2363442:#121218;--e-global-color-4c35550:#1A1A22;--e-global-color-3113483:#2B2B36;--e-global-color-d767b75:#838695;--e-global-color-25ae5c6:#5F17D6;--e-global-color-dfbef71:#0067D9;--e-global-color-868705e:#00E0D1;--e-global-color-0f7b427:#FF2CA7;--e-global-color-765cfa9:#FF5D6C;--e-global-color-2d6cf3f:#FFB84D;--e-global-color-958d8da:#F5F7FB;--e-global-color-96d733a:#FFFFFF;--e-global-color-d4a9dda:#171820;--e-global-color-2d80a79:#4E5361;--e-global-color-298aa2e:#6F7482;--e-global-color-ea298e9:#D9DEE8;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;background-color:var( --e-global-color-af4ac6b );font-family:"Inter", Sans-serif;font-size:18px;font-weight:400;font-style:normal;text-decoration:none;line-height:1.65em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 p{margin-block-end:18px;}.elementor-kit-6 a{color:var( --e-global-color-secondary );font-family:"Inter", Sans-serif;font-weight:600;font-style:normal;text-decoration:none;}.elementor-kit-6 a:hover{color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;font-weight:600;font-style:normal;text-decoration:underline;}.elementor-kit-6 h1{font-family:"Manrope", Sans-serif;font-size:56px;font-weight:700;text-decoration:none;line-height:1.08em;}.elementor-kit-6 h2{font-family:"Manrope", Sans-serif;font-size:42px;font-weight:700;text-decoration:none;line-height:1.15em;}.elementor-kit-6 h3{font-family:"Manrope", Sans-serif;font-size:32px;font-weight:600;text-decoration:none;line-height:1.2em;}.elementor-kit-6 h4{font-family:"Manrope", Sans-serif;font-size:24px;font-weight:600;text-decoration:none;line-height:1.25em;}.elementor-kit-6 h5{font-family:"Manrope", Sans-serif;font-size:20px;font-weight:600;text-decoration:none;line-height:1.3em;}.elementor-kit-6 h6{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:600;text-decoration:none;line-height:1.35em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{font-size:17px;line-height:1.65em;letter-spacing:0em;}.elementor-kit-6 p{margin-block-end:16px;}.elementor-kit-6 h1{font-size:46px;line-height:1.08em;}.elementor-kit-6 h2{font-size:36px;line-height:1.15em;}.elementor-kit-6 h3{font-size:28px;line-height:1.2em;}.elementor-kit-6 h4{font-size:22px;line-height:1.25em;}.elementor-kit-6 h5{font-size:18px;line-height:1.3em;}.elementor-kit-6 h6{font-size:16px;line-height:1.35em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{font-size:16px;line-height:1.65em;letter-spacing:0em;}.elementor-kit-6 p{margin-block-end:16px;}.elementor-kit-6 h1{font-size:38px;line-height:1.08em;}.elementor-kit-6 h2{font-size:30px;line-height:1.15em;}.elementor-kit-6 h3{font-size:24px;line-height:1.2em;}.elementor-kit-6 h4{font-size:20px;line-height:1.25em;}.elementor-kit-6 h5{font-size:18px;line-height:1.3em;}.elementor-kit-6 h6{font-size:15px;line-height:1.35em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   BeatboxHQ section separators
   Add the class to a full-width outer section container.
   ========================================================= */


/* Shared separator setup */
.elementor .elementor-element.bbxhq-soft-separator,
.elementor .elementor-element.bbxhq-soft-separator-light {
  position: relative;
  overflow: hidden;
}


/* Keep section content above the separator effect */
.elementor .elementor-element.bbxhq-soft-separator > .e-con-inner,
.elementor .elementor-element.bbxhq-soft-separator > .elementor-element,
.elementor .elementor-element.bbxhq-soft-separator-light > .e-con-inner,
.elementor .elementor-element.bbxhq-soft-separator-light > .elementor-element {
  position: relative;
  z-index: 1;
}


/* Dark-page separator */
.elementor .elementor-element.bbxhq-soft-separator::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 38px;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(123, 44, 255, 0.32) 28%,
      rgba(0, 178, 255, 0.32) 72%,
      transparent 100%
    )
    top / 100% 1px no-repeat,

    linear-gradient(
      180deg,
      rgba(123, 44, 255, 0.09) 0%,
      rgba(0, 178, 255, 0.03) 14px,
      transparent 38px
    );
}


/* Light-page separator */
.elementor .elementor-element.bbxhq-soft-separator-light::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 34px;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(23, 24, 32, 0.16) 25%,
      rgba(23, 24, 32, 0.16) 75%,
      transparent 100%
    )
    top / 100% 1px no-repeat,

    linear-gradient(
      180deg,
      rgba(23, 24, 32, 0.10) 0%,
      rgba(23, 24, 32, 0.025) 14px,
      transparent 34px
    );
}

/* BeatboxHQ emphasized callout card */
.elementor .elementor-element.bbxhq-callout {
  position: relative;
  overflow: hidden;
  padding: 22px 24px 22px 30px;
  border: 1px solid #2B2B36;
  border-radius: 10px;
  background-color: #1A1A22;
}

/* Purple-to-blue vertical accent */
.elementor .elementor-element.bbxhq-callout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(
    180deg,
    #7B2CFF 0%,
    #00B2FF 100%
  );
}

/* =========================================================
   BeatboxHQ button variables
   Change these values here to update every gradient button.
   ========================================================= */

:root {
  --bbxhq-button-text: #F7F8FC;

  /* Main gradient: purple → blue */
  --bbxhq-gradient-main: linear-gradient(
    135deg,
    #7B2CFF 0%,
    #00B2FF 100%
  );

  /* Alternate gradient: pink → purple */
  --bbxhq-gradient-alt: linear-gradient(
    135deg,
    #FF3D9A 0%,
    #7B2CFF 100%
  );

  --bbxhq-button-transition: 180ms ease;
  --bbxhq-button-shadow: 0 8px 22px rgba(0, 178, 255, 0.18);
  --bbxhq-button-alt-shadow: 0 8px 22px rgba(123, 44, 255, 0.22);
}


/* =========================================================
   1. PERMANENT GRADIENT BUTTON

   Elementor CSS class:
   bbxhq-gradient-button

   The gradient remains the same on hover.
   Only the lift, brightness, and shadow change.
   ========================================================= */

.elementor
  .elementor-element.bbxhq-gradient-button
  .elementor-button {
  color: var(--bbxhq-button-text);
  background-color: transparent;
  background-image: var(--bbxhq-gradient-main);
  border: 0;

  transition:
    transform var(--bbxhq-button-transition),
    box-shadow var(--bbxhq-button-transition),
    filter var(--bbxhq-button-transition);
}

.elementor
  .elementor-element.bbxhq-gradient-button
  .elementor-button:hover,
.elementor
  .elementor-element.bbxhq-gradient-button
  .elementor-button:focus-visible {
  color: var(--bbxhq-button-text);

  /* Repeat the same gradient so Elementor hover settings
     cannot replace it. */
  background-color: transparent;
  background-image: var(--bbxhq-gradient-main);

  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--bbxhq-button-shadow);
}

.elementor
  .elementor-element.bbxhq-gradient-button
  .elementor-button:active {
  transform: translateY(0);
  box-shadow: none;
}


/* =========================================================
   2. GRADIENT-ON-HOVER BUTTON

   Elementor CSS class:
   bbxhq-gradient-hover-button

   The normal state retains whatever background color and
   border you configure in Elementor. The gradient appears
   only on hover or keyboard focus.
   ========================================================= */

.elementor
  .elementor-element.bbxhq-gradient-hover-button
  .elementor-button {
  transition:
    color var(--bbxhq-button-transition),
    border-color var(--bbxhq-button-transition),
    filter var(--bbxhq-button-transition),
    transform var(--bbxhq-button-transition),
    box-shadow var(--bbxhq-button-transition);
}

.elementor
  .elementor-element.bbxhq-gradient-hover-button
  .elementor-button:hover,
.elementor
  .elementor-element.bbxhq-gradient-hover-button
  .elementor-button:focus-visible {
  color: var(--bbxhq-button-text);
  background-color: transparent;
  background-image: var(--bbxhq-gradient-main);
  border-color: transparent;

  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: var(--bbxhq-button-shadow);
}

.elementor
  .elementor-element.bbxhq-gradient-hover-button
  .elementor-button:active {
  transform: translateY(0);
  box-shadow: none;
}


/* =========================================================
   3. GRADIENT-SWAP BUTTON

   Elementor CSS class:
   bbxhq-gradient-swap-button

   Normal state: purple → blue.
   Hover state: pink → purple.

   A pseudo-element creates a smooth crossfade because CSS
   cannot reliably animate directly between two gradients.
   ========================================================= */

.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  color: var(--bbxhq-button-text);
  background-color: transparent;
  background-image: var(--bbxhq-gradient-main);
  border: 0;

  transition:
    transform var(--bbxhq-button-transition),
    box-shadow var(--bbxhq-button-transition),
    filter var(--bbxhq-button-transition);
}

/* Alternate gradient placed above the normal gradient */
.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: var(--bbxhq-gradient-alt);
  opacity: 0;

  transition: opacity var(--bbxhq-button-transition);
}

/* Keep button text and icons above the gradient overlay */
.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
}

/* Fade in the alternate gradient */
.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button:hover::before,
.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button:focus-visible::before {
  opacity: 1;
}

.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button:hover,
.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button:focus-visible {
  color: var(--bbxhq-button-text);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: var(--bbxhq-button-alt-shadow);
}

.elementor
  .elementor-element.bbxhq-gradient-swap-button
  .elementor-button:active {
  transform: translateY(0);
  box-shadow: none;
}


/* =========================================================
   Reduced-motion accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .elementor
    .elementor-element.bbxhq-gradient-button
    .elementor-button,
  .elementor
    .elementor-element.bbxhq-gradient-hover-button
    .elementor-button,
  .elementor
    .elementor-element.bbxhq-gradient-swap-button
    .elementor-button,
  .elementor
    .elementor-element.bbxhq-gradient-swap-button
    .elementor-button::before {
    transition: none;
  }
}

/* Small gap after lists in legal-text sections */
.elementor .bbxhq-legal-text ul,
.elementor .bbxhq-legal-text ol {
  margin-bottom: 0.8em;
}

/* =========================================================
   Mobile-only CTA inside the WordPress navigation menu
   ========================================================= */

.bbxhq-mobile-menu-cta {
  display: none !important;
}

@media (max-width: 767px) {
  /* Menu-item wrapper */
  .bbxhq-mobile-menu-cta {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #090A0F !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  /* CTA link */
  .bbxhq-mobile-menu-cta > a {
    display: flex !important;
    justify-content: center;
    align-items: center;

    /* 16px inset on both sides */
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 16px 20px 18px !important;

    padding: 12px 18px !important;
    box-sizing: border-box !important;

    color: #F7F8FC !important;
    text-align: center;

    background-color: transparent !important;
    background-image: linear-gradient(
      135deg,
      #7B2CFF 0%,
      #00B2FF 100%
    ) !important;

    border: 0 !important;
    border-radius: 8px;

    transition:
      filter 180ms ease,
      transform 180ms ease,
      box-shadow 180ms ease;
  }

  .bbxhq-mobile-menu-cta > a:hover,
  .bbxhq-mobile-menu-cta > a:focus-visible {
    color: #F7F8FC !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 178, 255, 0.18);
  }
}/* End custom CSS */