p{
    font-family: Inter;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: -0.5px;
color: #86A0D1;
text-align: left;
margin: 0;
}
a {
    text-decoration: none;
}
a span {
    color: #fff;
}
h2 {
    font-family: Inter;
font-weight: 600;
font-size: 26.23px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
}
h5 {
    font-family: Inter;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
text-align: left;
font-weight: 400;
}
h4 {
    font-family: Inter;
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
}
h3 {
font-family: Inter;
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #fff;

}
.splash_screen {
color: white;
font-family: 'Inter', sans-serif;
display: flex;
justify-content: center;
align-items: center;
width: 400px;
margin: auto;
}
.splash_screen .wrapper {
width: 400px;
padding: 0 0 20px 0;
text-align: center;
min-height: 100vh;
position: relative;
background: radial-gradient(
137.35% 68.66% at 50.13% 50%,
#6792DA 0%,
#0C2056 44.98%,
#061640 63.64%,
#050D25 71.98%,
#050611 100%
);
z-index: 1;
}
.splash_screen .link_expired{
width: 400px;
padding: 0 0 20px 0;
text-align: center;
min-height: 100vh;
position: relative;
background: radial-gradient(210.37% 105.16% at -23.66% -17.96%, #6792DA 0%, #0C2056 44.98%, #061640 63.64%, #050D25 71.98%, #050611 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
z-index: 1;
padding: 0 20px;
}
/* Background image with reduced opacity */
.splash_screen .logo-bg {
background-image: url('/images/logo-bg.png');
background-repeat: no-repeat;
z-index: 1;
width: 100%;
background-size: contain;
background-position: 40% 20%;
}
/* Content styling */
.splash_screen .referrer-text {
margin-top: 30px;
font-size: 16px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.5px;
color: #86A0D1;
text-align: center;
}
.splash_screen .shark-logo {
width: 190px;
height: 190px;
margin: 60px auto 50px;
}
.splash_screen .title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
.splash_screen .subtitle {
font-size: 16px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.5px;
color: #86A0D1;
text-align: center;
margin: 20px 0;
}
.splash_screen .description {
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: -0.5px;
color: #ffffff;
text-align: center;
padding: 0 10px;
margin-bottom: 30px;
}
/* Button & footer */
.splash_screen .button_container {
width: 90%;
margin: auto;
}
.splash_screen .btn-start {
width: 100%;
padding: 12px 30px;
font-size: 16px;
font-weight: 500;
border-radius: 30px;
background-color: #ffffff;
color: #000000;
}
.splash_screen .footer-note {
font-size: 12px;
font-weight: 400;
color: #86A0D1;
margin-top: 20px;
}
.linkexpired-h2 {
font-weight: 600;
font-size: 60px;
line-height: 98%;
letter-spacing: -0.5px;
text-align: center;
margin: 150px 50px 10px 50px;
}
.link-expired-h4 {
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: left;
margin-top: 110px;
}
.footer-note-link-expired {
font-size: 12px;
font-weight: 400;
color: #86A0D1;
margin-top: 20px;
text-align: left;
}
.btn-contact {
width: 100%;
padding: 12px 30px;
font-size: 16px;
font-weight: 500;
border-radius: 30px;
background-color: transparent;
color: #fff;
border: 1px solid #EAEAEA;
margin: 50px 0 0 0;
}
.btn-contact:hover {
width: 100%;
padding: 12px 30px;
font-size: 16px;
font-weight: 500;
border-radius: 30px;
background-color: #fff;
color: #000000;
border: 1px solid #EAEAEA;
margin: 50px 0 0 0;
}
.container-box {
max-width: 400px;
margin: auto;
padding: 32px 0 0px 0;
}
.back-button {
font-size: 1.5rem;
color: white;
cursor: pointer;
text-align: left;
}
.back-button span {
font-family: Inter;
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
padding: 0 15px;
}
.form-control {
background-color: #151733;
border: 1px solid #4e5ba6;
border-radius: 8px;
color: white;
padding: 0.65rem;
}
.form-control::placeholder {
color: #bbb;
}
label {
margin-top: 1rem;
margin-bottom: 0.3rem;
width: 100%;
text-align: left;
font-family: Inter;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
}
.btn-submit {
margin-top: 2rem;
background-color: white;
color: black;
border-radius: 24px;
font-weight: 600;
padding: 0.75rem;
}
.btn-submit:hover {
margin-top: 2rem;
background-color: rgb(223, 223, 223);
color: black;
border-radius: 24px;
font-weight: 600;
padding: 0.75rem;
}
.btn-submit-1 {
background-color: white;
color: black;
border-radius: 24px;
font-weight: 600;
padding: 0.75rem;
}
.btn-submit-1:hover {
background-color: rgb(223, 223, 223);
color: black;
border-radius: 24px;
font-weight: 600;
padding: 0.75rem;
}
.note {
font-size: 0.75rem;
color: #86A0D1;
margin-top: 0.5rem;
text-align: left;
}
.text-center.note {
margin-top: 1.5rem;
}
.otp-input {
width: 45px;
height: 45px;
text-align: center;
font-size: 24px;
background-color: #151733;
border: 1px solid #4e5ba6;
border-radius: 8px;
color: white;
margin: 0 5px;
}
.otp-input:first-child {
margin: 0 5px 0 0;
}
.link-light-small {
color: #86A0D1;
text-decoration: none;
text-align: left;
width: 100%;
display: inline-block;
font-weight: 600;
font-size: 14px;
}
.link-light-small:hover {
text-decoration: underline;
}
.resend-edit-links {
margin-top: 1rem;
margin-bottom: 2rem;
}
.resend-edit-links div {
margin-bottom: 0.5rem;
}
.min-height-div {
min-height: 440px;
}
.terms-logo {
margin: 50px auto;
text-align: center;
}
.terms-conditions {
text-align: left;
padding:0 20px;
}
.terms-title{
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
margin-bottom: 15px;
}
.terms-text {
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
color: #86A0D1;
line-height: 18px;
}
.landing-splash-container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
.profile-id {
padding: 0 10px 0 5px;
}
.profile-section {
display: flex;
justify-content: space-between;
align-items: center;
padding:0;
}
.user-info h5 {
margin: 0;
font-weight: bold;
color: #FFFFFF;
margin: 5px 0 10px 0;
}
.status {
font-size: 0.875rem;
display: flex;
align-items: center;
color: #fff;
background-color: #3e5396;
padding: 0;
border-radius: 25px;
border: 2px solid #000;
}
.good-to{
font-family: Inter;
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
color: #86A0D1;
}
.grn {
width: 10px;
height: 10px;
background: #00FF85;
border-radius: 50%;
display: inline-block;
margin-right: 0.4rem;
}
#shareCardCarousel {
margin:15px 0 0 0;
padding: 15px 0;
display: inline-block;
}
.step-4-tble h5 {
    margin: 0;
}
.carousel-inner {
border-radius: 1rem;
}
.carousel-item {
border-radius: 1rem;
padding: 15px 90px 15px 15px;
text-align: left;
color: #FFFFFF;
position: relative;
min-height: 120px;
width: 100%;
background-image: url('/images/carrosel-bg.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.carousel-item img {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 60px;
}
.carousel-item p {
font-size: 20px;
font-weight: 600;
line-height: 21px;
margin: 10px 0 0 0;
color: #fff;
}
.carousel-indicators {
position: static;
margin: 0;
}
.shark-active {
background-color: #375C95;
}
.pin-section {
display: flex;
justify-content: center;
padding: 1rem 0 0 0;
margin: 15px 0;
}
.golden {
padding: 0 0 0 15px;
}
.new-pn {
    padding: 0!important;
        margin: 0 0 15px 0;
}
.pin-section .pin-card {
background: #0A1541;
margin: 0 0.5rem;
border-radius: 1rem;
padding: 1.5rem 1rem;
width: 175px;
text-align: center;
color: #FFFFFF;
border: 1px solid #162C63;
display: inline-block;
}
.pin-section .pin-card img {
margin-bottom: 0.5rem;
}
.view-pin {
background: #070a28;
border-radius: 0;
padding: 1rem;
margin: auto;
width: 400px;
}
.view-pin-text {
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
}
.pin-entry {
background: #102047;
padding: 1rem;
border-radius: 1rem;
margin-bottom: 1rem;
color: #FFFFFF;
}
.pin-entry .icons {
margin-top: 0.75rem;
}
.pin-entry .icons img {
width: 24px;
margin-right: 0.5rem;
}
.pin-entry.completed {
background: #143A56;
}
.pin-entry.completed .icons img {
background: #00D26A;
padding: 0.25rem;
border-radius: 50%;
}
.badge-status {
font-size: 0.75rem;
background: #1C2B45;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
color: #FFFFFF;
}
.completed {
background-color: #1DBF73;
color: white;
border-radius: 1rem;
padding: 0.25rem 0.75rem;
}
.see-more-entry {
background: #1C2B45;
border: none;
width: 100%;
padding: 0.75rem;
border-radius: 1rem;
color: white;
font-weight: 500;
text-align: center;
}
.generate-btn {
display: block;
width: calc(100% - 2rem);
margin: 0 auto 1rem;
padding: 0.75rem;
background: #1DBF73;
color: white;
font-weight: 600;
text-align: center;
border: none;
border-radius: 1rem;
}
.toggle-secton {
background-color: black;
padding: 5px;
border-radius: 25px;
}
.do-pin-text {
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #fff;
}
.generate-new-pin {
font-family: Inter;
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #86A0D1;
padding: 5px 0 0 0;
}
.splash_screen .home-sec {
width: 100%;
padding: 0 0 20px 0;
text-align: center;
/* min-height: 100vh; */
position: relative;
background: radial-gradient(210.37% 105.16% at -23.66% -17.96%, #6792DA 0%, #0C2056 44.98%, #0f2c77 63.64%, #092781 71.98%, #1a1f5c 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;z-index: 1;
padding: 0 20px;
}
.pin-card-1 {
background: #091438;
border-radius: 1rem;
padding: 1rem;
margin-bottom: 1.5rem;
color: white;
}
.pin-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.pin-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: #070A28;
padding: 5px;
border-radius: 10px;
}
.shark-completed {
position: relative;
}
.shark-completed:not(:first-child)::before {
content: '';
position: absolute;
left: -11px;
border-radius: 5px;
background-color: #5ac373;
width: 10px;
height: 5px;
z-index: 9999;
}
.view-pin-first:not(:first-child)::before {
content: '';
position: absolute;
left: -11px;
border-radius: 5px;
background-color: #375C95;
width: 10px;
height: 5px;
z-index: 9999;
}
.view-pin-first {
position: relative;
}
.pin-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #1e2f59;
}
.pin-title {
font-weight: 600;
font-size: 1rem;
color: #fff;
}
.pin-date {
font-size: 0.85rem;
color: #b0bbd1;
}
.status-icons {
display: flex;
gap: 0.75rem;
margin-top: 0.75rem;
}
.icon-circle {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.pending-icon {
background-color: #19234A;
color: #7989b3;
}
.shark-completed {
background-color: #5ac373;
}
.status-badge {
background-color: #19234A;
color: #86A0D1;
border-radius: 20px;
padding: 10px;
font-weight: 500;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
}
.completed-badge {
background-color: #00c86f;
color: white;
border-radius: 20px;
padding: 0.3rem 1rem;
font-size: 0.75rem;
margin-left: auto;
display: inline-block;
}
.gold-icon {
background: linear-gradient(45deg, #ffcc70, #ffb347);
}
.green-icon {
background: linear-gradient(45deg, #00ff7f, #00c86f);
}
.profile-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2rem;
}
.profile-header h4 {
font-weight: 600;
}
.profile-status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
}
.profile-status span {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
}
.badge-active {
background-color: #00c86f;
color: white;
}
.badge-id {
background-color: #1e2f59;
color: white;
}
.pin-summary-card {
border: 1px solid #3760a0;
border-radius: 0.75rem;
padding: 1rem;
margin: 1rem 0;
display: flex;
background-color: transparent;
}
.pin-summary-card > div {
flex: 1;
text-align: center;
}
.pin-summary-card > div:not(:last-child) {
border-right: 1px solid #3760a0;
margin: 0 15px 0 0;
}
.pin-summary-card .value {
font-size: 1.5rem;
font-weight: bold;
text-align: left;
margin-bottom: 0.25rem;
}
.pin-summary-card .label {
font-size: 0.875rem;
color: #b0bbd1;
text-align: left;
}
.settings-item {
background-color: transparent;
color: white;
font-weight: 500;
font-size: 14px;
border-bottom: 1px solid #2a2f45;
padding: 0.75rem 1rem;
}
.settings-item:hover {
background-color: #0c1a47;
cursor: pointer;
}
.settings-item i {
font-size: 1rem;
}
.collapse-content {
background-color: #07153a;
padding: 0.75rem 1rem;
border-bottom: 1px solid #2a2f45;
color: #cbd5e1;
}
.settings-item i.rotated {
transform: rotate(90deg);
}
.session-ends{
font-family: Inter;
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
padding: 0px 0 0 55px;
margin: -7px 0 0 0;
}
.dropdown-right .dropdown-menu {
background-color: #1c2a4a;
}
.dropdown-right .dropdown-item {
color: #fff;
font-size: 14px;
}
.dropdown-right .dropdown-item:hover {
background-color: #2d3b5a;
}
.dropdown-right {
display: inline-block;
float: right;
margin: -55px 0 0 0;
}
.dropdown-right .btn {
background-color: #05091d;
color: #fff;
border: 1px solid #05091d;
font-size: 14px;
}
.dropdown-right img {
margin: 0 5px 0 0;
}
.payment-h3 {
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #fff;
width: 100%;
text-align: center;
padding: 30px 0 0 0;
}
.scan-text {
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #86A0D1;
width: 90%;
margin: auto;
padding: 0 0 25px 0;
}
.number-section {
background-color: #294C95;
border-radius: 6px;
display: inline-block;
width: 100%;
}
.icon-blue {
display: inline-block;
float: left;
background-color: #0A1541;
padding: 20px;
border-radius: 6px 0 0 6px;
position: relative;
}
.right-text-white span {
background-color: #1E2A5B;
padding: 5px 8px;
border-radius: 20px;
font-size: 12px;
}
.right-text-white span img {
margin: 0 3px 0 0;
}
.right-text-white {
display: inline-block;
text-align: left;
float: left;
padding: 18px 20px;
}
.x1 {
position: absolute;
top: 15px;
right: 14px;
font-size: 12px;
}
.equel {
position: absolute;
font-size: 34px;
font-weight: bold;
color: #808CB9;
top: 16px;
right: -12px;
}
.number-section h3 {
font-family: Inter;
font-weight: 600;
font-size: 26.23px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
}
.choose-network {
font-family: Inter;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
padding: 0 0 6px 0;
}
.bep {
text-align: left;
background-color: #0A1541;
border: 1px solid #162C63;
border-radius: 9px;
padding: 10px;
}
.bep img {
vertical-align: -5px;
margin: 0px 10px 0 5px;
}
.bep .form-check-inline {
display: inline-block;
margin-right: 0;
}
.q-r-code img {
background-color: white;
width: 70%;
border: 10px solid #EBF0FF;
border-radius: 15px;
}
.or-img {
margin: 15px 0;
}
.copy-part {
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #EBF0FF;
margin-bottom: 20px;
}
.copy-part img {
margin: 0 10px;
cursor: pointer;
}
.blue-bg {
background-color: #070A28;

width: 400px;
margin: auto;
padding: 0 20px;
}
.trns-h4 {
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
text-align: left;
width: 100%;
padding: 25px 0 0 0;
}
.label-cl {
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
padding: 0 0 5px 0;
}
.upload-box {
width: 100px;
height: 130px;
border: 1px solid #3a3a5a;
border-radius: 8px;
cursor: pointer;
background-color: transparent;
}
.bg-plus .text-primary {
--bs-text-opacity: 1;
color: #86A0D1;
}
.last-check label {
margin: 0;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
}
.text-white .text-secondary {
--bs-text-opacity: 1;
color: #86A0D1!important;
}
.custom-btn-dark {
background-color: #0b0b1c; /* Dark background */
color: white;
border-radius: 50px;
padding: 10px 24px;
border: 1px solid #ccc;
font-weight: 600;
}
.custom-btn-light {
border-radius: 50px;
padding: 10px 24px;
font-weight: 600;
}
.add-prime-pin {
    background-color: #0A1541;
    border: 1px solid #162C63;
    border-radius: 9px;
    padding: 15px;
    margin: 15px 0;

}
.add-prime-pin h3{
    font-family: Inter;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
text-align: left;
margin: 0;
}
.prime-pin-h2 {
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
text-align: left;
}
.prime-pin-ul ul li {
    text-align: left;
    font-family: Inter;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: -0.5px;
color: #86A0D1;
}
.prime-pin-ul ul {
    margin:15px  0;
}
.pin-card {
    background: #294C9538;
border: 1px solid #2D59C9;
    border-radius: 9px;
    padding: 15px;
    margin: 15px 0 25px 0;
      display: flex;
      align-items: center;
      gap: 1rem;
      width: 100%;
}
  
    .pin-card .pin-info {
      display: flex;
      flex-direction: column;
    }
    .pin-card .pin-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
    }
    .pin-card .label {
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
color: #86A0D1;
text-align: left;
padding: 0 0 5px 0;
}
.pin-card .value {
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
    }
