@import url("about-us-marquee.css");

.tpl-5067 .element.el-42cddf0 {
  --display: flex;
  --flex-direction: row;
  --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
  --container-widget-height: 100%;
  --container-widget-flex-grow: 1;
  --container-widget-align-self: stretch;
  --flex-wrap-mobile: wrap;
  --align-items: center;
  --gap: 0px 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --flex-wrap: wrap;
  border-style: solid;
  --border-style: solid;
  border-width: 0px 0px 1px 0px;
  --border-top-width: 0px;
  --border-right-width: 0px;
  --border-bottom-width: 1px;
  --border-left-width: 0px;
  border-color: var(--color-divider);
  --border-color: var(--color-divider);
  --padding-top: 15px;
  --padding-bottom: 15px;
  --padding-left: 10px;
  --padding-right: 10px;
  --z-index: 100;
  overflow: visible;
}

.tpl-5067 .element.el-42cddf0:not(.motion-effects-element-type-background),
.tpl-5067 .element.el-42cddf0 > .motion-effects-container > .motion-effects-layer {
  background-color: var(--color-black);
}

.tpl-5067 .element.el-364e295 {
  --display: flex;
  --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;
  overflow: visible;
}

.w-artistic-site-logo .ata-site-logo-container .ata-site-logo-img {
  border-color: var(--color-primary);
}

.w-artistic-site-logo .widget-image-caption {
  color: var(--color-text);
  font-family: var(--typography-text-font-family), Sans-serif;
  font-size: var(--typography-text-font-size);
  font-weight: var(--typography-text-font-weight);
  line-height: var(--typography-text-line-height);
}

.tpl-5067 .element.el-48e03ad .ata-site-logo-container,
.tpl-5067 .element.el-48e03ad .ata-caption-width figcaption {
  text-align: left;
}

.tpl-5067 .element.el-48e03ad .ata-site-logo img {
  max-width: 100%;
  max-height: 50px;
}

.tpl-5067 .element.el-48e03ad .widget-image-caption {
  margin-top: 0px;
  margin-bottom: 0px;
}

.tpl-5067 .element.el-48e03ad .ata-site-logo-container .ata-site-logo-img {
  border-style: none;
}

