body{
    font-family: 'Cairo', sans-serif;
    background: #eeeff6;
    line-height: 1.6;
}
h1,h2,h3,h4,h5,h6,p,a,span,small,ul,li,figure{
    margin: 0;
    padding: 0;
    transition: .4s!important;
    color:#fff;
    list-style-type: none;
    line-height: 1.6;
}
a{
    transition: .4s!important;
    text-decoration: none!important;
}
a:hover,a:focus{
    text-decoration: none!important;
}

#preloader {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background: #00000094;
    border-radius: 15px;
z-index: 9;
}

#preloader circle.outer {
  fill: transparent;
  stroke: #02224b;
  stroke-dashoffset: 1000;
  stroke-width: 20;
  stroke-dasharray: 1000;
  transform-origin: 50% 50%;
  animation: spin 2s linear forwards infinite;
}

@keyframes spin {
  0% {
    stroke-dashoffset: 1000;
    transform: rotate(-90deg);
    stroke-width: 20;
  }
  25% {
    stroke-dashoffset: 800;
    stroke-width: 30;
  }
  80% {
    stroke-dashoffset: 1000;
    transform: rotate(270deg);
    stroke-width: 20;
  }
}

#preloader circle.drop {
  fill: #02224b;
  stroke: transparent;
  transform-origin: 50% 50%;
  animation: drop 2s linear forwards infinite;
}

