body{
background: #F9FAFB;
}
.sleep-stats-section {
border-radius: 24px 24px 0 0;
background: linear-gradient(90deg, #141B5D -18.06%, #9810FA 149.69%);
margin: 40px;
color: #ffffff;
}
/* Title */
.stats-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;
}
.stats-title span {
color: #e9d5ff;
}
/* Description */
.stats-desc {
color: var(--Colors-Neutral-100, #FFF);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
/* Cards */
.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: 28px 24px;
text-align: center;
height: 100%;
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-6px);
}
.stat-card h3 {
color: #FFF;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
line-height: 1.1;
}
.stat-card h3 span {
font-size: 20px;
font-weight: 600;
display: block;
margin-top: 4px;
}
.stat-card p {
color: var(--Colors-Neutral-100, #FFF);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 28px */
margin-top: 12px;
margin-bottom: 0;
}
/* Bottom Image */
.people-img {
max-width: 720px;
margin-top: 20px;
}
/* Responsive */
@media (max-width: 991px) {
.stats-title {
font-size: 28px;
}
.sleep-stats-section {
margin: 20px;
}
}
/* Title */
.seeing-title {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 72px */
letter-spacing: -1.92px;
}
/* Cards */
.seeing-card {
border-radius: 16px;
border: 1px solid #D8D8D8;
border-radius: 14px;
padding: 20px;
position: relative;
height: 100%;
text-align: center;
transition: transform 0.3s ease;
}
.seeing-card:hover {
transform: translateY(-5px);
}
.seeing-card img {
margin-bottom: 12px;
}
.seeing-card p {
color: #64645A;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
letter-spacing: -0.16px;
margin: 0;
background: #FFF;
padding: 17px 13px 18px 13px;
}
/* Pin Image */
.pin-img {
position: absolute;
top: -10px;
right: -10px;
width: 26px;
height: auto;
z-index: 2;
}
/* Doctor Card */
.doctor-card {
padding: 30px 24px;
border-radius: 16px;
border: 1px solid #D8D8D8;
}
.doctor-text {
color: #64645A;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 171.429% */
letter-spacing: -0.16px;
}
.doctor-card .btn-primary {
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-style: normal;
font-weight: 700;
line-height: normal;
padding: 12px 22px;
}

.infra-section {
background: #ffffff;
}
/* Pill */
.infra-pill {
padding: 10px 12px;
border-radius: 26843500px;
background: #DBEAFE;
color: #1447E6;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}
/* Title */
.infra-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;
}
.infra-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;
}
/* Description */
.infra-desc {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
max-width: 900px;
margin: auto;
line-height: 150%; /* 40px */
}
.infra-desc-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-style: normal;
font-weight: 700;
line-height: normal;
padding: 12px 22px;
}
.infra-desc-btn:hover {
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-style: normal;
font-weight: 700;
line-height: normal;
padding: 12px 22px;
}
/* Cards */
.infra-card {
border-radius: 24px;
border: 1px solid #E2E2E4;
background: #FFF;
padding: 26px 24px 30px;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infra-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px rgba(0,0,0,0.12);
}
.infra-card img {
width: 100%;
margin-bottom: 18px;
}
.infra-card h5 {
color: #060B13;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 165% */
color: #0f172a;
border-bottom: rgba(0, 0, 0, 0.10) solid 1px;
padding-bottom: 16px;
margin-bottom: 16px;
}
.infra-card p {
color: #4A4A4A;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 32px */
letter-spacing: -0.07px;
}
/* Button */
.btn-primary {
background: #312e81;
border-color: #312e81;
}
/* Responsive */
@media (max-width: 991px) {
.infra-title {
font-size: 28px;
}
}
.service-pays {
border-radius: 24px 24px 0 0;
background: linear-gradient(90deg, #141B5D -18.06%, #9810FA 149.69%);
margin: 40px;
color: #fff;
padding: 70px 0;
}
/* Heading */
.service-title {
color: var(--Backgrounds-Primary, #FFF);
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 72px */
letter-spacing: -1.92px;
max-width: 900px;
margin: auto;
}
.service-desc {
color: var(--Colors-Neutral-100, #FFF);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 40px */
max-width: 900px;
margin: auto;
}
/* Benefit Cards */
.benefit-card {
border-radius: 16px;
border: 0.8px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.05);
padding: 26px;
height: 100%;
transition: 0.3s;
}
.benefit-card:hover {
transform: translateY(-6px);
background: rgba(255,255,255,0.12);
}
.benefit-card h5 {
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 140% */
margin-bottom: 10px;
}
.benefit-card p {
color: #F0FDF4;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.75px; /* 162.5% */
}
/* Revenue Card */
.revenue-card {
border-radius: 24px;
background: #FFF;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
color: #0f172a;
padding: 28px;
position: relative;
}
.revenue-badge {
position: absolute;
top: -15px;
right: -5px;
border-radius: 26843500px;
background: #9810FA;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 142.857% */
padding: 6px 14px;
}
.revenue-card h5 {
color: #141B5D;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 155.556% */
}
.revenue-item {
border-radius: 14px;
border: 0.8px solid #F3F4F6;
background: #F9FAFB;
padding: 14px 16px;
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 14px;
}
.revenue-item span {
color: #4A5565;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}
.revenue-item strong {
color: #141B5D;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
}
.revenue-item span {
color: #4A5565;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}
.revenue-note {
border-radius: 14px;
border: 0.8px solid #DBEAFE;
background: #EFF6FF;
padding: 12px;
color: #141B5D;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 19.5px; /* 162.5% */
margin-top: 15px;
}
/* Button */
.revenue-card .btn-dark {
border-radius: 14px;
background: #141B5D;
border: none;
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
padding: 10px 22px;
}
/* Responsive */
@media(max-width:991px){
.service-title{
font-size: 28px;
}
.service-pays{
margin:20px;
}
}
/* Title */
.main-title {
color: #141B5D;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 60px; /* 125% */
}
.main-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;
}
.subtitle {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-top: 10px;
max-width: 900px;
}
/* Cards */
.custom-card {
border-radius: 49.877px;
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);
padding: 30px;
border-radius: 20px;
transition: 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
}
.custom-card h5 {
color: #141B5D;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 39.902px; /* 124.693% */
}
.custom-card p{
color: #99A1AF;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 36px */
}
.custom-card h6{
color: #141B5D;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 34.914px; /* 145.475% */
}
.custom-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.big-number {
font-size: 48px;
font-weight: 700;
color: #6a11cb;
}
.custom-card .efficiency {
color: #141B5D;
font-size: 88px;
font-style: normal;
font-weight: 700;
line-height: 89.779px; /* 102.021% */
letter-spacing: -4.489px;
}
/* Mini Card */
.mini-card {
background: #f9f9ff;
padding: 20px;
border-radius: 15px;
}
.progress {
height: 8px;
background: #eee;
border-radius: 20px;
}
.progress-bar {
background: linear-gradient(90deg, #6a11cb, #9b4dff);
border-radius: 20px;
}
/* Checklist */
.checklist-box {
border-radius: 10.877px;
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);
}
.checklist-box h6 {
color: #141B5D;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 24.939px; /* 103.911% */
}
.checklist-box p {
color: #6A7282;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.badge-pill {
border-radius: 14px;
border: 0.998px solid #F3F4F6;
background: #F9FAFB;
color: #141B5D;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 18.704px; /* 133.599% */
padding: 8px 14px;
display: flex;
justify-content: center;
align-items: center;
}
.checklist-box .btn-support {
border-radius: 14px;
background: #141B5D;
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
padding: 8px 14px;
display: flex;
justify-content: center;
align-items: center;
}
.checklist-box .btn-support:hover {
background: #6a11cb;
color: #fff;
}
/* Code Cards */
.code-card {
border-radius: 19.951px;
border: 0.998px solid rgba(255, 255, 255, 0.40);
background: rgba(255, 255, 255, 0.50);
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);
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.05);
transition: 0.3s;
height: 100%;
}
.code-card h6 {
background: linear-gradient(180deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Rubik;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 36px */
letter-spacing: -1.92px;
}
.code-card p {
color: #6A7282;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
margin-bottom: 0;
}
.code-card:hover {
transform: translateY(-5px);
}
/* SECTION WRAPPER */
.cta-wrapper {
border-radius: 40px;
border: 0.8px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}
/* TITLE */
.cta-title {
color: #141B5D;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 60px; /* 125% */
}
.cta-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;
}
.cta-text {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-top: 15px;
max-width: 500px;
}
/* BUTTONS */
.btn-primary-custom {
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);
padding: 10px 22px;
border-radius: 8px;
transition: 0.3s ease;
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
.btn-primary-custom:hover {
color: #fff;
}
.btn-outline-custom {
border-radius: 8px;
border: 1px solid #141B5D;
background: #FFF;
color: var(--Colors-Primary-500, #141B5D);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
padding: 10px 22px;
transition: 0.3s ease;
}
.btn-outline-custom:hover {
color: var(--Colors-Primary-500, #141B5D);
background: #FFF;
border: 1px solid #141B5D;
}
/* DASHBOARD CARD */
.dashboard-card {
background: #f9f9ff;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}
/* RESPONSIVE */
@media (max-width: 991px) {
.cta-title {
font-size: 30px;
}
}
.workflow-section {
position: relative;
}
/* Header */
.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-subtitle {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
}
.workflow-text
{
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
/* Vertical Line */
.timeline-wrapper {
position: relative;
margin-top: 60px;
}
.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 */
.timeline-dot {
position: relative;
z-index: 2;
}
/* Content Card */
.timeline-content {
padding: 25px;
transition: 0.3s;
margin-bottom: 1.5rem;
}
.timeline-content h6 {
color: #060B13;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 39.6px; /* 165% */
}
.timeline-content p {
color: #4A5565;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 162.5% */
}
.timeline-content:hover {
transform: translateY(-5px);
}
.step-number {
color: #99A1AF;
font-size: 72px;
font-style: normal;
font-weight: 700;
line-height: 72px; /* 100% */
display: block;
margin-bottom: 8px;
}
/* Image Card */
.timeline-image {
padding: 15px;
transition: 0.3s;
margin-bottom: 1.5rem;
}
.timeline-image:hover {
transform: translateY(-5px);
}
.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-style: normal;
font-weight: 700;
line-height: normal;
padding: 12px 16px;
}
.workflow-btn:hover
{
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-style: normal;
font-weight: 700;
line-height: normal;
padding: 12px 16px;
}
/* Responsive */
@media (max-width: 991px) {
.timeline-wrapper::before {
left: 20px;
}
.timeline-row .row {
flex-direction: column;
}
.timeline-dot {
margin-left: -24px;
text-align: left;
}
.timeline-content,
.timeline-image {
text-align: left !important;
margin-bottom: 1.5rem;
}
}
/* Section Background */
/* Main Rounded Container */
.standards-sectio .standards-wrapper {
border-radius: 40px;
border: 1px solid #DADADA;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);;
}
/* Heading */
.standards-section .standards-title {
color: #141B5D;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 120% */
margin-bottom: 8px;
}
/* Subtitle */
.standards-section .standards-subtitle {
color: #99A1AF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
max-width: 520px;
}
/* Content Items */
.standards-section  .standard-item {
padding-right: 30px;
}
.standards-section .standard-item h6 {
color: #141B5D;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 155.556% */
margin-bottom: 10px;
}
.standards-section .standard-item p {
color: #6A7282;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.75px; /* 162.5% */
margin-bottom: 0;
}
/* Vertical Dividers (Desktop Only) */
@media (min-width: 768px) {
.standards-section  .border-end-md {
border-right: 1px solid #DADADA;
padding-right: 30px;
}
}
/* Section Background */
/* Card Style */
.official-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%;
display: flex;
justify-content: center;
flex-direction: column;
}
/* Small Heading */
.small-heading {
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: 10px;
}
/* Main Heading */
.main-heading {
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%; /* 60px */
letter-spacing: -1.92px;
margin-bottom: 20px;
}
.main-heading span {
color: #6d28d9;
}
/* Description */
.description {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-bottom: 20px;
}
/* Button */
.official-card .btn-primary {
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;
padding: 12px 16px;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22px; /* 150% */
}
.btn-primary:hover {
background: #312e81;
}
.official-image
{
border-radius: 40px;
border: 0.8px solid #F3F4F6;
background: linear-gradient(135deg, #F9FAFB 0%, #FFF 100%), #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%;
}
.phone-img {
max-height: 520px;
transition: transform 0.4s ease;
}
.phone-img:hover {
transform: translateY(-8px);
}
/* Responsive */
@media (max-width: 991px) {
.official-card {
padding: 30px;
text-align: center;
}
}
.support-section {
padding: 100px 0;
}
.wrapper {
position: relative;
}
/* Background Shape */
.bg-shape {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 520px;
z-index: 0;
}
/* Main Image */
.main-img {
position: relative;
z-index: 2;
}
/* Info Boxes */
.info-box {
position: absolute;
background: #fff;
padding: 12px 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
cursor: pointer;
transition: 0.3s ease;
z-index: 3;
}
.info-box:hover {
transform: translateY(-5px);
}
.info-box.active {
background: #5b2be0;
color: #fff;
}
/* Box Positions */
.support-section  .box1 { top: 5%; left:5%; }
.support-section  .box2 { top: 10%; right: -15%; }
.support-section  .box3 { bottom: 20%; left: -15%; }
.support-section  .box4 { bottom: 10%; right: -15%; }
/* Common Arrow Style */
.support-section .arrow {
position: absolute;
z-index: 3;
pointer-events: none;
}
/* Separate Arrow Positions */
.support-section .arrow-1 {
top: 10%;
left: 40%;
}
.support-section .arrow-2 {
top: 5%;
right: -5%;
}
.support-section    .arrow-3 {
bottom: 10%;
left: -45%;
}
.support-section .arrow-4 {
bottom: 15%;
right: -5%;
}
/* Responsive */
@media (max-width: 991px) {
.info-box {
position: static;
display: inline-block;
margin: 10px;
}
.arrow {
display: none;
}
.main-img {
max-width: 300px;
}
.bg-shape {
max-width: 350px;
}
}

/* Responsive */
@media (max-width: 991px) {
.seeing-title {
text-align: center;
font-size: 33px;
}
.infra-title span {

    font-size: 33px;

}
.workflow-title {
    font-size: 33px;
}
.main-heading {
    font-size: 33px;
}
.main-title {
      font-size: 33px;
}
.cta-title span {
       font-size: 33px;
}
}