.tpl-5067 .element.el-842dc3e {
  --display: flex;
  overflow: visible;
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover,
.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus,
.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active,
.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a {
  background-color: #FFFFFF00;
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel {
  background-color: var(--color-accent);
  border-style: none;
  border-radius: 20px 20px 20px 20px;
  min-width: 230px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}

.tpl-5067 .element.el-50130de button.elementskit-menu-hamburger:hover {
  background-color: var(--color-primary);
}

.tpl-5067 .element.el-50130de button.elementskit-menu-close {
  background-color: var(--color-black);
  border-style: none;
  color: var(--color-primary);
}

.tpl-5067 .element.el-50130de button.elementskit-menu-close:hover {
  background-color: var(--color-primary);
  color: var(--color-black);
}

.tpl-5067 .element.el-50130de .elementskit-menu-container {
  height: 55px;
  border-radius: 0px 0px 0px 0px;
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6em;
  color: var(--color-primary);
  padding: 15px 15px 15px 15px;
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:hover {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:focus {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:active {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li:hover > a {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li.current-menu-item > a {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li.current-menu-ancestor > a {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator {
  color: var(--color-accent);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a .elementskit-submenu-indicator {
  font-size: 12px;
  color: var(--color-primary);
  fill: var(--color-primary);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon {
  font-size: 12px;
  color: var(--color-primary);
  fill: var(--color-primary);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav-default .elementskit-dropdown-has > a .elementskit-submenu-indicator {
  margin: 0px 0px 0px 8px;
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav-default .elementskit-dropdown-has > a .ekit-submenu-indicator-icon {
  margin: 0px 0px 0px 8px;
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6em;
  padding: 6px 20px 6px 20px;
  color: var(--color-primary);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover {
  color: var(--color-primary);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus {
  color: var(--color-primary);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active {
  color: var(--color-primary);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a {
  color: var(--color-primary);
}

.tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li.current-menu-item > a {
  color: var(--color-white);
}

.tpl-5067 .element.el-50130de .elementskit-submenu-panel {
  padding: 5px 0px 5px 0px;
}

.tpl-5067 .element.el-50130de button.elementskit-menu-hamburger {
  float: right;
}

.tpl-5067 .element.el-50130de button.elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
  background-color: var(--color-black);
}

.tpl-5067 .element.el-50130de button.elementskit-menu-hamburger > .ekit-menu-icon {
  color: var(--color-black);
}

.tpl-5067 .element.el-50130de button.elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon {
  background-color: var(--color-black);
}

.tpl-5067 .element.el-50130de button.elementskit-menu-hamburger:hover > .ekit-menu-icon {
  color: var(--color-black);
}

.tpl-5067 .element.el-ff28529 {
  --display: flex;
  --flex-direction: row;
  --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
  --container-widget-height: 100%;
  --container-widget-flex-grow: 1;
  --container-widget-align-self: stretch;
  --flex-wrap-mobile: wrap;
  --justify-content: flex-end;
  --align-items: center;
  overflow: visible;
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-aae13d8 > a :is(i, svg) {
  color: var(--color-accent);
  fill: var(--color-accent);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-aae13d8 > a:hover {
  color: var(--color-white);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-aae13d8 > a:hover svg path {
  stroke: var(--color-white);
  fill: var(--color-white);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-4221e1e > a :is(i, svg) {
  color: var(--color-accent);
  fill: var(--color-accent);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-4221e1e > a:hover {
  color: var(--color-white);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-4221e1e > a:hover svg path {
  stroke: var(--color-white);
  fill: var(--color-white);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-1ae5b06 > a :is(i, svg) {
  color: var(--color-accent);
  fill: var(--color-accent);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-1ae5b06 > a:hover {
  color: var(--color-white);
}

.tpl-5067 .element.el-5db1bc3 .repeater-item-1ae5b06 > a:hover svg path {
  stroke: var(--color-white);
  fill: var(--color-white);
}

.tpl-5067 .element.el-5db1bc3 .ekit_social_media {
  text-align: center;
}

.tpl-5067 .element.el-5db1bc3 .ekit_social_media > li > a {
  text-align: center;
  text-decoration: none;
}

.tpl-5067 .element.el-5db1bc3 .ekit_social_media > li {
  display: inline-block;
  margin: 0px 15px 0px 0px;
}

.tpl-5067 .element.el-5db1bc3 .ekit_social_media > li > a i {
  font-size: 20px;
}

.tpl-5067 .element.el-5db1bc3 .ekit_social_media > li > a svg {
  max-width: 20px;
}

.tpl-5067 .element.el-34a5ede .ekit-wid-con .ekit-sidebar-widget {
  background-color: var(--color-secondary);
  max-width: 375px;
}

.tpl-5067 .element.el-34a5ede .ekit-bg-black {
  background-color: #FFFFFF00;
}

.tpl-5067 .element.el-34a5ede .ekit-sidebar-group {
  --transition-duration: 0.3s;
}

.tpl-5067 .element.el-34a5ede .ekit_navSidebar-button {
  color: var(--color-primary);
  background-color: var(--color-divider);
  border-radius: 100% 100% 100% 100%;
}

.tpl-5067 .element.el-34a5ede .ekit_navSidebar-button svg path {
  stroke: var(--color-primary);
  fill: var(--color-primary);
}

.tpl-5067 .element.el-34a5ede .ekit_navSidebar-button:hover {
  color: var(--color-primary);
  background-color: var(--color-accent);
}

.tpl-5067 .element.el-34a5ede .ekit_navSidebar-button:hover svg path {
  stroke: var(--color-secondary);
  fill: var(--color-secondary);
}

.tpl-5067 .element.el-34a5ede .ekit_navSidebar-button i {
  font-size: 14px;
}

.tpl-5067 .element.el-34a5ede .ekit_navSidebar-button svg {
  max-width: 14px;
}

.tpl-5067 .element.el-34a5ede .ekit_navSidebar-button,
.tpl-5067 .element.el-34a5ede .ekit_social_media ul > li:last-child {
  padding: 10px 11px 10px 11px;
}

.tpl-5067 .element.el-34a5ede .ekit_close-side-widget {
  color: var(--color-primary);
  background-color: #FFFFFF00;
  width: 38px;
  height: 38px;
  line-height: calc(38px - 4px);
  border-radius: 50% 50% 50% 50%;
  padding: 2px 2px 2px 2px;
  margin: 16px 8px 0px 0px;
}

.tpl-5067 .element.el-34a5ede .ekit_close-side-widget svg path {
  stroke: var(--color-primary);
  fill: var(--color-primary);
}

.tpl-5067 .element.el-34a5ede .ekit_close-side-widget:hover {
  color: var(--color-primary);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.tpl-5067 .element.el-34a5ede .ekit_close-side-widget:hover svg path {
  stroke: var(--color-secondary);
  fill: var(--color-secondary);
}

.tpl-5067 .element.el-34a5ede .ekit_close-side-widget i {
  font-size: 16px;
}

.tpl-5067 .element.el-34a5ede .ekit_close-side-widget svg {
  max-width: 16px;
}

.tpl-5067 .element.el-34a5ede .ekit-wid-con .ekit_sidebar-textwidget {
  padding: 150px 30px 30px 30px;
}

@media(min-width:768px) {
  .tpl-5067 .element.el-364e295 {
    --width: 16%;
  }

  .tpl-5067 .element.el-842dc3e {
    --width: 68%;
  }

  .tpl-5067 .element.el-ff28529 {
    --width: 16%;
  }
}

@media(max-width:1024px) and (min-width:768px) {
  .tpl-5067 .element.el-364e295 {
    --width: 30%;
  }

  .tpl-5067 .element.el-842dc3e {
    --width: 70%;
  }

  .tpl-5067 .element.el-ff28529 {
    --width: 100%;
  }
}

@media(max-width:1024px) {
  .tpl-5067 .element.el-42cddf0 {
    --padding-top: 10px;
    --padding-bottom: 10px;
    --padding-left: 10px;
    --padding-right: 10px;
  }

  .w-artistic-site-logo .widget-image-caption {
    font-size: var(--typography-text-font-size);
    line-height: var(--typography-text-line-height);
  }

  .tpl-5067 .element.el-842dc3e {
    --flex-direction: row;
    --container-widget-width: initial;
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap-mobile: wrap;
    --justify-content: flex-end;
  }

  .tpl-5067 .element.el-50130de .elementskit-menu-container {
    background-color: var(--color-accent);
    max-width: 100%;
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a {
    color: #FFFFFF;
    padding: 8px 20px 8px 20px;
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:hover {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:focus {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:active {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li:hover > a {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li.current-menu-item > a {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li.current-menu-ancestor > a {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator {
    color: var(--color-primary);
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav-default .elementskit-dropdown-has > a .elementskit-submenu-indicator {
    margin: 0px 0px 0px 0px;
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav-default .elementskit-dropdown-has > a .ekit-submenu-indicator-icon {
    margin: 0px 0px 0px 0px;
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
    padding: 8px 20px 8px 10px;
  }

  .tpl-5067 .element.el-50130de .elementskit-navbar-nav .elementskit-submenu-panel {
    border-radius: 0px 0px 0px 0px;
  }

  .tpl-5067 .element.el-50130de button.elementskit-menu-hamburger {
    padding: 8px 8px 3px 8px;
    width: 38px;
    border-radius: 8px;
  }

  .tpl-5067 .element.el-50130de button.elementskit-menu-hamburger > .ekit-menu-icon {
    font-size: 20px;
  }

  .tpl-5067 .element.el-50130de button.elementskit-menu-close {
    font-size: 20px;
    padding: 5px 5px 5px 5px;
    width: 38px;
    border-radius: 8px;
  }

  .tpl-5067 .element.el-50130de .elementskit-nav-logo > img {
    max-width: 160px;
    max-height: 60px;
  }

  .tpl-5067 .element.el-50130de .elementskit-nav-logo {
    margin: 5px 0px 5px 0px;
    padding: 5px 5px 5px 5px;
  }
}

@media(max-width:767px) {
  .tpl-5067 .element.el-364e295 {
    --width: 60%;
  }

  .w-artistic-site-logo .widget-image-caption {
    font-size: var(--typography-text-font-size);
    line-height: var(--typography-text-line-height);
  }

  .tpl-5067 .element.el-842dc3e {
    --width: 40%;
  }

  .tpl-5067 .element.el-50130de .elementskit-nav-logo > img {
    max-width: 120px;
    max-height: 50px;
  }
}

/* Center all container-inner elements and stretch height to prevent background video cut-off */
.container > .container-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: stretch !important;
  height: 100% !important;
}

/* Ensure all section parent containers span the full viewport width */
.container-parent {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Constrain and center the 4-column feature box on the homepage */
.tpl-21 .element.el-6e5998c {
  max-width: var(--container-max-width, 1300px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* --- NEW THEME OVERRIDES --- */

/* Override global variables to match the recommended palette */
:root,
body,
.kit-8588 {
  --color-sellivio-purple: #2F6BFF !important;
  --color-deep-royal-purple: #351070 !important;
  --color-electric-blue: #2F68FF !important;
  --color-accent: #2F6BFF !important;
  /* primary accent color */
  --color-accentsecondary: #2F68FF !important;
  /* Electric Blue for highlights/actions */
  --color-bg: #010214 !important;
  /* Midnight Navy background */
  --color-secondary: #060814 !important;
  /* Blackish card/section backgrounds */
}

/* Glowing background gradient for the whole website (applied to body & page wrappers) */
body,
.page-content,
#page,
.site-wrapper {
  background-color: #010214 !important;
  background-image:
    radial-gradient(circle at 90% 15vw, rgba(144, 22, 187, 0.2) 0%, rgba(1, 2, 20, 0) 50vw),
    radial-gradient(circle at 10% 85vh, rgba(47, 104, 255, 0.2) 0%, rgba(1, 2, 20, 0) 50vw) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Smooth gradient on heading highlights and animated fancy text (Electric Blue -> Violet Purple) */
.heading-title span,
h2.heading-title span,
.ekit-fancy-text-lists .ekit-fancy-text,
.ekit-fancy-text-lists b.ekit-fancy-text {
  background-image: linear-gradient(90deg, #2F68FF 0%, #9016BB 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.

/* Make all primary/fill buttons a solid primary color (#2F6BFF) */
.elementskit-btn,
.button,
.widget-elementskit-button .elementskit-btn,
.w-button .button,
.wp-block-button .wp-block-button__link,
.button.button-link {
  background-image: none !important;
  background: #2F6BFF !important;
  border: 1px solid #2F6BFF !important;
  color: #ffffff !important;
  transition: all 0.15s ease !important;
}

/* Keep hover/active/focus states the same solid color (no gradient) */
.elementskit-btn:hover,
.button:hover,
.widget-elementskit-button .elementskit-btn:hover,
.w-button .button:hover,
.wp-block-button .wp-block-button__link:hover,
.button.button-link:hover,
.elementskit-btn:active,
.button:active,
.elementskit-btn:focus,
.button:focus {
  background-image: none !important;
  background: #2F6BFF !important;
  border-color: #2F6BFF !important;
  color: #ffffff !important;
}

/* FEATURES section: heading left, description and button right */
.our-features {
  text-align: left !important;
}

.our-features .section-title .heading-title,
.our-features .widget.w-heading .heading-title {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.our-features .w-text-editor .widget-body,
.our-features .w-button .button-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.our-features .w-button .button-wrapper .button {
  margin: 0 !important;
}

/* Ensure header CTA uses the same Sellivio purple and does not switch to a different hover color */
.tpl-5067 .element.el-ff28530 .elementskit-btn,
.tpl-5067 .header-cta-btn,
.elementskit-nav-identity-panel .header-cta-btn {
  background: #2F6BFF !important;
  border: 1px solid #2F6BFF !important;
  color: #ffffff !important;
  padding: 22px 36px !important;
  min-height: 64px !important;
}

.tpl-5067 .element.el-ff28530 .elementskit-btn:hover,
.tpl-5067 .header-cta-btn:hover,
.elementskit-nav-identity-panel .header-cta-btn:hover {
  background: #2F6BFF !important;
  border-color: #2F6BFF !important;
}

/* Style all standard feature/benefit and pricing checklist icons as Electric Blue */
.w-icon-box.view-default .icon,
.w-icon-box.view-framed .icon,
.w-icon-box.view-stacked .icon,
.elementskit-pricing-lists > li :is(i, svg),
.elementskit-pricing-lists .repeater-item-7c3f13b > :is(i, svg),
.elementskit-pricing-lists .repeater-item-48b5bf7 > :is(i, svg) {
  fill: var(--color-electric-blue) !important;
  color: var(--color-electric-blue) !important;
  border-color: var(--color-electric-blue) !important;
}

/* Style the outer parent container (.el-e51b254) as the black container card */
.tpl-21 .element.el-e51b254 {
  background-color: #060814 !important;
  background: #060814 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 30px !important;
  padding: 60px 6px !important;
  box-sizing: border-box !important;
  /* Reduce the gap between columns to 4px */
  --gap: 4px 4px !important;
  --row-gap: 4px !important;
  --column-gap: 4px !important;
  gap: 4px !important;
}

.tpl-21 .element.el-e51b254::before {
  background-color: transparent !important;
  background: transparent !important;
}

/* Remove backgrounds, borders, and paddings from the inside column containers (.testimonial-benefits-item) */
.testimonial-benefits-item {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

/* Ensure inner widget wrappers stretch fully */
.testimonial-benefits-item .widget-body,
.testimonial-benefits-item .ekit-wid-con,
.testimonial-benefits-item .elementskit-single-pricing {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Remove all backgrounds, paddings, borders, and shadows from the inside container (.elementskit-single-pricing) */
.elementskit-single-pricing,
.elementskit-single-pricing * {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* Pricing element details styled relative to the new outer card parent */
/* Stack the card SVGs vertically above the headings to separate them */
.testimonial-benefits-item .elementskit-pricing-header {
  margin-bottom: 24px !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.testimonial-benefits-item .elementskit-pricing-header svg {
  flex-shrink: 0 !important;
  margin: 0 0 20px 0 !important;
  margin-bottom: 20px !important;
}

.testimonial-benefits-item .elementskit-pricing-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.3em !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  width: 100% !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.testimonial-benefits-item .elementskit-pricing-title * {
  white-space: nowrap !important;
  display: inline !important;
}

.testimonial-benefits-item .elementskit-pricing-lists {
  padding: 0 !important;
  margin: 24px 0 0 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.testimonial-benefits-item .elementskit-pricing-lists li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 16px !important;
  line-height: 1.4em !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.testimonial-benefits-item .elementskit-pricing-lists li :is(i, svg) {
  margin: 0 !important;
  font-size: 12px !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
}

/* Other digital feature/pricing card overrides */
.digital-features-item,
.case-study-card {
  background-color: #060814 !important;
}


/* Custom oval gradient overlay from the center of the background image in the hero section */
.tpl-21 .element.el-2a9e60c:not(.motion-effects-element-type-background),
.tpl-21 .element.el-2a9e60c > .motion-effects-container > .motion-effects-layer {
  background: radial-gradient(ellipse at center, rgba(64, 24, 184, 0.5) 0%, rgba(47, 104, 255, 0.2) 60%, rgba(1, 2, 20, 0) 80%),
    url("../images/hero-vider-img.png") 50% 50% / cover no-repeat !important;
}

/* Style the hero arrow button as solid primary color (#2F6BFF) */
.tpl-21 .element.el-f783d7e .elementskit-btn {
  background-image: none !important;
  background: #2F6BFF !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  border: 1px solid #2F6BFF !important;
}

/* Ensure background video covers the entire container without any cut-off */
.background-video-container video,
.background-video-hosted {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
}

/* Smoothly fade the bottom of the background video into the page background using mask-image */
.background-video-container {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%) !important;
}

/* Style header with glassmorphism to blend with the background gradient and eliminate fixed lines */
.tpl-5067 .element.el-42cddf0:not(.motion-effects-element-type-background),
.tpl-5067 .element.el-42cddf0 > .motion-effects-container > .motion-effects-layer {
  background-color: rgba(1, 2, 20, 0.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Completely remove the dark overlays on the hero section and its background video container */
.tpl-21 .element.el-2a9e60c::before,
.tpl-21 .element.el-2a9e60c > .background-video-container::before {
  background-color: transparent !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* Disable the trailing custom magic cursor and restore default browser cursor states */
#magic-cursor,
#ball {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body,
html,
a,
button,
select,
input,
[role="button"] {
  cursor: default !important;
}

a,
button,
select,
[role="button"],
.elementskit-btn,
.button,
.elementskit-menu-hamburger {
  cursor: pointer !important;
}

/* Custom mostly-violet-to-blue gradient for highlights and counter numbers inside the digital success card */
.digital-success-box .heading-title span,
.success-counter-item .counter-number-wrapper,
.success-counter-item .counter-number-wrapper span {
  background-image: linear-gradient(90deg, #B26BFF 0%, #8445FF 75%, #2F68FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
}

/* Expand the proof cards column width slightly and adjust the text column on desktop (50/50 layout) */
@media(min-width: 1025px) {
  .tpl-21 .element.el-bb3cc4c {
    width: 50% !important;
    --width: 50% !important;
  }

  .tpl-21 .element.el-f76ed54 {
    width: 50% !important;
    --width: 50% !important;
  }
}

/* Style all small section labels (e.g. ABOUT SELLIVIO, OUR SERVICES, WHY SELLIVIO, PROOF, etc.) as Electric Blue */
.section-title,
.section-title .heading-title,
.section-title h2,
.section-title span,
.section-title .heading-title span {
  background-image: none !important;
  -webkit-text-fill-color: var(--color-electric-blue) !important;
  color: var(--color-electric-blue) !important;
}

/* Force the section sub-heading icon stars (mask-image icon-sub-heading.svg) to render in white */
.section-title .heading-title::before {
  background-color: var(--color-white) !important;
  background: var(--color-white) !important;
}

/* Style the parent row container el-c97c631 to have a clean gap between the 4 cards */
.tpl-21 .element.el-c97c631 {
  --gap: 24px 24px !important;
  --row-gap: 24px !important;
  --column-gap: 24px !important;
  gap: 24px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Style each of the 4 columns in "How We Work" as a separate, symmetrical black card */
.tpl-21 .element.el-6d39048,
.tpl-21 .element.el-a9673ce,
.tpl-21 .element.el-de01684,
.tpl-21 .element.el-9cba014 {
  background-color: #060814 !important;
  background: #060814 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 24px !important;
  padding: 40px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Remove default background overlays */
.tpl-21 .element.el-6d39048::before,
.tpl-21 .element.el-a9673ce::before,
.tpl-21 .element.el-de01684::before,
.tpl-21 .element.el-9cba014::before {
  background-color: transparent !important;
  background: transparent !important;
  display: none !important;
}

/* Set columns to symmetrical 25% width on desktop including the 24px gap */
@media(min-width: 1025px) {

  .tpl-21 .element.el-6d39048,
  .tpl-21 .element.el-a9673ce,
  .tpl-21 .element.el-de01684,
  .tpl-21 .element.el-9cba014 {
    width: calc(25% - 18px) !important;
    --width: calc(25% - 18px) !important;
  }
}

/* Force all text alignment within service items to be left-aligned (not justified) */
.service-item,
.service-item *,
.service-item p,
.service-item h3,
.service-item .elementskit-infobox,
.service-item .elementskit-info-box-title,
.service-item .icon-box-wrapper,
.service-item .icon-box-content {
  text-align: left !important;
}

/* Make sure all service cards in the services page are of the same size (equal height) */
/* Make sure all service cards are of the same size (equal height across all rows) */
@media (min-width: 1025px) {

  .tpl-78 .element.el-30534fa,
  .tpl-78 .element.el-30534fa > .container-inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 30px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {

  .tpl-78 .element.el-30534fa,
  .tpl-78 .element.el-30534fa > .container-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 767px) {

  .tpl-78 .element.el-30534fa,
  .tpl-78 .element.el-30534fa > .container-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 20px !important;
  }
}

/* Ensure service items fill the grid columns and rows */
.service-item {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* Handle optional container-inner wrapper within service item cards */
.service-item > .container-inner {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  height: 100% !important;
  justify-content: flex-start !important;
}

/* Ensure the text container inside service item grows to fill height */
.service-item > div:last-child,
.service-item > .container-inner > div:last-child {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.service-item > div:last-child > .widget,
.service-item > div:last-child > .widget > .widget-body,
.service-item > div:last-child > .widget > .widget-body > .ekit-wid-con,
.service-item > div:last-child > .widget > .widget-body > .ekit-wid-con > a,
.service-item > div:last-child > .widget > .widget-body > .ekit-wid-con > a > .elementskit-infobox,
.service-item > .container-inner > div:last-child > .widget,
.service-item > .container-inner > div:last-child > .widget > .widget-body,
.service-item > .container-inner > div:last-child > .widget > .widget-body > .ekit-wid-con,
.service-item > .container-inner > div:last-child > .widget > .widget-body > .ekit-wid-con > a,
.service-item > .container-inner > div:last-child > .widget > .widget-body > .ekit-wid-con > a > .elementskit-infobox {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  height: 100% !important;
}

/* Force circular button arrows to be white by default, and black on hover */
.w-button .button .button-icon svg path {
  fill: #ffffff !important;
}

.w-button .button:hover .button-icon svg path {
  fill: #000000 !important;
}

/* Make social media follow headings font size slightly smaller */
.agency-social-item .elementskit-info-box-title {
  font-size: 18px !important;
  line-height: 1.3em !important;
}

/* Transition and zoom animation for Real Accountability card image */
.el-75ab260 .digital-features-image img {
  transition: all 0.4s ease-in-out !important;
}

.el-75ab260:hover .digital-features-image img {
  transform: scale(1.08) !important;
}

/* Custom oval gradient overlay from the center of the background image in page headers (About Us, Services, Results) */
.tpl-11524 .element.el-87bb18f:not(.motion-effects-element-type-background),
.tpl-11524 .element.el-87bb18f > .motion-effects-container > .motion-effects-layer,
.tpl-78 .element.el-713745c:not(.motion-effects-element-type-background),
.tpl-78 .element.el-713745c > .motion-effects-container > .motion-effects-layer,
.element.el-res1000:not(.motion-effects-element-type-background),
.element.el-res1000 > .motion-effects-container > .motion-effects-layer,
.element.el-res1000 {
  background: radial-gradient(ellipse at center, rgba(64, 24, 184, 0.5) 0%, rgba(47, 104, 255, 0.2) 60%, rgba(1, 2, 20, 0) 80%),
    url("../images/page-header-bg.jpg") 50% 50% / cover no-repeat !important;
}

/* Styling for platform icons inside cards to prevent width stretching and blend white backgrounds on dark cards */
.element.el-3fb7231 img,
.element.el-278452c img {
  width: auto !important;
  max-width: 100% !important;
  height: 32px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  filter: invert(1) hue-rotate(180deg) !important;
}

/* TikTok Shop logo has large built-in vertical margins; we increase height and apply negative margins to align it */
.element.el-2f765d4 img {
  width: auto !important;
  max-width: 100% !important;
  height: 90px !important;
  object-fit: contain !important;
  margin: -25px auto !important;
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Custom styling for partner logos in the results page marquee */
.element.el-res1006 .ekit-marquee-item img.marquee-logo-img {
  width: auto !important;
  height: 90px !important;
  max-width: 450px !important;
  object-fit: contain !important;
  margin: 0 75px !important;
  /* Increased horizontal gap between logos */
  filter: brightness(0) invert(1) !important;
  opacity: 0.75 !important;
  transition: filter 0.3s ease, opacity 0.3s ease !important;
}

.element.el-res1006 .ekit-marquee-item img.marquee-logo-img:hover {
  filter: none !important;
  opacity: 1 !important;
}

/* Individual height overrides to balance wider/taller logo aspect ratios */
.element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Amazon"] {
  height: 125px !important;
}

.element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Walmart"] {
  height: 135px !important;
}

.element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Shopify"] {
  height: 130px !important;
}

.element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="TikTok Shop"] {
  height: 155px !important;
}

/* Solid plain blue background for Results page marquee and complete height collapse reset */
.element.el-res1006,
.element.el-res1006 .widget-body,
.element.el-res1006 .ekit-wid-con,
.element.el-res1006 .ekit-content-ticker-wrapper,
.element.el-res1006 .ekit-content-items,
.element.el-res1006 .ticker,
.element.el-res1006 .marquee-wrapper,
.element.el-res1006 .ekit-marquee-item {
  background: transparent !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  min-height: 0px !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Revert to gradient violet-blue background on the main marquee container row */
.element.el-res1006 {
  background: linear-gradient(90deg, #7F00FF 0%, #2F68FF 100%) !important;
  position: relative !important;
}

/* Thin horizontal gradient lines at the top and bottom of the marquee */
.element.el-res1006::before,
.element.el-res1006::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  /* Thin 1px line */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 15%, rgba(255, 255, 255, 0.7) 85%, rgba(255, 255, 255, 0) 100%) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.element.el-res1006::before {
  top: 0 !important;
}

.element.el-res1006::after {
  bottom: 0 !important;
}


/* Ensure the marquee items container stacks in front of the center line */
.element.el-res1006 .ekit-content-items {
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure marquee items stack above the center line */
.element.el-res1006 .ekit-marquee-item {
  position: relative !important;
  z-index: 5 !important;
}

/* Slow down marquee scroll speed */
.element.el-res1006 .marquee-wrapper {
  --transition-timing: 70s !important;
  animation-duration: 70s !important;
  -webkit-animation-duration: 70s !important;
}

/* Mobile responsive marquee */
@media (max-width: 767px) {
  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img {
    height: 48px !important;
    max-width: 240px !important;
    margin: 0 25px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Amazon"] {
    height: 66px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Walmart"] {
    height: 72px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Shopify"] {
    height: 69px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="TikTok Shop"] {
    height: 82px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img {
    height: 68px !important;
    max-width: 340px !important;
    margin: 0 45px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Amazon"] {
    height: 94px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Walmart"] {
    height: 102px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="Shopify"] {
    height: 98px !important;
  }

  .element.el-res1006 .ekit-marquee-item img.marquee-logo-img[alt="TikTok Shop"] {
    height: 116px !important;
  }
}

/* Ensure compressed theme root overrides (.kit-8588) use the new primary color */
.kit-8588 {
  --color-sellivio-purple: #2F6BFF !important;
}

/* Hero: make the rotating "learn more" circle match primary button color */
.tpl-21 .learn-more-circle .w-text-path svg path,
.tpl-21 .learn-more-circle svg path,
.tpl-21 .learn-more-circle .e-text-path svg path {
  fill: #2F6BFF !important;
  stroke: #2F6BFF !important;
}

/* Ensure any icon inside the learn-more circle is white for contrast */
.tpl-21 .learn-more-circle svg text,
.tpl-21 .learn-more-circle .elementskit-btn .button-icon,
.tpl-21 .learn-more-circle .icon,
.tpl-21 .learn-more-circle a {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Make button content horizontal: place icon and arrow on the same line */
.elementskit-btn .button-content-wrapper,
.elementskit-btn .button-content-wrapper * {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.elementskit-btn .button-content-wrapper {
  gap: 10px !important;
}

.elementskit-btn .button-icon,
.elementskit-btn .button-text {
  display: inline-flex !important;
  align-items: center !important;
}

.

/* Mobile hamburger/menu fixes: ensure visibility and clickability */
.elementskit-menu-hamburger,
.elementskit-menu-hamburger .ekit-menu-icon {
  position: relative !important;
  z-index: 110000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sd-mobile-nav-close {
  z-index: 110002 !important;
}

.sd-mobile-nav-fix {
  z-index: 110001 !important;
  /* ensure off-canvas panel sits above page content but below toggler */
}

.sd-mobile-nav-overlay-fix {
  z-index: 109999 !important;
  pointer-events: none !important;
}

.sd-mobile-nav-overlay-fix.sd-open {
  pointer-events: auto !important;
}

/* Ensure the mobile off-canvas menu shows its tabs and is readable */
@media (max-width: 1024px) {
  .sd-mobile-nav-fix {
    background-color: #010214 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sd-mobile-nav-fix .elementskit-navbar-nav {
    display: block !important;
    flex-direction: column !important;
    padding: 24px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  .sd-mobile-nav-fix .elementskit-navbar-nav > li {
    display: block !important;
    width: 100% !important;
  }

  .sd-mobile-nav-fix .elementskit-navbar-nav > li > a,
  .sd-mobile-nav-fix .ekit-menu-nav-link {
    display: block !important;
    color: #ffffff !important;
    padding: 14px 24px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  .sd-mobile-nav-fix .elementskit-navbar-nav > li > a:hover {
    background: rgba(255, 255, 255, 0.03) !important;
  }
}

/* Stronger force: ensure the off-canvas panel jumps fully into the viewport when opened */
@media (max-width: 1024px) {
  .sd-mobile-nav-fix {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    transform: translateX(-100%) !important;
    will-change: transform !important;
  }

  .sd-mobile-nav-fix.sd-open {
    transform: translateX(0) !important;
  }

  /* If another rule tries to set left:-100vw, override it */
  .sd-mobile-nav-fix[style*="left:-100vw"],
  .sd-mobile-nav-fix[style*="left:-100%"] {
    left: 0 !important;
  }
}

/* ==========================================================================
   HOME PAGE SERVICES CAROUSEL & MOBILE EXPANDABLE GRID
   ========================================================================== */

/* Breakpoint visibility management */
@media (min-width: 768px) {
  .services-carousel-wrapper {
    display: block !important;
    position: relative;
    width: 100%;
    margin-top: 40px;
  }

  .services-mobile-list {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .services-carousel-wrapper {
    display: none !important;
  }

  .services-mobile-list {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 30px;
  }
}

/* Slider Track & Sizing */
.services-slider-container {
  position: relative;
  width: 100%;
  overflow: visible;
  /* Allows navigation buttons to float outside */
}

.services-slider-viewport {
  overflow: hidden;
  width: 100%;
}

.services-slider-track {
  display: flex !important;
  align-items: stretch !important;
  gap: 30px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

/* Force service card styling to be uniform and premium across all modules */
.service-item {
  background-image: url("../images/service-bg.svg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: 30px !important;
  padding: 40px !important;
  background-color: var(--color-secondary) !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.service-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(47, 107, 255, 0.4) !important;
  box-shadow: 0 10px 30px rgba(47, 107, 255, 0.15) !important;
}

/* Carousel responsive width calculations: exactly 2 cards visible */
@media (min-width: 768px) {
  .services-slider-item {
    flex: 0 0 calc((100% - 30px) / 2) !important;
    max-width: calc((100% - 30px) / 2) !important;
    align-self: stretch !important;
    height: auto !important;
  }
}

/* Glassmorphism Slider Navigation Buttons */
.services-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  z-index: 100 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.services-slider-nav:hover {
  background: #2F6BFF !important;
  border-color: #2F6BFF !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(47, 107, 255, 0.4) !important;
}

.services-slider-prev {
  left: 15px !important;
}

.services-slider-next {
  right: 15px !important;
}

/* Navigation SVGs styling */
.services-slider-nav svg {
  transition: transform 0.2s ease !important;
}

.services-slider-prev:hover svg {
  transform: translateX(-2px) !important;
}

.services-slider-next:hover svg {
  transform: translateX(2px) !important;
}

/* Mobile trigger card styling */
#sd-view-more-card {
  transition: all 0.3s ease !important;
}

#sd-view-more-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: #2F6BFF !important;
}

#sd-view-more-card:hover .icon {
  transform: scale(1.1) !important;
  color: #ffffff !important;
}

#sd-view-more-card .icon {
  transition: all 0.3s ease !important;
}

/* Staggered card fade-in animation rules */
@keyframes sdFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sd-reveal-animation {
  animation: sdFadeInUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Remove default plugin backgrounds/borders/shadows to eliminate the white content blocks */
.service-item .widget-body,
.service-item .ekit-wid-con,
.service-item .ekit-wid-con a,
.service-item .elementskit-infobox,
.service-item .box-body {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure the text colors inside service items are white and legible */
.service-item .elementskit-info-box-title,
.service-item .elementskit-info-box-title span,
.service-item .elementskit-info-box-title a {
  color: #ffffff !important;
}

.service-item p,
.service-item .elementskit-infobox p,
.service-item .elementskit-infobox .box-body p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Specific override for this template's menu-container which sets height:55px */
@media (max-width: 1024px) {
  .tpl-5067 .element.el-50130de .elementskit-menu-container.sd-mobile-nav-fix {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: auto !important;
  }
}

/* Mobile: reduce horizontal padding and card heights for service cards */
@media (max-width: 767px) {

  /* Reduce outer container padding so cards use more horizontal space */
  .tpl-21 .element.el-e51b254 {
    padding: 24px 12px !important;
  }

  /* Make service items use full width and reduce inner padding */
  .service-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Reduce the internal padding of elementskit-infoboxes to make cards shorter */
  .service-item .elementskit-infobox,
  .tpl-21 .elementskit-infobox,
  .tpl-78 .elementskit-infobox {
    padding: 14px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Reduce spacing inside box body */
  .service-item .elementskit-infobox .box-body,
  .tpl-21 .elementskit-infobox .box-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure images inside cards don't force large heights */
  .service-item img,
  .tpl-21 img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Slightly reduce title sizes on mobile to save vertical space */
  .service-item .elementskit-info-box-title,
  .tpl-21 .elementskit-info-box-title {
    font-size: 18px !important;
    line-height: 1.2em !important;
  }
}

/* Align service icon and action icon on same horizontal line in mobile */
@media (max-width: 767px) {

  /* Target the immediate container holding the icon and the action button */
  .service-item > .element,
  .service-item .element {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .service-item .service-item-icon,
  .service-item .service-item-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ensure icon sizes are preserved but don't stack */
  .service-item .icon,
  .service-item .icon-wrapper,
  .service-item .icon svg {
    display: inline-flex !important;
    height: auto !important;
    width: auto !important;
  }
}

/* Desktop: align service icon and action icon horizontally */
.service-item > .element,
.service-item .element {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.service-item .service-item-icon,
.service-item .service-item-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.service-item .icon,
.service-item .icon-wrapper,
.service-item .icon svg {
  display: inline-flex !important;
  height: auto !important;
  width: auto !important;
}

/* Import about page marquee rules (moved to top of file) */
/* already imported at top to satisfy browser requirements */

/* Mobile view overrides for the success counters in the "Trust, backed by numbers" section */
@media (max-width: 767px) {
    .success-counter-item .counter {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .success-counter-item .counter-title {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .success-counter-item .counter-number-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    /* Disable unequal flex growing that pulls prefixes/suffixes off-center */
    .success-counter-item .counter-number-wrapper span {
        flex-grow: 0 !important;
        display: inline-block !important;
    }
    .success-counter-item .counter-number-wrapper .counter-number-prefix {
        position: static !important;
        margin-right: 4px !important;
    }

    /* Fix social media cards going off-screen to the left on mobile */
    .agency-social-item .elementskit-infobox {
        margin: 15px 15px 0 55px !important;
    }
    .agency-social-item .elementskit-box-header .elementskit-info-box-icon {
        left: -45px !important;
        top: -25px !important;
    }
}