@keyframes drop {
  0% {
    transform: translate(0, -150px);
    opacity: 1;
  }
  34% {
    transform: translate(0, 150px);
    opacity: 1;
  }
  70% {
    transform: translate(0, 0);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.form-body{
    height: 100vh;
}
.form-content{
    position: relative;
    overflow: hidden;
}
.top-circle:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 165px;
    z-index: 0;
    background: #02224b;
    left: 0;
    top: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.form-body .container, .form-body .row{
    height: 100%;
}
.form-step-header{
    position: relative;
    background: #02224b;
    width: 100%;
    padding: 25px;
    border-radius: 15px;
}
.form-step-header span{
    font-size: 18px;
}
.form-step-footer{
    position: relative;
    background: #e7a52d;
    width: 100%;
    padding: 10px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 0;
}
.form-item-step{
    position: relative;
    background-color: #fff;
    -webkit-box-shadow: 0px 30px 30px 0px rgb(0 0 0 / 5%);
    box-shadow: 0px 30px 30px 0px rgb(0 0 0 / 5%);
    padding: 40px 60px;
    display: none;
    border-radius: 10px;
}
.form-item-step.active{
    display: block;

    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: jello;
}
.form-item-progress{
    margin-bottom: 1rem;
    position: relative;
}
.progress-step{
    margin: 0 auto;
    position: relative;
    height: 60px;
    width: 60px;
    border: 4px solid #dbe5ef;
    border-radius: 50%;
}
.step-number {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #000000;
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}
.form-item-progress svg {
    height: 60px;
    width: 60px;
    -webkit-transform: rotate(
-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(
-90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: relative;
    top: -4px;
    left: -4px;
}
.progress-step svg circle {
    stroke: #02224b;
}
.progress-step svg circle.step-1 {
    stroke-dasharray: 50 200;
}
.progress-step svg circle.step-2 {
    stroke-dasharray: 100 200;
}
.progress-step svg circle.step-3 {
    stroke-dasharray: 200 200;
}
.form-item-step p{
   font-size: 18px;
}
.step-body{
    flex: 1;
    z-index: 1;
    position: relative;
}
.btn-def{
    background:#02224b;
    border-radius: 30px;
    padding: 10px 40px;
    font-weight: bold;
    font-size: 16px;
    transition: .4s;
}
.btn-def:hover{
    background:#02224b;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-name: pulse;
}
.check-img img{
    width: 84px;
}
.prev-btn {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 700;
    color: #b2becc;
}
.prev-btn:hover{
    color: #02224b;
}
.prev-btn .bi{
    font-size: 26px;
    top: 4px;
    position: relative;
}
.logo{
    display: flex;
    width: 45%;
    margin: 0 auto;
    margin-bottom: 50px;
    border-radius: 10px;
    overflow: hidden;
}
.footimg{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.footimg img{
    width: 45%;
}
.form-control:focus, .form-select:focus, .btn:focus{
    box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%);
    background-color: #02224b;
}
.form-control{
    border: 0;
    background: #02224b;
    padding: 10px 0px 10px 15px;
    border-radius: 5px;
}
.form-select{
    border: 0;
    background-color: #02224b;
    padding: 10px 0px 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
.text-p-div{

}
.input-group-text{
    background-color: #02224b;
    border: 0;
    border-radius: 5px;
    border-top-left-radius:0!important;
    border-bottom-left-radius:0!important;
    font-weight: bold;
    padding: .375rem 15px;
}
.step-bank-info{
    position: relative;
    display: flex;
    background: #02224b;
    border-radius: 5px;
    margin-bottom: 20px;
    justify-content: space-between;
}
.info-title{
    padding: 10px;
    width: 30%;
    background: #e9eaf1;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.info-title h6{
    font-weight: bold;
}
.info-cont{
    display: flex;
    padding: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.info-cont .bi{
    position: absolute;
    right: 0;
    background: #02224b;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    top: -30px;
	color: white;
    cursor: pointer;
}
.info-cont h6{
    font-weight: bold;
}
.bankli{
    position: relative;
    z-index: 1;
}
.bankli li{
    display: inline-block;
    width: 31.5%;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    margin-right: 3px;
}
.warning-msg{
    display: flex;
    justify-content: center;
}
.warning-msg .bi{
    display: flex;
    width: 35px;
    height: 35px;
    color: #fff;
    background: #02224b;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
}
.start-circle{
        width: 300px;
    height: 300px;
    position: absolute;
    background: #ffeecc;
    border-radius: 170px;
    left: -40px;
    top: -40px;
}
.circle{
    width: 150px;
    height: 150px;
    position: absolute;
    background: #02224b;
    border-radius: 150px;
    left: -40px;
    bottom: -40px;
}

.bg-img{
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
}
.thansk-p{
    font-weight: bold;
}
.ble-img{
    position: absolute;
    right: -88px;
    top: 75px;
    transform: rotate(
-3deg);
    opacity: 0.5;
}
.swal2-popup{
    background: #02224b!important;
    border-radius: 50px!important;
    font-size: 12px!important;
    width: auto!important;
    padding: 15px 50px!important;
}

.swal2-title{
    color: #000!important;
    font-size: 18px!important;
    font-weight: bold!important;
    padding: 0!important;
    font-style: italic;
}
.swal2-title span{
    font-size: 16px;
    font-style: initial;
    display: block;
}
/* responsive media start */
@media (max-width: 575.98px) {
    .form-item-step {
        padding: 40px 40px;
    }
    .bankli{
        margin-top: 2rem;
    }
    .info-title h6{
        font-size: 14px;
    }
    .info-cont h6{
        font-size: 14px;
    }
    .check-img img{
        width: 38px;
    }
    .thansk-p {
        z-index: 1;
        position: relative;
        font-size: 16px;
    }
    .form-item-step p {
        font-size: 16px;
    }
    .form-step-header.mb-5{
        margin-bottom: 2rem!important;
    }
    .step-body.mt-5{
        margin-top: 2rem!important;
    }
    .btn-def.mt-5{
        margin-top: 2rem!important;
    }
    .step-bank-info.mt-5{
        margin-top: 3rem!important;
    }
    .form-item-progress.check-img{
        margin-top: 2rem;
    }
    .prev-btn{
        font-size: 16px;
    }
    .logo{
        width: 55%;
        margin-top: 25px;
        margin-bottom: 0px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) { 
    .bankli{
        margin-top: 2rem;
    }
    .prev-btn{
        font-size: 16px;
    }
    .logo{
        width: 55%;
        margin-top: 25px;
        margin-bottom: 0px;
    }
    .form-item-progress.check-img {
        margin-top: 2rem;
    }
    .check-img img {
        width: 52px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { 
    .bankli li{
        width: 30.5%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    
}

@media (min-width: 1200px) and (max-width: 1399.98px) { 
    .bankli li{
        width: 31%;
    }
}