.mt-sd-hero-banner-wrapper {
  min-height: 570px;
     display: grid;
    grid-template-columns: 2fr 3fr;
}
/* .mt-sd-hero-banner-wrapper > div {
  width: 50%;
} */
/* .mt-sd-hero-banner-image {
  position: relative;
} */
/* .mt-sd-hero-banner-image img {
    position: absolute;
    bottom: 0;
    height: 108%;
    object-fit: cover;
} */
.mt-sd-hero-banner-image {
  display: flex;
    align-items: center;
    margin-right: 5%;
}
.mt-sd-hero-banner-image img {
    object-fit: cover;
}
.mt-sd-hero-banner-content {
    display: flex;
    align-content: center;
   flex-flow: row wrap;
      padding: 40px 0px 40px 5%;
    margin-left: 4%;
    margin-right: 4%;
}

.mt-sd-hero-banner-content div {
  width:100%;
}

/* Button CTA */
.mt-sd-hero-banner-cta {
  margin-top:20px;
}



/* Animation CSS */


.mt-anim-s3-pie-charts div {
background-color: #efefef;
border-radius: 50%;
margin: 15px 10px;
width: 54px;
height: 54px;
position: relative;
}
.mt-pie-rotated {
position: absolute;
top: 0;
left: 0;
animation: pie-rotation 9s alternate infinite ease-in-out;
}

@keyframes pie-rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(55deg);
    }
}

/* .mt-anim-s3-pie-charts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
} */

.mt-hero-anim {
  position:relative;
  width:100%;
  display:flex;
  height:660px;
      max-width: 700px;
    margin: 0 auto;
}

.mt-anim-section-1 {
 position:absolute;
 top:32%;
 left:7%;
 width:220px;
 display:grid;
 gap:10px;
 z-index:1;
}
.mt-anim-section-1 > div {
  background:#fff;
  height:66px;
  border-radius:40px;
  box-shadow: 6px 3px 9px 1px #00000040;
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items:center;
  padding-left: 20px;
}
.mt-anim-section-2 {
  background: linear-gradient(180deg, #618FC3 0%, #91B0D5 51.04%, #C0D0E6 100%);
 position:absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 height:437px;
 border-radius:20px;
 display:flex;
 width:242px;
 padding:14px;
 box-shadow: 6px 3px 9px 1px #00000040;
}
.mt-anim-section-2 img {
  width:100%;
  object-fit:cover;
}

.mt-anim-section-3 {
 position:absolute;
 top:22%;
 right:2%;
 gap:10px;
 width:275px;
}

.mt-anim-s3-iaq {
  background:#fff;
  height:275px;
  border-radius:20px;
  margin-bottom:20px;
  display: grid;
  place-items: center;
}
.mt-anim-s3-pie-charts {
  background:#fff;
  border-radius:20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  padding: 0px 20px;
}


.graph-line-loop {
  width: 100px;
  overflow:hidden;
  box-shadow:none;
}
.graph-line-loop svg {
  animation: linear infinite;
  animation-name: run;
 animation-duration: 10s;
}
@keyframes run {
  0% {
    transform:translate(-25px, 0px);
  }
  50% {
    transform:translate(0px, 0px);
  }
  100% {
   transform:translate(25px, 0px);
  }
}

/* Graph lines section 1 */

/* number of images*/
.graph-line-loop {
    --d: 17s;
    /* duration */
    display: grid;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, #0000, #000 10% 90%, #0000);
  }
  
  .graph-line-loop > svg {
    grid-area: 1/1;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    animation: r var(--d) linear infinite;
  }
  
  .graph-line-loop > svg:nth-child(2) {
    animation-delay: calc(-0.3333333333*var(--d));
  }
  
  .graph-line-loop > svg:nth-child(3) {
    animation-delay: calc(-0.6666666667*var(--d));
  }
  
  @keyframes r {
    66.6666666667% {
      transform: translate(-200%);
    }
    66.6766666667% {
      transform: translate(100%);
    }
  }



/** Circle charts */
.circle-chart__circle {
  animation: circle-chart-fill 3s alternate infinite; /* 1 */ 
  transform: rotate(-90deg); /* 2, 3 */
  transform-origin: center; /* 4 */
}

.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
}

.stat-wrap {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
} 

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
  }
}

.absolute-center {
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Stat text */

span.stat::after {
  font: 300 23px Helvetica, arial;
  content: counter(count);
  animation: counter 3s alternate-reverse infinite;
  counter-reset: count 60;
  color:#618FC3;
}
.symbol-percentage {
  font: 300 23px Helvetica, arial;
    color:#618FC3;
}
span.sub-stat {
 display: block;
    font: 300 12px Helvetica, arial;
    text-align: center;
  color:#618FC3;
}

@keyframes counter {
  0% {
    counter-increment: count 1;
  }
  15% {
    counter-increment: count 2;
  }
  30% {
    counter-increment: count 3;
  }
  45% {
    counter-increment: count 4;
  }
  60% {
    counter-increment: count 5;
  }
  75% {
    counter-increment: count 6;
  }
  90% {
    counter-increment: count 7;
  }
  100% {
    counter-increment: count 8;
  }
}

/* Position circle charts */

.mt-animated-circle-charts {
  display:inline-block;
  position:relative;
}
.mt-animated-circle-charts g {
  font-family: Helvetica, arial;
}

/* Mobile styles */

@media screen and (max-width: 990px){
/*   .mt-sd-hero-banner-wrapper {
  border:1px solid red;
  } */
  
  .mt-sd-hero-banner-wrapper {
  grid-template-columns: 1fr;
}
  .mt-sd-hero-banner-wrapper>div {
    width:unset;
  }
  .mt-sd-hero-banner-wrapper {
flex-direction:column-reverse;
}
.mt-sd-hero-banner-content {
margin:0;
padding: 30px 20px 0px 20px;
}
.mt-sd-hero-banner-image {
 padding: 30px 20px 0px;
 margin-right:0;
}
 .mt-sd-hero-banner-image img {
  max-height: 340px;
    margin: 0 auto;
  }
  .mt-anim-section-1 {
left:2%;
  }
  .mt-hero-anim {
    height:570px;
  }
}

/* Smaller screen - resize anim */
@media screen and (max-width: 480px){
.mt-anim-section-1 {
top: 34%;
left: 0%;
    transform: scale(0.7);
}
.mt-anim-section-3 {
transform: scale(0.7);
    top: 16%;
    right: 0%;
}
  
}