:root {
  --primary-font: rgba(65, 39, 218, 1);
  --primary--color: rgba(80, 57, 238, 1);
  --gradient-primary: linear-gradient(90deg, #27187e 0%, #655bf7 100%);
  --light-font: rgba(140, 139, 250, 1);
  --btn-gradinet-hover: linear-gradient(90deg, #655bf7 0%, #27187e 100%);
  --light-primary: rgba(181, 184, 253, 1);
  --dark-primary: rgba(39, 24, 126, 1);
  --sec-dark-primary: rgba(20, 27, 52, 1);
  --font-color: rgba(117, 118, 135, 1);
  --sec-font-color: rgba(151, 151, 167, 1);
  --border-color: rgba(226, 226, 233, 1);
  --sec-border-color: rgba(206, 206, 216, 1);
  --dark-lavender: rgba(233, 234, 254, 1);
  --purple-color: rgba(101, 91, 247, 1);
  --light-purple: rgba(214, 217, 254, 1);
  --sec-light-purple: rgba(243, 244, 255, 1);
  --basic-color: #ffff;
  --gray-bg: rgba(241, 241, 246, 1);
  --header-gradinet: linear-gradient(
    90deg,
    rgb(78, 67, 203) 0%,
    rgb(42, 27, 131) 100%
  );
  --dark-color: rgba(50, 51, 64, 1);
  --sec-dark-color: rgba(22, 22, 30, 1);
  --light-gray: rgba(181, 181, 194, 1);
  --green-color: rgba(8, 187, 50, 1);
  --light-green: rgba(72, 214, 105, 1);
  --dark-green: rgba(0, 147, 34, 1);
  --light-bg: rgba(250, 250, 253, 1);
  --deep-blue: rgba(54, 32, 183, 1);
  --dark-gray: rgba(83, 84, 100, 1);
}

::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, 0.2862745098);
  height: 1px;
  width: 1px;
}

::-webkit-scrollbar-thumb {
  background-color: #fcfcfc;
  border-radius: 9px;
}

body {
  font-family: "Rubik", sans-serif;
}

.body-bg {
  background-color: rgb(250, 250, 250);
}

a {
  text-decoration: none;
  cursor: pointer;
}

.main-btn {
  font-size: 16px;
  font-weight: 500;
  border-radius: 25px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 155px;
  gap: 8px;
  color: var(--basic-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  padding: 0 32px;
}

.primary-btn {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background: var(--gradient-primary);
  border: 1px solid var(--primary--color);
  -webkit-box-shadow: 0px 4px 13px -2px rgba(68, 42, 221, 0.32);
          box-shadow: 0px 4px 13px -2px rgba(68, 42, 221, 0.32);
}
.primary-btn:hover {
  background: var(--btn-gradinet-hover);
}

.light-btn {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: 1px solid var(--primary--color);
  color: var(--primary--color);
}
.light-btn:hover {
  background: var(--btn-gradinet-hover);
  color: var(--basic-color);
}

.p-32 {
  padding: 32px !important;
}

.py-64 {
  padding: 64px 0;
}

.pf-16 {
  padding: 16px !important;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.pb-64 {
  padding-bottom: 64px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-16 {
  gap: 16px !important;
}

.intro-page {
  position: relative;
  padding: 64px 24px;
}
.intro-page .swiper {
  padding-top: 64px;
}
.intro-page .slide-box {
  text-align: center;
}
.intro-page .slide-box img {
  text-align: center !important;
  width: 100%;
  margin-bottom: 64px;
}
.intro-page .slide-box .box-title {
  font-size: 28px;
  font-weight: 600;
  background: var(--gradient-primary);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  margin-bottom: 4px;
}
.intro-page .slide-box .box-paragraph {
  font-size: 18px;
  font-weight: 400;
  color: var(--light-font);
  margin-bottom: 16px;
}
.intro-page .swiper-text-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.intro-page .swiper-text-box .swiper-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary--color);
  position: absolute;
  z-index: 10;
}

.swiper-pagination {
  position: absolute;
  top: 0 !important;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  top: 0 !important;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  bottom: auto;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--gradient-primary);
  width: 10px;
  height: 24px !important;
  border-radius: 10px !important;
}

.swiper-pagination-bullet {
  background-color: var(--primary--color);
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
}

