/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/*
 * Global CSS
 * */

body {
  --white-color: var(--e-global-color-085a1fb);
  --light-bg: var(--e-global-color-5a836c7);
  --light-bg1: #eff8ff;
}

.br-desktop-none br {
  display: none;
}

figure {
  line-height: 0;
}

.elementor-widget-theme-post-excerpt p:last-child,
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.elementor-widget-button .elementor-button {
  transition: all 0.4s ease-in-out;
}

.elementor-widget-icon .elementor-icon-wrapper,
.elementor-widget-icon-box .elementor-icon-box-icon {
  line-height: 0;
}

.icon-height-size.elementor-widget-icon
  .elementor-icon-wrapper
  .elementor-icon
  svg {
  height: auto;
}

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title {
  margin-top: 0;
}

.icon-box-icon-center.elementor-widget-icon-box .elementor-icon-box-wrapper {
  align-items: center;
}

/* Button CSS */

.elementor-widget-button .elementor-button {
  position: relative;
  overflow: hidden;
}

.elementor-widget-button .elementor-button:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--e-global-color-primary);
  border-radius: 100px;
  transition: all 0.5s ease-in-out;
  z-index: 0;
}

.btn-white-bg.elementor-widget-button .elementor-button {
  border: 1px solid var(--white-color);
}

.btn-white-bg.elementor-widget-button .elementor-button:before {
  background: var(--white-color);
}

.elementor-widget-button .elementor-button:hover:before,
.elementor-widget-button .elementor-button:focus:before {
  width: 100%;
  left: 0;
  right: auto;
}

.no-bg.elementor-widget-button .elementor-button:before {
  display: none;
}

.elementor-widget-button .elementor-button .elementor-button-content-wrapper {
  position: relative;
  align-items: center;
  z-index: 1;
}

.elementor-widget-button .elementor-button-wrapper,
.elementor-widget-button
  .elementor-button
  .elementor-button-content-wrapper
  .elementor-button-icon {
  line-height: 0;
}

.elementor-widget-button .elementor-button .elementor-button-icon svg {
  width: 18px;
}

.elementor-widget-button .elementor-button .elementor-button-icon svg path {
  transition: all 0.3s ease-in-out;
}

/* Icon Box Animations */

/* icon-box-anim-1: Lift + Icon Bounce + Title Underline Draw */
.icon-box-anim-1.elementor-widget-icon-box .elementor-icon-box-wrapper {
  transition: transform 0.4s ease-in-out;
}

.icon-box-anim-1.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
  transform: translateY(-8px);
}

.icon-box-anim-1.elementor-widget-icon-box .elementor-icon {
  border: 2px solid transparent;
  backface-visibility: hidden;
  transition:
    transform 0.3s ease-out,
    background-color 0.3s ease-out,
    border-color 0.3s ease-out,
    color 0.15s ease-out !important;
}

.icon-box-anim-1.elementor-widget-icon-box:hover .elementor-icon {
  transform: scale(1.1) rotate(-8deg);
  background-color: transparent !important;
  border-color: var(--e-global-color-accent) !important;
  color: var(--e-global-color-accent) !important;
  transition:
    transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    background-color 0.3s ease-out,
    border-color 0.3s ease-out,
    color 0.2s ease-out !important;
}

.icon-box-anim-1.elementor-widget-icon-box .elementor-icon-box-title {
  display: inline-block;
  position: relative;
}

.icon-box-anim-1.elementor-widget-icon-box .elementor-icon-box-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--e-global-color-primary);
  transition: width 0.4s ease-in-out;
}

.icon-box-anim-1.elementor-widget-icon-box:hover
  .elementor-icon-box-title::after {
  width: 100%;
}

/* Container Animations */

/* container-anim-1: Trace Border + Diagonal Shine + Icon Glow
   Applied to an Elementor container (.e-con.e-child) that holds an icon-box
   widget inside. Designed for top-of-page feature/hero cards to grab
   attention and reward interaction.
   On hover, three coordinated animations run:
     1. Accent-colored 2px ring traces clockwise around the card's rounded
        rectangle edge (conic-gradient sweep driven by @property).
     2. A diagonal white shine streaks across the card left-to-right.
     3. The icon glyph scales up slightly and gets a soft accent-colored glow.
   The existing Elementor built-in translateY(-6px) hover lift (if set in the
   widget's Advanced → Motion Effects) still runs on top of these three. */

/* Register a percentage custom property so --container-trace can be
   interpolated smoothly. Without @property, transitions on a plain CSS
   variable snap to the final value and the trace would pop rather than sweep. */
@property --container-trace {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

/* 1 · CONTAINER BASE — position + overflow required for the pseudos.
   position: relative anchors the absolutely-positioned ::before/::after;
   overflow: hidden clips the shine streak within the card's rounded edge. */
.container-anim-1 {
  position: relative;
  overflow: hidden;
}

/* 2 · TRACE BORDER — conic-gradient ring sweeps around the rounded rectangle.
   Uses the "padding + mask-composite: exclude" technique: two stacked masks
   (one content-box, one border-box) subtract to reveal only a 2px ring
   around the card's outer edge. The conic-gradient's accent stop is driven
   by --container-trace, animated 0% → 100% on hover. */
.container-anim-1::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* = border thickness */
  border-radius: inherit;
  background: conic-gradient(
    from -90deg,
    /* start at 12 o'clock */ var(--e-global-color-accent) 0%,
    var(--e-global-color-accent) var(--container-trace, 0%),
    transparent var(--container-trace, 0%),
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: --container-trace 1s ease-out;
  pointer-events: none;
  z-index: 2;
}

.container-anim-1:hover::before {
  --container-trace: 100%;
}

/* 3 · DIAGONAL SHINE SWEEP — a subtle white streak traverses the card.
   At rest the streak sits off-screen to the left (left: -75%). On hover,
   left: 125% slides it past the right edge. skewX(-20deg) gives it the
   classic slanted reflection look. z-index puts it above the trace so
   the shine briefly lightens the border as it passes. */
.container-anim-1::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.9s ease-out;
  pointer-events: none;
  z-index: 3;
}

.container-anim-1:hover::after {
  left: 125%;
}

/* 4 · ICON GLOW + SCALE — SVG icon scales up 1.15× and emits an accent halo.
   drop-shadow (not box-shadow) follows the SVG silhouette so the glow
   traces the icon's actual shape rather than its bounding rectangle. */
.container-anim-1 .elementor-widget-icon-box .elementor-icon {
  display: inline-block;
  transition:
    transform 0.4s ease-out,
    filter 0.4s ease-out;
}

.container-anim-1:hover .elementor-widget-icon-box .elementor-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 12px var(--e-global-color-accent));
}

/* Service Card Animations */

/* service-card-anim-1: Icon 360° Y-axis spin + animated border trace ring
   Everything else about the card stays visually static on hover — no card lift,
   no image zoom, no color changes, no title tint, no arrow slide.

   Selector depth matches the existing .service-boxes rules further down in this
   file so the neutralizing hover override beats them on specificity. */

/* --- Custom property registration ---
   Registering --trace-progress with @property is what makes it animatable.
   Without this, a transition on a CSS variable snaps instantly to the final
   value; with it, the browser can interpolate between percentages smoothly
   and the trace actually sweeps. Must live at the top level (not inside a rule). */
@property --trace-progress {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

/* 1 · ICON WRAPPER — enable 3D perspective + neutralize existing bg-color hover swap
   The existing rule at `.service-boxes:hover .services-box-content .services-box-icon .icon-wrapper`
   (further down in this file) swaps the icon background to primary on hover. We
   force it to stay at the base accent color so the icon's look doesn't change.
   `perspective` on the wrapper gives the inner SVG's rotateY real depth rather
   than a flat mirror flip. */
.service-card-anim-1
  .service-boxes
  .services-box-content
  .services-box-icon
  .icon-wrapper {
  perspective: 600px;
}

.service-card-anim-1
  .service-boxes:hover
  .services-box-content
  .services-box-icon
  .icon-wrapper {
  background-color: var(--e-global-color-accent) !important;
}

/* 2 · ICON GLYPH — 360° Y-AXIS SPIN ON HOVER
   We animate the SVG itself (not the wrapper) so the accent circle and the
   trace ring stay static; only the glyph flips. 0.8s ease-in-out paces both
   halves of the flip so they read clearly. */
.service-card-anim-1
  .service-boxes
  .services-box-content
  .services-box-icon
  .icon-wrapper
  svg {
  transition: transform 0.8s ease-in-out;
  transform-style: preserve-3d;
}

.service-card-anim-1
  .service-boxes:hover
  .services-box-content
  .services-box-icon
  .icon-wrapper
  svg {
  transform: rotateY(360deg);
}

/* 3 · BORDER TRACE RING — conic-gradient sweep around the icon circle
   - A ::before pseudo sits just outside the wrapper's 6px white border.
   - Its background is a conic-gradient whose accent stop ends at --trace-progress%.
   - A radial mask punches out everything except a 3px ring at the outer edge.
   - On hover, --trace-progress animates 0% → 100%, sweeping the accent color
     around the circle from 12 o'clock clockwise. On hover-out it retracts. */
.service-card-anim-1
  .service-boxes
  .services-box-content
  .services-box-icon
  .icon-wrapper::before {
  content: "";
  position: absolute;
  inset: -3px; /* sits immediately outside the 6px white border */
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    /* start at 12 o'clock so the trace enters from the top */
    var(--e-global-color-accent) 0%,
    var(--e-global-color-accent) var(--trace-progress, 0%),
    transparent var(--trace-progress, 0%),
    transparent 100%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent calc(50% - 3px),
    #000 calc(50% - 3px)
  );
  mask: radial-gradient(
    circle,
    transparent calc(50% - 3px),
    #000 calc(50% - 3px)
  );
  transition: --trace-progress 0.8s ease-out;
  pointer-events: none; /* never intercept pointer events — hover is on .service-boxes */
}

.service-card-anim-1
  .service-boxes:hover
  .services-box-content
  .services-box-icon
  .icon-wrapper::before {
  --trace-progress: 100%;
}

/* Text Editor CSS */
.elementor-widget-text-editor p a,
.elementor-widget-icon-box .elementor-icon-box-description a,
.elementor-widget-image-box .elementor-image-box-description a {
  color: inherit;
  transition: all 0.3s ease-in-out;
}

.elementor-widget-text-editor p a:hover,
.elementor-widget-icon-box .elementor-icon-box-description a:hover,
.elementor-widget-image-box .elementor-image-box-description a:hover {
  text-decoration: underline;
}

/*  Tab Widget CSS */
.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title:hover,
.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title:focus {
  border-radius: var(--n-tabs-title-border-radius);
}

.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title {
  transition: all 0.3s ease-in-out;
}

.elementor-widget-n-tabs
  .e-n-tabs-heading
  .e-n-tab-title
  .e-n-tab-icon
  svg
  path {
  transition: all 0.3s;
}

/* Menu Border CSS */
.elementor-widget-nav-menu ul.elementor-nav-menu--dropdown a,
.elementor-widget-nav-menu ul.elementor-nav-menu--dropdown a:focus,
.elementor-widget-nav-menu ul.elementor-nav-menu--dropdown a:hover {
  border-inline-start: 0 !important;
}

h1.elementor-heading-title span,
h2.elementor-heading-title span {
  font-family: var(--e-global-typography-6452639-font-family), Sans-serif;
  font-weight: var(--e-global-typography-6452639-font-weight);
  text-transform: var(--e-global-typography-6452639-text-transform);
  font-style: var(--e-global-typography-6452639-font-style);
  line-height: var(--e-global-typography-6452639-line-height);
  color: var(--e-global-color-primary);
}

.no-color h1.elementor-heading-title span,
.no-color h2.elementor-heading-title span {
  color: currentcolor;
}

/* Section Title CSS */
.section-title .elementor-heading-title {
  display: inline-block;
  background-color: var(--e-global-color-secondary);
  border-radius: 20px;
  padding: 7px 20px;
}

.white-bg.section-title .elementor-heading-title {
  background-color: var(--white-color);
}

.column-2 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.column-2 ul li {
  width: calc(50% - 10px);
}

@media only screen and (max-width: 991px) {
  .br-tablet-none br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .br-mobile-none br {
    display: none;
  }

  .column-2 ul {
    gap: 10px;
  }

  .column-2 ul li {
    width: 100%;
  }
}

/* 
 * Header CSS 
 * */

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

.main-header.elementor-sticky {
  transition: all 0.3s ease-in-out;
}

.header-btn .elementor-button:before {
  background: var(--e-global-color-accent);
}

.header-btn .elementor-button .elementor-button-icon svg {
  width: 24px;
}

.main-header-menu
  nav.elementor-nav-menu--main
  ul.elementor-nav-menu
  li.menu-item
  a.elementor-item {
  position: relative;
}

.main-header-menu
  nav.elementor-nav-menu--main
  ul.elementor-nav-menu
  li.menu-item
  a.elementor-item:after {
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  left: auto;
  right: 0;
  width: 0;
  bottom: 0;
  background: var(--e-global-color-accent);
  transition: all 0.4s ease-in-out;
}

.main-header-menu
  nav.elementor-nav-menu--main
  ul.elementor-nav-menu
  li.menu-item
  a.elementor-item:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}

.main-header-menu
  nav.elementor-nav-menu--main
  ul.elementor-nav-menu
  li.menu-item
  a.elementor-item.elementor-item-active:after {
  width: 100%;
}

.header2-container {
  position: fixed !important;
  top: -110px !important;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: all 0.4s ease-in-out !important;
  backdrop-filter: blur(50px);
}

.header2-container.header-show {
  top: 0 !important;
}

