.small-para {
font-size: 1rem;
font-style: italic;
text-align: center;
font-weight: 300
}
.theme-btn {
border-width: 3px;
padding: .5rem 1.8rem;
font-weight: 600;
border-radius: 6px;
font-size: 18px
}
.blog-section,
.inner-blog {
padding: 150px 0
}
.btn-outline-primary {
border-color: #004aad;
color: #004aad
}
.btn-outline-primary:hover {
background: #004aad;
border-color: #004aad;
color: #fff
}
.maroon-section {
background: #77082e
}
.engagement-section {
position: relative;
background: url(../img/index-upd/engagement-bg.webp) 0 0/cover no-repeat fixed
}
.engagement-section .engage-wrapper {
display: flex;
flex-direction: row;
gap: 2rem;
margin-top: 10rem
}
.engagement-section .engage-wrapper .engage-column {
display: flex;
position: relative;
background: #77082e;
flex: 1;
text-align: center;
border-radius: 5%
}
.engagement-section .engage-wrapper .engage-column::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transform: scaleY(0);
transform-origin: top;
transition: transform .5s;
z-index: 0
}
.engagement-section .engage-wrapper .engage-column:hover a {
color: #000;
z-index: 5
}
.engagement-section .engage-wrapper .engage-column:hover a .engage-icon {
background-color: #77082e
}
.engagement-section .engage-wrapper .engage-column:hover a .engage-icon .enicon-1 {
background: url(../img/engage1-wh.png) 0 0/contain
}
.engagement-section .engage-wrapper .engage-column:hover a .engage-icon .enicon-2 {
background: url(../img/engage2-wh.png) 0 0/contain
}
.engagement-section .engage-wrapper .engage-column:hover a .engage-icon .enicon-3 {
background: url(../img/engage3-wh.png) 0 0/contain
}
.engagement-section .engage-wrapper .engage-column:hover a .engage-icon .enicon-4 {
background: url(../img/engage4-wh.png) 0 0/contain
}
.engagement-section .engage-wrapper .engage-column:hover a .engage-icon .enicon-5 {
background: url(../img/engage5-wh.png) 0 0/contain
}
.engagement-section .engage-wrapper .engage-column:hover::after {
transform: scaleY(1);
transform-origin: bottom;
transition: transform .5s
}
.engagement-section .engage-wrapper .engage-column a {
display: block;
width: 100%;
height: 100%;
position: relative;
color: #fff;
text-decoration: none;
padding: 8rem 1rem 2rem;
font-family: Inter, sans-serif;
transition: .5s
}
.engagement-section .engage-wrapper .engage-column a .engage-icon {
position: absolute;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
padding: 3%;
top: -26%;
left: calc(50% - 75px);
transition: .5s;
display: flex;
align-items: center;
justify-content: center;
z-index: 99
}
.engagement-section .engage-wrapper .engage-column a .engage-icon .enicon-1 {
width: 100px;
height: 100px;
display: block;
background: url(../img/engage1.png) center/contain no-repeat;
transition: .5s
}
.engagement-section .engage-wrapper .engage-column a .engage-icon .enicon-2 {
width: 100px;
height: 100px;
display: block;
background: url(../img/engage2.png) 0 0/contain;
transition: .5s
}
.engagement-section .engage-wrapper .engage-column a .engage-icon .enicon-3 {
width: 100px;
height: 100px;
display: block;
background: url(../img/engage3.png) 0 0/contain;
transition: .5s
}
.engagement-section .engage-wrapper .engage-column a .engage-icon .enicon-4 {
width: 100px;
height: 100px;
display: block;
background: url(../img/engage4.png) 0 0/contain;
transition: .5s
}
.engagement-section .engage-wrapper .engage-column a .engage-icon .enicon-5 {
width: 100px;
height: 100px;
display: block;
background: url(../img/engage5.png) 0 0/contain;
transition: .5s
}
@media only screen and (min-width:992px) and (max-width:1200px) {
.engagement-section .engage-wrapper {
flex-wrap: wrap;
justify-content: center
}
.engagement-section .engage-wrapper .engage-column {
flex: 0 0 31%;
margin-bottom: 45px
}
}
.blog-section {
position: relative;
background: #f9f9f9
}
.modal-open {
padding-right: 0 !important
}
.remit-branded-section {
background-color: #041e34;
color: #fff;
padding: 60px 0
}
.remit-branded-step h2 {
font-size: 26px;
font-weight: 700;
color: #2b8cff
}
.remit-branded-step h4 {
font-weight: 600;
color: #fff;
font-size: 24px
}
.remit-branded-step p {
color: #d3d3d3;
font-size: 1rem;
line-height: 1.6
}
.remit-branded-phone {
max-width: 250px;
width: 100%;
display: block;
margin: 0 auto
}
/* Remit ecosystem section (homepage) */
/* Remit ecosystem section (homepage) */
.remit-ecosystem {
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
}
.remit-ecosystem .gs-section-head__desc {
font-size: 1.02rem;
max-width: 40rem;
margin-left: auto;
margin-right: auto
}
.remit-ecosystem__toolbar {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.15rem
}
.remit-ecosystem__switch {
display: flex;
flex: 1 1 320px;
max-width: 620px;
gap: 0.45rem;
padding: 0.4rem;
background: #eef2f7;
border-radius: 14px
}
.remit-ecosystem__switch-btn {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
background: transparent;
color: #475569;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
padding: 0.8rem 0.65rem;
border-radius: 11px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease
}
.remit-ecosystem__switch-btn svg {
flex-shrink: 0
}
.remit-ecosystem__switch-label {
min-width: 0;
text-align: left
}
.remit-ecosystem__switch-label--short {
display: none
}
.remit-ecosystem__switch-btn em {
flex-shrink: 0;
font-style: normal;
font-size: 0.75rem;
font-weight: 800;
min-width: 1.65rem;
text-align: center;
padding: 0.2rem 0.45rem;
border-radius: 999px;
background: rgba(55, 124, 213, 0.12);
color: #377cd5
}
.remit-ecosystem__switch-btn.is-active {
background: #fff;
color: #0f2747;
box-shadow: 0 2px 10px rgba(15, 39, 71, 0.08)
}
.remit-ecosystem__switch-btn.is-active em {
background: #377cd5;
color: #fff
}
.remit-ecosystem__switch-btn:hover:not(.is-active) {
background: rgba(255, 255, 255, 0.55);
color: #0f2747
}
.remit-ecosystem__filter-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 48px;
padding: 0.75rem 1.15rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #fff;
color: #0f2747;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 8px rgba(15, 39, 71, 0.05);
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease
}
.remit-ecosystem__filter-toggle:hover,
.remit-ecosystem__filter-toggle.is-open {
border-color: #377cd5;
background: #377cd5;
color: #fff;
transform: translateY(-1px)
}
.remit-ecosystem__filter-panels {
margin-bottom: 1.25rem;
animation: remitEcoFadeIn 0.25s ease
}
.remit-ecosystem__filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center
}
.remit-ecosystem__filter {
border: 1px solid #e2e8f0;
background: #fff;
color: #475569;
font-size: 0.84rem;
font-weight: 600;
padding: 0.5rem 0.95rem;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease
}
.remit-ecosystem__filter:hover {
border-color: #bfdbfe;
color: #0f2747;
transform: translateY(-1px)
}
.remit-ecosystem__filter.is-active {
background: #377cd5;
border-color: #377cd5;
color: #fff
}
.remit-ecosystem__panel {
display: none
}
.remit-ecosystem__panel.is-active {
display: block;
animation: remitEcoFadeIn 0.28s ease
}
@keyframes remitEcoFadeIn {
from { opacity: 0; transform: translateY(6px) }
to { opacity: 1; transform: translateY(0) }
}
@keyframes remitEcoCardIn {
from { opacity: 0; transform: translateY(14px) }
to { opacity: 1; transform: translateY(0) }
}
.remit-ecosystem__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.15rem;
margin-bottom: 0.25rem
}
.remit-ecosystem__panel.is-expanded .remit-ecosystem__grid {
margin-bottom: 1.5rem;
padding-bottom: 0.5rem
}
@media (min-width: 576px) {
.remit-ecosystem__grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (min-width: 992px) {
.remit-ecosystem__grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem
}
}
.remit-eco-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 1.35rem 1.25rem 1.1rem;
box-shadow: 0 2px 12px rgba(15, 39, 71, 0.04);
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease
}
.remit-eco-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
transition: background 0.25s ease
}
.remit-eco-card:hover,
.remit-eco-card:focus-visible {
border-color: #bfdbfe;
box-shadow: 0 14px 32px rgba(15, 39, 71, 0.1);
transform: translateY(-4px);
outline: none
}
.remit-ecosystem__panel.is-expanded .remit-eco-card.is-revealing:hover,
.remit-ecosystem__panel.is-expanded .remit-eco-card.is-revealing:focus-visible {
transform: translateY(-2px)
}
.remit-eco-card--blue:hover::before,
.remit-eco-card--blue:focus-visible::before { background: #2563eb }
.remit-eco-card--purple:hover::before,
.remit-eco-card--purple:focus-visible::before { background: #7c3aed }
.remit-eco-card--teal:hover::before,
.remit-eco-card--teal:focus-visible::before { background: #0d9488 }
.remit-eco-card--green:hover::before,
.remit-eco-card--green:focus-visible::before { background: #16a34a }
.remit-eco-card--orange:hover::before,
.remit-eco-card--orange:focus-visible::before { background: #ea580c }
.remit-eco-card--pink:hover::before,
.remit-eco-card--pink:focus-visible::before { background: #db2777 }
.remit-eco-card--red:hover::before,
.remit-eco-card--red:focus-visible::before { background: #dc2626 }
.remit-eco-card--gray:hover::before,
.remit-eco-card--gray:focus-visible::before { background: #64748b }
.remit-eco-card--cyan:hover::before,
.remit-eco-card--cyan:focus-visible::before { background: #0891b2 }
.remit-eco-card--yellow:hover::before,
.remit-eco-card--yellow:focus-visible::before { background: #ca8a04 }
.remit-eco-card.is-collapsed,
.remit-eco-card.is-filtered-out {
display: none
}
.remit-eco-card.is-revealing {
display: flex;
animation: remitEcoCardIn 0.45s ease both
}
.remit-eco-card__icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.85rem;
transition: transform 0.25s ease, box-shadow 0.25s ease
}
.remit-eco-card:hover .remit-eco-card__icon,
.remit-eco-card:focus-visible .remit-eco-card__icon {
transform: scale(1.06)
}
.remit-eco-card__icon svg {
width: 22px;
height: 22px
}
.remit-eco-card--blue .remit-eco-card__icon { background: #eff6ff; color: #2563eb }
.remit-eco-card--purple .remit-eco-card__icon { background: #f5f3ff; color: #7c3aed }
.remit-eco-card--teal .remit-eco-card__icon { background: #f0fdfa; color: #0d9488 }
.remit-eco-card--green .remit-eco-card__icon { background: #ecfdf5; color: #16a34a }
.remit-eco-card--orange .remit-eco-card__icon { background: #fff7ed; color: #ea580c }
.remit-eco-card--pink .remit-eco-card__icon { background: #fdf2f8; color: #db2777 }
.remit-eco-card--red .remit-eco-card__icon { background: #fef2f2; color: #dc2626 }
.remit-eco-card--gray .remit-eco-card__icon { background: #f1f5f9; color: #475569 }
.remit-eco-card--cyan .remit-eco-card__icon { background: #ecfeff; color: #0891b2 }
.remit-eco-card--yellow .remit-eco-card__icon { background: #fefce8; color: #ca8a04 }
.remit-eco-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.55rem
}
.remit-eco-card__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.35;
color: #0f2747
}
.remit-eco-card__badge {
flex-shrink: 0;
padding: 0.2rem 0.5rem;
border-radius: 999px;
background: #ecfdf5;
border: 1px solid #bbf7d0;
color: #15803d;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase
}
.remit-eco-card__badge--aml {
background: #fff7ed;
border-color: #fed7aa;
color: #c2410c
}
.remit-eco-card__desc {
margin: 0 0 1rem;
flex: 1;
font-size: 0.92rem;
line-height: 1.6;
color: #64748b
}
.remit-eco-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid #eef2f7
}
.remit-eco-card:hover .remit-eco-card__foot {
border-top-color: #dbeafe
}
.remit-eco-card__foot-label {
font-size: 0.8rem;
color: #94a3b8;
line-height: 1.35
}
.remit-eco-card__foot-value {
font-size: 0.82rem;
font-weight: 700;
color: #0f2747;
text-align: right;
line-height: 1.35
}
.remit-eco-card__foot-value.is-teal { color: #0d9488 }
.remit-eco-card__foot-value.is-green { color: #16a34a }
.remit-eco-card__foot-value.is-purple { color: #7c3aed }
.remit-eco-card__foot-value.is-red { color: #dc2626 }
.remit-eco-card__foot-value.is-blue { color: #2563eb }
.remit-ecosystem__empty {
margin: 0 0 1rem;
text-align: center;
font-size: 0.95rem;
color: #94a3b8;
padding: 1.5rem;
border-radius: 12px;
background: #f8fafc;
border: 1px dashed #e2e8f0
}
.remit-ecosystem__foot {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
margin-top: 1rem;
padding-top: 0.5rem
}
.remit-ecosystem__panel.is-expanded .remit-ecosystem__foot {
margin-top: 0.25rem;
padding-top: 0.75rem
}
.remit-ecosystem__view-all,
.remit-ecosystem__view-less {
display: block;
width: 100%;
max-width: 360px;
margin: 0;
padding: 0.85rem 1.15rem;
border: 1px solid #dbeafe;
border-radius: 12px;
background: #fff;
color: #377cd5;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease
}
.remit-ecosystem__view-all:hover,
.remit-ecosystem__view-less:hover {
background: #eff6ff;
border-color: #377cd5;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(55, 124, 213, 0.12)
}
.remit-ecosystem__view-less {
border-color: #e2e8f0;
color: #475569
}
.remit-ecosystem__view-less:hover {
background: #f8fafc;
border-color: #94a3b8;
color: #0f2747;
box-shadow: 0 4px 12px rgba(15, 39, 71, 0.06)
}
.remit-ecosystem__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
max-width: 440px;
margin: 0;
padding: 0.95rem 1.15rem;
border-radius: 12px;
background: #377cd5;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 18px rgba(55, 124, 213, 0.25);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease
}
.remit-ecosystem__cta:hover {
color: #fff;
text-decoration: none;
background: #2a5fa8;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(55, 124, 213, 0.3)
}
@media (max-width: 767px) {
.remit-ecosystem__toolbar {
flex-direction: column;
align-items: stretch
}
.remit-ecosystem__switch {
flex: none;
max-width: none;
width: 100%
}
.remit-ecosystem__filter-toggle {
width: 100%
}
.remit-ecosystem__switch-label--full {
display: none
}
.remit-ecosystem__switch-label--short {
display: inline
}
.remit-ecosystem__filters {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.35rem;
-webkit-overflow-scrolling: touch
}
.remit-eco-card__title {
font-size: 0.98rem
}
.remit-eco-card__desc {
font-size: 0.88rem
}
}
@media (min-width: 768px) {
.remit-ecosystem__switch-label--full {
display: inline
}
.remit-ecosystem__switch-label--short {
display: none
}
}
@media (min-width: 992px) {
.remit-eco-card__title {
font-size: 1.15rem
}
.remit-eco-card__desc {
font-size: 0.95rem
}
}
.features-end-user-section {
overflow: hidden
}
.features-end-user {
background: linear-gradient(135deg, #032462 0%, #001321 55%, #001a33 100%);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 24px;
padding: 1.75rem 1.25rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28)
}
@media (min-width:768px) {
.features-end-user {
padding: 2.25rem 2rem
}
}
@media (min-width:992px) {
.features-end-user {
padding: 2.75rem 2.5rem
}
}
.features-end-user__eyebrow {
display: inline-block;
margin-bottom: 0.75rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: rgba(34, 197, 94, 0.14);
border: 1px solid rgba(34, 197, 94, 0.35);
color: #86efac;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase
}
.features-end-user__title {
margin: 0 0 0.85rem;
font-size: clamp(1.45rem, 2.8vw, 2rem);
font-weight: 700;
line-height: 1.25;
color: #fff
}
.features-end-user__lead {
margin: 0 0 1.25rem;
font-size: 0.95rem;
line-height: 1.65;
color: rgba(226, 232, 240, 0.92);
max-width: 36rem
}
.features-end-user__list {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-bottom: 1rem
}
.features-end-user__item {
width: 100%;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 14px;
background: rgba(15, 23, 42, 0.35);
color: #fff;
text-align: left;
padding: 0.75rem 0.85rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease
}
.features-end-user__item:hover {
border-color: rgba(134, 239, 172, 0.45);
background: rgba(15, 23, 42, 0.55);
transform: translateX(4px)
}
.features-end-user__item.is-active {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.12);
box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15)
}
.features-end-user__item-num {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 800;
color: #86efac;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3)
}
.features-end-user__item.is-active .features-end-user__item-num {
background: #22c55e;
color: #fff;
border-color: #22c55e
}
.features-end-user__item-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0
}
.features-end-user__item-body strong {
font-size: 0.92rem;
font-weight: 700;
line-height: 1.35;
color: #fff
}
.features-end-user__item-body small {
font-size: 0.78rem;
line-height: 1.45;
color: rgba(203, 213, 225, 0.88)
}
.features-end-user__preview {
margin-bottom: 1.25rem;
padding: 0.9rem 1rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(148, 163, 184, 0.2);
min-height: 4.5rem
}
.features-end-user__preview-text {
margin: 0;
font-size: 0.88rem;
line-height: 1.6;
color: #e2e8f0;
transition: opacity 0.2s ease
}
.features-end-user__preview-text.is-hidden {
display: none
}
.features-end-user__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.25rem;
border-radius: 16px;
background: #377cd5;
color: #fff;
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 8px 20px rgba(55, 124, 213, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease
}
.features-end-user__cta:hover {
color: #fff;
text-decoration: none;
background: #2a5fa8;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(55, 124, 213, 0.4)
}
.features-end-user__visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem 0 1rem
}
.features-end-user__visual-glow {
position: absolute;
inset: 10% 5% 5%;
background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.22) 0%, transparent 68%);
pointer-events: none
}
.features-end-user__image {
position: relative;
z-index: 1;
max-width: min(100%, 380px);
filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.35))
}
.features-end-user__chip {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.65rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.88);
border: 1px solid rgba(148, 163, 184, 0.35);
color: #e2e8f0;
font-size: 0.68rem;
font-weight: 600;
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
pointer-events: none
}
.features-end-user__chip.is-active {
opacity: 1;
transform: translateY(0);
border-color: rgba(34, 197, 94, 0.55)
}
.features-end-user__chip-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
animation: featuresEndUserPulse 1.8s ease-in-out infinite
}
@keyframes featuresEndUserPulse {
0%,
100% {
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2)
}
50% {
box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.08)
}
}
.features-end-user__chip--pin {
top: 14%;
right: 4%
}
.features-end-user__chip--ekyc {
top: 42%;
left: 0
}
.features-end-user__chip--timeline {
bottom: 12%;
right: 8%
}
.features-end-user__chip--promo {
bottom: 28%;
left: 4%
}
@media (max-width:991px) {
.features-end-user__chip--pin {
top: 10%;
right: 2%
}
.features-end-user__chip--ekyc {
left: 2%
}
.features-end-user__chip--timeline {
bottom: 8%;
right: 4%
}
.features-end-user__chip--promo {
bottom: 22%;
left: 2%
}
}
.paas-dual-pane{background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%)}.paas-dual-pane__head{max-width:38rem}.paas-dual-pane__eyebrow{display:inline-flex;align-items:center;gap:0.45rem;margin-bottom:0.85rem;padding:0.35rem 0.7rem;border-radius:999px;background:rgba(55,124,213,0.1);border:1px solid rgba(55,124,213,0.22);font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#377cd5}.paas-dual-pane__eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#377cd5;flex-shrink:0}.paas-dual-pane__title{margin:0 0 0.75rem;font-size:clamp(1.55rem,2.8vw,2.15rem);font-weight:700;line-height:1.2;color:#0f2747}.paas-dual-pane__desc{margin:0;font-size:0.95rem;line-height:1.65;color:#64748b}.paas-dual-pane__view-tabs{display:flex;flex-wrap:wrap;gap:0.35rem;padding:0.35rem;border-radius:14px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 4px 16px rgba(15,39,71,0.05)}.paas-dual-pane__view-tab{flex:1 1 auto;min-width:0;border:none;background:transparent;color:#475569;font-size:0.72rem;font-weight:700;line-height:1.3;padding:0.6rem 0.65rem;border-radius:10px;cursor:pointer;transition:background 0.2s ease,color 0.2s ease,box-shadow 0.2s ease}.paas-dual-pane__view-tab.is-active{background:#377cd5;color:#fff;box-shadow:0 4px 12px rgba(55,124,213,0.28)}.paas-dual-pane__panel{display:none}.paas-dual-pane__panel.is-visible{display:block}.paas-dual-pane[data-view="customer"] .paas-dual-pane__panel[data-dual-pane-panel="customer"],.paas-dual-pane[data-view="admin"] .paas-dual-pane__panel[data-dual-pane-panel="admin"]{flex:0 0 100%;max-width:100%}.paas-dual-pane__card{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:18px;border:1px solid #e2e8f0;padding:1.25rem;box-shadow:0 8px 28px rgba(15,39,71,0.06);transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease}@media (min-width:768px){.paas-dual-pane__card{padding:1.5rem}}.paas-dual-pane__card--customer{border-color:#bfdbfe;box-shadow:0 10px 32px rgba(55,124,213,0.08)}.paas-dual-pane__card--admin{border-color:#e2e8f0}.paas-dual-pane__card:hover{transform:translateY(-2px)}.paas-dual-pane__card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;margin-bottom:0.85rem}.paas-dual-pane__card-brand{display:flex;align-items:flex-start;gap:0.75rem;min-width:0}.paas-dual-pane__card-icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#eff6ff;color:#377cd5}.paas-dual-pane__card-icon--admin{background:#f1f5f9;color:#475569}.paas-dual-pane__card-label{display:block;margin-bottom:0.2rem;font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#377cd5}.paas-dual-pane__card-label--admin{color:#64748b}.paas-dual-pane__card-title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.3;color:#0f2747}.paas-dual-pane__card-badge{flex-shrink:0;padding:0.3rem 0.55rem;border-radius:999px;font-size:0.65rem;font-weight:700;white-space:nowrap}.paas-dual-pane__card-badge--customer{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.paas-dual-pane__card-badge--admin{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}.paas-dual-pane__card-intro{margin:0 0 0.85rem;font-size:0.86rem;line-height:1.6;color:#64748b}.paas-dual-pane__tags{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:0.45rem}.paas-dual-pane__tags li{display:inline-flex;align-items:center;gap:0.35rem;padding:0.35rem 0.55rem;border-radius:999px;font-size:0.68rem;font-weight:600;line-height:1.3}.paas-dual-pane__tags--customer li{background:#f0f9ff;color:#1d4ed8;border:1px solid #dbeafe}.paas-dual-pane__tags--admin li{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}.paas-dual-pane__features{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.15rem;flex:1}.paas-dual-pane__feature{display:flex;align-items:flex-start;gap:0.7rem;padding:0.7rem 0.75rem;border-radius:12px;border:1px solid #eef2f7;background:#fafbfc;transition:border-color 0.2s ease,background 0.2s ease}.paas-dual-pane__feature:hover{background:#fff;border-color:#dbeafe}.paas-dual-pane__card--admin .paas-dual-pane__feature:hover{border-color:#e2e8f0}.paas-dual-pane__feature-icon{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.paas-dual-pane__feature-icon--customer{background:#eff6ff;color:#377cd5}.paas-dual-pane__feature-icon--admin{background:#f1f5f9;color:#64748b}.paas-dual-pane__feature strong{display:block;margin-bottom:0.15rem;font-size:0.84rem;font-weight:700;line-height:1.35;color:#0f2747}.paas-dual-pane__feature p{margin:0;font-size:0.76rem;line-height:1.5;color:#64748b}.paas-dual-pane__cta{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;width:100%;padding:0.8rem 1rem;border-radius:12px;font-size:0.88rem;font-weight:700;text-decoration:none;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease,border-color 0.2s ease}.paas-dual-pane__cta--primary{background:#377cd5;color:#fff;border:1px solid #377cd5;box-shadow:0 6px 18px rgba(55,124,213,0.28)}.paas-dual-pane__cta--primary:hover{color:#fff;text-decoration:none;background:#2a5fa8;border-color:#2a5fa8;transform:translateY(-1px);box-shadow:0 10px 24px rgba(55,124,213,0.32)}.paas-dual-pane__cta--secondary{background:#fff;color:#0f2747;border:1px solid #cbd5e1}.paas-dual-pane__cta--secondary:hover{color:#0f2747;text-decoration:none;background:#f8fafc;border-color:#94a3b8;transform:translateY(-1px)}@media (max-width:991px){.paas-dual-pane__head{max-width:none;text-align:center;margin:0 auto}.paas-dual-pane__eyebrow{margin-left:auto;margin-right:auto}.paas-dual-pane__view-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.paas-dual-pane__view-tab{flex:0 0 auto;white-space:nowrap;font-size:0.7rem}.paas-dual-pane__card-top{flex-wrap:wrap}}@media (min-width:992px){.paas-dual-pane__head{text-align:left}}.paas-capex-compare{background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%)}.paas-capex-compare__eyebrow{display:inline-block;margin-bottom:0.85rem;padding:0.35rem 0.75rem;border-radius:999px;background:rgba(55,124,213,0.1);border:1px solid rgba(55,124,213,0.22);font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#377cd5}.paas-capex-compare__title{margin:0 0 0.75rem;font-size:clamp(1.55rem,2.8vw,2.15rem);font-weight:700;line-height:1.2;color:#0f2747}.paas-capex-compare__desc{margin:0 auto;max-width:42rem;font-size:0.95rem;line-height:1.65;color:#64748b}.paas-capex-compare__card{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:18px;border:2px solid #e2e8f0;padding:1.25rem;box-shadow:0 8px 28px rgba(15,39,71,0.06)}@media (min-width:768px){.paas-capex-compare__card{padding:1.5rem}}.paas-capex-compare__card--remitso{border-color:#377cd5;box-shadow:0 10px 32px rgba(55,124,213,0.12)}.paas-capex-compare__card--inhouse{border-color:#fecaca}.paas-capex-compare__card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;margin-bottom:1rem}.paas-capex-compare__card-brand{display:flex;align-items:center;gap:0.7rem;min-width:0}.paas-capex-compare__card-icon{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.paas-capex-compare__card-icon--remitso{background:#eff6ff;color:#377cd5;border:1px solid #bfdbfe}.paas-capex-compare__card-icon--inhouse{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.paas-capex-compare__card-title{margin:0;font-size:1.02rem;font-weight:700;line-height:1.3;color:#0f2747}.paas-capex-compare__badge{flex-shrink:0;padding:0.3rem 0.55rem;border-radius:999px;font-size:0.64rem;font-weight:700;white-space:nowrap}.paas-capex-compare__badge--remitso{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.paas-capex-compare__badge--inhouse{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.paas-capex-compare__list{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:0.5rem;flex:1}.paas-capex-compare__row{display:flex;align-items:center;justify-content:space-between;gap:0.65rem;padding:0.7rem 0.8rem;border-radius:12px;border:1px solid #eef2f7;background:#fafbfc}.paas-capex-compare__row-label{display:inline-flex;align-items:center;gap:0.45rem;min-width:0;font-size:0.8rem;font-weight:600;line-height:1.35;color:#0f2747}.paas-capex-compare__row-label svg{flex-shrink:0;color:#16a34a}.paas-capex-compare__row-label--plain{color:#64748b;font-weight:500}.paas-capex-compare__pill{flex-shrink:0;padding:0.22rem 0.5rem;border-radius:999px;font-size:0.68rem;font-weight:700}.paas-capex-compare__pill--included{background:#ecfdf5;color:#15803d;border:1px solid #bbf7d0}.paas-capex-compare__cost{flex-shrink:0;font-size:0.76rem;font-weight:700;line-height:1.3;color:#0f2747;text-align:right}.paas-capex-compare__summary{margin-top:auto;padding:0.9rem 1rem;border-radius:12px}.paas-capex-compare__summary--remitso{background:#eff6ff;border:1px solid #dbeafe}.paas-capex-compare__summary--inhouse{background:#fef2f2;border:1px solid #fecaca}.paas-capex-compare__summary-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;font-size:0.8rem;color:#475569}.paas-capex-compare__summary-row+.paas-capex-compare__summary-row{margin-top:0.55rem;padding-top:0.55rem;border-top:1px solid rgba(148,163,184,0.25)}.paas-capex-compare__summary-row strong{font-size:0.92rem;font-weight:800;color:#0f2747;text-align:right}.paas-capex-compare__highlight-green{color:#16a34a !important}.paas-capex-compare__highlight-red{color:#dc2626 !important}.paas-capex-compare__footnote{margin:1.25rem 0 0;font-size:0.78rem;color:#94a3b8}@media (max-width:575px){.paas-capex-compare__card-top{flex-wrap:wrap}.paas-capex-compare__row{flex-direction:column;align-items:flex-start}.paas-capex-compare__cost,.paas-capex-compare__pill{align-self:flex-end}.paas-capex-compare__summary-row{flex-direction:column;align-items:flex-start}.paas-capex-compare__summary-row strong{text-align:left}}.ecosystem-support .card {
background: #0f2747;
border: 1px solid #fff0;
border-radius: 12px;
padding: 20px;
transition: .3s;
height: 100%
}
.ecosystem-support .card:hover {
border: 1px solid #2f80ed;
transform: translateY(-8px);
box-shadow: 0 8px 20px #2f80ed33
}
.ecosystem-support .step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f80ed;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 15px
}
.ecosystem-support .key-benefit {
background: #132b4d;
border-radius: 8px;
padding: 12px;
margin: 15px 0;
font-size: .95rem;
line-height: 1.7;
border-left: 5px solid #2f80ed
}
.ecosystem-support .btn-learn {
background: #2f80ed;
border: none;
padding: 8px 18px;
border-radius: 6px;
font-weight: 500;
color: #fff
}
.ecosystem-support .btn-learn:hover {
background: #1b64c8
}
.phone-design-wrapper {
position: relative;
display: flex;
justify-content: center
}
.phone-design-conatiner {
width: 350px;
max-width: 360px;
height: 650px;
background: linear-gradient(to bottom, #fde8e8, #e8f8ef);
border: 12px solid #000;
border-radius: 40px;
box-shadow: 0 10px 30px #0003;
text-align: center;
padding: 40px 20px;
margin: 0 auto
}
.notch {
width: 120px;
height: 25px;
background: #000;
border-radius: 20px;
position: absolute;
top: 8px;
left: 50%
}
.status-icons,
.status-time,
.status-time-2 {
position: absolute;
top: 12px;
gap: 8px;
display: flex
}
.status-icons {
right: 20px
}
.status-time,
.status-time-2 {
left: 20px
}
.logo-center {
position: relative;
width: 100px;
z-index: 99
}
.phone-design-conatiner h2 {
font-size: 16px;
color: #004080;
font-weight: 700;
margin: 15px 0 5px
}
.phone-design-conatiner p {
font-size: 10px;
color: #555;
margin: 0
}
.floating-card img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 12px #00000026
}
@keyframes float {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-15px)
}
}
.phone-cal-country {
border-radius: 12px;
padding: 8px;
background: #f3f8ff
}
.phone-cal-country-data {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0;
border: 1px solid #377cd5;
padding: 8px 6px;
border-radius: 10px
}
.phone-cal-country-data .right {
display: flex;
align-items: center;
gap: 5px
}
.phone-cal-country-data .flag {
width: 35px;
height: 35px;
border-radius: 50%;
margin-right: 12px
}
.phone-cal-country .text-num {
flex: 1;
font-size: 15px;
font-weight: 500;
color: #377cd5
}
.phone-cal-country .text,
.phone-cal-country .text-cur {
flex: 1;
font-size: 15px;
font-weight: 500;
color: #000
}
.phone-cal-country.dropdown {
font-size: 14px;
color: #444;
margin-left: 8px;
cursor: pointer
}
.phone-cal-country .rate {
font-size: 13px;
color: #3a6cae;
margin-top: 15px;
font-weight: 500
}
.made-with-love {
font-size: 12px;
color: #555;
text-align: center;
position: absolute;
bottom: 30px;
left: 50%;
width: 100%
}
.heart {
color: #d87ca1;
font-size: 18px;
margin: 0 5px;
display: inline-block;
animation: 1.5s infinite pulse
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: .7;
opacity: 1
}
50% {
transform: scale(1.2);
opacity: 1;
opacity: .5
}
}
.top-left {
top: 12%;
left: -45px;
animation-delay: 0s;
position: absolute
}
.top-right {
top: 20%;
right: -37%;
animation-delay: 1s
}
.bottom-left {
bottom: 10%;
left: -34%;
animation-delay: 2s
}
.bottom-right {
bottom: 20%;
right: -35%;
animation-delay: 3s
}
.bottom-bar {
position: absolute;
bottom: 4px;
left: 50%;
width: 6rem;
height: 4px;
background: #000;
border-radius: 9999px
}
.dark .bottom-bar,
.landing-video .overlay:hover .play-btn {
background: #fff3
}
.blog-security-last {
margin-top: 3rem;
background-color: #1f2937;
padding: 2rem;
border-radius: .5rem;
text-align: center;
box-shadow: 0 10px 15px #0000004d
}
.blog-security-last p {
font-size: 1.125rem;
color: #d1d5db;
margin-bottom: 1rem
}
.blog-security-last p.highlight {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin-bottom: 1.5rem
}
.blog-security-last a {
display: inline-block;
background-color: #377cd5;
color: #fff;
font-weight: 700;
padding: .75rem 2rem;
border-radius: .5rem;
box-shadow: 0 4px 6px #0003
}
.remitso-eco-sys-icon {
width: 40px;
height: 40px;
min-width: 32px;
flex-shrink: 0;
margin-right: 10px
}
.Product-Suite .feature-block .card a,
.remitso-eco-sys-btn a {
align-items: center;
display: inline-flex;
font-weight: 600;
text-decoration: none
}
.remitso-eco-sys-btn a {
color: #377cd5;
gap: 6px;
position: relative;
transition: .3s
}
.remitso-eco-sys-btn a span {
display: inline-block;
transition: transform .3s
}
.msb-count-flow-link:hover,
.ready-to-launch-btn:hover .ready-to-launch-arrow,
.remitso-eco-sys-btn a:hover span,
.schedule-demo-request .cta-link:hover i {
transform: translateX(5px)
}
.remitso-eco-sys-btn a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #377cd5;
transition: width .3s
}
.navigating-the-maze-container {
margin: 2rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
background: #11182780;
padding: 1.5rem;
border-radius: .5rem;
animation: 1s .8s forwards navigating-the-maze-fade-in-up
}
@keyframes navigating-the-maze-fade-in-up {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.navigating-the-maze-donut {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(var(--chart-affiliates) 0 83.2%, var(--chart-irds) 83.2% 98.2%, var(--chart-rnps) 98.2% 100%);
animation: 1s ease-in-out navigating-the-maze-grow
}
.navigating-the-maze-center,
.navigating-the-maze-donut::before {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%
}
.navigating-the-maze-donut::before {
content: '';
width: 75%;
height: 75%;
background: #111827;
border-radius: 50%
}
@keyframes navigating-the-maze-grow {
from {
transform: scale(.9);
opacity: 0
}
to {
transform: scale(1);
opacity: 1
}
}
.navigating-the-maze-center {
text-align: center;
color: #fff
}
.navigating-the-maze-center span:first-child {
font-size: 2rem;
font-weight: 700;
display: block
}
.navigating-the-maze-center span:last-child {
font-size: .875rem;
color: #9ca3af
}
.navigating-the-maze-legend {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 1rem
}
.navigating-the-maze-color {
height: 1rem;
width: 1rem;
border-radius: 50%;
margin-right: .75rem
}
.navigating-the-maze-value {
margin-left: .5rem;
color: #d1d5db;
font-weight: 700
}
:root {
--chart-affiliates: #3B82F6;
--chart-irds: #F59E0B;
--chart-rnps: #10B981
}
.Product-Suite .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem
}
.Product-Suite .glow-background {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 80vh;
max-width: 1200px;
max-height: 1200px;
background: radial-gradient(circle, #1d4ed81a 0, #fff0 70%);
z-index: -1
}
.Product-Suite .section-header {
text-align: center;
padding-top: 6rem;
padding-bottom: 4rem
}
.Product-Suite .section-header h2 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
margin: 0
}
.Product-Suite .section-header p {
margin-top: 1rem;
font-size: 1.1rem;
color: #9ca3af;
max-width: 700px;
margin-left: auto;
margin-right: auto
}
.Product-Suite .journey-container {
position: relative;
padding-top: 10vh;
padding-bottom: 20vh
}
.Product-Suite .journey-line-svg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
z-index: 0;
pointer-events: none
}
.Product-Suite .journey-node {
transition: r .4s, filter .4s
}
.Product-Suite .journey-node.is-active {
r: 10;
filter: drop-shadow(0 0 8px #3b82f6cc)
}
.Product-Suite .feature-block {
position: relative;
z-index: 10;
width: 100%;
max-width: 400px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
transition: opacity .6s ease-out, transform .6s ease-out
}
.Product-Suite .feature-block.is-visible {
opacity: 1;
transform: translateY(0)
}
.Product-Suite .feature-block .card {
background: #11182780;
border: 1px solid #1e293b;
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
margin: 20px 0
}
.Product-Suite .feature-block .card h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
color: #fff
}
.Product-Suite .feature-block .card p {
margin-top: .75rem;
color: #9ca3af;
line-height: 1.5
}
.Product-Suite .feature-block .card a {
gap: .5rem;
margin-top: 1rem;
font-size: .9rem;
color: #60a5fa;
transition: color .3s
}
.Product-Suite .feature-block .card a:hover {
color: #93c5fd
}
.Product-Suite .feature-block .icon {
background: #1e293b;
padding: .75rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.2rem
}
@media (min-width:1024px) {
.blog-image {
margin-top: 5px
}
.msb-sec {
grid-template-columns: repeat(3, 1fr)
}
.Product-Suite .feature-block.align-left {
margin-right: calc(50% + 80px);
margin-left: 0
}
.Product-Suite .feature-block.align-right {
margin-left: calc(50% + 80px);
margin-right: 0
}
.Product-Suite .feature-block .card {
margin-top: 20px !important
}
}
.lock-svg {
animation: 1.2s infinite lock-bounce
}
@keyframes lock-bounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-3px)
}
}
.gear-svg {
animation: 3s linear infinite gear-spin
}
@keyframes gear-spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.payout-svg {
animation: 1.2s infinite payout-bounce
}
@keyframes payout-bounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-3px)
}
}
.icon-svg-wrapper img {
width: 60px;
text-align: center
}
.financial-accounts-dashboard .main-card {
background-color: #1a2c47;
border: 1px solid #2a4365;
border-radius: .75rem
}
.financial-accounts-dashboard .kpi-card {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: 1.5rem;
border-radius: .75rem;
transition: transform .2s
}
.financial-accounts-dashboard .kpi-card:hover {
transform: translateY(-3px)
}
.financial-accounts-dashboard .data-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: .75rem 0;
border-bottom: 1px solid #2a4365
}
.Control-Every-Step-state-item:last-child,
.Glossary-purpose-item:last-child,
.disaster-recovery-activity-item:last-child,
.financial-accounts-dashboard .data-list-item:last-child,
.proactively-mitigate-risk .radar-item:last-child,
.raas-checklist-item:last-child,
.source-pricing-td-table tbody tr:last-child td {
border-bottom: none
}
.financial-accounts-dashboard .figure-box {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: .25rem .75rem;
border-radius: .375rem;
text-align: right;
min-width: 120px;
color: #fff
}
.financial-accounts-dashboard .add-button {
border: 1px solid #2563eb;
color: #60a5fa;
font-weight: 600;
padding: .25rem .75rem;
border-radius: .5rem;
text-align: center;
width: 100%;
background: 0 0
}
.financial-accounts-dashboard .add-button:hover {
background: #2563eb;
color: #fff
}
.msb-coa-preview__shell {
background-color: #1a2c47;
border: 1px solid #2a4365;
color: #e2e8f0
}
.msb-coa-preview__breadcrumb {
margin-bottom: .75rem
}
.msb-coa-preview__breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
list-style: none;
margin: 0;
padding: 0;
font-size: .75rem;
color: #94a3b8
}
.msb-coa-preview__breadcrumb-list li.active {
color: #cbd5e1
}
.msb-coa-preview__header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #2a4365
}
.msb-coa-preview__title-row {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .5rem
}
.msb-coa-preview__title-icon {
color: #60a5fa;
display: inline-flex
}
.msb-coa-preview__title {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-weight: 700;
color: #fff;
margin: 0
}
.msb-coa-preview__subtitle {
font-size: .8rem;
line-height: 1.5;
color: #94a3b8;
margin: 0;
max-width: 52rem
}
.msb-coa-preview__journals-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
background-color: #2563eb;
border: none;
color: #fff;
font-size: .8rem;
font-weight: 600;
padding: .45rem .9rem;
border-radius: .375rem;
white-space: nowrap;
flex-shrink: 0
}
.msb-coa-preview__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: 1rem
}
.msb-coa-preview__currency-tabs {
display: inline-flex;
background-color: #0d1a2e;
border: 1px solid #2a4365;
border-radius: .375rem;
padding: .2rem
}
.msb-coa-preview__currency-tab {
border: none;
background: 0 0;
color: #94a3b8;
font-size: .8rem;
font-weight: 600;
padding: .35rem .85rem;
border-radius: .25rem;
cursor: default
}
.msb-coa-preview__currency-tab.active {
background-color: #2a4365;
color: #fff
}
.msb-coa-preview__balance-status {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .8rem;
color: #94a3b8
}
.msb-coa-preview__balance-status svg {
color: #4ade80;
flex-shrink: 0
}
.msb-coa-preview__stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid #2a4365;
border-radius: .5rem;
overflow: hidden;
margin-bottom: 1rem
}
.msb-coa-preview__stat {
background-color: #0d1a2e;
border-right: 1px solid #2a4365;
border-bottom: 1px solid #2a4365;
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .25rem;
min-height: 100%
}
.msb-coa-preview__stat:nth-child(4n) {
border-right: none
}
.msb-coa-preview__stat--wide {
grid-column: span 1
}
.msb-coa-preview__stat-label {
font-size: .72rem;
font-weight: 700;
color: #60a5fa;
text-transform: uppercase;
letter-spacing: .02em
}
.msb-coa-preview__stat-value {
font-size: clamp(.95rem, 2vw, 1.15rem);
font-weight: 700;
color: #fff;
line-height: 1.2
}
.msb-coa-preview__stat-value.is-zero {
color: #64748b;
font-weight: 600
}
.msb-coa-preview__stat-desc {
font-size: .7rem;
line-height: 1.4;
color: #94a3b8
}
.msb-coa-preview__table-wrap {
border: 1px solid #2a4365;
border-radius: .5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background-color: #0d1a2e
}
.msb-coa-preview__table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
font-size: .8rem
}
.msb-coa-preview__table thead th {
background-color: #1a2c47;
color: #cbd5e1;
font-weight: 600;
text-align: left;
padding: .65rem .85rem;
border-bottom: 1px solid #2a4365;
white-space: nowrap
}
.msb-coa-preview__table tbody td {
padding: .6rem .85rem;
border-bottom: 1px solid #2a4365;
color: #e2e8f0;
vertical-align: middle
}
.msb-coa-preview__table tbody tr:last-child td {
border-bottom: none
}
.msb-coa-preview__table tbody td.is-zero {
color: #64748b
}
.msb-coa-preview__account-link {
color: #60a5fa;
font-weight: 500
}
.msb-coa-preview__table-footer {
margin: .65rem 0 0;
font-size: .75rem;
color: #94a3b8
}
@media (max-width:991px) {
.msb-coa-preview__stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.msb-coa-preview__stat:nth-child(4n) {
border-right: 1px solid #2a4365
}
.msb-coa-preview__stat:nth-child(2n) {
border-right: none
}
.msb-coa-preview__stat--wide {
grid-column: span 1
}
}
@media (max-width:575px) {
.msb-coa-preview__stats-grid {
grid-template-columns: 1fr
}
.msb-coa-preview__stat {
border-right: none !important
}
.msb-coa-preview__header {
flex-direction: column
}
.msb-coa-preview__journals-btn {
width: 100%;
justify-content: center
}
.msb-coa-preview__controls {
flex-direction: column;
align-items: flex-start
}
.msb-coa-preview__table {
min-width: 100%
}
.msb-coa-preview__table thead {
display: none
}
.msb-coa-preview__table tbody tr {
display: block;
border-bottom: 1px solid #2a4365;
padding: .65rem .85rem
}
.msb-coa-preview__table tbody tr:last-child {
border-bottom: none
}
.msb-coa-preview__table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
border-bottom: none;
padding: .35rem 0;
text-align: right !important
}
.msb-coa-preview__table tbody td::before {
content: attr(data-label);
color: #94a3b8;
font-weight: 600;
text-align: left;
flex-shrink: 0
}
}
.msb-wallet-countries__shell {
background-color: #1a2c47;
border: 1px solid #2a4365;
color: #e2e8f0
}
.msb-wallet-countries__header {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #2a4365
}
.msb-wallet-countries__title-row {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .5rem
}
.msb-wallet-countries__title-icon {
color: #60a5fa;
display: inline-flex
}
.msb-wallet-countries__title {
font-size: clamp(1.1rem, 2.5vw, 1.35rem);
font-weight: 700;
color: #fff;
margin: 0
}
.msb-wallet-countries__subtitle {
font-size: .8rem;
line-height: 1.55;
color: #94a3b8;
margin: 0
}
.msb-wallet-countries__search-wrap {
margin-bottom: 1rem
}
.msb-wallet-countries__search {
width: 100%;
max-width: 18rem;
background-color: #0d1a2e;
border: 1px solid #2a4365;
border-radius: .375rem;
color: #e2e8f0;
font-size: .8rem;
padding: .5rem .75rem
}
.msb-wallet-countries__search::placeholder {
color: #64748b
}
.msb-wallet-countries__table-wrap {
border: 1px solid #2a4365;
border-radius: .5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background-color: #0d1a2e
}
.msb-wallet-countries__table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: .8rem
}
.msb-wallet-countries__table thead th {
background-color: #1a2c47;
color: #cbd5e1;
font-weight: 600;
text-align: left;
padding: .65rem .85rem;
border-bottom: 1px solid #2a4365;
white-space: nowrap
}
.msb-wallet-countries__table tbody td {
padding: .75rem .85rem;
border-bottom: 1px solid #2a4365;
color: #e2e8f0;
vertical-align: middle
}
.msb-wallet-countries__table tbody tr:last-child td {
border-bottom: none
}
.msb-wallet-countries__country {
display: inline-flex;
align-items: center;
gap: .6rem
}
.msb-wallet-countries__flag {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
border: none;
box-shadow: none
}
.msb-wallet-countries__country-name {
font-weight: 600;
color: #fff
}
.msb-wallet-countries__status {
display: inline-flex;
align-items: center;
gap: .45rem;
color: #94a3b8
}
.msb-wallet-countries__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #64748b;
flex-shrink: 0
}
.msb-wallet-countries__status-dot.is-offered {
background-color: #4ade80
}
.msb-wallet-countries__since {
color: #94a3b8
}
.msb-wallet-countries__btn {
border-radius: .375rem;
font-size: .75rem;
font-weight: 600;
padding: .4rem .75rem;
white-space: nowrap;
cursor: default
}
.msb-wallet-countries__btn--outline {
background-color: transparent;
border: 1px solid #2a4365;
color: #e2e8f0
}
.msb-wallet-countries__btn--primary {
background-color: #2563eb;
border: 1px solid #2563eb;
color: #fff
}
@media (max-width:767px) {
.msb-wallet-countries__search {
max-width: 100%
}
.msb-wallet-countries__table {
min-width: 100%
}
.msb-wallet-countries__table thead {
display: none
}
.msb-wallet-countries__table tbody tr {
display: block;
padding: .85rem;
border-bottom: 1px solid #2a4365
}
.msb-wallet-countries__table tbody tr:last-child {
border-bottom: none
}
.msb-wallet-countries__table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
border-bottom: none;
padding: .35rem 0;
text-align: right !important
}
.msb-wallet-countries__table tbody td::before {
content: attr(data-label);
color: #94a3b8;
font-weight: 600;
text-align: left;
flex-shrink: 0
}
.msb-wallet-countries__table tbody td[data-label=Action] {
justify-content: flex-end;
padding-top: .65rem
}
.msb-wallet-countries__table tbody td[data-label=Action]::before {
display: none
}
.msb-wallet-countries__btn {
width: 100%;
max-width: 10rem
}
}
.proactively-mitigate-risk .main-card {
background-color: #1a2c47;
border: 1px solid #2a4365;
border-radius: 16px
}
.proactively-mitigate-risk .sub-module-card {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: 1.25rem;
border-radius: .75rem;
display: flex;
align-items: center
}
.Automate-Your-Compliance .sub-module-card.active,
.proactively-mitigate-risk .sub-module-card.active {
background-color: #2a4365;
border-color: #60a5fa
}
.proactively-mitigate-risk .sub-module-card .icon {
color: #60a5fa;
margin-right: 1rem;
flex-shrink: 0
}
.proactively-mitigate-risk .radar-item {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem 0;
border-bottom: 1px solid #2a4365
}
.pass-ricing-latest.svg-icon,
.proactively-mitigate-risk .icon-status {
flex-shrink: 0
}
.Automate-Your-Compliance .main-card,
.ControlAccess .main-card,
.Every-Customer .main-card,
.Secure-Every-Transaction .main-card,
.Transact-with-Confidence .main-card {
background-color: #1a2c47;
border: 1px solid #2a4365;
border-radius: 16px !important
}
.Automate-Your-Compliance .sub-module-card {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: 1rem;
border-radius: 16px
}
.Automate-Your-Compliance .sub-module-card .icon {
color: #60a5fa;
flex-shrink: 0
}
.Automate-Your-Compliance .policy-item {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: .75rem 1.25rem;
border-radius: 16px
}
.Secure-Every-Transaction .badge {
background-color: #1e3a8a99;
color: #60a5fa;
font-size: .75rem
}
.Secure-Every-Transaction .search-bar {
background-color: #11182799;
border: 1px solid #2a4365;
color: #6b7280
}
.Secure-Every-Transaction .current-page {
background-color: #37415180
}
.Secure-Every-Transaction .risk-factor-item {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: .75rem 1.25rem;
border-radius: .5rem;
color: #fff;
text-align: start;
width: 100%;
box-sizing: border-box
}
.Secure-Every-Transaction .risk-factor-item .icon {
background-color: #2a4365;
color: #60a5fa;
border-radius: 50%;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-right: 1rem
}
.Transact-with-Confidence .list-item {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: 1rem 1.25rem;
border-radius: .75rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem
}
.Transact-with-Confidence .list-item .dot {
width: 8px;
height: 8px;
background-color: #6c757d;
border-radius: 50%;
display: inline-block
}
.Transact-with-Confidence .pagination-arrow {
background-color: #2a4365;
border: 1px solid #4a5c7b;
border-radius: .375rem;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
cursor: pointer
}
.Transact-with-Confidence .pagination-arrow.disabled {
color: #4b5563;
cursor: not-allowed
}
.Transact-with-Confidence .pagination-arrow.active {
color: #e0e0e0
}
.icon-svg-wrapper-data img {
width: 18px;
height: 18px
}
.ControlAccess .role-card {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: 1.25rem;
border-radius: .75rem;
transition: .3s
}
.ControlAccess .role-card.active {
border-color: #60a5fa;
box-shadow: 0 0 15px #60a5fa33
}
.ControlAccess .permission-item {
display: flex;
align-items: center;
font-size: .95rem
}
.ControlAccess .permission-item .icon-granted {
color: #4ade80;
margin-right: .75rem;
flex-shrink: 0
}
.ControlAccess .permission-item .icon-denied {
color: #f87171;
margin-right: .75rem;
flex-shrink: 0
}
.Every-Customer .customer-card {
background-color: #0d1a2e;
border: 1px solid #2a4365;
padding: .75rem 1rem;
border-radius: .75rem;
color: #fff
}
.Every-Customer .customer-card.active {
border-color: #60a5fa;
background-color: #2a4365
}
.Every-Customer .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block
}
.Every-Customer .status-verified {
background-color: #4ade80
}
.Every-Customer .detail-card {
background-color: #0d1a2e;
border: 1px solid #2a4365;
border-radius: .75rem;
padding: 1rem;
color: #fff
}
.Every-Customer .action-link {
background-color: #1a2c47;
border: 1px solid #2a4365;
padding: .75rem 1rem;
border-radius: .5rem;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
color: #e0e0e0;
cursor: pointer
}
.Every-Customer .pagination-arrow {
background-color: #2a4365;
border: 1px solid #4a5c7b;
border-radius: .375rem;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600
}
.Control-Every-Step-main-card,
.Glossary-main-card,
.disaster-recovery-main,
.party-integrations-main,
.payout-workflows-main {
background-color: #1a2c47;
border: 1px solid;
border-radius: 1rem;
box-shadow: 0 25px 50px -12px #00000080;
padding: 1.5rem
}
.payout-workflows-section-title {
color: #fff;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem
}
.payout-workflows-setting-card {
background-color: #0d1a2e;
border: 1px solid;
border-radius: .5rem;
padding: 1rem;
margin-bottom: .75rem;
display: flex;
align-items: flex-start;
gap: 1rem;
transition: .2s
}
.payout-workflows-setting-card:hover {
border-color: #14b8a680
}
.payout-workflows-setting-card.highlighted {
border-color: #14b8a680;
box-shadow: 0 0 0 2px #14b8a633
}
.payout-workflows-icon {
flex-shrink: 0;
margin-top: .25rem;
width: 24px;
height: 24px
}
.payout-workflows-card-title {
color: #fff;
font-weight: 600;
margin-bottom: .25rem;
font-size: 1.125rem
}
.disaster-recovery-status-info p,
.party-integrations-detail-description,
.party-integrations-service-description,
.payout-workflows-card-description {
color: #94a3b8;
font-size: .875rem;
margin: 0
}
.payout-workflows-methods-container {
background-color: #0d1a2e;
border: 1px solid;
border-radius: .5rem;
padding: 1rem
}
.payout-workflows-method-section-title {
color: #94a3b8;
font-size: .875rem;
font-weight: 600;
margin-bottom: .5rem
}
.disaster-recovery-activity-item,
.payout-workflows-method-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: .75rem 0;
border-bottom: 1px solid
}
.payout-workflows-method-item:last-child {
border-bottom: none;
padding-bottom: 0
}
.disaster-recovery-activity-left,
.payout-workflows-method-info {
display: flex;
align-items: center;
gap: .75rem
}
.payout-workflows-method-name {
color: #cbd5e1;
font-weight: 500;
font-size: .875rem
}
.payout-workflows-add-method,
.payout-workflows-configure-link {
display: flex;
align-items: center;
color: #94a3b8;
font-size: .875rem;
font-weight: 500;
cursor: pointer
}
.payout-workflows-configure-link {
gap: .375rem;
text-decoration: none;
transition: color .2s
}
.Glossary-filter-inactive:hover,
.manage-operational-corridors table,
.payout-workflows-configure-link:hover {
color: #cbd5e1
}
.payout-workflows-add-method {
justify-content: center;
gap: .5rem;
padding: .75rem;
margin-top: .75rem;
border: 2px dashed #334155;
border-radius: .5rem;
background: 0 0;
transition: .2s
}
.disaster-recovery-config-button,
.party-integrations-add-btn,
.party-integrations-btn-danger,
.party-integrations-pagination-btn,
.party-integrations-service-item {
transition: background-color .2s;
cursor: pointer
}
.party-integrations-header-left,
.party-integrations-header-section {
align-items: center;
gap: 1rem;
display: flex
}
.payout-workflows-add-method:hover {
background-color: #33415580;
border-color: #475569;
color: #cbd5e1
}
.payout-workflows-divider {
margin: 1rem 0;
padding-top: 1rem;
border-top: 1px solid
}
.party-integrations-header-section {
justify-content: space-between;
margin-bottom: 1.5rem;
flex-wrap: wrap
}
.party-integrations-section-title {
color: #fff;
font-size: 1.125rem;
font-weight: 600;
margin: 0
}
.party-integrations-search-bar {
position: relative;
width: 100%;
max-width: 20rem
}
.party-integrations-search-input {
width: 100%;
background-color: #1e293b99;
border: 1px solid #334155;
border-radius: .375rem;
padding: .5rem .75rem .5rem 2.5rem;
color: #fff;
font-size: .875rem
}
.party-integrations-search-input::placeholder {
color: #94a3b8
}
.party-integrations-search-input:focus {
outline: 0;
border-color: #3b82f6;
box-shadow: 0 0 0 2px #3b82f680
}
.party-integrations-search-icon {
position: absolute;
left: .75rem;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: #94a3b8
}
.party-integrations-add-btn {
background-color: #2563eb;
color: #fff;
font-weight: 600;
padding: .5rem 1rem;
border-radius: .375rem;
border: none;
display: flex;
align-items: center;
gap: .5rem
}
.Control-Every-Step-add-btn:hover,
.Glossary-add-btn:hover,
.party-integrations-add-btn:hover,
.party-integrations-btn-primary:hover {
background-color: #1d4ed8
}
.party-integrations-service-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
border-radius: .5rem;
margin-bottom: .75rem
}
.party-integrations-service-item:hover {
background-color: #1e293b80
}
.party-integrations-service-item.selected {
background-color: #0d1a2e
}
.party-integrations-service-initial {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 700;
color: #fff;
font-size: .875rem
}
.Control-Every-Step-state-badge.initiated,
.bg-blue-500,
.party-integrations-service-initial.selected {
background-color: #3b82f6
}
.bg-slate-600,
.party-integrations-service-initial.default {
background-color: #475569
}
.party-integrations-service-title {
color: #fff;
font-weight: 600;
margin-bottom: .25rem;
font-size: 20px
}
.party-integrations-pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
font-size: .875rem
}
.party-integrations-detail-actions,
.party-integrations-pagination-controls {
align-items: center;
display: flex;
gap: .5rem
}
.global-remittance-network p,
.manage-operational-corridors p,
.party-integrations-pagination-info {
color: #94a3b8
}
.party-integrations-pagination-btn {
padding: .375rem;
border-radius: .375rem;
border: none;
background: 0 0;
color: #94a3b8
}
.Control-Every-Step-pagination-btn:hover,
.Glossary-category-card:hover:not(.selected),
.Glossary-pagination-btn:hover,
.party-integrations-pagination-btn:hover {
background-color: #33415580
}
.party-integrations-detail-view {
background-color: #0d1a2e;
border: 1px solid;
border-radius: .5rem;
padding: 1.5rem;
height: 100%;
display: flex;
flex-direction: column
}
.party-integrations-btn-primary,
.party-integrations-btn-secondary {
color: #fff;
padding: .5rem 1rem;
transition: background-color .2s;
cursor: pointer
}
.party-integrations-detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem
}
.party-integrations-detail-title {
color: #fff;
font-size: 1.125rem;
font-weight: 700;
margin-bottom: .25rem
}
.party-integrations-detail-actions {
margin-bottom: 1.5rem;
flex-wrap: wrap
}
.party-integrations-btn-primary {
background-color: #2563eb;
font-weight: 600;
border-radius: .375rem;
border: none
}
.party-integrations-btn-secondary {
background-color: #334155cc;
font-weight: 600;
border-radius: .375rem;
border: none;
display: flex;
align-items: center;
gap: .5rem
}
.disaster-recovery-config-button:hover,
.party-integrations-btn-secondary:hover {
background-color: #4b5563cc
}
.party-integrations-btn-danger {
border: 1px solid;
background: 0 0;
color: #f87171;
padding: .5rem;
border-radius: .375rem
}
.party-integrations-btn-danger:hover {
background-color: #ef44441a
}
.party-integrations-detail-fields,
.raas-simulator .raas-slider-container {
margin-bottom: 1.5rem
}
.party-integrations-field,
.phone-design-wrapper-file .activity h3 {
margin-bottom: 1rem
}
.party-integrations-field-label {
color: #94a3b8;
font-size: .75rem;
margin-bottom: .25rem;
display: block
}
.party-integrations-field-value {
background-color: #33415580;
padding: .5rem;
border-radius: .375rem;
color: #fff;
font-size: .875rem;
word-break: break-all
}
.party-integrations-tip {
background-color: #33415566;
padding: .75rem;
border-radius: .5rem;
display: flex;
align-items: flex-start;
gap: .75rem;
font-size: .75rem;
color: #94a3b8;
margin-top: auto
}
.party-integrations-tip-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
color: #60a5fa;
margin-top: .125rem
}
.disaster-recovery-status-section {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem
}
.disaster-recovery-metric-content p.value,
.disaster-recovery-status-info h2 {
color: #fff;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: .25rem
}
.disaster-recovery-status-indicator {
display: flex;
align-items: center;
gap: .5rem;
padding: .25rem .75rem;
border-radius: 9999px;
font-size: .875rem;
font-weight: 500
}
.disaster-recovery-status-operational {
background-color: #0d1a2e;
color: #4ade80
}
.disaster-recovery-status-syncing {
background-color: #0d1a2e;
color: #60a5fa
}
.disaster-recovery-status-dot {
width: .5rem;
height: .5rem;
border-radius: 50%
}
.Control-Every-Step-state-badge.cleared,
.disaster-recovery-status-dot.operational {
background-color: #22c55e
}
.disaster-recovery-status-dot.syncing {
background-color: #0d1a2e;
animation: 2s infinite pulse
}
.disaster-recovery-metric-card {
background-color: #0d1a2e;
padding: 1rem;
border-radius: .5rem;
display: flex;
align-items: flex-start;
gap: 1rem
}
.disaster-recovery-metric-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #33415580;
border-radius: .5rem;
color: #60a5fa
}
.disaster-recovery-metric-content p.title {
color: #94a3b8;
font-size: .875rem;
margin-bottom: .25rem
}
.disaster-recovery-activity-info p.time,
.disaster-recovery-metric-content p.description {
color: #64748b;
font-size: .75rem;
margin: 0
}
.disaster-recovery-section-title {
color: #fff;
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem
}
.disaster-recovery-activity-container,
.disaster-recovery-config-container {
background-color: #0d1a2e;
padding: 1rem;
border-radius: .5rem;
border: 1px solid
}
.disaster-recovery-config-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem
}
.disaster-recovery-config-label {
color: #fff;
font-weight: 500;
font-size: .875rem
}
.disaster-recovery-config-button {
display: flex;
align-items: center;
gap: .5rem;
background-color: #334155cc;
color: #fff;
padding: .375rem .75rem;
border-radius: .375rem;
border: none;
font-size: .875rem
}
.disaster-recovery-activity-icon {
color: #94a3b8;
width: 18px;
height: 18px
}
.disaster-recovery-activity-info p.title {
color: #fff;
font-weight: 500;
font-size: .875rem;
margin-bottom: .125rem
}
.disaster-recovery-activity-status {
font-size: .875rem;
font-weight: 500
}
.Master-Your-Margins .margin-positive,
.disaster-recovery-activity-status.completed {
color: #4ade80
}
.CostsOfGlobal-subtitle.CostsOfGlobal-europe,
.disaster-recovery-activity-status.in-progress,
.eb-travel:hover h3,
.pathways-to-launch .ptl-startup:hover h4,
.us-infrastructure .us-card:hover h4,
.usn-step:hover h6 {
color: #60a5fa
}
.global-remittance-network .gn-card {
background: #1a2c47;
border: 1px solid;
border-radius: 1rem;
padding: 15px 10px;
box-shadow: 0 10px 25px #0f172a99
}
.global-remittance-network .search-bar input {
background-color: #1e293b99;
border: 1px solid #475569;
color: #fff;
padding-left: 2.5rem
}
.global-remittance-network .search-bar svg,
.manage-operational-corridors .search-bar svg {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
fill: #94a3b8
}
.global-remittance-network .filter-labels span {
font-size: .9rem;
font-weight: 500;
padding: .4rem .8rem;
border-radius: .5rem;
cursor: pointer
}
.global-remittance-network .filter-labels .active,
.manage-operational-corridors .filter-labels .active {
background: #334155cc;
color: #fff
}
.global-remittance-network .company-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid;
transition: background .2s;
cursor: pointer
}
.global-remittance-network .company-item:hover,
.manage-operational-corridors tbody tr:hover {
background: #1e293b66
}
.global-remittance-network .company-initial {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 700;
color: #fff;
background: #475569;
flex-shrink: 0
}
.global-remittance-network .company-type {
font-size: .75rem;
text-transform: uppercase;
color: #94a3b8
}
.global-remittance-network .status-active,
.manage-operational-corridors .status-check {
color: #22c55e
}
.global-remittance-network .status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 6px
}
.global-remittance-network .status-dot.active {
background: #22c55e
}
.global-remittance-network .status-dot.disabled {
background: #475569
}
.global-remittance-network .pagination-controls button,
.manage-operational-corridors .pagination-controls button {
background: 0 0;
border: none;
color: #94a3b8;
padding: .4rem .6rem;
border-radius: .4rem
}
.global-remittance-network .pagination-controls button:hover,
.manage-operational-corridors .pagination-controls button:hover {
background: #33415580
}
.global-remittance-network .btn-add,
.manage-operational-corridors .btn-add {
background: #2563eb;
color: #fff;
font-weight: 600;
font-size: .9rem;
padding: .5rem 1rem;
border-radius: .4rem;
display: flex;
align-items: center;
gap: .4rem;
transition: background .2s
}
.global-remittance-network .btn-add:hover,
.manage-operational-corridors .btn-add:hover {
background: #1d4ed8
}
.manage-operational-corridors .main-card {
background: #1a2c47;
border: 1px solid;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 10px 25px #0f172ab3
}
.manage-operational-corridors .management-card {
background: #0d1a2e;
border: 1px solid;
border-radius: .8rem;
padding: 1.5rem;
transition: .3s
}
.manage-operational-corridors .management-card.active {
border-color: #3b82f6;
box-shadow: 0 0 0 2px #3b82f680
}
.manage-operational-corridors .management-icon {
background: #33415580;
padding: .8rem;
border-radius: .5rem;
color: #3b82f6;
display: inline-flex;
align-items: center;
justify-content: center
}
.manage-operational-corridors .management-link {
color: #3b82f6;
font-weight: 600;
margin-top: 1rem;
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .9rem
}
.manage-operational-corridors thead {
background: #1e293b99;
color: #94a3b8;
text-transform: uppercase;
font-size: .75rem
}
.manage-operational-corridors tbody tr {
border-bottom: 1px solid;
transition: background .2s
}
.manage-operational-corridors .currency-name {
color: #3b82f6;
font-weight: 600
}
.manage-operational-corridors .search-bar input {
background-color: #1e293b99;
border: 1px solid #475569;
color: #fff;
padding-left: 2.2rem
}
.manage-operational-corridors .filter-labels span {
font-size: .85rem;
font-weight: 500;
padding: .3rem .8rem;
border-radius: .5rem;
cursor: pointer
}
.Control-Every-Step-management-card {
background-color: #0d1a2e;
border: 1px solid;
border-radius: .5rem;
padding: 1.5rem;
transition: .3s;
margin-bottom: 1.5rem
}
.Control-Every-Step-management-card.active,
.Glossary-category-card.selected {
border-color: #3b82f6cc;
box-shadow: 0 0 0 2px #3b82f680
}
.Control-Every-Step-icon-container {
background-color: #33415580;
border-radius: .5rem;
padding: .75rem;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center
}
.Control-Every-Step-icon,
.Glossary-icon {
color: #60a5fa;
width: 24px;
height: 24px
}
.Control-Every-Step-card-title {
color: #fff;
font-size: 1.25rem;
font-weight: 700;
margin: 0
}
.Control-Every-Step-card-description {
color: #94a3b8;
font-size: .875rem;
margin-top: .5rem;
margin-bottom: 0
}
.Control-Every-Step-section-title {
color: #fff;
font-size: 26px;
font-weight: 700;
margin-bottom: 1.5rem
}
.Control-Every-Step-add-btn,
.Glossary-add-btn {
background-color: #2563eb;
border: none;
color: #fff;
font-weight: 600;
padding: .5rem 1rem;
border-radius: .375rem;
font-size: .875rem;
transition: background-color .3s;
display: flex;
align-items: center;
gap: .5rem
}
.Control-Every-Step-search-container,
.Glossary-search-container {
position: relative;
max-width: 20rem
}
.Control-Every-Step-search-input,
.Glossary-search-input {
background-color: #1e293b99;
border: 1px solid #374151;
border-radius: .375rem;
padding: .5rem .75rem .5rem 2.5rem;
color: #fff;
width: 100%
}
.Control-Every-Step-search-input::placeholder {
color: #94a3b8
}
.Control-Every-Step-search-input:focus,
.Glossary-search-input:focus {
outline: 0;
border-color: #2563eb;
box-shadow: 0 0 0 2px #2563eb80
}
.Control-Every-Step-search-icon,
.Glossary-search-icon {
position: absolute;
left: .75rem;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
width: 18px;
height: 18px
}
.Control-Every-Step-state-item {
padding: 1rem;
border-bottom: 1px solid;
display: flex;
align-items: flex-start;
gap: 1rem
}
.Control-Every-Step-state-badge {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: .75rem;
flex-shrink: 0
}
.Control-Every-Step-state-badge.created {
background-color: #64748b
}
.Control-Every-Step-state-badge.available,
.bg-emerald-500 {
background-color: #10b981
}
.Control-Every-Step-state-badge.success {
background-color: #14b8a6
}
.Control-Every-Step-state-name {
color: #fff;
font-weight: 600;
margin: 0
}
.Control-Every-Step-state-description,
.Glossary-purpose-description {
color: #94a3b8;
font-size: .875rem;
margin: .25rem 0 0
}
.Control-Every-Step-pagination,
.Glossary-pagination {
margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: .875rem
}
.Control-Every-Step-pagination-info {
color: #94a3b8
}
.Control-Every-Step-pagination-controls,
.Glossary-pagination-controls {
display: flex;
gap: .5rem
}
.Control-Every-Step-pagination-btn {
background: 0 0;
border: none;
color: #94a3b8;
padding: .375rem;
border-radius: .375rem;
transition: background-color .3s
}
.Glossary-category-card {
background-color: #0d1a2e;
border: 1px solid;
border-radius: .5rem;
padding: 1rem;
transition: .3s;
margin-bottom: 1rem;
cursor: pointer
}
.Glossary-icon-container {
background-color: #33415580;
border-radius: .5rem;
padding: .5rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.Glossary-card-title {
color: #fff;
font-weight: 700;
margin: 0;
font-size: 20px
}
.Glossary-card-description {
color: #94a3b8;
font-size: .875rem;
margin-top: .25rem;
margin-bottom: 0
}
.Glossary-section-title {
color: #fff;
font-size: 24px;
font-weight: 700;
margin-bottom: 0
}
.Glossary-section-subtitle {
color: #94a3b8;
font-size: .875rem;
margin-top: .25rem
}
.Glossary-search-input::placeholder {
color: #94a3b8
}
.Glossary-filter-labels {
display: flex;
align-items: center;
gap: 1rem;
font-size: .875rem;
font-weight: 500
}
.Glossary-filter-active {
color: #fff;
background-color: #334155cc;
padding: .375rem .75rem;
border-radius: .375rem
}
.Glossary-filter-inactive {
color: #94a3b8;
cursor: pointer;
transition: color .3s
}
.Glossary-purpose-item {
padding: 1rem;
border-bottom: 1px solid;
display: flex;
align-items: center;
justify-content: space-between
}
.Glossary-purpose-content {
display: flex;
align-items: flex-start;
gap: 1rem
}
.Glossary-purpose-initial {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: .875rem;
flex-shrink: 0;
background-color: #64748b
}
.Glossary-purpose-name {
color: #fff;
font-weight: 600;
margin: 0;
font-size: 20px
}
.Glossary-toggle {
width: 24px;
height: 24px;
color: #475569;
transition: .3s;
cursor: pointer
}
.Glossary-toggle.active {
color: #4ade80;
transform: rotate(180deg)
}
.Glossary-pagination-info {
color: #94a3b8
}
.Glossary-pagination-btn {
background: 0 0;
border: none;
color: #94a3b8;
padding: .375rem;
border-radius: .375rem;
transition: background-color .3s;
cursor: pointer
}
.Master-Your-Margins .main-card {
background-color: #1a2c47;
border: 1px solid #2a4365;
border-radius: 1rem
}
.Master-Your-Margins .cyan-theme {
background-color: #22d3ee0d;
border-color: #fff
}
.Master-Your-Margins .cyan-accent-text {
color: #22d3ee
}
.Master-Your-Margins .static-box {
background-color: #0d1a2e;
border: 1px solid #2a4365;
border-radius: .375rem;
padding: .5rem .75rem;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff
}
.Master-Your-Margins .static-table-box {
background-color: #0d1a2e;
border: 1px solid #2a4365;
border-radius: .375rem;
padding: .5rem;
text-align: right;
color: #fff
}
.Master-Your-Margins .table-header {
color: #9ca3af;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .05em
}
.Master-Your-Margins .tab {
padding: .75rem 1.5rem;
border-bottom: 2px solid #fff0;
cursor: pointer
}
.Master-Your-Margins .tab.active {
color: #22d3ee;
border-bottom-color: #22d3ee
}
.Master-Your-Margins .add-slab {
color: #38bdf8;
font-weight: 600;
font-size: .875rem;
cursor: pointer
}
.blog-column .blog-desc h3 {
color: #fff;
font-size: 18px
}
.phone-design-wrapper-file {
color: #1f2937;
text-align: left;
flex-grow: 1;
position: relative
}
.phone-design-wrapper-file .header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
animation: .6s ease-out slideInFromTop
}
.phone-design-wrapper-file .header h2 {
font-weight: 700;
font-size: 1.5rem;
color: #111827;
margin: 0
}
.phone-design-wrapper-file .subtext {
font-size: .875rem;
color: #6b7280;
margin: .25rem 0 0
}
.phone-design-wrapper-file .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
display: flex;
align-items: center;
justify-content: center;
transition: .3s;
cursor: pointer;
position: relative;
overflow: hidden
}
.phone-design-wrapper-file .avatar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #fff6, transparent);
transition: left .6s
}
.AnnualDIY-stat-card:hover::before,
.eb-btn:hover::before,
.msb-count-flow-item:hover .msb-count-flow-card::after,
.phone-design-wrapper-file .avatar:hover::before,
.usn-card:hover::before {
left: 100%
}
.phone-design-wrapper-file .avatar:hover {
transform: scale(1.05) rotate(5deg);
box-shadow: 0 8px 25px #3b82f64d
}
.phone-design-wrapper-file .avatar .icon {
width: 24px;
height: 24px;
color: #fff;
z-index: 1;
display: block;
margin: 0;
flex-shrink: 0
}
.phone-design-wrapper-file .stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
animation: .6s ease-out .2s both slideInFromLeft
}
.phone-design-wrapper-file .card {
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
padding: 1.25rem;
border-radius: 16px;
border: 1px solid;
transition: .3s;
cursor: pointer;
position: relative;
overflow: hidden
}
.phone-design-wrapper-file .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3b82f61a, #9333ea1a);
opacity: 0;
transition: opacity .3s
}
.phone-design-wrapper-file .card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px #00000026;
border-color: #3b82f64d
}
.phone-design-wrapper-file .card .value {
font-weight: 700;
font-size: 1.375rem;
color: #111827;
margin: .5rem 0 0;
position: relative;
z-index: 1
}
.phone-design-wrapper-file .compliance {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #166534;
padding: 1rem;
border-radius: 16px;
margin-bottom: 2rem;
font-weight: 600;
font-size: .875rem;
border: 1px solid #86efac;
transition: .3s;
cursor: pointer;
animation: .6s ease-out .4s both slideInFromRight
}
.phone-design-wrapper-file .compliance:hover {
transform: scale(1.02);
box-shadow: 0 8px 20px #22c55e33
}
.phone-design-wrapper-file .compliance .verified {
font-weight: 700;
display: flex;
align-items: center;
gap: .5rem;
color: #15803d
}
.phone-design-wrapper-file .activity h3,
.phone-design-wrapper-file .activity-item .amount {
color: #111827;
font-size: 1rem;
font-weight: 700
}
.phone-design-wrapper-file .compliance .icon-sm {
width: 18px;
height: 18px;
animation: 2s infinite bounce
}
.phone-design-wrapper-file .activity {
animation: .6s ease-out .6s both slideInFromBottom
}
.phone-design-wrapper-file .activity-item {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
padding: 1rem;
border-radius: 12px;
font-size: .875rem;
margin-bottom: .75rem;
transition: .3s;
cursor: pointer;
border: 1px solid;
position: relative;
overflow: hidden
}
.phone-design-wrapper-file .activity-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
transform: scaleY(0);
transition: transform .3s;
transform-origin: bottom
}
.phone-design-wrapper-file .activity-item:hover::before {
transform: scaleY(1)
}
.phone-design-wrapper-file .activity-item:hover {
transform: translateX(8px);
box-shadow: 0 6px 20px #0000001a;
background: linear-gradient(135deg, #fff, #f1f5f9)
}
.phone-design-wrapper-file .activity-item p {
margin: 0;
color: #374151
}
.phone-design-wrapper .bottom-nave {
background: linear-gradient(135deg, #fffffff2, #f8fafcf2);
backdrop-filter: blur(20px);
border-top: 1px solid;
padding: 10px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 12px;
color: #6b7280;
text-align: center;
border-radius: 10px 10px 0 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 -4px 20px #0000001a;
animation: .6s ease-out .8s both slideInFromBottom;
z-index: 10
}
.Audit-the-Code .glass-card,
.companies-trust-data {
backdrop-filter: blur(10px);
background: #ffffff0d
}
.phone-design-wrapper .nav-item {
text-align: center;
color: #6b7280;
font-size: .75rem;
font-weight: 600;
padding: 5px;
border-radius: 12px;
transition: .4s cubic-bezier(.4, 0, .2, 1);
cursor: pointer;
position: relative;
min-width: 60px;
user-select: none;
overflow: hidden
}
.phone-design-wrapper .nav-item::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 0 0 4px 4px;
transition: width .4s cubic-bezier(.4, 0, .2, 1)
}
.phone-design-wrapper .nav-item::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100%;
height: 100%;
background: #3b82f61a;
border-radius: 12px;
transition: transform .3s;
z-index: -1
}
.phone-design-wrapper .nav-item:active::after {
transform: translate(-50%, -50%) scale(1.1)
}
.phone-design-wrapper .nav-item:hover {
color: #3b82f6;
background: #3b82f61a;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px #3b82f633
}
.phone-design-wrapper .nav-item.active {
color: #1d4ed8;
background: #3b82f626;
transform: translateY(-2px);
box-shadow: 0 6px 20px #3b82f640;
animation: 3s infinite pulse
}
.phone-design-wrapper .nav-item .nav-icon {
width: 24px;
height: 24px;
margin: 0 auto;
transition: .4s cubic-bezier(.4, 0, .2, 1);
opacity: .8
}
.phone-design-wrapper .nav-item:hover .nav-icon {
transform: scale(1.2) rotate(5deg);
opacity: 1
}
.phone-design-wrapper .nav-item.active .nav-icon {
transform: scale(1.1);
opacity: 1;
filter: drop-shadow(0 2px 4px #3b82f64d)
}
.phone-design-wrapper .nav-item p {
margin: 0;
transition: .3s;
font-weight: 600;
font-size: 12px
}
.phone-design-wrapper .nav-item:hover p {
font-weight: 700;
letter-spacing: .5px
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-30px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(30px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
transform: translateY(0)
}
40% {
transform: translateY(-6px)
}
60% {
transform: translateY(-3px)
}
}
.phone-design-wrapper .nav-item:active {
animation: .6s bounce
}
.Designed-for-Growth {
border-radius: 1.5rem;
border: 1px solid #1a202c;
background-color: #1a202c80;
transition: .3s
}
.Designed-for-Growth:hover {
border-color: #377cd5;
background-color: #1a202c
}
.icon-lg {
height: 3rem;
width: 3rem
}
.Everything-You-Need,
.paas-modify .paas-sub,
.text-secondary {
color: #a0aec0
}
.Month-in-Action .card.bg-info p,
.Month-in-Action .card.bg-info small,
.billing-step-1 {
color: #a5b4fc !important
}
.billing-flow-container {
background-color: #1a202c80 !important;
border: 1px solid #4a5568 !important;
border-radius: 1.5rem !important
}
.billing-step-1 {
background-color: #4f46e533 !important;
border: 1px solid #4f46e5 !important;
font-weight: 600 !important
}
.billing-step-final {
background-color: #10b98133 !important;
border: 1px solid #10b981 !important;
color: #6ee7b7 !important;
font-weight: 700 !important
}
.billing-connector {
width: 1px;
height: 2rem;
background-color: #4a5568;
margin: 0 auto
}
.arrow {
font-size: 2rem;
color: #4a5568
}
.billing-group {
border: 2px dashed #4a5568 !important;
border-radius: 1.5rem !important
}
.billing-item,
.billing-item-action {
background-color: #2d3748 !important;
border: 1px solid #4a5568 !important
}
.billing-fees-container {
background-color: #1e40af66 !important;
border: 1px solid #3b82f6 !important
}
.billing-fee-item:first-of-type {
background-color: #16a34a1a !important;
color: #6ee7b7 !important;
border-radius: .5rem !important
}
.billing-fee-item:nth-of-type(2) {
background-color: #8b5cf61a !important;
color: #c4b5fd !important;
border-radius: .5rem !important
}
.billing-fee-item:nth-of-type(3) {
background-color: #14b8a61a !important;
color: #5eead4 !important;
border-radius: .5rem !important
}
.billing-sub-item {
background-color: #0003 !important;
border: 1px solid !important;
color: #5eead4 !important
}
.billing-deduction-info {
background-color: #991b1b66 !important;
border: 1px solid #ef4444 !important;
color: #fca5a5 !important
}
.Month-in-Action .card,
.embed-responsive-16by9 {
border-radius: 15px
}
.Month-in-Action .bg-dark {
background-color: #1a202c80 !important
}
.Month-in-Action .border-secondary {
border-color: #4a5568 !important
}
.Month-in-Action .icon-circle {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
background-color: #377cd5 !important;
color: #fff !important;
font-weight: 600
}
.Month-in-Action .card.bg-secondary {
background-color: #2d3748 !important;
border: 1px solid #2d3748 !important
}
.Month-in-Action .card.bg-info {
background-color: #4f46e51a !important;
border: 1px solid !important
}
.Everything-You-Need .bg-secondary-50,
.Month-in-Action .bg-secondary-50 {
background-color: #2d374880 !important
}
.Month-in-Action .border-secondary-50 {
border-color: #4a556880 !important
}
.Everything-You-Need .text-info,
.Month-in-Action .text-teal,
.Service-Facilitation h3.h5,
.remit-cal .text-primary-custom {
color: #377cd5 !important
}
.Month-in-Action .border-teal {
border: 1px solid !important
}
.Month-in-Action .pl-4 {
padding-left: 1rem !important
}
.Path-to-global .timeline-line {
left: 1.25rem;
top: 0;
width: 2px;
background-color: #4a556880
}
.Path-to-global .timeline-bullet {
width: 2.5rem;
height: 2.5rem;
z-index: 10;
left: 50%;
transform: translate(-50%, 0);
top: 50%
}
.Path-to-global .timeline-number {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
border: 4px solid #1a202c
}
.Path-to-global .bg-info {
background-color: #377cd5 !important
}
.Path-to-global .timeline-card {
background-color: #1a202c80 !important;
border: 1px solid #2d3748 !important;
transition: .3s
}
.Path-to-global .timeline-card:hover {
border-color: #377cd5 !important
}
.Everything-You-Need .bg-dark {
background-color: #1a202c !important
}
.Everything-You-Need .border-secondary {
border-color: #2d3748 !important
}
.Everything-You-Need .rounded-xl {
border-radius: 1rem !important
}
.Everything-You-Need h2.h3 {
font-size: 1.875rem
}
.Everything-You-Need .rounded-lg {
border-radius: .5rem !important
}
.Everything-You-Need .icon-lg {
height: 2rem;
width: 2rem
}
.Everything-You-Need .g-4>.col {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.Everything-You-Need .row.g-4 {
margin-left: -1.5rem;
margin-right: -1.5rem
}
.Service-Facilitation .card {
background-color: #1a202c80 !important;
border: 1px solid #377cd5 !important;
border-radius: 1rem !important
}
.Service-Facilitation .icon-container {
color: #41b9ff !important;
flex-shrink: 0
}
.Service-Facilitation .icon-container svg {
height: 2rem !important;
width: 2rem !important
}
.Service-Facilitation p {
color: #cbd5e0 !important
}
.Service-Facilitation strong {
color: #f7fafc !important;
font-weight: 700 !important
}
.Launch-your-business .card {
background: #ffffff0d !important;
border: 1px solid #1a202c !important;
border-radius: 1rem !important;
padding-top: 4rem !important;
padding-bottom: 4rem !important
}
.Launch-your-business h2 {
font-size: 2.5rem !important;
font-weight: 900 !important
}
.Launch-your-business p.lead {
max-width: 42rem;
font-size: 1.125rem !important;
color: #cbd5e0 !important
}
.Launch-your-business .btn.btn-primary {
background-color: #0ea5e9 !important;
border-color: #0ea5e9 !important;
font-weight: 900 !important;
padding: 1rem 2rem !important;
border-radius: .5rem !important;
font-size: 1.125rem !important;
transition: transform .2s ease-in-out
}
.Launch-your-business .btn.btn-primary:hover {
background-color: #0284c7 !important;
border-color: #0284c7 !important;
transform: scale(1.05)
}
@media only screen and (max-width:786px) {
.Path-to-global .timeline-bullet {
left: 0;
transform: translate(0, 0);
top: 35%
}
.Launch-your-business h2 {
font-size: 26px !important;
font-weight: 900 !important
}
.phone-design-wrapper-file {
display: block
}
.Everything-You-Need h2.h3 {
font-size: 26px
}
}
.splash-slider {
flex-grow: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 280px;
margin-top: 120px
}
.splash-slider .splash-slide {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
opacity: 0;
transform: translateY(15px);
transition: opacity .7s ease-out, transform .7s ease-out;
background-color: #fff0
}
.splash-slider .splash-slide.active {
opacity: 1;
transform: translateY(90%)
}
.splash-slider .splash-slide::before {
content: '';
position: absolute;
z-index: -1;
filter: blur(70px);
opacity: .7;
border-radius: 50%;
animation: 12s ease-in-out infinite alternate subtle-drift
}
.splash-slider #slide1::before {
background: radial-gradient(circle, #84fab0, #8fd3f4);
width: 250px;
height: 250px;
top: 10%;
left: -20%
}
.splash-slider #slide2::before {
background: radial-gradient(circle, #fbc2eb, #a6c1ee);
width: 300px;
height: 300px;
bottom: 5%;
right: -25%;
animation-delay: -3s
}
.splash-slider #slide3::before {
background: radial-gradient(circle, #ffecd2, #fcb69f);
width: 250px;
height: 250px;
top: 15%;
right: -20%;
animation-delay: -6s
}
.splash-slider #slide4::before {
background: radial-gradient(circle, #d4fc79, #96e6a1);
width: 270px;
height: 270px;
bottom: 10%;
left: -25%;
animation-delay: -9s
}
.splash-slider #slide5::before {
background: radial-gradient(circle, #a1c4fd, #c2e9fb);
width: 300px;
height: 300px;
top: 5%;
left: -15%;
animation-delay: -12s
}
.splash-slider #slide6::before {
background: radial-gradient(circle, #ff9a9e, #fecfef);
width: 280px;
height: 280px;
bottom: 15%;
right: -20%;
animation-delay: -15s
}
.splash-slider #slide7::before {
background: radial-gradient(circle, #f6d365, #fda085);
width: 290px;
height: 290px;
top: 10%;
right: -20%;
animation-delay: -18s
}
@keyframes subtle-drift {
from {
transform: translate(0, 0)
}
to {
transform: translate(15px, 10px)
}
}
.splash-slider .slide-content h3 {
font-size: 1.4rem;
font-weight: 800;
line-height: 1.2;
color: #1c2a3e
}
.splash-slider .splash-footer {
padding: 20px;
flex-shrink: 0;
background-color: #f8f9fa;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px
}
.splash-slider .pagination {
display: flex;
justify-content: center;
margin-bottom: 1.5rem
}
.splash-slider .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #d1d5db;
margin: 0 4px;
transition: .4s
}
.splash-slider .dot.active {
background-color: #1c2a3e;
width: 24px;
border-radius: 5px
}
.splash-slider .request-demo-btn {
display: block;
width: 100%;
background-color: #4a80e5;
color: #fff;
font-weight: 700;
font-size: 1rem;
padding: 15px;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background-color .3s
}
.splash-slider .request-demo-btn:hover {
background-color: #3c70d4
}
.splash-slider .remitso-credit {
text-align: center;
font-size: .75rem;
color: #9ca3af;
margin-top: 1.25rem
}
.splash-slider .remitso-credit .heart {
display: inline-block;
color: #f472b6;
animation: 1.5s ease-in-out infinite pump
}
@keyframes pump {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.3)
}
}
.source-pricing-td-table {
background: #ffffff0d;
border-radius: 12px;
overflow: hidden;
border: 1px solid #2d3748
}
.source-pricing-td-table table {
color: #fff;
margin-bottom: 0
}
.source-pricing-td-table thead th {
background: #1a202c;
color: #fff;
font-weight: 600;
text-align: center;
border-top: 2px solid #2d3748;
border-bottom: 2px solid #2d3748;
padding: 20px;
vertical-align: middle;
line-height: 1.6
}
.source-pricing-td-table tbody td {
text-align: center;
border-bottom: 1px solid #2d3748;
padding: 20px;
vertical-align: middle;
line-height: 1.6
}
.source-pricing-td-table .feature-col {
text-align: left;
font-weight: 600;
color: #cbd5e0;
white-space: nowrap
}
.source-pricing-td-table .highlight-col {
background: #3b82f64d;
font-weight: 600;
color: #e2e8f0
}
.Source-Code-License-card {
background: #ffffff0d;
border: 1px solid #2d3748;
border-radius: 12px
}
.Source-Code-License .icon-box {
width: 40px;
height: 40px;
background: #2d3748;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.Source-Code-License .icon-box i {
color: #9ca3af;
font-size: 1.1rem
}
.Source-Code-License p {
color: #cbd5e0
}
.Source-Code-License .btn-primary {
background: linear-gradient(90deg, #4a80e5, #3c70d4);
border: none;
border-radius: 8px;
padding: 10px 20px;
transition: background .3s
}
.Source-Code-License .btn-primary:hover {
background: linear-gradient(90deg, #3c70d4, #2f5bbd)
}
.text-muted {
color: #b9b9b9 !important
}
.Risk-Free-Acquisition .timeline-container {
position: relative;
padding-left: 40px
}
.Risk-Free-Acquisition .timeline-container::before {
content: "";
position: absolute;
top: 0;
left: 18px;
width: 2px;
height: 100%;
background: #0096ff66
}
.Risk-Free-Acquisition .timeline-icon {
width: 40px;
height: 40px;
border: 2px solid #007bff;
background: #377cd5;
border-radius: 50%;
color: #4dafff;
position: absolute;
left: -41px;
top: 15px
}
.Risk-Free-Acquisition .timeline-card {
background: #ffffff0d;
border-radius: 10px;
border: 1px solid #2d3748;
width: 100%
}
.Risk-Free-Acquisition .heading-accent {
color: #00c9ff
}
.Risk-Free-Acquisition .rfa-timeline {
--rfa-blue: #377cd5;
--rfa-line: rgba(55, 124, 213, .35);
position: relative;
padding: 8px 0 8px 8px
}
.Risk-Free-Acquisition .rfa-timeline::before {
content: "";
position: absolute;
top: 28px;
bottom: 28px;
left: 31px;
width: 2px;
background: linear-gradient(180deg, transparent, var(--rfa-line) 8%, var(--rfa-line) 92%, transparent)
}
.Risk-Free-Acquisition .rfa-timeline__item {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: flex-start;
margin-bottom: 22px;
opacity: 0;
transform: translateY(22px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: var(--rfa-delay, 0ms)
}
.Risk-Free-Acquisition .rfa-timeline__item.is-visible {
opacity: 1;
transform: translateY(0)
}
.Risk-Free-Acquisition .rfa-timeline__item:last-child {
margin-bottom: 0
}
.Risk-Free-Acquisition .rfa-timeline__marker {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px
}
.Risk-Free-Acquisition .rfa-timeline__step {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
color: rgba(255, 255, 255, .55)
}
.Risk-Free-Acquisition .rfa-timeline__icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #377cd5, #2a5fa8);
border: 2px solid rgba(125, 182, 255, .55);
color: #fff;
box-shadow: 0 0 0 4px rgba(55, 124, 213, .18), 0 8px 18px rgba(0, 0, 0, .25);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
}
.Risk-Free-Acquisition .rfa-timeline__icon svg {
width: 20px;
height: 20px
}
.Risk-Free-Acquisition .rfa-timeline__card {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(45, 55, 72, .95);
border-radius: 14px;
padding: 22px 24px;
width: 100%;
transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease
}
.Risk-Free-Acquisition .rfa-timeline__card h5 {
margin: 0 0 8px;
color: #fff;
font-weight: 700;
font-size: 1.05rem
}
.Risk-Free-Acquisition .rfa-timeline__card p {
margin: 0;
color: #b9b9b9;
line-height: 1.6;
font-size: .95rem
}
.Risk-Free-Acquisition .rfa-timeline__item:hover .rfa-timeline__icon,
.Risk-Free-Acquisition .rfa-timeline__item:focus-within .rfa-timeline__icon {
transform: scale(1.08);
border-color: #9ec5ff;
box-shadow: 0 0 0 6px rgba(55, 124, 213, .28), 0 10px 24px rgba(55, 124, 213, .35)
}
.Risk-Free-Acquisition .rfa-timeline__item:hover .rfa-timeline__card,
.Risk-Free-Acquisition .rfa-timeline__item:focus-within .rfa-timeline__card {
transform: translateX(6px);
background: rgba(55, 124, 213, .12);
border-color: rgba(55, 124, 213, .55);
box-shadow: 0 12px 28px rgba(0, 0, 0, .22)
}
.Risk-Free-Acquisition .rfa-timeline__item:hover .rfa-timeline__step,
.Risk-Free-Acquisition .rfa-timeline__item:focus-within .rfa-timeline__step {
color: #7eb6ff
}
@media (max-width:768px) {
.Risk-Free-Acquisition .rfa-timeline {
padding-left: 0
}
.Risk-Free-Acquisition .rfa-timeline::before {
left: 23px
}
.Risk-Free-Acquisition .rfa-timeline__item {
grid-template-columns: 48px 1fr;
gap: 12px;
margin-bottom: 16px
}
.Risk-Free-Acquisition .rfa-timeline__icon {
width: 40px;
height: 40px
}
.Risk-Free-Acquisition .rfa-timeline__icon svg {
width: 17px;
height: 17px
}
.Risk-Free-Acquisition .rfa-timeline__card {
padding: 16px
}
.Risk-Free-Acquisition .rfa-timeline__item:hover .rfa-timeline__card,
.Risk-Free-Acquisition .rfa-timeline__item:focus-within .rfa-timeline__card {
transform: translateX(3px)
}
}
.Audit-the-Code .glass-card {
border-radius: 10px;
border: 1px solid #2d3748;
max-width: 800px
}
.source-faqs {
--sf-blue: #377cd5;
--sf-blue-soft: rgba(55, 124, 213, .18);
--sf-border: rgba(125, 182, 255, .28);
--sf-muted: #94a3b8;
padding-top: 24px;
padding-bottom: 64px
}
.source-faqs__eyebrow {
display: inline-block;
margin-bottom: 10px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #7eb6ff
}
.source-faqs__sub {
margin: 0;
color: var(--sf-muted);
font-size: 1rem
}
.source-faqs__list {
display: flex;
flex-direction: column;
gap: 14px
}
.source-faqs__item {
background: rgba(255, 255, 255, .04);
border: 1px solid var(--sf-border);
border-radius: 14px;
overflow: hidden;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease
}
.source-faqs__item:hover {
border-color: rgba(125, 182, 255, .45)
}
.source-faqs__item.is-open {
background: rgba(55, 124, 213, .08);
border-color: rgba(55, 124, 213, .55);
box-shadow: 0 10px 28px rgba(0, 0, 0, .2)
}
.source-faqs__trigger {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: transparent;
border: 0;
border-radius: 0;
color: #fff;
text-align: left;
cursor: pointer;
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent
}
.source-faqs__trigger:hover,
.source-faqs__trigger:focus,
.source-faqs__trigger:focus-visible,
.source-faqs__trigger:active {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
background: transparent
}
.source-faqs__badge {
flex-shrink: 0;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(126, 182, 255, .45);
background: rgba(15, 40, 70, .55);
color: #7eb6ff;
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.2
}
.source-faqs__title {
flex: 1;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
line-height: 1.3
}
.source-faqs__chevron {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #7eb6ff;
border-radius: 50%;
background: rgba(55, 124, 213, .15);
transition: transform .28s ease, background .28s ease
}
.source-faqs__chevron svg {
width: 16px;
height: 16px
}
.source-faqs__item.is-open .source-faqs__chevron {
transform: rotate(180deg);
background: rgba(55, 124, 213, .35)
}
.source-faqs__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .32s ease
}
.source-faqs__item.is-open .source-faqs__panel {
grid-template-rows: 1fr
}
.source-faqs__panel-inner {
overflow: hidden;
min-height: 0
}
.source-faqs__panel-inner p {
margin: 0;
padding: 0 20px 18px;
color: var(--sf-muted);
font-size: .95rem;
line-height: 1.65
}
@media (max-width:768px) {
.source-faqs {
padding-bottom: 48px
}
.source-faqs__trigger {
padding: 16px;
gap: 10px;
flex-wrap: wrap
}
.source-faqs__chevron {
margin-left: auto
}
.source-faqs__title {
flex-basis: calc(100% - 120px);
font-size: .98rem
}
.source-faqs__panel-inner p {
padding: 0 16px 16px;
font-size: .9rem
}
}
.source-own {
padding: 24px 0 56px
}
.source-own__card {
height: 100%;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(125, 182, 255, .22);
border-radius: 14px;
padding: 26px 24px;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
}
.source-own__card:hover {
transform: translateY(-3px);
border-color: rgba(55, 124, 213, .5);
box-shadow: 0 12px 28px rgba(0, 0, 0, .2)
}
.source-own__card-title {
margin: 0 0 16px;
font-size: 1.15rem;
font-weight: 700;
color: #fff
}
.source-own__card-title--blue {
color: #7eb6ff
}
.source-own__list {
margin: 0;
padding: 0;
list-style: none
}
.source-own__list li {
position: relative;
padding-left: 18px;
margin-bottom: 12px;
color: #94a3b8;
font-size: .95rem;
line-height: 1.55
}
.source-own__list li:last-child {
margin-bottom: 0
}
.source-own__list li::before {
content: "";
position: absolute;
left: 0;
top: .6em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #377cd5
}
.source-own__practices {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(125, 182, 255, .18)
}
.source-own__practices-label {
margin: 0 0 18px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #94a3b8
}
.source-own__checks {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 28px
}
.source-own__check {
display: flex;
align-items: flex-start;
gap: 10px;
color: #e2e8f0;
font-size: .95rem;
line-height: 1.5
}
.source-own__check-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
color: #377cd5
}
.source-own__check-icon svg {
width: 100%;
height: 100%
}
.source-support {
padding: 24px 0 56px
}
.source-support__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px
}
.source-support__card {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(125, 182, 255, .22);
border-radius: 14px;
padding: 24px;
display: flex;
flex-direction: column;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
}
.source-support__card:hover {
transform: translateY(-3px);
border-color: rgba(55, 124, 213, .5);
box-shadow: 0 12px 28px rgba(0, 0, 0, .2)
}
.source-support__card .source-faqs__badge {
align-self: flex-start;
margin-bottom: 14px
}
.source-support__title {
margin: 0 0 10px;
font-size: 1.1rem;
font-weight: 700;
color: #fff
}
.source-support__desc {
margin: 0 0 12px;
color: #94a3b8;
font-size: .95rem;
line-height: 1.6
}
.source-support__bullets {
margin: 0 0 14px;
padding: 0;
list-style: none
}
.source-support__bullets li {
position: relative;
padding-left: 16px;
margin-bottom: 8px;
color: #cbd5e1;
font-size: .9rem;
line-height: 1.55
}
.source-support__bullets li::before {
content: "";
position: absolute;
left: 0;
top: .65em;
width: 5px;
height: 5px;
border-radius: 50%;
background: #7eb6ff
}
.source-support__note {
margin: auto 0 0;
padding-top: 8px;
color: #64748b;
font-size: .85rem;
line-height: 1.5
}
.source-ask {
padding: 8px 0 56px
}
.source-ask__banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(125, 182, 255, .22);
border-radius: 14px;
padding: 24px 28px
}
.source-ask__text {
margin: 0;
color: #94a3b8;
font-size: .98rem;
line-height: 1.55
}
.source-ask__text strong {
color: #fff;
font-weight: 700
}
.source-ask__btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
border-radius: 10px;
border: 1px solid rgba(125, 182, 255, .45);
background: transparent;
color: #fff !important;
font-size: .9rem;
font-weight: 700;
text-decoration: none !important;
transition: background .2s ease, border-color .2s ease;
outline: none !important;
box-shadow: none !important
}
.source-ask__btn:hover,
.source-ask__btn:focus,
.source-ask__btn:active {
background: rgba(55, 124, 213, .2);
border-color: #377cd5;
color: #fff !important;
outline: none !important;
box-shadow: none !important
}
@media (max-width:992px) {
.source-own__checks,
.source-support__grid {
grid-template-columns: 1fr
}
}
@media (max-width:768px) {
.source-own,
.source-support {
padding-bottom: 40px
}
.source-ask__banner {
flex-direction: column;
align-items: flex-start;
padding: 20px;
gap: 16px
}
.source-ask__btn {
width: 100%
}
}
.Audit-the-Code p {
font-size: 1.1rem;
max-width: 600px;
line-height: 1.6
}
.companies-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 20px;
opacity: 0;
animation: .8s .4s forwards fadeInUp
}
.companies-trust-data {
flex: 0 1 200px;
max-width: 220px;
border-radius: 16px;
padding: 25px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
position: relative;
overflow: hidden;
border: 1px solid;
cursor: pointer
}
.companies-trust-data img {
max-width: 120px;
max-height: 60px;
object-fit: contain
}
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden
}
.floating-circle {
position: absolute;
background: #007bff1a;
border-radius: 50%;
animation: 8s ease-in-out infinite float
}
@keyframes slideInScale {
to {
transform: translateY(0) scale(1);
opacity: 1
}
}
.icon-circle {
width: 40px;
height: 40px;
background: #10b9811a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
.icon-check {
width: 20px;
height: 20px;
stroke: #10b981
}
.login-register {
padding: 10px;
position: relative;
overflow: hidden
}
.login-register h2 {
font-weight: 700;
margin-bottom: 8px;
color: #2d3748;
font-size: 20px
}
.login-register .subtext {
font-size: .95rem;
margin-bottom: 25px;
color: #718096
}
.login-register .subtext a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: .3s
}
.login-register .form-footer a:hover,
.login-register .subtext a:hover {
color: #764ba2;
text-decoration: none
}
.login-register .toggle-btn {
display: flex;
margin-bottom: 30px;
border-radius: 50px;
overflow: hidden;
border: 2px solid #e2e8f0;
background: #fff;
position: relative
}
.login-register .toggle-btn button {
flex: 1;
border: none;
padding: 12px 20px;
cursor: pointer;
transition: .4s cubic-bezier(.4, 0, .2, 1);
font-weight: 600;
color: #718096;
background: 0 0;
position: relative;
z-index: 2
}
.login-register .toggle-btn::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: calc(50% - 2px);
background: linear-gradient(135deg, #377cd5, #0b2f5e);
border-radius: 46px;
transition: transform .4s cubic-bezier(.4, 0, .2, 1);
z-index: 1
}
.login-register .toggle-btn.register-active::after {
transform: translateX(100%)
}
.login-register .form-group {
position: relative;
margin-bottom: 20px
}
.login-register .form-control {
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 15px 20px;
font-size: .95rem;
transition: .3s;
background: #fff
}
.login-register .form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px #667eea1a;
background: #fff
}
.login-register .form-control::placeholder {
color: #a0aec0;
font-weight: 400
}
.login-register .input-group-text {
border: 2px solid #e2e8f0;
border-left: none;
background: #fff;
border-radius: 0 12px 12px 0;
cursor: pointer;
transition: .3s;
color: #a0aec0
}
.login-register .input-group-text:hover {
color: #667eea
}
.login-register .form-footer {
font-size: .9rem;
text-align: right;
margin-bottom: 25px
}
.login-register .form-footer a {
color: #667eea;
text-decoration: none;
font-weight: 500;
transition: .3s
}
.login-register .btn-primary {
background: linear-gradient(135deg, #377cd5, #0b2f5e);
border: none;
border-radius: 12px;
padding: 15px;
font-weight: 600;
font-size: 1rem;
transition: .3s;
position: relative;
overflow: hidden
}
.login-register .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px #667eea4d
}
.login-register .btn-primary:active,
.raas-simulator .raas-cta-button:active {
transform: translateY(0)
}
.login-register .faceid-btn {
width: 100%;
border: 2px solid #e2e8f0;
background: #fff;
padding: 15px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s;
font-weight: 600;
color: #718096;
margin-top: 15px
}
.login-register .faceid-btn:hover {
border-color: #667eea;
color: #667eea;
transform: translateY(-1px);
box-shadow: 0 5px 15px #667eea1a
}
.login-register .faceid-btn i {
margin-right: 10px;
font-size: 1.2rem
}
.phone-design-conatiner--pin {
background: linear-gradient(to bottom, #f8fbff, #eaf2f8);
padding: 40px 14px 20px
}
.phone-design-conatiner--pin .phone-design-wrapper-file {
color: #1f2937;
display: flex;
flex-direction: column;
height: calc(100% - 8px);
margin-top: 0.5rem
}
.pin-unlock-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100%;
padding: 0.5rem 0.25rem 0;
text-align: center
}
.pin-unlock-screen__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #22c55e;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25)
}
.pin-unlock-screen__title {
font-size: 1.05rem;
font-weight: 700;
color: #111827;
margin: 0 0 0.35rem;
line-height: 1.3
}
.pin-unlock-screen__subtitle {
font-size: 0.72rem;
color: #6b7280;
margin: 0;
line-height: 1.45;
max-width: 16rem;
margin-left: auto;
margin-right: auto
}
.pin-unlock-screen__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
margin: 1.25rem 0 1.5rem
}
.pin-unlock-screen__dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #d1d5db
}
.pin-unlock-screen__dot.is-filled {
background: #22c55e
}
.pin-unlock-screen__keypad {
width: 100%;
max-width: 260px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.55rem;
margin-top: auto;
padding-bottom: 0.25rem
}
.pin-unlock-screen__key {
border: 1px solid #e5e7eb;
background: #fff;
color: #111827;
border-radius: 10px;
min-height: 46px;
font-size: 1rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: default;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06)
}
.pin-unlock-screen__key--icon svg {
opacity: 0.7;
color: #374151
}
.pin-unlock-screen__key--unlock {
background: #22c55e;
border-color: #22c55e;
color: #fff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.02em;
box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25)
}
.customer-features-cta {
background: #22c55e !important;
border-color: #22c55e !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25) !important
}
.phone-design-conatiner--ekyc,
.phone-design-conatiner--calculator,
.phone-design-conatiner--payment,
.phone-design-conatiner--transfer,
.phone-design-conatiner--statement {
display: flex;
flex-direction: column;
padding: 40px 14px 20px
}
.phone-design-conatiner--ekyc>.phone-design-wrapper-file,
.phone-design-conatiner--calculator>.phone-design-wrapper-file,
.phone-design-conatiner--payment>.phone-design-wrapper-file,
.phone-design-conatiner--transfer>.phone-design-wrapper-file,
.phone-design-conatiner--statement>.phone-design-wrapper-file {
flex: 1 1 auto;
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: stretch;
min-height: 0;
height: auto;
margin-top: 0.5rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch
}
.ekyc-onboarding-screen,
.send-calculator-screen,
.payment-checkout-screen,
.transfer-status-screen,
.download-statement-screen {
height: auto;
max-height: 100%;
width: 100%;
flex: 0 0 auto
}
.phone-design-conatiner--calculator {
background: linear-gradient(180deg, #e8f4fc 0%, #f5f9fc 45%, #f8fbfd 100%)
}
.phone-design-conatiner--calculator .phone-design-wrapper-file {
color: #1f2937
}
.send-calculator-screen {
display: flex;
flex-direction: column;
text-align: left;
gap: 0
}
.send-calculator-screen__header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 1rem;
min-height: 28px
}
.send-calculator-screen__back {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
color: #111827;
padding: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer
}
.send-calculator-screen__brand {
display: inline-flex;
align-items: center;
gap: 0.35rem
}
.send-calculator-screen__brand-mark {
display: inline-flex;
align-items: center;
justify-content: center
}
.send-calculator-screen__brand-name {
font-size: 0.95rem;
font-weight: 700;
color: #111827;
letter-spacing: -0.01em
}
.send-calculator-screen__rate-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background: #fff;
border-radius: 14px;
padding: 0.75rem 0.85rem;
margin-bottom: 1.1rem;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06)
}
.send-calculator-screen__rate-col {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1
}
.send-calculator-screen__rate-col--right {
align-items: flex-end;
text-align: right
}
.send-calculator-screen__rate-country {
font-size: 0.62rem;
font-weight: 500;
color: #6b7280;
line-height: 1.2
}
.send-calculator-screen__rate-country small {
font-size: 0.55rem;
color: #9ca3af
}
.send-calculator-screen__rate-amount {
font-size: 0.72rem;
font-weight: 700;
color: #111827;
line-height: 1.2
}
.send-calculator-screen__rate-flags {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 48px
}
.send-calculator-screen__rate-flags-inner {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 24px
}
.send-calculator-screen__flag {
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
border: 1.5px solid #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12)
}
.send-calculator-screen__flag--overlap {
position: absolute;
left: 14px;
top: 0
}
.send-calculator-screen__rate-equals {
font-size: 0.7rem;
font-weight: 600;
color: #9ca3af;
margin-top: 0.15rem;
line-height: 1
}
.send-calculator-screen__form {
display: flex;
flex-direction: column;
flex: 1
}
.send-calculator-screen__label {
display: block;
font-size: 0.72rem;
font-weight: 600;
color: #111827;
margin: 0 0 0.45rem
}
.send-calculator-screen__field {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 14px;
padding: 0.65rem 0.75rem;
margin-bottom: 0;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05)
}
.send-calculator-screen__field--receive {
margin-bottom: 0;
transition: border-color 0.25s ease, box-shadow 0.25s ease
}
.send-calculator-screen__field--receive.is-updating {
animation: sendCalcReceivePop 0.35s ease
}
@keyframes sendCalcReceivePop {
0% {
transform: scale(1)
}
40% {
transform: scale(1.015)
}
100% {
transform: scale(1)
}
}
.send-calculator-screen__field-value {
display: flex;
align-items: center;
gap: 0.2rem;
min-width: 0;
flex: 1
}
.send-calculator-screen__currency-sign {
font-size: 1.15rem;
font-weight: 600;
color: #9ca3af;
line-height: 1
}
.send-calculator-screen__input {
border: none;
background: transparent;
font-size: 1.35rem;
font-weight: 700;
color: #111827;
width: 100%;
min-width: 0;
padding: 0;
margin: 0;
outline: none;
line-height: 1.1;
letter-spacing: -0.02em;
-moz-appearance: textfield
}
.send-calculator-screen__input::-webkit-outer-spin-button,
.send-calculator-screen__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0
}
.send-calculator-screen__receive-amount {
font-size: 1.35rem;
font-weight: 700;
color: #111827;
line-height: 1.1;
letter-spacing: -0.02em
}
.send-calculator-screen__field-currency {
display: inline-flex;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
margin-left: 0.5rem
}
.send-calculator-screen__chevron {
font-size: 0.55rem;
color: #9ca3af;
line-height: 1
}
.send-calculator-screen__details {
position: relative;
padding: 0.65rem 0 0.65rem 1.35rem;
margin: 0.15rem 0 0.85rem
}
.send-calculator-screen__details::before {
content: "";
position: absolute;
left: 0.55rem;
top: 0;
bottom: 0;
width: 1px;
background: #e5e7eb
}
.send-calculator-screen__detail {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0;
position: relative
}
.send-calculator-screen__detail-icon {
position: absolute;
left: -1.35rem;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.65rem;
font-weight: 700;
line-height: 1;
z-index: 1
}
.send-calculator-screen__detail-icon.is-fee {
background: #dcfce7;
color: #16a34a;
border: 1px solid #bbf7d0
}
.send-calculator-screen__detail-icon.is-rate {
background: #dcfce7;
color: #16a34a;
border: 1px solid #bbf7d0
}
.send-calculator-screen__detail-text {
flex: 1;
font-size: 0.68rem;
font-weight: 500;
color: #4b5563
}
.send-calculator-screen__detail-value {
font-size: 0.68rem;
font-weight: 600;
color: #111827;
text-align: right;
white-space: nowrap
}
.send-calculator-screen__cta {
margin-top: 0.65rem;
width: 100%;
border: none;
border-radius: 999px;
padding: 0.72rem 0.85rem;
font-size: 0.82rem;
font-weight: 700;
color: #fff;
cursor: pointer;
display: block;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease
}
.send-calculator-screen__cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important
}
.send-calculator-screen__cta:active {
transform: translateY(0)
}
@media (max-width:575px) {
.phone-design-conatiner--calculator {
max-width: 300px;
height: 600px
}
.send-calculator-screen__input,
.send-calculator-screen__receive-amount {
font-size: 1.2rem
}
}
.phone-design-conatiner--payment {
background: linear-gradient(180deg, #f8fbfd 0%, #f3f7fb 100%)
}
.phone-design-conatiner--payment .phone-design-wrapper-file {
color: #1e293b
}
.payment-checkout-screen {
display: flex;
flex-direction: column;
text-align: left;
gap: 0.6rem
}
.payment-checkout-screen__section {
display: flex;
flex-direction: column;
gap: 0.35rem
}
.payment-checkout-screen__heading {
font-size: 0.78rem;
font-weight: 700;
color: #1e3a5f;
margin: 0;
line-height: 1.3
}
.payment-checkout-screen__required {
color: #ef4444;
font-weight: 700
}
.payment-checkout-screen__hint {
font-size: 0.6rem;
color: #64748b;
margin: 0;
line-height: 1.4
}
.payment-checkout-screen__method {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.6rem 0.7rem;
margin-top: 0.15rem
}
.payment-checkout-screen__method-name {
font-size: 0.68rem;
font-weight: 500;
color: #334155
}
.payment-checkout-screen__radio {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid #cbd5e1;
background: #fff;
flex-shrink: 0
}
.payment-checkout-screen__summary {
background: #f1f5f9;
border-radius: 10px;
padding: 0.55rem 0.7rem
}
.payment-checkout-screen__summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px dashed #cbd5e1
}
.payment-checkout-screen__summary-row:last-child {
border-bottom: none;
padding-bottom: 0.15rem
}
.payment-checkout-screen__summary-row:first-child {
padding-top: 0.15rem
}
.payment-checkout-screen__summary-label {
font-size: 0.64rem;
color: #475569
}
.payment-checkout-screen__summary-value {
font-size: 0.64rem;
color: #334155;
font-weight: 500
}
.payment-checkout-screen__summary-row.is-total .payment-checkout-screen__summary-label,
.payment-checkout-screen__summary-row.is-total .payment-checkout-screen__summary-value {
font-weight: 700;
color: #1e293b;
font-size: 0.68rem
}
.payment-checkout-screen__promo {
display: flex;
align-items: stretch;
gap: 0.4rem;
margin-top: 0.1rem
}
.payment-checkout-screen__promo-input {
flex: 1;
min-width: 0;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
padding: 0.5rem 0.65rem;
font-size: 0.64rem;
color: #334155;
outline: none
}
.payment-checkout-screen__promo-input:focus {
border-color: #86efac;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15)
}
.payment-checkout-screen__promo-btn {
border: none;
border-radius: 10px;
padding: 0.5rem 0.75rem;
font-size: 0.64rem;
font-weight: 700;
color: #fff;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0
}
.payment-checkout-screen__confirm {
display: flex;
align-items: flex-start;
gap: 0.45rem;
margin: 0.1rem 0 0;
cursor: pointer
}
.payment-checkout-screen__checkbox {
width: 14px;
height: 14px;
margin: 0.1rem 0 0;
flex-shrink: 0;
accent-color: #22c55e;
border-radius: 3px
}
.payment-checkout-screen__confirm-text {
font-size: 0.58rem;
color: #475569;
line-height: 1.45
}
.payment-checkout-screen__cta {
margin-top: 0.35rem;
width: 100%;
border: none;
border-radius: 999px;
padding: 0.72rem 0.85rem;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
cursor: pointer;
display: block;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease
}
.payment-checkout-screen__cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important
}
.payment-checkout-screen__cta:active {
transform: translateY(0)
}
@media (max-width:575px) {
.phone-design-conatiner--payment {
max-width: 300px;
height: 600px
}
}
@media (max-width:575px) {
.phone-design-conatiner--pin {
max-width: 300px;
height: 600px
}
.pin-unlock-screen__key {
min-height: 42px;
font-size: 0.95rem
}
.pin-unlock-screen__title {
font-size: 0.98rem
}
}
.phone-design-conatiner--ekyc {
background: linear-gradient(to bottom, #f8fbff, #eaf2f8)
}
.phone-design-conatiner--ekyc .phone-design-wrapper-file {
color: #1f2937
}
.ekyc-onboarding-screen {
display: flex;
flex-direction: column;
text-align: left;
padding: 0 0.15rem;
gap: 0.45rem
}
.ekyc-onboarding-screen__progress {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin-bottom: 0.75rem
}
.ekyc-onboarding-screen__step {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #d1d5db;
color: #9ca3af;
font-size: 0.65rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff
}
.ekyc-onboarding-screen__step.is-complete {
border-color: #22c55e;
background: #22c55e;
color: #fff
}
.ekyc-onboarding-screen__step.is-active {
border-color: #377cd5;
color: #377cd5;
box-shadow: 0 0 0 3px rgba(55, 124, 213, 0.15)
}
.ekyc-onboarding-screen__line {
width: 28px;
height: 2px;
background: #e5e7eb;
border-radius: 999px
}
.ekyc-onboarding-screen__line.is-complete {
background: #22c55e
}
.ekyc-onboarding-screen__eyebrow {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #377cd5;
margin: 0 0 0.25rem;
text-align: center
}
.ekyc-onboarding-screen__title {
font-size: 0.95rem;
font-weight: 700;
color: #111827;
margin: 0 0 0.25rem;
text-align: center;
line-height: 1.3
}
.ekyc-onboarding-screen__subtitle {
font-size: 0.68rem;
color: #6b7280;
margin: 0;
text-align: center;
line-height: 1.45
}
.ekyc-onboarding-screen__panels {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 0.35rem
}
.ekyc-onboarding-screen__panel {
display: flex;
align-items: center;
gap: 0.55rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 0.5rem 0.6rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05)
}
.ekyc-onboarding-screen__panel.is-complete {
border-color: #bbf7d0;
background: #f0fdf4
}
.ekyc-onboarding-screen__panel-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: #dbeafe;
color: #2563eb;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.ekyc-onboarding-screen__panel-title {
font-size: 0.72rem;
font-weight: 700;
color: #111827;
margin: 0;
line-height: 1.2
}
.ekyc-onboarding-screen__panel-desc {
font-size: 0.62rem;
color: #6b7280;
margin: 0.1rem 0 0;
line-height: 1.3
}
.ekyc-onboarding-screen__panel-status {
margin-left: auto;
font-size: 0.6rem;
font-weight: 700;
color: #9ca3af;
white-space: nowrap
}
.ekyc-onboarding-screen__panel-status.is-done {
color: #16a34a
}
.ekyc-onboarding-screen__capture {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 0.55rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05)
}
.ekyc-onboarding-screen__doc-frame {
position: relative;
border-radius: 8px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
padding: 0.65rem;
margin-bottom: 0.55rem;
min-height: 72px
}
.ekyc-onboarding-screen__doc-card {
position: relative;
width: 78%;
height: 52px;
margin: 0 auto;
border-radius: 6px;
background: linear-gradient(135deg, #e0f2fe, #dbeafe);
border: 1px solid #bfdbfe;
padding: 0.35rem 0.45rem
}
.ekyc-onboarding-screen__doc-chip {
display: block;
width: 14px;
height: 10px;
border-radius: 2px;
background: #fbbf24;
margin-bottom: 0.25rem
}
.ekyc-onboarding-screen__doc-line {
display: block;
height: 4px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.25);
margin-bottom: 0.2rem
}
.ekyc-onboarding-screen__doc-line.is-short {
width: 55%
}
.ekyc-onboarding-screen__doc-photo {
position: absolute;
right: 0.35rem;
top: 0.35rem;
width: 18px;
height: 22px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(37, 99, 235, 0.2)
}
.ekyc-onboarding-screen__scan-corner {
position: absolute;
width: 12px;
height: 12px;
border-color: #377cd5;
border-style: solid
}
.ekyc-onboarding-screen__scan-corner--tl {
top: 6px;
left: 6px;
border-width: 2px 0 0 2px
}
.ekyc-onboarding-screen__scan-corner--tr {
top: 6px;
right: 6px;
border-width: 2px 2px 0 0
}
.ekyc-onboarding-screen__scan-corner--bl {
bottom: 6px;
left: 6px;
border-width: 0 0 2px 2px
}
.ekyc-onboarding-screen__scan-corner--br {
bottom: 6px;
right: 6px;
border-width: 0 2px 2px 0
}
.ekyc-onboarding-screen__liveness {
display: flex;
align-items: center;
gap: 0.55rem
}
.ekyc-onboarding-screen__face-ring {
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid #377cd5;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(55, 124, 213, 0.12);
animation: ekycPulse 1.8s ease-in-out infinite
}
.ekyc-onboarding-screen__face-icon {
color: #377cd5;
display: inline-flex
}
@keyframes ekycPulse {
0%,
100% {
box-shadow: 0 0 0 4px rgba(55, 124, 213, 0.12)
}
50% {
box-shadow: 0 0 0 7px rgba(55, 124, 213, 0.2)
}
}
.ekyc-onboarding-screen__checklist {
list-style: none;
margin: 0 0 0.65rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem
}
.ekyc-onboarding-screen__checklist li {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.64rem;
color: #9ca3af
}
.ekyc-onboarding-screen__checklist li.is-done {
color: #16a34a;
font-weight: 600
}
.ekyc-onboarding-screen__checklist li.is-active {
color: #377cd5;
font-weight: 600
}
.ekyc-onboarding-screen__check {
width: 14px;
text-align: center;
flex-shrink: 0;
font-weight: 700
}
.ekyc-onboarding-screen__cta {
margin-top: 0.35rem;
width: 100%;
border: none;
border-radius: 8px;
padding: 0.55rem 0.75rem;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
background: #22c55e !important;
border-color: #22c55e !important;
box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25);
cursor: default
}
@media (max-width:575px) {
.phone-design-conatiner--ekyc {
max-width: 300px;
height: 600px
}
.ekyc-onboarding-screen__title {
font-size: 0.9rem
}
}
.phone-design-conatiner--transfer {
background: linear-gradient(180deg, #e8f4fc 0%, #f5f9fc 50%, #f8fbfd 100%)
}
.phone-design-conatiner--transfer .phone-design-wrapper-file {
color: #1f2937
}
.transfer-status-screen {
display: flex;
flex-direction: column;
text-align: left;
position: relative;
gap: 0.35rem
}
.transfer-status-screen__back {
position: absolute;
top: 0;
left: 0;
border: none;
background: transparent;
color: #111827;
padding: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1
}
.transfer-status-screen__hero {
text-align: center;
padding: 0 0.75rem 0.35rem;
margin-top: 0
}
.transfer-status-screen__amount {
font-size: 1.15rem;
font-weight: 800;
color: #111827;
margin: 0 0 0.35rem;
line-height: 1.2;
letter-spacing: -0.01em
}
.transfer-status-screen__subtitle {
font-size: 0.62rem;
color: #6b7280;
margin: 0;
line-height: 1.45
}
.transfer-status-screen__card {
background: #fff;
border-radius: 16px;
padding: 0.55rem 0.65rem;
margin-bottom: 0;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06)
}
.transfer-status-screen__card--details {
padding-bottom: 0.65rem
}
.transfer-status-screen__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.65rem
}
.transfer-status-screen__card-title {
font-size: 0.72rem;
font-weight: 700;
color: #111827;
margin: 0;
line-height: 1.2
}
.transfer-status-screen__badge {
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #0d9488;
background: #ccfbf1;
border-radius: 999px;
padding: 0.2rem 0.45rem;
white-space: nowrap;
flex-shrink: 0
}
.transfer-status-screen__timeline {
display: flex;
flex-direction: column
}
.transfer-status-screen__step {
display: flex;
gap: 0.45rem;
position: relative;
padding-bottom: 0.5rem
}
.transfer-status-screen__step:not(.is-last)::after {
content: "";
position: absolute;
left: 9px;
top: 20px;
bottom: 0;
width: 2px;
background: #22c55e
}
.transfer-status-screen__step-marker {
width: 20px;
height: 20px;
border-radius: 50%;
background: #22c55e;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
z-index: 1
}
.transfer-status-screen__step-content {
flex: 1;
min-width: 0;
padding-top: 0.05rem
}
.transfer-status-screen__step-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.35rem;
margin-bottom: 0.15rem
}
.transfer-status-screen__step-title {
font-size: 0.68rem;
font-weight: 700;
color: #111827;
line-height: 1.25
}
.transfer-status-screen__step-time {
font-size: 0.55rem;
color: #9ca3af;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.25
}
.transfer-status-screen__step-desc {
font-size: 0.58rem;
color: #9ca3af;
margin: 0;
line-height: 1.4
}
.transfer-status-screen__details-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.45rem
}
.transfer-status-screen__detail-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem
}
.transfer-status-screen__detail-label {
font-size: 0.62rem;
color: #9ca3af
}
.transfer-status-screen__detail-value {
font-size: 0.62rem;
font-weight: 600;
color: #111827
}
.transfer-status-screen__cta {
margin-top: 0.35rem;
width: 100%;
border: none;
border-radius: 999px;
padding: 0.72rem 0.85rem;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
cursor: pointer;
display: block;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease
}
.transfer-status-screen__cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important
}
.transfer-status-screen__cta:active {
transform: translateY(0)
}
@media (max-width:575px) {
.phone-design-conatiner--transfer {
max-width: 300px;
height: 600px
}
.transfer-status-screen__amount {
font-size: 1.05rem
}
}
.phone-design-conatiner--statement {
background: linear-gradient(180deg, #f3f8fc 0%, #f8fbfd 100%)
}
.phone-design-conatiner--statement .phone-design-wrapper-file {
color: #1e3a5f
}
.download-statement-screen {
display: flex;
flex-direction: column;
text-align: left;
gap: 0.45rem
}
.download-statement-screen__header {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.1rem
}
.download-statement-screen__back {
border: none;
background: transparent;
color: #1e3a5f;
padding: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer
}
.download-statement-screen__title {
font-size: 0.82rem;
font-weight: 700;
color: #1e3a5f;
margin: 0;
line-height: 1.25
}
.download-statement-screen__intro {
font-size: 0.58rem;
color: #64748b;
line-height: 1.45;
margin: 0 0 0.15rem
}
.download-statement-screen__dates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem
}
.download-statement-screen__date-field {
display: flex;
flex-direction: column;
gap: 0.3rem
}
.download-statement-screen__date-input {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
padding: 0.55rem 0.5rem;
font-size: 0.64rem;
font-weight: 700;
color: #1e3a5f;
text-align: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04)
}
.download-statement-screen__date-label {
font-size: 0.64rem;
font-weight: 700;
color: #1e3a5f;
text-align: center
}
.download-statement-screen__section {
display: flex;
flex-direction: column;
gap: 0.35rem
}
.download-statement-screen__label {
font-size: 0.68rem;
font-weight: 700;
color: #1e3a5f;
margin: 0;
line-height: 1.3
}
.download-statement-screen__optional {
font-weight: 500;
color: #94a3b8
}
.download-statement-screen__formats {
display: flex;
align-items: center;
gap: 0.85rem
}
.download-statement-screen__format {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.64rem;
font-weight: 700;
color: #1e3a5f;
margin: 0;
cursor: pointer
}
.download-statement-screen__radio {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid #94a3b8;
background: #fff;
flex-shrink: 0;
position: relative
}
.download-statement-screen__radio.is-checked {
border-color: #1e3a5f;
background: #1e3a5f
}
.download-statement-screen__radio.is-checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff
}
.download-statement-screen__select {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
padding: 0.55rem 0.65rem;
font-size: 0.64rem;
font-weight: 700;
color: #1e3a5f;
cursor: pointer;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04)
}
.download-statement-screen__select svg {
color: #64748b;
flex-shrink: 0
}
.download-statement-screen__input {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
padding: 0.55rem 0.65rem;
font-size: 0.62rem;
color: #334155;
outline: none;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04)
}
.download-statement-screen__input::placeholder {
color: #94a3b8
}
.download-statement-screen__input:focus {
border-color: #86efac;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12)
}
.download-statement-screen__actions {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 0.45rem;
margin-top: 0.15rem
}
.download-statement-screen__cancel {
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
padding: 0.55rem 0.4rem;
font-size: 0.64rem;
font-weight: 700;
color: #1e3a5f;
cursor: pointer
}
.download-statement-screen__submit {
border: none;
border-radius: 12px;
padding: 0.55rem 0.4rem;
font-size: 0.6rem;
font-weight: 700;
color: #fff;
cursor: pointer;
white-space: nowrap
}
.download-statement-screen__nav {
margin-top: 0.5rem;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0.45rem 0.25rem 0.15rem;
border-top: 1px solid #e8eef4
}
.download-statement-screen__nav-item {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
font-size: 0.5rem;
font-weight: 600;
color: #64748b;
padding: 0.25rem 0.55rem;
border-radius: 999px
}
.download-statement-screen__nav-item svg {
opacity: 0.75
}
.download-statement-screen__nav-item.is-active {
background: #1e3a5f;
color: #fff
}
.download-statement-screen__nav-item.is-active svg {
opacity: 1
}
@media (max-width:575px) {
.phone-design-conatiner--statement {
max-width: 300px;
height: 600px
}
.download-statement-screen__submit {
font-size: 0.56rem
}
}
.divider {
display: flex;
align-items: center;
text-align: center;
margin: 25px 0;
color: #a0aec0;
font-size: .9rem
}
.divider::after,
.divider::before {
content: '';
flex: 1;
height: 1px;
background: #e2e8f0
}
.divider span {
padding: 0 15px;
background: #f8f9fa;
font-weight: 500
}
.form-slide-enter {
animation: .5s slideInRight
}
.form-slide-exit {
animation: .5s slideOutLeft
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slideOutLeft {
from {
opacity: 1;
transform: translateX(0)
}
to {
opacity: 0;
transform: translateX(-30px)
}
}
.icon-input i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
z-index: 5
}
.compliance-sight {
background: linear-gradient(to right, #14b8a6, #06b6d4);
padding: 10px 15px;
border-radius: 15px;
margin-bottom: 10px
}
.compliance-sight-line {
border-radius: 1rem;
height: 8rem;
padding: 1rem;
transition: transform .3s;
display: flex
}
.send-money {
background: linear-gradient(135deg, #377cd5, #0b2f5e);
color: #fff
}
.add-recipient {
background-color: #e5e7eb;
color: #1f2937
}
.compliance-sight-line-icon,
.eb-icon-box svg {
width: 28px;
height: 28px
}
.verify-your-identity .icon-wrapper {
width: 6rem;
height: 6rem;
background-color: #dbeafe;
border-radius: 1rem
}
.verify-your-identity .icon {
width: 3rem;
height: 3rem;
color: #2563eb
}
.verify-your-identity .title {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin-top: 1rem
}
.verify-your-identity .description {
color: #6b7280;
margin-top: .5rem;
max-width: 20rem;
margin-left: auto;
margin-right: auto
}
.verify-your-identity .verify-btn {
padding: .9rem 1rem;
background: linear-gradient(135deg, #377cd5, #0b2f5e);
color: #fff;
border-radius: .5rem;
box-shadow: 0 4px 6px #0000001a;
transition: transform .3s, background-color .3s
}
.verify-your-identity .verify-btn:hover {
background-color: #1d4ed8;
transform: scale(1.05)
}
.verify-your-identity .verify-btn:focus {
outline: 0;
box-shadow: 0 0 0 .25rem #2563eb80
}
.verify-your-identity-img img {
width: 200px;
height: 200px
}
.bar {
fill: #000;
opacity: .3;
animation: 1.5s infinite signal
}
.bar1 {
animation-delay: 0s
}
.AnnualDIY-stat-card:first-child,
.bar2,
.eb-card:first-child,
.inclusive-platform-feature-item:nth-child(3),
.msb-count-flow-item:nth-child(3),
.pathways-to-launch .ptl-card:first-child,
.raas-simulator .raas-section:nth-child(3),
.us-infrastructure .us-card:nth-child(2),
.usn-step:nth-child(4),
.white-core-value-card:nth-child(3) {
animation-delay: .3s
}
.bar4,
.inclusive-platform-feature-item:nth-child(9) {
animation-delay: .9s
}
@keyframes signal {
0%,
100% {
opacity: .3
}
50% {
opacity: 1
}
}
.hero-gradient {
background: radial-gradient(circle at top, #8b5cf626 0, #fff0 40%)
}
.landing-video {
background: #1a1a2e;
padding-top: 56.25%
}
.landing-video iframe {
background: 0 0 !important
}
.landing-video .video-wrapper {
top: 0;
left: 0
}
.landing-video .video-iframe {
top: 0;
left: 0;
border: 0;
background: 0 0
}
.hero-landing-bg {
background-color: #111118
}
.flag-icon {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid;
box-shadow: 0 4px 8px #00000026;
transition: transform .3s, box-shadow .3s
}
.flag-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 14px #00000040
}
.landing-please .note-box {
border: 1px solid;
background: #3b82f61a;
border-radius: 20px;
text-align: left
}
.landing-please .note-title {
font-weight: 600;
color: #3b82f6
}
.landing-please .note-text {
color: #fff;
font-size: .9rem;
line-height: 1.7
}
.landing-sucess-rate {
background-color: #fff0;
padding: 20px;
border: 1px solid #28a745 !important;
border-radius: 20px
}
.landing-lauch h4 {
font-size: 28px;
font-weight: 600
}
.demo-updated-vi .cta-card {
background: #0a2a44;
border: 1px solid
}
.demo-updated-vi .check-icon {
color: #28a745;
font-size: 1.2rem;
line-height: 1.5
}
.demo-updated-vi .btn-custom-primary {
background-color: #345d82;
color: #fff;
border: none;
transition: .3s
}
.demo-updated-vi .btn-custom-primary:hover {
background-color: #2a4c6b;
color: #fff
}
.step-navigation {
width: 100%;
display: flex;
justify-content: center;
margin-top: 50px
}
.step-navigation p {
font-size: 14px;
transition: color .3s
}
.nav-buttons {
display: flex;
position: relative;
background: linear-gradient(to bottom, #e2e8f0, #eaf2f8);
border-radius: 50px;
padding: 5px;
overflow: hidden;
border: 4px solid #e2e8f0
}
.step-btn {
padding: 15px 25px;
border: none;
background: 0 0;
color: #377cd5;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 2;
transition: color .3s, background-color .3s
}
.christmas-btn:focus,
.step-btn:focus,
.toggle-btn:focus {
outline: 0
}
.step-btn svg {
width: 30px;
height: 30px
}
.step-btn:hover,
.step-btn:hover svg {
color: #2ecc71
}
.talk-to-data:hover {
background: #377cd5;
color: #fff;
text-decoration: none
}
.paas-modify .card {
background: #ffffff0d;
border: 1px solid #4a5568;
border-radius: 1rem;
transition: .3s;
padding: 2rem;
color: #fff
}
.paas-modify .card:hover,
.pass-ricing-latest.pricing-highlight {
border: 2px solid #377cd5
}
.paas-modify .paas-title {
font-size: 1.5rem;
font-weight: 700;
color: #fff
}
.paas-modify .paas-highlight {
font-size: 1.1rem;
font-weight: 600;
color: #e2e8f0
}
.paas-modify .paas-price {
font-size: 2.5rem;
font-weight: 800;
color: #fff
}
.paas-modify .paas-link {
background: 0 0;
border: none;
padding: 0;
color: #4299e1;
cursor: pointer;
text-decoration: underline
}
.paas-modify .paas-link:hover {
color: #2b6cb0
}
.paas-modify .paas-btn {
background-color: #377cd5;
color: #fff;
font-weight: 700;
padding: .8rem 1.2rem;
border-radius: .5rem;
transition: background-color .3s
}
.custom-card-file,
.paas-modify-card {
background: #ffffff0d
}
.paas-modify .paas-btn:hover {
background-color: #2b5fa7
}
.table .data-filet-light th {
color: #495057 !important;
background-color: #e9ecef;
border-color: #dee2e6
}
.paas-modify-card {
border-radius: .75rem;
transition: .3s
}
.paas-modify-card:hover {
border: 1px solid #3490dc
}
.feature-icon {
color: #38c172;
font-weight: 700;
font-size: 16px
}
.conatct-remit-data .contact-card,
.strategy-card {
background: #ffffff0d;
padding: 1.5rem;
border-radius: 1rem;
box-shadow: 0 2px 6px #0000001a;
transition: box-shadow .3s
}
.conatct-remit-data .contact-card:hover {
box-shadow: 0 4px 16px #00000026;
text-decoration: none
}
.conatct-remit-data .icon-wrapper {
border-radius: 50%;
padding: 1rem;
display: inline-block
}
.conatct-remit-data .icon {
width: 2rem;
height: 2rem;
margin: 0 auto
}
.bg-success-light {
background: #d4f8e8
}
.bg-primary-light {
background: #dbeafe
}
.bg-purple-light {
background: #ede9fe
}
.text-purple {
color: #6f42c1
}
.remitso-footer {
background-color: #002a45;
color: #fff;
position: relative;
overflow: hidden
}
.remitso-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #002a45e6 0, #003e65cc 100%);
z-index: 1
}
.remitso-footer-main {
padding: 60px 0 40px;
border-bottom: 1px solid
}
.remitso-footer-brand {
margin-bottom: 30px
}
.remitso-footer-brand img {
max-width: 180px;
height: auto;
margin-bottom: 20px;
filter: brightness(1.1)
}
.remitso-footer-description {
font-size: 14px;
line-height: 1.6;
color: #fffc;
margin-bottom: 15px
}
.remitso-footer-duns {
font-size: 13px;
color: #ffffffb3;
font-weight: 500
}
.remitso-footer-social {
margin: 25px 0
}
.remitso-footer-social-list {
display: flex;
gap: 15px;
list-style: none;
padding: 0;
margin: 0
}
.remitso-footer-social-item {
transition: transform .3s, box-shadow .3s
}
.remitso-footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: #ffffff1a;
border-radius: 50%;
transition: .3s;
backdrop-filter: blur(10px);
border: 1px solid
}
.remitso-footer-social-link:hover {
background: #fff3;
transform: translateY(-3px);
box-shadow: 0 8px 25px #0003;
text-decoration: none
}
.remitso-footer-links a::before,
.remitso-footer-section-title::after,
.remitso-privacy-title::after {
content: '';
background: linear-gradient(135deg, #377cd5, #0b2f5e);
position: absolute
}
.remitso-footer-social-link i {
font-size: 18px;
color: #fff
}
.remitso-footer-award {
margin-top: 25px
}
.remitso-footer-award img {
max-width: 150px;
height: auto;
opacity: .9;
transition: opacity .3s
}
.remitso-footer-section-title {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px
}
.remitso-footer-section-title::after {
bottom: 0;
left: 0;
width: 40px;
height: 3px;
border-radius: 2px
}
.remitso-footer-links a {
color: #fffc;
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: .3s;
position: relative;
display: inline-block
}
.remitso-footer-links a:hover {
color: #fff;
text-decoration: none;
transform: translateX(5px)
}
.remitso-footer-links a::before {
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
transition: width .3s
}
.remitso-footer-links a:hover::before {
width: 10px
}
.remitso-footer-address {
margin-bottom: 25px
}
.remitso-footer-address-title {
font-weight: 600;
color: #fff;
margin-bottom: 8px;
font-size: 15px
}
.remitso-footer-address-text {
color: #fffc;
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px
}
.remitso-footer-contact {
color: #ffffffe6;
font-size: 14px;
font-weight: 500
}
.remitso-footer-bottom {
padding: 25px 0;
background: #0003
}
.remitso-footer-copyright {
text-align: center;
color: #ffffffb3;
font-size: 14px;
margin: 0
}
.remitso-footer-copyright a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color .3s
}
.remitso-footer-copyright a:hover {
color: #377cd5;
text-decoration: none
}
.remitso-footer-address-link {
display: inline-flex;
align-items: flex-start;
gap: 10px;
color: inherit;
text-decoration: none;
line-height: 1.6;
transition: color 0.3s ease;
}
.remitso-footer-address-link:hover {
color: #005B99;
/* Your brand color */
}
.remitso-location-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 3px;
}
.remitso-privacy {
background-color: #001421;
min-height: 100vh;
padding: 80px 0 60px
}
.remitso-privacy-container {
background-color: #001421;
border-radius: 20px;
box-shadow: 0 20px 60px #00000026;
margin: 0 auto;
backdrop-filter: blur(10px)
}
.remitso-privacy-title {
color: #fff;
font-size: 3rem;
font-weight: 700;
text-align: center;
margin-bottom: 50px;
position: relative
}
.remitso-privacy-title::after {
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
border-radius: 2px
}
.remitso-privacy-section {
margin-bottom: 40px
}
.remitso-privacy-heading {
color: #fff;
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 20px;
border-left: 4px solid #377cd5;
padding-left: 15px
}
.remitso-privacy-subheading {
color: #fff;
font-size: 1.25rem;
font-weight: 600;
margin: 25px 0 15px
}
.remitso-privacy-list li,
.remitso-privacy-text {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 15px;
color: #fff
}
.remitso-privacy-list {
margin: 20px 0;
padding-left: 0
}
.remitso-privacy-list li {
position: relative;
padding-left: 30px
}
.remitso-privacy-list.numbered li {
counter-increment: privacy-counter
}
.remitso-privacy-list.numbered {
counter-reset: privacy-counter
}
.remitso-privacy-list.numbered li::before {
content: counter(privacy-counter) ".";
position: absolute;
left: 0;
top: 0;
color: #377cd5;
font-weight: 600;
width: 25px
}
.remitso-privacy-list.bulleted li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: #377cd5;
font-weight: 600;
font-size: 1.2rem;
width: 25px
}
.remitso-privacy-nested-list {
margin: 15px 0;
padding-left: 20px
}
.remitso-privacy-nested-list li {
margin-bottom: 10px;
padding-left: 20px
}
.remitso-privacy-nested-list li::before {
content: "◦";
color: #2196f3;
font-weight: 600
}
.remitso-privacy-tools {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
border-left: 4px solid #2196f3
}
.remitso-privacy-tools ul {
margin: 0;
padding-left: 0
}
.remitso-privacy-tools li {
color: #fff;
font-weight: 500;
margin-bottom: 8px;
padding-left: 25px
}
.remitso-privacy-tools li::before {
content: "⚡";
position: absolute;
left: 0;
color: #ff9800
}
.remitso-privacy-highlight {
background: linear-gradient(120deg, #4caf501a, #2196f31a);
border-radius: 8px;
padding: 20px;
margin: 20px 0;
border: 1px solid
}
.remitso-privacy-contact {
background: #002a45;
color: #fff;
border-radius: 15px;
padding: 30px;
margin-top: 40px
}
.remitso-privacy-contact h3 {
color: #fff;
margin-bottom: 20px
}
.remitso-privacy-contact p {
color: #ffffffe6;
margin-bottom: 10px
}
@media (max-width:768px) {
.mobile-table td,
.mobile-table th {
font-size: 12px;
padding: 5px
}
.card-for-seo {
flex-direction: column;
align-items: center
}
.kyc,
.risk-mitigation {
flex: 1;
width: 100%
}
.Control-Every-Step-header h1,
.Glossary-header h1,
.disaster-recovery-title,
.party-integrations-title,
.payout-workflows-title {
font-size: 2rem
}
.Control-Every-Step-header p,
.Glossary-header p,
.disaster-recovery-subtitle,
.party-integrations-subtitle,
.payout-workflows-subtitle {
font-size: 1rem
}
.disaster-recovery-container,
.party-integrations-container {
padding: 1rem
}
.party-integrations-detail-actions,
.party-integrations-header-section {
flex-direction: column;
align-items: stretch
}
.party-integrations-header-left {
flex-direction: column;
align-items: stretch;
gap: .75rem
}
.party-integrations-search-bar {
max-width: none
}
.party-integrations-detail-actions button {
justify-content: center
}
.Control-Every-Step-section-title,
.Glossary-section-title {
font-size: 1.5rem
}
.Glossary-filter-labels {
flex-wrap: wrap;
gap: .5rem
}
.blog-security-last p.highlight {
font-size: 18px;
font-weight: 400;
color: #fff;
margin-bottom: 1.5rem
}
.companies-trust-data {
min-height: 80px;
padding: 15px 10px;
margin: 5px
}
.companies-trust-data img {
max-width: 100px;
max-height: 50px
}
.companies-row {
gap: 0
}
.step-navigation p {
font-size: 12px
}
.step-btn svg {
width: 15px;
height: 15px
}
.remitso-footer-main,
.remitso-privacy {
padding: 40px 0 30px
}
.remitso-footer-social-list {
margin: 20px 0
}
.remitso-footer-section-title {
font-size: 16px;
margin-bottom: 20px
}
.remitso-footer-address-text,
.remitso-footer-links a {
font-size: 13px
}
.col-lg-2,
.col-lg-3 {
margin-bottom: 40px
}
.remitso-privacy-container {
margin: 0 15px;
border-radius: 15px
}
.remitso-privacy-title {
font-size: 2.2rem;
margin-bottom: 30px
}
.remitso-privacy-heading {
font-size: 1.3rem
}
.remitso-privacy-subheading {
font-size: 1.1rem
}
.remitso-privacy-list li {
font-size: .95rem;
padding-left: 25px
}
}
.schedule-demo-request .video-section {
margin: 0 auto
}
.schedule-demo-request .left-card-image {
width: 100%;
height: auto;
border-radius: 30px;
box-shadow: 0 30px 80px #0000004d;
display: block
}
.schedule-demo-request .right-card {
background: #2d2744f2;
border-radius: 25px;
padding: 60px 50px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 450px;
box-shadow: 0 20px 60px #0006
}
.schedule-demo-request .reach-badge {
color: #c4b5fd;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase
}
.schedule-demo-request .reach-icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center
}
.schedule-demo-request .reach-icon svg {
width: 20px;
height: 20px;
fill: #c4b5fd
}
.schedule-demo-request .main-heading {
font-size: 42px;
font-weight: 800;
margin-bottom: 25px;
line-height: 1.2;
color: #fff
}
.schedule-demo-request .description {
color: #e5e7eb;
font-size: 17px;
line-height: 1.7;
margin-bottom: 35px;
font-weight: 400
}
.schedule-demo-request .cta-link {
color: #c4b5fd;
text-decoration: none;
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
gap: 12px;
transition: .3s
}
.schedule-demo-request .cta-link:hover {
color: #ddd6fe;
gap: 18px;
text-decoration: none
}
@media (max-width:991px) {
.schedule-demo-request {
padding: 50px 0
}
.schedule-demo-request .left-card-wrapper {
margin-bottom: 40px
}
.schedule-demo-request .right-card {
padding: 45px 35px;
min-height: auto
}
.schedule-demo-request .main-heading {
font-size: 36px
}
}
@media (max-width:767px) {
.schedule-demo-request {
padding: 40px 0
}
.schedule-demo-request .right-card {
padding: 35px 25px
}
.schedule-demo-request .main-heading {
font-size: 30px;
margin-bottom: 20px
}
.schedule-demo-request .description {
font-size: 16px;
margin-bottom: 30px
}
.schedule-demo-request .left-card-image {
border-radius: 20px
}
}
@media (max-width:575px) {
.schedule-demo-request .main-heading {
font-size: 26px
}
.schedule-demo-request .reach-badge {
font-size: 12px;
margin-bottom: 20px
}
.schedule-demo-request .right-card {
padding: 30px 20px;
border-radius: 20px
}
}
.paas-sub-sub li {
font-size: 12px;
color: #f0f0f0;
list-style: disc;
margin-left: 20px
}
.raas-simulator {
background: #0f172a;
border-radius: 20px;
width: 100%;
box-shadow: 0 20px 60px #00000080;
animation: .6s ease-out raas-simulator-fadeIn
}
@keyframes raas-simulator-fadeIn {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.raas-simulator .raas-card {
background: #ffffff0d;
border: 1px solid #333;
padding: 30px;
border-radius: 20px;
transition: .3s
}
.raas-simulator .raas-section {
border: 1px solid #444;
padding: 25px;
border-radius: 14px;
background: #ffffff12;
margin-bottom: 1.5rem;
transition: .3s;
animation: .5s ease-out backwards raas-simulator-slideUp
}
.inclusive-platform-feature-item:first-child,
.msb-count-flow-item:first-child,
.raas-simulator .raas-section:first-child,
.usn-step:nth-child(2),
.white-core-value-card:first-child {
animation-delay: .1s
}
@keyframes raas-simulator-slideUp {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.raas-simulator .raas-section:hover {
border-color: #377cd5;
background: #ffffff17;
transform: translateY(-2px);
box-shadow: 0 8px 24px #377cd526
}
.raas-simulator .raas-section-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem
}
.raas-simulator .step-circle {
width: 35px;
height: 35px;
background: #377cd5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
margin-right: 1rem;
transition: .3s;
box-shadow: 0 4px 12px #377cd54d
}
.raas-simulator .raas-section:hover .step-circle {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px #377cd580
}
.raas-simulator .raas-section-title {
font-weight: 700;
color: #fff;
margin: 0;
font-size: 1.1rem
}
.raas-simulator .raas-slider-header {
display: flex;
justify-content: space-between;
margin-bottom: .75rem;
align-items: center
}
.raas-simulator .raas-slider-label {
color: #cbd5e1;
font-size: .95rem;
margin: 0
}
.raas-simulator .raas-slider-value {
font-weight: 700;
color: #377cd5;
font-size: 1.1rem;
min-width: 60px;
text-align: right;
transition: .2s
}
.raas-simulator .raas-slider-value.raas-simulator-pulse {
animation: .3s raas-simulator-pulse
}
@keyframes raas-simulator-pulse {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.15);
color: #5b9ef0
}
}
.raas-simulator .raas-slider {
width: 100%;
height: 8px;
border-radius: 10px;
background: #ffffff1a;
outline: 0;
-webkit-appearance: none;
cursor: pointer;
transition: .3s
}
.raas-simulator .raas-slider:hover {
background: #ffffff26
}
.raas-simulator .raas-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #377cd5;
cursor: pointer;
box-shadow: 0 4px 12px #377cd566;
transition: .2s
}
.raas-simulator .raas-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 6px 20px #377cd599
}
.raas-simulator .raas-slider::-webkit-slider-thumb:active {
transform: scale(1.1)
}
.raas-simulator .raas-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #377cd5;
cursor: pointer;
border: none;
box-shadow: 0 4px 12px #377cd566;
transition: .2s
}
.raas-simulator .raas-slider::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 6px 20px #377cd599
}
.raas-simulator .raas-slider::-moz-range-thumb:active {
transform: scale(1.1)
}
.raas-simulator .raas-fee-row,
.raas-simulator .raas-statement-row {
display: flex;
justify-content: space-between;
margin-bottom: .75rem;
color: #cbd5e1;
font-size: .9rem
}
.raas-simulator .raas-fee-value {
font-weight: 700;
transition: .3s
}
.raas-simulator .raas-fee-value.raas-simulator-highlight {
animation: .5s raas-simulator-highlight
}
@keyframes raas-simulator-highlight {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.08);
color: #5b9ef0
}
}
.raas-simulator .raas-divider {
border: none;
border-top: 1px solid #444;
margin: 1rem 0
}
.raas-simulator .raas-total-row {
display: flex;
justify-content: space-between;
font-weight: 700;
color: #377cd5;
font-size: 1rem
}
.raas-simulator .raas-credit-row {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
color: #4ade80
}
.raas-simulator .raas-balance-row {
display: flex;
justify-content: space-between;
align-items: center
}
.raas-simulator .raas-balance-label {
font-weight: 700;
color: #fff;
margin: 0
}
.raas-simulator .raas-balance-value {
font-weight: 700;
font-size: 1.75rem;
color: #377cd5;
transition: .3s
}
.raas-simulator .raas-balance-value.raas-simulator-update {
animation: .5s raas-simulator-balanceUpdate
}
@keyframes raas-simulator-balanceUpdate {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.1);
color: #5b9ef0
}
}
.raas-simulator .raas-alert {
margin-top: 1rem;
padding: 1rem;
background: #377cd526;
border: 1px solid #377cd5;
border-radius: 8px;
color: #9ec8ff;
font-size: .85rem;
display: flex;
align-items: start;
gap: .75rem;
animation: .3s raas-simulator-fadeIn
}
.raas-simulator .raas-alert-icon {
margin-top: 2px;
flex-shrink: 0
}
.raas-simulator .raas-alert-text {
margin: 0;
line-height: 1.5
}
.raas-simulator .raas-footer {
text-align: center;
animation: .6s ease-out .4s backwards raas-simulator-fadeIn
}
.raas-simulator .raas-footer-comparison {
color: #94a3b8;
font-size: .9rem;
margin-bottom: 1.5rem
}
.raas-simulator .raas-footer-highlight {
font-weight: 700;
color: #ef4444
}
.raas-simulator .raas-info-box {
margin-bottom: 1.5rem;
padding: 1.25rem;
background: #ffffff0d;
border: 1px solid #444;
border-radius: 12px;
transition: .3s
}
.raas-simulator .raas-info-box:hover {
border-color: #377cd5;
background: #ffffff14;
transform: translateY(-2px)
}
.raas-simulator .raas-info-content {
display: flex;
gap: 1rem
}
.raas-simulator .icon-circle {
width: 45px;
height: 45px;
background: #00ff001a;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
transition: .3s
}
.raas-simulator .raas-info-box:hover .icon-circle {
transform: scale(1.1);
background: #00ff0026
}
.raas-simulator .raas-info-title {
color: #fff;
font-weight: 700;
margin-bottom: .75rem;
font-size: 1rem
}
.raas-simulator .raas-info-description {
color: #94a3b8;
font-size: .85rem;
margin: 0;
line-height: 1.6
}
.raas-simulator .raas-cta-button {
padding: .75rem 2rem;
background: #377cd5;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: .3s;
box-shadow: 0 4px 12px #377cd54d
}
.raas-process::after,
.raas-process::before {
position: absolute;
border-radius: 50%;
content: ''
}
.raas-simulator .raas-cta-button:hover {
background: #4a8ee6;
transform: translateY(-2px);
box-shadow: 0 6px 20px #377cd580
}
@media (max-width:768px) {
.raas-simulator .raas-card {
padding: 20px
}
.raas-simulator .raas-section {
padding: 18px
}
.raas-simulator .raas-section-title {
font-size: 1rem
}
.raas-simulator .raas-balance-value {
font-size: 1.5rem
}
.raas-simulator .raas-info-content {
flex-direction: column;
align-items: center;
text-align: center
}
}
.raas-checklist-btn:hover::before,
.raas-process::before {
width: 300px;
height: 300px
}
.raas-process::before {
background: radial-gradient(circle, #06b6d41a 0, transparent 70%);
top: -100px;
right: -100px;
animation: 6s ease-in-out infinite raas-process-float
}
.raas-process::after {
width: 400px;
height: 400px;
background: radial-gradient(circle, #3b82f614 0, transparent 70%);
bottom: -150px;
left: -150px;
animation: 8s ease-in-out infinite reverse raas-process-float
}
@keyframes raas-process-float {
0%,
100% {
transform: translate(0, 0) scale(1)
}
50% {
transform: translate(20px, 20px) scale(1.1)
}
}
.raas-process-title {
color: #fff;
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
z-index: 2
}
.raas-process-subtitle {
color: #ffffffb3;
font-size: 1.1rem;
margin-bottom: 4rem;
position: relative;
z-index: 2
}
.raas-process-line {
position: absolute;
top: 60px;
left: 0;
right: 0;
height: 3px;
background: #ffffff1a;
display: none
}
.raas-process-line-active {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, #06b6d4, #3b82f6);
width: 0;
animation: 2s ease-out .5s forwards raas-process-line-grow
}
@keyframes raas-process-line-grow {
to {
width: 100%
}
}
.raas-process-step {
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(30px);
animation: .6s ease-out forwards raas-process-step-appear
}
.AnnualDIY-stat-card:nth-child(3),
.eb-card:nth-child(3),
.inclusive-platform-feature-item:nth-child(5),
.msb-count-flow-item:nth-child(5),
.raas-process-step:nth-child(2),
.white-core-value-card:nth-child(5) {
animation-delay: .5s
}
.inclusive-platform-feature-item:nth-child(8),
.raas-process-step:nth-child(3) {
animation-delay: .8s
}
@keyframes raas-process-step-appear {
to {
opacity: 1;
transform: translateY(0)
}
}
.raas-process-card {
background: #ffffff0d;
backdrop-filter: blur(10px);
border: 1px solid #ffffff1a;
border-radius: 20px;
padding: 30px 20px;
transition: .4s cubic-bezier(.4, 0, .2, 1);
height: 100%;
position: relative;
overflow: hidden
}
.raas-process-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #06b6d41a, #3b82f61a);
opacity: 0;
transition: opacity .4s;
z-index: -1
}
.raas-process-card:hover {
transform: translateY(-10px);
border-color: #06b6d480;
box-shadow: 0 20px 60px #06b6d433
}
.raas-process-number {
width: 60px;
height: 60px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, #06b6d4, #3b82f6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
box-shadow: 0 10px 30px #06b6d44d;
position: relative;
animation: 2s ease-in-out infinite raas-process-pulse
}
.raas-process-number::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #06b6d480;
animation: 2s ease-out infinite raas-process-ripple
}
@keyframes raas-process-pulse {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
}
@keyframes raas-process-ripple {
0% {
transform: scale(1);
opacity: 1
}
100% {
transform: scale(1.5);
opacity: 0
}
}
.raas-process-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
opacity: 0;
transform: scale(0);
animation: .5s ease-out forwards raas-process-icon-pop
}
.raas-process-icon svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 8px #06b6d44d)
}
.inclusive-platform-feature-item:nth-child(7),
.raas-process-step:nth-child(2) .raas-process-icon {
animation-delay: .7s
}
@keyframes raas-process-icon-pop {
0% {
transform: scale(0);
opacity: 0
}
50% {
transform: scale(1.2)
}
100% {
transform: scale(1);
opacity: 1
}
}
.raas-process-heading {
color: #fff;
font-weight: 600;
font-size: 1.4rem;
margin-bottom: 1rem
}
.raas-process-description {
color: #ffffffbf;
font-size: .95rem;
line-height: 1.6
}
.raas-process-arrow {
position: absolute;
top: 50%;
right: -15%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: none;
animation: 1.5s ease-in-out infinite raas-process-arrow-slide
}
@keyframes raas-process-arrow-slide {
0%,
100% {
transform: translateY(-50%) translateX(0)
}
50% {
transform: translateY(-50%) translateX(10px)
}
}
@media (min-width:768px) {
.cards-grid,
.msb-Streamlined-grid {
grid-template-columns: repeat(3, 1fr)
}
.msb-Streamlined-line {
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #334155;
transform: translateY(-50%)
}
.navigating-the-maze-container {
flex-direction: row
}
.disaster-recovery-status-section {
flex-direction: row;
align-items: center
}
.Path-to-global .timeline-line {
left: 50%;
transform: translateX(-50%)
}
.raas-process {
padding: 100px 0
}
.raas-process-title {
font-size: 3rem
}
.raas-process-arrow,
.raas-process-line {
display: block
}
.raas-process-step:last-child .raas-process-arrow {
display: none
}
}
@media (min-width:992px) {
.raas-process-title {
font-size: 3.5rem
}
}
.raas-checklist-bg-animated {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden
}
.raas-checklist-bg-animated::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(circle, #06b6d41a 0, transparent 70%);
animation: 20s ease-in-out infinite raas-checklist-float
}
@keyframes raas-checklist-float {
0%,
100% {
transform: translate(0, 0) rotate(0)
}
33% {
transform: translate(50px, -50px) rotate(120deg)
}
66% {
transform: translate(-50px, 50px) rotate(240deg)
}
}
.raas-checklist-glass-card {
background: #1e293bb3;
backdrop-filter: blur(10px);
border: 1px solid #ffffff1a;
box-shadow: 0 8px 32px 0 #0000005e;
transition: .3s
}
.raas-checklist-glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px 0 #377cd5;
border-color: #377cd5
}
.raas-checklist-section {
padding: 80px 0;
position: relative
}
.raas-checklist-section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #fff 0, #06b6d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}
.raas-checklist-section-subtitle {
color: #ffffffb3;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto
}
.raas-checklist-item {
padding: 1.5rem 0;
border-bottom: 1px solid #ffffff1a;
transition: .3s
}
.raas-checklist-item:hover {
padding-left: 1rem;
background: #06b6d40d;
border-radius: 8px
}
.raas-checklist-item-title {
font-size: 1.3rem;
font-weight: 600;
color: #fff;
margin-bottom: .5rem
}
.raas-checklist-item-desc {
color: #ffffffb3;
font-size: .95rem;
line-height: 1.6
}
.raas-checklist-btn {
padding: .6rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: .3s;
min-width: 70px;
position: relative;
overflow: hidden
}
.raas-checklist-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #fff3;
transform: translate(-50%, -50%);
transition: width .6s, height .6s
}
.raas-checklist-btn-inactive {
background: #334155;
color: #ffffff80
}
.raas-checklist-btn-active {
background: #377cd5;
color: #fff;
box-shadow: 0 4px 15px #06b6d466;
animation: 2s infinite raas-checklist-pulse
}
.raas-checklist-cta-card {
transition: .4s cubic-bezier(.68, -.55, .265, 1.55);
position: relative
}
.raas-checklist-cta-card-inactive {
opacity: .6;
transform: scale(.95)
}
.raas-checklist-cta-card-active {
transform: scale(1.02);
box-shadow: 0 0 40px #377cd5;
border: 2px solid #377cd5
}
.raas-checklist-cta-card-active::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 1rem;
z-index: -1;
animation: 3s linear infinite raas-checklist-border-flow;
background-size: 200% 200%
}
@keyframes raas-checklist-border-flow {
0% {
background-position: 0 50%
}
100% {
background-position: 200% 50%
}
}
.raas-checklist-cta-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem
}
.raas-checklist-cta-desc {
color: #fffc;
margin-bottom: 1rem;
flex-grow: 1
}
.raas-checklist-cta-price {
color: #06b6d4;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 1.5rem
}
.raas-checklist-cta-btn {
padding: 1rem 2rem;
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
transition: .3s;
text-decoration: none;
display: inline-block
}
.raas-checklist-cta-btn-primary,
.raas-checklist-cta-btn-secondary {
background: #377cd5;
color: #fff
}
.raas-checklist-cta-btn-primary:hover,
.raas-checklist-cta-btn-secondary:hover {
background: #377cd5;
transform: translateY(-3px);
box-shadow: 0 10px 25px #377cd5;
text-decoration: none;
color: #fff
}
.raas-checklist-progress {
height: 8px;
background: #ffffff1a;
border-radius: 10px;
overflow: hidden;
margin: 2rem 0
}
.raas-checklist-progress-bar {
height: 100%;
background: linear-gradient(90deg, #06b6d4, #0891b2);
border-radius: 10px;
transition: width .6s;
position: relative;
overflow: hidden
}
.raas-checklist-progress-bar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffffff4d, transparent);
animation: 2s infinite raas-checklist-progress-shine
}
@keyframes raas-checklist-progress-shine {
0% {
left: -100%
}
100% {
left: 100%
}
}
.raas-checklist-progress-text {
text-align: center;
color: #fffc;
font-size: .9rem;
margin-top: .5rem
}
.raas-checklist-check-icon {
display: inline-block;
margin-left: .5rem;
opacity: 0;
transform: scale(0);
transition: .3s
}
.raas-checklist-item.raas-checklist-completed .raas-checklist-check-icon {
opacity: 1;
transform: scale(1);
animation: .6s raas-checklist-check-bounce
}
@keyframes raas-checklist-check-bounce {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.3)
}
}
.msb-days-controls,
.msb-real-controls,
.msb-video-controls {
gap: 20px
}
.msb-days-next-btn,
.msb-days-prev-btn,
.msb-real-next-btn,
.msb-real-prev-btn,
.msb-video-next-btn,
.msb-video-prev-btn {
display: inline-block;
color: #377cd5;
border: 2px solid #377cd5;
border-radius: 10px;
padding: 12px 28px;
text-transform: uppercase;
font-size: 15px;
letter-spacing: .5px;
text-decoration: none;
transition: .3s;
background-color: transparent
}
.msb-days-next-btn:hover,
.msb-days-prev-btn:hover,
.msb-real-next-btn:hover,
.msb-real-prev-btn:hover,
.msb-video-next-btn:hover,
.msb-video-prev-btn:hover {
background-color: #377cd5;
color: #fff;
box-shadow: 0 4px 12px #377cd54d;
transform: translateY(-2px);
text-decoration: none
}
.msb-days-next-btn:active,
.msb-days-prev-btn:active,
.msb-real-next-btn:active,
.msb-real-prev-btn:active,
.msb-video-next-btn:active,
.msb-video-prev-btn:active {
transform: translateY(0);
box-shadow: none
}
.ins-on {
background-color: #28867475;
border: 1px solid #288674;
border-radius: 15px;
padding: 10px 15px
}
.marquee-client {
overflow: hidden;
position: relative;
width: 100%
}
.marquee-track {
display: flex;
width: max-content;
animation: 30s linear infinite scroll-marquee;
gap: 20px
}
@keyframes scroll-marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
.inclusive-platform-section {
background: linear-gradient(180deg, #0a0e27 0, #1a1f3a 100%);
padding: 80px 0;
position: relative;
overflow: hidden
}
.inclusive-platform-section::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle, #667eea1a 0, transparent 70%);
border-radius: 50%;
top: -250px;
right: -250px;
animation: 8s ease-in-out infinite pulse
}
.inclusive-platform-section::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, #764ba21a 0, transparent 70%);
border-radius: 50%;
bottom: -200px;
left: -200px;
animation: 6s ease-in-out infinite pulse
}
.inclusive-platform-title {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 1rem;
position: relative;
display: inline-block
}
.inclusive-platform-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary-gradient);
border-radius: 2px
}
.inclusive-platform-tab-btn.active,
.inclusive-platform-tab-btn:hover {
transform: translateY(-2px);
color: #fff
}
.inclusive-platform-subtitle {
font-size: 1.125rem;
color: #b8c1ec;
max-width: 600px;
margin: 0 auto 3rem
}
.inclusive-platform-tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 3rem;
flex-wrap: wrap;
position: relative;
z-index: 10;
padding: 8px;
background: #0a0e2780;
border-radius: 60px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
backdrop-filter: blur(10px);
border: 1px solid #667eea26;
box-shadow: 0 10px 40px #0000004d
}
.inclusive-platform-tab-btn {
padding: 16px 32px;
border: none;
background: 0 0;
color: #b8c1ec;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: .4s cubic-bezier(.4, 0, .2, 1);
position: relative;
overflow: hidden;
font-size: .95rem;
letter-spacing: .3px;
flex: 1;
min-width: 200px
}
.inclusive-platform-tab-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-gradient);
opacity: 0;
transition: opacity .4s;
border-radius: 50px
}
.inclusive-platform-tab-btn span,
.ready-to-launch-btn span,
.ready-to-launch-container,
.white-launch-container {
position: relative;
z-index: 1
}
.inclusive-platform-tab-btn:hover::before {
opacity: .15
}
.inclusive-platform-tab-btn.active {
background: #377cd5;
box-shadow: 0 8px 25px #667eea66
}
.inclusive-platform-content-panel {
background: #1a1f3a99;
border-radius: 24px;
padding: 3.5rem 3rem;
position: relative;
backdrop-filter: blur(20px);
border: 1px solid #667eea33;
box-shadow: 0 20px 60px #0006;
z-index: 10
}
.remit-money-cards,
.remit-money-cards::after,
.slider-btn,
.slider-card {
backdrop-filter: blur(10px)
}
.inclusive-platform-content-title {
font-size: 1.875rem;
font-weight: 700;
color: #fff;
margin-bottom: 2.5rem;
position: relative
}
.inclusive-platform-content-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 36px;
background: var(--primary-gradient);
border-radius: 3px
}
.inclusive-platform-feature-item {
display: flex;
align-items: flex-start;
padding: 20px;
margin-bottom: 1.5rem;
background: #0f142880;
border-radius: 16px;
border: 1px solid #667eea1a;
transition: .4s cubic-bezier(.4, 0, .2, 1);
opacity: 0;
transform: translateX(-30px);
animation: .6s forwards slideInLeft
}
.remit-money-cards,
.slider-card,
.slider-item {
transform-style: preserve-3d
}
.inclusive-platform-feature-item:nth-child(11) {
animation-delay: 1.1s
}
.inclusive-platform-feature-item:nth-child(12) {
animation-delay: 1.2s
}
@keyframes slideInLeft {
to {
opacity: 1;
transform: translateX(0)
}
}
.inclusive-platform-feature-item:hover {
background: #667eea14;
border-color: #667eea4d;
transform: translateY(-4px);
box-shadow: 0 12px 30px #667eea33
}
.inclusive-platform-icon {
width: 44px;
height: 44px;
min-width: 44px;
margin-right: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #667eea1a;
border-radius: 12px;
border: 1px solid #667eea33
}
.inclusive-platform-feature-item:hover .inclusive-platform-icon {
background: #667eea33;
border-color: #667eea66;
transform: scale(1.1);
transition: .3s
}
.inclusive-platform-icon svg {
position: relative;
z-index: 1;
filter: drop-shadow(0 0 8px #667eea99);
width: 24px;
height: 24px
}
.inclusive-platform-feature-text {
color: #d1d9f0;
font-size: 1.05rem;
line-height: 1.6;
transition: .3s;
font-weight: 500
}
.fade-out {
animation: .4s forwards fadeOut
}
.fade-in {
animation: .6s forwards fadeIn
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0)
}
to {
opacity: 0;
transform: translateY(-20px)
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@media (max-width:992px) {
.error-page-dev {
width: 300px !important;
height: 300px !important;
margin: -40px auto
}
#features-empowering {
flex-direction: column;
padding: 4rem 0
}
.features-grid {
grid-template-columns: 1fr
}
.dash-remit-img,
.globe-container,
.layout-bg-desk {
display: none
}
.feature-empower-data-btn,
.feature-empowering-text h1,
.feature-empowering-text h4 {
text-align: center
}
.feature-empower-data-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.inds-exchange img {
width: 70%
}
.layout-bg-mob {
display: block
}
.calender-text-data h2 {
font-size: 24px
}
.calender-text-data {
display: flex;
flex-direction: column-reverse
}
.inclusive-platform-content-panel {
padding: 2.5rem 2rem
}
}
@media (max-width:768px) {
.inclusive-platform-title,
.raas-checklist-section-title {
font-size: 2rem
}
.inclusive-platform-section,
.raas-checklist-section {
padding: 60px 0
}
.raas-checklist-item-title {
font-size: 1.1rem
}
.raas-checklist-cta-title {
font-size: 1.3rem
}
.raas-checklist-btn {
min-width: 60px;
padding: .5rem 1rem;
font-size: .9rem
}
.inclusive-platform-subtitle {
font-size: 1rem
}
.inclusive-platform-tabs {
padding: 6px;
gap: 10px
}
.inclusive-platform-tab-btn {
padding: 14px 24px;
font-size: .9rem;
min-width: 160px
}
.inclusive-platform-content-panel {
padding: 2rem 1.5rem
}
.inclusive-platform-content-title {
font-size: 1.5rem
}
.inclusive-platform-feature-item {
padding: 16px
}
.inclusive-platform-feature-text {
font-size: .95rem
}
}
.strategy-section {
padding: 30px 15px
}
.strategy-title {
font-size: 1.5rem;
color: #fff
}
.strategy-list p {
line-height: 1.5;
font-size: 1rem;
color: #fff
}
.strategy-icon svg {
min-width: 22px;
height: 22px
}
.strategy-btn {
background: #377cd5;
padding: 14px;
border-radius: 10px;
color: #fff;
font-size: 16px;
font-weight: 600;
border: none
}
.your-logo {
font-weight: 600 !important;
font-size: 22px !important
}
.hero-list-text {
list-style: disc !important;
margin-left: 20px !important
}
.instant-slider-for {
position: relative;
max-width: 100%;
margin: 0 auto;
padding: 0
}
.slider-wrapper {
width: 100%;
overflow: hidden;
position: relative
}
.slider-track {
display: flex;
gap: clamp(20px, 2vw, 30px);
transition: transform .8s cubic-bezier(.68, -.55, .265, 1.55);
will-change: transform
}
.slider-item {
min-width: clamp(100px, 18vw, 220px);
max-width: clamp(100px, 18vw, 220px);
flex-shrink: 0;
transition: .8s cubic-bezier(.68, -.55, .265, 1.55)
}
.slider-card {
background: #377cd5;
border: 1px solid #ffffff1a;
border-radius: clamp(15px, 1.5vw, 20px);
padding: clamp(15px, 1.5vw, 20px);
transition: .6s;
height: 100%;
position: relative
}
.slider-item.center .slider-card {
transform: scale(1) translateZ(50px);
background: #377cd526;
border-color: #377cd599;
box-shadow: 0 30px 60px #377cd5b3;
z-index: 10
}
.slider-item.left .slider-card,
.slider-item.right .slider-card {
transform: scale(.85) translateZ(0);
opacity: .6
}
.slider-item.far-left .slider-card,
.slider-item.far-right .slider-card {
transform: scale(.7) translateZ(-50px);
opacity: .3
}
.slider-card img {
transition: transform .6s;
max-width: 100%;
height: auto;
object-fit: contain
}
.slide-image-wrapper img {
border-radius: 20px;
}
.slider-item.center .slider-card img {
transform: scale(1.05);
filter: drop-shadow(0 20px 40px #0ff9)
}
.slider-card p {
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 500;
transition: .3s
}
.slider-item.center .slider-card p {
font-size: clamp(16px, 1.4vw, 18px);
font-weight: 700;
color: #0ff !important
}
.slider-nav-bottom {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(15px, 2vw, 20px);
margin-top: 40px
}
.slider-btn {
background: #377cd5;
border: 2px solid #377cd5;
color: #fff;
width: clamp(50px, 4vw, 60px);
height: clamp(50px, 4vw, 60px);
border-radius: 50%;
font-size: clamp(24px, 2vw, 28px);
cursor: pointer;
transition: .4s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700
}
.slider-btn:active {
transform: scale(.95)
}
@media (max-width:1200px) {
.slider-item {
min-width: clamp(100px, 22vw, 200px);
max-width: clamp(100px, 22vw, 200px)
}
}
@media (max-width:767px) {
.raas-process-step {
margin-bottom: 2rem
}
.raas-process-step:last-child {
margin-bottom: 0
}
.raas-process-card {
padding: 25px 15px
}
.slider-item {
min-width: clamp(100px, 60vw, 200px);
max-width: clamp(100px, 60vw, 200px)
}
.slider-item.center .slider-card {
transform: scale(1) translateZ(30px)
}
}
@media (min-width:1920px) {
.slider-item {
min-width: 300px;
max-width: 300px
}
}
.remit-money-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
perspective: 1000px
}
.remit-money-cards {
background: 0 0;
border: 1px solid #377cd5;
border-radius: 20px;
padding: 35px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: .5s cubic-bezier(.68, -.55, .265, 1.55)
}
.white-core-value-card,
.white-launch-cta-box,
.white-launch-feature-card {
backdrop-filter: blur(20px);
overflow: hidden
}
.remit-money-cards::after {
content: '';
position: absolute;
inset: 2px;
background: 0 0;
border-radius: 18px;
z-index: 1
}
.remit-money-cards-icon {
width: 70px;
height: 70px;
margin-bottom: 25px;
transition: .5s;
filter: drop-shadow(0 5px 15px #00ffff4d)
}
.remit-money-cards:hover .remit-money-cards-icon {
transform: scale(1.2) rotateY(360deg);
filter: drop-shadow(0 10px 25px #0ff9)
}
.remit-money-cards-title-text {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-bottom: 15px;
transition: .3s
}
.remit-money-cards-description {
color: #fffc;
font-size: 15px;
line-height: 1.6;
transition: .3s
}
.remit-money-cards-number {
position: absolute;
top: 20px;
right: 25px;
font-size: 48px;
font-weight: 900;
color: #377cd5;
z-index: 2;
transition: .4s
}
.remit-money-cards:hover .remit-money-cards-number {
transform: scale(1.2)
}
@keyframes rotate {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.blog-card-data-filed .gradient-cta {
background: linear-gradient(135deg, #377cd5, #4ba3ff, #1f5bb7);
background-size: 300% 300%;
animation: 8s infinite gradientAnimation;
border-radius: 20px;
box-shadow: 0 10px 25px #377cd566;
transition: transform .3s, box-shadow .3s
}
.blog-card-data-filed .gradient-cta:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px #377cd599
}
.gradient-cta a {
padding: 8px 10px;
font-size: 16px
}
@keyframes gradientAnimation {
0%,
100% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
}
.phone-slide-file-slider-section {
position: relative;
overflow: hidden;
width: 100%;
height: 685px;
border-radius: 2.5rem
}
.phone-slide-file-slider-section::before {
content: "";
position: absolute;
inset: 0;
border-radius: 2.5rem;
border: 1px solid transparent;
background-image: linear-gradient(70deg, #d1cece99, #6669) border-box;
mask: linear-gradient(#fff 0, #fff 100%) padding-box, linear-gradient(#fff 0, #fff 100%);
mask-composite: exclude;
mix-blend-mode: color-dodge;
transition: background-color .6s ease-in-out
}
.phone-slide-file-slide {
position: relative;
overflow: hidden;
max-width: 180px;
max-height: 350px;
width: 100%;
border-radius: 1.25rem
}
.phone-slide-file-slide::before {
content: "";
position: absolute;
inset: 0;
background-color: #0006
}
.phone-slide-file-centered-swiper {
position: absolute !important;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 10;
max-width: 280px;
max-height: 360px;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 1.25rem;
box-shadow: 0 0 40px #0009;
pointer-events: none
}
.phone-slide-file-centered-swiper__slide {
width: 100%;
transition: transform .6s
}
.phone-slide-file-background-swiper img,
.phone-slide-file-centered-swiper img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #377cd5;
padding: 5px
}
.phone-slide-file-slider-section__title {
position: absolute;
top: 12.5%;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 1.6rem;
text-transform: normal;
color: #fff
}
.AnnualDIY-label,
.christmas-offer-badge,
.eb-badge,
.eb-btn,
.msb-count-flow-label,
.pass-pricing-last-desc-divider-text,
.remit-cal .verdict-label,
.white-core-value-title {
text-transform: uppercase
}
.phone-slide-file-slider-section__text {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
max-width: 280px;
text-align: center;
font-size: 1.25rem;
color: #bbb
}
.hidden-out {
animation: .4s forwards slideOutLeft
}
.hidden-in {
animation: .4s forwards slideInRight
}
.hidden {
opacity: 0
}
.phone-slide-file-slider-section__next-button,
.phone-slide-file-slider-section__prev-button {
position: absolute;
z-index: 100;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #fff3;
color: #fff;
cursor: pointer
}
.phone-slide-file-slider-section__prev-button {
left: 2.5%;
top: 50%
}
.phone-slide-file-slider-section__next-button {
right: 2.5%;
top: 50%
}
.phone-slide-file-slider-section__next-button.disabled,
.phone-slide-file-slider-section__prev-button.disabled {
opacity: .45;
pointer-events: none
}
.white-core-value-section::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(circle at 20% 50%, #ffffff1a 0, transparent 50%), radial-gradient(circle at 80% 80%, #ffffff26 0, transparent 50%);
animation: 20s ease-in-out infinite white-core-value-float
}
@keyframes white-core-value-float {
0%,
100% {
transform: translate(0, 0) rotate(0)
}
33% {
transform: translate(30px, -30px) rotate(5deg)
}
66% {
transform: translate(-20px, 20px) rotate(-5deg)
}
}
.white-core-value-title {
font-size: 3.5rem;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
letter-spacing: 3px;
animation: 1s white-core-value-fadeInDown
}
@keyframes white-core-value-fadeInDown {
from {
opacity: 0;
transform: translateY(-50px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.white-core-value-card {
background: #ffffff0d;
border-radius: 25px;
padding: 40px 30px;
margin-bottom: 30px;
border: 2px solid #fff3;
transition: .4s cubic-bezier(.175, .885, .32, 1.275);
position: relative;
z-index: 2;
animation: .8s both white-core-value-fadeInUp;
height: 100%
}
@keyframes white-core-value-fadeInUp {
from {
opacity: 0;
transform: translateY(50px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.white-core-value-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, #ffffff1a 0, transparent 70%);
opacity: 0;
transition: opacity .5s
}
.white-core-value-card:hover::before {
opacity: 1;
animation: 3s linear infinite white-core-value-rotate
}
@keyframes white-core-value-rotate {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.white-core-value-card:hover {
transform: translateY(-15px) scale(1.03);
border-color: #ffffff80;
box-shadow: 0 25px 60px #0006
}
.white-core-value-icon-wrapper {
width: 90px;
height: 90px;
background: linear-gradient(135deg, #fff 0, #f0f0f0 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative
}
.white-core-value-icon {
width: 50px;
height: 50px
}
.white-core-value-card-title {
color: #fff;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 20px;
text-align: center
}
.white-core-value-card-text {
color: #ffffffe6;
font-size: 1rem;
line-height: 1.8;
text-align: center;
margin-bottom: 0
}
.white-core-value-feature-list {
list-style: none;
padding: 0;
margin-top: 20px
}
.white-core-value-feature-item {
color: #fffffff2;
font-size: 1.05rem;
padding: 10px 0 10px 35px;
position: relative;
transition: transform .3s
}
.white-core-value-feature-item::before {
content: '⚡';
position: absolute;
left: 0;
font-size: 1.3rem;
animation: 1s infinite white-core-value-bounce
}
.custom-next::after,
.custom-prev::before {
font-size: 20px;
color: #377cd5;
font-weight: 700
}
@keyframes white-core-value-bounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-5px)
}
}
.white-core-value-floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 1
}
.white-core-value-shape {
position: absolute;
opacity: .1
}
.white-core-value-shape-1 {
width: 300px;
height: 300px;
background: linear-gradient(45deg, #fff, transparent);
border-radius: 50%;
top: 10%;
left: 5%;
animation: 15s ease-in-out infinite white-core-value-float1
}
.white-core-value-shape-2 {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #fff, transparent);
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
top: 60%;
right: 10%;
animation: 20s ease-in-out infinite white-core-value-float2
}
.white-core-value-shape-3 {
width: 150px;
height: 150px;
background: linear-gradient(225deg, #fff, transparent);
border-radius: 50%;
bottom: 20%;
left: 15%;
animation: 18s ease-in-out infinite reverse white-core-value-float1
}
@keyframes white-core-value-float1 {
0%,
100% {
transform: translate(0, 0) rotate(0)
}
50% {
transform: translate(50px, 50px) rotate(180deg)
}
}
@keyframes white-core-value-float2 {
0%,
100% {
transform: translate(0, 0) rotate(0)
}
50% {
transform: translate(-50px, 30px) rotate(-180deg)
}
}
.white-launch-section {
background-color: #001421;
color: #fff;
position: relative;
overflow: hidden
}
.white-launch-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: 20s linear infinite float
}
@keyframes float {
from {
transform: translateY(0)
}
to {
transform: translateY(-100px)
}
}
.white-launch-badge {
display: inline-block;
background: #fff3;
padding: 8px 20px;
border-radius: 50px;
font-size: .9rem;
font-weight: 600;
margin-bottom: 1.5rem;
border: 1px solid #ffffff4d
}
.white-launch-stats-wrapper {
display: flex;
gap: 2rem;
margin: 3rem 0;
flex-wrap: wrap
}
.white-launch-stat {
flex: 1;
min-width: 150px;
text-align: center
}
.white-launch-stat-number {
font-size: 3rem;
font-weight: 800;
display: block;
background: linear-gradient(45deg, #fff, #377cd5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}
.white-launch-stat-label {
font-size: .95rem;
opacity: .9;
margin-top: .5rem
}
.white-launch-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-top: 3rem
}
.white-launch-feature-card {
background: #ffffff14;
border: 1px solid #ffffff26;
border-radius: 20px;
padding: 2rem;
transition: .4s cubic-bezier(.175, .885, .32, 1.275);
position: relative
}
.white-launch-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #60a5fa, #377cd5, #377cd5, #377cd5);
transform: scaleX(0);
transition: transform .4s
}
.msb-count-flow-item:hover .msb-count-flow-card::before,
.white-launch-feature-card:hover::before {
transform: scaleX(1)
}
.white-launch-feature-card:hover {
transform: translateY(-15px) scale(1.02);
background: #ffffff26;
box-shadow: 0 20px 60px #0006
}
.white-launch-icon-wrapper {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #fff3, #ffffff0d);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 2rem;
transition: .3s
}
.white-launch-feature-card:hover .white-launch-icon-wrapper {
transform: rotateY(360deg) scale(1.1)
}
.white-launch-feature-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: .5rem
}
.white-launch-feature-desc {
font-size: .95rem;
opacity: .85;
line-height: 1.6
}
.white-launch-cta-box {
background: linear-gradient(135deg, #ffffff26, #ffffff0d);
border: 2px solid #fff3;
border-radius: 25px;
padding: 3rem;
margin-top: 4rem;
text-align: center;
position: relative
}
.white-launch-cta-box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, #ffffff1a, transparent);
animation: 3s infinite shine
}
@keyframes shine {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg)
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg)
}
}
.white-launch-cta-text {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
position: relative;
z-index: 1
}
.white-launch-highlight {
background: linear-gradient(90deg, #fbbf24, #f59e0b);
padding: 4px 12px;
border-radius: 8px;
font-weight: 700;
color: #1e3c72
}
.paas-modify,
.phone-design-conatiner,
.ready-to-launch-section {
position: relative;
overflow: hidden
}
.ready-to-launch-section::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle, #6366f14d 0, transparent 70%);
top: -250px;
right: -250px;
animation: 4s ease-in-out infinite pulse
}
.ready-to-launch-section::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, #a855f74d 0, transparent 70%);
bottom: -200px;
left: -200px;
animation: 4s ease-in-out 2s infinite pulse
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: .5
}
50% {
transform: scale(1.2);
opacity: .8
}
}
.ready-to-launch-main-card {
background: #ffffff0d;
backdrop-filter: blur(30px);
border: 2px solid #ffffff1a;
border-radius: 40px;
padding: 4rem;
box-shadow: 0 30px 80px #0006;
position: relative;
overflow: hidden
}
.ready-to-launch-main-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffffff1a, transparent);
animation: 3s infinite slideLight
}
@keyframes slideLight {
0% {
left: -100%
}
100% {
left: 100%
}
}
.ready-to-launch-badge-wrapper {
display: flex;
justify-content: center;
margin-bottom: 2rem
}
.ready-to-launch-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
padding: 12px 30px;
border-radius: 50px;
font-size: .95rem;
font-weight: 700;
color: #fff;
box-shadow: 0 10px 30px #667eea66;
animation: 2s infinite bounce
}
@keyframes bounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-10px)
}
}
.ready-to-launch-heading {
font-size: 2.5rem;
font-weight: 900;
color: #fff;
text-align: center;
margin-bottom: 1.5rem;
line-height: 1.2
}
.ready-to-launch-subheading {
font-size: 1.5rem;
color: #ffffffe6;
text-align: center;
margin-bottom: 3rem;
line-height: 1.6;
font-weight: 300
}
.ready-to-launch-highlight {
color: #377cd5;
font-weight: 700;
position: relative
}
.ready-to-launch-highlight::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: #377cd5;
animation: 1.5s ease-in-out infinite underlineGrow
}
@keyframes underlineGrow {
0%,
100% {
width: 0
}
50% {
width: 100%
}
}
.ready-to-launch-features-row {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 3rem;
flex-wrap: wrap
}
.ready-to-launch-feature-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
min-width: 200px;
max-width: 250px
}
.ready-to-launch-icon-circle {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #6366f14d, #a855f74d);
border: 3px solid #fff3;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin-bottom: 1rem;
transition: .5s cubic-bezier(.68, -.55, .265, 1.55);
position: relative
}
.ready-to-launch-icon-circle::before {
content: '';
position: absolute;
width: 120%;
height: 120%;
border: 2px solid #ffffff4d;
border-radius: 50%;
animation: 2s infinite ripple
}
@keyframes ripple {
0% {
transform: scale(.8);
opacity: 1
}
100% {
transform: scale(1.5);
opacity: 0
}
}
.ready-to-launch-feature-item:hover .ready-to-launch-icon-circle {
transform: scale(1.2) rotate(360deg);
background: linear-gradient(135deg, #6366f180, #a855f780)
}
.ready-to-launch-feature-text {
color: #fff;
font-size: 1.1rem;
font-weight: 600
}
.ready-to-launch-cta-wrapper {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap
}
.ready-to-launch-btn {
display: inline-flex;
align-items: center;
gap: .75rem;
padding: 18px 50px;
font-size: 1.3rem;
font-weight: 700;
border-radius: 50px;
text-decoration: none;
transition: .4s cubic-bezier(.175, .885, .32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 15px 40px #0000004d
}
.ready-to-launch-btn-primary {
background: linear-gradient(135deg, #f59e0b 0, #ef4444 100%);
color: #fff;
border: none
}
.ready-to-launch-btn-primary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ffffff4d;
transform: translate(-50%, -50%);
transition: width .6s, height .6s
}
.ready-to-launch-btn-primary:hover::before {
width: 400px;
height: 400px
}
.ready-to-launch-btn-primary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 20px 50px #f59e0b80
}
.ready-to-launch-btn-secondary {
background: #ffffff1a;
color: #fff;
border: 2px solid #ffffff4d
}
.ready-to-launch-btn-secondary:hover {
background: #fff3;
transform: translateY(-5px);
border-color: #ffffff80
}
.ready-to-launch-trust-text {
text-align: center;
color: #ffffffb3;
font-size: .95rem;
margin-top: 2rem
}
.white-label-video {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
padding: 60px 0;
overflow: hidden
}
.white-label-video__bg-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: 1
}
.white-label-video__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000b3;
z-index: 2
}
.white-label-video__container {
position: relative;
z-index: 3
}
.white-label-video__demo-card {
background: #00000080;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
border-radius: 20px !important;
z-index: 3
}
.white-label-video__check-icon {
color: #28a745;
font-weight: 700;
font-size: 1.2rem;
flex-shrink: 0
}
.remit-cal .text-slate-400,
.remit-cal .text-slate-500,
.white-label-video__demo-card h2,
.white-label-video__demo-card p {
color: #fff !important
}
.google-iframe-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 10
}
.google-iframe-dot {
width: 10px;
height: 10px;
margin: 0 5px;
background: #377cd5;
border-radius: 50%;
animation: 1s infinite alternate google-iframe-blink
}
.app-design-dark,
.app-design-light {
width: 400px;
height: 500px;
position: relative;
padding: 20px 25px;
border-radius: 20px;
overflow: hidden;
transition: .4s cubic-bezier(.4, 0, .2, 1);
text-align: center
}
@keyframes google-iframe-blink {
from {
opacity: .2
}
to {
opacity: 1
}
}
.app-design-light {
background-color: #fff
}
.app-design-dark img,
.app-design-light img {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-width: 80%;
height: auto;
transition: .4s
}
.app-design-dark {
background-color: #000
}
.swiper-slide {
transform: scale(.85);
opacity: .5;
transition: .4s cubic-bezier(.4, 0, .2, 1)
}
.swiper-slide-active {
transform: scale(1.05);
opacity: 1;
z-index: 2
}
.swiper-slide-active .app-design-dark,
.swiper-slide-active .app-design-light {
box-shadow: 0 20px 60px #0000004d
}
.swiper-slide-next,
.swiper-slide-prev {
transform: scale(.9);
opacity: .7
}
.custom-next,
.custom-prev {
background: #fff3;
width: 120px;
height: 50px;
border-radius: 25px;
backdrop-filter: blur(6px);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
transition: .3s;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #377cd5;
position: absolute;
top: 60%;
transform: translateY(-50%);
z-index: 10
}
.AnnualDIY-main-card,
.CostsOfGlobal-card {
background: #1e293bb3;
backdrop-filter: blur(10px)
}
.custom-next:hover,
.custom-prev:hover {
background: #ffffff59;
transform: scale(1.05);
box-shadow: 0 8px 20px #f973164d
}
.custom-next:active,
.custom-prev:active {
transform: scale(.98)
}
.custom-prev::before {
content: '←';
transition: .3s
}
.custom-prev span {
content: 'Prev'
}
.custom-next::after {
content: '→';
transition: .3s;
display: inline-block
}
.custom-next:hover::after {
transform: translateX(3px)
}
.custom-prev:hover::before {
transform: translateX(-3px)
}
.custom-next:hover,
.custom-prev:hover {
transform: translateY(-50%) scale(1.05)
}
.custom-next:active,
.custom-prev:active {
transform: translateY(-50%) scale(.98)
}
.app-design-fl {
gap: 20px !important
}
.swiper-container {
overflow: visible;
padding: 40px 0
}
.mySwiper {
overflow: visible
}
.CostsOfGlobal-card {
position: relative;
padding: 30px;
border-radius: 16px;
border: 1px solid #2d2d2d;
transition: .3s;
cursor: default;
margin-bottom: 24px;
height: 100%
}
.CostsOfGlobal-card:hover {
box-shadow: 0 25px 50px -12px #00000080
}
.CostsOfGlobal-card.CostsOfGlobal-europe:hover {
border-color: #3b82f680;
box-shadow: 0 25px 50px -12px #1d4ed81a
}
.CostsOfGlobal-card.CostsOfGlobal-usa:hover {
border-color: #ef444480;
box-shadow: 0 25px 50px -12px #b91c1c1a
}
.CostsOfGlobal-card.CostsOfGlobal-canada:hover {
border-color: #a855f780;
box-shadow: 0 25px 50px -12px #6b21a81a
}
.CostsOfGlobal-card.CostsOfGlobal-australia:hover {
border-color: #f9731680;
box-shadow: 0 25px 50px -12px #9a34121a
}
.CostsOfGlobal-icon-bg {
position: absolute;
top: 16px;
right: 16px;
opacity: .1;
transition: opacity .3s
}
.CostsOfGlobal-card:hover .CostsOfGlobal-icon-bg {
opacity: .2
}
.CostsOfGlobal-icon-bg svg {
width: 96px;
height: 96px
}
.CostsOfGlobal-content {
position: relative;
z-index: 10
}
.CostsOfGlobal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px
}
.CostsOfGlobal-flag {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 4px
}
.CostsOfGlobal-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0
}
.CostsOfGlobal-subtitle {
font-size: .875rem;
font-weight: 600;
margin-bottom: 8px
}
.CostsOfGlobal-subtitle.CostsOfGlobal-usa,
.eb-community:hover h3 {
color: #f87171
}
.CostsOfGlobal-subtitle.CostsOfGlobal-canada {
color: #c084fc
}
.CostsOfGlobal-subtitle.CostsOfGlobal-australia,
.Inclusive-Platform-adon-orange-text {
color: #fb923c
}
.CostsOfGlobal-list-item {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 12px;
font-size: .875rem;
color: #9ca3af
}
.CostsOfGlobal-icon {
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink: 0
}
.CostsOfGlobal-icon.CostsOfGlobal-europe {
fill: #3b82f6
}
.CostsOfGlobal-icon.CostsOfGlobal-usa {
fill: #ef4444
}
.CostsOfGlobal-icon.CostsOfGlobal-canada {
fill: #a855f7
}
.CostsOfGlobal-icon.CostsOfGlobal-australia {
fill: #f97316
}
.CostsOfGlobal-highlight {
color: #fff;
font-weight: 600
}
.AnnualDIY-wrapper {
padding: 40px 15px
}
.AnnualDIY-container {
max-width: 1000px;
margin: 0 auto
}
.AnnualDIY-main-card {
padding: 48px 32px;
border-radius: 24px;
border: 1px solid #ef444433;
position: relative;
overflow: hidden;
box-shadow: 0 10px 40px #0000004d
}
.AnnualDIY-glow-effect {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 100%;
background: radial-gradient(ellipse at center, #991b1b26, transparent);
filter: blur(80px);
pointer-events: none;
animation: 4s ease-in-out infinite AnnualDIY-pulse
}
@keyframes AnnualDIY-pulse {
0%,
100% {
opacity: .6;
transform: translateX(-50%) scale(1)
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.1)
}
}
.AnnualDIY-content {
position: relative;
z-index: 10;
text-align: center
}
.AnnualDIY-heading {
font-size: 2rem;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
animation: .8s ease-out AnnualDIY-fadeInDown
}
.AnnualDIY-subheading {
color: #fca5a5cc;
margin-bottom: 48px;
font-size: 1rem;
animation: .8s ease-out .2s backwards AnnualDIY-fadeInDown
}
.AnnualDIY-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px
}
.AnnualDIY-stat-card {
background-color: #1c1f2e;
border: 1px solid #6b728080;
border-radius: 12px;
padding: 24px;
text-align: left;
transition: .3s;
cursor: pointer;
position: relative;
overflow: hidden;
animation: .8s ease-out backwards AnnualDIY-fadeInUp
}
.AnnualDIY-stat-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffffff0d, transparent);
transition: left .5s
}
.AnnualDIY-stat-card:hover {
border-color: #9ca3af;
transform: translateY(-4px);
box-shadow: 0 12px 24px #0006
}
.AnnualDIY-stat-card.AnnualDIY-revenue-card:hover {
border-color: #ef444499;
box-shadow: 0 12px 24px #ef444433
}
.AnnualDIY-stat-card.AnnualDIY-revenue-card::after {
content: '💸';
position: absolute;
top: 12px;
right: 12px;
font-size: 24px;
opacity: 0;
transform: scale(0);
transition: .3s
}
.AnnualDIY-label {
font-size: .75rem;
color: #9ca3af;
letter-spacing: .1em;
font-weight: 600;
margin-bottom: 8px;
display: block
}
.AnnualDIY-value {
font-size: 2rem;
font-weight: 700;
color: #fff;
margin: 0;
display: inline-block
}
.AnnualDIY-value-unit {
font-size: 1.125rem;
font-weight: 400;
color: #9ca3af;
margin-left: 2px
}
.AnnualDIY-value-negative {
color: #ff5d5d
}
@keyframes AnnualDIY-countUp {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.AnnualDIY-value.AnnualDIY-animated {
animation: .6s ease-out AnnualDIY-countUp
}
@keyframes AnnualDIY-fadeInDown {
from {
opacity: 0;
transform: translateY(-30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes AnnualDIY-fadeInUp {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.AnnualDIY-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
background-color: #1a1a1a;
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: .875rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: .3s;
box-shadow: 0 4px 12px #00000080
}
.AnnualDIY-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1a1a1a
}
.AnnualDIY-stat-card:hover .AnnualDIY-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(-8px)
}
@keyframes AnnualDIY-pulse-red {
0%,
100% {
box-shadow: 0 0 0 0 #ef444466
}
50% {
box-shadow: 0 0 0 10px #ef444400
}
}
.AnnualDIY-revenue-card {
animation: 2s infinite AnnualDIY-pulse-red
}
#snow {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
overflow: hidden
}
.snowflake {
position: absolute;
top: -10px;
color: #fff;
text-shadow: 0 0 8px #fffc;
animation-name: fall;
animation-timing-function: linear;
animation-fill-mode: forwards;
will-change: transform
}
@keyframes fall {
0% {
transform: translateY(0) translateX(0);
opacity: 1
}
50% {
transform: translateY(50vh) translateX(20px)
}
100% {
transform: translateY(110vh) translateX(-20px);
opacity: 0
}
}
.christmas-btn {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: 100px;
padding: 22px 33px;
font-size: 20px;
line-height: 26px;
text-decoration: none;
color: #fff;
text-shadow: 0 1px 2px #000000bf;
background: #5e0d0c;
outline: 0;
border-radius: 15px;
border: 1px solid #4c0300;
box-shadow: inset 1px 1px 0 #ffffff40 inset 0 0 6px #a23227, inset 0 80px 80px -40px #ac3223, 1px 1px 3px #000000bf;
overflow: visible;
-webkit-transition: .5s linear;
-moz-transition: .5s linear;
-o-transition: .5s linear;
transition: .5s linear
}
.christmas-btn::before {
content: '';
display: block;
position: absolute;
top: -7px;
left: -3px;
right: 0;
height: 23px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFpJREFUeNrUV0tIo1cUvpkYjQ4xxSA6DxuNqG0dtaUKOgs3s6i0dFd3pSsXdjeIixakiGA34sZuXCkoONLFwJTK4GMYLYXg29gatTpiXurkbd7vv9/5ub+IxuhA7eiFQ5Kbc8/57ne/e87/ywRBYLdl3GG3aNwqsLJ0k0tLS+fmcnNzWUVFBVMoFGx2djarvLxcm5OTw+bm5iytra2xc4ExNjY27iqVyvvwK6CpeDzuCYVC1urq6qDA9UcfPp+PHR4esmAwKK6tr68/l5/8rgQ2Ozub1dbWyiYmJooaGxt/VqvV38jlchX9l0qlwoFA4DWS/RKLxRxFRUVf5+XlPcaaT2AP0sVPJBL2SCRiAPBpu93+vKamZo/Ae71eZjabWV1dXVqw7CKwp43ksrCw8Bhg7MJ/PLDZ5PHx8cz29vYT5JGD/bSYLgTrcDgYdk6siSc6NjZWDaAe4ZoHQL+cmZnRpZPnhWDpD8kw7uKo9ML/NMCsd2tr61vkzboMrEyv138M7TyLRqMWMBsX3sMgaZhMpp+AR5EJrCocDpuEGzKg4x8khs+CVWxubvZfR9JkMik4nU7BarUKLpeLmLsKuwIqTLynp4fqmIzASrqQT09Pf1VVVfX0KsWZ6uHBwQHTaDSsoKAgo6/H4xHLEcrVyRwuEisrKzs5XrrIVAVwiUVDKRRrL+YI32ewdVhMApuHWvcj6vids6J2u90MF4yBHUZNgKoEBaRBQalJqFSqtJfUYrGIlQX+ydXVVTN+u0tKSjQNDQ1axJVl2iTypebn55d7e3v/kqoDgZU1NTU9LCws/Py0M+2ekuGincxJ3yF+18jIyHJLS0slQJUWFxczrBeBE0vE5tHRkbixlZWVfSR8gTX/0P5gH7S1tX3Z3t7+BW8qAvwSfr8/jA0EIRM/qoFtampqbW9vTw+XA+ojUruVd3Z2tvb19T2TQFEim81GgVJoCvvj4+NLOJZgaWmpemdn5y3a6BbcnJDAw8HBwac6ne6eqCW5XDwB3qVSqM9/DAwMUNy/eVLabT7sI25qwgujThCBhWE+mAt2yNc4SQKSZrOQQE1HS22VJkmPAGTr7+//fX19fRk+Zgq0trbGeFAKEAQT98BSqKOj47vm5uaa/Px8JeIk4GcaHh6eWlxcfAU/A8xG67BxAX3fwdcbYUpSDJ06Z49Ak8ZC3OL8f3YiA4PBYKdLQ2AJ9OTk5GpXV9cQiCVh79M94QtlPLDUE/1gPNrd3f0W33W4cBoco48zQuy/IZYAMnGqlSc4c66L9JruQUaSARXeT8HGKzxAqFBekni6+h46+pMzGiJGMgTOJh1yU/KNEGDvZWvfBawkA9ppwGg0mrRa7SOI2g+gxOgbJIpdFpj72PnxSnPX8vqRxTURgBQWKisrH+GThOm+CtAzoK/9/Uiqq/6hoaHfdnd3jaOjo7/yY7yxbwqkWy3sQzpS2C6YirwvUJk0y7hurfyGRrnduPGvAAMASmo8wzeVwfsAAAAASUVORK5CYII=) no-repeat, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAXCAYAAABOHMIhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABiZJREFUeNrsWMtPlFcUvzPMwIDysLyRR4uATDHWCiVgSmRlios2DeiiXUFs0nRBd6arxqQhJDapkYXhP4BqDKTQhZaFNQSCaBEVJjwdHsNr5DUMDDPDzPT3u7nTDEgRKrKgc5KT+z3uufec33de99P4fD4RpL2RNgjB3kn35MkTeRERESFiYmLkGBoaKnQ6nWSNRvPPZFxr+vv7k6KioiIdDsfa8vLyQkFBgcP3Bnel3MDAQArWI0eFhISE87nb7bZ7PJ4VvLYuLi5O5+fnu9+kMNfq6+tLjIyMzMY6KeBEbK/XarXReI3lPDZMWcc4v7GxYV1dXR3Jy8ub2E5HPvJ6vRSSDH0ku1wuAfsEZOV1IEFHoeNFdHS0yMrK2knR0Lm5uR+hxLdQMjbwHTZbB41h8RGwCdc9MzMzneHh4bGJiYlf4SN8ijkfwqiIncCAAR7Iz2GPSShudjqdfeCeqampvwBQfFxc3JdYqwTv8gB8/F48A8BgKecE14V+L7ju2tpae05OzkuCCZvkPOj8mizmC6vVKtmPu+bx48cC3qI1mUyFUOyywWD4SHlELBaLJmCHNcwAghuAOujtuF4FqHO4nsX4EsAS3I4TJ04ME1h8PDE9PS09TYZoY2Pj1729vd6lpSVfkDYTPG0UkfNDRUWFgQ5Gb2Mh0N29e9eG/GQfHh4W8/PzwUy/ObQ/gMfVVlZW1iAiZdQxp3nv3LljRoL/5erVq1UIxzSiiVD9X4EDYATynCwAzGO858hCQRoaGmJFZNJz8YIcBc4BF966dau6sLAwBxVSJCUlCSThQwuU3W6XkYUok1Vzm5znQx5bbm9v77p+/frPeNSNRzZ/ISBwrG4ZR48eLamtrf2+uLjYSEG9Xi/wTISFhQlWGXohyzO/CJlVl23KQRLbABoaHx+/Z1lUZ/Hq1SsJFj3JT3hmHx8fnydPTEzMj46OziHPW2w22wxeD4Kfgadh/4YEzU8Az4DhffAn5eXlX1y6dKkEoCTspAQ9Mjs7+0BBo8Fms1lkZGTsOo0QLLRNkvnR+fEJzIMHD0xtbW39CL8JTFtSbAOvBIyLHIGVm9VzE2gKuDAMSSpcT6KXyT137lx2cnLyMXhcGDb3wq3XuWF3d/fCzZs3P0c4v5eSknJQbYLo7Ox0gC2lpaVZ3Be67Th/dnZWoAJKsJC3XA8fPhxoamp6hMb+BaaMgWcUMGtszZjiFDNmvcDI91pzG0iY4ARwkwrxkcHBwUdgNrRMbnrqoRbkVzDcvn3bl5qaWsmcgFH4G8XdEGUWFhak51AuISFBnkoCTyFbyWKxCJwIxlC0fq2rq7tcVFRkRKskjh8/Lr0+kBjCCDV/knfdv3//WX19/R8IRRNemxlu4AXwKqM+EJwdj1HbPYSwh3sCPAJDABm2LLchCjS+5/kirKGhwWk0GrMuXrxYQuX9hm/XXTMXMY+srKwI5ApZrbYmZh7deEJhAUKjLe/pLTzSsCuHrK+1tbUJVe3P6upq87Vr174rKysrYHVj/uW+OH3IfEuw4F3ee/fuPQfAvwOs5yyE4CnlFOu7BWrTCWlreO6FACpBZGwUw4BvkANLobReHb3kGZYGsGzTq/zlO8AT1ru6uoZbWlqeA6gINJAfnz59OlVLoX8Jtebm5raampqfcMvQYgTknz9//sKVK1c+y83NTdIEuCnaKMuNGzd+6+np6cCtSTkAw9D9X8Dyh+dbgaaAC1XAnUlPTy+qqqq6cPbs2UzkmWjNljiDJzpwHFnCkW2yo6NjCKW8H54wjlezKvRT09LSTsJrz5w6dSoN+Yp51ADAPUj8VoDbDq9pxrwuJcNIYQllJTIi/xopBw/VA7DJp0+f9hA78CgL5F5C8J2CpoCj8sfA6WCe/FPRhsRlZmbGIs8Y4FFO5CJgtrSsvrRVGW1V93b1myoGnKAKEcHgnwsWpg1lNI0fphwrmdqbckeU18WrnlOjqp5/j7W3BWvfQVPKa5SBkcrYCNVB65TRTlWZ1lXiXVU5xbtlDb2SPaLWYwrgHIcqPg6Vc7fbX69Yoyqfa7/AeiegbWOEVhmsVcWDwPn224iDJgla8Hd38Hd3ELQgaIeI/hZgAIPEp0vmQJdoAAAAAElFTkSuQmCC) 50% 0 no-repeat, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAXCAYAAACFxybfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAodJREFUeNrsVb1rWlEUv2pN/GqspKRSKFYXWzEloIWif0Fn6dJChQ7OQil0qd3EzcEpg0OgdHDr4CQODk7VRlLMEIVqApX4We0zflR9/Z1Ui4T34ksaaAYP/Hzc673n/M6550PG8zz73yKjn0wm83fDYDAwo9HINBrNnwOQg4MDs0ql2lQqlfdAWont7ng8Pjw+Ps44nc4G1pI9EXWaSOzt7TGO42aH5Pv7+08ajUZ0MBiUeXEZd7vdL5VK5fX29rZ+5tQiEmdxKrlcjsEYczgcynK5/BKKv/IXFNz/XiqVXkHdjUuRIA9SqdRD8or/R8Ez9fr9fqHVakUR4c2z0REjIQuHw2ZcrPBXLCA0RHTezEdHjIQqkUhEr9I4HOILhQLf6/VoOUFEvDMiQiToDx1Cdz+bzZ6bUFarlel0OkkVUK/XWbvdPoVer5fh3ntsfwJ+CJ2XA4p0Op1bpBgJyxDehQQ6nQ5DZXHBYDBZq9V+EhFUndnr9drEqoc2bwJbwGPgtohuVSwWe2Gz2TZMJpNgRKi6qtUqg2EWj8dTgUDgo0KhWPN4PC70EvXOzs67fD6/S6kiRIKeZA1YJ2MiJNbdbvfTUCjkV6vVK2hcDF8GI2w0GrGTkxM2HA5PDxaLxSOfz/cWEfk81X0XIMMFgJJ/srBjCgk8IdcfuVyuZ36//7nFYtkQyAMumUzuRiKRD0jMFLa+AZOpYwqgB/ziBVqmVBKUO7eAB/R0WG/Z7XaTVqtdbTabHJL6EK2djBaBPHA0NSqpbUsiMUeEBgpF4Q5AbZrmSJ/yEWgBTaBNHl9kdkgmMUeG7qwAq9PqovceTA3zlxlgsuswyuXsGsiSxJLEkoSY/BZgAEjRodi+uBruAAAAAElFTkSuQmCC) 100% 0 no-repeat
}
.christmas-btn:hover {
background: #a61715;
text-shadow: 0 1px 2px #000000bf 0 0 40px #fff;
box-shadow: inset 1px 1px 0 #ffffff40 inset 0 0 6px #da3b2c, inset 0 80px 80px -40px #dd4330, 1px 1px 3px #000000bf
}
.christmas-btn:active {
box-shadow: inset 1px 1px 0 #ffffff40 inset 0 0 6px #da3b2c, inset 0 80px 80px -40px #dd4330, 0 1px 0 #ffffff40;
-webkit-transition: 50ms linear;
-moz-transition: 50ms linear;
-o-transition: 50ms linear;
transition: 50ms linear
}
.christmas-price {
display: flex;
align-items: center;
gap: 12px
}
.christmas-price .old-price {
font-size: 1.6rem;
color: #b91c1c;
position: relative;
opacity: .7
}
.christmas-price .old-price::after {
content: "";
position: absolute;
left: -5%;
top: 50%;
width: 110%;
height: 2px;
background: #dc2626;
transform: rotate(-6deg)
}
.christmas-price .new-price {
font-size: 2.4rem;
color: #377cd5;
font-weight: 700
}
.christmas-offer-badge {
position: absolute;
top: 18px;
right: -48px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
font-size: .7rem;
font-weight: 700;
letter-spacing: .5px;
padding: 6px 60px;
transform: rotate(45deg);
box-shadow: 0 4px 12px #00000059;
z-index: 5
}
.christmas-offer-badge::after,
.christmas-offer-badge::before {
content: "";
position: absolute;
top: 100%;
border-top: 6px solid #7f1d1d;
border-left: 6px solid transparent;
border-right: 6px solid transparent
}
.christmas-offer-badge::after {
right: 0
}
.flat-off {
background-color: #dcfce7;
color: #15803d;
padding: 4px 6px;
font-size: 12px !important;
width: max-content
}
.fixed-offer-wrapper {
position: fixed;
left: 15px;
bottom: 15px;
display: flex;
align-items: flex-end;
gap: 12px;
z-index: 9999;
pointer-events: none
}
.fixed-left-gif {
width: 150px;
height: auto
}
.fixed-countdown {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
padding: 10px 14px;
border-radius: 8px;
text-align: center;
min-width: 160px;
width: max-content
}
.countdown-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 4px
}
.countdown-time {
font-size: 14px;
font-weight: 700;
letter-spacing: .5px
}
.badge-soft,
.brand-icon {
border-radius: 4px;
font-size: 12px
}
.christmas-btn,
.thankyou-mod-btn {
pointer-events: auto;
position: relative;
z-index: 1000
}
.modal {
z-index: 10550 !important
}
.modal-backdrop {
z-index: 10540 !important
}
.santa-word-wrapper {
position: relative;
display: inline-block
}
.santa-cap-wrapper {
position: absolute;
top: -.1em;
right: -.4em;
pointer-events: none
}
.santa-cap-img {
width: 2.2em;
max-width: 60px
}
@media (max-width:576px) {
.error-page-dev {
width: 220px !important;
height: 220px !important;
margin: -30px auto
}
#header {
padding: 15px 0;
transition: .5s
}
.floating-card,
.santa-cap-wrapper {
display: none
}
.remitso-footer-social-list {
gap: 10px
}
.remitso-footer-social-link {
width: 40px;
height: 40px
}
.remitso-footer-social-link i {
font-size: 16px
}
.remitso-privacy-container {
margin: 0 10px
}
.remitso-privacy-title {
font-size: 1.8rem
}
.remitso-privacy-contact {
padding: 20px
}
.msb-days-next-btn,
.msb-days-prev-btn,
.msb-real-next-btn,
.msb-real-prev-btn,
.msb-video-next-btn,
.msb-video-prev-btn {
padding: 10px 20px;
font-size: 14px
}
.inclusive-platform-tabs {
flex-direction: column;
align-items: stretch;
border-radius: 20px;
gap: 8px
}
.inclusive-platform-tab-btn {
width: 100%;
text-align: center;
min-width: unset
}
.inclusive-platform-icon {
width: 40px;
height: 40px;
min-width: 40px;
margin-right: 14px
}
}
.app-container {
background-color: #001421 !important
}
.brand-icon {
width: 24px;
height: 24px;
background-color: #4f46e5;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-right: 12px
}
.badge-soft {
background-color: #f1f5f9;
color: #64748b;
padding: 2px 8px;
font-weight: 500
}
.main-content {
flex: 1;
padding: 12px;
min-height: 0
}
.back-office-offical {
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: .5rem;
overflow: hidden;
cursor: pointer;
height: 100%;
display: flex;
flex-direction: column;
transition: .2s ease-in-out;
position: relative
}
.back-office-offical:hover {
box-shadow: 0 4px 6px -1px #0000001a 0 2px 4px -1px #0000000f;
border-color: #a5b4fc
}
.color-bar {
height: 4px;
width: 100%;
flex: 0 0 auto
}
.card-content {
flex: 0 0 auto;
padding: 16px 12px 12px
}
.card-title {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin-bottom: 4px;
line-height: 1.25;
transition: color .2s
}
.back-office-offical:hover .card-title {
color: #4338ca
}
.card-desc {
font-size: 11px;
color: #64748b;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0
}
.preview-area {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-top: 1px solid #f1f5f9;
transition: background-color .2s
}
.abstract-bar-1,
.abstract-bar-2 {
height: .375rem;
border-radius: 9999px;
opacity: .2;
transition: transform .3s
}
.back-office-offical:hover .preview-area {
background-color: #f8fafc
}
.abstract-bar-1 {
width: 6rem;
margin-bottom: 8px
}
.abstract-bar-2 {
width: 3rem
}
.enlarge-btn {
bottom: 8px;
padding: 4px;
border: 1px solid #f1f5f9;
box-shadow: 0 1px 2px 0 #0000000d;
transition: .2s;
display: flex;
align-items: center;
justify-content: center
}
.back-office-offical:hover .enlarge-btn {
color: #4f46e5;
border-color: #e0e7ff
}
.custom-modal-overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0009;
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
transition: opacity .2s ease-in-out;
position: fixed;
z-index: 10600
}
.custom-modal-overlay.show {
display: flex;
opacity: 1
}
.custom-modal {
background: #fff;
border-radius: .75rem;
width: 100%;
max-width: 48rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px #00000040;
transform: scale(.95);
transition: transform .2s ease-in-out;
display: flex;
flex-direction: column;
z-index: 10555 !important
}
@media (min-width:768px) {
.AnnualDIY-grid {
grid-template-columns: repeat(3, 1fr)
}
.AnnualDIY-main-card {
padding: 64px 48px
}
.AnnualDIY-heading {
font-size: 2.5rem
}
.custom-modal {
flex-direction: row;
z-index: 10010 !important
}
}
.custom-modal-overlay.show .custom-modal {
transform: scale(1)
}
.bg-indigo-500 {
background-color: #6366f1
}
.bg-purple-500 {
background-color: #a855f7
}
.bg-orange-500 {
background-color: #f97316
}
.bg-cyan-500 {
background-color: #06b6d4
}
.bg-red-500 {
background-color: #ef4444
}
.bg-pink-600 {
background-color: #db2777
}
.bg-teal-600 {
background-color: #0d9488
}
.bg-blue-600 {
background-color: #2563eb
}
.bg-indigo-800 {
background-color: #3730a3
}
.msb-count-flow-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 40px;
position: relative;
height: 100%
}
.msb-count-flow-list::before {
content: '';
position: absolute;
top: 60px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #3498db 20%, #3498db 80%, transparent);
z-index: -1;
animation: 3s ease-in-out infinite lineFlow
}
.msb-count-flow-card::before,
.msb-count-flow-title::after {
background: linear-gradient(90deg, #3498db, #2980b9);
content: ''
}
@keyframes lineFlow {
0%,
100% {
background: linear-gradient(90deg, transparent, #3498db 20%, #3498db 80%, transparent);
box-shadow: 0 0 0 #3498db00
}
50% {
background: linear-gradient(90deg, transparent, #3498db 20%, #3498db 80%, transparent);
box-shadow: 0 0 15px #3498db80
}
}
.msb-count-flow-item {
position: relative;
opacity: 0;
animation: .8s ease-out forwards fadeIn;
transition: .4s cubic-bezier(.34, 1.56, .64, 1);
display: flex;
height: 100%
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(40px) scale(.9)
}
to {
opacity: 1;
transform: translateY(0) scale(1)
}
}
.msb-count-flow-item:hover {
transform: translateY(-20px)
}
.msb-count-flow-badge {
position: absolute !important;
top: 52px !important;
left: 50% !important;
transform: translateX(-50%) translateY(-30px) !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #3498db, #2980b9) !important;
color: #fff !important;
font-weight: 900 !important;
font-size: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 4px solid #fff !important;
z-index: 20 !important;
box-shadow: 0 8px 25px #3498db66 !important;
transition: .4s cubic-bezier(.34, 1.56, .64, 1) !important;
animation: 2.5s ease-in-out infinite badgeFloat !important
}
@keyframes badgeFloat {
0%,
100% {
transform: translateX(-50%) translateY(-30px) scale(1);
box-shadow: 0 8px 25px #3498db66
}
50% {
transform: translateX(-50%) translateY(-50px) scale(1.05);
box-shadow: 0 15px 40px #3498dbb3
}
}
.msb-count-flow-item:hover .msb-count-flow-badge {
transform: translateX(-50%) translateY(-50px) scale(1.35) !important;
box-shadow: 0 0 0 8px #3498db33 0 15px 50px #3498dbcc !important
}
.msb-count-flow-item:last-child .msb-count-flow-badge {
background: linear-gradient(135deg, #27ae60, #229954) !important;
animation: 2.5s ease-in-out infinite badgeFloatSuccess !important
}
@keyframes badgeFloatSuccess {
0%,
100% {
transform: translateX(-50%) translateY(-30px) scale(1);
box-shadow: 0 8px 25px #27ae6066
}
50% {
transform: translateX(-50%) translateY(-50px) scale(1.05);
box-shadow: 0 15px 40px #27ae60b3
}
}
.msb-count-flow-item:last-child:hover .msb-count-flow-badge {
box-shadow: 0 0 0 8px #27ae6033 0 15px 50px #27ae60cc !important
}
.msb-count-flow-badge svg {
width: 28px;
height: 28px;
filter: drop-shadow(0 2px 4px #0000001a)
}
.msb-count-flow-card {
background-color: #00374a;
border-radius: 16px;
padding: 35px;
margin-top: 50px;
box-shadow: 0 5px 20px #00000014;
border: 2px solid #3498db1a;
position: relative;
overflow: hidden;
transition: .4s cubic-bezier(.34, 1.56, .64, 1)
}
.msb-count-flow-card::before {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
transform: scaleX(0);
transform-origin: left;
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1)
}
.msb-count-flow-item:last-child .msb-count-flow-card::before,
.msb-count-flow-item:last-child .msb-count-flow-title::after {
background: linear-gradient(90deg, #27ae60, #229954)
}
.msb-count-flow-item:hover .msb-count-flow-card {
box-shadow: 0 15px 50px #3498db33;
border-color: #3498db4d;
transform: translateY(-10px)
}
.msb-count-flow-item:last-child:hover .msb-count-flow-card {
box-shadow: 0 15px 50px #27ae6033;
border-color: #27ae604d
}
.msb-count-flow-label {
font-size: 12px;
font-weight: 700;
color: #fff;
letter-spacing: 1px;
margin-bottom: 8px;
display: inline-block;
padding: 5px 12px;
background: #3498db1a;
border-radius: 20px;
animation: .6s ease-out slideIn
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
.msb-count-flow-item:last-child .msb-count-flow-label {
color: #27ae60;
background: #27ae601a
}
.msb-count-flow-title {
color: #fff;
font-size: 22px;
font-weight: 800;
margin: 15px 0;
position: relative;
display: flex;
align-items: center;
gap: 10px
}
.msb-count-flow-title::after {
height: 3px;
width: 0;
border-radius: 2px;
transition: width .5s cubic-bezier(.34, 1.56, .64, 1)
}
.msb-count-flow-item:hover .msb-count-flow-title::after {
width: 40px
}
.msb-count-flow-description {
color: #fff;
font-size: 14px;
line-height: 1.8;
margin: 15px 0 0;
position: relative
}
.msb-count-flow-meta {
color: #888;
font-size: 13px;
margin-top: 15px;
padding-top: 15px;
border-top: 2px dashed #3498db33
}
.msb-count-flow-item:last-child .msb-count-flow-meta {
border-top-color: #27ae6033
}
.msb-count-flow-link {
color: #3498db;
text-decoration: none;
font-weight: 700;
position: relative;
display: inline-block;
transition: .3s
}
.msb-count-flow-item:last-child .msb-count-flow-link {
color: #27ae60
}
.msb-count-flow-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #3498db;
transition: width .3s cubic-bezier(.34, 1.56, .64, 1)
}
.msb-count-flow-item:last-child .msb-count-flow-link::after,
.msb-count-flow-progress-dot.complete {
background: #27ae60
}
.msb-count-flow-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #fff6, transparent);
transition: left .6s;
z-index: 1;
pointer-events: none
}
.msb-count-flow-progress {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 60px;
animation: .8s ease-out .8s backwards fadeInUp
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.msb-count-flow-progress-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #bdc3c7;
transition: .3s;
cursor: pointer
}
.msb-count-flow-progress-dot.active {
background: #3498db;
transform: scale(1.4);
box-shadow: 0 0 15px #3498db99
}
.msb-count-flow-progress-dot:hover {
background: #3498db;
transform: scale(1.3)
}
@media (max-width:768px) {
.remit-money-cards-grid {
grid-template-columns: 1fr;
gap: 20px
}
.msb-count-flow-card,
.remit-money-cards {
padding: 25px
}
.white-core-value-card {
padding: 30px 20px
}
.white-core-value-icon-wrapper {
width: 70px;
height: 70px
}
.white-core-value-icon {
width: 40px;
height: 40px
}
.white-core-value-card-title {
font-size: 1.2rem
}
.ready-to-launch-heading {
font-size: 2.5rem
}
.ready-to-launch-main-card {
padding: 2.5rem 1.5rem
}
.ready-to-launch-features-row {
gap: 2rem
}
.fixed-offer-wrapper,
.msb-count-flow-list::before {
display: none
}
.santa-cap-img {
width: 1.8em
}
.msb-count-flow-header-title {
font-size: 32px
}
.msb-count-flow-list {
grid-template-columns: 1fr;
gap: 15px
}
.msb-count-flow-title {
font-size: 18px
}
.card-title {
font-size: 16px
}
}
@media (max-width:480px) {
.faq-license__title {
font-size: 1.5rem
}
.faq-license__grid {
gap: 16px
}
.faq-license__card {
padding: 16px
}
.raas-simulator .raas-card,
.raas-simulator .raas-section {
padding: 15px
}
.raas-simulator .step-circle {
width: 30px;
height: 30px;
font-size: .9rem
}
.raas-simulator .raas-section-title {
font-size: .95rem
}
.raas-simulator .raas-balance-value {
font-size: 1.3rem
}
.raas-simulator .raas-cta-button {
width: 100%
}
.msb-count-flow-badge {
width: 45px !important;
height: 45px !important;
font-size: 18px !important
}
.msb-count-flow-card {
padding: 20px;
margin-top: 40px
}
.msb-count-flow-title {
font-size: 16px
}
}
.preview-area {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #f8fafc
}
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s
}
.enlarge-btn {
position: absolute;
top: 10px;
right: 10px;
background: #0009;
color: #fff;
width: 32px;
height: 32px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center
}
#webgl-container {
flex-grow: 1;
position: relative
}
.time-display {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -.5px;
color: #000
}
.date-display {
font-size: 10px;
letter-spacing: 2px;
opacity: .6;
color: #000;
font-weight: 500
}
.phone-design-conatiner--modified::after {
content: "";
position: absolute;
bottom: -60px;
left: 0;
width: 100%;
height: 340px;
background-image: url(../img/world-globe.webp);
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
z-index: 0;
pointer-events: none
}
@media only screen and (max-width:991px) {
.country-data-top {
margin-top: 20px
}
.country-header h1 {
color: #6b6b6b;
font-size: 28px
}
.country-data h4 {
font-size: 20px;
color: #000
}
.land-hero h1 {
margin-top: 30px
}
.software-comp h4 {
font-size: 20px
}
.text-video-yt iframe {
width: 100%;
height: 200px
}
.carousel-test-item p {
font-size: 13px
}
.cust-omiz h1 {
font-size: 28px
}
.whats-app-btn {
position: fixed;
bottom: 6%;
z-index: 9;
height: 60px;
float: right;
right: 2%
}
.software-comp {
background-color: #000;
padding: 60px 20px;
border-radius: 20px;
position: relative;
overflow: hidden;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%
}
.software-comp-text a {
color: #fff;
text-decoration: none;
border: 1px solid #d6d6d6;
border-radius: 30px;
padding: 10px 15px;
display: inline-block;
margin-top: 10px;
box-shadow: 0 4px 10px #0006;
position: absolute;
bottom: 30px
}
.countries-main-map-f,
.pricing-slide-desxk {
display: none
}
.country-data-home h4 {
display: flex;
align-items: center;
margin-bottom: 4px;
font-size: 18px
}
.marquee {
margin: 2px
}
.Marquee {
width: 300%
}
.pricing-btn-price-upd {
position: static
}
.fixed-height-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
margin-bottom: 20px
}
.mobile-view-lab,
.phone-design-conatiner--mobile-view,
.pricing-slide-mobile {
display: block
}
.thankyou-text-imp h1 {
font-size: 32px
}
.thankyou-text-imp {
height: 100%
}
.strategy-btn {
background: #377cd5;
padding: 12px;
border-radius: 10px;
color: #fff;
font-size: 12px;
font-weight: 600;
border: none
}
.desktop-view-lab {
display: none !important
}
.app-design-dark,
.app-design-light {
width: 350px
}
.swiper-slide {
transform: scale(.8)
}
.swiper-slide-active {
transform: scale(1)
}
}
.customer-features {
background-color: #001421
}
.customer-features .section-subtitle {
color: #0056d2;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px
}
.customer-features .feature-card {
background: #00374a;
padding: 32px;
border-radius: 18px;
transition: .3s;
border: 1px solid transparent;
height: 100%
}
.customer-features .feature-card:hover {
background: #00374a;
border-color: #dbeafe
}
.customer-features .icon-box {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px
}
.customer-features .feature-title {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 12px
}
.customer-features .feature-text {
color: #fff;
line-height: 1.7
}
.customer-features svg {
width: 24px;
height: 24px
}
.pass-ricing-latest.pricing-title {
color: #fff;
font-size: 36px;
font-weight: 700
}
.pass-ricing-latest.pricing-subtitle {
color: #94a3b8;
font-size: 18px;
max-width: 700px;
margin: 15px auto 0
}
.pass-ricing-latest.pricing-card {
background: #00374a;
border-radius: 16px;
padding: 30px;
border: 1px solid #1e293b;
display: flex;
flex-direction: column;
height: 100%
}
.pass-ricing-latest.pricing-card h3 {
color: #fff;
font-size: 20px;
font-weight: 600
}
.pass-ricing-latest.small-text {
color: #94a3b8;
font-size: 14px;
margin-bottom: 20px
}
.pass-ricing-latest.price {
color: #fff;
font-size: 36px;
font-weight: 700;
margin-bottom: 20px
}
.pass-ricing-latest.from-text,
.pass-ricing-latest.per-text {
font-size: 14px;
color: #94a3b8
}
.pass-ricing-latest.description {
color: #cbd5f5;
font-size: 14px;
margin-bottom: 20px
}
.pass-ricing-latest.feature-list {
list-style: none;
padding: 0;
margin-bottom: 30px
}
.pass-ricing-latest.feature-list li {
display: flex;
align-items: center;
gap: 10px;
color: #cbd5f5;
font-size: 14px;
margin-bottom: 12px
}
.pass-ricing-latest.tier-box {
background: #1e293bb3;
color: #94a3b8;
font-size: 12px;
padding: 8px;
border-radius: 6px;
margin-bottom: 20px
}
.pass-ricing-latest.info-box {
background: #3b82f626;
border: 1px solid #3b82f64d;
color: #bfdbfe;
font-size: 12px;
padding: 12px;
border-radius: 8px
}
.pass-ricing-latest-btn {
background-color: #377cd5;
padding: 14px;
border-radius: 10px;
color: #fff;
font-size: 16px;
font-weight: 600
}
.pass-ricing-latest-btn:hover {
color: #ffff
}
.pass-head-data.paas-badge {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid #377cd5;
background: #38bdf81a;
color: #377cd5;
font-size: 14px;
font-weight: 500;
margin-bottom: 32px;
animation: .6s ease-in-out fadeIn
}
.pass-head-data.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #377cd5;
margin-right: 8px
}
.pass-head-data.badge-text {
line-height: 1
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.Inclusive-Platform-mobile.feature-card {
background: #1e293b80;
padding: 24px;
border-radius: 14px;
transition: background .3s;
height: 100%
}
.Inclusive-Platform-mobile.feature-card:hover {
background: #1e293b
}
.Inclusive-Platform-mobile.icon-box {
width: 40px;
height: 40px;
background: #38bdf833;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px
}
.Inclusive-Platform-mobile h4 {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-bottom: 8px
}
.Inclusive-Platform-mobile p {
color: #94a3b8;
font-size: 14px;
margin: 0
}
.Inclusive-Platform-mobile.top-badge {
position: absolute;
top: 0;
right: 0;
background: #334155;
color: #cbd5f5;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-bottom-left-radius: 10px
}
.Inclusive-Platform-admin.card-box {
padding: 24px;
border-radius: 14px;
border: 1px solid #334155;
transition: .3s;
height: 100%
}
.launches-sup-pill::before,
.you-launch-card::before {
transition: opacity .35s;
content: "";
inset: 0;
position: absolute;
opacity: 0
}
.Inclusive-Platform-admin.card-box:hover {
border-color: #38bdf8;
background: #1e293b4d
}
.Inclusive-Platform-admin.icon-wrap {
margin-bottom: 16px;
color: #38bdf8
}
.Inclusive-Platform-admin h4 {
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px
}
.Inclusive-Platform-admin p {
font-size: 12px;
color: #94a3b8;
margin: 0
}
.Inclusive-Platform-adon-card {
padding: 24px;
border-radius: 12px;
background: linear-gradient(135deg, #1e293b, #0f172a);
border: 1px solid #334155;
gap: 16px
}
.Inclusive-Platform-adon-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2
}
.Inclusive-Platform-adon-title {
font-size: 18px;
font-weight: 700;
color: #fff
}
.Inclusive-Platform-adon-text {
font-size: 14px;
color: #94a3b8;
margin-top: 4px
}
.Inclusive-Platform-adon-note {
font-size: 12px;
margin-top: 6px
}
.Inclusive-Platform-adon-blue {
background: #3b82f633;
color: #60a5fa
}
.Inclusive-Platform-adon-green {
background: #22c55e33;
color: #4ade80
}
.Inclusive-Platform-adon-purple {
background: #a855f733;
color: #c084fc
}
.Inclusive-Platform-adon-pink {
background: #ec489933;
color: #f472b6
}
.Inclusive-Platform-adon-orange {
background: #f9731633;
color: #fb923c
}
.Inclusive-Platform-adon-pink-text {
color: #f472b6
}
.launches-sup,
.you-launch {
background-color: #001421;
color: #fff
}
.you-launch-title {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px
}
.you-launch-subtitle {
color: #9aa4b2;
font-size: 16px
}
.you-launch-card {
height: 100%;
background: #00374a;
border-radius: 18px;
padding: 28px 24px;
transition: .35s;
border: 1px solid #ffffff0d;
position: relative;
overflow: hidden
}
.you-launch-card::before {
background: linear-gradient(120deg, transparent, #4f7cff1f, transparent)
}
.you-launch-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px #00000080;
border-color: #4f7cff66
}
.you-launch-icon {
width: 48px;
height: 48px;
background: #4f7cff26;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px
}
.you-launch-card h5 {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px
}
.you-launch-card p {
font-size: 14px;
color: #b2bccb;
line-height: 1.6
}
.launches-sup-title {
font-size: 34px;
font-weight: 600;
letter-spacing: -.5px
}
.launches-sup-pill {
background: #00374a;
border-radius: 999px;
padding: 14px 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 1px solid #ffffff14;
transition: .35s;
cursor: default;
position: relative;
overflow: hidden
}
.launches-sup-pill::before {
background: linear-gradient(120deg, transparent, #4f7cff2e, transparent)
}
.launches-sup-pill:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px #0009;
border-color: #4f7cff80
}
.launches-sup-pill img {
width: 24px;
height: auto;
border-radius: 3px
}
.launches-sup-pill span {
font-size: 14px;
font-weight: 500;
white-space: nowrap
}
.ad-ready {
background: url(../img/advis-bg-2.webp) bottom;
position: relative;
color: #fff;
overflow: hidden
}
.ad-ready::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, #00000040, #00000073)
}
.ad-ready-title {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: -.8px
}
.ad-ready-subtitle {
font-size: 18px;
color: #e8ecf6;
line-height: 1.6;
margin-bottom: 40px
}
.ad-ready-btn-wrap {
display: flex;
justify-content: center
}
.ad-ready-btn {
background: #fff;
color: #0b3cff;
padding: 16px 36px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: .35s;
box-shadow: 0 10px 30px #00000040
}
.usn-card,
.usn-step {
gap: 18px;
position: relative
}
.ad-ready-btn:hover {
transform: translateY(-4px);
box-shadow: 0 18px 45px #00000073;
color: #0b3cff
}
.ad-ready-arrow {
font-size: 18px;
transition: transform .3s
}
.ad-ready-btn:hover .ad-ready-arrow {
transform: translateX(6px)
}
.ULTIMATE-SAFETY-NET,
.pathways-to-launch {
color: #fff;
position: relative;
z-index: 1
}
.ULTIMATE-SAFETY-NET .usn-badge {
display: inline-block;
background: #3b82f626;
color: #60a5fa;
padding: 8px 18px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 1.5px;
border: 1px solid #60a5fa4d;
animation: .6s ease-out slideInLeft
}
.ULTIMATE-SAFETY-NET .usn-title {
font-size: 3.2rem;
font-weight: 800;
margin-bottom: 25px;
line-height: 1.2;
animation: .7s ease-out .1s both slideInLeft
}
.ULTIMATE-SAFETY-NET .usn-desc {
color: #cbd5e1;
font-size: 17px;
margin-bottom: 40px;
line-height: 1.8;
animation: .8s ease-out .2s both slideInLeft
}
.usn-card {
display: flex;
background: #ffffff08;
border: 1px solid #3b82f633;
padding: 24px;
border-radius: 16px;
margin-bottom: 20px;
transition: .4s cubic-bezier(.4, 0, .2, 1);
overflow: hidden;
animation: .6s ease-out both fadeInUp
}
.usn-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffffff0d, transparent);
transition: left .6s
}
.usn-card:hover {
transform: translateY(-8px);
background: #3b82f614;
border-color: #3b82f666;
box-shadow: 0 20px 40px #3b82f626
}
.usn-highlight {
border-color: #34d39966;
background: #34d3990d
}
.usn-highlight:hover {
background: #34d3991f;
border-color: #34d39999;
box-shadow: 0 20px 40px #34d39926
}
.usn-icon {
width: 50px;
height: 50px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
transition: transform .3s
}
.usn-card:hover .usn-icon {
transform: scale(1.15) rotate(5deg)
}
.bg-blue {
background: #3b82f640;
box-shadow: 0 8px 20px #3b82f633
}
.bg-green {
background: #34d39940;
box-shadow: 0 8px 20px #34d39933
}
.usn-card h5 {
font-size: 17px;
margin-bottom: 10px;
font-weight: 700;
color: #fff
}
.usn-card li,
.usn-card p {
font-size: 15px;
color: #cbd5e1;
line-height: 1.6
}
.usn-card ul {
padding-left: 20px;
margin-bottom: 0
}
.usn-timeline-box {
background: #00374a;
border: 1px solid #3b82f633;
padding: 35px;
border-radius: 20px;
position: relative;
backdrop-filter: blur(10px);
animation: .8s ease-out .2s both slideInRight;
box-shadow: 0 10px 40px #0000004d
}
.pathways-to-launch .ptl-card,
.us-infrastructure .us-card,
.usn-step {
animation: .6s ease-out both fadeInUp
}
.usn-timeline-box h4 {
font-size: 20px;
font-weight: 700;
margin-bottom: 35px;
color: #fff
}
.usn-step {
display: flex;
margin-bottom: 28px
}
.usn-step::before {
content: '';
position: absolute;
left: 15px;
top: 50px;
width: 2px;
height: 40px;
background: linear-gradient(180deg, #3b82f64d 0, transparent 100%)
}
.usn-step span {
width: 40px;
height: 40px;
background: #475569;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
transition: .3s;
border: 2px solid #ffffff1a
}
.usn-step.active span {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
box-shadow: 0 0 20px #2563eb80;
transform: scale(1.1);
border-color: #60a5fa
}
.usn-step.success span {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 0 20px #10b98180;
border-color: #6ee7b7
}
.usn-step h6 {
margin-bottom: 6px;
font-weight: 700;
font-size: 16px;
color: #fff;
transition: color .3s
}
.usn-step p {
font-size: 15px;
color: #cbd5e1;
line-height: 1.6;
margin: 0
}
.us-infrastructure {
color: #fff;
position: relative;
z-index: 1;
padding: 80px 0
}
.us-infrastructure .us-card {
background: #00374a;
border: 1px solid #ffffff14;
border-radius: 22px;
padding: 30px;
height: 100%;
transition: .4s cubic-bezier(.4, 0, .2, 1);
position: relative;
overflow: hidden
}
.us-infrastructure .us-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #3b82f61a 0, transparent 100%);
opacity: 0;
transition: opacity .4s;
border-radius: 22px
}
.us-infrastructure .us-card:hover {
transform: translateY(-12px);
background: #ffffff0d;
border-color: #3b82f666;
box-shadow: 0 20px 50px #3b82f633
}
.us-infrastructure .us-icon {
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
font-size: 28px;
position: relative;
z-index: 2;
transition: .4s;
border: 2px solid #ffffff1a
}
.eb-card,
.pathways-to-launch .ptl-card {
transition: .4s cubic-bezier(.4, 0, .2, 1);
overflow: hidden
}
.us-infrastructure .us-card:hover .us-icon {
transform: translateY(-8px) scale(1.1);
border-color: #ffffff4d
}
.us-infrastructure .indigo {
background: #6366f133
}
.us-infrastructure .indigo:hover {
background: #6366f159;
box-shadow: 0 0 25px #6366f166
}
.eb-travel .eb-icon-box,
.us-infrastructure .blue {
background: #3b82f633
}
.us-infrastructure .blue:hover {
background: #3b82f659;
box-shadow: 0 0 25px #3b82f666
}
.us-infrastructure .teal {
background: #14b8a633
}
.us-infrastructure .teal:hover {
background: #14b8a659;
box-shadow: 0 0 25px #14b8a666
}
.us-infrastructure h4 {
font-size: 19px;
font-weight: 700;
margin-bottom: 14px;
color: #fff;
position: relative;
z-index: 2;
transition: color .3s
}
.eb-card p,
.us-infrastructure p {
font-size: 15px;
color: #cbd5e1;
margin-bottom: 20px;
position: relative;
z-index: 2;
line-height: 1.7
}
.us-infrastructure ul {
padding-left: 0;
list-style: none;
position: relative;
z-index: 2
}
.us-infrastructure ul li {
font-size: 14px;
color: #94a3b8;
margin-bottom: 10px;
display: flex;
align-items: center;
transition: .3s;
padding: 6px 0
}
.us-infrastructure ul li::before {
content: '';
width: 4px;
height: 4px;
background: currentColor;
border-radius: 50%;
margin-right: 10px;
transition: .3s
}
.pathways-to-launch .ptl-card:hover ul li,
.us-infrastructure .us-card:hover ul li {
color: #cbd5e1;
padding-left: 6px
}
.us-infrastructure .us-card:hover ul li::before {
width: 6px;
height: 6px;
margin-right: 8px
}
.pathways-to-launch .ptl-card:hover svg circle,
.pathways-to-launch .ptl-card:hover svg line,
.pathways-to-launch .ptl-card:hover svg path,
.pathways-to-launch .ptl-card:hover svg rect,
.us-infrastructure .us-card:hover svg circle,
.us-infrastructure .us-card:hover svg path,
.us-infrastructure .us-card:hover svg rect {
filter: brightness(1.3)
}
.pathways-to-launch .ptl-card {
background: #00374a;
border: 1.5px solid #ffffff14;
border-radius: 26px;
padding: 36px;
height: 100%;
display: flex;
flex-direction: column;
position: relative
}
.pathways-to-launch .ptl-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #3b82f61a 0, transparent 100%);
opacity: 0;
transition: opacity .4s;
border-radius: 26px
}
.pathways-to-launch .ptl-card:hover {
transform: translateY(-12px);
background: #ffffff0d;
border-color: #3b82f666;
box-shadow: 0 25px 50px #3b82f626
}
.pathways-to-launch .ptl-startup:hover {
border-color: #2563eb99;
box-shadow: 0 25px 50px #2563eb26
}
.pathways-to-launch .ptl-expander:hover {
border-color: #ffffff4d;
box-shadow: 0 25px 50px #ffffff1a
}
.pathways-to-launch .ptl-icon {
width: 70px;
height: 70px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 28px;
position: relative;
z-index: 2;
transition: .4s;
border: 2px solid #ffffff1a
}
.pathways-to-launch .ptl-card:hover .ptl-icon {
transform: translateY(-12px) scale(1.15);
border-color: #ffffff4d
}
.pathways-to-launch .ptl-icon.blue {
background: linear-gradient(135deg, #2563eb4d, #3b82f633)
}
.pathways-to-launch .ptl-icon.light {
background: #ffffff14
}
.pathways-to-launch .ptl-startup:hover .ptl-icon {
box-shadow: 0 0 25px #2563eb66
}
.pathways-to-launch .ptl-expander:hover .ptl-icon {
box-shadow: 0 0 25px #ffffff4d
}
.pathways-to-launch h4 {
font-size: 24px;
font-weight: 800;
margin-bottom: 18px;
position: relative;
z-index: 2;
color: #fff;
transition: color .3s
}
.pathways-to-launch .ptl-expander:hover h4 {
color: #f5f5f5
}
.pathways-to-launch p {
font-size: 15px;
color: #cbd5e1;
margin-bottom: 16px;
position: relative;
z-index: 2;
line-height: 1.7;
transition: color .3s
}
.eb-card:hover .eb-feature-item p,
.pathways-to-launch .ptl-card:hover p {
color: #e2e8f0
}
.pathways-to-launch ul {
list-style: none;
padding-left: 0;
margin-bottom: 28px;
position: relative;
z-index: 2
}
.pathways-to-launch ul li {
font-size: 15px;
color: #94a3b8;
margin-bottom: 12px;
display: flex;
align-items: center;
transition: .3s;
padding: 8px 0
}
.pathways-to-launch ul li::before {
content: '✓';
width: 20px;
height: 20px;
background: #3b82f633;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
color: #60a5fa;
font-size: 12px;
font-weight: 700;
transition: .3s;
flex-shrink: 0
}
.pathways-to-launch .ptl-startup ul li::before {
background: #2563eb33;
color: #3b82f6
}
.pathways-to-launch .ptl-card:hover ul li::before {
background: #3b82f666;
transform: scale(1.15)
}
.pathways-to-launch .ptl-btn {
margin-top: auto;
padding: 14px 28px;
border-radius: 14px;
font-size: 14px;
font-weight: 700;
border: none;
cursor: pointer;
transition: .3s cubic-bezier(.4, 0, .2, 1);
position: relative;
z-index: 2;
letter-spacing: .5px;
overflow: hidden
}
svg circle,
svg line,
svg path,
svg rect {
transition: .4s
}
.ecosystem-builder {
position: relative;
overflow: hidden;
color: #fff
}
.ecosystem-builder::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, #3b82f626 0, transparent 70%);
border-radius: 50%;
animation: 8s ease-in-out infinite float
}
.ecosystem-builder::after {
content: '';
position: absolute;
bottom: -30%;
left: -5%;
width: 500px;
height: 500px;
background: radial-gradient(circle, #10b9811a 0, transparent 70%);
border-radius: 50%;
animation: 10s ease-in-out infinite reverse float
}
.eb-card::before,
.eb-cta-box::before {
left: 0;
opacity: 0;
transition: opacity .4s;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0
}
@keyframes float {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(30px)
}
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.ecosystem-builder-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1
}
.eb-badge {
display: inline-block;
padding: 8px 16px;
background: #10b98133;
color: #10b981;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
margin-bottom: 24px;
border: 1px solid #10b98166;
letter-spacing: 1.2px;
animation: .6s ease-out slideInDown
}
.eb-card h3,
.eb-cta-title {
font-weight: 800;
color: #fff
}
.ecosystem-builder-cards {
position: relative;
z-index: 1;
margin-bottom: 60px
}
.eb-card h3,
.eb-features,
.eb-icon-box {
z-index: 2;
position: relative
}
.eb-card {
background: #00374a;
border: 1.5px solid #ffffff14;
border-radius: 24px;
padding: 32px;
height: 100%;
position: relative;
animation: .6s ease-out both fadeInUp
}
.eb-card::before {
background: linear-gradient(135deg, transparent 0, #ffffff0d 100%)
}
.eb-card:hover {
transform: translateY(-12px);
background: #ffffff0a;
box-shadow: 0 25px 50px #0000004d
}
.eb-card.eb-travel:hover,
.eb-cta-box:hover {
border-color: #3b82f666;
box-shadow: 0 25px 50px #3b82f626
}
.eb-card.eb-community:hover {
border-color: #ef444466;
box-shadow: 0 25px 50px #ef444426
}
.eb-card.eb-superapp:hover {
border-color: #10b98166;
box-shadow: 0 25px 50px #10b98126
}
.eb-icon-box {
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: .4s;
border: 2px solid #ffffff1a
}
.eb-card:hover .eb-icon-box {
transform: translateY(-10px) scale(1.1);
border-color: #ffffff4d
}
.eb-community .eb-icon-box {
background: #ef444433
}
.eb-superapp .eb-icon-box {
background: #10b98133
}
.eb-card.eb-travel:hover .eb-icon-box {
box-shadow: 0 0 25px #3b82f666
}
.eb-card.eb-community:hover .eb-icon-box {
box-shadow: 0 0 25px #ef444466
}
.eb-card.eb-superapp:hover .eb-icon-box {
box-shadow: 0 0 25px #10b98166
}
.eb-travel .eb-feature-item svg,
.eb-travel .eb-icon-box svg {
color: #3b82f6
}
.eb-community .eb-feature-item svg,
.eb-community .eb-icon-box svg {
color: #ef4444
}
.eb-superapp .eb-feature-item svg,
.eb-superapp .eb-icon-box svg {
color: #10b981
}
.eb-card h3 {
font-size: 20px;
margin-bottom: 16px;
transition: color .3s
}
.eb-superapp:hover h3 {
color: #6ee7b7
}
.eb-features {
background: #0f172acc;
padding: 16px;
border-radius: 16px
}
.eb-feature-item {
display: flex;
gap: 12px;
margin-bottom: 12px;
align-items: flex-start
}
.eb-feature-item svg {
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
transition: .3s
}
.eb-feature-item p {
font-size: 14px;
font-weight: 700;
color: #cbd5e1;
margin-bottom: 0;
transition: color .3s
}
.eb-cta-box {
background: #00374a;
border: 1.5px solid #3b82f633;
border-radius: 28px;
padding: 48px 32px;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 40px;
animation: .8s ease-out .6s both fadeInUp;
z-index: 1
}
.eb-cta-box::before {
background: linear-gradient(135deg, #3b82f61a 0, transparent 100%)
}
.eb-cta-title {
font-size: 2.2rem;
margin-bottom: 16px;
position: relative;
z-index: 2
}
.eb-cta-desc {
font-size: 16px;
color: #94a3b8;
margin-bottom: 28px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.8;
position: relative;
z-index: 2
}
.eb-btn {
padding: 14px 36px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border: none;
border-radius: 16px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: .3s cubic-bezier(.4, 0, .2, 1);
position: relative;
z-index: 2;
letter-spacing: .5px;
overflow: hidden
}
.eb-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #fff3;
transition: left .4s;
border-radius: 16px;
z-index: -1
}
.eb-btn:hover {
background: linear-gradient(135deg, #1d4ed8, #1e40af);
box-shadow: 0 15px 35px #2563eb4d;
transform: translateY(-2px)
}
@media (max-width:991px) {
.white-label-video {
min-height: 600px;
padding: 40px 0
}
.ULTIMATE-SAFETY-NET .usn-title,
.eb-title,
.pathways-to-launch .ptl-title,
.us-infrastructure .us-title {
font-size: 2.2rem
}
.usn-timeline-box {
margin-top: 40px
}
.ecosystem-builder,
.pathways-to-launch,
.us-infrastructure {
padding: 60px 0
}
}
.thank-banner-container {
padding: 24px 15px 0
}
.thank-banner-content {
display: flex;
align-items: flex-start;
gap: 12px
}
@media (min-width:576px) {
.thank-banner-content {
align-items: center
}
}
.thank-banner-icon {
background-color: #d1fae5;
padding: 10px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center
}
.thank-banner-title {
color: #00db9d;
font-weight: 600;
font-size: 18px;
margin: 0 0 4px
}
.thank-banner-subtitle {
color: #00db9d;
font-size: 14px;
margin: 0
}
.thank-banner-check-icon {
color: #16a34a
}
.thank-sec-heading {
font-size: 38px;
font-weight: 700;
color: #fff;
margin-bottom: 16px
}
.thank-sec-lead {
font-size: 18px;
color: #fff;
line-height: 1.6
}
.thank-sec-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
margin: 32px 0
}
.thank-sec-card-title {
font-weight: 600;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px
}
.thank-sec-icon-warning {
color: #f59e0b
}
.thank-sec-option {
display: flex;
gap: 16px;
padding: 16px;
border-radius: 10px;
margin-bottom: 12px
}
.thank-sec-option-blue {
background: #eff6ff;
border: 1px solid #dbeafe
}
.thank-sec-option-purple {
background: #f5f3ff;
border: 1px solid #ede9fe
}
.thank-sec-option h4 {
font-size: 16px;
margin-bottom: 4px
}
.thank-sec-option p {
font-size: 14px;
color: #6b7280
}
.thank-sec-quote {
border-left: 4px solid #d1d5db;
padding-left: 16px;
display: flex;
gap: 12px;
font-style: italic;
color: #fff
}
.thank-sec-footer-text {
color: #fff;
font-size: 1rem;
font-weight: 400
}
.thank-sec-footer-subtext {
color: #fff;
line-height: 1.6;
font-size: 22px
}
.animate-fade-in {
animation: .5s ease-out forwards fadeIn
}
.math-box {
background: #1e293b;
border-radius: 12px;
padding: 14px 16px;
color: #cbd5f5;
font-size: .85rem;
transition: .3s;
cursor: pointer
}
.math-box:hover {
background: #0f172a;
border-color: #38bdf866;
box-shadow: 0 8px 20px #38bdf826
}
.math-icon {
color: #94a3b8;
transition: color .3s
}
.math-box:hover .math-icon {
color: #38bdf8
}
.math-text strong {
color: #38bdf8;
font-weight: 600
}
.math-note {
display: block;
margin-top: 4px;
font-size: .72rem;
color: #facc15;
opacity: .85
}
.pass-pricing-last-step {
background-color: #00374a;
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
padding: 8px 12px
}
.pass-pricing-last-card {
background: #00374a;
backdrop-filter: blur(12px);
border: 1px solid #ffffff1a;
border-radius: 30px
}
.pass-pricing-last-info {
color: #fff;
transition: .3s
}
.pass-pricing-last-info:hover {
color: #007bff
}
.pass-pricing-last-check {
color: #007bff;
font-size: 18px
}
.pass-pricing-last-price {
font-size: 3rem;
font-weight: 900
}
.pass-pricing-last-btn {
background-color: #377cd5;
color: #fff;
padding: 12px 40px;
border-radius: 10px;
font-weight: 700;
transition: .3s
}
.pass-pricing-last-desc-card {
background: #00374a;
border: 1px solid #ffffff14;
border-radius: 20px;
backdrop-filter: blur(10px);
transition: .3s
}
.pass-pricing-last-desc-card:hover {
transform: translateY(-5px);
border-color: #007bff
}
.pass-pricing-last-desc-pill {
display: inline-block;
padding: 4px 12px;
font-size: 11px;
border-radius: 20px;
background: #007bff1a;
color: #377cd5;
font-weight: 600
}
.pass-pricing-last-desc-highlight {
border: 1px solid #007bff66;
box-shadow: 0 10px 25px #007bff26
}
.pass-pricing-last-desc-badge {
position: absolute;
top: 0;
right: 0;
background: #377cd5;
color: #fff;
font-size: 10px;
padding: 5px 10px;
border-bottom-left-radius: 10px
}
.pass-pricing-last-desc-optional {
font-size: 11px;
background: #ffffff1a;
padding: 4px 10px;
border-radius: 15px
}
.pass-pricing-last-desc-tier {
background: #ffffff0d;
border: 1px solid #ffffff1a;
border-radius: 12px;
transition: .3s
}
.pass-pricing-last-desc-tier:hover {
border-color: #007bff;
background: #007bff1a
}
.pass-pricing-last-desc-line,
.pass-pricing-last-desc-overage {
border-top: 1px solid #ffffff1a
}
.pass-pricing-last-desc-line {
margin: 0
}
.pass-pricing-last-desc-divider-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #0a1929;
padding: 2px 10px;
font-size: 10px;
color: #fff;
letter-spacing: 1px;
border-radius: 20px
}
.pass-pricing-last-desc-free {
color: #28a745;
font-size: 12px;
font-weight: 600
}
.pass-pricing-last-desc-overage-text {
color: #fff;
font-size: 12px
}
.pass-pricing-last-desc-hours {
color: #4da3ff;
font-size: 12px;
font-weight: 500
}
@media (max-width:768px) {
.ULTIMATE-SAFETY-NET .usn-title,
.eb-title,
.pathways-to-launch .ptl-title,
.us-infrastructure .us-title {
font-size: 1.8rem
}
.usn-card {
padding: 18px
}
.usn-timeline-box {
padding: 25px
}
.us-infrastructure .us-card {
padding: 24px
}
.pathways-to-launch .ptl-card {
padding: 28px
}
.pathways-to-launch .ptl-icon {
width: 60px;
height: 60px
}
.eb-card {
padding: 24px;
margin-bottom: 20px
}
.eb-cta-box {
padding: 32px 24px
}
.eb-cta-title {
font-size: 1.6rem
}
.thank-sec-heading {
font-size: 22px
}
.thank-sec-card-title,
.thank-sec-footer-subtext,
.thank-sec-lead {
font-size: 16px
}
.thank-sec-card-text {
font-size: 12px;
margin-bottom: 15px
}
.calci-fo {
font-size: 20px;
text-align: center
}
.calci-fo-top {
font-size: 18px;
text-align: center
}
.price-text-forhead {
font-size: 24px
}
}
.lifecycle-of-effort-timeline {
position: relative;
padding-left: 60px
}
.lifecycle-of-effort-timeline::before {
content: "";
position: absolute;
left: 22px;
top: 0;
bottom: 0;
width: 2px;
background: #ffffff1a
}
.lifecycle-of-effort-item {
position: relative;
margin-bottom: 50px
}
.lifecycle-of-effort-number {
position: absolute;
left: -58px;
top: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: #0a1929;
border: 2px solid #007bff;
color: #007bff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
z-index: 2
}
.lifecycle-of-effort-number.secondary {
border-color: #6c757d;
color: #6c757d
}
.lifecycle-of-effort-number.danger {
border-color: #dc3545;
color: #dc3545;
box-shadow: 0 0 15px #dc35454d
}
.lifecycle-of-effort-card {
background: #ffffff0a;
border: 1px solid #ffffff14;
border-radius: 15px;
padding: 25px;
transition: .3s
}
.lifecycle-of-effort-card:hover {
border-color: #007bff;
transform: translateY(-4px)
}
.lifecycle-of-effort-card.danger-card {
background: #dc35450d;
border: 1px solid #dc354533
}
@media (max-width:767px) {
.custom-next,
.custom-prev {
width: 90px;
height: 42px;
font-size: 12px
}
.ad-ready-subtitle,
.custom-next::after,
.custom-next::before,
.custom-prev::before {
font-size: 16px
}
.app-design-fl {
gap: 0 !important
}
.ad-ready-title {
font-size: 34px
}
.lifecycle-of-effort-timeline {
padding-left: 45px
}
.lifecycle-of-effort-number {
left: -40px;
width: 38px;
height: 38px;
font-size: 14px
}
}
.toc {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-left: 4px solid #c6a54b;
border-radius: 0 8px 8px 0;
padding: 28px 32px;
margin-bottom: 48px;
box-shadow: 0 4px 12px #0000000d
}
.toc-title {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 700;
color: #0b1f3a;
margin-bottom: 16px
}
.toc ol {
list-style: none;
counter-reset: toc-counter;
padding: 0;
margin: 0
}
.toc li {
counter-increment: toc-counter;
margin-bottom: 10px;
display: flex;
align-items: center
}
.toc li::before {
content: counter(toc-counter, decimal-leading-zero);
font-weight: 700;
color: #c6a54b;
font-size: 13px;
min-width: 24px
}
.toc a {
color: #374151;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: all .3s ease
}
.toc a:hover {
color: #a8842a;
padding-left: 4px
}
.article-body h2 {
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
color: #0b1f3a;
margin: 56px 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
line-height: 1.3
}
.article-body h3 {
font-size: clamp(18px, 2.5vw, 22px);
font-weight: 600;
color: #122b52;
margin: 36px 0 14px;
line-height: 1.35
}
.article-body h4 {
font-size: 17px;
font-weight: 700;
color: #1f2937;
margin: 28px 0 10px
}
.article-body p {
margin-bottom: 20px;
max-width: 760px;
color: #374151;
line-height: 1.7
}
.article-body ul,
.article-body ol {
margin: 0 0 24px;
padding-left: 24px;
max-width: 760px
}
.article-body li {
margin-bottom: 8px;
padding-left: 4px
}
.article-body li::marker {
color: #c6a54b;
font-weight: 700
}
.article-body strong {
color: #0b1f3a
}
.infographic-wrapper {
margin: 40px -40px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
overflow: hidden
}
.infographic-caption {
text-align: center;
font-size: 13px;
color: #6b7280;
margin-top: 12px;
font-style: italic
}
.callout-box {
background: linear-gradient(135deg, #fefcf3 0%, #fff9eb 100%);
border-left: 4px solid #c6a54b;
border-radius: 0 10px 10px 0;
padding: 24px 28px;
margin: 32px 0
}
.callout-box.blue {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f2fd 100%);
border-left-color: #1d4ed8
}
.callout-box.red {
background: linear-gradient(135deg, #fef5f5 0%, #fdeaea 100%);
border-left-color: #dc2626
}
.callout-box.green {
background: linear-gradient(135deg, #f0faf4 0%, #e6f7ed 100%);
border-left-color: #15803d
}
.callout-title {
font-weight: 700;
font-size: 16px;
color: #0b1f3a;
margin-bottom: 8px
}
.callout-box p {
margin-bottom: 8px;
font-size: 15.5px
}
.callout-box p:last-child {
margin-bottom: 0
}
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 36px 0
}
.stat-card {
background: #0b1f3a;
border-radius: 10px;
padding: 24px 20px;
text-align: center
}
.stat-number {
font-size: 36px;
font-weight: 800;
color: #c6a54b;
margin-bottom: 6px
}
.stat-label {
font-size: 13.5px;
color: #ffffffbf
}
.pill-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 24px
}
.pill {
padding: 6px 16px;
border-radius: 20px;
font-size: 13.5px;
font-weight: 500;
background: #fff3cd;
color: #856404;
border: 1px solid #f0d78c
}
.pill.new {
background: #ffe0b2;
color: #bf360c;
border-color: #f4a940;
font-weight: 700
}
.pill.progress {
background: #d4edda;
color: #155724;
border-color: #a3d9b1;
height: 100%
}
.pill.deferred {
background: #f3f4f6;
color: #6b7280;
border-color: #d1d5db;
font-style: italic
}
.pill.black {
background: #fde8e8;
color: #991b1b;
border-color: #e8a0a0;
font-weight: 700
}
.checklist-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
padding: 10px 14px;
background: #f9fafb;
border-radius: 6px;
border: 1px solid #e5e7eb;
font-size: 15px
}
.checklist-item::before {
content: "☐";
font-size: 16px;
color: #c6a54b
}
.sources {
background: #f9fafb;
border-radius: 10px;
padding: 28px 32px;
margin: 48px 0 40px;
border: 1px solid #e5e7eb
}
.sources li {
font-size: 14px;
color: #6b7280;
margin-bottom: 6px;
padding-left: 18px;
position: relative
}
.sources li::before {
content: "→";
position: absolute;
left: 0;
color: #c6a54b;
font-weight: 700
}
.sources a {
color: #1d4ed8
}
.cta-banner {
background: linear-gradient(135deg, #0b1f3a 0%, #122b52 100%);
border-radius: 14px;
padding: 48px 40px;
text-align: center;
margin: 56px 0 48px;
position: relative;
overflow: hidden
}
.cta-banner h3 {
color: #fff;
font-size: 24px;
margin-bottom: 12px
}
.cta-banner p {
color: #ffffffb3;
margin-bottom: 24px;
font-size: 15.5px;
max-width: 540px;
margin-left: auto;
margin-right: auto
}
.cta-btn {
display: inline-block;
background: #377cd5;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
font-weight: 700;
font-size: 15px;
transition: .25s ease
}
.cta-btn:hover {
color: #fff
}
.related-section {
margin: 48px 0 64px
}
.related-section h3 {
font-size: 22px;
color: #0b1f3a;
margin-bottom: 24px
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px
}
.related-card {
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
transition: .2s ease
}
.related-card:hover {
box-shadow: 0 8px 24px #00000014;
transform: translateY(-2px)
}
.related-card-img {
height: 160px;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px
}
.related-card-body {
padding: 18px 20px
}
.related-card-body h4 {
font-size: 15px;
font-weight: 600;
color: #fff;
margin-bottom: 8px
}
.related-card-body a {
font-size: 13.5px;
font-weight: 600;
color: #fff
}
.phase-header {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px
}
.phase-badge {
display: inline-block;
padding: 5px 14px;
border-radius: 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: #fff
}
.phase-badge.immediate {
background: #dc2626
}
.phase-badge.short {
background: #c6a54b
}
.phase-badge.medium {
background: #15803d
}
.phase-title {
font-weight: 700;
font-size: 16px;
color: #fff
}
.note-box {
background: #f0f7ff;
border-left: 4px solid #4688f4;
border-radius: 0 8px 8px 0;
padding: 16px 20px;
margin: 24px 0;
font-size: 15px;
color: #1a1a1a;
line-height: 1.65;
font-family: Inter, sans-serif
}
.infographic-wrap {
margin: 28px 0 4px;
border-radius: 10px;
overflow: hidden
}
.infographic-caption {
font-size: 12px;
color: #75839a;
text-align: center;
font-style: italic;
margin-bottom: 30px;
font-family: Inter, sans-serif
}
.ig-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #002a45;
border-radius: 10px;
overflow: hidden
}
.ig-stat-card {
padding: 28px 18px;
text-align: center;
border-right: 1px solid #ffffff1a
}
.ig-stat-card:last-child {
border-right: none
}
.ig-stat-card .stat-number {
display: block;
font-size: 2rem;
font-weight: 800;
color: #4688f4;
line-height: 1;
font-family: Inter, sans-serif
}
.ig-stat-card .stat-label {
display: block;
font-size: 12px;
color: #ffffffb8;
margin-top: 6px;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: .5px;
font-family: Inter, sans-serif
}
.ig-risk-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-radius: 10px;
overflow: hidden
}
.ig-risk-card {
padding: 24px 12px 20px;
text-align: center
}
.ig-risk-card:nth-child(1) {
background: #0d1b2a
}
.ig-risk-card:nth-child(2) {
background: #0d3b66
}
.ig-risk-card:nth-child(3) {
background: #004aad
}
.ig-risk-card:nth-child(4) {
background: #1b6ca8
}
.ig-risk-card:nth-child(5) {
background: #2e86c1
}
.ig-risk-card .risk-num {
font-size: 24px;
font-weight: 800;
color: #fff3;
display: block;
line-height: 1;
margin-bottom: 8px;
font-family: Inter, sans-serif
}
.ig-risk-card .risk-icon {
font-size: 20px;
margin-bottom: 8px;
display: block
}
.ig-risk-card .risk-title {
font-size: 11px;
font-weight: 700;
color: #fff;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: .3px;
font-family: Inter, sans-serif
}
.ig-table-wrap {
border-radius: 10px;
overflow: hidden;
border: 1px solid #d0e4f5
}
.ig-table {
width: 100%;
border-collapse: collapse;
font-family: Inter, sans-serif;
font-size: 14px
}
.ig-table thead th {
background: #002a45;
color: #fff;
padding: 12px 16px;
font-weight: 700;
font-size: 13px;
text-align: left
}
.ig-table tbody tr:nth-child(odd) td {
background: #f0f7ff
}
.ig-table tbody tr:nth-child(even) td {
background: #fff
}
.ig-table tbody td {
padding: 11px 16px;
border-bottom: 1px solid #e0eaf5;
color: #1a1a1a;
vertical-align: top;
line-height: 1.55
}
.ig-table tbody td:first-child {
font-weight: 700;
color: #004aad
}
.ig-reg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 10px;
overflow: hidden;
gap: 1px;
background: #0000001f
}
.ig-reg-card {
padding: 20px 22px
}
.ig-reg-card:nth-child(odd) {
background: #004aad
}
.ig-reg-card:nth-child(even) {
background: #074872
}
.ig-reg-card .reg-country {
font-size: 12px;
font-weight: 800;
color: #a8d4ff;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
font-family: Inter, sans-serif;
display: flex;
align-items: center;
gap: 6px
}
.ig-reg-card p {
font-size: 13px;
color: #ffffffd9;
margin: 0;
line-height: 1.6
}
.ig-steps-wrap {
border-radius: 10px;
overflow: hidden
}
.ig-step-row {
display: flex;
align-items: stretch;
border-bottom: 1px solid #ffffff14
}
.ig-step-row:last-child {
border-bottom: none
}
.ig-step-row:nth-child(odd) .ig-step-num {
background: #002a45
}
.ig-step-row:nth-child(even) .ig-step-num {
background: #074872
}
.ig-step-row:nth-child(odd) .ig-step-title {
background: #0d3b66
}
.ig-step-row:nth-child(even) .ig-step-title {
background: #1b4f8a
}
.ig-step-row:nth-child(odd) .ig-step-body {
background: #f0f7ff
}
.ig-step-row:nth-child(even) .ig-step-body {
background: #fff
}
.ig-step-num {
min-width: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: #ffffff4d;
flex-shrink: 0;
font-family: Inter, sans-serif
}
.ig-step-title {
min-width: 185px;
padding: 13px 14px;
font-size: 11px;
font-weight: 700;
color: #fff;
line-height: 1.4;
display: flex;
align-items: center;
flex-shrink: 0;
font-family: Inter, sans-serif;
text-transform: uppercase;
letter-spacing: .4px
}
.ig-step-body {
padding: 13px 18px;
font-size: 13px;
color: #1a1a1a;
line-height: 1.55;
display: flex;
align-items: center;
font-family: Inter, sans-serif;
border-left: 1px solid #d0e4f5
}
.summary-box {
padding: 18px 22px;
background: #2c3039;
border-radius: 10px;
font-style: italic;
margin: 24px 0;
color: #fff;
font-size: 15px;
line-height: 1.65;
font-family: Inter, sans-serif
}
.infographic-wrap img {
width: 100%;
display: block
}
.stat-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 32px 0
}
.stat-card {
background: #1e1e2f;
border-radius: 10px;
padding: 24px;
text-align: center;
transition: transform .3s ease, box-shadow .3s ease
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px #0003
}
.stat-card .stat-value {
font-size: 2rem;
font-weight: 700;
margin-bottom: 4px;
line-height: 1.2
}
.stat-card .stat-label {
font-size: .85rem;
color: #b0b3c0;
line-height: 1.4
}
.stat-card .stat-source {
font-size: .72rem;
color: #7a7d8c;
margin-top: 8px
}
.stat-card.card-red .stat-value {
color: #ef4444
}
.stat-card.card-amber .stat-value {
color: #f59e0b
}
.stat-card.card-cyan .stat-value {
color: #06b6d4
}
.callout-box {
background: #F7FAFC;
border-left: 4px solid #06B6D4;
padding: 24px 28px;
margin: 32px 0;
border-radius: 0 8px 8px 0
}
.callout-box.callout-danger {
border-left-color: #EF4444;
background: #FFF5F5
}
.callout-box p {
margin-bottom: 0;
font-size: 1.05rem;
line-height: 1.6;
color: #000
}
.callout-box p strong {
color: #111827
}
.blog-container ul.blog-sec-layout {
list-style: none;
padding-left: 0;
margin-bottom: 24px
}
.blog-container ul.blog-sec-layout li {
position: relative;
padding-left: 28px;
margin-bottom: 16px;
font-size: 1.05rem;
line-height: 1.7;
color: #374151
}
.blog-container ul.blog-sec-layout li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 10px;
height: 10px;
background: #06B6D4;
border-radius: 2px;
transform: rotate(45deg)
}
.blog-container ul.blog-sec-layout li strong {
color: #111827
}
.blog-container ul.failure-list {
list-style: none;
padding-left: 0;
margin-bottom: 24px
}
.blog-container ul.failure-list li {
position: relative;
padding-left: 32px;
margin-bottom: 14px;
font-size: 1.05rem;
line-height: 1.7;
color: #374151
}
.blog-container ul.failure-list li::before {
content: "✕";
position: absolute;
left: 4px;
top: 0;
color: #EF4444;
font-weight: 700;
font-size: 1.1rem
}
.blog-container ul.feature-list {
list-style: none;
padding-left: 0;
margin-bottom: 24px
}
.blog-container ul.feature-list li {
position: relative;
padding-left: 32px;
margin-bottom: 20px;
font-size: 1.05rem;
line-height: 1.7;
color: #fff
}
.blog-container ul.feature-list li::before {
content: "";
position: absolute;
left: 2px;
top: 10px;
width: 12px;
height: 12px;
background: #06B6D4;
border-radius: 2px;
transform: rotate(45deg)
}
.blog-container ul.feature-list li strong {
color: #111827;
display: block;
font-size: 1.08rem;
margin-bottom: 2px
}
.source-box {
background: #F1F5F9;
border-radius: 10px;
padding: 28px 32px;
margin-top: 48px
}
.source-box h3 {
font-size: 1rem;
font-weight: 600;
color: var(--rs-heading);
margin-top: 0;
margin-bottom: 16px
}
.source-box ol {
padding-left: 20px;
margin-bottom: 0
}
.source-box ol li {
font-size: .88rem;
color: var(--rs-muted);
margin-bottom: 8px;
line-height: 1.5
}
.source-box ol li a {
color: var(--rs-blue);
text-decoration: none
}
.source-box ol li a:hover {
text-decoration: underline
}
@media (max-width: 768px) {
.stat-cards {
grid-template-columns: 1fr
}
}
.infographic-wrap {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 36px 32px;
margin: 38px 0 10px;
box-shadow: 0 4px 22px #0000000d;
overflow-x: auto
}
.ig-title {
font-family: 'Syne', sans-serif;
font-size: 12.5px;
font-weight: 800;
color: #718096;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
margin-bottom: 28px
}
.infographic-caption {
font-size: 13px;
color: var(--text-light);
text-align: center;
font-style: italic;
margin-top: 4px;
margin-bottom: 38px
}
.ig-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px
}
.ig-compare-col {
border-radius: 12px;
padding: 22px 20px
}
.ig-compare-col.red-side {
background: #dc30300d;
border: 1px solid #dc303033;
border-top: 3px solid #e03030
}
.ig-compare-col.blue-side {
background: #1a6bdc0d;
border: 1px solid #1a6bdc33;
border-top: 3px solid #1a6bdc
}
.ig-col-header {
font-family: 'Syne', sans-serif;
font-size: 14px;
font-weight: 800;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px
}
.ig-col-header.red {
color: #c83232e6
}
.ig-col-header.blue {
color: #1a6bdce6
}
.ig-compare-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 8px;
font-size: 14.5px;
line-height: 1.5
}
.ig-compare-item.red-item {
background: #dc30300f;
border: 1px solid #dc30301f;
color: #5a1a1a
}
.ig-compare-item.blue-item {
background: #1a6bdc12;
border: 1px solid #1a6bdc21;
color: #1a3260
}
.cmp-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
font-size: 11px;
font-weight: 900
}
.cmp-icon.x {
background: #dc303026;
color: #e03030
}
.cmp-icon.chk {
background: #1a6bdc26;
color: #1a6bdc
}
.ig-prob-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px
}
.ig-prob-card {
background: linear-gradient(160deg, #06182e, #0c2244);
border: 1px solid #dc303033;
border-top: 2px solid #dc303080;
border-radius: 12px;
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 8px
}
.prob-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #dc30301f;
border: 1px solid #dc303038;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.prob-card-title {
font-size: 15px;
font-weight: 800;
color: #ff8c8cf2;
line-height: 1.25
}
.prob-card-body {
font-size: 13.5px;
color: #c8aaaaa6;
line-height: 1.5
}
.ig-pillar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px
}
.ig-pillar-card {
background: linear-gradient(160deg, #061828, #0a2040);
border: 1px solid #1a6bdc38;
border-top: 2px solid #1a6bdc8c;
border-radius: 14px;
padding: 22px 16px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center
}
.pillar-num {
font-size: 10.5px;
font-weight: 800;
color: #5baeff80;
letter-spacing: .12em
}
.pillar-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: #1a6bdc24;
border: 1px solid #5baeff38;
display: flex;
align-items: center;
justify-content: center;
color: #42629c;
}
.pillar-title {
font-size: 13.5px;
font-weight: 700;
color: #e0ecff;
line-height: 1.35
}
.ig-table-wrap {
overflow-x: auto
}
.ig-table {
width: 100%;
border-collapse: collapse;
font-size: 15px
}
.ig-table thead {
background: linear-gradient(90deg, #061828, #0a2040)
}
.ig-table thead th {
padding: 14px 18px;
text-align: left;
font-family: 'Syne', sans-serif;
font-size: 12.5px;
font-weight: 700;
color: #96c8ffe6;
letter-spacing: .06em;
text-transform: uppercase;
border-bottom: 2px solid #5baeff47
}
.ig-table tbody tr {
border-bottom: 1px solid var(--border)
}
.ig-table tbody tr:hover {
background: #1a6bdc06
}
.ig-table tbody td {
padding: 14px 18px;
color: #2d3748;
font-size: 15px;
line-height: 1.6;
vertical-align: top
}
.ig-table tbody td:first-child {
font-weight: 600;
color: var(--navy)
}
.tag-red {
display: inline-block;
background: #dc303014;
border: 1px solid #dc303033;
color: #c02020;
border-radius: 5px;
padding: 2px 8px;
font-size: 12px;
font-weight: 700
}
.tag-blue {
display: inline-block;
background: #1a6bdc14;
border: 1px solid #1a6bdc33;
color: #1a5ab8;
border-radius: 5px;
padding: 2px 8px;
font-size: 12px;
font-weight: 700
}
.warning-box {
background: #dc30300d;
border: 1px solid #dc303040;
border-left: 4px solid var(--red);
border-radius: 10px;
padding: 20px 26px;
margin: 30px 0;
font-size: 16px;
color: #ec0000;
line-height: 1.72
}
.ig-flow {
display: flex;
flex-direction: column;
gap: 0;
position: relative
}
.ig-flow::before {
content: '';
position: absolute;
left: 24px;
top: 52px;
width: 2px;
height: calc(100% - 70px);
background: linear-gradient(180deg, #1a6bdc73, #1a6bdc14)
}
.ig-flow-row {
display: flex;
align-items: flex-start;
gap: 18px;
padding-bottom: 24px;
position: relative;
z-index: 2
}
.ig-flow-num {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #1a6bdc, #3a9de0);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Syne', sans-serif;
font-size: 15px;
font-weight: 800;
color: #fff;
box-shadow: 0 0 18px #1a6bdc59;
flex-shrink: 0
}
.ig-flow-body {
flex: 1;
padding-top: 6px
}
.ig-flow-title {
font-family: 'Syne', sans-serif;
font-size: 17px;
font-weight: 800;
color: var(--navy);
margin-bottom: 4px
}
.cross-border-text img {
border-radius: 12px;
width: 100%;
height: 100%;
object-fit: cover;
}
.ig-flow-desc {
font-size: 14.5px;
color: #4a5568;
line-height: 1.62
}
.from-first-call {
position: relative;
background-color: #001421;
padding: 100px 0;
overflow: hidden
}
.ffc-grid-overlay {
position: absolute;
inset: 0;
background-image: radial-gradient(#00d47e12 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none
}
.ffc-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: #00d47e;
background: #00d47e14;
border: 1px solid #00d47e33;
border-radius: 20px;
padding: 5px 16px;
margin-bottom: 20px
}
.ffc-title {
font-size: clamp(26px, 4vw, 42px);
font-weight: 800;
color: #fff;
line-height: 1.15;
margin-bottom: 16px;
text-transform: normal
}
.ffc-subtitle {
font-size: 15px;
color: #ffffff73;
max-width: 580px;
margin: 0 auto;
line-height: 1.7
}
.ffc-header {
margin-bottom: 80px
}
.ffc-timeline {
position: relative;
max-width: 900px;
margin: 0 auto
}
.ffc-center-line {
display: none
}
@media (min-width: 768px) {
.ffc-center-line {
display: block;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent 0%, #00d47e40 10%, #3b82f633 50%, #00d47e40 90%, transparent 100%);
transform: translateX(-50%);
z-index: 0
}
}
.ffc-phase {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 56px;
position: relative;
z-index: 1
}
.ffc-phase:last-child {
margin-bottom: 0
}
.ffc-spacer {
flex: 1
}
.ffc-content {
flex: 1;
background: #ffffff08;
border: 1px solid #ffffff12;
border-radius: 14px;
padding: 24px 28px;
transition: border-color .3s ease, background .3s ease
}
.ffc-content:hover {
background: #ffffff0d;
border-color: #ffffff1f
}
@media (min-width: 768px) {
.ffc-left .ffc-content {
margin-right: 32px
}
.ffc-right .ffc-content {
margin-left: 32px
}
}
.ffc-content-final {
border-color: #00d47e33;
background: #00d47e0a
}
.ffc-content-final:hover {
border-color: #00d47e59;
background: #00d47e12
}
.ffc-phase-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #00d47e;
margin-bottom: 8px
}
.ffc-phase-title {
font-size: 17px;
font-weight: 800;
color: #fff;
margin-bottom: 10px;
letter-spacing: -.02em;
line-height: 1.3;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px
}
.ffc-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #f59e0b;
background: #f59e0b1a;
border: 1px solid #f59e0b40;
border-radius: 4px;
padding: 2px 8px;
vertical-align: middle
}
.ffc-phase-desc {
font-size: 13px;
color: #ffffff73;
line-height: 1.7;
margin-bottom: 10px
}
.ffc-phase-desc:last-of-type {
margin-bottom: 14px
}
.ffc-bullets {
list-style: none;
padding: 0;
margin: 0 0 14px
}
.ffc-bullets li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: #ffffff73;
line-height: 1.6;
margin-bottom: 8px
}
.ffc-bullets li svg {
flex-shrink: 0;
margin-top: 3px;
filter: drop-shadow(0 0 4px #f59e0b66)
}
.ffc-bullets li strong {
color: #ffffffbf;
font-weight: 700
}
.ffc-tags {
display: flex;
flex-wrap: wrap;
gap: 6px
}
.ffc-tags span {
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #ffffff59;
background: #ffffff0d;
border: 1px solid #ffffff14;
border-radius: 4px;
padding: 3px 8px
}
.ffc-store-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
margin-top: 14px
}
.ffc-store-badge {
display: flex;
align-items: center;
gap: 8px;
background: #ffffff0f;
border: 1px solid #ffffff1a;
border-radius: 8px;
padding: 7px 14px;
font-size: 12px;
font-weight: 700;
color: #fff
}
.ffc-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
z-index: 2
}
.ffc-node-inner {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform .3s ease
}
.ffc-node:hover .ffc-node-inner {
transform: scale(1.1)
}
.ffc-node-num {
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
color: #fff3
}
.ffc-blue {
background: #3b82f61f;
border: 1.5px solid #3b82f666;
color: #3b82f6;
filter: drop-shadow(0 0 10px #3b82f659)
}
.ffc-green {
background: #00d47e1f;
border: 1.5px solid #00d47e66;
color: #00d47e;
filter: drop-shadow(0 0 10px #00d47e59)
}
.ffc-amber {
background: #f59e0b1f;
border: 1.5px solid #f59e0b66;
color: #f59e0b;
filter: drop-shadow(0 0 10px #f59e0b59)
}
.ffc-purple {
background: #a855f71f;
border: 1.5px solid #a855f766;
color: #a855f7;
filter: drop-shadow(0 0 10px #a855f759)
}
.ffc-cyan {
background: #06b6d41f;
border: 1.5px solid #06b6d466;
color: #06b6d4;
filter: drop-shadow(0 0 10px #06b6d459)
}
@media (max-width: 767px) {
.from-first-call {
padding: 60px 0
}
.ffc-header {
margin-bottom: 48px
}
.ffc-phase {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-bottom: 0;
padding-left: 20px;
border-left: 1px solid #00d47e26;
padding-bottom: 36px
}
.ffc-phase:last-child {
padding-bottom: 0;
border-left-color: transparent
}
.ffc-node {
flex-direction: row;
gap: 10px;
margin-bottom: 16px;
margin-left: -31px
}
.ffc-node-inner {
width: 42px;
height: 42px
}
.ffc-node-num {
font-size: 11px
}
.ffc-content {
width: 100%;
padding: 18px 20px;
margin-left: 0 !important;
margin-right: 0 !important
}
.ffc-phase-title {
font-size: 15px
}
.ffc-spacer {
display: none !important
}
}
@media (max-width: 400px) {
.ffc-title {
font-size: 22px
}
.ffc-store-row {
flex-direction: column
}
}
.des-badge-row {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
margin-bottom: 1rem
}
.des-badge-number {
background: #3b82f6;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: #fff;
flex-shrink: 0
}
.des-section-label {
color: #60a5fa;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .15em;
font-size: .75rem
}
.des-section-title {
font-size: 2.25rem;
font-weight: 900;
color: #fff;
letter-spacing: -.025em;
margin-bottom: 1rem
}
.des-section-desc {
color: #ffffffb3;
font-size: .875rem;
max-width: 40rem;
margin: 0 auto
}
.des-plan-card {
cursor: pointer;
border: 2px solid #ffffff0d;
border-radius: 1rem;
padding: 1.5rem;
background: #00374a;
display: flex;
flex-direction: column;
transition: border-color 0.2s, box-shadow 0.2s, background .2s;
height: 100%;
position: relative;
margin-bottom: 1rem
}
.des-plan-card:hover {
border-color: #ffffff1a
}
.des-plan-card.selected {
background: #2563eb1a;
border-color: #3b82f6;
box-shadow: 0 0 0 4px #3b82f61a 0 25px 50px -12px #1e3a8a33
}
.des-card-head {
margin-bottom: 1.5rem;
text-align: left
}
.des-plan-name {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 20px;
color: #fff;
transition: color .2s
}
.des-plan-card.selected .des-plan-name {
color: #fff
}
.des-plan-scope {
font-size: 10px;
color: #22d3ee;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em
}
.des-price-block {
margin-bottom: 1.5rem;
text-align: left
}
.des-price-row {
display: flex;
align-items: baseline;
gap: .25rem
}
.des-price-amount {
font-size: 1.875rem;
font-weight: 700;
color: #fff
}
.des-price-period {
color: #6b7280;
font-size: .875rem
}
.des-hours-badge {
display: inline-block;
margin-top: .75rem;
background: #3b82f633;
padding: .125rem .5rem;
border-radius: .25rem;
font-size: 10px;
font-weight: 700;
color: #93c5fd;
letter-spacing: -.01em
}
.des-features {
flex: 1;
text-align: left;
margin-bottom: 2rem;
list-style: none;
padding: 0
}
.des-features li {
display: flex;
align-items: flex-start;
gap: .5rem;
font-size: .75rem;
color: #fff;
margin-bottom: .75rem
}
.des-features li.feature-everything {
color: #60a5fa;
font-weight: 700;
margin-bottom: .5rem
}
.des-features li.feature-overage {
color: #eab308cc;
font-weight: 500
}
.des-features li.feature-plus {
color: #22d3ee
}
.des-feature-icon {
margin-top: 2px;
flex-shrink: 0;
font-size: .75rem
}
.des-card-footer {
border-top: 1px solid #ffffff0d;
background: #0003;
margin: 0 -1.5rem -1.5rem;
padding: 1rem 1.5rem;
border-radius: 0 0 1rem 1rem;
display: flex;
align-items: center;
justify-content: space-between
}
.des-overage-label {
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
color: #fff
}
.des-overage-rate {
font-size: 10px;
font-weight: 700;
color: #22d3ee
}
@media (max-width: 767.98px) {
.des-section-title {
font-size: 1.75rem
}
.des-plan-card {
margin-bottom: 1rem
}
}
.sm-card {
background: #00374a;
border: 1px solid #3b82f633;
border-radius: 1rem;
padding: 2.5rem;
position: relative;
overflow: hidden
}
.sm-card-glow {
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 500px;
background: #2563eb0d;
filter: blur(120px);
border-radius: 50%;
pointer-events: none
}
.sm-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
background: #3b82f633;
color: #93c5fd;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .15em;
padding: .25rem .75rem;
border-radius: 9999px;
border: 1px solid #3b82f64d;
margin-bottom: 1.5rem
}
.sm-title {
font-size: 2.25rem;
font-weight: 900;
color: #fff;
letter-spacing: -.025em;
line-height: 1;
font-style: italic;
margin-bottom: 1rem
}
@media (max-width: 767.98px) {
.sm-title {
font-size: 1.75rem
}
.sm-card {
padding: 1.75rem 1.25rem
}
}
.sm-desc {
color: #ffffffb3;
font-size: 1rem;
line-height: 1.7;
max-width: 640px;
margin-bottom: 0
}
.sm-desc .sm-highlight {
color: #fff;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #3b82f6;
text-underline-offset: 4px
}
.sm-divider {
border-top: 1px solid #ffffff0d;
margin-top: 1.5rem;
padding-top: 1.5rem
}
.sm-features {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center
}
.sm-feature-item {
display: flex;
align-items: center;
gap: .75rem;
color: #fff
}
.sm-feature-icon-wrap {
padding: .5rem;
background: #ffffff0d;
border-radius: .5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.sm-feature-label {
font-size: .875rem;
font-weight: 700;
white-space: nowrap
}
.capability-matrix .cm-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
background: #3b82f61a;
color: #60a5fa;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .15em;
padding: .25rem .75rem;
border-radius: 9999px;
border: 1px solid #3b82f633;
margin-bottom: 1.5rem
}
.capability-matrix .cm-title {
font-size: 1.875rem;
font-weight: 700;
color: #fff;
letter-spacing: -.025em;
margin-bottom: 1rem
}
.capability-matrix .cm-desc {
color: #ffffffb3;
font-size: .875rem
}
.capability-matrix .cm-table-wrapper {
border-radius: 1.5rem;
border: 1px solid #ffffff1a;
background: #ffffff03;
overflow: hidden
}
.capability-matrix .cm-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
.capability-matrix .cm-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
font-size: .875rem;
text-align: left;
margin: 0
}
.capability-matrix .cm-table thead tr {
background: #ffffff0d
}
.capability-matrix .cm-table thead th {
padding: 1.5rem 2rem;
border-bottom: 1px solid #ffffff0d;
color: #9ca3af;
font-weight: 900;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .2em;
white-space: nowrap
}
.capability-matrix .cm-table tbody tr {
transition: background .2s
}
.capability-matrix .cm-table tbody tr:hover {
background: #ffffff05
}
.capability-matrix .cm-table tbody td {
padding: 1.5rem 2rem;
border-bottom: 1px solid #ffffff0d;
color: #d1d5db;
vertical-align: middle;
background: #00374a
}
.capability-matrix .cm-table tbody tr:last-child td {
border-bottom: none
}
.capability-matrix .cm-feature-name {
font-weight: 700;
color: #fff;
letter-spacing: -.01em;
margin-bottom: 2px;
transition: color .2s;
line-height: 1.3
}
.capability-matrix .cm-table tbody tr:hover .cm-feature-name {
color: #60a5fa
}
.capability-matrix .cm-feature-category {
font-size: 10px;
text-transform: uppercase;
color: #4b5563;
font-weight: 900;
letter-spacing: .15em
}
.capability-matrix .cm-check svg {
display: inline-block;
vertical-align: middle
}
.capability-matrix .cm-not-incl {
color: #374151;
font-size: .8125rem
}
.capability-matrix .cm-overage {
color: #eab308cc;
font-weight: 700;
font-size: .8125rem
}
.capability-matrix .cm-text {
color: #d1d5db;
font-size: .8125rem
}
@media (max-width: 575.98px) {
.capability-matrix .cm-table thead th,
.capability-matrix .cm-table tbody td {
padding: 1rem
}
.capability-matrix .cm-title {
font-size: 1.5rem
}
}
.institutional-performance .ip-heading {
font-size: 2.75rem;
font-weight: 700;
line-height: 1.5;
color: #fff;
margin-bottom: 1.5rem
}
.institutional-performance .ip-heading .ip-heading-accent {
color: #fff
}
@media (max-width: 767.98px) {
.institutional-performance .ip-heading {
font-size: 2rem
}
}
.institutional-performance .ip-desc {
color: #ffffffb3;
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 2rem
}
.institutional-performance .ip-mini-card {
background: #ffffff0d;
border: 1px solid #ffffff0d;
border-radius: 1rem;
padding: 1.25rem;
height: 100%
}
.institutional-performance .ip-mini-card svg {
display: block;
margin-bottom: .75rem
}
.institutional-performance .ip-mini-card-title {
font-size: .875rem;
font-weight: 700;
color: #fff;
margin-bottom: .25rem
}
.institutional-performance .ip-mini-card-desc {
font-size: 10px;
color: #6b7280;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.6;
margin: 0
}
.institutional-performance .ip-stats-outer {
position: relative
}
.institutional-performance .ip-glow {
position: absolute;
top: -1rem;
left: -1rem;
right: -1rem;
bottom: -1rem;
background: #3b82f61a;
filter: blur(48px);
border-radius: 50%;
pointer-events: none;
z-index: 0
}
.institutional-performance .ip-stats-card {
position: relative;
z-index: 1;
background: #00374a;
border: 1px solid #ffffff1a;
border-radius: 1.5rem;
padding: 2.5rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px #00000080
}
.institutional-performance .ip-stat-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-bottom: 1.5rem;
border-bottom: 1px solid #ffffff0d;
margin-bottom: 1.5rem
}
.institutional-performance .ip-stat-row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0
}
.institutional-performance .ip-stat-label {
font-size: .6875rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .2em;
color: #6b7280;
line-height: 1.4;
max-width: 120px
}
.institutional-performance .ip-stat-value {
font-size: 2.5rem;
font-weight: 900;
line-height: 1;
white-space: nowrap
}
.institutional-performance .ip-stat-value.color-white {
color: #fff
}
.institutional-performance .ip-stat-value.color-green {
color: #4ade80
}
.institutional-performance .ip-stat-value.color-blue {
color: #60a5fa
}
@media (max-width: 575.98px) {
.institutional-performance .ip-stats-card {
padding: 1.75rem 1.25rem
}
.institutional-performance .ip-stat-value {
font-size: 2rem
}
}
@media (max-width: 991.98px) {
.institutional-performance .ip-right-col {
margin-top: 3rem
}
}
.compliance-data-sovereignty .cds-header {
text-align: center;
margin-bottom: 4rem
}
.compliance-data-sovereignty .cds-title {
font-size: 1.875rem;
font-weight: 700;
color: #fff;
letter-spacing: -.025em;
margin-bottom: 1rem
}
.compliance-data-sovereignty .cds-desc {
color: #ffffffb3;
font-size: .875rem;
max-width: 560px;
margin: 0 auto;
line-height: 1.6
}
.compliance-data-sovereignty .cds-card {
background: #00374a;
border: 1px solid #ffffff0d;
border-radius: 1rem;
padding: 2rem;
text-align: left;
transition: border-color .25s;
height: 100%;
margin-bottom: 1.5rem
}
.compliance-data-sovereignty .cds-card:hover {
border-color: #3b82f64d
}
.compliance-data-sovereignty .cds-icon-wrap {
width: 3rem;
height: 3rem;
background: #3b82f61a;
border-radius: .75rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: background .25s;
flex-shrink: 0
}
.compliance-data-sovereignty .cds-card:hover .cds-icon-wrap {
background: #3b82f633
}
.compliance-data-sovereignty .cds-icon-wrap svg {
display: block
}
.compliance-data-sovereignty .cds-card-title {
font-size: 1.125rem;
font-weight: 700;
color: #fff;
margin-bottom: .75rem
}
.compliance-data-sovereignty .cds-card-text {
font-size: .875rem;
color: #fff9;
line-height: 1.7;
margin: 0
}
@media (max-width: 767.98px) {
.compliance-data-sovereignty {
padding: 4rem 0
}
.compliance-data-sovereignty .cds-title {
font-size: 1.5rem
}
.compliance-data-sovereignty .cds-card {
margin-bottom: 1rem
}
}
.roi-anchor-eyebrow {
display: block;
color: #60a5fa;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .2em;
margin-bottom: .5rem
}
.roi-anchor-heading {
font-size: 1.75rem;
font-weight: 900;
color: #fff;
margin-bottom: .75rem
}
.roi-anchor-subtext {
color: #9ca3af;
font-size: .875rem;
margin-bottom: 0
}
.roi-anchor-table-wrapper {
border-radius: 1.5rem;
border: 1px solid #ffffff1a;
box-shadow: 0 25px 50px #00000080
}
.roi-anchor-table {
background-color: #00374a;
margin-bottom: 0
}
.roi-anchor-table thead tr {
background-color: #ffffff0d;
border-bottom: 1px solid #ffffff0d
}
.roi-anchor-table thead th {
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.5;
color: #6b7280;
border: none;
padding: 1rem 1.5rem
}
.roi-anchor-table thead th.roi-anchor-col-remitso {
color: #60a5fa
}
.roi-anchor-table tbody tr {
border-bottom: 1px solid #ffffff0d
}
.roi-anchor-table tbody td {
border: none;
padding: 1rem 1.5rem;
font-size: .875rem;
vertical-align: middle;
line-height: 1.5
}
.roi-anchor-col-label {
color: #9ca3af
}
.roi-anchor-col-build {
color: #f8717199
}
.roi-anchor-col-remitso {
color: #4ade80cc
}
.roi-anchor-row-highlight .roi-anchor-col-remitso {
color: #4ade80;
font-weight: 700
}
.roi-anchor-row-total {
background-color: #2563eb1a;
border-top: 2px solid #3b82f666 !important
}
.roi-anchor-row-total .roi-anchor-col-label {
color: #fff;
font-weight: 900
}
.roi-anchor-row-total .roi-anchor-col-build {
color: #f87171;
font-weight: 700
}
.roi-anchor-row-total .roi-anchor-col-remitso {
color: #4ade80;
font-size: 1.125rem;
font-weight: 900
}
.roi-anchor-footnote {
font-size: 10px;
color: #fff;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .15em;
margin-top: 1.25rem;
margin-bottom: 0
}
.readiness-protocol .rp-subtitle {
color: #3b82f6;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px
}
.readiness-protocol .rp-foundation-layer {
background: #ffffff05;
border-radius: 14px;
padding: 35px
}
.readiness-protocol .rp-phase-header h3 {
font-size: 18px;
font-weight: 700;
color: #93c5fd;
margin-bottom: 5px
}
.readiness-protocol .rp-phase-header p {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #6b7280;
font-weight: 700
}
.readiness-protocol .rp-card {
background: #ffffff0a;
border: 1px solid #ffffff0f;
border-radius: 10px;
padding: 15px;
font-size: 14px;
color: #b9c1cc;
height: 100%;
line-height: 1.5
}
.readiness-protocol .rp-card.highlight {
color: #93c5fd
}
.readiness-protocol .rp-arrow {
margin: 15px 0;
opacity: .8
}
.readiness-protocol .rp-raas-layer {
border: 1px dashed #ffffff26;
border-radius: 14px;
padding: 35px;
opacity: .9
}
.readiness-protocol .rp-phase-desc {
color: #9ca3af;
font-size: 14px;
margin-top: 15px;
font-style: italic
}
.readiness-protocol .text-purple {
color: #c084fc
}
.readiness-protocol .rp-btn {
color: #fff;
font-size: 16px;
font-weight: 600;
background: #377cd5;
padding: 14px;
border-radius: 10px
}
.readiness-protocol .rp-btn:hover {
text-decoration: none
}
@media (max-width:768px) {
.readiness-protocol {
padding: 70px 20px
}
.readiness-protocol .rp-title {
font-size: 28px
}
.readiness-protocol .rp-foundation-layer,
.readiness-protocol .rp-raas-layer {
padding: 25px
}
}
.commercial-model .cm-subtitle {
color: #3b82f6;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px
}
.commercial-model .cm-title {
font-size: 44px;
font-weight: 900;
margin-bottom: 60px
}
.commercial-model .cm-card {
padding: 40px;
border-radius: 14px;
background: #ffffff05;
border: 1px solid #ffffff0d;
text-align: left;
height: 100%
}
.commercial-model .cm-blue {
border-color: #3b82f633;
background: #3b82f608
}
.commercial-model .cm-purple {
border-color: #a855f733;
background: #a855f708
}
.commercial-model .cm-card-header h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px
}
.commercial-model .cm-card-header p {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700
}
.commercial-model .cm-blue .cm-card-header p {
color: #60a5fa
}
.commercial-model .cm-purple .cm-card-header p {
color: #c084fc
}
.commercial-model .cm-desc {
font-size: 14px;
color: #9ca3af;
margin: 25px 0 30px;
line-height: 1.7
}
.commercial-model .cm-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #ffffff0d;
font-size: 15px
}
.commercial-model .cm-item span:first-child {
color: #d1d5db
}
.commercial-model .cm-badge {
padding: 6px 14px;
font-size: 12px;
border-radius: 20px;
font-weight: 600
}
.commercial-model .cm-badge.blue {
background: #3b82f633;
color: #60a5fa;
border: 1px solid #3b82f64d
}
.commercial-model .cm-badge.purple {
background: #a855f733;
color: #c084fc;
border: 1px solid #a855f74d
}
.commercial-model .cm-btn-wrapper {
margin-top: 60px
}
.commercial-model .cm-btn {
color: #fff;
font-size: 16px;
font-weight: 600;
background: #377cd5;
padding: 14px;
border-radius: 10px
}
.commercial-model .cm-btn:hover {
text-decoration: none
}
@media (max-width:991px) {
.commercial-model {
padding: 80px 20px
}
.commercial-model .cm-title {
font-size: 36px;
margin-bottom: 40px
}
}
@media (max-width:768px) {
.commercial-model .cm-title {
font-size: 30px
}
.commercial-model .cm-card {
padding: 30px
}
}
.strategic-advantage .sa-subtitle {
color: #3b82f6;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px
}
.strategic-advantage .sa-title {
font-size: 36px;
font-weight: 900;
margin-bottom: 70px
}
.strategic-advantage .sa-card {
background: #ffffff05;
border: 1px solid #ffffff0d;
border-radius: 14px;
padding: 35px;
height: 100%;
transition: .3s
}
.strategic-advantage .sa-card:hover {
transform: translateY(-6px);
border-color: #3b82f64d
}
.strategic-advantage .sa-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #60a5fa;
font-weight: 700;
margin-bottom: 10px
}
.strategic-advantage .sa-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
color: #fff
}
.strategic-advantage .sa-card p {
font-size: 14px;
color: #9ca3af;
line-height: 1.7
}
.strategic-advantage .highlight h3 {
color: #93c5fd
}
.strategic-advantage .sa-btn-wrapper {
margin-top: 60px
}
.strategic-advantage .sa-btn {
color: #fff;
font-size: 16px;
font-weight: 600;
background: #377cd5;
padding: 14px;
border-radius: 10px
}
.strategic-advantage .sa-btn:hover {
text-decoration: none
}
@media (max-width:991px) {
.strategic-advantage {
padding: 90px 20px
}
.strategic-advantage .sa-title {
font-size: 30px;
margin-bottom: 50px
}
}
@media (max-width:768px) {
.strategic-advantage .sa-card {
padding: 25px
}
}
.ownership-journey .oj-timeline {
position: relative;
padding-left: 60px
}
.ownership-journey .oj-timeline:before {
content: "";
position: absolute;
left: 22px;
top: 0;
bottom: 0;
width: 2px;
background: #ffffff14
}
.ownership-journey .oj-step {
position: relative;
margin-bottom: 55px
}
.ownership-journey .oj-number {
position: absolute;
left: -60px;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
border: 2px solid
}
.ownership-journey .blue {
background: #3b82f626;
border-color: #3b82f6;
color: #60a5fa
}
.ownership-journey .purple {
background: #a855f726;
border-color: #a855f7;
color: #c084fc
}
.ownership-journey .green {
background: #22c55e26;
border-color: #22c55e;
color: #4ade80
}
.ownership-journey .oj-card {
background: #ffffff05;
border: 1px solid #ffffff0d;
border-radius: 12px;
padding: 30px;
transition: .3s
}
.ownership-journey .oj-card:hover {
border-color: #3b82f64d;
transform: translateY(-4px)
}
.ownership-journey .oj-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #fff
}
.ownership-journey .oj-card p {
font-size: 14px;
color: #9ca3af;
line-height: 1.7
}
.ownership-journey .oj-btn-wrapper {
margin-top: 60px
}
.ownership-journey .oj-btn {
color: #fff;
font-size: 16px;
font-weight: 600;
background: #377cd5;
padding: 14px;
border-radius: 10px
}
.ownership-journey .oj-btn:hover {
text-decoration: none
}
@media (max-width:768px) {
.ownership-journey {
padding: 80px 20px
}
.ownership-journey .oj-title {
font-size: 28px
}
.ownership-journey .oj-timeline {
padding-left: 50px
}
.ownership-journey .oj-number {
left: -50px;
width: 38px;
height: 38px
}
}
.CostsOfGlobal-learn-more {
color: #377cd5;
font-size: 16px;
font-weight: 600
}
.CostsOfGlobal-learn-more:hover {
text-decoration: none
}
.pass-pricing-last-price-time {
font-size: 16px
}
.price-runiing-btn-white {
width: 100%
}
.price-runiing-btn-white a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 12px 10px;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
background-color: transparent;
border-radius: 6px;
font-weight: 500;
letter-spacing: .5px;
transition: all .3s ease
}
.price-runiing-btn-white a:hover {
background-color: #fff;
color: #000
}
.price-runiing-btn-blue {
width: 100%
}
.price-runiing-btn-blue a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 12px 10px;
border: 1px solid #377cd5;
color: #fff;
text-decoration: none;
background-color: #377cd5;
border-radius: 6px;
font-weight: 500;
letter-spacing: .5px;
transition: all .3s ease
}
.blog-austrac .section-header {
margin-top: 4rem;
margin-bottom: 2rem;
border-left: 5px solid #00e676;
padding-left: 1.5rem
}
.blog-austrac .section-num {
font-size: .8rem;
font-weight: 700;
color: #00e676;
text-transform: uppercase;
display: block;
margin-bottom: .5rem
}
.blog-austrac h2 {
font-weight: 700;
color: #fff
}
.blog-austrac .card.bg-white {
border: none;
border-radius: 12px;
transition: transform .3s ease;
height: 100%
}
.blog-austrac .card.bg-white:hover {
transform: translateY(-5px)
}
.blog-austrac .card-title {
color: #0d1b2a;
font-weight: 700
}
.blog-austrac .card-text {
color: #000
}
.blog-austrac .stat-box {
border-radius: 12px;
padding: 1.5rem;
text-align: center;
background: #ffffff0d;
border: 1px solid #ffffff1a;
height: 100%;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.blog-austrac .stat-num {
font-size: 2.2rem;
font-weight: 800;
color: #00e676;
display: block;
line-height: 1.2;
margin-bottom: .5rem
}
.blog-austrac .callout {
border-radius: 12px;
padding: 1.5rem 2rem;
margin: 2rem 0;
color: #333
}
.blog-austrac .diagram-wrapper {
background: #fff;
border-radius: 16px;
padding: 2rem;
margin: 2rem 0;
overflow-x: auto
}
.blog-austrac .timeline-container {
position: relative;
padding-left: 3rem;
border-left: 2px dashed #fff3
}
.blog-austrac .timeline-item {
position: relative;
margin-bottom: 2rem
}
.blog-austrac .timeline-item::before {
content: '';
position: absolute;
left: -3.65rem;
top: .5rem;
width: 20px;
height: 20px;
background: #00e676;
border-radius: 50%;
border: 4px solid #001421
}
.blog-austrac .table thead th {
background-color: #0b3d91;
color: #fff;
border: none
}
.blog-austrac .cta-block {
background: linear-gradient(135deg, #0b3d91 0%, #001421 100%);
padding: 4rem;
border-radius: 20px;
text-align: center;
margin-top: 5rem;
border: 1px solid #ffffff1a
}
.blog-austrac .tag {
background: #ffffff1a;
padding: 4px 12px;
border-radius: 50px;
font-size: .75rem;
margin-right: .5rem;
margin-bottom: .5rem;
display: inline-block
}
.offset-lg-1 {
margin-left: 0
}
.rs-hero {
background: #0D1B3E;
color: #fff;
padding: 64px 0 56px;
position: relative;
overflow: hidden
}
.rs-hero::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 450px;
height: 450px;
background: radial-gradient(circle, #2563eb26 0%, transparent 70%);
pointer-events: none
}
.rs-hero-inner {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1
}
.rs-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #2563eb33;
border: 1px solid #2563eb4d;
border-radius: 100px;
padding: 5px 14px;
font-size: 12px;
font-weight: 600;
color: #34D399;
letter-spacing: .5px;
text-transform: uppercase;
margin-bottom: 24px
}
.rs-hero h1 {
font-size: 42px;
font-weight: 800;
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -.5px;
color: #fff
}
.rs-hero h1 span {
background: linear-gradient(90deg, #34D399, #2563EB);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}
.rs-hero-sub {
font-size: 17px;
line-height: 1.7;
color: #CBD5E1;
max-width: 660px
}
.rs-hero-meta {
margin-top: 28px;
display: flex;
gap: 28px;
flex-wrap: wrap
}
.rs-hero-meta span {
font-size: 13px;
color: #94A3B8;
display: flex;
align-items: center;
gap: 6px
}
.rs-top-stripe {
height: 5px;
background: linear-gradient(90deg, #2563EB 0%, #10B981 100%)
}
.source-note {
background: linear-gradient(135deg, #EEF2FF, #E8F4FD);
border-left: 4px solid #2563EB;
border-radius: 8px;
padding: 18px 22px;
margin: 24px 0;
font-size: 14px;
line-height: 1.7;
color: #334155
}
.source-note strong {
color: #1E40AF;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .4px;
display: block;
margin-bottom: 4px
}
.source-note a {
color: #2563EB;
font-weight: 600
}
.stat-note {
background: #ECFDF5;
border-left: 4px solid #10B981;
border-radius: 8px;
padding: 18px 22px;
margin: 24px 0;
font-size: 14px;
line-height: 1.7;
color: #334155
}
.stat-note strong {
color: #065F46;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .4px;
display: block;
margin-bottom: 4px
}
.tag {
display: inline-block;
padding: 2px 9px;
border-radius: 100px;
font-size: 11px;
font-weight: 600
}
.tag-green {
background: #ECFDF5;
color: #065F46
}
.tag-amber {
background: #FEF3C7;
color: #92400E
}
.tag-red {
background: #FEE2E2;
color: #991B1B
}
.fw-card {
border: 1px solid #5baeff26;
border-radius: 10px;
padding: 24px;
margin-bottom: 20px;
background: #fff;
position: relative
}
.fw-card-num {
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
font-weight: 800;
color: #359bffe0;
line-height: 1
}
.fw-card h4 {
margin: 0 0 8px;
font-weight: 800;
color: #0D1B3E;
font-size: 19px;
}
.fw-card ul {
margin: 10px 0 0;
padding-left: 18px
}
.fw-card ul li {
font-size: 14px;
line-height: 1.65;
margin-bottom: 4px;
color: #475569;
list-style: disc !important
}
.fw-card .killer-q {
margin-top: 14px;
padding: 12px 16px;
background: #1a6bdc0f;
border-radius: 6px;
font-size: 13.5px;
color: #1a6bdc;
font-weight: 500;
border-left: 3px solid #1a6bdc;
line-height: 1.6
}
.fw-card .killer-q em {
font-size: 11px;
font-weight: 700;
color: #2563EB;
text-transform: uppercase;
letter-spacing: .4px;
display: block;
margin-bottom: 3px;
font-style: normal
}
.rs-cta {
background: #0D1B3E;
border-radius: 12px;
padding: 40px 36px;
margin: 48px 0 28px;
color: #fff;
position: relative;
overflow: hidden
}
.rs-cta::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 250px;
height: 250px;
background: radial-gradient(circle, #10b98126 0%, transparent 70%)
}
.rs-cta h3 {
color: #fff;
font-size: 24px;
font-weight: 700;
margin-bottom: 10px
}
.rs-cta>p {
color: #94A3B8;
font-size: 15px;
max-width: 520px
}
.rs-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 20px;
margin: 20px 0 28px;
list-style: none;
padding: 0
}
.rs-cta-grid li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #E2E8F0
}
.rs-cta-grid li::before {
content: '✓';
color: #34D399;
font-weight: 700;
font-size: 13px
}
.rs-cta .cta-btn {
display: inline-block;
background: #10B981;
color: #fff;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
margin-right: 12px;
transition: background .2s;
margin-bottom: 5px;
}
.rs-cta .cta-btn:hover {
background: #34D399;
text-decoration: none
}
.rs-cta .cta-btn-outline {
display: inline-block;
color: #fff;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
border: 1px solid #ffffff4d;
transition: border-color .2s
}
.rs-cta .cta-btn-outline:hover {
border-color: #fff;
text-decoration: none
}
.infographic-wrap svg {
display: block;
max-width: 100%;
height: auto
}
@media(max-width:768px) {
.rs-hero {
padding: 40px 0 36px
}
.rs-hero h1 {
font-size: 28px
}
.rs-cta {
padding: 28px 20px
}
.rs-cta-grid {
grid-template-columns: 1fr
}
}
.quick-answer-box {
background: #fff;
border-left: 4px solid #1a6bdc;
border-radius: 10px;
padding: 20px 25px;
margin-bottom: 25px
}
.custom-bg-white {
background-color: #fff
}
.custom-bg-grey {
background-color: #F8FAFC
}
.si {
padding: 26px 18px;
border-right: 1px solid #ffffff0f;
text-align: center;
transition: background .2s;
cursor: default
}
@media(max-width:991px) {
.si:nth-child(even) {
border-right: none
}
.si {
border-bottom: 1px solid #ffffff0f
}
}
@media(min-width:992px) {
.si:last-child {
border-right: none
}
}
.si-v {
font-size: 24px;
font-weight: 700;
color: #1a56db;
letter-spacing: -1px;
margin-bottom: 5px
}
.si-l {
font-size: 8.5px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #1a56db
}
/* ============ Case study ==============================*/
/* --- Slider Section Styles (Fully Scoped) --- */
.client-vel.case-studies-section {
padding: 100px 0;
overflow: hidden;
}
.client-vel .badge-custom {
display: inline-block;
background: rgba(59, 130, 246, 0.12);
color: #3B82F6;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 20px;
margin-bottom: 16px;
}
.client-vel .slider-card {
background-color: #F4F7FB;
border-radius: 32px;
padding: 4rem;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
}
.client-vel .slides-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
width: 100%;
}
.client-vel .slide {
min-width: 100%;
opacity: 0;
transition: opacity 0.4s ease;
display: flex;
align-items: center;
}
.client-vel .slide.active {
opacity: 1;
}
.client-vel .slide-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.client-vel .slide-image-wrapper svg {
width: 100%;
max-width: 450px;
height: auto;
display: block;
overflow: visible;
}
.client-vel .slide-tag {
display: inline-flex;
align-items: center;
gap: 10px;
background: #FFFFFF;
padding: 12px 24px;
border-radius: 12px;
color: #2E5CFF;
font-size: 14px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(46, 92, 255, 0.08);
margin-bottom: 24px;
}
.client-vel .slide-tag svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.client-vel .slide-title {
color: #0F172A;
font-size: clamp(28px, 3vw, 36px);
font-weight: 700;
line-height: 1.25;
margin: 0 0 20px;
letter-spacing: -0.5px;
}
.client-vel .slide-desc {
color: #475569;
font-size: 17px;
line-height: 1.6;
margin: 0 0 32px;
max-width: 500px;
}
.client-vel .slide-btn {
display: inline-block;
background: #2E5CFF;
color: #fff;
padding: 14px 32px;
border-radius: 6px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: background 0.2s, transform 0.2s;
}
.client-vel .slide-btn:hover {
background: #1e45cc;
transform: translateY(-2px);
color: #fff;
text-decoration: none;
}
.client-vel .slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
}
.client-vel .nav-arrows {
display: flex;
gap: 16px;
}
.client-vel .nav-arrow {
width: 48px;
height: 48px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #111827;
transition: all 0.2s ease;
}
.client-vel .nav-arrow:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.12);
}
.client-vel .nav-arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.client-vel .pagination-dots {
display: flex;
align-items: center;
gap: 12px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.client-vel .dot {
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.client-vel .dot.active {
background: transparent;
border: 2px solid #3B82F6;
width: 12px;
height: 12px;
}
/* Mobile Adjustments */
@media (max-width: 991.98px) {
.client-vel .slider-card {
padding: 2rem 1rem;
}
.client-vel .slide-content {
text-align: center;
}
.client-vel .slide-desc {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 767.98px) {
.client-vel .slider-controls {
flex-direction: column;
gap: 32px;
position: relative;
}
.client-vel .pagination-dots {
position: static;
transform: none;
}
.client-vel .nav-arrows {
order: 2;
}
}
.engineered-for-section {
background: #f0f4f8;
padding: 80px 0;
font-family: 'Segoe UI', sans-serif;
overflow: hidden
}
.engineered-for-badge {
display: inline-block;
background: #e0e8f9;
color: #1a56db;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 20px
}
.engineered-for-heading {
font-size: 2.6rem;
font-weight: 900;
color: #0a0a1a;
line-height: 1.15;
margin-bottom: 20px
}
.engineered-for-desc {
font-size: .97rem;
color: #4b5563;
line-height: 1.7;
margin-bottom: 18px;
max-width: 420px
}
.engineered-for-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px
}
.engineered-for-item {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border-radius: 14px;
padding: 16px 18px;
border: 1px solid #e5eaf3;
transition: box-shadow .25s, transform .25s;
cursor: default
}
.engineered-for-item:hover {
box-shadow: 0 6px 24px #1a56db1a;
transform: translateY(-3px)
}
.engineered-for-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: #e8f0fe;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.engineered-for-icon svg {
width: 20px;
height: 20px;
stroke: #1a56db;
fill: none;
stroke-width: 1.8
}
.engineered-for-label {
font-size: .92rem;
font-weight: 700;
color: #0a0a1a
}
.engineered-for-visual {
position: relative;
height: 440px
}
.engineered-for-canvas-wrap {
width: 100%;
height: 100%;
border-radius: 24px;
overflow: hidden;
background: #0d1117;
position: relative
}
canvas#efCanvas {
width: 100%;
height: 100%;
display: block
}
.engineered-for-stat-card {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
background: #0a0f1ee0;
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 20px 22px;
color: #fff;
border: 1px solid #ffffff14
}
.engineered-for-stat-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #7ea8f8;
margin-bottom: 6px
}
.engineered-for-stat-value {
font-size: 2rem;
font-weight: 900;
color: #fff;
margin-bottom: 6px
}
.engineered-for-stat-desc {
font-size: .78rem;
color: #9ca3af;
line-height: 1.5
}
.engineered-for-pulse {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
margin-right: 6px;
animation: efPulse 1.4s infinite;
vertical-align: middle
}
@keyframes efPulse {
0%,
100% {
opacity: 1;
transform: scale(1)
}
50% {
opacity: .4;
transform: scale(1.5)
}
}
.engineered-for-counter {
transition: all .3s
}
@media (max-width: 767px) {
.engineered-for-heading {
font-size: 1.8rem
}
.engineered-for-visual {
height: 320px;
margin-top: 40px
}
.engineered-for-grid {
grid-template-columns: 1fr 1fr;
gap: 12px
}
}
@media (max-width: 480px) {
.engineered-for-grid {
grid-template-columns: 1fr
}
}
.ready-to-card {
background: #ffffff0a;
border: 1px solid #ffffff14;
border-radius: 16px;
padding: 32px 28px;
height: 100%;
transition: border-color 0.25s, background .25s
}
.ready-to-card:hover {
background: #4d7cfe12;
border-color: #4d7cfe59
}
.ready-to-icon-wrap {
width: 52px;
height: 52px;
background: #4d7cfe26;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px
}
.ready-to-icon-wrap svg {
width: 26px;
height: 26px;
color: #4d7cfe;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round
}
.ready-to-card-title {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: 10px
}
.ready-to-card-text {
font-size: .88rem;
color: #7f9ab8;
line-height: 1.65;
margin: 0
}
.ready-to-col {
margin-bottom: 24px
}
@media (min-width: 768px) {
.ready-to-col {
margin-bottom: 0
}
}
.strategic-planning-section {
background: #fff;
padding: 80px 0 90px
}
.strategic-planning-title {
font-size: 2.5rem;
font-weight: 800;
color: #0d1117;
margin-bottom: 14px
}
.strategic-planning-subtitle {
font-size: 1rem;
color: #6b7280;
max-width: 480px;
margin: 0 auto 48px;
line-height: 1.6
}
.strategic-planning-card {
border-radius: 20px;
padding: 36px 32px;
height: 100%;
display: flex;
flex-direction: column
}
.strategic-planning-card-light {
background: #f5f6fa;
border: none
}
.strategic-planning-card-blue {
background: #3d6ef5
}
.strategic-planning-icon-wrap {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px
}
.strategic-planning-icon-wrap-light {
background: #fff;
border: 1px solid #e5e7eb
}
.strategic-planning-icon-wrap-blue {
background: #5b84f7
}
.strategic-planning-icon-wrap svg {
width: 24px;
height: 24px;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round
}
.strategic-planning-icon-wrap-light svg {
stroke: #0d1117
}
.strategic-planning-icon-wrap-blue svg {
stroke: #fff
}
.strategic-planning-card-title {
font-size: 1.45rem;
font-weight: 800;
margin-bottom: 14px;
line-height: 1.3
}
.strategic-planning-card-light .strategic-planning-card-title {
color: #0d1117
}
.strategic-planning-card-blue .strategic-planning-card-title {
color: #fff
}
.strategic-planning-card-text {
font-size: .92rem;
line-height: 1.65;
margin-bottom: 12px;
flex-grow: 1
}
.strategic-planning-card-light .strategic-planning-card-text {
color: #6b7280
}
.strategic-planning-card-blue .strategic-planning-card-text {
color: #ffffffd1
}
.strategic-planning-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 50px;
font-size: .92rem;
font-weight: 600;
border: none;
cursor: pointer;
text-decoration: none;
transition: opacity .2s;
width: fit-content
}
.strategic-planning-btn:hover {
opacity: .88;
text-decoration: none
}
.strategic-planning-btn-dark {
background: #0d1117;
color: #fff
}
.strategic-planning-btn-white {
background: #fff;
color: #0d1117
}
.strategic-planning-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round
}
.strategic-planning-col {
margin-bottom: 24px
}
@media (min-width: 768px) {
.strategic-planning-col {
margin-bottom: 0
}
}
.enterprise-grade-security-label {
font-size: 1.05rem;
font-weight: 800;
color: #0d1117;
margin-bottom: 4px
}
.enterprise-grade-security-sub {
font-size: .82rem;
color: #6b7280;
margin: 0
}
.enterprise-grade-security-divider {
width: 1px;
background: #d1d5db;
align-self: stretch;
margin: 0 8px
}
.enterprise-grade-security-badge {
text-align: center;
padding: 0 16px
}
.enterprise-grade-security-badge-name {
font-size: .82rem;
font-weight: 700;
color: #0d1117;
letter-spacing: .03em;
margin-bottom: 2px
}
.enterprise-grade-security-badge-type {
font-size: .68rem;
color: #9ca3af;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 8px
}
.enterprise-grade-security-verify {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .7rem;
font-weight: 600;
color: #3d6ef5;
text-decoration: none;
border: 1px solid #3d6ef5;
border-radius: 50px;
padding: 3px 10px;
transition: background 0.2s, color .2s
}
.enterprise-grade-security-verify:hover {
background: #3d6ef5;
color: #fff;
text-decoration: none
}
.enterprise-grade-security-verify svg {
width: 10px;
height: 10px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round
}
.enterprise-grade-security-badges {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px 0
}
@media (max-width: 767px) {
.enterprise-grade-security-left {
margin-bottom: 24px;
text-align: center
}
.enterprise-grade-security-badges {
justify-content: center
}
.enterprise-grade-security-divider {
display: none
}
.enterprise-grade-security-badge {
flex: 0 0 48%;
padding: 8px 0
}
}
.client-co-section {
background: #fff;
padding: 80px 0 90px
}
.client-co-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
object-position: top;
margin-bottom: 16px
}
.client-co-name {
font-family: Georgia, serif;
font-size: .95rem;
font-weight: 700;
color: #0d1117;
margin-bottom: 4px
}
.client-co-role {
font-size: .72rem;
font-weight: 600;
color: #9ca3af;
letter-spacing: .1em;
text-transform: uppercase;
margin: 0
}
.client-co-quote {
font-family: Georgia, serif;
font-size: 1.55rem;
font-weight: 700;
color: #0d1117;
line-height: 1.55;
margin: 32px auto 0;
max-width: 700px
}
@media (max-width: 575px) {
.client-co-quote {
font-size: 1.15rem
}
}
.deploy-for-box {
background: radial-gradient(circle at center, #1a3a8a 0%, #0b1a33 70%);
border-radius: 30px;
padding: 60px 20px;
color: #fff;
box-shadow: 0 20px 40px #00000026
}
.deploy-for-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 15px
}
.deploy-for-text {
font-size: 15px;
color: #cbd5e1;
max-width: 600px;
margin: 0 auto 30px;
line-height: 1.6
}
.deploy-for-btn {
display: inline-block;
padding: 12px 30px;
background: #3b82f6;
color: #fff;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
transition: .3s
}
.deploy-for-btn:hover {
background: #2563eb;
color: #fff
}
@media (max-width: 576px) {
.deploy-for-box {
padding: 40px 15px;
border-radius: 20px
}
.deploy-for-title {
font-size: 26px
}
.deploy-for-text {
font-size: 14px
}
}
.powering-est-title {
font-size: 12px;
letter-spacing: 2px;
color: #9aa3af;
font-weight: 600
}
.powering-est-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 24px
}
.powering-est-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #4b5563;
font-weight: 500;
padding: 6px 10px;
border-radius: 20px
}
.flag-circle {
width: 26px;
height: 26px;
border-radius: 50%;
background: #e6f0ff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 1px #d1d5db;
overflow: hidden
}
.flag-circle img {
width: 100%;
height: 100%;
object-fit: cover
}
.powering-est-item:hover {
background: #eef4ff;
color: #2563eb;
cursor: pointer
}
@media (max-width: 576px) {
.powering-est-list {
gap: 12px
}
.powering-est-item {
font-size: 12px;
padding: 6px 8px
}
}
.phone-sec-new {
background: linear-gradient(to bottom, #fde8e8, #e8f8ef);
border-radius: 20px;
padding: 40px 30px
}
.phone-sec-new-bg {
background: linear-gradient(to bottom, #e8f8ef, #fde8e8);
border-radius: 20px;
padding: 40px 30px
}
.phone-sec-new-bg-card {
background: linear-gradient(to bottom, #e8f8ef, #fde8e8);
border: 5px solid #000 !important;
border-radius: 30px
}
.border-5 {
border: 5px solid #000 !important
}
.phone-sec-new h4 {
font-size: 28px;
font-weight: 700
}
.phone-sec-new-bg h4 {
font-size: 28px;
font-weight: 700
}
.phone-sec-new-ul {
list-style: none;
padding: 0;
margin: 0
}
.phone-sec-new-ul li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
font-size: 15px;
line-height: 1.5;
color: #1f2937;
font-weight: 500
}
.phone-sec-new-ul li span {
display: flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
border-radius: 8px;
background: #E1F5EE;
flex-shrink: 0
}
.phone-sec-new-ul li svg {
width: 18px;
height: 18px;
color: #1D9E75
}
.team-controls {
font-family: 'Inter', sans-serif
}
.team-controls>div {
border-radius: 16px;
box-shadow: 0 20px 45px #00000014;
transition: all .3s ease
}
.team-controls .dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block
}
.team-controls-height {
height: 450px
}
.team-controls-sidebar {
width: 190px;
background: #f8fafc
}
.team-controls-box {
height: 30px;
border-radius: 6px
}
.team-controls-line {
height: 8px;
border-radius: 6px;
transition: all .3s ease
}
.team-controls .w-85 {
width: 85%
}
.team-controls .w-60 {
width: 60%
}
.team-controls .border {
border: 1px solid #e5e7eb !important
}
.team-controls .shadow-sm {
box-shadow: 0 8px 20px #0000000d !important;
transition: all .3s ease
}
.team-controls .shadow-sm:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px #00000014 !important
}
.team-controls h5 {
font-size: 20px;
letter-spacing: -.3px
}
.team-controls .btn-primary {
background: linear-gradient(135deg, #4f46e5, #6366f1);
border: none;
border-radius: 8px;
transition: all .3s ease
}
.team-controls .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px #4f46e54d
}
.team-controls .badge-success {
background-color: #dcfce7;
color: #16a34a;
font-weight: 600
}
.team-controls .badge-primary {
background-color: #dbeafe;
color: #2563eb;
font-weight: 600
}
.team-controls .bg-success {
box-shadow: 0 0 6px #22c55e99
}
@keyframes teamPulse {
0% {
background-color: #f1f5f9
}
50% {
background-color: #e2e8f0
}
100% {
background-color: #f1f5f9
}
}
.team-controls-line,
.team-controls-box {
animation: teamPulse 1.5s infinite ease-in-out
}
.team-controls .text-muted {
font-size: 12px
}
.team-controls .p-4 {
padding: 2rem !important
}
.strategic-advantage {
background: #f8fafc
}
.strategic-advantage .title {
font-size: 32px;
font-weight: 700;
color: #0f172a
}
.strategic-advantage .subtitle {
font-size: 14px;
color: #64748b;
max-width: 600px;
margin: 0 auto
}
.adv-card {
background: #fff;
border-radius: 16px;
padding: 24px;
height: 100%;
transition: all .3s ease;
border: 1px solid #e2e8f0
}
.adv-card:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px #00000014
}
.adv-card .icon-1 {
width: 42px;
height: 42px;
background: #eef2ff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px
}
.adv-card .icon-1 svg {
width: 20px;
height: 20px;
stroke: #4f46e5;
fill: none;
stroke-width: 2
}
.adv-card h5 {
font-size: 16px;
font-weight: 600;
color: #0f172a;
margin-bottom: 10px
}
.adv-card p {
font-size: 13px;
color: #64748b;
line-height: 1.6
}
.adv-card span {
display: inline-block;
margin-top: 10px;
font-size: 11px;
font-weight: 600;
color: #4f46e5;
text-transform: uppercase
}
.gap-5 {
gap: 50px !important
}
.mob-up-design-title {
font-size: 24px;
font-weight: 700;
color: #0f172a;
margin-bottom: 20px;
text-align: left
}
.mob-up-design-card {
background: #fff;
border-radius: 20px;
padding: 20px;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 30px #0000000a
}
.mob-up-design-label {
font-size: 11px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
margin-bottom: 5px
}
.mob-up-design-amount {
font-size: 20px;
font-weight: 700;
color: #0f172a
}
.mob-up-design-amount span {
color: #94a3b8
}
.mob-up-design-amount.small {
font-size: 20px
}
.mob-up-design-currency {
background: #f1f5f9;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #e2e8f0;
font-weight: 600;
color: #334155;
font-size: 14px
}
.mob-up-design-divider {
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 12px 0;
margin: 10px 0
}
.mob-up-design-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
margin-right: 10px;
font-size: 12px
}
.mob-up-design-icon.blue {
background: #eff6ff;
color: #2563eb
}
.mob-up-design-text {
font-size: 12px;
font-weight: 500;
color: #475569
}
.blue-text {
color: #2563eb !important
}
.mob-up-design-subtitle {
font-weight: 700;
color: #0f172a
}
.mob-up-design-link {
color: #2563eb;
font-size: 14px;
font-weight: 600;
text-decoration: none
}
.mob-up-design-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-weight: 700
}
.mob-up-design-avatar.add {
background: #eff6ff;
color: #2563eb;
border: 2px solid #bfdbfe
}
.mob-up-design-avatar.purple {
background: #f3e8ff;
color: #7c3aed
}
.mob-up-design-avatar.green {
background: #dcfce7;
color: #15803d
}
.mob-up-design-avatar.orange {
background: #ffedd5;
color: #c2410c
}
@media (max-width: 576px) {
.mob-up-design-amount {
font-size: 26px
}
.mob-up-design-amount.small {
font-size: 22px
}
.mob-up-design-avatar {
width: 45px;
height: 45px;
font-size: 13px
}
}
.operators-switch {
background: #001421;
position: relative;
overflow: hidden;
}
.operators-switch::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(55, 124, 213, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(55, 124, 213, .04) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
}
.operators-switch::after {
content: '';
position: absolute;
top: -160px;
right: -160px;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(55, 124, 213, .13) 0%, transparent 65%);
pointer-events: none;
}
.ops-eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: #377cd5;
}
.ops-card {
background: #00192d;
border: 1px solid rgba(255, 255, 255, .07);
border-left: 3px solid transparent;
padding: 30px 34px;
position: relative;
overflow: hidden;
transition: background .3s, border-color .3s, transform .3s;
}
.ops-card:first-child {
border-radius: 14px 14px 0 0;
}
.ops-card:last-child {
border-radius: 0 0 14px 14px;
}
.ops-card+.ops-card {
border-top: none;
}
.ops-card::after {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(55, 124, 213, .15), transparent 70%);
opacity: 0;
transition: opacity .35s;
}
.ops-card:hover {
background: #001f38;
border-left-color: #377cd5;
transform: translateX(5px);
}
.ops-card:hover::after {
opacity: 1;
}
.ops-card-title {
font-size: 20px;
font-weight: 700;
letter-spacing: -.02em;
color: #e8edf4;
transition: color .25s;
}
.ops-card:hover .ops-card-title {
color: #fff;
}
.ops-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: 4px;
padding: 3px 8px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .07);
color: #d72638;
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.ops-tag-accent {
font-size: 10px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
border-radius: 4px;
padding: 3px 8px;
background: rgba(55, 124, 213, .10);
border: 1px solid rgba(55, 124, 213, .28);
color: #377cd5;
}
.ops-icon {
width: 40px;
height: 40px;
border-radius: 10px;
flex-shrink: 0;
background: rgba(55, 124, 213, .10);
border: 1px solid rgba(55, 124, 213, .28);
display: flex;
align-items: center;
justify-content: center;
color: #377cd5;
}
.ops-divider {
width: 1px;
height: 12px;
background: rgba(255, 255, 255, .12);
}
.ops-btn {
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 13px 26px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform .2s, box-shadow .3s, color .2s, border-color .2s;
}
.ops-btn-primary {
background: #377cd5;
color: #fff;
border: none;
}
.ops-btn-primary:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(55, 124, 213, .35);
}
.ops-btn-ghost {
background: transparent;
color: #5e7a96;
border: 1px solid rgba(255, 255, 255, .07);
}
.ops-btn-ghost:hover {
color: #e8edf4;
border-color: rgba(55, 124, 213, .28);
}
.bd-section-title {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.08;
color: #0e1a2b;
}
/* Cards */
.bd-card {
background: #faf9f6;
border: 1px solid #e2e0d8;
border-radius: 16px;
padding: 40px 36px 36px;
height: 100%;
transition: box-shadow .3s, transform .3s;
}
.bd-card:hover {
box-shadow: 0 16px 48px rgba(14, 26, 43, .10);
transform: translateY(-4px);
}
.bd-badge {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
border-radius: 4px;
padding: 4px 10px;
margin-bottom: 20px;
}
.bd-badge-dark {
background: #e8e6de;
color: #0e1a2b;
}
.bd-badge-blue {
background: rgba(55, 124, 213, .12);
color: #377cd5;
}
.bd-card-title {
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.1;
color: #0e1a2b;
}
.bd-card-subtitle {
font-size: 13.5px;
font-weight: 300;
line-height: 1.72;
color: #6b7280;
}
/* Steps */
.bd-step {
padding: 16px 0;
border-top: 1px solid #e2e0d8;
}
.bd-step:last-of-type {
border-bottom: 1px solid #e2e0d8;
}
.bd-step-num {
font-family: 'Syne', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: .08em;
color: #c5c2b8;
min-width: 28px;
}
.bd-step-title {
font-size: 14px;
font-weight: 500;
color: #0e1a2b;
transition: color .25s;
}
.bd-step:hover .bd-step-title {
color: #377cd5;
}
.bd-step-body {
font-size: 12.5px;
font-weight: 300;
color: #9b9b8e;
line-height: 1.6;
}
/* CTA buttons */
.bd-btn {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
padding: 16px 24px;
border-radius: 10px;
transition: opacity .2s, transform .2s;
}
.bd-btn:hover {
opacity: .88;
transform: translateY(-1px);
text-decoration: none;
color: #fff;
}
.bd-btn-dark {
background: #0e1a2b;
color: #fff;
}
.bd-btn-blue {
background: #377cd5;
color: #fff;
}
/* Section heading pill */
.bd-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #e8e6de;
border-radius: 20px;
padding: 6px 14px;
font-size: 11px;
font-weight: 500;
color: #6b7280;
letter-spacing: .06em;
}
.bd-pill span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #377cd5;
display: block;
}
.elt-si {
font-size: 12px !important;
font-weight: 400;
font-style: italic;
}
.support-container {
padding: 0 24px 24px;
}
.support-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: #60a5fa;
background: rgba(37, 99, 235, 0.1);
border: 1px solid rgba(59, 130, 246, 0.25);
transition: all 0.3s ease;
backdrop-filter: blur(6px);
}
/* Icon */
.support-icon {
width: 18px;
height: 18px;
stroke-width: 2;
}
/* Hover Effect */
.support-btn:hover {
background: rgba(37, 99, 235, 0.2);
border-color: rgba(59, 130, 246, 0.5);
color: #93c5fd;
transform: translateY(-1px);
}
/* Active Click Effect */
.support-btn:active {
transform: scale(0.97);
}
.capability-matrix .cm-feature-category-blue {
font-size: 10px;
color: #3b82f6;
font-weight: 900;
letter-spacing: 1.6px;
line-height: 1.4;
}
.feature-item {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.info-wrapper {
position: relative;
display: inline-flex;
/* important */
align-items: center;
width: auto;
/* prevent full width */
flex: 0 0 auto;
/* don't stretch inside flex */
}
.info-icon {
width: 16px;
height: 16px;
font-size: 11px;
font-weight: bold;
color: #3b82f6;
border: 1px solid #3b82f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.tooltip {
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
background: #111;
color: #fff;
font-size: 12px;
padding: 8px 10px;
border-radius: 6px;
width: max-content;
/* shrink to content */
max-width: 220px;
/* control width */
white-space: normal;
/* allow wrapping */
opacity: 0;
pointer-events: none;
transition: 0.2s ease;
}
/* Arrow */
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #111 transparent transparent transparent;
}
/* Show on hover */
.info-wrapper:hover .tooltip {
opacity: 1;
}
/* All styles scoped strictly inside .remit-case-ind to prevent global conflicts */
.remit-case-ind {
font-family: 'Inter', sans-serif;
color: #161C2D;
background-color: #FFFFFF;
}
/* --- Custom Scoped Badges --- */
.remit-case-ind .badge-custom {
font-size: 0.75rem;
font-weight: 600;
padding: 0.4rem 0.8rem;
border-radius: 30px;
letter-spacing: 0.05em;
text-transform: uppercase;
display: inline-block;
}
.remit-case-ind .badge-fintech {
background: rgba(55, 124, 213, 0.1);
color: rgb(55, 124, 213);
}
.remit-case-ind .badge-saas {
background: rgba(138, 63, 252, 0.1);
color: #8A3FFC;
}
.remit-case-ind .badge-enterprise {
background: rgba(36, 161, 72, 0.1);
color: #24A148;
}
.remit-case-ind .badge-web3 {
background: rgba(241, 196, 15, 0.1);
color: #D68F00;
}
/* --- Header Section --- */
.remit-case-ind .jumbotron-header {
background-image: url(../img/remit-hero.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
align-items: center;
padding-top: 100px;
padding-bottom: 70px
}
.remit-case-ind .header-title {
font-size: 2.8rem;
line-height: 1.2;
color: #fff;
letter-spacing: -0.02em;
}
/* --- Filter Navigation --- */
.remit-case-ind .filter-container {
position: sticky;
top: 77px;
z-index: 100;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid #E0E6ED;
padding: 1rem 0;
margin-bottom: 3rem;
}
.remit-case-ind .filter-btn {
background: transparent;
border: 1px solid transparent;
color: #4F5E71;
font-weight: 500;
padding: 0.6rem 1.4rem;
border-radius: 30px;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 0.95rem;
margin: 0.2rem 0.3rem;
cursor: pointer;
outline: none;
}
.remit-case-ind .filter-btn:hover {
color: rgb(55, 124, 213);
background: rgba(55, 124, 213, 0.05);
}
.remit-case-ind .filter-btn.active {
background: rgb(55, 124, 213);
color: #FFFFFF;
font-weight: 600;
box-shadow: 0 4px 15px rgba(55, 124, 213, 0.25);
}
/* --- Case Study Cards --- */
.remit-case-ind .case-card {
border: 1px solid #E0E6ED;
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.remit-case-ind .case-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(15, 28, 45, 0.08);
border-color: rgba(55, 124, 213, 0.3);
}
/* Visual image headers */
.remit-case-ind .card-visual-header {
height: 220px;
position: relative;
overflow: hidden;
background-color: #0B0F19;
}
.remit-case-ind .card-visual-header img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.remit-case-ind .case-card:hover .card-visual-header img {
transform: scale(1.08);
}
/* Dark overlay gradient for readability and premium look */
.remit-case-ind .card-visual-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(11, 15, 25, 0.1) 0%, rgba(11, 15, 25, 0.4) 100%);
pointer-events: none;
}
.remit-case-ind .card-body-content {
padding: 2rem;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.remit-case-ind .card-title-link {
color: #0B0F19;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none !important;
}
.remit-case-ind .case-card:hover .card-title-link {
color: rgb(55, 124, 213);
}
/* Stat Counter Badge inside Card */
.remit-case-ind .stat-block {
border-top: 1px dashed #E0E6ED;
padding-top: 1.25rem;
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.remit-case-ind .stat-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.35rem;
font-weight: 800;
color: rgb(55, 124, 213);
line-height: 1;
}
.remit-case-ind .stat-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.5;
color: #4F5E71;
margin-bottom: 5px;
}
/* --- Featured Case Study Layout (SDK Finance style hero card) --- */
.remit-case-ind .featured-card {
border: 1px solid #E0E6ED;
border-radius: 20px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 10px 30px rgba(15, 28, 45, 0.04);
margin-bottom: 4rem;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.remit-case-ind .featured-card:hover {
box-shadow: 0 25px 50px rgba(15, 28, 45, 0.09);
border-color: rgba(55, 124, 213, 0.2);
}
.remit-case-ind .featured-visual {
height: 100%;
min-height: 440px;
position: relative;
overflow: hidden;
background-color: #0B0F19;
}
.remit-case-ind .featured-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.remit-case-ind .featured-card:hover .featured-visual img {
transform: scale(1.04);
}
.remit-case-ind .featured-visual::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(11, 15, 25, 0.3) 0%, rgba(11, 15, 25, 0.05) 100%);
pointer-events: none;
}
/* --- Read More Arrows --- */
.remit-case-ind .read-more-btn {
font-weight: 600;
font-size: 0.9rem;
color: #fff;
display: inline-flex;
align-items: center;
text-decoration: none !important;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
line-height: 1.2;
}
.remit-case-ind .read-more-btn .arrow-icon {
margin-left: 6px;
width: 16px;
height: 16px;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.remit-case-ind .case-card:hover .read-more-btn .arrow-icon,
.remit-case-ind .featured-card:hover .read-more-btn .arrow-icon {
transform: translateX(5px);
}
/* --- Footer Section --- */
.remit-case-ind .cta-section {
background: #0B0F19;
color: #FFFFFF;
padding: 5rem 0;
margin-top: 6rem;
position: relative;
overflow: hidden;
}
/* --- Filter Animations --- */
.remit-case-ind .col-case-item {
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.remit-case-ind .col-case-item.filtered-out {
opacity: 0;
transform: scale(0.92);
pointer-events: none;
visibility: hidden;
}
/* Empty State Layout styles */
.remit-case-ind .empty-state-wrapper {
display: none;
text-align: center;
padding: 4.5rem 2rem;
background: #F4F7FB;
border-radius: 16px;
border: 2px dashed #E0E6ED;
margin: 2rem 15px;
width: 100%;
animation: fadeInState 0.5s ease forwards;
}
@keyframes fadeInState {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.remit-case-ind .empty-state-icon {
width: 120px;
height: 120px;
margin-bottom: 1.5rem;
color: rgb(55, 124, 213);
}
/* Primary Dynamic Action Button */
.remit-case-ind .btn-premium {
background: rgb(55, 124, 213);
color: #FFFFFF;
border-radius: 30px;
padding: 0.8rem 2rem;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
border: none;
box-shadow: 0 4px 15px rgba(55, 124, 213, 0.3);
}
.remit-case-ind .btn-premium:hover {
background: #255ea6;
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(55, 124, 213, 0.4);
}
.col-case-item {
transition: all .3s ease;
}
#remit-empty-state {
display: none;
width: 100%;
}
.featue-platform-module-section {
background: #f8fafc;
}
.featue-platform-module-card {
background: #fff;
padding: 30px;
border-radius: 18px;
border: 1px solid #e7eaf0;
transition: .3s;
}
.featue-platform-module-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}
.featue-platform-module-icon {
width: 65px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: #eef4ff;
color: #2563eb;
margin-bottom: 20px;
}
.featue-platform-module-card h4 {
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
}
.featue-platform-module-card p {
color: #6b7280;
margin-bottom: 20px;
}
.featue-platform-module-highlight {
background: #f5f9ff;
border: 1px solid #dbeafe;
padding: 12px;
border-radius: 10px;
color: #2563eb;
margin-bottom: 18px;
}
.featue-platform-module-tags span {
display: inline-block;
padding: 7px 14px;
background: #f3f4f6;
border-radius: 8px;
margin: 4px;
font-size: 13px;
}
@media(max-width:767px) {
.featue-platform-module-card {
padding: 24px;
}
.featue-platform-module-card h4 {
font-size: 22px;
}
}
.your-current-platform-section {
background: #f5f7fb;
}
.your-current-platform-wrapper {
border-radius: 20px;
overflow: hidden;
background: #fff;
}
.your-current-platform-table {
background: #fff;
}
.your-current-platform-table th,
.your-current-platform-table td {
padding: 24px;
border-color: #e5e7eb;
vertical-align: middle;
}
.your-current-platform-table td:first-child {
font-weight: 600;
color: #1e293b;
background: #fafafa;
}
.your-current-platform-head-capability {
background: #fafafa;
text-transform: uppercase;
font-size: 13px;
color: #6b7280;
}
.your-current-platform-head-current {
background: #fff2f2;
color: #ef4444;
text-transform: uppercase;
font-size: 13px;
}
.your-current-platform-head-remitso {
background: #eefaf2;
color: #2563eb;
text-transform: uppercase;
font-size: 13px;
}
.your-current-platform-negative {
background: #fff7f7;
color: #dc2626;
}
.your-current-platform-positive {
background: #f2fbf5;
color: #166534;
font-weight: 600;
}
@media(max-width:768px) {
.your-current-platform-table th,
.your-current-platform-table td {
padding: 16px;
font-size: 14px;
}
}
.strategic-planning-card-light-book ul li {
color: #6b7280 !important;
margin-bottom: 10px;
}
.integration-card {
background: #f7faff;
border: 1px solid #e6eef9;
border-radius: 16px;
padding: 35px 40px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.integration-title {
font-size: 26px;
font-weight: 700;
color: #1c2b39;
line-height: 1.3;
}
.integration-text {
font-size: 16px;
color: #6b7a90;
line-height: 1.7;
max-width: 700px;
}
.custom-integration-btn {
display: inline-block;
background: #377cd5;
padding: 14px 28px;
border-radius: 10px;
color: #fff !important;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.custom-integration-btn:hover {
background: #2d69b7;
color: #fff !important;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(55, 124, 213, 0.25);
}
@media (max-width: 767px) {
.integration-card {
padding: 25px 20px;
text-align: center;
}
.integration-title {
font-size: 22px;
}
.custom-integration-btn {
width: 100%;
margin-top: 15px;
}
}
.mig-story {
background: #f8fafc;
border-radius: 20px;
padding: 30px;
border: 1px solid #e7eaf0;
transition: .3s;
}
.pricing-info-box {
background: #00374a;
border: 2px solid #ffffff0d;
border-radius: 1rem;
overflow: hidden;
}
.pricing-content {
padding: 30px;
height: 100%;
}
.pricing-content h5 {
color: #ffffff;
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
}
.pricing-content p {
color: #cbd5e1;
font-size: 14px;
line-height: 1.8;
margin-bottom: 0;
}
.commission-title {
color: #3b82f6 !important;
}
.pricing-content-right {
border-left: 1px solid #334155;
}
/* Mobile */
@media (max-width: 767.98px) {
.pricing-content {
padding: 24px;
}
.pricing-content-right {
border-left: none;
border-top: 1px solid #334155;
}
.pricing-content h5 {
font-size: 16px;
}
.pricing-content p {
font-size: 13px;
}
}
.support-capacity-card {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 10px;
padding: 18px 20px;
margin-bottom: 24px;
transition: all 0.3s ease;
}
.support-capacity-card:hover {
border-color: #3b82f6;
transform: translateY(-2px);
}
.support-label {
display: block;
color: #60a5fa;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 8px;
}
.support-value {
color: #ffffff;
font-size: 18px;
font-weight: 600;
line-height: 1.4;
}
/* Mobile */
@media (max-width: 767px) {
.support-capacity-card {
padding: 16px;
}
.support-value {
font-size: 16px;
}
}
.pricing-toggle-switch {
display: inline-flex;
align-items: center;
background: #00374a;
border: 2px solid #ffffff0d;
padding: 5px;
border-radius: 12px;
}
.pricing-toggle-btn {
background: transparent;
border: 1px solid transparent;
color: #94a3b8;
padding: 10px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
transition: all .3s ease;
outline: none !important;
}
.pricing-toggle-btn:hover {
color: #fff;
}
.pricing-toggle-btn.active {
background: #111a2c;
border-color: #334155;
color: #fff;
}
.pricing-toggle-badge {
display: inline-block;
margin-left: 6px;
padding: 3px 8px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
border-radius: 20px;
background: rgba(34, 197, 94, .15);
color: #22c55e;
}
@media (max-width: 576px) {
.pricing-toggle-switch {
width: 100%;
flex-direction: column;
}
.pricing-toggle-btn {
width: 100%;
}
}
.b237-ops {
--b237-navy: #0b1f3a;
--b237-blue: #1a6bdc;
--b237-blue-soft: #e8f1fb;
--b237-line: #c5d8f0;
--b237-muted: #5a6b7d;
--b237-border: #d7e3f0;
background: linear-gradient(165deg, #f7fafc 0%, #eef4fb 55%, #f8fbff 100%);
border: 1px solid var(--b237-border);
border-radius: 18px;
padding: 28px 24px 12px;
margin: 38px 0 10px;
overflow: hidden;
}
.b237-ops__title {
font-family: Syne, 'Segoe UI', sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
text-align: center;
color: var(--b237-muted);
margin: 0 0 28px;
}
.b237-ops__track {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
max-width: 720px;
margin: 0 auto;
padding: 0 4px 8px;
}
.b237-ops__track::before {
content: '';
position: absolute;
left: 27px;
top: 28px;
bottom: 40px;
width: 2px;
background: linear-gradient(180deg, var(--b237-blue), var(--b237-line) 70%, transparent);
z-index: 0;
}
.b237-ops__step {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: start;
padding-bottom: 22px;
}
.b237-ops__step:last-child {
padding-bottom: 8px;
}
.b237-ops__num {
width: 54px;
height: 54px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-family: Syne, 'Segoe UI', sans-serif;
font-size: 15px;
font-weight: 800;
color: #fff;
background: linear-gradient(145deg, #1a6bdc 0%, #0e4fa8 100%);
box-shadow: 0 8px 18px rgba(26, 107, 220, .28);
flex-shrink: 0;
}
.b237-ops__card {
background: #fff;
border: 1px solid var(--b237-border);
border-radius: 14px;
padding: 16px 18px 14px;
box-shadow: 0 2px 10px rgba(11, 31, 58, .04);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.b237-ops__step:hover .b237-ops__card {
border-color: #a9c6ea;
box-shadow: 0 8px 22px rgba(26, 107, 220, .1);
transform: translateY(-1px);
}
.b237-ops__label {
display: block;
font-family: Syne, 'Segoe UI', sans-serif;
font-size: 16px;
font-weight: 800;
color: var(--b237-navy);
margin: 0 0 6px;
line-height: 1.3;
}
.b237-ops__text {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: var(--b237-muted);
}
.b237-ops__caption {
font-size: 13px;
color: var(--b237-muted);
text-align: center;
font-style: italic;
margin: 8px 0 38px;
}
@media (max-width: 575.98px) {
.b237-ops {
padding: 22px 14px 8px;
border-radius: 14px;
}
.b237-ops__title {
font-size: 11.5px;
letter-spacing: .1em;
margin-bottom: 20px;
line-height: 1.45;
}
.b237-ops__track::before {
left: 21px;
}
.b237-ops__step {
grid-template-columns: 44px 1fr;
gap: 10px;
padding-bottom: 16px;
}
.b237-ops__num {
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 13px;
box-shadow: 0 4px 12px rgba(26, 107, 220, .22);
}
.b237-ops__card {
padding: 12px 13px 12px;
border-radius: 12px;
}
.b237-ops__label {
font-size: 14.5px;
}
.b237-ops__text {
font-size: 13.5px;
line-height: 1.6;
}
.b237-ops__step:hover .b237-ops__card {
transform: none;
}
}
.des-plan-card {
position: relative;
overflow: hidden;
}
.pricing-recommended-badge {
position: absolute;
top: 0px;
background: linear-gradient(36deg, #377cd5, #2563eb);
color: #fff;
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
padding: 8px 10px;
transform: rotate(0deg);
z-index: 10;
box-shadow: 0 4px 12px rgba(34, 197, 94, .35);
right: 0;
border-bottom-left-radius: 1rem;
}
.des-plan-card-blue {
border: 1px solid #377cd5;
box-shadow: 0 0 30px rgba(55, 124, 213, .08);
}
/* ======================== Mega Navbar (rs-nav) ======================== */
#top-beamer,
.beamer-header {
display: none !important;
}
body {
padding-top: 76px !important;
}
body.rs-nav-open {
overflow: hidden;
}
.rs-header,
#header.rs-header.fixed-top-head {
top: 0 !important;
background: #002a45;
z-index: 10050;
overflow: visible !important;
transition: box-shadow .25s ease;
padding: 5px 0;
}
body.rs-nav-open .rs-header {
z-index: 10080;
}
.rs-header.rs-header--scrolled {
box-shadow: 0 8px 28px rgba(0, 16, 32, .28);
}
.rs-header .logo img,
.rs-header__logo img {
max-height: 42px;
width: auto;
}
.rs-header>.container,
.rs-header .container.d-flex {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px;
overflow: visible !important;
min-height: 72px;
padding-top: 10px !important;
padding-bottom: 10px !important;
position: relative;
}
.rs-header__logo {
flex: 0 0 auto;
position: relative;
z-index: 3;
max-width: 42%
}
.rs-header__logo img {
display: block;
max-width: 150px;
width: auto;
height: auto;
}
.rs-header__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex: 0 0 auto;
margin-left: auto;
position: relative;
z-index: 3
}
.rs-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
position: static !important;
flex: 1 1 auto;
justify-content: flex-end;
min-width: 0;
overflow: visible !important;
}
.rs-nav__drawer-head,
.rs-nav__drawer-foot {
display: none !important;
}
.rs-nav__list {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 2px !important;
width: max-content !important;
flex: 0 0 auto !important;
overflow: visible !important;
}
.rs-nav__list>li {
position: static !important;
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
width: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Anchor each mega panel to its trigger (no extra padding — that shifted labels up) */
.rs-nav__list>li.rs-mega {
position: relative !important;
}
.rs-nav__list>li.rs-mega::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 0;
pointer-events: none;
}
.rs-mega:hover::after,
.rs-mega.is-open::after,
.rs-mega:focus-within::after {
height: 28px;
pointer-events: auto;
}
.rs-nav__link {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
color: #fff !important;
font-size: 13.5px;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
text-decoration: none !important;
background: transparent;
border: 0;
cursor: pointer;
white-space: nowrap !important;
transition: color .2s ease, background .2s ease;
border-radius: 8px;
line-height: 1.25;
font-family: inherit;
max-width: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
appearance: none;
-webkit-appearance: none;
vertical-align: middle;
box-sizing: border-box;
}
.rs-nav__link:hover,
.rs-nav__link:focus,
.rs-nav__link.is-active,
.rs-mega.is-open>.rs-mega__trigger,
.rs-mega.is-section-active>.rs-mega__trigger {
color: #7eb6ff !important;
outline: none;
text-decoration: none !important;
}
.rs-nav__chevron {
display: block;
transition: transform .2s ease;
flex-shrink: 0;
opacity: .85;
width: 13px;
height: 13px;
margin: 0;
position: relative;
top: 0;
}
/* Panels drop under their own trigger button */
.rs-mega__panel {
display: none !important;
position: absolute !important;
top: calc(100% + 6px);
left: 50%;
right: auto;
transform: translateX(-50%);
width: 560px;
max-width: calc(100vw - 32px);
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
padding: 18px;
margin: 0;
z-index: 10060;
}
.rs-mega__panel::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -20px;
height: 20px;
}
.rs-mega__panel--cols-2 {
width: 580px;
}
.rs-mega__panel--cols-3 {
width: min(860px, calc(100vw - 32px));
}
.rs-mega--wide .rs-mega__panel {
width: min(860px, calc(100vw - 32px));
left: 50%;
right: auto;
transform: translateX(-50%);
}
.rs-mega--end .rs-mega__panel {
left: auto;
right: 0;
transform: none;
}
.rs-mega.is-open>.rs-mega__panel,
.rs-mega:hover>.rs-mega__panel,
.rs-mega:focus-within>.rs-mega__panel {
display: block !important;
}
.rs-mega.is-open>.rs-mega__trigger .rs-nav__chevron,
.rs-mega:hover>.rs-mega__trigger .rs-nav__chevron,
.rs-mega:focus-within>.rs-mega__trigger .rs-nav__chevron {
transform: rotate(180deg);
}
.rs-mega__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rs-mega__panel--cols-3 .rs-mega__grid,
.rs-mega--wide .rs-mega__grid {
grid-template-columns: 1fr 1fr 1fr;
}
.rs-mega__item {
display: flex !important;
align-items: flex-start;
gap: 14px;
padding: 14px;
border-radius: 12px;
text-decoration: none !important;
color: #0f172a !important;
border: 1px solid transparent;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
white-space: normal !important;
text-transform: none !important;
max-width: none !important;
width: auto !important;
line-height: 1.4;
min-width: 0;
}
.rs-mega__item:hover,
.rs-mega__item:focus {
background: #f4f8fd;
border-color: #bfdbfe;
box-shadow: 0 6px 16px rgba(55, 124, 213, .08);
color: #0f172a !important;
outline: none;
}
.rs-mega__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #eff6ff;
color: #377cd5;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rs-mega__icon svg {
width: 22px;
height: 22px;
}
.rs-mega__text {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
}
.rs-mega__title {
display: block;
font-size: 14.5px;
font-weight: 700;
color: #0f172a;
line-height: 1.35;
white-space: normal;
}
.rs-mega__desc {
display: block;
font-size: 13px;
font-style: normal;
color: #64748b;
line-height: 1.5;
font-weight: 500;
white-space: normal;
}
.rs-nav__toggle {
display: none;
color: #fff;
cursor: pointer;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 0;
}
.rs-nav__toggle:focus {
outline: 2px solid #7eb6ff;
outline-offset: 2px;
border-radius: 8px;
}
.rs-nav__backdrop {
display: none;
}
@media (max-width: 1399.98px) and (min-width: 992px) {
.rs-nav__link {
padding: 10px 10px;
font-size: 12.5px;
}
.rs-mega__panel--cols-3 .rs-mega__grid,
.rs-mega--wide .rs-mega__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1199.98px) and (min-width: 992px) {
.rs-nav__link {
padding: 9px 8px;
font-size: 12px;
}
.rs-header__logo {
max-width: 130px
}
.rs-header__logo img {
max-width: 120px
}
.rs-header__support-btn {
padding: 8px 10px;
font-size: 11px
}
}
@media (max-width: 991.98px) {
body {
padding-top: 68px !important;
}
.rs-header>.container,
.rs-header .container.d-flex {
min-height: 64px;
gap: 10px
}
.rs-header__logo {
max-width: calc(100% - 200px)
}
.rs-header__logo img {
max-width: 130px
}
.rs-header__actions {
gap: 4px;
flex-shrink: 0
}
.rs-header__support-btn {
padding: 8px 10px;
font-size: 10.5px
}
.rs-nav__toggle {
display: inline-flex !important;
}
/* Backdrop covers only the page area LEFT of the drawer — never the drawer itself */
.rs-nav__backdrop {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: min(400px, 92vw);
width: auto;
inset: unset;
background: rgba(2, 18, 32, .55);
z-index: 10070;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s ease, visibility .25s ease;
}
.rs-nav__backdrop.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.rs-nav {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: min(400px, 100vw) !important;
height: 100vh !important;
height: 100dvh !important;
background: #002a45 !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
z-index: 10090 !important;
transform: translateX(105%);
transition: transform .3s ease;
box-shadow: -12px 0 40px rgba(0, 0, 0, .35);
padding: 0 !important;
overflow: hidden !important;
}
.rs-nav.is-open {
transform: translateX(0);
}
.rs-nav__drawer-head {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
flex-shrink: 0;
background: #002a45;
}
.rs-nav__drawer-logo img {
display: block;
height: 32px;
width: auto;
}
.rs-nav__drawer-close {
width: 40px;
height: 40px;
border: 0;
border-radius: 10px;
background: rgba(255, 255, 255, .1);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.rs-nav__list {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 2px !important;
flex: 1 1 auto !important;
width: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 10px 12px 16px !important;
}
.rs-nav__list::-webkit-scrollbar {
display: none;
}
.rs-nav__list>li {
width: 100% !important;
position: relative !important;
display: block !important;
}
.rs-nav__list>li.rs-mega {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.rs-nav__list>li.rs-mega::after {
display: none !important;
}
.rs-nav__link {
width: 100% !important;
justify-content: space-between;
padding: 14px 12px !important;
font-size: 15px !important;
border-radius: 10px;
color: #fff !important;
}
.rs-nav__link:hover,
.rs-nav__link.is-active {
background: rgba(255, 255, 255, .08);
color: #fff !important;
}
.rs-mega__panel {
position: static !important;
width: 100% !important;
max-width: none !important;
left: auto !important;
right: auto !important;
transform: none !important;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0 0 6px !important;
display: none !important;
}
.rs-mega__panel::before {
display: none;
}
.rs-mega>.rs-mega__panel {
display: none !important;
}
.rs-mega.is-open>.rs-mega__panel {
display: block !important;
}
.rs-mega__grid {
grid-template-columns: 1fr !important;
gap: 6px;
padding: 4px 0 4px 4px;
}
.rs-mega__item {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .1);
color: #fff !important;
padding: 12px;
}
.rs-mega__item:hover,
.rs-mega__item:focus {
background: rgba(55, 124, 213, .28);
border-color: rgba(126, 182, 255, .4);
color: #fff !important;
box-shadow: none;
}
.rs-mega__icon {
background: rgba(55, 124, 213, .3);
color: #b8d6ff;
}
.rs-mega__title {
color: #fff;
font-size: 14px;
}
.rs-mega__desc {
color: rgba(255, 255, 255, .72);
}
.rs-nav__drawer-foot {
display: block !important;
flex-shrink: 0;
padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(255, 255, 255, .12);
background: #001829;
}
.rs-nav__cta-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.rs-nav__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 18px;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
text-align: center;
text-decoration: none !important;
text-transform: none;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rs-nav__cta--primary {
background: #377cd5;
color: #fff !important;
border: 1px solid #377cd5;
box-shadow: 0 8px 20px rgba(55, 124, 213, .35);
}
.rs-nav__cta--primary:hover {
background: #2f6fc4;
border-color: #2f6fc4;
color: #fff !important;
}
.rs-nav__cta--secondary {
background: rgba(255, 255, 255, .08);
color: #fff !important;
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: none;
}
.rs-nav__cta--secondary:hover {
background: rgba(255, 255, 255, .12);
border-color: rgba(126, 182, 255, .45);
color: #fff !important;
}
}
.rs-header__support-btn {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin: 0;
padding: 9px 12px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
text-decoration: none !important;
color: #fff !important;
background: rgba(55, 124, 213, .22);
border: 1px solid rgba(126, 182, 255, .45);
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
white-space: nowrap;
line-height: 1.2
}
.rs-header__support-label--short {
display: none
}
.rs-header__support-btn:hover {
background: #377cd5;
border-color: #377cd5;
color: #fff !important;
box-shadow: 0 6px 16px rgba(55, 124, 213, .35)
}
@media (min-width: 992px) {
.rs-header__support-btn {
padding: 10px 14px;
font-size: 12px
}
}
@media (min-width: 1200px) {
.rs-header__support-btn {
padding: 10px 16px;
font-size: 12.5px
}
}
@media (max-width: 1280px) {
.rs-header__support-label--long {
display: none
}
.rs-header__support-label--short {
display: inline
}
}
@media (min-width: 1281px) {
.rs-header__support-label--long {
display: inline
}
.rs-header__support-label--short {
display: none
}
}
.client-support-modal__dialog {
max-width: min(1140px, 96vw);
margin: 1rem auto
}
.client-support-modal {
border: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px rgba(15, 39, 71, .18)
}
.client-support-modal__head {
align-items: flex-start;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc
}
.client-support-modal__head .modal-title {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #0f2747
}
.client-support-modal__sub {
margin: 0.25rem 0 0;
font-size: 0.85rem;
color: #64748b
}
.client-support-modal__actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-left: auto;
flex-shrink: 0
}
.client-support-modal__open-tab {
font-size: 0.82rem;
font-weight: 600;
color: #377cd5;
text-decoration: none;
white-space: nowrap
}
.client-support-modal__open-tab:hover {
color: #2a5fa8;
text-decoration: underline
}
.client-support-modal__close {
margin: 0;
padding: 0;
float: none;
font-size: 1.5rem;
line-height: 1;
opacity: 0.55
}
.client-support-modal__body {
padding: 0;
height: min(78vh, 820px);
background: #fff;
display: flex;
flex-direction: column
}
.client-support-modal__iframe {
flex: 1 1 auto;
width: 100%;
min-height: 0;
border: 0;
background: #fff
}
.client-support-modal__fallback {
margin: 0;
padding: 0.65rem 1rem;
font-size: 0.8rem;
text-align: center;
color: #64748b;
border-top: 1px solid #e2e8f0;
background: #f8fafc
}
.client-support-modal__fallback a {
color: #377cd5;
font-weight: 600
}
@media (max-width: 575px) {
.client-support-modal__head {
flex-direction: column;
gap: 0.75rem
}
.client-support-modal__actions {
width: 100%;
justify-content: space-between
}
.client-support-modal__body {
height: min(72vh, 720px)
}
}
.cds-card span {
color: #60a5fa;
}
/* ---------------------------------------------------------------------------
Accessibility fixes for the legacy layout (2026-10-07, TODO.md Part B)
--------------------------------------------------------------------------- */
/* layout/default.php wraps pages that have no of their own; keep it invisible */
main.layout-main {
background-color: transparent
}
/* "Skip to content" link: hidden until it receives keyboard focus */
.skip-link.sr-only-focusable:focus {
position: fixed;
top: 8px;
left: 8px;
z-index: 20000;
width: auto;
height: auto;
padding: 10px 14px;
background: #fff;
color: #002a45;
border-radius: 8px;
font-weight: 600;
box-shadow: 0 6px 20px rgba(0, 0, 0, .25)
}
/* visible keyboard focus in the header (several rules above remove the outline) */
.rs-header a:focus-visible,
.rs-header button:focus-visible,
.rs-nav a:focus-visible,
.rs-nav button:focus-visible {
outline: 2px solid #7eb6ff;
outline-offset: 2px
}