.bp-element-counters{
    &.layout-1 {
        .counter-boxes{
            display: flex;
            justify-content: center;
            align-items: center;

            .item {
                flex-grow: 1;
                position: relative;
                text-align: center;
                &:before {
                  content: '';
                  display: block;
                  width: 1px;
                  height: 62px;
                  background: #ebebeb;
                  transform: rotateZ(15deg);
                  position: absolute;
                  top: 6px;
                  right: 0;
                }
                &:last-child {
                    &:before {
                        display: none;
                    }
                }
                .number {
                    display: block;
                    font-weight: 500;
                    font-size: 36px;
                    line-height: 1.2;
                    color: #1e1e1e;
                    text-transform: uppercase;
                }

                .text {
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 1.444444;
                    color: #fff;
                }
                .title {
                    display: block;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 1.625;
                    color: #6e6e6e;
                }
            }

            &.align-left {
              .item {
                .number,
                .text {
                  text-align: left;
                }
              }
            }

            &.align-center {
              .item {
                .number,
                .text {
                  text-align: center;
                }
              }
            }

            &.align-right {
              .item {
                .number,
                .text {
                  text-align: right;
                }
              }
            }

            &.show-line {
              .item {

                &:before {
                  content: '';
                  display: block;
                  width: 2px;
                  height: 86px;
                  background: rgba(149, 149, 149, .25);
                  transform: rotateZ(28deg);
                  position: absolute;
                  top: 10px;
                  right: 0;
                }

              }
            }
      }

        &.color-2 {
            .counter-boxes {
                .item {
                    &:before {
                        background: #7cf9c5;
                    }
                }
            }
        }
    }
}
// responsive
/*---------------------------------------------*/
.responsive {
    @media (max-width: 767px) {
        .bp-element-counters {
            &.layout-1 {
                .item {
                    .number {
                        font-size: 30px;
                    }

                    .text {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    @media (max-width: 575px) {
        .bp-element-counters {
            &.layout-1 {
                .counter-boxes {
                    flex-wrap: wrap;
                    .item {
                        width: 50%;
                        margin-bottom: 25px;
                        margin-top: 25px;

                        &::before {
                            display: none;
                        }
                    }
                }

            }
        }
    }
}


