h1 { font-size: 40px; line-height: normal; margin: 0; padding: 0; color: #222; font-weight: 700 }
h2 { font-size: 36px; line-height: normal; margin: 0; padding: 0; color: #222; font-weight: 700 }
h3 { font-size: 32px; line-height: normal; margin: 0; padding: 0; color: #222; font-weight: 700 }
h4 { font-size: 30px; line-height: normal; margin: 0; padding: 0; color: #222; font-weight: 700 }


body {background-color: #F5F5F5; font-size: 18px; line-height:normal; color:#534A5A; font-family: 'Inter', sans-serif; font-weight: 400;}
p:last-child { margin-bottom: 0 }
a { color: #8d6e63; transition: all .3s ease-in-out; text-decoration: none;}
a:hover { color: #222 }
a:hover, a:focus { text-decoration: none }
ul {margin: 0; padding: 0; list-style: none;}
.form-group { margin-bottom: 24px; position: relative;}
.form-group>label { margin-bottom: 4px; font-weight: 400; font-size: 14px; line-height: 130%; color: #534A5A; margin-bottom: 8px;}
.form-control { background-color: #FFFFFF; mix-blend-mode: normal; border: 1px solid #C6C5C7; border-radius: 4px; padding:11px 15px; font-weight: 400; font-size: 16px; color: #534A5A;}
.form-control:focus, .custom-select:focus { box-shadow: none; border:1px solid #C6C5C7; outline: none; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select.form-control:not([size]):not([multiple]) { height: calc(100%); }
select.customArrow { background-image: url('../images/select-arrow.png'); background-repeat: no-repeat; background-position: right .75rem center; background-size: 15px; }
img {max-width: 100%;}

/* select::-ms-expand { display: none;} */
textarea { overflow: hidden; resize: none; }

/* input number arrow hide */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */
input[type=number] { -moz-appearance: textfield; }

/* input number arrow hide */

/*input-group start*/
.input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.input-group .input-group-addon { position: absolute; right: 14px; top: 16px; font-size: 20px; }

/* custom checkbox and radio */
.form-check { display: block; min-height: initial; padding-left: 27px; margin-bottom: 0; }
.form-check .form-check-input {width: 18px; height: 18px; border: 2px solid #534A5A;  border-radius: 4px; margin-top: 2px;}
.form-check .form-check-input:focus {box-shadow: none;}
.form-check .form-check-label {font-weight: 600; font-size: 16px; line-height: 130%; color: #534A5A; }
.form-check .form-check-input:checked {background-color: #534A5A;}

.form-check input[type=radio].form-check-input {width: 20px; height: 20px; border: 2px solid #534A5A; border-radius: 100%; margin-top: 0;}
.form-check input[type=radio].form-check-input:checked {background-color: #fff; background-image: url(../images/check-radio.png); background-position:center; background-repeat: no-repeat; border: 2px solid #655298;}


/* modal open effect start */
.modal.fade .modal-dialog { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); top: 300px; opacity: 0; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; }
.modal.fade.show .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform: translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0); opacity: 1; }
/* modal open effect end */


.wrapper {display: flex; flex-direction: column; min-height: 100vh;}

/*------ Header start ------*/
.navbar {padding: 10px 0; background-color: #fff;}
.navbar-brand img {max-width: 350px;}
.header-mid {margin-right: auto;}
.header-balance {display: flex; align-items: center; font-weight: 400; font-size: 20px; line-height: 24px; text-transform: capitalize; color: #81758D;}
.header-balance img {margin-right: 12px; }
.header-balance span {font-weight: 600; font-size: 20px; line-height: 24px; text-transform: capitalize; color: #534A5A; margin-left: 4px;}

.header-right {display: flex; align-items: center;}
.header-right .hederLogin-btn {background: linear-gradient(180deg, #655298 0%, #80548F 100%); border-radius: 4px; font-weight: 600; font-size: 16px; line-height: 140%; text-align: right; color: #FFFFFF; padding: 14px 42px;}
.header-right .icon-header {margin-left: 10px;}
.header-right .icon-header:first-child {margin-left:0;}
.header-right .icon-header img {max-width: 30px;}

.mid { flex: 1 1 auto; display: flex; align-items: center;}

/*----- landing page start -----*/
.landing-banner {position: relative;}
.landing-banner .landingBannerImg-mobile {display: none;}
.landing-banner .landingBanner-content {position: absolute; top: 50%; left: 80px; transform: translateY(-50%); max-width: 600px;}
.landing-banner .landingBanner-content h1 {font-weight: 600; font-size: 48px; line-height: 130%; background: linear-gradient(180deg, #51F04E 0%, #66FF63 0%, #2AA927 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; margin-top: 8px;}
.landing-banner .landingBanner-content h1 span { display: block; background: linear-gradient(180deg, #FFE53B 0%, #FFA200 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.landing-banner .landingBanner-content .text {margin-top: 24px; font-weight: 400; font-size: 18px; line-height: 150%; color: #FFFFFF;}

.landingAbout {padding: 60px 0;}
.landingSection-title {font-weight: 600; font-size: 40px; line-height: 130%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #51F04E 0%, #66FF63 0%, #2AA927 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 24px; ;}
.landingSection-title span {background: linear-gradient(180deg, #FFE53B 0%, #FFA200 100%), linear-gradient(180deg, #ACD265 0%, #6A9446 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-left: 10px;}
.landingAbout .landingAbout-text {font-weight: 400; font-size: 18px; line-height: 150%; text-align: center; color: #534A5A; max-width: 1057px; margin: 0 auto 32px; }

.landingHowItWork .hiw-btn {display: flex; align-items: center; justify-content: center; background: #FFFFFF; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15); border-radius: 4px;  max-width: 310px; margin: 0 auto 32px;}
.landingHowItWork .hiw-btn a {padding: 10px 28px; background-color: #fff; border-radius: 4px; font-weight: 600; font-size: 20px; line-height: 130%; color: #81758D;}
.landingHowItWork .hiw-btn a:hover {color: #000; }
.landingHowItWork .hiw-btn a.active {background-color: #534A5A; color: #fff;}
.howItWork-col {background-color: #FFFFFF; border-radius: 8px; margin-bottom: 40px;}
.howItWork-col .howItWorkCol-img {width: 100%; height: 235px; overflow: hidden;}
.howItWork-col .howItWorkCol-img img { object-fit: cover; height: 100%; width: 100%; max-width: 100%; border-radius: 8px 8px 0 0; }
.howItWork-col .howItWorkCol-title {padding: 20px 15px 12px; font-weight: 600; font-size: 20px; line-height: 120%; color: #534A5A; display: flex;}
.howItWork-col .howItWorkCol-title:hover {color: #6f5496;}
.howItWork-col .text {padding: 0 15px 20px; font-weight: 400; font-size: 14px; line-height: 150%; color: #81758D;}

/*----- footer -----*/
footer {background-color: #271F2D; padding: 15px;}
.footer-content {text-align: center; font-weight: 400; font-size: 16px; line-height: 19px; text-transform: capitalize; color: #FFFFFF;}
.footer-content .foo-link {color: #fff;}
.footer-content .foo-link:hover {color: #c9c9c9;}

/* login page */
.login-col {background-color: #FFFFFF; box-shadow: 0px 4px 12px rgba(83, 74, 90, 0.1); border-radius: 8px; max-width: 615px; margin:50px auto; padding: 40px;}
.login-title {font-weight: 600; font-size: 32px; line-height: 130%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #51F04E 0%, #66FF63 0%, #2AA927 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; margin-bottom: 32px;}
.login-title span {background: linear-gradient(180deg, #FFE53B 0%, #FFA200 100%), linear-gradient(180deg, #ACD265 0%, #6A9446 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-left: 5px;}
.remember-forgot {display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;}
.remember-forgot .forgotPassword { font-weight: 600; font-size: 16px; line-height: 130%; text-align: right; color: #534A5A;}
.remember-forgot .forgotPassword:hover {color: #80548F;}
.loginBtn {margin-top: 8px; background: linear-gradient(180deg, #655298 0%, #80548F 100%); border-radius: 4px; width: 100%; font-weight: 600; font-size: 16px; line-height: 140%; color: #FFF; padding: 12px 15px}
.loginBtn:hover, .loginBtn:active {color: #fff !important; background: linear-gradient(180deg, #534A5A 0%, #534A5A 100%);}

/* factor authentication code */
.userVerification-text {font-weight: 400; font-size: 18px; line-height: 130%; text-align: center; color: #534A5A; margin-bottom: 24px;}
.userVerification-input {margin-bottom: 24px; display: flex; align-items: center; }
.userVerification-input .form-control {flex: 1; margin-left: 15px; text-align: center; padding: 17px 5px; font-weight: 600; font-size: 20px; }
.userVerification-input .form-control:first-child { margin-left: 0;}

/* forgot password */
.backLogin-btn {text-align: center; font-weight: 600; font-size: 16px; line-height: 140%; background: linear-gradient(180deg, #655298 0%, #80548F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 15px; display: inline-block;}
.backLogin-btn:hover {color: #534A5A; }


/* home page */
.homePage {margin: 50px 0;}
.pageTitle {font-weight: 600; font-size: 32px; line-height: 130%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #51F04E 0%, #66FF63 0%, #2AA927 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 32px;}
.pageTitle span {background: linear-gradient(180deg, #FFE53B 0%, #FFA200 100%), linear-gradient(180deg, #ACD265 0%, #6A9446 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-left: 10px;}
.welcome-col {display: flex; align-items: center; justify-content: space-between; background-color: #FFFFFF; border-radius: 8px; padding: 12px 24px; margin-bottom: 32px;}
.welcome-col .total {font-weight: 400; font-size: 24px; line-height: 130%; text-transform: capitalize; color: rgb(129 117 141 / 50%);}
.welcome-col .total span {font-weight: 600; color: rgb(83 74 90 / 50%);}
.welcome-col.history .total {font-weight: 600; color: #534A5A;}
.welcome-col.history:hover {background-color:#6f5395;}
.welcome-col.history:hover .total {color: #fff;}

/* deposit history */
.depsit-table {background: #FFFFFF; border: 1px solid rgba(221, 221, 221, 0.4); box-shadow: 0px 4px 12px rgba(83, 74, 90, 0.1); border-radius: 8px;}
.table {margin-bottom: 24px;}
.table thead {background-color: #F7F7F7; }
.table thead th {font-weight: 600; font-size: 14px; line-height: 17px; color: #534A5A; padding: 15px 10px;}
.table thead th:first-child {border-radius: 8px 0 0 0;}
.table thead th:last-child {border-radius: 0 8px 0 0;}
.table tr {border-bottom: 1px solid #ddd;}
.table tr td {font-weight: 400; font-size: 14px; line-height: 17px; color: #534A5A; padding: 10px;}
.table .successFailed { border-radius: 45px; font-weight: 600; font-size: 14px; line-height: 17px; text-align: center; padding: 4px 12px;}
.table .successFailed.success {background-color: #CCFFCC; color: #00A800;}
.table .successFailed.failed {background-color: #FFE1E1; color: #FF0C0C;}
.pagination-item {display: flex; align-items: center; justify-content: space-between; flex-flow: wrap; margin-bottom: 25px; padding: 0 32px;}
.pagination-item .item {font-weight: 500; font-size: 14px; line-height: 18px; color: #534A5A;}
.pagination-item .pagination {margin: 0; padding: 0; display: flex;}
.pagination-item .pagination li {margin-left: 10px;}
.pagination-item .pagination li:first-child {margin-left: 0;}
.pagination-item .pagination li a {background: linear-gradient(180deg, #f3f3f3 0%, #f3f3f3 100%); border-radius: 4px; font-weight: 400; font-size: 16px; line-height: 18px; color: #534A5A; padding: 3px 7px; transition: none;}
.pagination-item .pagination li a.iocon-arrow {background: linear-gradient(180deg, #fff 0%, #fff 100%); color: #81758D; font-size: 16px;}
.pagination-item .pagination li a:hover, .pagination-item .pagination li a.active {background: linear-gradient(180deg, #655298 0%, #80548F 100%); color: #fff;}

/* my wallet */
.wallet-depoWith-btn {background: linear-gradient(180deg, #655298 0%, #80548F 100%); border-radius: 4px; text-align: center; padding: 12px; font-weight: 600; font-size: 18px; line-height: 140%; color: #FFFFFF; display: block; margin-bottom: 32px;}
.wallet-depoWith-btn:hover {background: linear-gradient(180deg, #534A5A 0%, #534A5A 100%); color: #fff;}
.exchange-col {background-color: #FFFFFF; box-shadow: 0px 4px 12px rgba(83, 74, 90, 0.1); border-radius: 8px; display: flex; align-items: center; padding: 32px; margin-bottom: 72px;}
.exchange-col .Wampum {padding-right: 50px; margin-right: 50px; border-right: 1px solid #DDDDDD;}
.exchange-col .Wampum .toUsd {font-weight: 600; font-size: 24px; line-height: 130%; text-transform: capitalize; background: linear-gradient(180deg, #51F04E 0%, #66FF63 0%, #2AA927 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.exchange-col .Wampum .toUsd span {background: linear-gradient(180deg, #FFE53B 0%, #FFA200 100%), linear-gradient(180deg, #ACD265 0%, #6A9446 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.exchange-col .Wampum .crditUsd {font-weight: 600; font-size: 20px; line-height: 130%; text-transform: capitalize; color: #534A5A; margin-top: 15px;}
.exchange-col .wampumCredit {display: flex; align-items: center; font-weight: 400; font-size: 20px; line-height: 130%; text-transform: capitalize; color: #534A5A;}
.exchange-col .wampumCredit span {padding: 0 15px;}
.exchange-col .wampumCredit span strong {font-weight: 600;}
.exchange-col .wampumCredit .form-control {width: 100px; font-weight: 600; font-size: 20px; padding: 8px 15px;}
.exchange-col .wampumCredit .convert-btn {background: linear-gradient(180deg, #655298 0%, #80548F 100%); border-radius: 4px; width: 160px; font-weight: 600; font-size: 16px; line-height: 140%; text-align: center; color: #FFFFFF; padding: 13px; }
.exchange-col .wampumCredit .convert-btn:hover {background: linear-gradient(180deg, #534A5A 0%, #534A5A 100%); color: #fff;}

/* deposit Amount modal */
.depositAmount-modal .modal-body {padding: 25px;}
.proceedWith-text {font-weight: 600; font-size: 20px; line-height: 130%; text-align: center; color: #534A5A;}
.login-col .form-group .error {display: block; font-weight: 400; font-size: 12px; line-height: 130%; color: #FF0C0C; margin-top: 4px;}
.depositAmount-modal .yesNo-btn {display: flex; margin-top: 32px;}
.depositAmount-modal .yesNo-btn a {flex: 1; border-radius: 4px; border: 1px solid #393185; margin-left: 25px; font-weight: 600; font-size: 16px; line-height: 140%; text-align: center; padding: 12px 10px; transition: none;}
.depositAmount-modal .yesNo-btn a:first-child {margin-left: 0;}
.depositAmount-modal .yesNo-btn .yes {background: linear-gradient(180deg, #655298 0%, #80548F 100%); color: #FFFFFF;}
.depositAmount-modal .yesNo-btn .no {background: linear-gradient(180deg, #fff 0%, #fff 100%); border: 1px solid #393185; color: #393185;}
.depositAmount-modal .yesNo-btn .yes:hover, .depositAmount-modal .yesNo-btn .no:hover {background: linear-gradient(180deg, #534A5A 0%, #534A5A 100%); border: 1px solid #534A5A; color: #fff;}

.depositAmount-modal .modalTitle {font-weight: 600; font-size: 32px; line-height: 130%; display: flex; align-items: center; background: linear-gradient(180deg, #51F04E 0%, #66FF63 0%, #2AA927 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;  }
.depositAmount-modal .modalTitle span {background: linear-gradient(180deg, #51F04E 0%, #66FF63 0%, #2AA927 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.checkGroup {margin-bottom: 24px;}
.checkGroup .form-check {background-color: #FDF9FF; border-radius: 4px; border: 1px solid #655298; padding: 18px;}
.checkGroup .form-check .form-check-label {margin-left: 12px;}
.checkGroup .form-check input[type=radio].form-check-input {margin: 7px 0 0 0;}
.success-img {margin-bottom: 32px; text-align: center;}

.logout-title {font-weight: 600; font-size: 20px; line-height: 130%; text-align: center; color: #534A5A; margin-bottom: 15px;}
.logout-text {font-weight: 400; font-size: 16px; line-height: 130%; text-align: center; color: #81758D;}

/* change password */
.login-col .changePassword .form-control {padding-right: 47px;}
.login-col .changePassword i {position: absolute; right: 15px; top: 15px; cursor: pointer;}

/* my profile */
.profile-upload {position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 25px;}
.profile-upload .profile-pic { height: 100%; max-width: 100%; width: 100%}
.profile-upload .file-upload { display: none; }
.profile-upload .circle { border-radius: 100%; overflow: hidden; width: 80px; height:80px; }
.profile-upload .upload-button { cursor: pointer; border: 1px solid #393185; border-radius: 4px; font-weight: 600; font-size: 16px; line-height: 140%; color: #393185; width: 155px; padding: 12px 10px; text-align: center; margin-left: 25px;}
.profile-upload .upload-button:hover {background-color: #534A5A; border-color: #534A5A; color: #fff;}

.two-col {display: flex;}
.two-col .form-group {flex: 1; margin-left: 24px;}
.two-col .form-group:first-child {margin-left: 0;}
.input-group.date .form-control {border-right: 0;}
.input-group.date .input-group-text {border-radius: 0 4px 4px 0; background-color: transparent; height: 100%; font-size: 18px; color: #534A5A; border-color: #C6C5C7;}
.datepicker {width: 255px;}
.datepicker table {width: 100%;}
.datepicker td, .datepicker th {height: 30px;}
.alert-danger{ color: red;}
.page-item.active .page-link {
    z-index: 1;
    background: linear-gradient(180deg, #655298 0%, #80548F 100%);
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    display: block;

}
.table .successFailed.pending {
    background-color: #f8f9fa;
    color: #ffc107;
}

#exTab1 .tab-content {
    color : white;
    background-color: #428bca;
    padding : 5px 15px;
  }

  #exTab2 h3 {
    color : white;
    background-color: #428bca;
    padding : 5px 15px;
  }

  /* remove border radius for the tab */

  #exTab1 .nav-pills > li > a {
    border-radius: 0;
  }

  /* change border radius for the tab , apply corners on top*/

  #exTab3 .nav-pills > li > a {
    border-radius: 4px 4px 0 0 ;
  }

  #exTab3 .tab-content {
    color : white;
    background-color: #428bca;
    padding : 5px 15px;
  }

  .form-control.is-invalid, .was-validated .form-control:invalid{
    background-image:none !important;
  }


 

  .loading {
      position: fixed;
      z-index: 1111;
      height: 2em;
      width: 2em;
      overflow: show;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
  }

  .loading:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));

      background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
     
  }

  / :not(:required) hides these rules from IE9 and below / .loading:not(:required) {
      / hide "loading..." text / font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
  }

  .loading:not(:required):after {
      content: '';
      display: block;
      font-size: 10px;
      width: 1em;
      height: 1em;
      margin-top: -0.5em;
      -webkit-animation: spinner 150ms infinite linear;
      -moz-animation: spinner 150ms infinite linear;
      -ms-animation: spinner 150ms infinite linear;
      -o-animation: spinner 150ms infinite linear;
      animation: spinner 150ms infinite linear;
      border-radius: 0.5em;
      -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
      box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  }


  @-webkit-keyframes spinner {
      0% {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
      }

      100% {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }

  @-moz-keyframes spinner {
      0% {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
      }

      100% {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }

  @-o-keyframes spinner {
      0% {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
      }

      100% {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }

  @keyframes spinner {
      0% {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
      }

      100% {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
























/*=======================================================================================
                    Responsive start
=========================================================================================*/
@media (min-width: 576px) {
    .depositAmount-modal .modal-dialog {max-width: 425px;}
}


@media (max-width: 1399.98px) {
    /* my wallet */
    .my-wallet {padding: 25px;}
    .exchange-col .Wampum { padding-right: 30px; margin-right: 30px;}
    .exchange-col .Wampum .toUsd {font-size: 21px;}
    .exchange-col .Wampum .crditUsd { font-size: 19px; margin-top: 12px; }
    .exchange-col .wampumCredit .form-control { width: 90px; font-size: 18px; padding: 7px 15px; }
    .exchange-col .wampumCredit span {padding: 0 10px;}
    .exchange-col .wampumCredit .convert-btn {width: 115px; padding: 11px; margin-left: 10px;}

}


@media (max-width: 1199.98px) {
    .landing-banner .landingBanner-content {max-width: 465px;}
    .landing-banner .landingBanner-content h1 {font-size: 38px; line-height: 110%; }
    .landing-banner .landingBanner-content .text { margin-top: 15px; font-size: 16px; line-height: 140%; }

    .landingAbout { padding: 40px 0; }
    .landingSection-title {font-size: 36px; line-height: 90%; margin-bottom: 20px;}
    .landingAbout .landingAbout-text {font-size: 16px; line-height: 140%;}
    .landingHowItWork .hiw-btn {max-width: 260px; margin-top: 25px;}
    .landingHowItWork .hiw-btn a {padding: 10px 25px; font-size: 16px; line-height: 110%;}

    .howItWork-col .howItWorkCol-img {height: 200px;}

    /* login page */
    .login-col {max-width: 550px; padding: 30px; }
    .login-title { font-size: 30px; line-height: 120%; margin-bottom: 20px;}
    .userVerification-text { font-size: 16px;  margin-bottom: 20px; }
    .loginBtn {margin-top: 0;}
    .userVerification-input .form-control {padding: 13px 5px; font-size: 18px;}
    .remember-forgot {margin-bottom: 25px;}

    /* home page */
    .pageTitle {font-size: 30px;}
    .welcome-col .total {font-size: 22px;}
    .welcome-col .img img {max-width: 60px;}

    /* my wallet */
    .exchange-col {flex-direction: column; text-align: center;}
    .exchange-col .Wampum { padding-right: 0; margin-right: 0; border-right: 0;}
    .exchange-col .wampumCredit {margin-top: 18px;}





}


@media (max-width: 991.98px) {
    .header-right .icon-header {margin-left: 8px;}
    .landing-banner .landingBanner-content {left: 30px; max-width: 400px;}
    .landing-banner .landingBanner-content img {max-width: 50px;}
    .landing-banner .landingBanner-content h1 {font-size: 32px;}
    .landing-banner .landingBanner-content .text {margin-top: 10px;}

    .landingAbout { padding: 35px 0; }
    .landingSection-title { font-size: 34px; line-height: 80%;}

    .howItWork-col .howItWorkCol-title {padding: 20px 15px 7px;}

    /* home page */
    .welcome-col {margin-bottom: 20px;}
    .welcome-col .total {font-size: 20px;}
    .welcome-col .img img {max-width: 50px;}

    /* my wallet */
    .exchange-col {margin-bottom: 50px;}


}


@media (max-width: 767.98px) {
    .navbar { padding: 15px 0 10px;}
    .navbar-brand { /* flex: 100%; */  text-align: center;
        /* margin: 0px 0 10px; */
        padding: 0;}
    .navbar-brand img { max-width: 300px; }
    .header-right .icon-header { margin-left: 5px; }
    .landing-banner .landingBanner-content { left: 20px; max-width: 390px; }
    .landing-banner .landingBanner-content img { max-width: 45px; }
    .landing-banner .landingBanner-content h1 { font-size: 28px; margin-top: 5px; }
    .landing-banner .landingBanner-content .text { margin-top: 7px;}

    .landingSection-title {font-size: 30px;}

    .howItWork-col {margin-bottom: 30px;}
    .login-title { font-size: 28px; }

    /* deposit history */
    .homePage { margin: 30px 0; }
    .pageTitle { font-size: 28px; margin-bottom: 25px;}
    .pageTitle span {margin-left: 8px;}
    .pagination-item {flex-direction: column;}
    .pagination-item .item {margin: 20px 0 0;}

    /* my wallet */
    .exchange-col {padding: 20px;}
    .exchange-col .wampumCredit {flex-flow: wrap; justify-content: center;}
    .exchange-col .wampumCredit .form-control {width: 110px;}
    .exchange-col .wampumCredit .convert-btn { width: 160px; margin-left: 0; margin-top: 15px; }
    .header-right .hederLogin-btn {
      font-size: 15px;
      padding: 8px 25px;
  }

}


@media (max-width: 575.98px) {
    .landing-banner .landingBannerImg-mobile {display: block;}
    .landing-banner .landingBannerImg-desktop {display: none;}
    .landing-banner .landingBanner-content { max-width: 100%; position: initial; background-color: #39065d; padding: 25px 15px; text-align: center; transform: translateY(0);}

    .landingAbout { padding: 30px 0; }
    .landingSection-title { font-size: 28px; margin-bottom: 17px; }
    .landingAbout .landingAbout-text {margin: 0 auto 25px;}
    .howItWork-col .howItWorkCol-title { padding: 15px 15px 7px; }

    .footer-content {font-size: 14px;}

    /* deposit history */
    .pageTitle { font-size: 26px; margin-bottom: 22px; }

    /* my wallet */
    .exchange-col {margin-bottom: 40px;}
    .exchange-col .Wampum .toUsd { font-size: 20px; }
    .exchange-col .Wampum .crditUsd { font-size: 18px; margin-top: 7px; }
    .exchange-col .wampumCredit { margin-top: 15px; font-size: 18px;}
    .exchange-col .wampumCredit .form-control { width: 90px; padding: 7px 10px; }
    .exchange-col .wampumCredit .convert-btn { width: 120px; margin-left: 0; margin-top: 15px; padding: 10px; }

    /* deposit Amount modal */
    .proceedWith-text {font-size: 18px;}
    .depositAmount-modal .yesNo-btn {margin-top: 25px;}
    .depositAmount-modal .yesNo-btn a {padding: 10px; margin-left: 15px;}

    /* my profile */
    .profile-upload .upload-button {padding: 10px; width: 140px; font-size: 15px;}
    .two-col .form-group { margin-left: 20px; }

}


@media (max-width: 480px) {
  .navbar-brand img { max-width: 240px; }
    .form-group { margin-bottom: 15px; }
    .form-control {padding: 10px 12px;}
    .navbar-brand {margin-right: 15px;}
    .header-balance {font-size: 16px; line-height: 16px;}
    .header-balance img { margin-right: 8px; max-width: 32px; }
    .header-balance span {font-size: 16px; line-height: 16px;}
    .header-right .icon-header { margin-left: 2px; }
    .header-right .icon-header img { max-width: 25px; }

    .landingSection-title { font-size: 26px; margin-bottom: 15px; }
    .landing-banner .landingBanner-content {padding: 20px 15px;}
    .landing-banner .landingBanner-content h1 { font-size: 24px;}
    .landingAbout .landingAbout-text { margin: 0 auto 20px; }
    .landingHowItWork .hiw-btn {max-width: 240px;}
    .landingHowItWork .hiw-btn a {font-size: 14px;}
    .howItWork-col { margin-bottom: 20px; }

    /* login page */
    .login-col { padding: 20px }
    .login-title { font-size: 26px; }
    .remember-forgot { 
       /* flex-flow: column; */
     align-items: baseline;
    }
    .remember-forgot .forgotPassword {margin-top: 10px;}
    .userVerification-input .form-control { padding: 8px 5px; font-size: 16px; font-weight: 800; }
    .loginBtn {padding: 10px 15px}

    /* deposit history */
    .pageTitle { font-size: 24px; margin-bottom: 20px; }
    .pageTitle span { margin-left: 6px;}
    .pagination-item {padding: 0 15px;}
    .pagination-item .pagination li { margin-left: 7px; }
    .pagination-item .pagination li a {font-size: 14px; padding: 2px 6px;}
    .pagination-item .pagination li a.iocon-arrow {font-size: 14px;}

    /* my wallet */
    .exchange-col .wampumCredit {flex-direction: column;}
    .exchange-col .wampumCredit .form-control {width: 100%;}
    .exchange-col .wampumCredit span {margin: 10px 0;}
    .exchange-col .wampumCredit .convert-btn {margin-top: 5px;}

    /* my profile */
    .profile-upload .upload-button { padding: 8px 10px; width: 130px;}
    .two-col {flex-flow: wrap;}
    .two-col .form-group { margin-left: 0; flex: 100%; }


}


@media(max-width: 360px){
  
.remember-forgot { 
  flex-flow: column;
align-items: center;
}
.navbar-brand img {
  max-width: 200px;
}
.header-right .hederLogin-btn {
  font-size: 14px;
  padding: 7px 19px;
}
}
.f-40{
font-size: clamp(20px, 3.5vw, 40px );
    line-height: 50px;
}
.pt-20{
  margin-top: clamp(20px, 3.5vw, 40px );
}

section.landingAbout.privacy-policy  .landingAbout-text{
  margin: 0;
  max-width: 100%;
  text-align: center;
}
.privacy-content{
  text-align: center;
}