.integration-section{
position:relative;
padding:100px 0;
overflow:hidden;
}
/* LEFT BIG CIRCLE */
.integration-section .main-circle{
position:relative;
animation:float 5s ease-in-out infinite;
}
/* LIGHT BLUE BUTTONS */
.integration-section .node-btn{
position:absolute;
padding: 7px 16px 7px 16px;
border-radius: 24820810px;
background: #DBEAFE;
color: #1447E6;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18.493px;
cursor:pointer;
transition:all .3s ease;
animation:fadeUp 1s ease forwards;
opacity:0;
z-index: 99;
text-decoration: none;
}
.integration-section .node-btn:hover{
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
color:#fff;
}
/* POSITIONING LEFT SIDE */
.integration-section .btn1{ top:0%; left:2%; animation-delay:.3s;}
.integration-section .btn2{ right: 20%; top: 10%; animation-delay:.5s;}
.integration-section .btn3{ top: 45%; left: 20%; animation-delay:.7s;}
.integration-section .btn4{ bottom:0%; left:2%; animation-delay:.9s;}
.integration-section .btn5{ bottom:10%; right:20%; animation-delay:.12s;}
/* POSITIONING LEFT SIDE */
.integration-section .rbtn1{ top:0%; right:2%; animation-delay:.3s;}
.integration-section .rbtn2{ left: 20%; top: 10%; animation-delay:.5s;}
.integration-section .rbtn3{ top: 45%; right: 20%; animation-delay:.7s;}
.integration-section .rbtn4{ bottom:0%; right:2%; animation-delay:.9s;}
.integration-section .rbtn5{ bottom:10%; left:20%; animation-delay:.12s;}
.integration-section .line{
position:absolute;
width:fit-content;
opacity:0;
animation:fadeLine 1.2s ease forwards;
}
.integration-section .l1{ 
top: -1%;
left: 15%;
animation-delay:.4s;}
.integration-section .l2{    
top: 50%;
left: 15%;
animation-delay:.6s;}
.integration-section .l3{ 
bottom: -1%;
left: 15%;
animation-delay:1s;
}
.integration-section .rl1{ 
top: -1%;
right: 15%;
transform: rotateY(180deg);
animation-delay:.4s;}
.integration-section .rl2{    
top: 50%;
right: 15%;
transform: rotateY(180deg);
animation-delay:.6s;
}
.integration-section .rl3{ 
bottom: -1%;
right: 15%;
animation-delay:1s;
transform: rotateY(180deg);
}
/* ANIMATIONS */
@keyframes float{
0%{ transform:translateY(0px);}
50%{ transform:translateY(-12px);}
100%{ transform:translateY(0px);}
}
@keyframes fadeUp{
from{ opacity:0; transform:translateY(20px);}
to{ opacity:1; transform:translateY(0);}
}
@keyframes zoomIn{
from{ transform:scale(.6); opacity:0;}
to{ transform:scale(1); opacity:1;}
}
@keyframes fadeLine{
to{ opacity:1;}
}
@media(max-width:992px){
.integration-section .integration-section{
padding:60px 0;
}
.integration-section .main-btn
{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.integration-section .node-btn
{
position: static;
margin: 1rem 0.5rem;
}
.integration-section .main-line
{
display: none;
}
.integration-section .main-circle
{
display: flex;
justify-content: center;
align-items: center;
}
}
.workflow-section {
position: relative;
}
/* Header */
.workflow-section .workflow-title {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: -1.92px;
}
.workflow-section .workflow-subtitle {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-weight: 700;
line-height: 150%;
letter-spacing: -1.92px;
}
.workflow-section .workflow-text {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
font-size: 20px;
font-weight: 400;
line-height: 200%;
}
/* Vertical Line */
.workflow-section .timeline-wrapper {
position: relative;
margin-top: 60px;
}
.workflow-section .timeline-wrapper::before {
content: '';
position: absolute;
width: 3px;
background: linear-gradient(to bottom, #7b3cff, #4c2cff);
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* Dot Image */
.workflow-section .timeline-dot {
position: relative;
z-index: 2;
}
/* Content Card */
.workflow-section .timeline-content {
padding: 25px;
transition: 0.3s;
margin-bottom: 1.5rem;
}
.workflow-section .timeline-content h6 {
color: #060B13;
font-size: 24px;
font-weight: 600;
line-height: 39.6px;
}
.workflow-section .timeline-content p {
color: #4A5565;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.workflow-section .timeline-content:hover {
transform: translateY(-5px);
}
.workflow-section .step-number {
color: #99A1AF;
font-size: 72px;
font-weight: 700;
line-height: 72px;
display: block;
margin-bottom: 8px;
}
/* Image Card */
.workflow-section .timeline-image {
padding: 15px;
transition: 0.3s;
margin-bottom: 1.5rem;
}
.workflow-section .timeline-image:hover {
transform: translateY(-5px);
}
.workflow-section .workflow-btn {
border-radius: 8px;
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.05) inset,
0 1px 3px 0 rgba(255, 255, 255, 0.12) inset,
0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(6px);
color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 700;
padding: 12px 16px;
}
.workflow-section .workflow-btn:hover {
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.05) inset,
0 1px 3px 0 rgba(255, 255, 255, 0.12) inset,
0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(6px);
color: #FFF;
}
/* Responsive */
@media (max-width: 991px) {
.workflow-section .timeline-wrapper::before {
left: 20px;
}
.workflow-section .timeline-row .row {
flex-direction: column;
}
.workflow-section .timeline-dot {
margin-left: -24px;
text-align: left;
}
.workflow-section .timeline-content,
.workflow-section .timeline-image {
text-align: left !important;
margin-bottom: 1.5rem;
}
}
.business-section .business-section__title {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
}
.business-section .business-section__subtitle {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
}
.business-section .business-section__text {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
.business-section .business-section__feature-box {
padding: 10px 20px;
text-align: center;
}
.business-section .business-section__icon {
width: 80px;
}
.business-section .business-section__feature-title {
color: #060B13;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 500;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
line-height: 39.6px; /* 165% */
padding-bottom: 16px;
margin-bottom: 10px;
}
.business-section .business-section__feature-text {
color: #4A4A4A;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 32px */
letter-spacing: -0.07px;
}
.business-section .business-section__cta-card {
border-radius: 40px;
background: var(--frre, linear-gradient(90deg, #141B5D 0%, #9810FA 100%));
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.business-section .business-section__cta-title {
color: #FFF;
text-align: center;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 120% */
}
.business-section .business-section__cta-text {
color: #BEDBFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.business-section .business-section__cta-btn {
border-radius: 16px;
background: #FFF;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
color: #141B5D;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 16.5px; /* 150% */
letter-spacing: 1.1px;
text-transform: uppercase;
padding: 12px 24px;
}
/* ===============================
BUSINESS SECTION STYLING
=================================*/
.business-section .business-badge {
display: inline-block;
border-radius: 26843500px;
background: #DBEAFE;
padding: 8px 18px;
color: #1447E6;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
margin-bottom: 20px;
}
.business-section .business-title {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
}
.business-section .business-title span {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
}
.business-section .business-desc {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
.business-section .business-card {
border-radius: 40px;
border: 0.8px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
padding: 30px;
height: 100%;
transition: 0.3s ease;
}
.business-section .business-card:hover {
transform: translateY(-5px);
}
.business-section .business-card h5 {
color: #060B13;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 165% */
margin-bottom: 10px;
}
.business-section .business-card p {
color: #4A5565;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 32px */
}
.business-section .business-image {
max-width: 100%;
}
.business-section .sync-badge {
position: absolute;
bottom: 20px;
left: 0;
background: #1abc9c;
color: #fff;
padding: 12px 20px;
border-radius: 0 30px 30px 0;
font-size: 13px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
/* Responsive */
@media(max-width:991px){
.business-section .business-title {
font-size: 26px;
}
}
/* ===========================
ER SECTION STYLES
=========================== */
.er-section {
padding: 80px 0;
}
/* Badge */
.er-section .er-badge {
display: inline-block;
border-radius: 26843500px;
background: #DBEAFE;
padding: 8px 20px;
color: #1447E6;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
margin-bottom: 15px;
}
/* Title */
.er-section .er-title {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
}
.er-section .er-title span {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
}
.er-section .er-right-text {
color: #6A7282;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 29.25px; /* 162.5% */
}
/* Cards */
.er-section .er-card {
border-radius: 24px;
border: 1.044px solid #F3F4F6;
background: #F8F9FA;
box-shadow: 0 1.305px 3.916px 0 rgba(0, 0, 0, 0.10), 0 1.305px 2.611px -1.305px rgba(0, 0, 0, 0.10);
padding: 30px;
}
.er-section .er-card p {
color: #6A7282;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 36px */
}
.er-section .er-big-number {
color: #141B5D;
font-size: 93.984px;
font-style: normal;
font-weight: 900;
line-height: 93.984px; /* 100% */
letter-spacing: -4.699px;
}
.er-section .er-big-number span {
color: #D1D5DC !important;
font-size: 39.16px !important;
font-style: normal;
font-weight: 300 !important;
line-height: 46.992px;
letter-spacing: -4.699px;
}
.er-section .er-card.verified {
display: flex;
justify-content: space-between;
align-items: center;
}
.er-section .er-card h6
{
color: #99A1AF;
font-size: 14px;
font-style: normal;
font-weight: 900;
line-height: 19.58px; /* 150% */
letter-spacing: 1.958px;
}
.er-section .er-card strong
{
color: #99A1AF;
font-size: 14px;
font-style: normal;
font-weight: 900;
line-height: 19.58px; /* 139.857% */
letter-spacing: 1.305px;
}
.er-section .er-card span
{
color: #00BC7D;
font-size: 20px;
}
/* Bottom Feature Cards */
.er-section .er-feature-card {
border-radius: 40px;
border: 0.8px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
padding: 30px;
height: 100%;
transition: 0.3s ease;
}
.er-section .er-feature-card h5 {
color: #060B13;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 165% */
}
.er-section .er-feature-card p {
color: #4A5565;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 32px */
margin-bottom: 0;
}
.er-section .er-feature-card:hover {
transform: translateY(-5px);
}
/* Responsive */
@media(max-width:991px){
.er-section .er-title {
font-size: 26px;
}
.er-section .er-gradient-card h2 {
font-size: 60px;
}
}
.mouth-section .mouth-wrapper {
background: linear-gradient(135deg,#2b0a63,#a100ff);
border-radius: 25px;
padding: 70px 30px;
text-align: center;
color: #fff;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.mouth-section .mouth-title {
color: var(--Backgrounds-Primary, #FFF);
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 72px */
letter-spacing: -1.92px;
margin-bottom: 10px;
}
.mouth-section .mouth-subtitle {
color: var(--Colors-Neutral-100, #FFF);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-bottom: 50px;
}
.mouth-section .mouth-stat-card {
border-radius: 24px;
border: 0.8px solid #27272A;
background: #18181B;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
padding: 35px 20px;
color: #fff;
transition: 0.3s ease;
height: 100%;
}
.mouth-section .mouth-stat-card:hover {
transform: translateY(-8px);
}
.mouth-section .mouth-stat-number {
color: #FFF;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
margin-bottom: 10px;
}
.mouth-section .mouth-stat-desc {
color: var(--Colors-Neutral-100, #FFF);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 28px */
}
@media(max-width:768px){
.mouth-section .mouth-title {
font-size: 24px;
}
}
/* =====================================
CONNECTION SECTION STYLES
===================================== */
.connection-section {
padding: 80px 0;
}
.connection-section .connection-wrapper {
border-radius: 40px;
border: 0.8px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
padding: 60px 40px;
}
.connection-section .connection-title {
color: #141B5D;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 120% */
}
.connection-section .connection-subtitle {
color: #99A1AF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
margin-bottom: 50px;
}
.connection-section .connection-item {
text-align: center;
padding: 20px 30px;
position: relative;
}
.connection-section .connection-item img {
width: 80px;
margin-bottom: 15px;
}
.connection-section .connection-item h6 {
color: #141B5D;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 155.556% */
margin-bottom: 10px;
}
.connection-section .connection-item p {
color: #6A7282;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 25.2px */
}
/* Vertical Divider for Desktop */
@media(min-width:992px){
.connection-section .connection-divider {
border-right: 1px solid #e2e6ed;
}
}
/* Responsive Adjust */
@media(max-width:768px){
.connection-section .connection-wrapper {
padding: 40px 20px;
}
}
/* ===============================
INTEGRATION SECTION
================================= */
.integration-section {
padding: 80px 0;
}
/* Headings */
.integration-section .integration-small-title {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
margin-bottom: 16px;
}
.integration-section .integration-main-title {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
margin-bottom: 16px;
}
.integration-section .integration-subtitle {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-bottom: 30px;
}
/* Feature with image */
.integration-section .integration-feature {
margin-bottom: 50px;
}
.integration-section .integration-feature-image img {
width: 200px;
}
.integration-section .integration-feature-content h6 {
color: #060B13;
text-align: left;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 198% */
margin-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
padding-bottom: 16px;
}
.integration-section .integration-feature-content p {
color: #4A4A4A;
font-size: 16px;
font-style: normal;
text-align: left;
font-weight: 400;
line-height: 200%; /* 28px */
letter-spacing: -0.07px;
margin: 0;
}
/* Phone mockup */
.integration-section .integration-phone {
text-align: center;
}
.integration-section .integration-phone img {
max-width: 260px;
}
/* Bottom Cards */
.integration-section .integration-bottom-card {
padding: 30px;
height: 100%;
transition: 0.3s ease;
}
.integration-section .integration-bottom-card:hover {
transform: translateY(-8px);
}
.integration-section .integration-bottom-card h6 {
color: #060B13;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 198% */
margin-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
padding-bottom: 16px;
}
.integration-section .integration-bottom-card p {
color: #4A4A4A;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 28px */
letter-spacing: -0.07px;
}
.integration-section .integration-bottom-card img {
width: 100%;
margin-bottom: 1rem;
}
/* Responsive */
@media(max-width:991px){
.integration-section .integration-main-title {
font-size: 26px;
}
.integration-section .integration-feature {
flex-direction: column !important;
text-align: center;
}
.integration-section .integration-feature-image img {
width: 140px;
}
.integration-section .integration-phone {
margin: 40px 0;
}
}
.integrate-section{
border-radius: 40px;
border: 0.8px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
padding:60px 40px;
}
/* Headings */
.integrate-section .section-label{
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
margin-bottom: 1.5rem;
}
.integrate-section .section-title{
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
margin-bottom: 1.5rem;
}
/* Right Info Cards */
.integrate-section .info-card{
border-radius: 16px;
border: 0.998px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1.247px 3.741px 0 rgba(0, 0, 0, 0.10), 0 1.247px 2.494px -1.247px rgba(0, 0, 0, 0.10);
display:flex;
gap:15px;
align-items:center;
transition:0.3s ease;
margin-left: 50px;
}
.integrate-section .info-card:hover{
transform:translateX(6px);
}
.integrate-section .info-card img{
width: 100px;
margin-left: -50px;
padding-right: 0px;
}
.integrate-section .info-card p{
margin:0;
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 32px */
margin-bottom: 0;
margin-left: 1rem;
}
@media(max-width:991px){
.integrate-section .organ-wrapper{
margin-bottom:40px;
}
.integrate-section .section-title {
font-size: 33px;
}
.integrate-section {
padding: 30px 20px;
}
.connection-section .connection-item {
padding: 0px 0px;
}
.integration-section .integration-main-title {
text-align: center;
}
.integration-section .integration-feature-image img {
width: 100%;
}
.workflow-section .workflow-title {
font-size: 33px;
}
.business-section .business-title span {
font-size: 33px;
}
}