body {
    margin: 0;
    padding:0px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
  }
  .container{
      max-width: 1440px;
  }

  /*--------------Header  css --------------*/
  .header {
      height: 90px;
      background: linear-gradient(90deg, rgba(0,0,0,1) 9%, rgba(26,7,48,1) 28%, rgba(62,22,8,1) 48%, rgba(26,7,48,1) 70%, rgba(0,0,0,1) 89%);
      & .header-left-back-box {
          width: 100%;
          height: 50px;
          margin: 20px 10px;
          & p {
              font-size: 14px;
              color: #fff;
              margin: 14px;
          }
      }
      .header-right-box {
          color: #fff;
          padding: 28px;
      }
  }
  .c-dashboard-header {
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 9%, rgba(26, 7, 48, 1) 28%, rgba(62, 22, 8, 1) 48%, rgba(26, 7, 48, 1) 70%, rgba(0, 0, 0, 1) 89%);
    padding: 20px 10px;
    margin-top: 50px;
    margin-bottom: 40px;
}

.header-dropdown-sec .btn-header {
    border: none;
    color: #fff;
    font-size: 14px;
}

.header-dropdown-sec .btn-header:active {
    color: #fff;
}

.header-dropdown-sec .btn-header::after {
    display: none;
}

.header-dropdown-sec .btn-header span {
    position: relative;
}

.header-dropdown-sec .btn-header img {
    position: absolute;
    right: 3px;
    top: 3px;
}

.header-dropdown-sec .btn-header i {
    font-size: 18px;
}

.card {
    border-radius: 25px;
}