.login-page {
  padding: 64px 24px;
}
@media (max-width: 991px) {
  .login-page {
    padding: 64px 14px;
  }
}
.login-page .login-img {
  text-align: center;
  margin-bottom: 32px;
}
.login-page .box-title {
  font-size: 22px;
  font-weight: 600;
  background: var(--gradient-primary);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  margin-bottom: 4px;
}
.login-page .box-paragraph {
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-primary);
  margin-bottom: 32px;
}
.login-page .form-paragraph {
  color: var(--light-font);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 64px;
  width: 100%;
}
.login-page .form-paragraph span {
  font-weight: 500;
}
.login-page .code-time {
  color: var(--font-color);
  margin-bottom: 16px;
  font-size: 14px;
}
.login-page .code-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary--color);
}

.credit-card-inputs {
  margin-bottom: 32px;
}
.credit-card-inputs .credit-card-inputs__fields {
  gap: 16px;
}
.credit-card-inputs input {
  width: 32px;
  background-color: var(--basic-color);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.credit-card-inputs input:focus {
  outline: none;
  border: 2px solid var(--primary--color);
}

.count-down {
  font-size: 14px;
  font-weight: 400;
  color: var(--sec-font-color);
  margin-bottom: 24px;
}

.verifiy-code {
  margin-bottom: 24px;
}
.verifiy-code input {
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  border-radius: 10px !important;
  width: 50px;
  height: 60px;
  border: 1px solid var(--dark-lavender);
  color: var(--light-font);
  font-size: 24px;
  font-weight: 500;
}
.verifiy-code input:not(:-moz-placeholder-shown) {
  border: 1px solid var(--light-font);
}
.verifiy-code input:not(:-ms-input-placeholder) {
  border: 1px solid var(--light-font);
}
.verifiy-code input:not(:placeholder-shown) {
  border: 1px solid var(--light-font);
}
@media (max-width: 400px) {
  .verifiy-code input {
    width: 40px;
    height: 50px;
    font-size: 20px;
  }
}
.verifiy-code input:focus {
  border: none;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

.code-number .code-number-box {
  gap: 16px;
}
.code-number input {
  width: 40px;
  background-color: var(--basic-color);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.code-number input:focus {
  outline: none;
  border: 2px solid var(--primary--color);
}

.max-h {
  min-height: 25vh;
}

.maxh-10 {
  min-height: 10vh;
}

.home-box {
  margin-bottom: 246px;
}

.heder-content {
  background: var(--header-gradinet);
  padding: 16px;
  border-radius: 0 0 50% 50%;
  margin-bottom: 32px;
  position: fixed;
  max-width: inherit;
  width: 25%;
}
@media (max-width: 1200px) {
  .heder-content {
    width: calc(33% - 0px);
  }
}
@media (max-width: 991px) {
  .heder-content {
    width: calc(50% - 0px);
  }
}
@media (max-width: 767px) {
  .heder-content {
    width: 100%;
  }
}
.heder-content .name-text {
  color: var(--basic-color);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 32px;
}
.heder-content a {
  margin-bottom: 32px;
}
.heder-content a .fa-bell {
  color: var(--sec-dark-primary);
  background-color: var(--basic-color);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 22px;
}
.heder-content .header-title {
  max-width: 150px;
  color: var(--basic-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
}
.heder-content .header-title span {
  font-size: 14px;
}

.home-cards {
  margin-bottom: 32px;
}
.home-cards .card-box {
  -webkit-box-shadow: 0px 10px 23px 0px rgba(178, 178, 178, 0.16);
          box-shadow: 0px 10px 23px 0px rgba(178, 178, 178, 0.16);
  border-radius: 8px;
  background-color: var(--basic-color);
  padding: 16px 24px;
  position: relative;
  margin-bottom: 16px;
}
.home-cards .card-box .box-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--dark-color);
  max-width: 8vw;
  margin-bottom: 0;
}
@media (max-width: 1250px) {
  .home-cards .card-box .box-title {
    max-width: 40vw;
  }
}
.home-cards .card-box .box-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--font-color);
  margin-bottom: 0;
}
.home-cards .card-box .bg-color {
  position: absolute;
  left: 0;
  bottom: 0;
}
.home-cards .card-box .icon-box {
  position: absolute;
  left: 0;
  bottom: 0;
}