@media only screen and (max-width: 1250px) {
  .elementor-element.main-header-menu .elementor-nav-menu .elementor-item {
    font-size: 14px !important;
  }
}

@media only screen and (max-width: 1024px) {
  .mobile-menu {
    display: block !important;
  }

  .desktop-menu-container {
    background: transparent !important;
    box-shadow: none !important;
  }

  .elementor-element.main-header-menu .elementor-nav-menu .elementor-item {
    font-size: 16px !important;
  }
}

@media only screen and (max-width: 767px) {
  .elementor-element.main-header-menu .elementor-nav-menu .elementor-item {
    font-size: 14px !important;
  }

  .main-header.elementor-sticky.elementor-sticky--effects
    .header-menu
    .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    margin-top: 23px !important;
  }
}

/*
 * Footer CSS
 * */

.contact-info .elementor-icon-list-items .elementor-icon-list-item {
  word-break: break-all;
}

.clinic-opne-hours
  .elementor-icon-list-items
  .elementor-icon-list-item
  .elementor-icon-list-text {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.clinic-opne-hours ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 0;
}

.clinic-opne-hours ul li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

@media only screen and (max-width: 1024px) {
  .contact-info .elementor-icon-list-items .elementor-icon-list-item span br {
    display: none;
  }
}

/*
 * Home CSS
 * */

.hero-img img {
  aspect-ratio: 1 / 0.81;
  object-fit: cover;
}

.no-bg.header-btn.elementor-widget-button
  .elementor-button
  .elementor-button-text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.about-img-1 img {
  aspect-ratio: 1 / 1.1;
  object-fit: cover;
}

.about-img-2 img {
  aspect-ratio: 1/0.69;
  object-fit: cover;
}

.years-experience {
  animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.our-services-img img {
  aspect-ratio: 1 / 0.63;
  object-fit: cover;
}

/* CPT Services CSS */

.service-post-carousel-wrap {
  cursor: grab;
}

.service-post-carousel {
  /* 	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px; */
  opacity: 0;
  visibility: hidden;
}

.service-post-carousel.slick-initialized {
  opacity: 1;
  visibility: visible;
}

.service-post-carousel .slick-list {
  margin: 0 -15px;
}

.service-post-carousel .slick-track {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
}

.service-post-carousel .slick-slide {
  display: block;
  width: calc(33.33% - 20px);
  margin: 0 15px;
  height: auto;
}

body.archive .service-post-carousel .service-boxes {
  box-shadow:
    rgba(90, 198, 206, 0.05) 0px 1px 0px,
    rgba(90, 198, 206, 0.1) 0px 0px 8px;
}

.service-post-carousel .service-boxes {
  position: relative;
  background-color: var(--white-color);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}

.service-boxes .services-box-content {
  padding: 0 30px 75px;
}

.service-boxes .services-image img {
  width: 100%;
  aspect-ratio: 1 / 0.63;
  object-fit: cover;
}

.service-boxes .services-box-content .services-box-icon {
  margin-bottom: 20px;
}

.service-boxes .services-box-content .services-box-icon .icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--e-global-color-accent);
  color: var(--white-color);
  border: 6px solid var(--white-color);
  border-radius: 50%;
  width: 92px;
  height: 92px;
  margin-top: -46px;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

.service-boxes:hover .services-box-content .services-box-icon .icon-wrapper {
  background-color: var(--e-global-color-primary);
}

.service-boxes .services-box-content .services-box-icon .icon-wrapper svg {
  width: 40px;
}

.service-boxes .services-box-content .services-title {
  margin-bottom: 10px;
}

.service-boxes .services-box-content .services-title .elementor-heading-title {
  font-size: 20px;
  color: var(--e-global-color-primary);
}

.service-boxes .services-box-content .services-btn {
  position: absolute;
  top: auto;
  left: 30px;
  right: 30px;
  bottom: 30px;
  line-height: 0;
  z-index: 1;
}

.service-boxes .services-box-content .services-btn .elementor-button {
  background-color: transparent;
  color: var(--e-global-color-primary);
  padding: 0;
  border-radius: 0;
  transition: all 0.3s ease-in-out;
}

.service-boxes .services-box-content .services-btn .elementor-button:hover {
  color: var(--e-global-color-accent);
}

.service-boxes
  .services-box-content
  .services-btn
  .elementor-button
  .elementor-button-content-wrapper {
  gap: 10px;
}

.service-post-carousel .slick-arrow {
  --services-left-right: -100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  bottom: auto;
  border: 1px solid var(--white-color);
  width: 50px;
  height: 50px;
  padding: 0;
  transition: all 0.3s ease-in-out;
  transform: translateY(-50%);
  z-index: 10;
}

.service-post-carousel .slick-arrow:hover,
.service-post-carousel .slick-arrow:focus {
  background-color: var(--white-color);
  color: var(--e-global-color-accent);
}

.service-post-carousel .slick-arrow.prev-arrow {
  left: var(--services-left-right);
}

.service-post-carousel .slick-arrow.next-arrow {
  right: var(--services-left-right);
}

.why-choose-video .elementor-custom-embed-image-overlay img {
  width: 100%;
  aspect-ratio: 1 / 0.715;
  object-fit: cover;
  border-radius: 20px;
}

.why-choose-video .elementor-custom-embed-play {
  height: 60px;
  width: 60px;
  background: var(--white-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-choose-video .elementor-custom-embed-play svg {
  filter: none;
  opacity: 1;
  text-shadow: none;
}

.service-areas-list .elementor-icon-list-items {
  gap: 20px;
}

.service-areas-list .elementor-icon-list-items .elementor-icon-list-item {
  background-color: var(--e-global-color-secondary);
  border-radius: 20px;
  padding: 6px 20px;
}

.home-faqs .e-n-accordion-item-title {
  border-color: var(--e-global-color-secondary);
  transition: all 0.4s ease-in-out;
}

/* Google Review CSS */
#sb-reviews-container-1 {
  filter: drop-shadow(0px 0px 20px #14191e3d);
}

#sb-reviews-container-1 .sbr-owl-stage {
  padding: calc(var(--column-gutter) / 2) 0 !important;
}

#sb-reviews-container-1 .sbr-owl-item {
  padding: calc(var(--column-gutter) / 2) !important;
}

#sb-reviews-container-1 .sb-post-item {
  padding: 30px;
  background: url("./images/testimonial-bg.png") no-repeat bottom left;
  background-size: contain;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  transition: all 0.3s ease-in-out;
  border-radius: 20px;
}

#sb-reviews-container-1 .sbr-owl-item:hover .sb-post-item {
  background-color: var(--e-global-color-accent) !important;
}

#sb-reviews-container-1 .sb-post-item .sb-item-provider-icon {
  display: none;
}

#sb-reviews-container-1 .sb-post-item .sb-item-author-date-ctn {
  padding-right: 0 !important;
}

#sb-reviews-container-1 .sb-post-item .sb-item-author-date-ctn,
#sb-reviews-container-1
  .sb-post-item
  .sb-item-author-date-ctn
  .sb-item-author-ctn,
#sb-reviews-container-1
  .sb-post-item
  .sb-item-author-date-ctn
  .sb-item-author-ctn
  .sb-item-name-date {
  position: initial;
}

#sb-reviews-container-1
  .sb-post-item
  .sb-item-author-date-ctn
  .sb-item-author-ctn {
  order: 3;
  align-items: center;
  width: 100%;
}

#sb-reviews-container-1
  .sb-post-item
  .sb-item-author-date-ctn
  .sb-item-author-ctn
  .sb-item-author-img {
  width: 60px;
  min-width: 60px;
  height: 60px;
}

#sb-reviews-container-1
  .sb-post-item
  .sb-item-author-date-ctn
  .sb-item-author-ctn
  .sb-item-name-date
  .sb-item-author-name {
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
  letter-spacing: 0px;
  margin: 0 !important;
  transition: all 0.3s ease-in-out;
}

#sb-reviews-container-1
  .sb-post-item
  .sb-item-author-date-ctn
  .sb-item-author-ctn
  .sb-item-name-date
  .sb-item-author-date {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  transition: all 0.3s ease-in-out;
}

#sb-reviews-container-1 .sb-post-item .sb-item-rating {
  order: 1;
  margin: 0 0 15px !important;
}

#sb-reviews-container-1 .sb-post-item .sb-item-rating .sb-relative {
  line-height: 0;
}

#sb-reviews-container-1
  .sb-post-item
  .sb-item-rating
  .sb-relative
  .sb-item-rating-ctn
  .sb-item-rating-icon
  svg {
  margin: 0 6px;
}

#sb-reviews-container-1 .sb-post-item .sb-item-text {
  position: relative;
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  margin-bottom: 20px !important;
  transition: all 0.3s ease-in-out;
}

/* NOTE: `.sb-item-rating` intentionally removed from this selector list.
   The star rating color is handled entirely by the "Review Animations" block
   at the bottom of this file (secondary at rest → gold wave on hover), so it
   must NOT be force-swapped to white here. */
#sb-reviews-container-1 .sbr-owl-item:hover .sb-item-text,
#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-item-author-date-ctn
  .sb-item-author-ctn
  .sb-item-name-date
  .sb-item-author-name,
#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-item-author-date-ctn
  .sb-item-author-ctn
  .sb-item-name-date
  .sb-item-author-date {
  color: var(--white-color) !important;
}

#sb-reviews-container-1 .sb-post-item .sb-item-text a {
  color: inherit;
}

#sb-reviews-container-1 .sbr-owl-dots {
  margin-top: 0 !important;
  line-height: 0;
}

#sb-reviews-container-1 .sbr-owl-dots .sbr-owl-dot span {
  background: rgb(from var(--white-color) r g b / 50%);
  opacity: 1;
  margin: 0px 7px;
  width: 30px;
  height: 8px;
  transition: all 0.3s ease-in-out;
}

#sb-reviews-container-1 .sbr-owl-dots .sbr-owl-dot:hover span,
#sb-reviews-container-1 .sbr-owl-dots .sbr-owl-dot.active span {
  background: var(--e-global-color-accent);
}

@media only screen and (max-width: 1520px) {
  .service-post-carousel .slick-arrow {
    --services-left-right: -60px;
  }
}

@media only screen and (max-width: 1466px) {
  .service-post-carousel {
    padding-bottom: 100px;
  }

  .service-post-carousel .slick-arrow {
    --services-left-right: calc(50% - 55px);
    top: auto;
    bottom: 0;
    transform: translatey(0);
  }
}

@media only screen and (max-width: 1024px) {
  .hero-img img {
    aspect-ratio: 1 / 0.66;
  }

  .about-img-1 img {
    aspect-ratio: 1/0.85;
  }

  .our-services-img img {
    aspect-ratio: 1 / 0.66;
  }

  /* CPT Services CSS */
  .service-post-carousel .slick-slide {
    width: calc(50% - 15px);
  }

  .service-boxes .services-image img {
    aspect-ratio: 1 / 0.66;
  }

  .service-boxes .services-box-content .services-box-icon {
    margin-bottom: 15px;
  }

  .service-boxes .services-box-content .services-box-icon .icon-wrapper {
    border-width: 4px;
    width: 78px;
    height: 78px;
    margin-top: -39px;
  }

  .service-boxes .services-box-content .services-box-icon .icon-wrapper svg {
    width: 35px;
  }

  .blog-categories-style
    ul
    li
    .elementor-post-info__item
    .elementor-post-info__terms-list-item {
    font-size: 14px;
  }

  .blog-categories-style
    ul
    li
    .elementor-post-info__item
    .elementor-post-info__terms-list-item {
    padding: 6px 12px;
  }

  /* Google Review Testimonial CSS */

  #sb-reviews-container-1 .sb-post-item {
    padding: 15px;
  }

  #sb-reviews-container-1
    .sb-post-item
    .sb-item-author-date-ctn
    .sb-item-author-ctn
    .sb-item-author-img {
    width: 50px;
    min-width: 50px;
    height: 50px;
  }

  #sb-reviews-container-1
    .sb-post-item
    .sb-item-author-date-ctn
    .sb-item-author-ctn
    .sb-item-name-date
    .sb-item-author-name {
    font-size: 16px !important;
  }

  #sb-reviews-container-1
    .sb-post-item
    .sb-item-author-date-ctn
    .sb-item-author-ctn
    .sb-item-name-date
    .sb-item-author-date {
    font-size: 14px !important;
  }
}

@media only screen and (max-width: 767px) {
  /* CPT Services CSS */
  .service-post-carousel {
    padding-bottom: 60px;
  }

  .service-post-carousel .slick-slide {
    width: 100%;
  }

  .service-post-carousel .service-boxes {
    /* 		height: auto; */
  }

  .service-boxes .services-box-content {
    padding: 0 20px 60px;
  }

  .service-boxes .services-box-content .services-box-icon {
    margin-bottom: 15px;
  }

  .service-boxes .services-box-content .services-box-icon .icon-wrapper {
    border-width: 4px;
    width: 78px;
    height: 78px;
    margin-top: -39px;
  }

  .service-boxes .services-box-content .services-box-icon .icon-wrapper svg {
    width: 35px;
  }

  .service-post-carousel .slick-arrow {
    --services-left-right: calc(50% - 45px);
    width: 40px;
    height: 40px;
  }

  .service-boxes .services-box-content .services-btn {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .why-choose-video .elementor-custom-embed-play {
    height: 50px;
    width: 50px;
  }

  #sb-reviews-container-1 .sbr-owl-dots .sbr-owl-dot span {
    width: 20px;
    height: 6px;
  }
}

/*
 * About CSS
 * */

.subpage-breadcumbs .elementor-icon-list-items .elementor-icon-list-item:after {
  transform: rotate(10deg);
}

