.infographic section {
   padding: 16px 0px !important;
   overflow:visible !important;
}
.infographic .circle {
   width: 100%;
   aspect-ratio: 1 / 1 !important;
   border-radius: 50%;
   border: 7px double;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   align-items: center;
   padding: 40px;
   margin: 0px 0;

}
.infographic h6 {
    font-size: calc(.8rem + .1vw);
}
.infographic article {
   
   margin-bottom: 20px;
   cursor: pointer;
   position: relative;
   overflow: visible;
}
.infographic article header {
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
   overflow: visible;
}

.infographic article:hover header .icon-container {
   transform: scale(1.2);
   overflow: visible;
}
.infographic article.active header .icon-container {
   transform: none;
}
.infographic .icon-circle {
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 32px; /* or override with utility classes */
   background-color: rgba(0, 0, 0, 0.05); /* adjust as needed */
}
.infographic .icon-container {
   display: flex;
   font-size: 2em;
   border-radius: 50%;
   background-clip: padding-box;
   transition: transform 0.4s;
   border: 8px solid #ffffff;
   margin: -16px 0 -16px -16px;
   width: 60px;
   height: 60px;
   align-items: center;
   justify-content: center;
   padding:28px;
}

.infographic article .body {
   background: var(--bgColor);
   padding: 0 20px;
   border-bottom-right-radius: 30px;
   border-bottom-left-radius: 30px;
   max-height: 0;
   transition: max-height 0.5s, padding 0.5s;
   overflow: hidden;
}
.infographic article .body .btn {
   padding: 3px 10px;
   text-transform: uppercase;
}

.infographic :nth-child(even) article header {
   /* flex-flow: row-reverse; */
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
}

.infographic section:nth-child(odd) article.active header {
   border-bottom-right-radius: 0;
}
.infographic section:nth-child(even) article.active header {
   border-bottom-left-radius: 0;
}

.infographic article.active .body {
   padding: 20px;
   max-height: 300px;
   border: 1px solid;
}


@media (max-width: 992px) {
   .infographic .circle {
      border:none !important;
      width: auto !important;
      aspect-ratio: auto !important;
      padding: 0px !important;
      margin: 0px !important;
   }

   .infographic article {
   left: auto !important;
   right: auto !important;
   }
/* .infographic h6 {
   text-align: left !important;
}; */

   .infographic :nth-child(even) article header {
      flex-flow: row !important;
      border-top-right-radius: 30px !important;
      border-bottom-right-radius: 30px !important;
   }
   .infographic article.active header {
      border-bottom-right-radius: 0px !important;
   }

   .infographic .display-1 {
      font-size: 1.5rem !important;
   }
}


/* .infographic article[data-step="3"],
.infographic article[data-step="6"] {
  left: 24px;
}


.infographic article[data-step="9"],
.infographic article[data-step="11"] {
  left: 16px;
} */

.lstep-0 {
   left: 0px;
}
.lstep-1 {
   left: 8px;
}
.lstep-2 {
   left: 16px;
}
.lstep-3 {
   left: 24px;
}
.lstep-4 {
   left: 32px;
}

.rstep-0 {
   right: 0px;
}
.rstep-1 {
   right: 8px;
}
.rstep-2 {
   right: 16px;
}
.rstep-3 {
   right: 24px;
}
.rstep-4 {
   right: 32px;
}


.o-blue {
   border-color: rgba(41, 53, 115, 1);
}
.b-blue {
   background-color: #e3e5ed;
}
.t-blue {
   color: rgba(41, 53, 115, 1);
}

.o-yellow {
   border-color: rgba(237, 177, 20, 1);
}
.b-yellow {
   background-color: #f7f2e3;
}
.t-yellow {
   color: rgba(237, 177, 20, 1);
}

.o-green {
   border-color: rgba(84, 178, 109, 1);
}
.b-green {
   background-color: #e8f2ec;
}
.t-green {
   color: rgba(84, 178, 109, 1);
}

.o-purple {
   border-color: rgba(106, 118, 166, 1);
}
.b-purple {
   background-color: rgba(106, 118, 166, var(--bs-bg-opacity));
}
.t-purple {
   color: rgba(106, 118, 166, 1);
}

.o-red {
   border-color: rgba(178, 36, 38, 1);
}
.b-red {
   background-color: rgba(178, 36, 38, var(--bs-bg-opacity));
}
.t-red {
   color: rgba(178, 36, 38, 1);
}

.o-orange {
   border-color: rgba(255, 204, 72, 1);
}
.b-orange {
   background-color: rgba(255, 204, 72, var(--bs-bg-opacity));
}
.t-orange {
   color: rgba(255, 204, 72, 1);
}

.o-pink {
   border-color: rgba(178, 36, 38, 1);
}
.b-pink {
   background-color: rgba(222, 171, 153, var(--bs-bg-opacity));
}
.t-pink {
   color: rgba(178, 36, 38, 1);
}