<div class="example-hero"></div>

<div class="container-animation">
  <div class="wrap">
    <h3 class="title-circle">We</h3>
  <svg class="circle-left" id="left-circle" viewBox="0 0 180 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 7.26966e-07C18 3.24525e-06 18 -1.79132e-06 18 7.26966e-07C18 39.7645 50.2355 72 90 72C129.765 72 162 39.7645 162 7.26966e-07H18Z" fill="#F4DE4C"/>
<path d="M0 7.34984e-07C0 -1.81107e-06 0 3.28104e-06 0 7.34984e-07C0 49.7056 40.2944 90 90 90C139.706 90 180 49.7056 180 8.36438e-06H175C175 46.9442 136.944 85 90 85C43.0558 85 5 46.9442 5 8.36438e-06C5 5.82861e-06 5 1.09001e-05 5 8.36438e-06L0 7.34984e-07Z" fill="#F4DE4C"/>
</svg>
<div class="container-card-icons">
  <div class="card-icon top-circle left">
  <div class="icon">
    <svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0001 45.8333C36.506 45.8333 45.8334 36.5059 45.8334 25C45.8334 13.494 36.506 4.16663 25.0001 4.16663C13.4941 4.16663 4.16675 13.494 4.16675 25C4.16675 36.5059 13.4941 45.8333 25.0001 45.8333ZM20.8334 12.5H14.5834V35.4166H20.8334V12.5ZM22.9167 16.6666H29.1667V35.4166H22.9167V16.6666ZM37.5001 22.9166H31.2501V35.4166H37.5001V22.9166Z"/>
    </svg>
  </div>
    <div class="icon-text">
      Integrate Energy Storage Hardware
    </div>
  </div>
  <div class="card-icon">
  <div class="icon">
    <svg width="50" height="50" viewBox="0 0 50 50"  xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0001 45.8333C36.506 45.8333 45.8334 36.5059 45.8334 25C45.8334 13.494 36.506 4.16663 25.0001 4.16663C13.4941 4.16663 4.16675 13.494 4.16675 25C4.16675 36.5059 13.4941 45.8333 25.0001 45.8333ZM20.8334 12.5H14.5834V35.4166H20.8334V12.5ZM22.9167 16.6666H29.1667V35.4166H22.9167V16.6666ZM37.5001 22.9166H31.2501V35.4166H37.5001V22.9166Z"/>
    </svg>
  </div>
    <div class="icon-text">
      Operate AI Powered Software
    </div>
  </div>
  <div class="card-icon top-circle right">
  <div class="icon">
    <svg width="50" height="50" viewBox="0 0 50 50"  xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0001 45.8333C36.506 45.8333 45.8334 36.5059 45.8334 25C45.8334 13.494 36.506 4.16663 25.0001 4.16663C13.4941 4.16663 4.16675 13.494 4.16675 25C4.16675 36.5059 13.4941 45.8333 25.0001 45.8333ZM20.8334 12.5H14.5834V35.4166H20.8334V12.5ZM22.9167 16.6666H29.1667V35.4166H22.9167V16.6666ZM37.5001 22.9166H31.2501V35.4166H37.5001V22.9166Z"/>
    </svg>
  </div>
    <div class="icon-text">
      Offer Creative Financing
    </div>
  </div>
</div>
</div>

<div class="wrap">
  <h3 class="title-circle">You</h3>
  <svg class="circle-right" id="right-circle" viewBox="0 0 180 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 7.26966e-07C18 3.24525e-06 18 -1.79132e-06 18 7.26966e-07C18 39.7645 50.2355 72 90 72C129.765 72 162 39.7645 162 7.26966e-07H18Z" fill="#F4DE4C"/>