.info-box {
  margin-bottom: 32px;
}
.info-box .info-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 0;
}
.info-box .info-text span {
  background: var(--gradient-primary);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
.info-box a {
  font-size: 14px;
  font-weight: 500;
  color: var(--light-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  gap: 10px;
}

.services-box {
  margin-bottom: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  overflow: scroll;
}
.services-box .service-card {
  border: 1px solid var(--sec-border-color);
  border-radius: 6px;
  padding: 16px;
  gap: 16px;
  height: 70px;
}
.services-box .service-card .service-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-color);
  min-width: 150px;
}

.devolum-footer {
  background-color: var(--basic-color) !important;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  position: fixed;
  max-width: inherit;
  width: calc(25% - 0px);
  bottom: 0;
  -webkit-box-shadow: 0px 15px 60px 0px rgba(178, 178, 178, 0.3);
          box-shadow: 0px 15px 60px 0px rgba(178, 178, 178, 0.3);
  max-width: 100%;
  right: 0;
  padding: 10px;
}
@media (max-width: 1200px) {
  .devolum-footer {
    width: calc(33% - 0px);
  }
}
@media (max-width: 991px) {
  .devolum-footer {
    width: calc(50% - 0px);
  }
}
@media (max-width: 767px) {
  .devolum-footer {
    width: 100%;
  }
}
.devolum-footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  list-style: none;
  padding: 0;
  margin: 0;
}
.devolum-footer ul li {
  text-align: center !important;
}
.devolum-footer ul li a.active .list-text, .devolum-footer ul li a:hover .list-text {
  color: var(--dark-primary);
}
.devolum-footer ul li a.active svg path, .devolum-footer ul li a:hover svg path {
  stroke: var(--dark-primary);
}
.devolum-footer ul li a .list-text {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-size: 12px;
  font-weight: 400;
  color: var(--light-gray);
  margin-bottom: 0;
}
.devolum-footer ul li a svg {
  margin-bottom: 4px;
}
.devolum-footer ul li a svg path {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  stroke: var(--light-gray);
}

.mb-head {
  margin-bottom: 102px !important;
  position: relative;
}

.heder-text {
  background-image: url("../images/BG.png");
  padding: 16px;
  color: var(--basic-color);
  gap: 16px 24px;
  margin-bottom: 16px;
  max-width: inherit;
  width: calc(25% - 0px);
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 0;
  height: 70px;
  z-index: 100;
}
@media (max-width: 1200px) {
  .heder-text {
    width: calc(33% - 0px);
  }
}
@media (max-width: 991px) {
  .heder-text {
    width: calc(50% - 0px);
  }
}
@media (max-width: 767px) {
  .heder-text {
    width: 100%;
  }
}
.heder-text i {
  font-size: 12px;
  border: 2px solid var(--basic-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.heder-text .title-box {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;
}

.saving-card {
  border: 1px solid var(--gray-bg);
  border-radius: 8px;
  background-color: var(--basic-color);
  position: relative;
  padding: 30px;
  margin-bottom: 24px;
}
.saving-card .bg-2 {
  position: absolute;
  top: 0;
  left: 0;
}
.saving-card .bg-1 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.saving-card .box-title {
  background: var(--gradient-primary);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.7;
}
.saving-card .box-paragraph {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 4px;
  color: var(--sec-font-color);
}
.saving-card .icon-img {
  text-align: end;
}
.saving-card .box-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
  color: var(--dark-color);
}

.bg-purple {
  background-color: var(--light-purple) !important;
  border: 1px solid var(--light-purple) !important;
  font-weight: 500;
  color: var(--dark-primary) !important;
}

.b-light,
.bg-purple {
  color: var(--dark-color);
  background-color: transparent;
  height: 32px;
  min-width: 110px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
  padding: 6px 12px;
}

.btn-box {
  -webkit-box-shadow: 0px 15px 60px 0px rgba(178, 178, 178, 0.3);
          box-shadow: 0px 15px 60px 0px rgba(178, 178, 178, 0.3);
  background-color: var(--basic-color);
  padding: 24px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  position: fixed;
  max-width: inherit;
  width: calc(25% - 0px);
}
@media (max-width: 1200px) {
  .btn-box {
    width: calc(33% - 0px);
  }
}
@media (max-width: 991px) {
  .btn-box {
    width: calc(50% - 0px);
  }
}
@media (max-width: 767px) {
  .btn-box {
    width: 100%;
  }
}

.mt-btn {
  margin-top: 150px;
}

.save-info {
  margin-bottom: 24px;
  position: relative;
}
.save-info:last-child {
  margin-bottom: 0;
}
.save-info::after {
  contain: "";
  position: absolute;
  background: var(--border-color);
  width: 100%;
  height: 2px;
  bottom: 0;
}
.save-info .info-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 0;
  position: relative;
}
.save-info .info-title::after {
  contain: "";
  position: absolute;
  background-color: var(--border-color);
  width: 100%;
  height: 2px;
  bottom: 0;
  right: 0;
}

