/* ========================================
   BUTTON HOVER EFFECT
======================================== */

.btn-hover-effect .elementor-button {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* ARC FROM BOTTOM RIGHT */

.btn-hover-effect .elementor-button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;

  width: 250%;
  height: 300%;

  background-color: #522CC2;
  border-radius: 50%;

  transform: translate(50%, 50%) scale(0);
  transform-origin: bottom right;

  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  z-index: -1;
}

/* Hover Expansion */

.btn-hover-effect .elementor-button:hover::after {
  transform: translate(50%, 50%) scale(1);
}

/* ========================================
   BUTTON CONTENT ANIMATION
======================================== */

.btn-hover-effect .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
}

/* Smooth transitions */

.btn-hover-effect .elementor-button-text,
.btn-hover-effect .elementor-button-icon {
  transition: transform 0.35s ease;
}

/* Default position */

.btn-hover-effect .elementor-button-text {
  transform: translateX(0);
}

.btn-hover-effect .elementor-button-icon {
  transform: translateX(0);
}

/* Hover → move toward center */

.btn-hover-effect .elementor-button:hover
.elementor-button-text {
  transform: translateX(3px);
}

.btn-hover-effect .elementor-button:hover
.elementor-button-icon {
  transform: translateX(-3px);
}

/* ========================================
   BUTTON ICON ROTATION
======================================== */

.btn-hover-effect .elementor-button-icon {
  display: inline-flex;
}

.btn-hover-effect .elementor-button-icon i,
.btn-hover-effect .elementor-button-icon svg {
  transition: transform 0.4s ease;
  transform-origin: center center;
}

/* Rotate 45deg clockwise */

.btn-hover-effect .elementor-button:hover
.elementor-button-icon i,
.btn-hover-effect .elementor-button:hover
.elementor-button-icon svg {
  transform: rotate(45deg);
}

/* ========================================
   ICON HOVER EFFECT
   TARGET ONLY .elementor-icon
======================================== */

.icon-hover-effect .elementor-icon {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* ARC EFFECT */

.icon-hover-effect .elementor-icon::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;

  width: 300%;
  height: 300%;

  background-color: #522CC2;
  border-radius: 50%;

  transform: translate(50%, 50%) scale(0);
  transform-origin: bottom right;

  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  z-index: -1;
}

/* Hover Expansion */

.icon-hover-effect .elementor-icon:hover::after {
  transform: translate(50%, 50%) scale(1);
}

/* Keep SVG/Icon above effect */

.icon-hover-effect .elementor-icon svg,
.icon-hover-effect .elementor-icon i {
  position: relative;
  z-index: 2;
}