.elementor-36 .elementor-element.elementor-element-44347a3{--display:flex;--justify-content:flex-start;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.99;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36 .elementor-element.elementor-element-44347a3::before, .elementor-36 .elementor-element.elementor-element-44347a3 > .elementor-background-video-container::before, .elementor-36 .elementor-element.elementor-element-44347a3 > .e-con-inner > .elementor-background-video-container::before, .elementor-36 .elementor-element.elementor-element-44347a3 > .elementor-background-slideshow::before, .elementor-36 .elementor-element.elementor-element-44347a3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-36 .elementor-element.elementor-element-44347a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-36 .elementor-element.elementor-element-cb70fea{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-36 .elementor-element.elementor-element-cb70fea.elementor-element{--align-self:flex-start;}@media(max-width:767px){.elementor-36 .elementor-element.elementor-element-44347a3{--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}}@media(min-width:768px){.elementor-36 .elementor-element.elementor-element-44347a3{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-44347a3 *//* =========================================
   1. MAIN BUTTON CONTAINER
========================================= */
.custom-build-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 56px; /* Matches height of the ball */
  padding-left: 76px; /* 56px (ball) + 20px (gap) */
  padding-right: 0;
  text-decoration: none !important;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000;
  
  /* Animates text sliding (padding) and physical click (transform) */
  transition: padding 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s ease-out; 
}

/* =========================================
   2. PHYSICAL "PUSH" CLICK EFFECT
========================================= */
.custom-build-btn:active {
  transform: scale(0.95); /* Squishes the whole button inward by 5% on click */
}

/* =========================================
   3. THE ROLLING BALL & ICON
========================================= */
.custom-build-icon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2; /* Ensures the ball crosses IN FRONT of the text */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #f7701d; /* Starting orange */
  border-radius: 50%;
  color: #ffffff; /* White arrow */
  
  /* Animates the move, the color, and the roll */
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              background-color 0.6s ease, 
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-build-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5; 
}

/* =========================================
   4. THE TEXT
========================================= */
.custom-build-text {
  position: relative;
  z-index: 1; /* Sits behind the ball */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: #000; /* Starting text color */
  white-space: nowrap; /* Stops text from dropping to next line during animation */
  transition: color 0.6s ease;
}

/* =========================================
   5. HOVER ANIMATIONS
========================================= */

/* Shift text to the left by flipping the padding */
.custom-build-btn:hover {
  padding-left: 0;
  padding-right: 76px; 
}

/* Roll the ball to the right edge & change to Green */
.custom-build-btn:hover .custom-build-icon {
  left: calc(100% - 56px); /* Glides exactly to the right boundary */
  background-color: #008C69; /* New Green Color */
  transform: rotate(360deg); /* 1 full clockwise rotation (rolling) */
}

/* Change text to Green */
.custom-build-btn:hover .custom-build-text {
  color: #008C69; /* New Green Color */
}

/* =========================================
   6. MOBILE RESPONSIVENESS (Phones & Tablets)
========================================= */
@media (max-width: 768px) {
  
  /* Shrink button height and adjust spacing */
  .custom-build-btn {
    height: 44px; 
    padding-left: 56px; /* 44px (ball) + 12px (gap) */
  }
  
  /* Adjust hover spacing for mobile */
  .custom-build-btn:hover {
    padding-left: 0;
    padding-right: 56px; 
  }
  
  /* Shrink the ball */
  .custom-build-icon {
    width: 44px;
    height: 44px;
  }
  
  /* Adjust the roll distance for the smaller ball */
  .custom-build-btn:hover .custom-build-icon {
    left: calc(100% - 44px); 
  }
  
  /* Shrink the arrow icon */
  .custom-build-icon svg {
    width: 18px;
    height: 18px;
  }
  
  /* Shrink the text */
  .custom-build-text {
    font-size: 16px;
  }
}/* End custom CSS */