.saving-list {
  background-color: var(--basic-color);
  -webkit-box-shadow: rgba(0, 0, 0, 0.041) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 2px 0px;
          box-shadow: rgba(0, 0, 0, 0.041) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 2px 0px;
  margin-bottom: 24px;
}
.saving-list ul {
  z-index: -1 !important;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
  padding: 0;
}
.saving-list ul li {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 100px;
  padding: 16px;
  position: relative;
}
.saving-list ul li:hover a, .saving-list ul li.active a {
  color: var(--primary-font);
  font-weight: 600;
}
.saving-list ul li:hover::after, .saving-list ul li.active::after {
  content: "";
  position: absolute;
  background-color: var(--primary-font);
  width: 100%;
  height: 3px;
  bottom: 0px;
  right: 0;
  border-radius: 0 0px 10px 10px;
}
.saving-list ul li a {
  color: var(--font-color);
  font-size: 14px;
  font-weight: 400;
}

.p-16 {
  padding: 16px 30px !important;
}

.saving-card .box-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-color);
  margin-bottom: 0;
}
.saving-card .box-num {
  font-size: 20px;
  font-weight: 500;
  color: var(--green-color);
  margin-bottom: 0;
}
.saving-card .save-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--sec-dark-primary);
  margin-bottom: 16px;
}
.saving-card ul {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  padding: 0;
  gap: 8px;
}
.saving-card ul .time-list {
  display: none;
}
.saving-card ul li {
  margin-bottom: 16px;
}
.saving-card ul li a {
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-font);
  border-radius: 25px;
  padding: 8px 16px;
  border: 1px solid var(--primary--color);
}
.saving-card ul li a input {
  max-width: 100px;
  border: none;
  width: auto !important;
  color: var(--primary-font);
}
.saving-card ul li a input:focus {
  outline: none;
}

.save-time {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-font);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: 4px;
  padding: 8px;
}

.goal-box {
  gap: 16px;
}
.goal-box .box-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 4px;
}
.goal-box .box-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-color);
  margin-bottom: 0px;
}

.goal-text {
  background-color: var(--basic-color);
  border: 1px solid var(--gray-bg);
  padding: 12px 24px;
  border-radius: 25px;
  margin-bottom: 24px;
  min-height: 48px;
}
.goal-text input {
  border: none;
  width: 100%;
}
.goal-text input:focus {
  outline: none;
}
.goal-text .box-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--sec-dark-color);
  margin-bottom: 0px;
}

.save-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 24px;
}

