html{ scroll-behavior: smooth; padding: 0; margin:0; }
body{ background: #fff; padding: 0; margin:0;width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: column; font-family: 'BwModelica-Regular'; position: relative; color: #000 }

ul{ padding: 0; margin:0; }
li{ list-style-type: none; }

a{ display: inline-block; text-decoration: none; transition: all 0.2s; -webkit-transition: all 0.2s; -ms-transition: all 0.2s; -moz-transition: all 0.2s; }
a:hover,a:focus{ text-decoration: none; transition: all 0.2s; -webkit-transition: all 0.2s; -ms-transition: all 0.2s; -moz-transition: all 0.2s; }

span{ display: inline-block; }
em,i{ font-style: normal; display: inline-block; }

img { width: 100% }

h1{ font-size: 32px; line-height: 36px; margin: 0; color: #333 }
h2{ font-size: 28px; line-height: 32px; margin: 0; font-weight: 700 }
h3{ font-size: 18px; line-height: 22px; margin: 0; }
h4{ font-size: 16px; line-height: 22px; margin: 0; }
p{ font-size: 15px; line-height: 30px; margin: 0; padding: 0; color: #68768B}

.btn-red-trans,.btn-red-trans:focus{ outline: none; background: transparent; border-radius: 100px; text-align: center; color: #F63F04;  font-family: 'BwModelica-Bold'; ;  padding: 10px 20px; font-size: 16px; line-height: 22px; border: 2px solid #F63F04; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }
.btn-red-trans:hover{ border: 2px solid #F63F04; background: #F63F04; color: #fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; font-family: 'BwModelica-Bold';}

.btn-red,.btn-red:focus{ outline: none; background: #F63F04; border-radius: 100px; text-align: center; color: #fff;  font-family: 'BwModelica-Bold'; ;  padding: 10px 20px; font-size: 16px; line-height: 22px; border: 2px solid #F63F04; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }
.btn-red:hover{ border: 2px solid #F63F04; background: transparent; color: #F63F04; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; font-family: 'BwModelica-Bold';}

.btn-white-border,.btn-white-border:focus{ outline: none; background: transparent; border-radius: 100px; text-align: center; color: #fff;  font-family: 'BwModelica-Bold'; ;  padding: 10px 20px;  font-size: 16px; line-height: 22px; border: 2px solid #fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }
.btn-white-border:hover{ border: 2px solid #fff; background: #fff; color: #000; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }

.btn-white,.btn-white:focus{ outline: none; background: #fff; border-radius: 100px; text-align: center; color: #000;  font-family: 'BwModelica-Bold'; ;  padding: 10px 20px;  font-size: 16px; line-height: 22px; border: 2px solid #fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }
.btn-white:hover{ border: 2px solid #fff; background: transparent; color: #fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }


/* main */
main {-webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: flex; align-items: center; justify-content: center; }

/* header-home-page */
header{ padding: 30px 50px; display: flex; align-items: center; justify-content: left; }
header nav { display: flex; margin-left: auto; }
header nav ul li{ display: inline-block; padding-right: 45px }
header nav ul li:last-child{ padding-right: 0 }
header nav ul li a,header nav ul li a:hover,header nav ul li a:focus{ color: #000000; font-family: 'BwModelica-Medium'; font-size: 16px }
header nav ul li.active a{ font-family: 'BwModelica-ExtraBold' }
header a.logo img{ width: auto; }

header.sticky{ position: fixed; top: 0; width: 100%; z-index: 1002; background: #fff;  margin-bottom: 20px; box-shadow: 0 3px 20px rgb(0 0 0 / 20%); -webkit-box-shadow: 0 3px 20px rgb(0 0 0 / 20%); -ms-box-shadow: 0 3px 20px rgb(0 0 0 / 20%); -moz-box-shadow: 0 3px 20px rgb(0 0 0 / 20%); }

main.home-page{ margin-top: 150px; display: block; }
main.home-page .banner{ margin-bottom: 345px; padding: 0 50px  }
main.home-page .banner .cell_content{ display: flex; align-items: center; justify-content: left; }
main.home-page .banner .cell_content .container{ margin: 0; padding: 0; z-index: 1001 }
main.home-page .banner-img i{ display: block; text-align: right; }
main.home-page .home_right{ position: absolute; right: 0 }
main.home-page .banner-text{ max-width: 80%; padding-left: 30px }
main.home-page .banner-text h1{ font-size: 120px; color: #F63F03; line-height: 124px; padding-bottom: 50px; font-family: 'BwModelica-ExtraBold'; margin: 0 }
main.home-page .banner-text span{ display: block; font-size: 28px; line-height: 34px; color: #000000; font-family: 'BwModelica-Bold'; padding-bottom: 10px}
main.home-page .banner-text em{ display: block; font-family: 'BwModelica-Regular'; letter-spacing: 1.5px }
main.home-page .social-icon a{ color: #000; font-family: 'BwModelica-Regular'; padding-right: 15px }
main.home-page .social-icon a i{ padding-right: 5px }

.feature{ display: block; text-align: center;padding: 0 70px 150px }
.feature span,.feature i{ display: block; }
.feature span{ font-size: 16px; max-width: 320px; display: block; margin: 0 auto; color: #262628 }
.feature i{ width: 180px; display: block; margin: 0 auto; line-height: 178px }
.feature h4{ font-size: 27px; line-height: 37px; font-family: 'BwModelica-Bold'; }

.who-we-are{ background: #101010;padding: 230px 70px }
.who-we-are .row{ margin: 0; display: flex; align-items: center; justify-content: center;  }
.who-we-are .row .col-md-1 i{  width: 1px; height: 428px; background: #fff }
.who-we-are h2{ color: #fff; font-size: 89px; line-height: 90px; font-family: 'BwModelica-ExtraBold'; margin: 0 }
.who-we-are span,.app span{ color: #fff; font-size: 20px; font-family: 'BwModelica-Bold'; padding-bottom: 30px }
.who-we-are p,.app p{ color: #fff; font-size: 17px; margin: 0 }

.tagline{ padding: 0 70px; height: 100vh; display: flex; align-items: center; margin-bottom: 100px }
.tagline h3{ font-size: 64px; line-height: 74px;font-family: 'BwModelica-ExtraBold'; color: #F63F03; text-align: center; max-width: 825px; display: block; margin: 0 auto }

.app{ position: relative;background: #101010;padding: 165px 70px }
.app a.btn-white-border{ margin-top: 50px; margin-right: 10px }
.app .col-md-6{ left: 50% }
.app .mockup{ position: absolute; left: 0; top: -35% }

footer{ background: #101010; padding: 10px 70px; display: flex; align-items: center; justify-content: left }
footer .address{ font-family: 'BwModelica-ExtraBold' }
footer .address .info{ display: inline-block; vertical-align: middle; }
footer .address .info span{ color: #fff; display: block; }
footer .address .info a{ color: #fff; display: block; }
footer .links{ margin-left: auto }
footer .links ul li{ display: inline-block; position: relative; }
footer .links ul li a{ color: #fff; font-size: 12px; font-family:'BwModelica-Light'; padding: 0 10px  }
footer .links ul li:before{ content: ''; position: absolute; width: 1px; height: 11px; background: #fff; left: -2px;top: 6px }
footer .links ul li:first-child:before{ content: none; }
/*footer .links ul li:first-child a{ padding: 0 }
*/

/* modal-css */
.modal.right .modal-dialog { position: fixed; margin: auto; width: 755px; height: 100%; -webkit-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); }
.modal.right .modal-content { height: 100%; overflow-y: auto; }

/*Right*/
.modal.right.fade .modal-dialog { right: -320px; -webkit-transition: opacity 0.3s linear, right 0.3s ease-out; -moz-transition: opacity 0.3s linear, right 0.3s ease-out; -o-transition: opacity 0.3s linear, right 0.3s ease-out; transition: opacity 0.3s linear, right 0.3s ease-out; }
.modal.right.fade.in .modal-dialog { right: 0; }


.form-group{ margin-bottom: 50px }
.group { position: relative; }
.material input,.material textarea { font-size: 16px; padding: 10px 10px 10px 5px; display: block; width: 100%; border: none; border-bottom: 1px solid #000;  color: #0E0E0E}
.material input:focus,textarea:focus { outline: none; border:none; }
.material textarea{ height: 100px }

/* LABEL ======================================= */
.material label { color: #0E0E0E; font-size: 16px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }

/* active state */
.material input:focus ~ label, .material input:valid ~ label,.material textarea:focus ~ label, .material textarea:valid ~ label  { top: -20px; font-size: 14px; color: #F63F03; }

/* BOTTOM BARS ================================= */
.bar { position: relative; display: block; width: 100%; }
.bar:before, .bar:after { content: ''; height: 1px; width: 0; bottom: 0; position: absolute; background: #F63F03; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }
.bar:before { left: 50%; }
.bar:after { right: 50%; }

/* active state */
.material input:focus ~ .bar:before,.material input:focus ~ .bar:after,.material textarea:focus ~ .bar:before,.material textarea:focus ~ .bar:after { width: 50%; }

/* HIGHLIGHTER ================================== */
.highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; }

/* active state */
.material input:focus ~ .highlight,.material textarea:focus ~ .highlight { -webkit-animation: inputHighlighter 0.3s ease; -moz-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease; }

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background: #F63F03; }
	to { width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background: #F63F03; }
	to { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
	from { background: #F63F03; }
	to { width: 0; background: transparent; }
}


/* getintouch*/
#getintouch .modal-content{ border-radius: 0 }
#getintouch .modal-header .close{ font-size: 34px; opacity: 1; color: #d6d6d6; font-weight: 500; padding: 15px }
#getintouch .modal-header{ border-bottom: none; position: relative; z-index: 100 }
#getintouch .modal-header .close{ position: absolute; right: 35px; top: 35px }
#getintouch .modal-header .close:focus{ outline: none; }
#getintouch .modal-body{ padding:70px 110px }
#getintouch h2{ font-size: 36px; line-height: 46px; font-family: 'BwModelica-ExtraBold'; margin: 0; padding-bottom: 20px }
#getintouch p{ padding-bottom: 50px; margin: 0; font-size: 16px; color: #0E0E0E }

#getintouch .form-check-label{ margin: 0; cursor: pointer; font-family:'BwModelica-Light' ; font-size: 14px; display: inline-block; vertical-align: middle; padding-left: 20px }
#getintouch .form-check-input{ margin: 0; display: inline-block; vertical-align: middle; position: absolute; top: 5px }
#getintouch .form-group.flex-class{ display: flex; align-items: center; justify-content: left }
#getintouch .form-group .btn-red-trans{ margin-left: auto; min-width: 100px }
#getintouch footer{ background: transparent; padding: 0 }
#getintouch footer .address .info a{ color: #000 }
#getintouch footer .address .info span{ color: #000 }

.form-check{ position: relative; }

/* wallet page */
main.wallet{ display: block; margin: 0; padding: 0 50px }
main.wallet .balance{ background: #EFF3F9; padding: 40px 30px; border-radius: 10px; display: flex; align-items: center; margin-bottom: 20px }
main.wallet .balance h2{ color: #222B45;  font-family: 'BwModelica-Bold'; font-size: 32px; margin: 0 }
main.wallet .balance em{ margin-left: auto; font-size: 26px; color: #222B45;  font-family: 'BwModelica-Bold'; }
main.wallet .card{ border-bottom: 1px solid #AEAEBA; padding-bottom: 20px }

main.wallet .transaction{ padding: 20px 0; display: flex; align-items: center; }
main.wallet .transaction h3{ color: #F63F04; font-family:'BwModelica-Bold'; margin: 0 }
main.wallet .transaction a{ margin-left: auto; color: #AEAEBA; font-size: 16px; font-family: 'BwModelica-MediumItalic'; }

main.wallet .transaction-detail li{ display: flex; align-items: center; padding-bottom: 20px }
main.wallet .transaction-detail li .title h3 { margin: 0 }
main.wallet .transaction-detail li .title span{ position: absolute; background: #D9F2D7; border-radius: 12px; padding: 20px; color: #38922F; font-size: 25px }
main.wallet .transaction-detail li .title .title-detail{ padding-left: 75px }
main.wallet .transaction-detail li .title .title-detail em{ display: block; color: #A0A0AE; padding-bottom: 3px; font-size: 14px }
main.wallet .transaction-detail li .title .title-detail h3{ font-size: 20px; color: #1E263D; font-family:'BwModelica-Bold'; padding-bottom: 8px  }
main.wallet .transaction-detail li .amount{ margin-left: auto; text-align: right; }
main.wallet .transaction-detail li .amount span{ display: block; color: #38922F; font-family:'BwModelica-BoldItalic'; font-size: 18px; padding-bottom:6px }
main.wallet .transaction-detail li .amount em{ display: block; color: #A0A0AE; padding-bottom: 3px; font-family: 'BwModelica-Regular'; }
main.wallet .transaction-detail li .amount em.date{ font-family: 'BwModelica-MediumItalic'; }
main.wallet .transaction-detail li .title span.down{ background: #FFEBE4; color: #F63F04 }
main.wallet .transaction-detail li .amount span.down{ color: #F63F04 }

/* section */
section { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 0 30px;  }
section .form-group{ position: relative; }
section .form-group i{ position: absolute; left: 20px; top: 12px; z-index: 1; width: 22px }
section .form-group input.search-box,section input.search-box:focus{ box-shadow: none; position: relative; outline: none; background: #fff; border-radius: 10px; border:none; padding: 15px 15px 15px 50px; font-size: 14px; line-height: 18px; width: 100%; display: block; height: auto; }
section .form-group input::placeholder{ font-size: 16px; color: #8F9BB3; font-weight: 300 }

section .box-data{ display: flex; align-items: center; justify-content: center; height: 100% }
section .box-data form{ width: 400px }
section .box-data form h1{ padding-bottom: 10px }
section .box-data form.verification{ text-align: center; }
section .box-data form .btn-red{ display: block; margin-bottom: 15px; width: 100% }
section .box-data form p{ padding-bottom: 15px }
section .box-data form.verification .form-group{ display: inline-block; padding-right: 10px }
section .box-data form.verification .form-group .form-control{ border-radius: 30px;width: 70px; height: 70px; text-align: center; font-size: 30px; line-height: 34px; color: #222B45 }

/* form-control */
form .form-group{ margin-bottom: 25px }
form .form-control{ border: 1px solid #68768B; border-radius: 12px; height: 50px; padding: 14px 15px; box-shadow: none; font-size: 16px; line-height: 20px; color:#68768B; background: none }
form .form-control.password{ position: relative; }
form .form-control::placeholder{ font-size: 16px; line-height: 20px; color: #68768B }
form .form-control:focus,.select-selected.select-arrow-active{ border:1px solid #F63F04; box-shadow: inset 0 0 1px #F63F04, 0 0 5px #F63F04; -webkit-box-shadow: inset 0 0 1px #F63F04, 0 0 5px #F63F04; -ms-box-shadow: inset 0 0 1px #F63F04, 0 0 5px #F63F04; -moz-box-shadow: inset 0 0 1px #F63F04, 0 0 5px #F63F04 }
form .red-link,form .red-link:focus,form .red-link:hover{ display: inline-block;  text-decoration: underline;  color: #F63F04; text-align: center; }
form .action{ display: block; margin: 0 auto; text-align: center; }
form label{ font-size: 18px; color: #333; font-weight: 500; display: block; }
form .form-group #privacy{ position: absolute; width: 15px; height: 15px; margin: 0; top: 2px; cursor: pointer; }
form .form-group .check{ padding-left: 20px; font-size: 16px; cursor: pointer; }
form .bottom-link{ display: block;text-align: center; font-size: 16px }
form .form-group.password i.fa-eye{ font-family:'FontAwesome'; right: 10px; left: auto; top: 45px; color: #68768B }
textarea.form-control{ height: 100px; padding: 10px 15px }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}

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

/* section-profile */
section .box-data.profile-data{ display: block; width: auto; height: auto; }
section .box-data.profile-data .white-box{ display: block; margin:40px 0; }
section .box-data.profile-data input{ background: #E4E6E7; margin-bottom: 0 }
section .box-data.profile-data .row{ margin-bottom: 25px }
section .profile-img{ display: block; text-align: center; padding-bottom: 30px}
section .profile-img i{ position: relative; }
section .profile-img i img{ border-radius: 100%; width: 200px; height: 200px }
section .profile-img a{ position: absolute; right: 0; bottom: 0;left: auto }
section .profile-img a img{ width: auto; height: auto }

/* validation error */
.text-red{ color: #dd4b39 !important }
.password_eye {float: right; font-size: 17px; position: absolute; right: 15px; top: 45px;color: #68768B;left: auto;  }

/* iti( country dropdown ) */
.iti{ display: block !important; }
.iti--separate-dial-code .iti__selected-flag:focus{ outline: none; }
.iti__selected-flag{ padding: 0 15px !important }

.btn-red,.btn-red:focus{ outline: none; text-align: center; background: #F63F04; border-radius: 15px; color: #fff; font-weight: 600; padding: 15px; min-width: 200px; font-size: 18px; line-height: 22px; border: 2px solid #F63F04; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }
.btn-red:hover{ border: 2px solid #F63F04; background: #fff; color: #F63F04; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }

.btn-red-border,.btn-red-border:focus{ background: #fff; border-radius: 8px; color: #F63F04; font-weight: 600; padding: 15px; min-width: 200px; font-size: 18px; line-height: 22px; border: 2px solid #F63F04; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }
.btn-red-border:hover{ border: 2px solid #F63F04; background: #F63F04; color: #fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; }