.card-gradiant {
    background: linear-gradient(141.47deg, #FF5F05 0%, #6901FF 104.74%);
}
  .dropdown {
    position: relative;
    display: inline-block;
    & .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        border-radius: 10px;
        background-color: #fff;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 10px 16px;
        text-align: center;
        z-index: 1;
        margin-left: -40px !important;
        & a{
          font-size: 16px;
          font-weight: 400;
          color: #000;
        }
      }
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  /*--------------Sign up css --------------*/
  .detail-box {
      width: 430px;
      height: 80px;
      justify-content: space-between;
      & .detail-box-1st {
          border: 1px solid;
          width: 250px;
          text-align: center;
          padding: 24px 0px;
          border-radius: 80px;
          font-size: 18px;
          font-weight: 400;
      }
      .detail-box-2nd {
          width: 80px;
          height: 80px;
          border: 1px solid #e5e5e5;
          text-align: center;
          border-radius: 80px;
          padding: 23px 0px;
      }
      .detail-box-3rd {
          width: 80px;
          height: 80px;
          border: 1px solid #e5e5e5;
          text-align: center;
          border-radius: 80px;
          padding: 23px 0px;
      }
  }

  .Get-Start {
      width: 425px;
      height: 165px;
      & h2 {
          font-size: 36px;
          font-weight: 700;
      }
      p {
          font-size: 16px;
          font-weight: 400;
      }
  }

  .Get-Start-form{
      position: relative;
      & .form-inner-sec {
          width: 500px;
          margin-bottom: 30px;
          & input {
              width: 500px;
              height: 67px;
              border: 1px solid #e5e5e5;
              padding: 24px 30px 24px 30px;
              font-size: 16px;
          }
          label {
              display: inline-block;
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 10px;
          }
      }
      .form-btn-sec {
          width: 500px;
          justify-content: end;
          & button {
              width: 160px;
              height: 50px;
              border: 1px solid #000;
              color: #fff;
              background: #000;
              border-radius: 50px;
              font-size: 16px;
              font-weight: 600;
          }
      }
  }

  /*------------------Login-----------------------*/
  .Get-login-form{
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      align-items: flex-start;
      & .login-inner-sec {
          width: 500px;
          margin-bottom: 30px;
          & input {
              max-width: 500px;
              width: 100%;
              height: 67px;
              border: 1px solid #e5e5e5;
              padding: 24px 30px 24px 30px;
              font-size: 16px;
          }
          a{
              color: #000;
              font-size: 14px;
              font-weight: 400;
          }
          label {
              display: inline-block;
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 10px;
          }
      }
      .login-head{
          position: relative;
          max-width: 350px;
          width: 100%;
          & h3{
              font-size: 36px;
              font-weight: 700;
              text-align: center;
              margin: 30px 0px 50px 0px;
          }
      }
      .login-btn-sec {
          max-width: 500px;
          width: 100%;
          justify-content: center;
          & button {
              width: 160px;
              height: 60px;
              border: 1px solid #000;
              color: #fff;
              background: #000;
              border-radius: 50px;
              font-size: 16px;
              font-weight: 600;
          }
      }
  }
  .signup-sec {
      padding: 50px 40px;
      min-height: 275px;
      & .login-head{
          position: relative;
          & p{
              font-size: 16px;
              font-weight: 400;
              color: #b3b3b3;
              & a{
                  color: #000;
                  font-weight: 400;
              }
          }
      }
  }
  /*--------------------Login end-----------------------------*/

  /*------------------Overview css-------------------*/

  .Overview-detail-box {
      width: 505px;
      justify-content: space-between;
      margin-left: 30px;
      & .Overview-box-1st{
          width: 50px;
          height: 50px;
          border: 1px solid #e5e5e5;
          text-align: center;
          border-radius: 80px;
          padding: 13px 0px;
      }
      .Overview-box-2nd {
          border: 1px solid;
          max-width: 325px;
          width: 100%;
          height: 50px;
          text-align: center;
          padding: 13px 0px;
          border-radius: 80px;
          font-size: 18px;
          font-weight: 400;
      }
      .Overview-box-3rd {
          width: 50px;
          height: 50px;
          border: 1px solid #e5e5e5;
          text-align: center;
          border-radius: 80px;
          padding: 13px 0px;
      }
  }

  .Subscription {
      background-image: url("../img/Overviewbanner.png");
      border-radius: 30px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border: 1px solid;
      min-height: 260px;
      max-width: 1120px;
      margin: auto;
      padding: 45px 50px;
      & .Project-Plan-wraper {
          max-width: 400px;
          height: 68px;
          & h4 {
              font-size: 15px;
              color: #81808a;
              font-weight: 400;
              margin-bottom: 12px;
              text-transform: uppercase;
          }
          h2 {
              font-size: 34px;
              color: #d8d8d8;
              font-weight: 600;
          }
      }

      .Project-Plan-btn-sec {
          max-width: 500px;
          margin-top: 60px;
          & button {
              width: 160px;
              height: 50px;
              border: 1px solid #fff;
              color: #000;
              background: #fff;
              border-radius: 50px;
              font-size: 16px;
              font-weight: 600;
          }
          h3 {
              color: #d8d8d8;
              padding: 12px 0px;
              font-size: 22px;
              font-weight: 600;
              margin-right: 30px;
          }
          img {
              height: 50px;
              width: 50px;
              border-radius: 50px;
          }
      }
  }

  .service-sec {
      max-width: 960px;
      padding: 60px 0px 80px 0px;
      & .service-row{
          margin-top: 20px;
      }
      .service-sec-header {
          text-align: center;
          padding: 50px;
          & h2 {
              font-size: 36px;
              font-weight: 700;
          }
      }
      .service-box {
          margin: 10px 0px;
          background: #fff;
          max-width: 466px;
          width: 100%;
          border-radius: 14px;
          padding: 25px 5px 25px 5px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: space-around;
          justify-content: flex-start;
          align-items: center;
          min-height: 265px;
          border: 1px solid #e9e9e9;
          & .service-img-box {
              width: 70px;
              height: 60px;
              padding: 16px 0px 40px 35px;
          }
          .service-text-box{
              position: relative;
              padding-left: 20px;
              & h5 {
                  font-size: 20px;
                  font-weight: 600;
                  margin-bottom: 6px;
              }
              p{
                  margin: 0;
              }
          }
      }
  }
  .accordion-wrapper {
      max-width: 960px;
      width: 100%;
      margin: auto;
      & .accordion-wrapper-inner-sec{
          border-bottom: 1px solid;
           & .accordion {
              width: 100%;
              background-color: transparent;
              outline: none;
              border: none;
              text-align: left;
              padding: 12px 0px;
              font-size: 20px;
              font-weight: 600;
              color: #333;
              margin-top: 13px;
              cursor: pointer;
          }
          .accordion:after {
              content: "\+";
              font-size: 25px;
              font-weight: 400;
              float: right;
              height: 50px;
              width: 50px;
              margin-top: -11px;
              border: 1px solid #e5e5e5;
              border-radius: 50px;
              padding: 6px 17px;
          }
          .accordion.is-open:after {
              content: "\|";
              rotate: 90deg;
              font-size: 17px;
              padding: 11px 22px;
              font-weight: 900;
          }
          .accordion-content {
              max-width: 806px;
  /*            height: 104px;*/
              max-height: 0px;
              overflow: hidden;
              font-size: 14px;
              font-weight: 400;
              transition: max-height 0.2s ease-in-out;
          }
      }
  }


  /*--------------payment sec-----------------*/
  .payment-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      vertical-align: middle;
      & .payment-box-1st {
          border: 1px solid #cccc;
          height: 80px;
          width: 80px;
          padding: 27px;
          border-radius: 50px;
          margin-right: 10px;
          & p{
              margin: 0px !important;
          }
      }
      .payment-box-2nd {
          border: 1px solid #cccc;
          height: 80px;
          width: 80px;
          padding: 27px;
          border-radius: 50px;
          margin-right: 10px;
          & p{
              margin: 0px !important;
          }
      }
      .payment-box-3rd{
          max-width: 216px;
          padding: 0px 50px;
          border: 1px solid;
          border-radius: 50px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          vertical-align: middle;
          & p{
              margin: 0px !important;
          }
      }
  }



  .project-plan-box {
      background: url("../img/Overviewbanner.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 30px;
      padding: 44px 50px;
      & h4 {
          font-size: 15px;
          font-weight: 400;
          color: #80818a;
          margin-bottom: 12px;
      }
      h2 {
          font-size: 34px;
          font-weight: 600;
          color: #fff;
          margin-bottom: 60px;
      }
      p {
          font-size: 22px;
          font-weight: 600;
          color: #fff;
          & span{
              font-size: 18px;
              font-weight: 400;
              color: #D8D8D8;
          }
      }
  }
  .project-plan-txtbox {
      max-width: 540px;
      width: 100%;
      margin-top: 30px;
      & p{
          font-size: 14px;
          font-weight: 400;
      }
  }
  .input-wrapper{
      position: relative;
      max-width: 500px;
      margin-bottom: 30px;
      & label {
          display: inline-block;
          font-size: 16px;
          margin-bottom: 10px;
          font-weight: 600;
      }
      .payment-input {
      max-width: 500px;
      width: 100%;
      padding: 20px 30px;
      font-size: 16px;
      font-weight: 400;
      color: #000000;
      border: 1px solid #ccc;
      }
      .payment-form-btn {
          margin-top: 50px;
          width: 100%;
          padding: 16px;
          border-radius: 50px;
          color: #fff;
          background: #000;
          font-size: 16px;
          font-weight: 600;
      }
  }

  /*----------------dashboard css---------------------*/

.user-profile-box2 {
    max-width: 515px;
    height: 310px;
    background: #fff;
    border-radius: 20px;
    text-align: left;
    padding: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    & .user-profile-flex-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        & .title-box {
            margin: 0px 30px;
        }
    }
    h2{
        font-size: 18px;
        font-weight: 600;
        margin-bottom:4px;
    }
    h3{
        font-size: 14px;
        font-weight: 400;
	color: #666666;
    }
    p{
        font-size: 14px;
        font-weight: 400;
        margin: 8px 0px;
        text-decoration: none !important;
    }
    img {
        height: 100px;
        width: 100px;
        border-radius: 50px;
        margin-bottom: 12px;
    }
    .Schedule-btn-box2 {
        display: flex;
        width: 100%;
        max-width: 410px;
        margin-top: 15px;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        & button {
            border: 1px solid #000;
            width: 100%;
            font-size: 14px;
            font-weight: 600;
            padding: 14px 16px;
            background: #fff;
            margin: 5px 0px;
            color: #000;
            border-radius: 50px;
        }
    }
}


  .user-name-wrapper2{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      max-width: 717px;
      background: #fff;
      height: 310px;
      padding: 40px 42px;
      border-radius: 20px;
      & .user-name-box2 {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          & h2 {
              font-size: 36px;
              font-weight: 700;
              line-height: 50.5px;
          }
      }
      .user-markup2{
          position: relative;
              & button {
              width: 160px;
              padding: 14px;
              font-size: 14px;
              font-weight: 600;
              border: 1px solid;
              border-radius: 50px;
              color: #fff;
              background: #000;
          }
      }
      .bottom-box2 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-content: center;
          align-items: end;
      }
      .user-site2{
              position: relative;
          width: 100%;
              max-width: 260px;
          & h5{
              font-size: 18px ;
              font-weight: 600px;
          }
      }
      .user-date2{
          position: relative;
          display: flex;
          align-content: flex-start;
          flex-wrap: wrap;
          align-items: self-start;
          width: 250px;
          & h5{
              font-size: 14px;
              font-weight: 400px;
              color: #ccc;
          }
      }
  }
  .Analytics-btn {
      width: 198px;
      height: 50px;
      border: 1px solid gray;
      border-radius: 50px;
      color: #000;
      font-size: 14px;
      font-weight: 600;
      background: #fff;
  }


  /*------------------------dropdown start----------------------------*/

      .dropbtn2 {
        background-color: #fff;
        color: #000;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }

      .dropdown-content2 {
          display: none;
          position: absolute;
          right:0px;
          background-color: #ffffff;
          width: 100%;
          overflow: auto;
          box-shadow: 0px 8px 16px 0px rgb(178 178 178 / 20%);
          z-index: 1;
          border-radius: 10px;
          max-height: 178px;
          overflow-y: auto;
          overflow-x: hidden;
          scrollbar-width: thin;
      }

      .dropdown-content2 a {
        color: black;
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
        display: block;
       }
  /*------------------------dropdown end----------------------------*/

  .user-profile-box {
      max-width: 450px;
      height: 380px;
      background: #fff;
      border-radius: 20px;
      text-align: center;
      padding: 50px;
      & h2{
          font-size: 18px;
          font-weight: 600;
      }
      h3{
          font-size: 14px;
          font-weight: 400;
      }
      p{
          font-size: 14px;
          font-weight: 400;
          margin: 0px;
      }
      img {
          height: 90px;
          width: 90px;
          border-radius: 50px;
          margin-bottom: 12px;
      }
      .Schedule-btn-box {
          display: flex;
          width: 100%;
          margin-top: 15px;
          align-content: center;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-around;
          & button {
              border: 1px solid #e4e4e4;
              max-width: 165px;
              font-size: 14px;
              font-weight: 600;
              padding: 11px 16px;
              background: #fff;
              margin: 5px 0px;
              border-radius: 50px;
          }
      }
  }

  .user-profile-box2 {
      max-width: 515px;
      height: 310px;
      background: #fff;
      border-radius: 20px;
      text-align: left;
      padding: 40px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
      align-items: flex-start;
      & .user-profile-flex-box {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-start;
          & .title-box {
              margin: 0px 30px;
          }
      }
      h2{
          font-size: 18px;
          font-weight: 600;
          margin-bottom:4px;
      }
      h3{
          font-size: 14px;
          font-weight: 400;
      color: #666666;
      }
      p{
          font-size: 14px;
          font-weight: 400;
          margin: 4px 0px;
          text-decoration: none !important;
      }
      img {
          height: 100px;
          width: 100px;
          border-radius: 50px;
          margin-bottom: 12px;
      }
      .Schedule-btn-box2 {
          display: flex;
          width: 100%;
          max-width: 410px;
          margin-top: 15px;
          align-content: center;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          & button {
              border: 1px solid #000;
              width: 100%;
              font-size: 14px;
              font-weight: 600;
              padding: 14px 16px;
              background: #fff;
              margin: 5px 0px;
              color: #000;
              border-radius: 50px;
          }
      }
  }





  .Counter-tab-wrapper{
      float: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      max-width: 800px;
      width: 100%;
      background: #fff;
      min-height: 380px;
      padding: 10px 42px;
      border-radius: 20px;
  }
  .Counter-tab-wrapper2{
      float: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      max-width: 850px;
      width: 100%;
      background: #fff;
      min-height: 421px;
      padding: 10px 42px;
      border-radius: 20px;
  }

  .timer-box {
      background: #fff;
      border-radius: 20px;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      vertical-align: middle;
      height: 380px;
  }
  .circle-timer {
          width: 280px;
          height: 300px;
          position: relative;
          margin: auto;
          padding: 0px 35px;
          & svg {
          max-width: 100%;
          & #remaining {
              font-size: 50px;
              color: #64e134;
              transition: color 3s linear;
          }
          #stop1,
          #stop2 {
              transition: all 3s linear;
          }
          #ticker {
              transition: all 1s linear;
          }
      }
      .timer-text {
          position: absolute;
          left: 0;
          right: 0;
          top:-9%;
          bottom: 10%;
          margin: auto;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: #000;
          & h2{
              font-size: 34px;
              font-weight: 700;
          }
          h5{
              font-size:20px;
              font-weight: 600;
              color: #ADADAD;
          }
          p{
              font-size:16px;
              font-weight: 600;
          }
      }
      button {
          width: 138px;
          height: 50px;
          border-radius: 122px;
          background: #000;
          color: #fff;
          margin: 30px 35px;
      }
  }
  .copy {
      cursor: pointer;
  }


  .tabs {
      max-width: 750px;
      position: relative;
      min-height: 200px;
      clear: both;
      margin: 25px 0;
          & .tab {
              margin-right: 10px;
              float: left;
          }
          .tab-plus-btn {
              display: none;
              border: 1px solid #ccc;
              width: 50px;
              height: 50px;
              border-radius: 50px;
              float: right;
              text-align: center;
              padding: 12px 0px;
          }
      .tab label {
          width: 177px;
          text-align: center;
          background: #fff;
          padding: 12px 0px;
  /*        border: 1px solid #ccc;*/
          position: relative;
          color: #000;
          border-radius: 60px;
          font-size: 14px;
          font-weight: 600;
      }
      .tab [type=radio] {
        display: none;
      }
      .content {
          position: absolute;
          top: 79px;
          left: 0;
          background: white;
          right: 0;
          bottom: 0;
          padding: 0px;
          min-height: 255px;
          border-top: 1px solid #ccc;
          & .content-wrapper {
              border-bottom: 1px solid #ccc;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              font-size: 14px;
              vertical-align: middle;
              padding: 18px 0px;
              & p{
                  margin: 0px;
              }
          }
      }
      [type=radio]:checked ~ label {
        background: #000;
        color: #fff;
      }
      [type=radio]:checked ~ label ~ .content {
        z-index: 1;
      }
      label:hover {
        cursor: pointer;
      }
  }

  .billing-details-Secttion{
      background: #fff;
      padding: 30px 50px;
      border-radius: 20px;
      & .Billing-heading{
          border-bottom: 1px solid #ccc;
          & h2 {
              font-size: 18px;
              font-weight: 600;
          }
          p{
              font-size: 14px;
              font-weight: 400;
          }
      }
      .progress-container {
          margin-top: 40px;
          max-width: 575px;
          width: 100%;
          min-height: 200px;
          padding: 30px;
          border-radius: 10px;
          box-shadow: 0px 2px 24px 0px #B0ADB380;
          & .text-capitalize{
              font-size: 18px;
              font-weight: 600;
          }
          .progress {
            height: 10px;
            box-shadow: none;
            -webkit-box-shadow: none;
            background-image: -webkit-gradient(
              linear,
              left top,
              right top,
              from(rgba(230, 230, 230, 0.3)),
              to(rgba(230, 230, 230, 0.8)),
              color-stop(0.2, #fff) );
              & .progress-bar {
                  box-shadow: none;
                  -webkit-box-shadow: none;
                  background: linear-gradient(135deg, #fe5e08 0%, #6901ff 100%);
                  border-radius: 10px;
              }
          }
          p {
              font-weight: 600;
              font-size: 18px;
              margin: 0px;
              & span{
                  font-weight: 400;
                  font-size: 14px;
                  color: #ccc;
              }
          }
          button {
              border: 1px solid;
              float: right;
              width: 150px;
              padding: 10px;
              border-radius: 50px;
              background: #000;
              color: #fff;
          }
      }
  }

  .fa-star {
      color: #000;
      font-size: 7px;
  }

  .payment-card-box {
      width: 100%;
      max-width: 515px;
      border: 2px solid #0000000F;
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      padding: 13px;
      justify-content: space-between;
      & .viza-card {
          max-width: 80px;
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: space-around;
          justify-content: space-between;
          & img {
              width: 80px;
              height: 53px;
          }
      }
      .viza-expery {
          max-width: 150px;
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: space-around;
          justify-content: space-between;
          & h6{
              font-size: 12px;
              color: #d3d3d3;
              margin: 0px !important;
          }
      }
      .update-card {
          max-width: 130px;
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: space-around;
          justify-content: space-between;
          .card-btn {
              border: 1px solid #ccc;
              float: right;
              width: 132px;
              padding: 6px;
              border-radius: 50px;
              background: #fff;
              color: #000;
          }
      }
  }


  .Invoices-cection {
      position: relative;
      padding: 0px;
      & .Invoices-tbl {
          margin-top: 30px;
          width: 100%;
          max-width: 1180px;
          & tr {
              margin: 10px 0px;
              & td {
                  background: #f9f9f9;
                  padding: 15px;
                  width: 185px;
                  text-align: center;
                  font-size: 14px;
                  font-weight: 600;
                  & button {
                      width: 71px;
                      border: 1px solid;
                      font-size: 14px;
                      font-weight: 400;
                      border-radius: 7px;
                  }
              }
          }
      }
  }

      .table2{
          display: none;
          margin: auto;
          width: 100%;
          max-width:350px;
          padding: 0px;
          }

     .May2 {
          font-size: 14px;
          font-weight: 600;
          text-align: start;
          padding:15px !important;
      }
      .mob-td2 {
          padding: 15px;
      }

      .integrity2{
         background-color:#eff5f3;
         padding-top: 27px;
          padding-bottom: 23px;
          width: 100%;

      }
       .Unpaid2{

          border: 1px solid #000;
          border-radius: 20px;
          font-size: 14px;
          padding: 3px 26px;
          max-width: 67px;
          max-width: fit-content;
      }



  /*---------footer css---------*/
  .footer {
    border-top
    :2px solid;
    border-image: linear-gradient(90deg, rgba(106,1,254,1) 1%, rgba(254,94,6,1) 54%, rgba(106,1,254,1) 100%) 1;
    position: fixed;
    bottom: 0;
    background: #fff;
  }
  .footer-row{
      max-width: 960px;
      margin: auto;
      padding: 10px 0px;
  }
  .footer-flex {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      justify-content: end;
      align-items: center;
      & .footer-price-box {
          position: relative;
          margin-right: 10px;
          & p{
              font-size: 22px;
              font-weight: 600;
              color: #ccc;
              margin: 0;
              padding: 0;
          }

      }
      .footer-markup{
          position: relative;
          & button {
              width: 160px;
              padding: 10px;
              font-size: 17px;
              font-weight: 600;
              border: 1px solid;
              border-radius: 50px;
              color: #fff;
              background: #000;
          }
      }
      .footer-copyright{
          position: relative;
          & element.style {
              font-size: 22px;
              font-weight: 600;
          }
      }

  }


  .Tabination-sec {
      padding-bottom:50px;
  }

  /*---------------------Confirmation Page-----------------------*/

  .dashboard-center-menu {
      position: relative;
      text-align: center;
  }
  .confirmation-header {
      background: linear-gradient(90deg, rgba(0,0,0,1) 9%, rgba(26,7,48,1) 28%, rgba(62,22,8,1) 48%, rgba(26,7,48,1) 70%, rgba(0,0,0,1) 89%);
      max-width:1440px;
      padding: 20px 10px;
  }
  .confirmation-sec {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      height: 700px;
  }
  .wrapperAlert {
      max-width: 500px;
      height: auto;
      overflow: hidden;
      border-radius: 12px;
      border: thin solid #ddd;
  }

  .topHalf {
      width: 100%;
      color: white;
      overflow: hidden;
      min-height: 350px;
      position: relative;
      padding: 72px 100px;
      text-align: center;
      background: rgb(0, 0, 0);
      background: -webkit-linear-gradient(45deg, #3b150c, #1a0730);
  }

  .topHalf p {
    margin-top: 30px;
  }
  svg {
    fill: white;
  }
  .topHalf h1 {
    font-size: 2.25rem;
    display: block;
    font-weight: 500;
    letter-spacing: 0.15rem;
    text-shadow: 0 2px rgba(128, 128, 128, 0.6);
  }

  /* Original Author of Bubbles Animation -- https://codepen.io/Lewitje/pen/BNNJjo */
      .bg-bubbles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }


      @-webkit-keyframes square {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-500px) rotate(600deg);
        }
      }
      @keyframes square {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-500px) rotate(600deg);
        }
      }




  li.parsley-required{
      position: unset !important;
      width: 100%;
      -webkit-animation: unset !important;
      animation:unset !important;
  }



  /*---------new icon-------------*/
  #sendotp {
      max-width: 500px;
      width: 100%;
  }

  .markup-icon {
      background: #000;
      padding: 16px 5px;
      border-radius: 50px;
      height: 50px;
      width: 50px;
      margin: -6px;
  }

  .markup-icon2 {
      background: #101010;
      padding: 16px 5px;
      border-radius: 50px;
      height: 48px;
      width: 48px;
  }

  .markup-icon3 {
      background: #fff;
      padding: 16px 5px;
      border-radius: 50px;
      height: 48px;
      width: 48px;
  }

  .markup-icon4 {
      background: #000;
      padding: 16px 5px;
      border-radius: 50px;
      height: 50px;
      width: 50px;
  }

  .dropbtn2.website-link {
      border: 1px solid #d3d3d3;
      max-width: 290px;
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      border-radius: 50px;
  }
  .content-wrapper p {
      font-size: 14px;
      font-weight: 400;
      line-height: 16.21px;
      text-align: left;
  }


  /*----------------------Timer Box css start---------------------------*/
  .timer-box {
      background: #fff;
      border-radius: 20px;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      vertical-align: middle;
      height: 421px;
      & button {
        width:138px;
        padding: 10px 40px 10px 40px;
        border-radius: 50px;
        background: #000;
        color: #fff;
        margin:auto;
        margin-top: 0px !important;
        border: unset !important;
      }
  }

  .circle-container {
    width: 100%;
    max-width: 280px;
  }

  .progress-circle__container {
        position: relative;
        width: 100%;
  }
  .progress-circle {
      width: 100%;
      margin: auto;
      z-index: 10;
      position: relative;
      svg path {
          stroke-linecap: round;
      }
      &__label {
          font-weight: 700;
          font-size: 64px;
          text-align: center;
          line-height: 72px;
          &--text {
              font-size: 32px;
              display: block;
              line-height: 40px;
              margin-top: 16px;
              animation: opacity 1500ms ease-in;
          }
      }
  }
  .progress-circle__label{
    text-align: center;
  }
  .progress-remaining__time{
    font-size: 34px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
  }
  .progress-total__time{
    font-size: 20px;
    font-weight: 500;
    color: #ADADAD;
    line-height: 36px;
    text-align: center;
  }
  .left-hours{
    font-size: 18px;
    font-weight: 600;
    line-height: 20.84px;
    text-align: center;
  }

  /*----------------------Timer Box css end---------------------------*/



  /*----------------------announcement-bar css start---------------------------*/

  .announcement-bar {
      max-width: 1260px;
      width: 100%;
      margin: auto !important;
      padding: 10px 20px 10px 20px;
      border-radius: 8px;
      background: #1F1F1F;
      display: flex;
      flex-direction: row;
      flex-wrap:nowrap;
      align-content: center;
      justify-content: space-between;
      align-items: center;
      & p{
          font-size: 14px;
          font-weight: 600;
          line-height: 16.21px;
          margin: 0;
          color: #fff;
      }
      a{
          font-size: 14px;
          font-weight: 600;
          line-height: 16.21px;
          margin: 0;
          color: #fff;
      }
  }




  /*----------------------announcement-bar css end---------------------------*/


  /*------------------Circle-box css start--------------------*/

    .circle-container2{
      position: relative;
    }
    .circle-text {
      position: relative;
      width: 110px;
      height: 110px;
      font-size: 20px;
      text-align: center;
      margin-bottom: -10px;
      border: double 20px transparent;
      background-image:linear-gradient(white, white), linear-gradient(211.26deg, #972F0C 13.63%, #4C0F63 50.49%, #3C007E 86.62%);
      background-origin: border-box;
      background-clip: content-box, border-box;
      display: inline-block;
      border-radius: 50%;
      rotate: 322deg;
    }

    .circle-text span {
      position: absolute;
      top: -19px;
      left: calc(50% - 10px);
      display: inline-block;
      width: 20px;
      height: 54px;
      transform-origin: center bottom;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }
    .spacer-icon{
      font-size: 7px;
    }

    .center-text {
      position: absolute;
      bottom: 18px;
      left: 34px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      rotate: 30deg;
  }

        .circle-text span:nth-child(1) {
          transform: rotate(9deg);
        }

        .circle-text span:nth-child(2) {
          transform: rotate(21.3deg);
        }

        .circle-text span:nth-child(3) {
          transform: rotate(30.7deg);
        }

        .circle-text span:nth-child(4) {
          transform: rotate(40deg);
        }

        .circle-text span:nth-child(5) {
          transform: rotate(52.3deg);
        }

        .circle-text span:nth-child(6) {
          transform: rotate(63.6deg);
        }

        .circle-text span:nth-child(7) {
          transform: rotate(84deg);
        }

        .circle-text span:nth-child(8) {
          transform: rotate(93.3deg);
        }

        .circle-text span:nth-child(9) {
          transform: rotate(103.6deg);
        }

        .circle-text span:nth-child(10) {
          transform: rotate(117deg);
        }

        .circle-text span:nth-child(11) {
          transform: rotate(129.3deg);
        }

        .circle-text span:nth-child(12) {
          transform: rotate(146.6deg);
        }

        .circle-text span:nth-child(13) {
          transform: rotate(160deg);
        }

        .circle-text span:nth-child(14) {
          transform: rotate(173.3deg);
        }

        .circle-text span:nth-child(15) {
          transform: rotate(186.6deg);
        }

        .circle-text span:nth-child(16) {
          transform: rotate(199deg);
        }

        .circle-text span:nth-child(17) {
          transform: rotate(209.3deg);
        }

        .circle-text span:nth-child(18) {
          transform: rotate(219.6deg);
        }

        .circle-text span:nth-child(19) {
          transform: rotate(233deg);
        }

        .circle-text span:nth-child(20) {
          transform: rotate(245.3deg);
        }

        .circle-text span:nth-child(21) {
          transform: rotate(266.6deg);
        }

        .circle-text span:nth-child(22) {
          transform: rotate(276deg);
        }

        .circle-text span:nth-child(23) {
          transform: rotate(287.3deg);
        }

        .circle-text span:nth-child(24) {
          transform: rotate(300.6deg);
        }

        .circle-text span:nth-child(25) {
          transform: rotate(313deg);
        }

        .circle-text span:nth-child(26) {
          transform: rotate(332.3deg);
        }

        .circle-text span:nth-child(27) {
          transform: rotate(340deg);
        }


  /*------------------Circle-box css end --------------------*/

  /*------------------conformation-box css start--------------------*/
  .conformation-box {
      width: 100%;
      max-width: 890px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: space-between;
      align-items: center;
  }

  .conformation-text-box {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      align-items: flex-start;
  }

  .conformation-img-box {
      width: 100%;
      max-width: 350px;
      height: 350px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
  }

  .text-box-inner {
      width: 100%;
      max-width: 421px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      align-items: flex-start;
      & h2{
          font-size: 36px;
          font-weight: 700;
          line-height: 41.69px;
      }
      p{
          font-size: 16px;
          font-weight: 400;
          line-height: 26px;
          text-align: left;

      }
  }
  .conformation-button-section button{
      width: 227px;
      height: 50px;
      padding: 0px 40px 0px 40px;
      background: #000;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      line-height: 16.21px;
      text-align: center;

  }
  .conformation-icon{
      width:  50px;
      height:  50px;
      padding: 19px 0px 16px 0px;
      border-radius: 50px;
      background: #000;
  }


  .circle {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle, rgb(225, 204, 255, 1) 0%, rgba(255, 255, 255, 1) 72%);
      display: flex;
      animation: pop-in 0.5s ease-out forwards;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      align-content: space-around;
      justify-content: center;
  }

  @keyframes pop-in {
      0% {
          transform: scale(0);
      }
      100% {
          transform: scale(1);
      }
  }

  .outer-border {
      position: relative;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      border: 1px solid #fff;
      display: flex;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
  }

  .checkmark {
      display: none;
      height: 55px;
      width: 55px;
      padding: 45px;
      border-radius: 50%;
      background: white;
      position: absolute;
      animation: draw 0.5s 0.5s forwards;
  }

  .checkmark::before {
      content: '';
      position: absolute;
      width: 13px;
      height: 24px;
      border: solid;
      border-image-source: linear-gradient(77.32deg, #FF5F05 9.07%, #6901FF 90.28%);
      border-image-slice: 1;
      border-width: 0 3px 3px 0;
      display: inline-block;
      transform: rotate(45deg);
      top: 30px;
      left: 37px;
  }

   @keyframes pop-in {
      0% {
          transform: scale(0);
      }
      100% {
          transform: scale(1.2);
      }
  }

  .dashboard-header{
    background: linear-gradient(90deg, rgba(0,0,0,1) 9%, rgba(26,7,48,1) 28%, rgba(62,22,8,1) 48%, rgba(26,7,48,1) 70%, rgba(0,0,0,1) 89%);
    /* max-width: 1280px; */
    padding: 20px 10px;
        & .dashboard-left-menu {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            & h2 {
                font-size:14px;
                font-weight: 600;
                color: #fff;
            }
            img{
                height: 25px;
            }
        }
    }
  @media screen and (max-width: 450px) {
      .conformation-text-box {
          margin-top: 60px !important;
      }
  }

  /*------------------conformation-box css end--------------------*/


  /*------------------Toggle Section css Start--------------------*/
  .toggle-sec {
      padding: 30px 0px;
      width: 380px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: space-between;
      align-items: center;
  }



  .card-tgl{
      padding: 14px 18px;
      border-radius: 60px;
      opacity: 0px;
      font-size: 14px ;
      font-weight: 600;
      color: #000;
      max-width: 170px;
      width: 100%;
      font-size: 14px;
      font-weight: 600;
      border: none;
      background: transparent;
      opacity: 50%;
  }
  .card-tgl.active{
      padding: 14px 18px;
      border-radius: 60px;
      opacity: 0px;
      font-size: 14px ;
      font-weight: 600;
      color: #fff;
      max-width: 170px;
      width: 100%;
      font-size: 14px;
      font-weight: 600;
      border: none;
      background: #000000;
      opacity: 100%;
  }
  /*.card-tgl2{
      padding: 16px 34px 16px 34px;
      border-radius: 60px;
      opacity: 0px;
      font-size: 14px ;
      font-weight: 600;
      color: #000;
      max-width: 200px;
      width: 100%;
      font-size: 14px;
      font-weight: 600;
      border: none;
      background: transparent;
  }*/
  /*.active{
      color: #fff;
      background: #000000;

  }*/

  /*------------------Toggle Section css end--------------------*/



  /* --------------------------- new css start-------------------- */


  .monthly_wrapper {
      display: flex;
      width: 100%;
      background: #fff;
      border-radius: 25px;
      max-width: 830px;
      flex-wrap: wrap;
      padding: 0px 35px;
  }

  .monthly_box {
      width: 50%;
  }
  .monthly_box span.progress-circle__label--text {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .monthly_wrapper .circle-container {
      width: 100%;
      max-width: 320px;
  }
  .control_box {
      height: 100%;
      background: linear-gradient(141.47deg, #FF5F05 0%, #6901FF 104.74%);
      border-radius: 25px;
      padding: 40px;
      max-height: 430px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
  }

  .control_box * {
      color: #fff;
      text-align: center;
  }

  .ap-btn a {
      border: 1px solid #FFFFFF;
      padding: 12px 26px 12px 26px;
      display: inline-block;
      text-decoration: none;
      border-radius: 40px;
      margin-bottom: 20px;
  }


  .control_box p {
      font-size: 14px;
  }
  .box_btn i{
      background: #FFFFFF;
      height: 50px;
      width: 50px;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      margin-top: 30px;
  }

  .box_btn i {
      color: #000;
      font-size: 20px;
      rotate: 311deg;
      margin-top: 7px;
      margin-left: 1px;
      margin: auto;
  }
  .box_btn a {
      text-decoration: none;
  }

  .box_btn span {
      margin-top: 16px;
      display: block;
  }

  @media screen and (max-width: 991px) {
      .control_box {
          margin-top: 30px;
      }
    }
    @media screen and (max-width: 767px) {

      .monthly_wrapper {
          flex-direction: column;
      }
      .monthly_box {
          width: 100%;
      }
  }
  /* --------------------------- new css end-------------------- */

  /*buy more hours*/
  .Hours-counter {
      display: flex;
  }
  .popup-footer {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      height: 97px;
      align-content: space-around;
  }
  .pop-checkout {
      display: flex;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
  }
  .pop-checkout button {
      width: 160px;
      border: 1px solid #000;
      border-radius: 50px;
      color: #fff;
      padding: 15px 45px;
      background: #000;
  }
  /*end buy more hours*/

  .modal-dialog-centered-custom {
      max-width: 900px;
  }
  button.close {
      position: absolute;
      top: 30px;
      right: 30px;
  }
  .body-part {
      position: relative;
  }
  .body-part h2 {
      text-align: center;
      padding: 60px 0px 10px 0px;
  }
  .Hours-counter {
      width: 100%;
      max-width: 694px;
      margin: auto;
      padding-top: 50px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: space-between;
      align-items: center;
  }
  .leftt-hours {
      width: 220px;
      border: 1px solid #DCDCDC;
      margin-right: 10px;
      border-radius: 20px;
      padding: 40px 50px 40px 50px;
      cursor: pointer;
  }
  .leftt-hours h3 {
      font-size: 24px;
      font-weight: 700;
  }
  .leftt-hours h5 {
      /* font-family: Suisse Intl; */
      font-size: 18px;
      font-weight: 600;
      line-height: 20.84px;
      opacity: 50%;
  }
  .body-part p {
      text-align: center;
      margin-top: 60px;
      color: #000 !important;
  }
  .body-part p a {
      color: #000;
      font-size: 18px;
      font-weight: 600;
  }
  .sec-total {
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
  }
  .leftt-hours.active {
      border: 2px solid;
  }
  .modal-footer {
      position: relative;
  }
  .modal-footer:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, #6901ff, #ff5f05, #6901ff);
  }
  a.btn_box {
      width: 138px;
      padding: 10px 40px 10px 40px;
      border-radius: 50px;
      background: #000;
      color: #fff;
      margin: auto;
      margin-top: 0px !important;
      border: unset !important;
      text-decoration: none;
  }
  .two-step.confirm-payment {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .two-step.cc-div.payment-conact-form-box {
      display: flex;
      justify-content: space-between;
  }
  .two-step.cc-div.payment-conact-form-box {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
  }

  /*04-07-2024*/

  .user-fullname {
      position: absolute;
      height: 50px;
      padding: 0;
      margin: 0;
  }


  /*===================== 4july css start============================*/
  .viza-expery p {
      display: flex;
  }
  .payment-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
  }
  a.add-bt {
      text-decoration: none;
      border: 1px solid #00000033;
      padding: 12px 24px;
      border-radius: 50px;
      display: inline-block;
      color: #000;
      font-size: 14px;
      font-weight: 600;
      line-height: 16.21px;
      text-align: center;
  }

  .payment-card h3 {
      margin: 0;
  }

  i.fa-solid.fa-plus {
      margin-right: 0px;
      color: #ffffff;
  }
  button.card-btn.update_cardd {
      background: #000 !important;
      color: #fff !important;
      border-radius: 8px !important;
      font-size: 14px;
      font-weight: 500;
      line-height: 16.21px;
      text-align: left;
      width: 80px !important;
      text-align: center;
  }
  .progress-container.billing_sec .update-card {
      justify-content: end;
  }

  .payment-card-box{
    align-items: center;
  }
  .progress-container.billing_sec.billing-height {
      min-height: 94px;
      padding: 20px;
      margin-bottom: 10px !important;
      box-shadow: none;
      border: 1px solid #0000000F;
  }
  .progress-container.billing_sec.billing-height:last-child {
      margin: 0 !important;
  }
  .progress-container.billing_sec.billing-height .payment-card-box {
      padding: 0;
      border: 0;
  }
  .primary_wrapper {
      display: flex;
      align-items: center;
      gap: 20px;
  }
  .delete_wrapper {
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: center;
  }
  button.card-btn.update_cardd.set.red {
      background-color: #FA6565 !important;
  }
  button.card-btn.update_cardd.set.bg-rome {
      width: 123px !important;
      background-color: unset !important;
      color: #000 !important;
  }

  .payment-card-box h6 {
      color: #797979;
      font-size: 12px;
      font-weight: 400;
      line-height: 13.9px;
      text-align: left;
  }

  @media screen and (max-width: 575px) {
      .billing-details-Secttion {
          padding: 30px;
      }
      .progress-container.billing_sec.billing-height .payment-card-box {
          justify-content: space-between;
      }

      .primary_wrapper {
          width: 100% !important;
          justify-content: space-between;
      }

      .delete_wrapper {
          width: 100% !important;
          justify-content: space-between;
      }

      .progress-container.billing_sec .update-card {
          justify-content: start;
      }
      i.fa-solid.fa-plus {
          margin-right: 5px;
          color: #000;
      }
      .progress-container.billing_sec {
          padding: 20px !IMPORTANT;
      }

      h3.text-capitalize {
          font-size: 15px !important;
      }

      a.add-bt {
          padding: 12px 16px;
      }
      .billing-details-Secttion  .p-2 {
          margin-top: 10px !important;
      }
    }
  /*===================== 4july css end============================*/

  /*==================  17-07-2024 ============================*/

  .Counter-tab-wrapper3 {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      background: #fff;
      min-height: 885px;
      padding: 10px 42px;
      border-radius: 20px;
  }
  .circle-text {
    position: relative;
    width: 100px;
    height: 100px;
    font-size: 20px;
    text-align: center;
    margin-bottom: -10px;
    border: double 20px transparent;
    background-image:linear-gradient(white, white), linear-gradient(211.26deg, #972F0C 13.63%, #4C0F63 50.49%, #3C007E 86.62%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: inline-block;
    border-radius: 50%;
    rotate: 322deg;
  }

  .circle-text span {
    position: absolute;
    top: -17px;
    left: calc(50% - 10px);
    display: inline-block;
    width: 20px;
    height: 47px;
    transform-origin: center bottom;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
  }
  .spacer-icon{
    font-size: 7px;
  }

  .center-text {
    position: absolute;
    bottom: 12px;
    left: 27px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    rotate: 30deg;
}

      .circle-text span:nth-child(1) {
        transform: rotate(9deg);
      }

      .circle-text span:nth-child(2) {
        transform: rotate(21.3deg);
      }

      .circle-text span:nth-child(3) {
        transform: rotate(30.7deg);
      }

      .circle-text span:nth-child(4) {
        transform: rotate(40deg);
      }

      .circle-text span:nth-child(5) {
        transform: rotate(52.3deg);
      }

      .circle-text span:nth-child(6) {
        transform: rotate(63.6deg);
      }

      .circle-text span:nth-child(7) {
        transform: rotate(84deg);
      }

      .circle-text span:nth-child(8) {
        transform: rotate(93.3deg);
      }

      .circle-text span:nth-child(9) {
        transform: rotate(103.6deg);
      }

      .circle-text span:nth-child(10) {
        transform: rotate(117deg);
      }

      .circle-text span:nth-child(11) {
        transform: rotate(129.3deg);
      }

      .circle-text span:nth-child(12) {
        transform: rotate(146.6deg);
      }

      .circle-text span:nth-child(13) {
        transform: rotate(160deg);
      }

      .circle-text span:nth-child(14) {
        transform: rotate(173.3deg);
      }

      .circle-text span:nth-child(15) {
        transform: rotate(186.6deg);
      }

      .circle-text span:nth-child(16) {
        transform: rotate(199deg);
      }

      .circle-text span:nth-child(17) {
        transform: rotate(209.3deg);
      }

      .circle-text span:nth-child(18) {
        transform: rotate(219.6deg);
      }

      .circle-text span:nth-child(19) {
        transform: rotate(233deg);
      }

      .circle-text span:nth-child(20) {
        transform: rotate(245.3deg);
      }

      .circle-text span:nth-child(21) {
        transform: rotate(266.6deg);
      }

      .circle-text span:nth-child(22) {
        transform: rotate(276deg);
      }

      .circle-text span:nth-child(23) {
        transform: rotate(287.3deg);
      }

      .circle-text span:nth-child(24) {
        transform: rotate(300.6deg);
      }

      .circle-text span:nth-child(25) {
        transform: rotate(313deg);
      }

      .circle-text span:nth-child(26) {
        transform: rotate(332.3deg);
      }

      .circle-text span:nth-child(27) {
        transform: rotate(340deg);
      }


/*------------------Circle-box css end --------------------*/

/*------------------conformation-box css start--------------------*/
.conformation-box {
    width: 100%;
    max-width: 890px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.conformation-text-box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}

.conformation-img-box {
    width: 100%;
    max-width: 350px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.text-box-inner {
    width: 100%;
    max-width: 421px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    & h2{
        font-size: 36px;
        font-weight: 600;
        line-height: 41.69px;
    }
    p{
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        text-align: left;

    }
}
.conformation-button-section button{
    width: 227px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 0px 24px 0px 24px;
  }
  .input-box-wrapper {
      float: right !important;
      margin-right: 0px !important;
  }
  .input-box input {
    flex: 1;
    height: 38px;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 42px;
  }



  /*accordion*/
  .faq-section .accordion {
    width: 100%;
  }

  .accordion-button:not(.collapsed) {
    background-color: #000;
    padding: 24px 0px 24px 20px;
    border-radius: 10px 10px 0px 0px !important;
  }
  .accordion-button:not(.collapsed) h5{
    color: #fff !important;
  }

  .accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23fff" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>') !important;
    margin-right: 20px;
    color: #fff !important;
  }

  .accordion-button:focus {
    box-shadow: none;
  }

  .faq-section .accordion-button h5 {
    color: #000;
    margin-right: 13px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16.21px;
    text-align: left;
  }
  .accordin-tab-plus-btn {
      border: 1px solid #000;
      width: 50px;
      background: #000;
      height: 50px;
      border-radius: 50px;
      float: right;
      text-align: center;
      padding: 12px 0px;
      cursor: pointer;
      color: #fff;
  }
  .accordion-body {
    padding: 20px 0px;
    background-color: ;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin-bottom: 40px;
    border-radius: 0px 0px 10px 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    height: 445px;
  }
  .accordion-body-sec{
    height:75%;
    overflow-y: scroll;
    scrollbar-width: none;
  }
  .user-wraper{
    position: relative;
    padding: 0px 20px;
  }
  .user-wraper h5{
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
  }
  .user {
      margin: 0;
      padding: 11px;
      width: fit-content;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      background: #f0f0f0;
      border-radius: 14px;
  }
  .self-wraper {
    padding: 0px 20px;
    position: relative;
    margin: 14px 0px;
    text-align: right;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
  }
  .self {
    width: 75%;
    border-radius: 14px;
    background: #6901FF;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    line-height: 24px;
    padding: 18px;
    color: #fff;
    margin: 0;
  }

  @media screen and (min-width: 768px) {
    .accordion-button:before {
      right: 0.75rem;
    }

    .accordion-button.collapsed:after {
      right: 1.1875rem;
    }

    .faq-section .accordion-button h5 {
      margin-right: 0px;
    }
  }

  .comment-sec {
    border-top: 1px solid #f0f0f0;
    margin-top: 30px;
    padding:10px 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
  }
  .comment-box {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .comment-box img {
      cursor: pointer;
  }
  .comment-box input {
    flex: 1;
    height: 38px;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    padding-left: 10px;
    line-height: 42px;
  }
  .btn-right-sce{
    text-align: right;
    margin-top: 20px;
  }
  .comment-btn{
    width: 135px;
    padding: 10px 0px;
    border-radius: 50px;
    border: 1px solid #afafaf;
    background: #fff;
  }
  .bg-green {
      background: #26b92b;
      color: #fff;
  }
  /*Responsive*/
   @media screen and (max-width: 430px) {
    .Counter-tab-wrapper3 {
      min-height: 1000px;
      padding: 15px;
      margin-top: 30px;
      height: auto !important;
    }
    .tab label {
      width: 155px !important;
      padding: 10px 0px !important;
      font-size: 12px !important;
      margin: 10px 0px !important;
  }
    .content {
        top: 130px !important;
    }
    .input-box {
        width: 269px;
        height: 40px;
    }
    .mob{
      margin-right:0px !important;
    }
    .accordin-tab-plus-btn {
        width: 40px;
        height: 40px;
        padding: 6px 0px;
    }
    .comment-box img {
        width: 40px;
    }
    .comment-btn {
      width: 97px !important;
      padding: 2px 26px !important;
  }
  .comment-box input {
      font-size: 12px;
      max-width: 195px !important;
  }
  .self {
      width: 90% !important;
      font-size: 12px !important;
  }
  .self {
      font-size: 12px;
  }

  }
  /* end css 17-07-2024 */
  .alert .close {
      position: absolute;
      right: 9px;
      color: #cd0000;
      text-decoration: none;
      font-size: 23px;
      top: 0;
  }


  #domain1 {
      margin-top: 2px !important;
  }

  /*05-08-2024 file upload in ai chat*/

  .file-box-wraper {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
  }

  .doc-file-box {
      border-radius: 9px;
      padding: 4px;
      background: #6901FF;
      width: 275px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: space-around;
      align-items: center;
      margin-top: 15px;
  }

  .doc-file-box p {
      margin: 0px !important;
      color: #fff;
  }
  .doc-icon {
      font-size: 25px;
      color: #f1f1f1 ;
  }


  @media screen and (min-width: 1024px) {
    .input-box {
      width: 370px !important;
    }
  }

  @media screen and (min-width: 768px) {

    .tab label {
      width: 150px !important;
    }


    .input-box {
      width: 260px !important;
    }
  }

  /*05-08-2024 file upload in ai chat end*/
  #card-element {
      border: 1px solid #bfbfbf;
      padding: 23px 8px;
  }



  /*28-08-2024*/
  .footer {
      display: none;
  }