$light-blue: #6C8DE3;
$dark-blue: #2351A5;
$card-p: 120px;
.infographic{
  background: $light-blue;
  background: -moz-linear-gradient(left,  rgba($light-blue,1) 0%, rgba($dark-blue,1) 100%);
  background: -webkit-linear-gradient(left,  rgba($light-blue,1) 0%,rgba($dark-blue,1) 100%);
  background: linear-gradient(to right,  rgba($light-blue,1) 0%,rgba($dark-blue,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$light-blue', endColorstr='$dark-blue',GradientType=1 );
  .card{
    background-color: transparent;
    padding: $card-p 0;
    &:before{
      content: "";
      background-color: $white;
      width: calc(100% - 50%);
      @include border-radius(40px 0 0 40px);
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin: calc(#{$card-p}) 0;
      z-index: 1;
    }
    .align-self-center{
      align-self: initial !important;
    }
    >.container{
      position: relative;
      &::after{
        content: '';
        border-bottom: 1px dashed $white;
        width: calc(100% - 50%);
        position: absolute;
        bottom: -$card-p;
        right: 0;
        left: 0;
        margin: 0 auto;
      }
    }
    .right-info{
      &::after{
        content: '';
        border-left: 1px dashed $white;
        width: 1px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 50%;
        height: calc(100% + #{$card-p*2});
        margin-top: -$card-p;
      }
    }
    
    .infographic-image{
      display: block;
    }
    .infographic-content{
      padding: 45px 0 45px 35px;
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      align-items: center;
      .section-heading{
        padding-bottom: 20px;
      }
      .section-sub-heading{
        padding-bottom: 20px;
      }
      .info-para{
        margin-bottom: 0;
      }
    }

    &:nth-child(even){
      &:before{
        content: "";
        @include border-radius(0 40px 40px 0);
        right: auto;
        left: 0;        
      }
      >.container{
        .row{
          .info-left-img{
            order: 2;
          }
          .right-info{
            order: 1;
          }
        }
        .infographic-content{
          padding-left: 0;
          padding-right: 35px;
        }
      }
    }
    &:last-child{
      >.container{
        &:after{
          content: none;
        }
      }
    }
  }
}