.progress-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 4px;
}
.progress-box span {
  background-color: var(--light-purple);
  width: 100%;
  height: 8px;
  border-radius: 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.progress-box span.active {
  background-color: var(--purple-color) !important;
}
.progress-box span.visited {
  background-color: var(--dark-primary) !important;
}

.input-section {
  margin-bottom: 24px;
}
.input-section label {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-primary);
  margin-bottom: 8px;
}
.input-section .phone-box {
  padding: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.input-section .phone-box input {
  background-color: var(--basic-color);
  border: 1px solid var(--border-color);
  border-radius: 0 25px 25px 0;
  padding: 10px 16px;
  border-left: none;
  width: 100%;
}
.input-section .phone-box .phone-log {
  border: 1px solid var(--border-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background-color: var(--gray-bg);
  border-radius: 25px 0 0 25px;
}
.input-section .input-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  background-color: var(--basic-color);
  border: 1px solid var(--border-color);
  border-radius: 25px;
  padding: 10px 16px;
}
.input-section .input-box input::-webkit-input-placeholder {
  color: var(--font-color);
}
.input-section .input-box input::-moz-placeholder {
  color: var(--font-color);
}
.input-section .input-box input:-ms-input-placeholder {
  color: var(--font-color);
}
.input-section .input-box input::-ms-input-placeholder {
  color: var(--font-color);
}
.input-section .input-box i,
.input-section .input-box input::placeholder {
  color: var(--font-color);
}
.input-section .input-box input {
  border: none;
  width: 100%;
}
.input-section .input-box input:focus {
  outline: none;
}

.b-rad {
  border-radius: 35px !important;
}

.min-vh {
  min-height: 55vh;
}

.max-tw {
  max-width: 150px;
}

.max-w {
  max-width: 270px;
}

.wallet-box {
  border: 2px solid var(--purple-color);
  border-radius: 16px;
  min-height: 55vh;
  overflow: hidden;
}
.wallet-box .wallet-head {
  background-color: var(--purple-color);
  padding: 8px;
  color: var(--basic-color);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 0px;
}
.wallet-box .wallet-content {
  padding: 16px 32px;
}
.wallet-box .wallet-content .primary-light {
  color: var(--purple-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  background-color: var(--sec-light-purple);
  border-radius: 25px;
  padding: 8px 12px;
}
.wallet-box .wallet-content .box-title {
  color: var(--dark-color);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}
.wallet-box .wallet-content .box-paragraph {
  color: var(--sec-font-color);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 24px;
}
.wallet-box .wallet-content .box-text {
  margin-bottom: 32px;
  background-color: var(--light-bg);
  border-radius: 6px;
  padding: 8px;
  color: var(--font-color);
  font-weight: 500;
  font-size: 14px;
}
.wallet-box .wallet-content .box-text .text {
  margin-bottom: 0;
}
.wallet-box .wallet-content .box-text span {
  color: var(--sec-dark-color);
}
.wallet-box .wallet-content .box-text span i {
  color: var(--green-color);
  -webkit-margin-start: 4px;
          margin-inline-start: 4px;
}
.wallet-box .wallet-content .box-number {
  font-size: 14px;
  gap: 8px;
}
.wallet-box .wallet-content .box-number .num-title {
  font-weight: 500;
  color: var(--primary-font);
  margin-bottom: 4px;
}
.wallet-box .wallet-content .box-number .num-text {
  font-weight: 600;
  color: var(--dark-primary);
  margin-bottom: 0;
}

.devolum-header {
  position: relative !important;
}

.answer-text {
  margin-bottom: 26px;
  -webkit-margin-end: 20px;
          margin-inline-end: 20px;
  display: block;
  position: relative;
  cursor: pointer;
  color: var(--dark-gray);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.answer-text input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.answer-text .checkmark {
  position: absolute;
  top: 0;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}
.answer-text:hover input ~ .checkmark {
  border: 2px solid var(--deep-blue);
}
.answer-text input:checked ~ .checkmark {
  background-color: white;
  border: 2px solid var(--deep-blue);
}
.answer-text .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.answer-text input:checked ~ .checkmark:after {
  display: block;
}
.answer-text .checkmark:after {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--deep-blue);
}

.input-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  background-color: var(--basic-color);
  border: 1px solid var(--border-color);
  border-radius: 25px;
  padding: 10px 16px;
}
.input-box input::-webkit-input-placeholder {
  color: var(--font-color);
}
.input-box input::-moz-placeholder {
  color: var(--font-color);
}
.input-box input:-ms-input-placeholder {
  color: var(--font-color);
}
.input-box input::-ms-input-placeholder {
  color: var(--font-color);
}
.input-box i,
.input-box input::placeholder {
  color: var(--font-color);
}
.input-box input {
  border: none;
  width: 100%;
}
.input-box input:focus {
  outline: none;
}
.input-box select {
  border: none;
  width: 100%;
  color: var(--font-color);
}
.input-box select:focus {
  outline: none;
}

.plans-switch .box-title,
.plans-switch .content-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 16px;
}
.plans-switch .box-content {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.plans-switch .box-content:has(input[type=radio]:checked) {
  border-color: var(--purple-color);
  background-color: var(--sec-light-purple);
}
.plans-switch .box-content:last-child {
  margin-bottom: 24px;
}
.plans-switch .content-title {
  font-size: 16px;
  margin-bottom: 4px;
}
.plans-switch .content-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--font-color);
  margin-bottom: 0px;
}