.about-us-img-1 img {
  object-fit: cover;
  aspect-ratio: 1 / 1.15;
}

.about-us-img-2 img {
  object-fit: cover;
  aspect-ratio: 1 / 1.045;
}

.about-author-box .elementor-image-box-wrapper {
  display: flex;
}

.about-author-box .elementor-image-box-wrapper figure {
  margin-right: 20px !important;
}

.years-of-experience {
  animation: customerreviewobject 3s infinite linear alternate;
}

.years-of-experience .elementor-counter-number-wrapper {
  min-width: 100px;
}

.years-of-experience .elementor-counter-title {
  min-width: 150px;
}

.why-choose-video .elementor-custom-embed-image-overlay {
  position: relative;
}

.why-choose-video
  .elementor-custom-embed-image-overlay
  .elementor-custom-embed-play
  i,
.why-choose-video
  .elementor-custom-embed-image-overlay
  .elementor-custom-embed-play
  svg {
  opacity: 1 !important;
  text-shadow: none !important;
}

.why-choose-video.about-why-choose-video
  .elementor-wrapper.elementor-open-lightbox {
  --video-aspect-ratio: 3;
}

.why-choose-video.about-why-choose-video img {
  aspect-ratio: 1 / 0.462;
}

@keyframes customerreviewobject {
  50% {
    right: 100px;
  }
}

.team-item {
  overflow: hidden !important;
}

.team-img img {
  object-fit: cover;
  aspect-ratio: 1 / 1.06;
  transition: all 0.4s ease-in-out;
}

.team-item:hover .team-img img {
  transform: scale(1.1) !important;
}

.team-social-icon {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}

.team-item:hover .team-social-icon {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}

.why-choose-us-box .elementor-heading-title,
.why-choose-us-box
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-title,
.why-choose-us-box
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-description {
  transition: all 0.3s ease-in-out;
}

.why-choose-us-box:hover .elementor-heading-title,
.why-choose-us-box:hover
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-title,
.why-choose-us-box:hover
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-description {
  color: var(--white-color) !important;
}

@media only screen and (max-width: 1024px) {
  .why-choose-video.about-why-choose-video img {
    aspect-ratio: 1 / 0.715;
  }
}

@media only screen and (max-width: 767px) {
  .years-of-experience .elementor-counter-number-wrapper {
    min-width: 100px;
  }

  .years-of-experience .elementor-counter-title {
    min-width: 150px;
  }

  @keyframes customerreviewobject {
    50% {
      right: 40px;
    }
  }
}

/*
 * Cleaning Services CSS
 * */

.our-service-img img {
  filter: drop-shadow(
    -5px -5px 1.3px rgb(from var(--e-global-color-accent) r g b / 20%)
  );
  aspect-ratio: 1 / 0.95;
  object-fit: cover;
}

.service-why-choose-box .elementor-widget-container {
  transition: all 0.4s ease-in-out;
}

.service-why-choose-box
  .elementor-icon-box-wrapper
  .elementor-icon-box-icon
  .elementor-icon,
.service-why-choose-box
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-title,
.service-why-choose-box
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-description,
.service-why-choose-box:hover
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  ul
  li {
  transition: all 0.4s ease-in-out;
}

.service-why-choose-box:hover
  .elementor-icon-box-wrapper
  .elementor-icon-box-icon
  .elementor-icon,
.service-why-choose-box:hover
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-title,
.service-why-choose-box:hover
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  .elementor-icon-box-description,
.service-why-choose-box:hover
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  ul
  li {
  color: var(--white-color);
}

.service-why-choose-box
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  ul {
  padding-left: 0;
  list-style: none;
}

.service-why-choose-box
  .elementor-icon-box-wrapper
  .elementor-icon-box-content
  ul
  li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.our-process-contact-btn:after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 10px;
  left: 245px;
  background: url("./images/contact-arrow-icon.svg") no-repeat;
  background-size: auto;
  height: 60px;
  width: 86px;
}

.our-process-contact-btn .elementor-button .elementor-button-icon svg {
  width: 24px;
}

.our-process-img img {
  aspect-ratio: 1 / 0.95;
  object-fit: cover;
}

.our-process-items {
  counter-reset: section;
}

.our-process-items:before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  border: 1px dashed rgb(from var(--e-global-color-accent) r g b / 20%);
  width: 1px;
  height: 100%;
  z-index: -1;
}

.our-process-content {
  counter-increment: section;
}

.our-process-content .elementor-icon-box-wrapper .elementor-icon-box-content {
  /* 	padding-top: 30px; */
  padding-top: 5px;
}

.our-process-content
  .elementor-icon-box-wrapper
  .elementor-icon-box-content:before {
  display: none;
  content: "STEP " counter(section) "";
  position: absolute;
  top: 0;
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-text-font-family);
  font-size: 14px;
  font-weight: var(--e-global-typography-text-font-weight);
}

.services-counter .elementor-counter .elementor-counter-title {
  text-align: center;
}

.our-portfolio-img img {
  aspect-ratio: 1 / 0.88;
  object-fit: cover;
}

.services-faq-img-1 img {
  aspect-ratio: 1 / 2.21;
  object-fit: cover;
}

.services-faq-img-2 img,
.services-faq-img-3 img {
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
}

.faq-img-section .faq-contect-us {
  transform: translate(-50px, -50px) !important;
}

@media only screen and (max-width: 1024px) {
  .our-service-img img {
    aspect-ratio: 1 / 0.8;
  }

  .our-process-img img {
    aspect-ratio: 1 / 0.66;
  }

  .our-process-contact-btn .elementor-button .elementor-button-icon svg {
    width: 20px;
  }

  .services-faq-img-1 img {
    aspect-ratio: 1 / 1.7;
  }

  .services-faq-img-2 img,
  .services-faq-img-3 img {
    aspect-ratio: 1 / 0.82;
  }
}

@media only screen and (max-width: 767px) {
  .our-process-contact-btn:after,
  .our-process-items:before {
    display: none;
  }

  .our-process-content .elementor-icon-box-wrapper {
    padding-top: 30px;
  }

  .our-process-content .elementor-icon-box-wrapper .elementor-icon-box-content {
    padding-top: 0;
  }

  .services-faq-img-1 img {
    aspect-ratio: 1 / 1.77;
  }
}

/* Our Process — custom hover animation. Leaves .our-process-items:before
   (dashed connector, z-index:-1) untouched. */
.our-process-content .elementor-icon,
.our-process-content .elementor-icon-box-title,
.our-process-content .elementor-icon-box-description,
.our-process-content .elementor-icon svg {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1.2),
    color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.45s ease;
}

/* Icon circle: pops, flips to accent, SVG inverts, outer glow ring. */
.our-process-content:hover .elementor-icon {
  transform: scale(1.1) rotate(-6deg);
  background-color: var(--e-global-color-accent);
  color: #fff;
  box-shadow: 0 0 0 8px rgb(from var(--e-global-color-accent) r g b / 15%);
}

/* Title slides right + shifts to accent colour. */
.our-process-content:hover .elementor-icon-box-title {
  transform: translateX(6px);
  color: var(--e-global-color-accent);
}

/* Animated underline drawn left→right under the title text. */
.our-process-content .elementor-icon-box-title span {
  position: relative;
  display: inline-block;
}
.our-process-content .elementor-icon-box-title span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background-color: var(--e-global-color-accent);
  transition: right 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.our-process-content:hover .elementor-icon-box-title span::after {
  right: 0;
}

/* Description nudges right in sympathy. */
.our-process-content:hover .elementor-icon-box-description {
  transform: translateX(4px);
}

/* Bracket Icon Box — custom hover. The accent left lip "pours" across the
   pill filling it with accent colour; content inverts to white; the icon
   springs horizontally out of the lip (pulls back then shoots forward). */
.bracket-icon-box .elementor-widget-container {
  position: relative;
  /* Accent fill grows from the left edge across the pill. Layered over
	   Elementor's existing background-color so the original pill colour
	   returns instantly on hover-out. */
  background-image: linear-gradient(
    var(--e-global-color-accent),
    var(--e-global-color-accent)
  );
  background-size: 0% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  transition: background-size 0.55s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.bracket-icon-box:hover .elementor-widget-container {
  background-size: 100% 100%;
}

/* Icon inverts + springs right out of the lip (pull-back then release).
   Colour snaps to white instantly on hover-in so it never blends into the
   dark accent fill; fades back to its original colour on hover-out.
   !important is used because Elementor applies its own high-specificity
   colour rules to .elementor-icon svg, the title link, and the description. */
.bracket-icon-box .elementor-icon,
.bracket-icon-box .elementor-icon i,
.bracket-icon-box .elementor-icon svg,
.bracket-icon-box .elementor-icon svg *,
.bracket-icon-box .elementor-icon-box-title,
.bracket-icon-box .elementor-icon-box-title a,
.bracket-icon-box .elementor-icon-box-description {
  position: relative;
  transition:
    color 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease;
}
.bracket-icon-box:hover .elementor-icon,
.bracket-icon-box:hover .elementor-icon i,
.bracket-icon-box:hover .elementor-icon-box-title,
.bracket-icon-box:hover .elementor-icon-box-title a,
.bracket-icon-box:hover .elementor-icon-box-description {
  color: #fff !important;
  transition:
    color 0s,
    fill 0s,
    stroke 0s;
}
.bracket-icon-box:hover .elementor-icon svg,
.bracket-icon-box:hover .elementor-icon svg * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
  transition:
    color 0s,
    fill 0s,
    stroke 0s;
}
.bracket-icon-box:hover .elementor-icon {
  animation: bracket-icon-spring 0.6s cubic-bezier(0.4, 0.1, 0.2, 1.4) forwards;
}

@keyframes bracket-icon-spring {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(8px);
  }
}

/* Shift the whole content block right by the same 8px as the icon's resting
   position so the title/description don't crowd the icon after its spring. */
.bracket-icon-box .elementor-icon-box-content {
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1.2);
}

.bracket-icon-box:hover .elementor-icon-box-content {
  transform: translateX(8px);
}

/* ===================================================================
   Our Value Icon Box — custom hover animation.
   Scoped strictly to .our-value-icon-box.

   Design intent: one clear visual idea, executed cleanly.
   The card lifts, the SVG inside the icon does a single 3D coin-flip,
   a soft accent ring ripples outward from the icon once, and a thin
   accent underline draws under the title from left to right. No
   highlighter, no chunky side bar — just restrained motion.

   !important is used on critical properties so Elementor/global
   stylesheets cannot override these values.
   =================================================================== */

/* --- Card: subtle lift + soft shadow -------------------------------- */
.our-value-icon-box {
  position: relative !important;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.our-value-icon-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -14px rgba(15, 30, 60, 0.18) !important;
}

/* --- Icon circle: 3D coin-flip SVG + soft ripple ring --------------- */
.our-value-icon-box .elementor-icon {
  position: relative !important;
  perspective: 500px;
  overflow: visible !important;
}

