{% set circleColor = '#F7761F' %} {# defines variable and assigns HEX color #}

.custom__hero .pwr--flip-container{
 display: flex;
/*  align-items: center; */
}



.custom__hero .pwr-sec-split__img{
/*   aspect-ratio: 1/1; */
/*   height: 100% !important; */
}

.custom__hero .pwr-background-img{
  border-radius: 100%;
  position: break-word;
  
}

.custom__hero.pwr-sec-split, .custom__hero .pwr-sec-split__left, .custom__hero .pwr-sec-split__right{
  overflow: visible !important;
  word-break: break-word;
}

.custom__hero .pwr-sec-split__img::before{
  content: "";
  position: absolute;
  top: -40px;   /* Pulls it up */
  right: -20px; /* Pulls it right */
  width: 50%;
  height: 50%;
  background-color: ; /* Your circle color */
  border-radius: 50%;
  z-index: -1; /* Behind the image */
}
  .custom__hero.pwr-sec-split .pwr-sec-split__content {
    padding: 0 !important; 
  }
.custom__hero .pwr-sec-split__right:has(.pwr-sec-split__img) {
aspect-ratio: 1/1;
  height: 100%;
  margin: auto auto auto 40px;
  border-radius: 50%;
}

.custom__hero .pwr-sec-split__img{
  
  height: 100% !important;
}

.custom__hero .pwr-sec-split__left{
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 40px;
} 
.custom__hero .pwr-sec-split__right{
  margin-left: 40px;
}

@media (max-width:991px) {
  
  .custom__hero .pwr--flip-container{
  flex-direction: column;
}
  
  .custom__hero .pwr-sec-split__right:has(.pwr-sec-split__img) {
aspect-ratio: 1/1;
  margin: 80px 0px;
}
  .custom__hero .pwr-sec-split__left{
  margin-right: 0px;
} 
.custom__hero .pwr-sec-split__right{
  margin-left: 0px;
}
}

/* Use the unique name to scope the style to this specific module instance */
    .pwr-img-green::before {
      background-color: #2EB67D;
    }

    .pwr-img-blue::before {
      background-color: #009DEA;
    }

    .pwr-img-red::before {
      background-color: #E51754;
    }