.text-line {
  text-align: center;
  position: relative;
}
.text-line span {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-gray);
  background-color: rgb(253, 254, 255);
  padding: 8px;
}
.text-line::after {
  content: "";
  position: absolute;
  background-color: var(--border-color);
  width: 100%;
  height: 1px;
  right: 0;
  bottom: 10px;
  z-index: -1;
}

.bg-green {
  background-color: var(--light-green);
  color: var(--basic-color);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 16px;
}

.saving-card .card-title {
  color: var(--dark-color);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}
.saving-card .logos-box {
  position: relative;
  gap: 16px;
}
.saving-card .logos-box img {
  width: 130px;
}
.saving-card .logos-box span {
  position: absolute;
  background-color: var(--border-color);
  width: 2px;
  height: 16px;
  right: 50%;
}

.national-card {
  padding: 64px 0;
}
.national-card img {
  margin-bottom: 16px;
}
.national-card .box-title {
  color: var(--dark-color);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.5;
}
.national-card .card-title {
  color: var(--dark-color);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
}
.national-card .box-text {
  color: var(--sec-font-color);
  font-size: 16px;
  font-weight: 400;
}
.national-card .card-text {
  color: var(--sec-font-color);
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 16px;
}

.crad-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  background-color: var(--gray-bg);
  border-radius: 6px;
  padding: 8px 12px;
}

.bank-content {
  margin-bottom: 32px;
  min-height: 68vh;
}
.bank-content .bank-title {
  color: var(--deep-blue);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.5;
}
.bank-content .bank-text {
  color: var(--font-color);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 32px;
}
.bank-content .input-section .input-box {
  padding: 12px 16px;
}
.bank-content .bank-card {
  margin-bottom: 16px;
  background-color: var(--basic-color);
  padding: 16px 24px;
  border: 1px solid var(--border-color);
  border-radius: 32px;
}
.bank-content .bank-card .box-title {
  margin-bottom: 0;
  color: var(--sec-dark-color);
  font-size: 16px;
  font-weight: 400;
}

.money-box {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: start !important;
}
.money-box input {
  width: auto !important;
  max-width: 30px;
  text-align: center;
}
.money-box input::-webkit-input-placeholder {
  color: var(--dark-color) !important;
  font-weight: 500;
}
.money-box input::-moz-placeholder {
  color: var(--dark-color) !important;
  font-weight: 500;
}
.money-box input:-ms-input-placeholder {
  color: var(--dark-color) !important;
  font-weight: 500;
}
.money-box input::-ms-input-placeholder {
  color: var(--dark-color) !important;
  font-weight: 500;
}
.money-box input::placeholder {
  color: var(--dark-color) !important;
  font-weight: 500;
}
.money-box .money-text {
  width: 100% !important;
  margin-bottom: 0;
  text-align: start;
  color: var(--font-color);
}

.table-content {
  padding: 64px 0;
}
.table-content .head-box {
  margin-bottom: 16px;
}
.table-content .head-box .box-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 0;
}
.table-content .head-box .box-text {
  font-weight: 500 !important;
  border-color: var(--sec-light-purple) !important;
  color: var(--purple-color) !important;
  background-color: var(--sec-light-purple) !important;
}
.table-content .table-list {
  margin: 0;
  -webkit-padding-start: 16px;
          padding-inline-start: 16px;
}
.table-content .table-list li {
  color: var(--dark-gray);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 16px;
}
.table-content .table-list li span {
  font-weight: 700;
}

.table-box .table {
  overflow: hidden;
  border-radius: 6px;
  border-style: hidden;
  -webkit-box-shadow: 0 0 0 1px var(--border-color);
          box-shadow: 0 0 0 1px var(--border-color);
  width: 100%;
  text-align: center;
  --bs-table-bg: transparent !important;
}
.table-box .table thead tr {
  background-color: var(--dark-lavender);
}
.table-box .table thead tr th {
  color: var(--deep-blue);
  font-size: 14px;
  font-weight: 600;
}
.table-box .table tbody tr td {
  color: var(--dark-color);
  font-size: 14px;
  font-weight: 400;
}

