/*
    CSS Table of Sections
    --------------------------
    ** section_state
    --------------------------
    ** state_demo2
    --------------------------
    ** section__counter
    --------------------------
    **counter_about
    --------------------------
    

*/

/*-----------------------------
  section_state
-----------------------------*/
.section_state {
  position: relative;
  overflow: hidden;
  @include maxMobile {
    padding-top: 5rem !important;
  }
  .bb_qgency_state {
    text-align: center;
    .number_state {
      .txt {
        font-size: 150px;
        font-weight: 700;
        background: linear-gradient(to left, #175df5, #d216f5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        @include maxMobile {
          font-size: 70px;
        }
      }
    }

    .blur_item {
      position: absolute;
      top: 0;
      height: 350px;
      width: 100%;
      // This filter is not currently
      // supported on Firefox
      @include prefixer(
        transition,
        0.8s cubic-bezier(0.86, 0, 0.07, 1),
        webkit moz o ms
      );
      @include prefixer(background, rgba(255, 255, 255, 0.2), webkit moz o ms);
      @include prefixer(backdrop-filter, saturate(1) blur(20px), webkit o ms);
      // == for Firefox 😉 ==
      @-moz-document url-prefix() {
        background: rgba(255, 255, 255, 0.7) !important;
      }
    }
    .content_state {
      margin-top: 1rem;
      .it__em {
        text-align: center;
        .icon {
          border: 2px solid$border-color;
          width: 60px;
          height: 60px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          margin-bottom: 1rem;
          img {
            width: 25px;
          }
        }
        .info_txt {
          h4 {
            color: $blue-color;
            font-size: 20px;
            font-weight: 500;
          }
          p {
            font-size: 13px;
            color: $gray-color;
          }
        }
      }
    }
    .users_profile {
      img {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        &:first-child {
          left: 0;
          top: -25%;
        }
        &:nth-child(2) {
          left: -10%;
          top: 35%;
        }
        &:nth-child(3) {
          left: 15%;
          top: 0;
        }
        &:nth-child(4) {
          left: 5%;
          bottom: 30%;
        }
        &:nth-child(5) {
          right: 6%;
          top: 2%;
        }
        &:nth-child(6) {
          right: -7%;
          bottom: 35%;
        }
        &:nth-child(7) {
          right: -6%;
          top: -23%;
        }
      }
    }
    .link_state {
      margin-top: 1.5rem;
      .btn {
        margin: 0 0.5rem;
      }
      .btn_join {
        background-color: $blue-color;
        color: $white-color;
      }
      .btn_touch {
        border: 1px solid$border-color;
        color: $dark-color;
        img {
          width: 20px;
          margin-right: 0.2rem;
        }
      }
    }
  }
  &.animetext {
    .bb_qgency_state {
      .blur_item {
        top: 27%;
        height: 130px;
        @include maxMobile {
          top: 7%;
        }
      }
    }
  }
}

/*-----------------------------
  state_demo2
-----------------------------*/
.state_demo2 {
  @include maxMobile {
    padding-top: 5rem !important;
  }
  .bb_qgency_state {
    .number_state {
      .txt {
        background: linear-gradient(to left, #fd6b3b, #ffce53);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}

/*-----------------------------
  section__counter
-----------------------------*/
.section__counter {
  .item__number {
    text-align: center;
    .icon {
      border: 1px solid$border-color;
      border-radius: 12px;
      width: 40px;
      height: 40px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1.25rem;
      svg {
        width: 18px;
        path {
          fill: $dark-color;
        }
      }
    }
    .body__content {
      h2 {
        font-size: 60px;
        font-weight: 700;
        margin-bottom: 1.25rem;
      }
      h3 {
        font-size: 18px;
        font-weight: 500;
        color: $dark-color;
        margin-bottom: 0.625rem;
      }
      p {
        font-size: 16px;
        color: $gray-color;
      }
    }
  }
}

/*-----------------------------
  counter_about
-----------------------------*/
.counter_about {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='151' height='193' viewBox='0 0 151 193'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect width='151' height='193' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Repeat_Grid_5' data-name='Repeat Grid 5' clip-path='url(%23clip-path)'%3E%3Cg id='Group_5688' data-name='Group 5688' transform='translate(-997 -476)'%3E%3Ccircle id='Ellipse_180' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-2' data-name='Group 5688' transform='translate(-927 -476)'%3E%3Ccircle id='Ellipse_180-2' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-2' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-3' data-name='Group 5688' transform='translate(-857 -476)'%3E%3Ccircle id='Ellipse_180-3' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-3' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-4' data-name='Group 5688' transform='translate(-997 -430)'%3E%3Ccircle id='Ellipse_180-4' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-4' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-5' data-name='Group 5688' transform='translate(-927 -430)'%3E%3Ccircle id='Ellipse_180-5' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-5' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-6' data-name='Group 5688' transform='translate(-857 -430)'%3E%3Ccircle id='Ellipse_180-6' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-6' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-7' data-name='Group 5688' transform='translate(-997 -384)'%3E%3Ccircle id='Ellipse_180-7' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-7' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-8' data-name='Group 5688' transform='translate(-927 -384)'%3E%3Ccircle id='Ellipse_180-8' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-8' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-9' data-name='Group 5688' transform='translate(-857 -384)'%3E%3Ccircle id='Ellipse_180-9' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-9' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-10' data-name='Group 5688' transform='translate(-997 -338)'%3E%3Ccircle id='Ellipse_180-10' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-10' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-11' data-name='Group 5688' transform='translate(-927 -338)'%3E%3Ccircle id='Ellipse_180-11' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-11' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-12' data-name='Group 5688' transform='translate(-857 -338)'%3E%3Ccircle id='Ellipse_180-12' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-12' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-13' data-name='Group 5688' transform='translate(-997 -292)'%3E%3Ccircle id='Ellipse_180-13' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-13' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-14' data-name='Group 5688' transform='translate(-927 -292)'%3E%3Ccircle id='Ellipse_180-14' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-14' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5688-15' data-name='Group 5688' transform='translate(-857 -292)'%3E%3Ccircle id='Ellipse_180-15' data-name='Ellipse 180' cx='3' cy='3' r='3' transform='translate(997 476)' fill='rgba(41,2,114,0.15)'/%3E%3Cg id='Ellipse_181-15' data-name='Ellipse 181' transform='translate(1033 476)' fill='none' stroke='rgba(41,2,114,0.4)' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='3' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    width: 151px;
    height: 193px;
    bottom: -100px;
  }
}