/* Ripple ring — sits exactly over the circle, expands once softly. */
.our-value-icon-box .elementor-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--e-global-color-accent);
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.our-value-icon-box:hover .elementor-icon::after {
  animation: our-value-ripple 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes our-value-ripple {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Coin-flip the SVG inside (circle stays put). */
.our-value-icon-box .elementor-icon svg {
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}

.our-value-icon-box:hover .elementor-icon svg {
  animation: our-value-icon-flip 0.7s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}

@keyframes our-value-icon-flip {
  0% {
    transform: rotateY(0) scale(1);
  }
  50% {
    transform: rotateY(180deg) scale(1.08);
  }
  100% {
    transform: rotateY(360deg) scale(1);
  }
}

/* --- Title: clean 2px accent underline drawn from left -------------- */
.our-value-icon-box .elementor-icon-box-title {
  position: relative !important;
}

.our-value-icon-box .elementor-icon-box-title span {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}

.our-value-icon-box .elementor-icon-box-title span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.08s;
}

.our-value-icon-box:hover .elementor-icon-box-title span::after {
  transform: scaleX(1);
}

/* ===================================================================
   Capsule Icon Box — custom hover animation.
   Scoped strictly to .capsule-icon-box.

   Design intent: the icon's circle appears to morph into a pill capsule
   that grows rightward to wrap the title alongside it. The icon itself
   performs a brief wobble, and the title nudges right slightly as the
   capsule reaches it.

   !important is used on critical properties so Elementor/global
   stylesheets cannot override these values.
   =================================================================== */

.capsule-icon-box {
  /* Capsule colour — derived from the accent as a light tint by default.
	   Override per-section via `--capsule-bg: <colour>;` if needed. */
  --capsule-bg: rgb(from var(--e-global-color-accent, #0f1e3c) r g b / 0.15);
  /* Horizontal position (from the wrapper's left edge) at which the
	   capsule starts growing. Defaults to roughly the icon circle's right
	   edge so the sweep looks like it emerges from behind the icon.
	   Override per-instance if the icon size differs. */
  --capsule-origin-x: 10px;
}

/* Wrapper anchors the growing capsule behind the icon + title. */
.capsule-icon-box .elementor-icon-box-wrapper {
  position: relative !important;
}

.capsule-icon-box .elementor-icon-box-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Hardcoded fallback for browsers without relative-colour syntax. */
  background-color: rgba(15, 30, 60, 0.13);
  background-color: var(--capsule-bg);
  border-radius: 999px;
  /* Start fully clipped at the icon's right edge so the pill is invisible
	   until hover, then emerges from behind the icon and sweeps rightward. */
  clip-path: inset(0 100% 0 var(--capsule-origin-x) round 999px);
  transition: clip-path 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 0;
  pointer-events: none;
}

.capsule-icon-box:hover .elementor-icon-box-wrapper::before {
  clip-path: inset(0 0 0 0 round 999px);
}

/* Keep the icon and content layered above the growing capsule. */
.capsule-icon-box .elementor-icon-box-icon,
.capsule-icon-box .elementor-icon-box-content {
  position: relative !important;
  z-index: 1;
}

/* Icon wobble — one brisk left-right shake with a small scale pop. */
.capsule-icon-box .elementor-icon svg {
  transform-origin: center center;
  transition: transform 0.4s ease;
}

.capsule-icon-box:hover .elementor-icon svg {
  animation: capsule-icon-wobble 0.65s cubic-bezier(0.4, 0.1, 0.2, 1.2) forwards;
}

@keyframes capsule-icon-wobble {
  0% {
    transform: rotate(0) scale(1);
  }
  30% {
    transform: rotate(-10deg) scale(1.08);
  }
  65% {
    transform: rotate(8deg) scale(1.08);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}

/* Title nudge — slides right as the capsule reaches it. */
.capsule-icon-box .elementor-icon-box-title {
  transition: transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.capsule-icon-box:hover .elementor-icon-box-title {
  transform: translateX(6px) !important;
}

/* ===================================================================
   Icon Flip — simple utility hover animation.
   Apply the `icon-flip` class to any icon-box-style element and the
   icon inside will perform a single 3D flip on the horizontal (X) axis
   — a full 360° rotation so it lands back in its original orientation.
   Only the inner icon visual (SVG / <i> / <img>) rotates; any circle
   or shape background on .elementor-icon stays put.
   =================================================================== */

.icon-flip .elementor-icon {
  perspective: 500px;
  overflow: visible !important;
}

.icon-flip .elementor-icon svg,
.icon-flip .elementor-icon i,
.icon-flip .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}

.icon-flip:hover .elementor-icon svg,
.icon-flip:hover .elementor-icon i,
.icon-flip:hover .elementor-icon img,
.team-item:hover .icon-flip .elementor-icon svg,
.team-item:hover .icon-flip .elementor-icon i,
.team-item:hover .icon-flip .elementor-icon img {
  animation: icon-flip-horizontal 0.7s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}

@keyframes icon-flip-horizontal {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(360deg);
  }
}

/* ===================================================================
   Icon Spin — simple utility hover animation.
   Apply the `icon-spin` class to any icon-box-style element and the
   icon inside will rotate a full 360° on hover, and reverse back to
   its original position when the hover ends. Uses a transition
   (not keyframe animation) so the motion naturally mirrors in reverse
   when the mouse leaves.
   =================================================================== */

.icon-spin .elementor-icon {
  overflow: visible !important;
}

.icon-spin .elementor-icon svg,
.icon-spin .elementor-icon i,
.icon-spin .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}

.icon-spin:hover .elementor-icon svg,
.icon-spin:hover .elementor-icon i,
.icon-spin:hover .elementor-icon img {
  transform: rotate(360deg);
}

/* ===================================================================
   Icon Motion Library — spin & flip variants
   Drop any of these classes onto an icon-box widget (or a solo
   `.elementor-widget-icon`) to animate the inner icon on hover.
   Reversible variants use CSS transitions so they mirror back when
   the hover ends. One-shot variants use @keyframes so they always
   play through their full arc before settling.
   =================================================================== */

/* --- 2D ROTATIONS ------------------------------------------------ */

/* 2D counter-clockwise 360° — reversible */
.icon-spin-ccw .elementor-icon {
  overflow: visible !important;
}
.icon-spin-ccw .elementor-icon svg,
.icon-spin-ccw .elementor-icon i,
.icon-spin-ccw .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}
.icon-spin-ccw:hover .elementor-icon svg,
.icon-spin-ccw:hover .elementor-icon i,
.icon-spin-ccw:hover .elementor-icon img {
  transform: rotate(-360deg);
}

/* 2D spin with spring overshoot — reversible */
.icon-spin-bounce .elementor-icon {
  overflow: visible !important;
}
.icon-spin-bounce .elementor-icon svg,
.icon-spin-bounce .elementor-icon i,
.icon-spin-bounce .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: transform;
}
.icon-spin-bounce:hover .elementor-icon svg,
.icon-spin-bounce:hover .elementor-icon i,
.icon-spin-bounce:hover .elementor-icon img {
  transform: rotate(360deg);
}

/* 2D continuous infinite spin while hovering */
.icon-spin-loop .elementor-icon {
  overflow: visible !important;
}
.icon-spin-loop .elementor-icon svg,
.icon-spin-loop .elementor-icon i,
.icon-spin-loop .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-spin-loop:hover .elementor-icon svg,
.icon-spin-loop:hover .elementor-icon i,
.icon-spin-loop:hover .elementor-icon img {
  animation: icon-spin-loop 1.4s linear infinite;
}
@keyframes icon-spin-loop {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 2D 720° double rotation — reversible */
.icon-spin-double .elementor-icon {
  overflow: visible !important;
}
.icon-spin-double .elementor-icon svg,
.icon-spin-double .elementor-icon i,
.icon-spin-double .elementor-icon img {
  transform-origin: center center;
  transition: transform 1s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}
.icon-spin-double:hover .elementor-icon svg,
.icon-spin-double:hover .elementor-icon i,
.icon-spin-double:hover .elementor-icon img {
  transform: rotate(720deg);
}

/* 2D spin + scale up — reversible */
.icon-spin-scale .elementor-icon {
  overflow: visible !important;
}
.icon-spin-scale .elementor-icon svg,
.icon-spin-scale .elementor-icon i,
.icon-spin-scale .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}
.icon-spin-scale:hover .elementor-icon svg,
.icon-spin-scale:hover .elementor-icon i,
.icon-spin-scale:hover .elementor-icon img {
  transform: rotate(360deg) scale(1.15);
}

/* 2D spin with mid-flight shrink then return — one-shot */
.icon-spin-shrink .elementor-icon {
  overflow: visible !important;
}
.icon-spin-shrink .elementor-icon svg,
.icon-spin-shrink .elementor-icon i,
.icon-spin-shrink .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-spin-shrink:hover .elementor-icon svg,
.icon-spin-shrink:hover .elementor-icon i,
.icon-spin-shrink:hover .elementor-icon img {
  animation: icon-spin-shrink 0.75s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}
@keyframes icon-spin-shrink {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.65);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* 2D wobble — oscillating tilt, one-shot */
.icon-wobble .elementor-icon {
  overflow: visible !important;
}
.icon-wobble .elementor-icon svg,
.icon-wobble .elementor-icon i,
.icon-wobble .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-wobble:hover .elementor-icon svg,
.icon-wobble:hover .elementor-icon i,
.icon-wobble:hover .elementor-icon img {
  animation: icon-wobble 0.7s ease-in-out;
}
@keyframes icon-wobble {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-12deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0);
  }
}

/* 2D shake — nervous side-to-side jitter, one-shot */
.icon-shake .elementor-icon {
  overflow: visible !important;
}
.icon-shake .elementor-icon svg,
.icon-shake .elementor-icon i,
.icon-shake .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-shake:hover .elementor-icon svg,
.icon-shake:hover .elementor-icon i,
.icon-shake:hover .elementor-icon img {
  animation: icon-shake 0.5s ease-in-out;
}
@keyframes icon-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-4px);
  }
  30% {
    transform: translateX(4px);
  }
  45% {
    transform: translateX(-3px);
  }
  60% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-2px);
  }
  90% {
    transform: translateX(2px);
  }
}

/* --- 3D ROTATIONS ------------------------------------------------ */

/* 3D horizontal-axis flip — reversible counterpart to .icon-flip */
.icon-flip-reverse .elementor-icon {
  perspective: 500px;
  overflow: visible !important;
}
.icon-flip-reverse .elementor-icon svg,
.icon-flip-reverse .elementor-icon i,
.icon-flip-reverse .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}
.icon-flip-reverse:hover .elementor-icon svg,
.icon-flip-reverse:hover .elementor-icon i,
.icon-flip-reverse:hover .elementor-icon img {
  transform: rotateX(360deg);
}

/* 3D vertical-axis coin flip — one-shot */
.icon-flip-y .elementor-icon {
  perspective: 500px;
  overflow: visible !important;
}
.icon-flip-y .elementor-icon svg,
.icon-flip-y .elementor-icon i,
.icon-flip-y .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}
.icon-flip-y:hover .elementor-icon svg,
.icon-flip-y:hover .elementor-icon i,
.icon-flip-y:hover .elementor-icon img {
  animation: icon-flip-y 0.7s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}
@keyframes icon-flip-y {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* 3D vertical-axis coin flip — reversible */
.icon-flip-y-reverse .elementor-icon {
  perspective: 500px;
  overflow: visible !important;
}
.icon-flip-y-reverse .elementor-icon svg,
.icon-flip-y-reverse .elementor-icon i,
.icon-flip-y-reverse .elementor-icon img {
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}
.icon-flip-y-reverse:hover .elementor-icon svg,
.icon-flip-y-reverse:hover .elementor-icon i,
.icon-flip-y-reverse:hover .elementor-icon img {
  transform: rotateY(360deg);
}

/* 3D flip with mid-flight scale bump — one-shot */
.icon-flip-pop .elementor-icon {
  perspective: 500px;
  overflow: visible !important;
}
.icon-flip-pop .elementor-icon svg,
.icon-flip-pop .elementor-icon i,
.icon-flip-pop .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-flip-pop:hover .elementor-icon svg,
.icon-flip-pop:hover .elementor-icon i,
.icon-flip-pop:hover .elementor-icon img {
  animation: icon-flip-pop 0.75s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}
@keyframes icon-flip-pop {
  0% {
    transform: rotateX(0) scale(1);
  }
  50% {
    transform: rotateX(180deg) scale(1.2);
  }
  100% {
    transform: rotateX(360deg) scale(1);
  }
}

/* 3D tumble — X + Y axes combined, one-shot */
.icon-tumble .elementor-icon {
  perspective: 600px;
  overflow: visible !important;
}
.icon-tumble .elementor-icon svg,
.icon-tumble .elementor-icon i,
.icon-tumble .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-tumble:hover .elementor-icon svg,
.icon-tumble:hover .elementor-icon i,
.icon-tumble:hover .elementor-icon img {
  animation: icon-tumble 0.9s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}
@keyframes icon-tumble {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* 3D barrel roll on diagonal axis — one-shot */
.icon-barrel-roll .elementor-icon {
  perspective: 600px;
  overflow: visible !important;
}
.icon-barrel-roll .elementor-icon svg,
.icon-barrel-roll .elementor-icon i,
.icon-barrel-roll .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-barrel-roll:hover .elementor-icon svg,
.icon-barrel-roll:hover .elementor-icon i,
.icon-barrel-roll:hover .elementor-icon img {
  animation: icon-barrel-roll 0.9s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}
@keyframes icon-barrel-roll {
  0% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

/* 3D pendulum swing on Y axis — one-shot oscillation */
.icon-swing .elementor-icon {
  perspective: 600px;
  overflow: visible !important;
}
.icon-swing .elementor-icon svg,
.icon-swing .elementor-icon i,
.icon-swing .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-swing:hover .elementor-icon svg,
.icon-swing:hover .elementor-icon i,
.icon-swing:hover .elementor-icon img {
  animation: icon-swing 0.9s ease-in-out;
}
@keyframes icon-swing {
  0% {
    transform: rotateY(0);
  }
  25% {
    transform: rotateY(45deg);
  }
  50% {
    transform: rotateY(-45deg);
  }
  75% {
    transform: rotateY(25deg);
  }
  100% {
    transform: rotateY(0);
  }
}

/* 3D fold — icon folds flat on Y axis then unfolds back, one-shot */
.icon-fold .elementor-icon {
  perspective: 500px;
  overflow: visible !important;
}
.icon-fold .elementor-icon svg,
.icon-fold .elementor-icon i,
.icon-fold .elementor-icon img {
  transform-origin: center center;
  will-change: transform;
}
.icon-fold:hover .elementor-icon svg,
.icon-fold:hover .elementor-icon i,
.icon-fold:hover .elementor-icon img {
  animation: icon-fold 0.75s cubic-bezier(0.4, 0.1, 0.2, 1.1) forwards;
}
@keyframes icon-fold {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0);
  }
}

/* ===================================================================
   List Icon Box — custom hover animation for iconless icon boxes
   (stacked title + description rows, separated by dividers).

   Apply the `list-icon-box` class to each individual icon-box widget
   so hovering one activates that row independently of its siblings.

   Design intent: these rows have no icon to animate, so the motion
   lives in the space itself. On hover, a shimmery gradient accent bar
   slides into view from the left edge, the content nudges right to
   clear it, the title tracks out slightly and recolours to the accent,
   and the description gains a touch more contrast.

   !important is used on critical properties so Elementor/global
   stylesheets cannot override these values.
   =================================================================== */

.list-icon-box .elementor-icon-box-wrapper {
  position: relative !important;
  padding: 10px 14px 10px 0;
  transition: padding-left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Background wash — a translucent accent tint that sweeps across the
   whole row from left to right, painting in behind the content. */
.list-icon-box .elementor-icon-box-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Hardcoded fallback for browsers without relative-colour syntax. */
  background-color: rgba(15, 30, 60, 0.05);
  background-color: rgb(
    from var(--e-global-color-accent, #0f1e3c) r g b / 0.06
  );
  border-radius: 6px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  z-index: 0;
}

/* Side accent bar — solid accent line that grows vertically from the
   row's vertical center. Sits on top of the background wash. */
.list-icon-box .elementor-icon-box-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--e-global-color-accent);
  border-radius: 3px;
  transform: translateY(-50%);
  transition: height 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  z-index: 2;
}

