.spin-image-tri {
  position: relative;
  overflow: hidden;
}
.spin-image-tri::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 65%;              
  width: 45vw;             
  height: 45vw;            
  max-width: 1000px;       
  max-height: 1000px;
  background-image: url('/wp-content/uploads/2026/08/Background-Graphic-4.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  animation: roll-bg-tri 12s ease-in-out infinite;
  z-index: 0;
}
.spin-image-tri > .e-con-inner {
  position: relative;
  z-index: 1;
}
@keyframes roll-bg-tri {
  0%   { transform: rotate(-25deg); }
  50%  { transform: rotate(25deg); }
  100% { transform: rotate(-25deg); }
}
/* Large desktop / 1440px range: sits between your base rule and tablet breakpoint */
@media (max-width: 1600px) and (min-width: 1025px) {
  .spin-image-tri::before {
    width: 48vw;
    height: 48vw;
    top: -10%;
    left: 65%;
  }
}
/* Tablet: shrink it down and reposition */
@media (max-width: 1024px) {
  .spin-image-tri::before {
    width: 60vw;
    height: 60vw;
    top: -5%;
    right: -10%;
  }
}
/* Mobile: shrink further, or push it behind content more, or hide entirely */
@media (max-width: 767px) {
  .spin-image-tri::before {
    width: 90vw;
    height: 90vw;
    top: 0;
    right: -20%;
    opacity: 0.5;
  }
}
/* Homepage*/
.spin-image {
  position: relative;
  overflow: hidden;
}

.spin-image::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 65%;              
  width: 45vw;             
  max-width: 1000px;       
  max-height: 1000px;
  background-image: url('/wp-content/uploads/2026/08/Background-Graphic.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  animation: spin-bg 100s linear infinite;
  z-index: 0;
}

.spin-image > .e-con-inner {
  position: relative;
  z-index: 1;
}

@keyframes spin-bg {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 1600px) and (min-width: 1025px) {
  .spin-image::before {
    width: 48vw;
    height: 48vw;
    top: -10%;
    left: 65%;
  }
}
/* Tablet: shrink it down and reposition */
@media (max-width: 1024px) {
  .spin-image::before {
    width: 60vw;
    height: 60vw;
    top: -5%;
    right: -10%;
  }
}

/* Mobile: shrink further, or push it behind content more, or hide entirely */
@media (max-width: 767px) {
  .spin-image::before {
    width: 90vw;
    height: 90vw;
    top: 0;
    right: -20%;
    opacity: 0.5;   
  }
}
.spin-image-circle {
  position: relative;
  overflow: hidden;
}
/* Circle version */
.spin-image-circle::before {
  content: "";
  position: absolute;
  top: -13%;
  left: 65%;              
  width: 42vw;             
  max-width: 1000px;       
  max-height: 1000px;
  background-image: url('/wp-content/uploads/2026/08/Background-Graphic-2.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  animation: spin-bg-circle 100s linear infinite;
  z-index: 0;
}

.spin-image-circle > .e-con-inner {
  position: relative;
  z-index: 1;
}

@keyframes spin-bg-circle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 1600px) and (min-width: 1025px) {
  .spin-image-circle::before {
    width: 48vw;
    height: 48vw;
    top: -10%;
    left: 65%;
  }
}
/* Tablet: shrink it down and reposition */
@media (max-width: 1024px) {
  .spin-image-circle::before {
    width: 60vw;
    height: 60vw;
    top: -15%;
    right: -10%;
  }
}

/* Mobile: shrink further, or push it behind content more, or hide entirely */
@media (max-width: 767px) {
  .spin-image-circle::before {
    width: 90vw;
    height: 90vw;
    top: -10;
    right: -20%;
    opacity: 0.5;   
  }
}
/* Slide*/
.bg-image-animation {
    clip-path: inset(0 0 0 100%); 
    animation: slideleft 3s forwards; 
}
@keyframes slideleft {
    0% {
        clip-path: inset(0 0 0 100%); 
    }
    100% {
        clip-path: inset(0 0 0 0); 
        background-color: #fff;
    }
}
/* Slide on hover - right to left */
.btn-slide {
    position: relative;
    overflow: hidden;
}
.btn-slide .elementor-button {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn-slide .elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff; /* overlay color - change as needed */
    clip-path: inset(0 0 0 100%); /* hidden, tucked to the left */
    transition: clip-path 0.4s ease;
    z-index: -1;
}
.btn-slide .elementor-button:hover::before {
    clip-path: inset(0 0 0 0); /* revealed, grows starting from the right edge toward the left */
}
.btn-slide .elementor-button:hover .elementor-button-content-wrapper,
.btn-slide .elementor-button:hover .elementor-button-text {
    color: #40003B; /* text color on hover, adjust to match your overlay */
} 

/* Slide on hover with icon position swap - color slides left to right */
.btn-slide-icon {
    position: relative;
    overflow: hidden;
}

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

.btn-slide-icon .elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    clip-path: inset(0 100% 0 0); /* hidden, tucked to the right */
    transition: clip-path 0.4s ease;
    z-index: -1;
}

.btn-slide-icon .elementor-button:hover::before {
    clip-path: inset(0 0 0 0); /* revealed, left to right sweep */
}

.btn-slide-icon .elementor-button:hover .elementor-button-content-wrapper,
.btn-slide-icon .elementor-button:hover .elementor-button-text {
    color: #40003B;
}

/* Make content wrapper flex so icon/text order can be controlled */
.btn-slide-icon .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Default order: icon first, text second */
.btn-slide-icon .elementor-button-icon {
    order: 1;
    transition: transform 0.3s ease;
}

.btn-slide-icon .elementor-button-text {
    order: 2;
}

/* On hover: icon moves after the text */
.btn-slide-icon .elementor-button:hover .elementor-button-icon {
    order: 3;
}