.devolum-pages .page-box {
  gap: 8px;
  margin-bottom: 24px;
  position: relative;
}
@media (max-width: 767px) {
  .devolum-pages .page-box {
    margin-bottom: 16px;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: start !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
}
.devolum-pages .page-box a {
  text-decoration: underline;
  color: var(--primary--color);
}
.sett-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sett-list li a {
  border: 1px solid var(--gray-bg);
  border-radius: 8px;
  background-color: var(--basic-color);
  padding: 16px 24px;
  margin-bottom: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.sett-list li a:hover {
  -webkit-box-shadow: 0px 4px 13px -2px rgba(69, 42, 221, 0.144);
          box-shadow: 0px 4px 13px -2px rgba(69, 42, 221, 0.144);
}
.sett-list li a i {
  color: var(--primary--color);
  font-size: 14px;
}
.sett-list li a span {
  font-size: 16px;
  color: var(--sec-dark-color);
  font-weight: 500;
}
.profile-info {
  margin-bottom: 16px;
}
.profile-info .box-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--sec-font-color);
  margin-bottom: 4px;
}
.profile-info .box-description {
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-color);
  margin-bottom: 0px;
}
.edit-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--deep-blue);
  border-radius: 20px;
  border: 1px solid var(--deep-blue);
  padding: 4px 8px;
}
.input-section .input-box {
  min-height: 48px;
}
.mb-c {
  margin-bottom: 20px !important;
}
.Modal-radioOne .box-input label {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-primary);
  margin-bottom: 8px;
}
.Modal-radioOne .box-input input,
.Modal-radioOne .box-input textarea {
  width: 100%;
  background-color: var(--basic-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
}
.Modal-radioOne .box-input input:focus,
.Modal-radioOne .box-input textarea:focus {
  outline: none;
}
.saving-btns .main-btn {
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  height: auto;
  min-width: auto;
  gap: 8px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  padding: 6px 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.radio-modal .modal-footer {
  border-top: none;
}
.radio-modal .modal-body {
  padding-bottom: 0;
}
.sett-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sett-page i {
  margin-bottom: 32px;
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
  background-color: var(--basic-color);
  color: var(--dark-primary);
  border-radius: 50%;
  height: 32px;
  width: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.collaose-box ul {
  list-style: none;
  margin: 0;
  padding-top: 16px;
}
.collaose-box ul li {
  margin-bottom: 8px;
}
.collaose-box ul li:last-child {
  margin-bottom: 0px;
}
.collaose-box ul li a {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-primary);
  margin-bottom: 0px;
}
.collapse-btn .fa-chevron-down {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  color: var(--dark-primary);
}
.collapse-btn[aria-expanded=true] .fa-chevron-down {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.First-Modal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.First-Modal ul li {
  font-size: 14px;
  font-weight: 400;
  color: var(--sec-font-color);
  margin-bottom: 8px;
}
.First-Modal ul li span {
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-color);
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
}
.modal:dir(ltr) .modal-dialog .modal-header .btn-close {
  margin: auto !important;
  margin-right: 0 !important;
}
.plans-box {
  min-height: 78vh;
  max-height: 100%;
  margin-bottom: 80px;
}


.saving-card ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.saving-card ul .time-list {
  display: none;
}
.saving-card ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin-bottom: 8px;
}
.saving-card ul li label {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-primary);
}
.saving-card ul li input {
  max-width: 60%;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-font);
  border-radius: 25px;
  padding: 8px 16px;
  border: 1px solid var(--primary--color);
}
.saving-card ul li input::-webkit-input-placeholder {
  color: var(--primary-font);
}
.saving-card ul li input::-moz-placeholder {
  color: var(--primary-font);
}
.saving-card ul li input:-ms-input-placeholder {
  color: var(--primary-font);
}
.saving-card ul li input::-ms-input-placeholder {
  color: var(--primary-font);
}
.saving-card ul li input::placeholder {
  color: var(--primary-font);
}
.saving-card ul li input:focus {
  outline: none;
}
.plus-box {
  margin-bottom: 8px;
}
.plus-box .info-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-primary);
  margin-bottom: 0;
}
/* .total-box .total-text {
  display: none;
} */
.total-box .main-btn {
  min-width: auto !important;
  margin-bottom: 0px;
}
.mb-80{
  margin-bottom: 80px !important;
}