/* Keep the content above the background wash. */
.list-icon-box .elementor-icon-box-content {
  position: relative !important;
  z-index: 1;
}

.list-icon-box:hover .elementor-icon-box-wrapper {
  padding-left: 18px !important;
}

.list-icon-box:hover .elementor-icon-box-wrapper::after {
  transform: scaleX(1);
}

.list-icon-box:hover .elementor-icon-box-wrapper::before {
  height: 80%;
}

/* Title — letter-spacing tracks out slightly, recolours to accent.
   Draws a thin accent underline beneath itself from left to right. */
.list-icon-box .elementor-icon-box-title {
  transition:
    color 0.4s ease,
    letter-spacing 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.list-icon-box .elementor-icon-box-title span {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

.list-icon-box .elementor-icon-box-title span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s;
}

.list-icon-box:hover .elementor-icon-box-title {
  color: var(--e-global-color-accent) !important;
  letter-spacing: 0.015em !important;
}

.list-icon-box:hover .elementor-icon-box-title span::after {
  transform: scaleX(1);
}

/* Description — subtle contrast lift for "this is the active row" feel. */
.list-icon-box .elementor-icon-box-description {
  transition: color 0.4s ease !important;
}

.list-icon-box:hover .elementor-icon-box-description {
  color: var(--e-global-color-text, #222) !important;
}

/*
 * Invisalign Services CSS
 * */

.service-why-choose-box.is-service-choose-us
  .elementor-icon-box-icon
  .elementor-icon {
  position: relative;
  overflow: hidden;
}

.service-why-choose-box.is-service-choose-us
  .elementor-icon-box-icon
  .elementor-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--white-color);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.service-why-choose-box.is-service-choose-us:hover
  .elementor-icon-box-icon
  .elementor-icon:before {
  transform: scale(1.1);
}

/* Icon colour — snaps instantly on hover (no transition) so it arrives in
   its final accent colour the moment the user starts hovering, rather than
   fading in sync with the fill. Both `color` and `fill` are set explicitly
   so inherited-currentColor SVGs update reliably. */
.service-why-choose-box.is-service-choose-us
  .elementor-icon-box-icon
  .elementor-icon
  svg,
.service-why-choose-box.is-service-choose-us
  .elementor-icon-box-icon
  .elementor-icon
  svg
  *,
.service-why-choose-box.is-service-choose-us
  .elementor-icon-box-icon
  .elementor-icon
  svg
  path {
  transition: none !important;
}

.service-why-choose-box.is-service-choose-us:hover
  .elementor-icon-box-icon
  .elementor-icon
  svg,
.service-why-choose-box.is-service-choose-us:hover
  .elementor-icon-box-icon
  .elementor-icon
  svg
  *,
.service-why-choose-box.is-service-choose-us:hover
  .elementor-icon-box-icon
  .elementor-icon
  svg
  path {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
}

/* ===================================================================
   Service Choose Shine — hover animation for the four "why choose us"
   service cards.

   Apply `service-choose-shine` alongside the existing `service-why-choose-box`
   class on each icon-box widget (Advanced > CSS Classes). Four things
   happen in concert on hover:

     1. The card lifts a few px with a soft shadow.
     2. A diagonal accent-tinted shimmer streak sweeps across the card
        (same pattern as container-anim-1, re-tinted for the light bg).
     3. The icon scales up and gains an accent drop-shadow halo.
     4. An accent underline draws beneath the title from left to right.

   !important is used on critical properties so Elementor/global
   stylesheets cannot override these values.
   =================================================================== */

/* Card container — needs relative positioning for the shimmer pseudo,
   overflow hidden so the streak clips to the card's rounded edge.
   Transitions the drop shadow + white outline ring alongside the
   existing background-colour flip that service-why-choose-box applies. */
.service-choose-shine .elementor-widget-container {
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* On hover: card lifts, drops a deeper shadow, and gains a crisp 2px
   white ring via a second box-shadow layer — reads as an outline that
   only appears once the card flips to navy (so the ring is visible). */
.service-choose-shine:hover .elementor-widget-container {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 22px 40px -14px rgba(0, 0, 0, 0.4) !important;
}

/* Diagonal shimmer streak — WHITE gradient so it only becomes visible
   once the card flips to its dark hover background, reading as actual
   light glancing off the surface. */
.service-choose-shine .elementor-widget-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  z-index: 1;
}

.service-choose-shine:hover .elementor-widget-container::before {
  left: 125%;
}

/* Keep the wrapper above the shimmer so text never gets tinted. */
.service-choose-shine .elementor-icon-box-wrapper {
  position: relative;
  z-index: 2;
}

/* Icon — scales up with a soft white halo that glows against the dark
   hover background. Because the icon also flips to white via the
   existing service-why-choose-box rules, the halo reads as a light
   bloom rather than a coloured ring. */
.service-choose-shine .elementor-icon {
  display: inline-block;
  transition:
    transform 0.45s cubic-bezier(0.4, 0.1, 0.2, 1.3),
    filter 0.45s ease-out !important;
}

.service-choose-shine:hover .elementor-icon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
}

/* Title — thin WHITE underline draws from left on hover so it's visible
   against the navy hover background (an accent-coloured underline would
   blend into the accent-coloured card). */
.service-choose-shine .elementor-icon-box-title span {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

.service-choose-shine .elementor-icon-box-title span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s;
}

.service-choose-shine:hover .elementor-icon-box-title span::after {
  transform: scaleX(1);
}

/* ===================================================================
   Spotlight Icon Box — hover animation for icon-boxes that have
   NO background, NO border, and NO padding. Since content sits flush
   with the box's edge, a normal border/background would hug the text.
   Instead, all decorative work lives OUTSIDE the content bounds,
   in the gap between siblings:
     • Asymmetric corner brackets (top-left + bottom-right) slide in
       diagonally from further outside, locking into place around
       the content without touching it.
     • A soft white halo blooms behind the whole box, making it feel
       lit up against the container bg.
     • The icon lifts and scales up as the focal point.
     • The title gets a white underline that draws from left.

   Apply `spotlight-icon-box` to each individual icon-box widget so
   hovers act on each card independently. Requires reasonable gap
   between sibling boxes (~30px+) so the brackets and halo have
   room to render in the negative space.
   =================================================================== */

.spotlight-icon-box {
  /* Controls how far in from the right edge the top-right and
     bottom-right corner brackets sit. Needed because icon-box content
     is left-aligned and doesn't fill the column width — without this
     the right brackets drift far out past the visible text.
     Override per-section with e.g. `--spotlight-right-inset: 15%;`. */
  --spotlight-right-inset: 3%;
  position: relative !important;
  overflow: visible !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.spotlight-icon-box:hover {
  transform: translateY(-4px);
}

/* soft white halo bloom behind the content */
.spotlight-icon-box::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.spotlight-icon-box:hover::before {
  opacity: 1;
}

/* corner brackets — all 4 corners, sitting outside content.
   The wrapper's ::before/::after supply top-left + bottom-right; the
   widget-container's ::before/::after supply top-right + bottom-left.
   Both parents are the same visual rectangle (no padding) so all four
   brackets share the same frame edges. */
.spotlight-icon-box .elementor-icon-box-wrapper,
.spotlight-icon-box .elementor-widget-container {
  position: relative !important;
  overflow: visible !important;
}

.spotlight-icon-box .elementor-icon-box-wrapper::before,
.spotlight-icon-box .elementor-icon-box-wrapper::after,
.spotlight-icon-box .elementor-widget-container::before,
.spotlight-icon-box .elementor-widget-container::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0;
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
  pointer-events: none;
}

/* top-left bracket — draws from further up-and-left */
.spotlight-icon-box .elementor-icon-box-wrapper::before {
  top: -14px;
  left: -14px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: translate(10px, 10px);
}

/* bottom-right bracket — draws from further down-and-right.
   Uses `--spotlight-right-inset` instead of a fixed negative offset because
   the widget-container stretches full column width while content is
   left-aligned, so a hard `right: -14px` would sit far past the visible text. */
.spotlight-icon-box .elementor-icon-box-wrapper::after {
  bottom: -14px;
  right: var(--spotlight-right-inset);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-10px, -10px);
}

/* top-right bracket — draws from further up-and-right.
   Same right-inset variable as the bottom-right so both right corners
   stay aligned with the visible content rather than the full column. */
.spotlight-icon-box .elementor-widget-container::before {
  top: -14px;
  right: var(--spotlight-right-inset);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-10px, 10px);
}

/* bottom-left bracket — draws from further down-and-left */
.spotlight-icon-box .elementor-widget-container::after {
  bottom: -14px;
  left: -14px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: translate(10px, -10px);
}

.spotlight-icon-box:hover .elementor-icon-box-wrapper::before,
.spotlight-icon-box:hover .elementor-icon-box-wrapper::after,
.spotlight-icon-box:hover .elementor-widget-container::before,
.spotlight-icon-box:hover .elementor-widget-container::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* icon lift + scale with subtle spring */
.spotlight-icon-box .elementor-icon {
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1.3);
}

.spotlight-icon-box:hover .elementor-icon {
  transform: translateY(-4px) scale(1.08);
}

/* title underline — draws from left with slight delay */
.spotlight-icon-box .elementor-icon-box-title span {
  position: relative;
  display: inline-block;
}

.spotlight-icon-box .elementor-icon-box-title span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s;
}

.spotlight-icon-box:hover .elementor-icon-box-title span::after {
  transform: scaleX(1);
}

.invisalign-wwa-img img {
  aspect-ratio: 1 / 0.81;
  object-fit: cover;
}

@media only screen and (max-width: 1024px) {
  .invisalign-wwa-img img {
    aspect-ratio: 1 / 0.66;
  }
}

/*
 * Whitening Services CSS
 * */
.whitening-services-Progress-bar.elementor-widget-progress
  .elementor-progress-wrapper {
  margin-top: 20px;
}

.whitening-services-Progress-bar.elementor-widget-progress
  .elementor-progress-bar {
  border-radius: 100px;
}

.whitening-services-Progress-bar .elementor-progress-wrapper {
  position: inherit !important;
}

.whitening-services-Progress-bar .elementor-progress-percentage {
  position: absolute;
  top: 6px;
  right: 0;
  padding: 0;
}

.faq-img img {
  aspect-ratio: 1 / 1.2;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .whitening-services-Progress-bar.elementor-widget-progress
    .elementor-progress-wrapper {
    margin-top: 10px;
  }
}

/*
 * Contact Us CSS
 * */

@media only screen and (max-width: 1024px) {
}

/*
 * Blog List CSS
 * */

.blog-item-featured-img img {
  aspect-ratio: 1 / 0.678;
  object-fit: cover;
}

.blog-categories-style
  ul
  li
  .elementor-post-info__item
  .elementor-post-info__terms-list {
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  color: transparent;
}

.blog-categories-style
  ul
  li
  .elementor-post-info__item
  .elementor-post-info__terms-list-item {
  font-size: 16px;
  display: none;
}

.blog-categories-style
  ul
  li
  .elementor-post-info__item
  .elementor-post-info__terms-list-item:first-child {
  display: block;
  color: var(--white-color);
}

.blog-categories-style
  ul
  li
  .elementor-post-info__item
  .elementor-post-info__terms-list-item {
  background: var(--e-global-color-accent);
  padding: 8px 15px;
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
}

.blog-categories-style
  ul
  li
  .elementor-post-info__item
  .elementor-post-info__terms-list-item:hover {
  background: var(--white-color);
  color: var(--e-global-color-primary);
}

.blog-archive-loop .elementor-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  margin-top: 30px;
}

.blog-archive-loop .elementor-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-bg);
  color: var(--e-global-color-secondary);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.blog-archive-loop .elementor-pagination .page-numbers.current,
.blog-archive-loop .elementor-pagination .page-numbers:hover {
  background-color: var(--e-global-color-accent);
  color: var(--white-color);
}