<path d="M0 7.34984e-07C0 -1.81107e-06 0 3.28104e-06 0 7.34984e-07C0 49.7056 40.2944 90 90 90C139.706 90 180 49.7056 180 8.36438e-06H175C175 46.9442 136.944 85 90 85C43.0558 85 5 46.9442 5 8.36438e-06C5 5.82861e-06 5 1.09001e-05 5 8.36438e-06L0 7.34984e-07Z" fill="#F4DE4C"/>
</svg>
  <div class="container-card-icons">
  <div class="card-icon top-circle left">
  <div class="icon">
    <svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0001 45.8333C36.506 45.8333 45.8334 36.5059 45.8334 25C45.8334 13.494 36.506 4.16663 25.0001 4.16663C13.4941 4.16663 4.16675 13.494 4.16675 25C4.16675 36.5059 13.4941 45.8333 25.0001 45.8333ZM20.8334 12.5H14.5834V35.4166H20.8334V12.5ZM22.9167 16.6666H29.1667V35.4166H22.9167V16.6666ZM37.5001 22.9166H31.2501V35.4166H37.5001V22.9166Z"/>
    </svg>
  </div>
    <div class="icon-text">
      Integrate Energy Storage Hardware
    </div>
  </div>
  <div class="card-icon">
  <div class="icon">
    <svg width="50" height="50" viewBox="0 0 50 50"  xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0001 45.8333C36.506 45.8333 45.8334 36.5059 45.8334 25C45.8334 13.494 36.506 4.16663 25.0001 4.16663C13.4941 4.16663 4.16675 13.494 4.16675 25C4.16675 36.5059 13.4941 45.8333 25.0001 45.8333ZM20.8334 12.5H14.5834V35.4166H20.8334V12.5ZM22.9167 16.6666H29.1667V35.4166H22.9167V16.6666ZM37.5001 22.9166H31.2501V35.4166H37.5001V22.9166Z"/>
    </svg>
  </div>
    <div class="icon-text">
      Operate AI Powered Software
    </div>
  </div>
  <div class="card-icon top-circle right">
  <div class="icon">
    <svg width="50" height="50" viewBox="0 0 50 50"  xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0001 45.8333C36.506 45.8333 45.8334 36.5059 45.8334 25C45.8334 13.494 36.506 4.16663 25.0001 4.16663C13.4941 4.16663 4.16675 13.494 4.16675 25C4.16675 36.5059 13.4941 45.8333 25.0001 45.8333ZM20.8334 12.5H14.5834V35.4166H20.8334V12.5ZM22.9167 16.6666H29.1667V35.4166H22.9167V16.6666ZM37.5001 22.9166H31.2501V35.4166H37.5001V22.9166Z"/>
    </svg>
  </div>
    <div class="icon-text">
      Offer Creative Financing
    </div>
  </div>
</div>
</div>

</div>

* {
  box-sizing: border-box;
}
:root {
  --size-circle: 144px;
}
body {
  overflow: hidden;
}
.example-hero {
  background-color: #F4DE4C;
  height: 70px;
}
.container-animation {
  display: flex;
}
.container-animation > * {
  width: 50%;
}
.container-card-icons {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 140px;
  color: transparent;
  transition: all 500ms ease; 
}
.icon{
  transition: all 500ms ease; 
  fill: transparent;
}
#left-circle:hover ~ .container-card-icons{
  color: #4C484A;
}
#left-circle:hover ~ .container-card-icons .icon{
  fill: #4C484A;
}
#right-circle:hover ~ .container-card-icons{
  color: #4C484A;
}
#right-circle:hover ~ .container-card-icons .icon{
  fill: #4C484A;
}
.card-icon {
  padding: 1rem;
  width: 164px;
  text-align: center;
  font-size: 14px;
}
.card-icon.top-circle{
  margin-top: -100px;
}
.card-icon.top-circle.left {
  margin-right: -50px;
}
.card-icon.top-circle.right {
  margin-left: -50px;
}
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.title-circle {
  position: absolute;
  width: 100%;
  z-index: 10;
  text-align: center;
  top: -30px;
  left: 0;
}
.circle-left {
  transition: all 500ms ease;
  width: 144px;
  animation-name: circle-left;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.circle-right {
  transition: all 500ms ease;
  width: 144px;
  animation-name: circle-right;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes circle-left {
  100% {
    transform: scale(1.05);
  }
}
@keyframes circle-right {
  100% {
    transform: scale(1.05);
  }
}
.circle-left-second-animation {
  animation-name: scale-left;
  animation-duration: 500ms;
  width: 100%; /*no eliminar esto*/
}
.circle-right-second-animation {
  animation-name: scale-right;
  animation-duration: 500ms;
  width: 100%; /*no eliminar esto*/
}

  

@keyframes scale-left {
  0% {
    width: 144px;
  }
  100% {
    width: 100%;
  }
}
@keyframes scale-right {
  0% {
    width: 144px;
  }
  100% {
    width: 100%;
  }
}

/* Breackpoins  1200px 768px*/
@media screen and (max-width: 1200px) {
  .container-card-icons {
 
    top: 100px; 
  }
}
@media screen and (max-width: 992px) {
  .circle-right, .circle-left {
    width: 80px;
  }
  .container-card-icons {
    
    top: 70px; 
  }
  .card-icon.top-circle{
    margin-top: -80px;
  }
  .card-icon.top-circle.left {
    margin-right: -50px;
  }
  .card-icon.top-circle.right {
    margin-left: -50px;
  }
}

let leftCircle = document.getElementById("left-circle");
let rightCircle = document.getElementById("right-circle");

//functions for circle left
const removeClassLeft = () => {
  leftCircle.classList.remove("circle-left");
  leftCircle.classList.add("circle-left-second-animation");
}
const addClassLeft = () => {
  leftCircle.classList.remove("circle-left-second-animation");
  leftCircle.classList.add("circle-left");
}


//functions for circle right
const removeClassRight = () => {
  rightCircle.classList.remove("circle-right");
  rightCircle.classList.add("circle-right-second-animation");
}
const addClassRight = () => {
  rightCircle.classList.remove("circle-right-second-animation");
  rightCircle.classList.add("circle-right");
}

// call to functions
leftCircle.addEventListener("mouseover", removeClassLeft);
leftCircle.addEventListener("mouseout", addClassLeft);
rightCircle.addEventListener("mouseover", removeClassRight);
rightCircle.addEventListener("mouseout", addClassRight);