.journry {
    font-family: Inter;
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #fff;
}

.Start-Pin-cycle {
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: -0.5px;
color: #000000;
border-radius: 25px;
padding: 15px 25px;
width: 100%;
margin: 15px 0;

}

.pin-img {
    min-height: 35px;
    width: 100%;
}
.pin-step-1 .text-warning {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
    font-size: 12px;
}
.pin-step-1 .text-success {
    font-size: 12px;
}
.bdr-blue {
        border-top: 1px solid #2D59C9;
        border-bottom: 1px solid #2D59C9;
}
.send-cash-section {
    padding: 15px 0;
}
.send-cash-h2 {
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.5px;
    text-align: left;
    padding: 10px 0 0 0;
}
.step-1-tble {
    background-color: #2C3372;
    border-radius: 10px;
border: 1px solid #FFFFFF;
padding: 15px;
text-align: left;
}
.step-1-tble h3 {
    font-family: Inter;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.5px;
    color: #fff;
}
.step-1-tble span {
    background-color: #1E2A5B;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
}
.w-100p {
    width: 50px;
}
.step-4-tble img {
    margin-right: 40px;
}
.splash_screen .step-1 {
    width: 400px;
    padding: 0 0 20px 0;
    text-align: center;
    /* min-height: 100vh; */
    position: relative;
background: radial-gradient(210.37% 105.16% at -23.66% -17.96%, #6792DA 0%, #3d5fbc 44.98%, #1e3d8b 63.64%, #0f2772 71.98%, #141b65 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;    padding: 0 20px;
}
.rounded-circle {
    border-radius: 50% !important;
    width: 50px;
}
.skip_cl {
    font-size: 16px!important;
    font-weight: normal!important;
    text-decoration: underline;
    text-align: right;
    float: right;
    margin: 12px 0;
}
.text-transform {
    text-transform: uppercase;
}

.dark-bottom {
    background-color: #060712;
    padding: 20px;
    width: 400px;
    margin: auto;
}
    .timeline {
      position: relative;
      padding-left: 30px;
      border-left: 4px solid #25294e;
    }
    .timeline-item {
      position: relative;
      margin-bottom: 2rem;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -40px;
      top: 3px;
      width: 16px;
      height: 16px;
      background-color: #356af3;
      border-radius: 50%;
      z-index: 1;
    }
    .timeline-date {
         color: #86A0D1;
    font-size: 0.9rem;
    text-align: right;
    display: inline;
    float: right;
    }
    .timeline-subtext {
          color: #86A0D1;
    font-size: 0.95rem;
    display: inline;
    }
    .left-btn-h2 {
font-family: Inter;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
    }
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    right: -43%;
    height: 4px;
    width: 70%;
    background-color: #2945A1;
    z-index: 0;
}
.refer {
    line-height: 17px;
}
.step {
    position: relative;
    width: 30%;
}
.profile-pic {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 5px solid #203B80;
    text-align: center;
    margin: 15px auto;
}
.profile-pic-success {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    text-align: center;
    margin: 15px auto 5px auto;
}
.profile-details h3 {
    font-family: Inter;
font-weight: 600;
font-size: 26px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #fff;
}
.blue-bg-success {
    background-color: #2d1e16;
    width: 400px;
    margin: auto;
    padding: 0 20px;
}
.blue-bg-3-2 {
    background-color: #0a1920;
    width: 400px;
    margin: auto;
    padding: 0 20px;
}
.bdr-blue-3-2 {
border-top: 1px solid;
    border-image: linear-gradient(to left, #0a1920, #37c7ab) 1;
    border-bottom: 1px solid;
}
.active-pic-shadow {
    display: block;
    text-align: center;
    margin:0 auto 15px auto;
}
.blue-bg-active {
    background-color: #0a1920;
    width: 400px;
    margin: auto;
    padding: 0 20px;
}
.bdr-blue-active {
border-top: 1px solid;
    border-image: linear-gradient(to left, #0a1920, #37c7ab) 1;
    border-bottom: 1px solid;
}
.active-pic {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    text-align: center;
    margin: 15px auto;
}
.profile-details h5 {
    font-family: Inter;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: center;
color: #fff;
}

.profile-details p {
    text-align: center;
}
       .country-dropdown-toggle {
      background-color: #0d1b3d;
      border-radius: 50px;
      padding: 5px 15px;
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .country-dropdown-toggle img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }

    .country-dropdown-toggle::after {
      display: none;
    }

    .arrow-down {
      border: solid white;
      border-width: 0 2px 2px 0;
      display: inline-block;
      padding: 4px;
      transform: rotate(45deg);
      margin-left: auto;
    }

    .dropdown-menu {
      min-width: auto;
    }

    .dropdown-item img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
 .step-4-h3 {
font-family: Inter;
text-align: left;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;
padding: 15px;
background-color: #232855;
border-radius: 10px 10px 0 0;
border-bottom: 1px solid #fff;

 }
 .step-4-tble {
    background-color: #2C3372;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    /* padding: 15px; */
    text-align: left;
}
.pd-15 {
    padding: 15px;
}
.contact-phone-number {
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 15px;
}
.contact-phone-number h4 {
font-weight: 600;
font-size: 12px;
line-height: 200%;
letter-spacing: -0.5px;
color: #86A0D1;
}
.contact-phone-number h3 {
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
color: #fff;

}
.tottal-payable span {
    background-color: #1E2A5B;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    margin: auto;
    text-align: center;
    display: block;
    width: fit-content;
}
.pin-details-icon {
    font-family: Inter;
font-weight: 600;
font-size: 14px;
line-height: 100%;
letter-spacing: -0.5px;
text-align: start;
padding: 0 0 15px 0;
}
.pin-card-verify {
    background: #294C9538;
    /* border: 1px solid #2D59C9; */
    border-radius: 9px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}
.pin-card-verify .value {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.5px;
    color: #fff;
}
.pin-card-verify .label {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.5px;
    color: #86A0D1;
    text-align: left;
    padding: 0 0 5px 0;
}
.bottom-fixed {
    /* position: fixed; */
    /* bottom: 0; */
}
.btn-submit-white {
    margin-top: 2rem;
    background-color: #0D102B;
    color: #fff;
    border-radius: 24px;
    font-weight: 600;
    padding: 0.75rem;
    border: 1px solid #fff;
}
  .center-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      width: 100%;
    }
    .progress-transfer {
        background-color: #19234A;
        color: #86A0D1;
font-weight: 500;
font-size: 12px;
line-height: 100%;
letter-spacing: -0.5px;
padding: 5px 20px;
border-radius: 25px;

    }
    .pin-card-verify-1 {
    background: #070A28;
    border-radius: 9px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}
.pin-card-verify-1 .label {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.5px;
    color: #86A0D1;
    text-align: left;
    padding: 0 0 5px 0;
}
.pin-card-verify-1 .value {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.5px;
    color: #fff;
}
.bottom-fixed-btn {
    /* position: fixed;
    bottom: 0;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0; */
    width: 350px;
    margin: 0 auto;
    z-index: 1000;
}
.help-p {
    font-family: Inter;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.5px;
    color: #fff;
    text-align: left;
    padding: 15px 0;

}
.w-75-s {
    width: 80px;
}
.card-custom {
  background-color: #0c1435; /* dark navy blue */
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 600px;
  margin: auto;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.btn-custom {
  font-weight: 500;
  font-size: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
}

.btn-success {
  background-color: #2dd6b6;
  border: none;
}

.btn-danger {
  background-color: #ff2d2d;
  border: none;
}

.btn-success:hover {
  background-color: #25c0a4;
}
.bd .btn {
    color: #000;
}
.status a {
    text-decoration: none;
    color: #fff;
}
.bd {
    display: flex;
}

.min-height {
    min-height: 100vh;
    background: radial-gradient(210.37% 105.16% at -23.66% -17.96%, #6792DA 0%, #0C2056 44.98%, #061640 63.64%, #050D25 71.98%, #050611 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    z-index: 1;
    width: 400px;
    margin: auto;
}

.main-content {
    background-color: #070a28;
    height: 100vh;
    width: 400px;
    margin: auto;
}

@media screen and (max-width: 600px) {
    .min-height-auto {
        min-height: auto!important;
    }
    .blue-bg-success {
    background-color: #2d1e16;
    width: 100%;
    margin: auto;
    padding: 0 20px;
}
    .splash_screen .step-1 {
        width: 100%;
    }
    .bottom-fixed-btn {
    /* position: fixed;
    bottom: 0;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0; */
    width: 90%;
    margin: 0 auto;
    z-index: 1000;
}
    .blue-bg-3-2 {
    background-color: #0a1920;
    width: 100%;
    margin: auto;
    padding: 0 20px;
}
.splash_screen {
width: 100%;
}
.splash_screen .wrapper {
width: 100%;
}
.blue-bg {
background-color: #070A28;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: auto;
padding: 0 20px;
}
.view-pin {
background: #070a28;
border-radius: 0;
padding: 1rem;
margin: auto;
width: 100%;
}
.dark-bottom {
    background-color: #060712;
    padding: 20px;
    width: 100%;
    margin: auto;
}
.blue-bg-active {
  background-color: #0a1920;
  width: 100%;
  margin: auto;
  padding: 0 20px;
}
.main-content {
    background-color: #070a28;
    height: 100vh;
    width: 100%;
    margin: auto;
}
.splash_screen .link_expired {
    width: 100%;
}
}