.blog-archive-loop .elementor-pagination .page-numbers.prev,
.blog-archive-loop .elementor-pagination .page-numbers.next {
  font-size: 0;
  background-image: url("./images/left-arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px auto;
}

.blog-archive-loop .elementor-pagination .page-numbers.prev:hover,
.blog-archive-loop .elementor-pagination .page-numbers.prev:focus {
  background-image: url("./images/left-white-arrow.svg");
}

.blog-archive-loop .elementor-pagination .page-numbers.next {
  background-image: url("./images/right-arrow.svg");
}

.blog-archive-loop .elementor-pagination .page-numbers.next:hover,
.blog-archive-loop .elementor-pagination .page-numbers.next:focus {
  background-image: url("./images/right-white-arrow.svg");
}

@media only screen and (max-width: 1024px) {
  .blog-archive-loop .elementor-pagination .page-numbers {
    height: 40px;
    width: 40px;
  }

  .blog-archive-loop .elementor-pagination .page-numbers.prev,
  .blog-archive-loop .elementor-pagination .page-numbers.next {
    background-size: 16px auto;
  }
}

/*
 * Blog Single CSS
 * */

.post-featured-img img {
  aspect-ratio: 1 / 0.46875;
  object-fit: cover;
}

.post-entry p {
  margin-bottom: 1.5em;
}

.post-entry a,
.post-entry a strong,
.post-entry p strong {
  color: var(--e-global-color-accent);
  transition: all 0.3s ease-in-out;
}

.post-entry a:hover {
  text-decoration: underline;
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6 {
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight);
  text-transform: var(--e-global-typography-primary-text-transform);
  font-style: var(--e-global-typography-primary-font-style);
  line-height: var(--e-global-typography-primary-line-height);
  color: var(--e-global-color-accent);
  margin: 0.4em 0 0.6em;
}

.post-entry h1 {
  font-size: 70px;
}

.post-entry h2 {
  font-size: 44px;
}

.post-entry h3 {
  font-size: 36px;
}

.post-entry h4 {
  font-size: 32px;
}

.post-entry h5 {
  font-size: 28px;
}

.post-entry h6 {
  font-size: 26px;
}

.post-entry ul {
  list-style: none;
}

.post-entry ul,
.post-entry ol {
  padding: 0;
  margin: 20px 0;
}

.post-entry ol {
  padding-left: 20px;
}

.post-entry ul li,
.post-entry ol li {
  position: relative;
  margin-bottom: 15px;
}

.post-entry ul li {
  padding-left: 25px;
}

.post-entry ol li {
  padding-left: 5px;
}

.post-entry ul li:last-child,
.post-entry ol li:last-child {
  margin-bottom: 0;
}

.post-entry ul li:before {
  content: "\f058";
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  font-weight: 900;
  top: 0px;
  left: 2px;
  color: var(--e-global-color-accent);
}

.post-entry ol li::marker {
  font-size: 18px;
  font-weight: 500;
  color: var(--e-global-color-accent);
}

.post-entry ul li a,
.post-entry ul li a strong,
.post-entry ul li strong,
.post-entry ol li a,
.post-entry ol li a strong,
.post-entry ol li strong {
  color: var(--e-global-color-accent);
  transition: all 0.3s ease-in-out;
}

.post-entry ul li a:hover,
.post-entry ol li a:hover {
  text-decoration: underline;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul {
  margin: 15px 0;
}

.post-entry ul ul li:before,
.post-entry ul ol li:before,
.post-entry ol ul li:before {
  height: 8px;
  width: 8px;
}

.post-entry ol ol li::marker,
.post-entry ul ol li::marker {
  font-size: 16px;
}

.post-entry blockquote {
  position: relative;
  background-color: var(--e-global-color-accent);
  background-image: url("./images/quote.svg");
  background-repeat: no-repeat;
  background-position: top 30px left 70px;
  background-size: 80px auto;
  border-radius: 0;
  padding: 30px 30px 30px 170px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 30px;
  box-shadow: -5px -5px 50px 0px rgba(178, 195, 250, 0.5);
}

.post-entry blockquote p {
  font-family: var(--e-global-typography-text-font-family);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5em;
  color: var(--white-color);
}

.post-entry blockquote cite {
  font-size: 18px;
  color: var(--e-global-color-accent);
}

.post-entry .elementor-post-info__terms-list p {
  background-color: var(--e-global-color-accent);
  padding: 18px 36px 16px 34px;
}

@media only screen and (max-width: 1024px) {
  .post-featured-img img {
    aspect-ratio: 1 / 0.66;
  }

  .post-entry h1 {
    font-size: 40px;
  }

  .post-entry h2 {
    font-size: 34px;
  }

  .post-entry h3 {
    font-size: 30px;
  }

  .post-entry h4 {
    font-size: 28px;
  }

  .post-entry h5 {
    font-size: 24px;
  }

  .post-entry h6 {
    font-size: 22px;
  }

  .post-entry blockquote {
    padding: 25px 20px 20px 20px;
    background-position: top 5px left 20px;
    background-size: 50px auto;
    text-indent: 70px;
  }

  .post-entry blockquote p {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .post-entry h1 {
    font-size: 34px;
  }

  .post-entry h2 {
    font-size: 28px;
  }

  .post-entry h3 {
    font-size: 24px;
  }

  .post-entry h4 {
    font-size: 22px;
  }

  .post-entry h5 {
    font-size: 20px;
  }

  .post-entry h6 {
    font-size: 18px;
  }

  .post-entry blockquote {
    background-position: top 10px left 15px;
    background-size: 35px;
    text-indent: 40px;
    padding: 20px;
  }

  .post-entry blockquote p {
    font-size: 16px;
  }

  .post-entry ul li,
  .post-entry ol li {
    margin-bottom: 10px;
  }

  .post-entry ul li:before {
    font-size: 16px;
  }

  .post-entry ul ul li:before,
  .post-entry ul ol li:before,
  .post-entry ol ul li:before {
    height: 7px;
    width: 7px;
  }

  .post-entry ol li::marker {
    font-size: 16px;
  }

  .post-entry ol ol li::marker,
  .post-entry ul ol li::marker {
    font-size: 14px;
  }

  .post-entry ul ul,
  .post-entry ul ol,
  .post-entry ol ol,
  .post-entry ol ul {
    margin: 10px 0;
  }

  .post-tag ul li .elementor-post-info__item--type-terms span a {
    padding: 10px 20px;
    margin-right: 10px;
  }

  .post-tag ul li .elementor-post-info__item--type-terms span a:before {
    top: 6px;
    left: 6px;
  }

  .post-tag ul li .elementor-post-info__item--type-terms span a:after {
    right: 4px;
    bottom: 4px;
  }
}

/*
 * Author Page CSS
 * */

.blog-post-loop-author {
  height: var(--container-widget-width);
}

.blog-post-loop-author .author-profile-photo img {
  border-radius: 50%;
}

.author-profile-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Author Archive Css */

.blog-single-author-img .author-profile-photo img {
  border-radius: 20px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.author-social-media {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-social-media li {
  line-height: 0;
}

.author-social-media li a {
  font-size: 0;
  position: relative;
}

.author-social-media li a:before {
  content: "\f39e";
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 5 Brands";
  font-size: 20px;
  font-weight: 400;
  line-height: 1em;
  background-color: var(--white-color);
  border-radius: 50%;
  color: var(--e-global-color-primary);
  width: 40px;
  height: 40px;
}

.author-social-media li a:hover:before {
  color: var(--white-color);
  background-color: var(--e-global-color-accent);
}

.author-social-media li.instagram a:before {
  content: "\f16d";
}

.author-social-media li.linkedin a:before {
  content: "\f0e1";
}

.author-social-media li.youtube a:before {
  content: "\f167";
}

.author-social-media li.twitter a:before {
  content: "\f099";
}

.author-social-media li.tiktok a:before {
  content: "\e07b";
}

/*
 * Global Form CSS
 * */

.gform_wrapper .gform_heading {
  display: none;
}

.gform_wrapper form .gform-body .gform_fields {
  row-gap: 40px;
  column-gap: 30px;
}

.gform_wrapper form .gform-body .gform_fields .gfield {
  border-radius: 0;
  box-shadow: none;
}

.gform_wrapper form .gform-body .gform_fields .gfield .gfield_label {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: 500;
  text-transform: capitalize;
  color: var(--white-color);
  margin-bottom: 13px;
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container input,
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select,
.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  textarea {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: 14px;
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-text);
  background: var(--white-color);
  border-radius: 10px;
  border: none;
  box-shadow: none;
  height: auto;
  padding: 15px 20px;
}

.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  input::placeholder,
.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  textarea::placeholder {
  color: var(--e-global-color-text);
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select {
  background-image: var(--gf-ctrl-select-icon);
  background-position: var(--gf-ctrl-select-icon-position);
  background-repeat: no-repeat;
  background-size: var(--gf-ctrl-select-icon-size);
}

.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  input:focus,
.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  select:focus,
.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  textarea:focus,
.gform_wrapper form .gform_footer .gform_button:focus {
  outline: none !important;
  box-shadow: none;
}

.gform_wrapper form .gform-body .ginput_container_date input {
  width: 100%;
}

.gform_wrapper form .gform-body .gfield_time_hour,
.gform_wrapper form .gform-body .gfield_time_minute {
  width: 50%;
}

.gform-theme--foundation .gfield textarea.large {
  min-block-size: auto;
}

.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  textarea {
  height: 180px;
}

.gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .validation_message.gfield_validation_message {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--e-global-typography-text-line-height);
  text-transform: capitalize;
  letter-spacing: 0.02em;
  color: #c8221e;
  margin-top: 0;
}

.gform_wrapper form .gform_footer {
  margin-top: 40px !important;
}

.gform_wrapper form .gform_footer .gform_button {
  text-align: center;
  font-family:
    var(--e-global-typography-accent-font-family), Sans-serif !important;
  font-size: var(--e-global-typography-accent-font-size) !important;
  font-weight: var(--e-global-typography-accent-font-weight) !important;
  line-height: var(--e-global-typography-accent-line-height) !important;
  text-transform: capitalize !important;
  color: var(--e-global-color-accent) !important;
  background-color: var(--white-color) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 15px 40px !important;
  transition: all 0.3s ease-in-out !important;
}

.gform_wrapper form .gform_footer .gform_button:hover {
  background-color: var(--e-global-color-primary) !important;
  color: var(--white-color) !important;
}

.gform_wrapper .gform_validation_errors {
  padding: 12px !important;
  margin-bottom: 20px !important;
  border-radius: 0px !important;
  border: 2px solid #ff0000 !important;
}

.gform_wrapper .gform_validation_errors .gform_submission_error {
  color: #ff0000 !important;
  font-size: 16px !important;
  font-weight: 600;
  font-style: normal;
}

.gform_wrapper .gform_validation_errors .gform-icon:before {
  color: #ff0000 !important;
}

.gform_wrapper .gfield_validation_message {
  color: #ff0000 !important;
  font-size: 14px;
  font-weight: 600;
}

.gform_confirmation_wrapper .gform_confirmation_message {
  font-family:
    var(--e-global-typography-primary-font-family), Sans-serif !important;
  font-size: 18px;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.5em;
  background: var(--e-global-color-secondary);
  color: var(--white-color);
  border-radius: 20px;
  padding: 15px;
}

@media only screen and (max-width: 1024px) {
  .gform_wrapper form .gform-body .gform_fields {
    row-gap: 20px;
    column-gap: 20px;
  }

  .gform_wrapper form .gform-body .gform_fields .gfield .gfield_label {
    margin-bottom: 8px;
  }

  .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container input,
  .gform_wrapper
    form
    .gform-body
    .gform_fields
    .gfield
    .ginput_container
    select,
  .gform_wrapper
    form
    .gform-body
    .gform_fields
    .gfield
    .ginput_container
    textarea {
    padding: 12px 15px;
  }

  .gform_wrapper
    form
    .gform-body
    .gform_fields
    .gfield
    .ginput_container
    textarea {
    height: 140px;
  }

  .gform_wrapper form .gform_footer {
    margin-top: 30px !important;
  }

  .gform_confirmation_wrapper .gform_confirmation_message {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .gform_wrapper form .gform-body .gform_fields {
    column-gap: 0;
  }
}

/* consultation-form */

.consultation-form .gform_wrapper form .gform-body .gform_fields {
  row-gap: 20px;
  column-gap: 20px;
}

.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .gfield_label {
  display: none;
}

.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  input,
.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  select,
.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  textarea {
  color: var(--white-color);
  background-color: transparent;
  border-radius: 20px;
  border: 1px solid rgb(from var(--white-color) r g b / 14%);
}

.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  input::placeholder,
.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  select::placeholder,
.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  textarea::placeholder {
  color: rgb(from var(--white-color) r g b / 50%) !important;
}

.consultation-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  select
  option {
  background-color: rgb(from var(--e-global-color-accent) r g b / 100%);
}

.consultation-form .gform_wrapper form .gform_footer {
  justify-content: center;
}

/* Contact Form */

.contact-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .gfield_label {
  color: var(--e-global-color-primary);
}

.contact-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  input,
.contact-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  select,
.contact-form
  .gform_wrapper
  form
  .gform-body
  .gform_fields
  .gfield
  .ginput_container
  textarea {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #66666624;
}

.contact-form .gform_wrapper form .gform_footer .gform_button {
  background-color: var(--e-global-color-accent) !important;
  color: var(--white-color) !important;
}

.contact-form .gform_wrapper form .gform_footer .gform_button:hover {
  background-color: var(--e-global-color-primary) !important;
}

/* ============================================================================
   Form Submit Button Hover Animations — Gravity Forms IDs 1 & 3

   ★ CANONICAL SUBMIT-BUTTON ANIMATION ★
   This is the approved/standard submit-button hover treatment for this site.
   Reuse this pattern as-is for any new submit pills going forward — match
   the colour contract, the "meet in the middle" wipe, and the border-timing
   trick (snap on instantly, hold through the 0.55s retraction on hover-out).
   Only swap the selector and the two palette variables; do not alter the
   motion or the transition structure.

   "Meet in the Middle" — on hover, the contrast colour wipes in from BOTH
   the left and right edges simultaneously, meeting in the middle of the pill
   to fully flood it. On hover-out the two halves retreat back to their
   respective edges. A contrast border strokes in, the text re-colours, and
   the pill lifts with a soft glow.

   Colour contract (accent = dark, white-color = light; no black anywhere):
   • Form 1 — dark page, LIGHT pill at rest
     Rest:  bg = white,  border = transparent, text = accent
     Hover: two accent halves slide in from left + right and meet,
            border fades in = white, text = white
   • Form 3 — white page, DARK pill at rest
     Rest:  bg = accent, border = transparent, text = white
     Hover: two white halves slide in from left + right and meet,
            border fades in = accent, text = accent

   Technique — TWO background-image layers, each a flat solid-colour linear
   gradient used as a rectangle of the contrast colour:
     Layer 1 (index 0)  →  anchored `left center`,  width 0% → 50% on hover
     Layer 2 (index 1)  →  anchored `right center`, width 0% → 50% on hover
   When both are at 50% they exactly tile the pill and the fill looks solid.
   Background-size is a single transition-able property so both widths animate
   together. Reverses naturally on hover-out.

   Why two background layers instead of ::before / ::after? Gravity Forms
   renders the submit as <input type="submit">, which browsers do not honour
   pseudo-elements on. Background layers work on any element.
   ============================================================================ */

/* --- shared pill geometry + motion ---
   Border-colour timing hides the straight vertical seam where the two
   wipes meet at the pill's curved edge. On hover-in the border snaps to
   its target colour instantly (0s, no delay). On hover-out the border
   HOLDS the hover colour for the full 0.55s background-size retraction,
   then snaps back to transparent — so the curved pill edge is framed in
   the hover border the entire time the rectangular wipes are sliding out.

   This works because CSS transitions apply the target state's transition
   rule. The base rule's `border-color 0s 0.55s` is read on hover-out
   (going from hover back to rest), giving the 0.55s delay. The hover
   rule overrides transition with `border-color 0s` (no delay) so the
   border snaps on immediately when hover begins. */
#gform_wrapper_1 form .gform_footer .gform_button,
#gform_wrapper_3 form .gform_footer .gform_button {
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  border-radius: 100px !important;
  /* Two layers: [0] pinned to the left edge, [1] pinned to the right edge.
     Both start at 0% width and grow to 50% on hover so they meet at centre. */
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  background-size: 0% 100%, 0% 100% !important;
  box-shadow: 0 0 0 0 rgba(15, 30, 60, 0) !important;
  transform: translateY(0) !important;
  letter-spacing: normal !important;
  cursor: pointer;
  transition:
    background-size 0.55s cubic-bezier(0.45, 0.05, 0.3, 1),
    border-color 0s 0.55s,
    color 0.4s ease 0.15s,
    transform 0.4s cubic-bezier(0.4, 0.1, 0.2, 1.2),
    box-shadow 0.45s ease,
    letter-spacing 0.5s ease !important;
}

/* --- Form 1: light pill on dark page ---
   Two accent-coloured rectangles slide in from the left and right. */
#gform_wrapper_1 form .gform_footer .gform_button {
  background-color: var(--white-color, #fff) !important;
  background-image:
    linear-gradient(
      to right,
      var(--e-global-color-accent),
      var(--e-global-color-accent)
    ),
    linear-gradient(
      to right,
      var(--e-global-color-accent),
      var(--e-global-color-accent)
    ) !important;
  color: var(--e-global-color-accent) !important;
}

#gform_wrapper_1 form .gform_footer .gform_button:hover,
#gform_wrapper_1 form .gform_footer .gform_button:focus-visible {
  background-size: 50% 100%, 50% 100% !important;
  border-color: var(--white-color, #fff) !important;
  color: var(--white-color, #fff) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -10px rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.6px !important;
  /* Override the base border-color transition: snap on instantly. */
  transition:
    background-size 0.55s cubic-bezier(0.45, 0.05, 0.3, 1),
    border-color 0s,
    color 0.4s ease 0.15s,
    transform 0.4s cubic-bezier(0.4, 0.1, 0.2, 1.2),
    box-shadow 0.45s ease,
    letter-spacing 0.5s ease !important;
}

/* --- Form 3: dark pill on white page ---
   Two white rectangles slide in from the left and right. */
#gform_wrapper_3 form .gform_footer .gform_button {
  background-color: var(--e-global-color-accent) !important;
  background-image:
    linear-gradient(
      to right,
      var(--white-color, #fff),
      var(--white-color, #fff)
    ),
    linear-gradient(
      to right,
      var(--white-color, #fff),
      var(--white-color, #fff)
    ) !important;
  color: var(--white-color, #fff) !important;
}

#gform_wrapper_3 form .gform_footer .gform_button:hover,
#gform_wrapper_3 form .gform_footer .gform_button:focus-visible {
  background-size: 50% 100%, 50% 100% !important;
  border-color: var(--e-global-color-accent) !important;
  color: var(--e-global-color-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -10px rgba(15, 30, 60, 0.35) !important;
  letter-spacing: 0.6px !important;
  /* Override the base border-color transition: snap on instantly. */
  transition:
    background-size 0.55s cubic-bezier(0.45, 0.05, 0.3, 1),
    border-color 0s,
    color 0.4s ease 0.15s,
    transform 0.4s cubic-bezier(0.4, 0.1, 0.2, 1.2),
    box-shadow 0.45s ease,
    letter-spacing 0.5s ease !important;
}

/* ============================================================================
   Review Animations
   ============================================================================ */

/* review-stars-anim-1: Secondary-color stars at rest → staggered gold wave on hover
                       + equal-height review cards

   Applied AUTOMATICALLY to the Smash Balloon Reviews Feed Pro widget — no
   wrapper class required. Scoped to `#sb-reviews-container-1` to match the
   naming convention used by the existing "Google Review CSS" block above,
   so any shortcode drop-in of [reviews-feed] picks up the treatment.

   Why these specificities & !importants?
   ----------------------------------------------------------------------------
   - The plugin injects an inline <style> block in the document body that sets
     `#sb-reviews-container-1 .sb-item-rating{color:#5ac6ce}`. Inline body
     <style> loads AFTER head-linked theme CSS, so overriding needs either
     equal-or-higher specificity + source order + !important, or simply
     !important with >= specificity. We use !important everywhere that matters.
   - An existing theme rule earlier in this file switched all text/name/date to
     white on `:hover` of `.sbr-owl-item`. `.sb-item-rating` has been REMOVED
     from that rule so the hover wave below is free to run.
   - SVG <path>s in the plugin markup have no explicit `fill` attribute; the
     plugin relies on `fill: currentColor` inheritance from the container's
     `color` property. We set both `color` AND `fill` for belt-and-suspenders. */

/* 1 · BASE STAR COLOR — secondary at rest
   The plugin's inline <style> block sets
   `#sb-reviews-container-1 .sb-item-rating{color:#5ac6ce}` (specificity 0,1,1,0).
   Our scoped selector (0,1,3,0) outranks it without needing !important — which
   matters because `@keyframes` cannot declare !important, so the animation
   below needs the base `color` to be overrideable during playback.
   `transition: color` only engages on hover-out, smoothly fading gold back to
   secondary when the animation property is removed from the element. */
#sb-reviews-container-1 .sb-post-item .sb-item-rating,
#sb-reviews-container-1 .sb-post-item .sb-item-rating .sb-item-rating-icon {
  color: var(--e-global-color-secondary);
}

#sb-reviews-container-1 .sb-post-item .sb-item-rating .sb-item-rating-icon {
  display: inline-block;
  transform-origin: center center;
  transition: color 0.3s ease-out;
}

/* SVG path has no explicit fill attribute — plugin relies on
   `fill: currentColor` inheritance. Making it explicit here guarantees the
   star glyph follows the parent `color` (animated and base). */
#sb-reviews-container-1
  .sb-post-item
  .sb-item-rating
  .sb-item-rating-icon
  svg
  path {
  fill: currentColor;
}

/* 2 · WAVE KEYFRAME — stadium arm-raise per star
   Picture one person in a stadium row: they raise up (translateY -10px),
   gaining gold as they rise, then drop back down but KEEP the gold.
   `animation-fill-mode: forwards` on the hover rule below locks in the 100%
   state (gold, back at rest position) for as long as the hover is held. */
@keyframes sbrStarWave {
  0% {
    transform: translateY(0);
    color: var(--e-global-color-secondary);
  }
  40% {
    transform: translateY(-10px);
    color: #f5c518;
  }
  100% {
    transform: translateY(0);
    color: #f5c518;
  }
}

/* 3 · HOVER — trigger the wave with a left-to-right stagger
   Each star starts its animation a beat after its neighbour, so the raise-
   and-gold-on propagates across the row like the crowd wave. 0.45s per star
   × 0.08s stagger × 5 stars ≈ 0.77s total travel — quick and snappy.
   Hover trigger is `.sbr-owl-item:hover` to match the convention used by the
   existing card-hover rules (bg swap, text-to-white) earlier in this file. */
#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-post-item
  .sb-item-rating
  .sb-item-rating-icon {
  animation: sbrStarWave 0.45s ease-in-out forwards;
}

#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-post-item
  .sb-item-rating
  .sb-item-rating-icon:nth-child(1) {
  animation-delay: 0s;
}
#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-post-item
  .sb-item-rating
  .sb-item-rating-icon:nth-child(2) {
  animation-delay: 0.08s;
}
#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-post-item
  .sb-item-rating
  .sb-item-rating-icon:nth-child(3) {
  animation-delay: 0.16s;
}
#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-post-item
  .sb-item-rating
  .sb-item-rating-icon:nth-child(4) {
  animation-delay: 0.24s;
}
#sb-reviews-container-1
  .sbr-owl-item:hover
  .sb-post-item
  .sb-item-rating
  .sb-item-rating-icon:nth-child(5) {
  animation-delay: 0.32s;
}

/* 4 · EQUAL-HEIGHT CARDS — flex chain through the Owl carousel
   Owl Carousel 2 leaves `.sbr-owl-stage` at `display: block` (with items as
   inline-block or floated), so each item sizes to its own content. Making
   the stage a flex row (default align-items: stretch) equalizes item heights
   to the tallest card. The width each item needs for the carousel slide is
   set inline by Owl (e.g., `width: 433.333px`) and survives the display swap.
   Then we propagate the stretched height down through `.sb-post-item-wrap`
   to `.sb-post-item` (which is already flex-column-reverse earlier in this
   file) so the visible card surface fills the item. */
#sb-reviews-container-1 .sbr-owl-stage {
  display: flex !important;
  align-items: stretch;
}

#sb-reviews-container-1 .sbr-owl-item {
  display: flex !important;
  height: auto;
}

#sb-reviews-container-1 .sbr-owl-item .sb-post-item-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#sb-reviews-container-1 .sbr-owl-item .sb-post-item-wrap .sb-post-item {
  flex: 1 1 auto;
  width: 100%;
}

/* 5 · CARD LAYOUT REDESIGN — lock star/text/author positions + click-to-expand
   The existing rule at `.sb-post-item` earlier in this file sets
   `flex-direction: column-reverse` so rating ends up on top. That worked when
   every card was its own natural height, but with equal-heights stretching,
   extra vertical space in a column-reverse flex accumulates at the TOP and
   content falls to the bottom — which is what we saw in the broken screenshot.
   Fix: override to a normal `flex-direction: column` with explicit `order`
   values on each direct child. Author-ctn uses `margin-top: auto` to absorb
   the extra space and stay pinned to the card bottom regardless of how long
   the review is. Text is clamped with -webkit-line-clamp; clicking anywhere
   on a truncated card expands it (JS binds the handler to the whole wrap and
   reads the full text from `data-text`, which the plugin sets for us). */
#sb-reviews-container-1 .sb-post-item {
  flex-direction: column !important;
}

/* Rating at top — the existing rule already sets `order: 1`, which puts it
   first in either flex direction. No additional order rule needed here. */

/* Text sits directly below rating, clamped to 5 lines when collapsed.
   `-webkit-line-clamp` needs the box model of `-webkit-box` + vertical
   orientation to work; modern browsers still honor this non-standard stack. */
#sb-reviews-container-1 .sb-post-item .sb-item-text {
  order: 2;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px !important;
}

#sb-reviews-container-1 .sb-post-item .sb-item-text.sbr-review-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Plugin's own "..." expand link sits inside `.sb-item-text`. The whole-card
   click handler replaces its role, so hide it unconditionally. */
#sb-reviews-container-1 .sb-post-item .sb-item-text .sb-expand {
  display: none !important;
}

/* Clickable card — applied by js/function.js to any review wrap whose text
   the plugin truncated (i.e., the plugin inserted a `.sb-expand` child).
   The whole card becomes the click target; the JS handler toggles between
   the plugin-truncated HTML and the full text stored in `data-text`, while
   the `.sbr-review-expanded` rule above removes the line-clamp. */
#sb-reviews-container-1 .sb-post-item-wrap.sbr-review-clickable {
  cursor: pointer;
}

/* Author-date block pinned to card bottom. `margin-top: auto` on a flex child
   eats all remaining space, shoving this element against the main-end. */
#sb-reviews-container-1 .sb-post-item .sb-item-author-date-ctn {
  order: 4;
  margin-top: auto;
}

/* border-trace-anim-1..5 — white 2px border trace on hover.
   Radius is auto-matched to the host by the JS helper in js/function.js.
   -1 CCW white / -2 CW white / -3 CCW fades to accent on un-hover / -4 CW same /
   -5 four lines draw from each corner simultaneously toward the next CCW corner. */

@property --border-trace-progress {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

/* @property on the color lets CSS interpolate white↔black (variants -3/-4). */
@property --border-trace-color {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: false;
}

.border-trace-anim-1,
.border-trace-anim-2,
.border-trace-anim-3,
.border-trace-anim-4,
.border-trace-anim-5 {
  position: relative;
}

/* Shared ring: padding + mask-composite carves a 2px frame in host's shape. */
.border-trace-anim-1::before,
.border-trace-anim-2::before,
.border-trace-anim-3::before,
.border-trace-anim-4::before,
.border-trace-anim-5::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  /* JS aligns the ring to the visible rounded shape — host itself, or a
	   rounded descendant if the class sits on an outer wrapper. Set
	   --border-trace-outset (e.g. 2px) on a specific instance if you want the
	   ring to protrude outward (only safe when no ancestor has overflow:hidden). */
  top: calc(
    var(--border-trace-inset-top, 0px) - var(--border-trace-outset, 0px)
  );
  right: calc(
    var(--border-trace-inset-right, 0px) - var(--border-trace-outset, 0px)
  );
  bottom: calc(
    var(--border-trace-inset-bottom, 0px) - var(--border-trace-outset, 0px)
  );
  left: calc(
    var(--border-trace-inset-left, 0px) - var(--border-trace-outset, 0px)
  );
  padding: 2px;
  border-top-left-radius: calc(
    var(--border-trace-radius-tl, 0px) + var(--border-trace-outset, 0px)
  );
  border-top-right-radius: calc(
    var(--border-trace-radius-tr, 0px) + var(--border-trace-outset, 0px)
  );
  border-bottom-right-radius: calc(
    var(--border-trace-radius-br, 0px) + var(--border-trace-outset, 0px)
  );
  border-bottom-left-radius: calc(
    var(--border-trace-radius-bl, 0px) + var(--border-trace-outset, 0px)
  );
  pointer-events: none;
  z-index: 1;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: --border-trace-progress 1s linear;
}

/* Variant 1 — CCW from BL (natural conic sweep). JS sets the start angle
   from the host's actual aspect ratio so BL is exactly at the corner. */
.border-trace-anim-1::before {
  background: conic-gradient(
    from var(--border-trace-angle-bl, 225deg),
    #fff 0%,
    #fff var(--border-trace-progress, 0%),
    transparent var(--border-trace-progress, 0%),
    transparent 100%
  );
}
.border-trace-anim-1:hover::before {
  --border-trace-progress: 100%;
}

/* Variant 2 — CW from BL (scaleX(-1) mirrors; start at BR in source space). */
.border-trace-anim-2::before {
  transform: scaleX(-1);
  background: conic-gradient(
    from var(--border-trace-angle-br, 135deg),
    #fff 0%,
    #fff var(--border-trace-progress, 0%),
    transparent var(--border-trace-progress, 0%),
    transparent 100%
  );
}
.border-trace-anim-2:hover::before {
  --border-trace-progress: 100%;
}

/* Variant 3 — CCW, trace fades white → accent during un-hover retreat.
   Base-state transition handles hover-out (both props over 1s); the :hover
   transition sets color to 0s so it snaps white instantly on hover-in. */
.border-trace-anim-3::before {
  --border-trace-color: var(--e-global-color-accent);
  transition:
    --border-trace-progress 1s linear,
    --border-trace-color 1s linear;
  background: conic-gradient(
    from var(--border-trace-angle-bl, 225deg),
    var(--border-trace-color) 0%,
    var(--border-trace-color) var(--border-trace-progress, 0%),
    transparent var(--border-trace-progress, 0%),
    transparent 100%
  );
}
.border-trace-anim-3:hover::before {
  transition:
    --border-trace-progress 1s linear,
    --border-trace-color 0s linear;
  --border-trace-color: #fff;
  --border-trace-progress: 100%;
}

/* Variant 4 — CW version of -3 (scaleX(-1) + from 135deg). */
.border-trace-anim-4::before {
  --border-trace-color: var(--e-global-color-accent);
  transition:
    --border-trace-progress 1s linear,
    --border-trace-color 1s linear;
  transform: scaleX(-1);
  background: conic-gradient(
    from var(--border-trace-angle-br, 135deg),
    var(--border-trace-color) 0%,
    var(--border-trace-color) var(--border-trace-progress, 0%),
    transparent var(--border-trace-progress, 0%),
    transparent 100%
  );
}
.border-trace-anim-4:hover::before {
  transition:
    --border-trace-progress 1s linear,
    --border-trace-color 0s linear;
  --border-trace-color: #fff;
  --border-trace-progress: 100%;
}

/* Variant 5 — 4 lines draw simultaneously, each from a corner toward the
   next CCW corner. JS sets per-edge angular widths so each line reaches its
   next corner at 100% regardless of aspect ratio. --stop-N = cumulative corner
   positions (%). --band-N = edge angular width as a unitless fraction (0-1). */
.border-trace-anim-5::before {
  background: conic-gradient(
    from var(--border-trace-angle-bl, 225deg),
    /* BL → TL (left edge) */ #fff 0%,
    #fff
      calc(var(--border-trace-band-1, 0.25) * var(--border-trace-progress, 0%)),
    transparent
      calc(var(--border-trace-band-1, 0.25) * var(--border-trace-progress, 0%)),
    transparent var(--border-trace-stop-1, 25%),
    /* TL → TR (top edge) */ #fff var(--border-trace-stop-1, 25%),
    #fff
      calc(
        var(--border-trace-stop-1, 25%) + var(--border-trace-band-2, 0.25) *
          var(--border-trace-progress, 0%)
      ),
    transparent
      calc(
        var(--border-trace-stop-1, 25%) + var(--border-trace-band-2, 0.25) *
          var(--border-trace-progress, 0%)
      ),
    transparent var(--border-trace-stop-2, 50%),
    /* TR → BR (right edge) */ #fff var(--border-trace-stop-2, 50%),
    #fff
      calc(
        var(--border-trace-stop-2, 50%) + var(--border-trace-band-3, 0.25) *
          var(--border-trace-progress, 0%)
      ),
    transparent
      calc(
        var(--border-trace-stop-2, 50%) + var(--border-trace-band-3, 0.25) *
          var(--border-trace-progress, 0%)
      ),
    transparent var(--border-trace-stop-3, 75%),
    /* BR → BL (bottom edge) */ #fff var(--border-trace-stop-3, 75%),
    #fff
      calc(
        var(--border-trace-stop-3, 75%) + var(--border-trace-band-4, 0.25) *
          var(--border-trace-progress, 0%)
      ),
    transparent
      calc(
        var(--border-trace-stop-3, 75%) + var(--border-trace-band-4, 0.25) *
          var(--border-trace-progress, 0%)
      ),
    transparent 100%
  );
}
.border-trace-anim-5:hover::before {
  --border-trace-progress: 100%;
}

/* ============================================================================
   Spotlight Cards — "Polarity Inversion" Hover Cascade

   Two side-by-side Elementor containers sit at INVERTED palettes at rest:
     • Card A  →  dark pill (accent bg, white icon circle + text)
     • Card B  →  light pill (white bg, accent icon circle + text)

   On hover, each card flips to the OPPOSITE palette with a cascade of
   orchestrated micro-animations. The card lifts and scales, the M-logo
   icon circle spins 360° with a ring-glow and colour-swap, the title
   slides right and opens its letter-spacing, the description crossfades,
   the divider line flips colour, and the six checklist items stagger in
   from the left — each check circle spinning and swapping palette as
   its row arrives. Hover-out reverses the palette and position; stagger
   only applies on hover-in so the retraction snaps back cleanly.

   Apply ONE custom class per card on its .e-con container:
     .spotlight-card-dark   → DARK-at-rest card (inverts to light)
     .spotlight-card-light  → LIGHT-at-rest card (inverts to dark)

   Colour contract (consistent with the rest of this stylesheet):
     --e-global-color-accent = dark navy; --white-color = white.
     No black anywhere.
   ============================================================================ */

/* --- Card shell: positioning context, lift motion, palette flip --- */
.spotlight-card-dark,
.spotlight-card-light {
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transform: translateY(0) scale(1) !important;
  transform-origin: center center !important;
  transition:
    background-color 0.55s ease,
    transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1.25),
    box-shadow 0.55s ease,
    border-color 0.45s ease !important;
}

/* Lift + palette flip */
.spotlight-card-dark:hover,
.spotlight-card-light:hover {
  transform: translateY(-10px) scale(1.012) !important;
}
.spotlight-card-dark:hover {
  background-color: var(--white-color, #fff) !important;
  border-color: var(--e-global-color-accent) !important;
  box-shadow: 0 28px 60px -20px rgba(15, 30, 60, 0.5) !important;
}
.spotlight-card-light:hover {
  background-color: var(--e-global-color-accent) !important;
  border-color: var(--white-color, #fff) !important;
  box-shadow: 0 28px 60px -20px rgba(15, 30, 60, 0.55) !important;
}

/* --- Header: M-logo icon circle (stacked view) --- */
.spotlight-card-dark .elementor-icon-box-icon .elementor-icon,
.spotlight-card-light .elementor-icon-box-icon .elementor-icon {
  transition:
    transform 0.75s cubic-bezier(0.4, 0.1, 0.2, 1.4),
    background-color 0.5s ease,
    color 0.5s ease,
    box-shadow 0.5s ease !important;
}
.spotlight-card-dark .elementor-icon-box-icon .elementor-icon svg,
.spotlight-card-light .elementor-icon-box-icon .elementor-icon svg {
  transition: fill 0.5s ease !important;
}

.spotlight-card-dark:hover .elementor-icon-box-icon .elementor-icon {
  transform: rotate(360deg) scale(1.08) !important;
  background-color: var(--e-global-color-accent) !important;
  color: var(--white-color, #fff) !important;
  box-shadow:
    0 0 0 4px rgba(15, 30, 60, 0.12),
    0 10px 22px -10px rgba(15, 30, 60, 0.5) !important;
}
.spotlight-card-light:hover .elementor-icon-box-icon .elementor-icon {
  transform: rotate(360deg) scale(1.08) !important;
  background-color: var(--white-color, #fff) !important;
  color: var(--e-global-color-accent) !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.2),
    0 10px 22px -10px rgba(255, 255, 255, 0.45) !important;
}

/* --- Header: title ("Lorem Ipsum" h3) --- */
.spotlight-card-dark .elementor-icon-box-content,
.spotlight-card-light .elementor-icon-box-content {
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1.2) !important;
}
.spotlight-card-dark:hover .elementor-icon-box-content,
.spotlight-card-light:hover .elementor-icon-box-content {
  transform: translateX(4px) !important;
}

.spotlight-card-dark .elementor-icon-box-title,
.spotlight-card-dark .elementor-icon-box-title *,
.spotlight-card-light .elementor-icon-box-title,
.spotlight-card-light .elementor-icon-box-title * {
  transition: color 0.5s ease, letter-spacing 0.55s ease !important;
}
.spotlight-card-dark:hover .elementor-icon-box-title,
.spotlight-card-dark:hover .elementor-icon-box-title * {
  color: var(--e-global-color-accent) !important;
  letter-spacing: 0.035em !important;
}
.spotlight-card-light:hover .elementor-icon-box-title,
.spotlight-card-light:hover .elementor-icon-box-title * {
  color: var(--white-color, #fff) !important;
  letter-spacing: 0.035em !important;
}

/* --- Description paragraph --- */
.spotlight-card-dark .elementor-widget-text-editor,
.spotlight-card-dark .elementor-widget-text-editor *,
.spotlight-card-light .elementor-widget-text-editor,
.spotlight-card-light .elementor-widget-text-editor * {
  transition: color 0.5s ease !important;
}
.spotlight-card-dark:hover .elementor-widget-text-editor,
.spotlight-card-dark:hover .elementor-widget-text-editor * {
  color: var(--e-global-color-accent) !important;
}
.spotlight-card-light:hover .elementor-widget-text-editor,
.spotlight-card-light:hover .elementor-widget-text-editor * {
  color: var(--white-color, #fff) !important;
}

/* --- Divider line ---
   No Divider widget exists in the markup, so the horizontal rule between
   the description and the checklist is rendered by a border-top on the
   icon-list widget's container. Flip its colour on hover too. */
.spotlight-card-dark .elementor-widget-icon-list > .elementor-widget-container,
.spotlight-card-light .elementor-widget-icon-list > .elementor-widget-container {
  transition: border-color 0.5s ease !important;
}
.spotlight-card-dark:hover .elementor-widget-icon-list > .elementor-widget-container {
  border-color: var(--e-global-color-accent) !important;
}
.spotlight-card-light:hover .elementor-widget-icon-list > .elementor-widget-container {
  border-color: var(--white-color, #fff) !important;
}

/* --- Checklist items: staggered cascade --- */
.spotlight-card-dark .elementor-icon-list-item,
.spotlight-card-light .elementor-icon-list-item {
  transition:
    transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1.2),
    color 0.5s ease !important;
}
.spotlight-card-dark .elementor-icon-list-item *,
.spotlight-card-light .elementor-icon-list-item * {
  transition:
    transform 0.75s cubic-bezier(0.4, 0.1, 0.2, 1.3),
    color 0.5s ease !important;
}

.spotlight-card-dark:hover .elementor-icon-list-item {
  transform: translateX(8px) !important;
}
.spotlight-card-dark:hover .elementor-icon-list-item,
.spotlight-card-dark:hover .elementor-icon-list-item * {
  color: var(--e-global-color-accent) !important;
}

.spotlight-card-light:hover .elementor-icon-list-item {
  transform: translateX(8px) !important;
}
.spotlight-card-light:hover .elementor-icon-list-item,
.spotlight-card-light:hover .elementor-icon-list-item * {
  color: var(--white-color, #fff) !important;
}

/* Spin each check-circle (Font Awesome <i>) 360° as its row arrives. */
.spotlight-card-dark:hover .elementor-icon-list-icon i,
.spotlight-card-light:hover .elementor-icon-list-icon i {
  transform: rotate(360deg) !important;
}

/* Per-item stagger — delays the <li> transform/colour AND every descendant
   transform (so the icon spin times with its parent row). transition-delay
   set inside :hover applies only on hover-in; on hover-out the non-hover
   state has no delay so the card retracts all together cleanly. */
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(1),
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(1) *,
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(1),
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(1) * {
  transition-delay: 0.08s !important;
}
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(2),
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(2) *,
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(2),
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(2) * {
  transition-delay: 0.14s !important;
}
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(3),
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(3) *,
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(3),
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(3) * {
  transition-delay: 0.20s !important;
}
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(4),
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(4) *,
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(4),
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(4) * {
  transition-delay: 0.26s !important;
}
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(5),
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(5) *,
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(5),
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(5) * {
  transition-delay: 0.32s !important;
}
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(6),
.spotlight-card-dark:hover .elementor-icon-list-items > li:nth-child(6) *,
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(6),
.spotlight-card-light:hover .elementor-icon-list-items > li:nth-child(6) * {
  transition-delay: 0.38s !important;
}