/* ================= COMMON SECTION ================= */
.common-section {
background: #fff;
}
/* IMAGE SLIDER */
.common-section .product-slider {
padding: 20px;
text-align: center;
}
.common-section .slider-wrapper {
position: relative;
overflow: hidden;
}
.common-section .slide {
display: none;
}
.common-section .slide.active {
display: block;
}
.common-section .slide img {
max-height: auto;
object-fit: contain;
}
/* ARROWS */
.common-section .slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #fff;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
cursor: pointer;
}
.common-section .slider-arrow.prev {
left: -10px;
}
.common-section .slider-arrow.next {
right: -10px;
}
/* DOTS */
.common-section .slider-dots {
margin-top: 15px;
}
.common-section .dot {
height: 8px;
width: 8px;
margin: 0 4px;
background: #d1d5db;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.common-section .dot.active {
background: #111827;
}
/* CONTENT */
.common-section .step {
border-radius: 26843500px;
background: #FFF;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
color: #141B5D;
text-align: center;
display:inline-block;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal; /* 150% */
padding: 12px 24px;
}
.common-section .title {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 180%; /* 57.6px */
margin: 8px 0;
}
.common-section .price-box {
margin: 10px 0;
}
.common-section .old-price {
text-decoration: line-through;
color: #4A4A4A;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 43.2px */
margin-right: 8px;
}
.common-section .sale-price {
color: #141B5D;
text-align: right;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 48px */
}
.common-section .shipping {
color: #4A4A4A;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 43.2px */
margin-left: 6px;
}
.common-section .description {
color: var(--Colors-Neutral-900, #4A4A4A);
leading-trim: both;
text-edge: cap;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 36px */
margin: 15px 0;
}
/* BUTTONS */
.common-section .order-btn {
width: 100%;
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: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px;
margin-bottom: 15px;
}
.order-btn-a {
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: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px 24px;
margin-bottom: 15px;
}
.order-btn-a: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: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px 24px;
margin-bottom: 15px;
}
.ai-screening-process-down
{
    color: #141B5D;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom:20px
}
.common-section .assessment-btn {
width: 100%;
border-radius: 8px;
border: var(--Stroke-S, 1px) solid #141B5D;
background: 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: #141B5D;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
background: transparent;
padding: 10px;
border-radius: 6px;
margin-top: 10px;
margin-bottom: 20px;
}
/* FEATURES */
.common-section .features {
padding-left: 18px;
margin-bottom: 15px;
}
.common-section .features li {
margin-bottom: 8px;
color: var(--Colors-Neutral-900, #4A4A4A);
leading-trim: both;
text-edge: cap;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
/* LINK */
.common-section .link-text {
text-align: center;
color: #141B5D;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 10px;
text-decoration: none;
}
/* RESPONSIVE */
@media (max-width: 991px) {
.common-section .title {
font-size: 24px;
}
.common-section .slide img {
max-height: 240px;
}
}
@media (max-width: 576px) {
.common-section .product-slider {
padding: 15px;
}
.common-section .slider-arrow {
width: 32px;
height: 32px;
}
}
.timeline-titles
{
color: #454545;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 48px */
}
.timeline-sub-title
{
color: #141B5D;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.timeline-section .timeline {
position: relative;
}
.timeline-section  .timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: #ccc;
}
.timeline-section .timeline-box
{
border-radius: 16px;
border: 1px solid #DCDCDC;
padding: 1rem;
}
.timeline-section  .timeline-item {
position: relative;
margin-bottom: 1rem;
}
.timeline-section .timeline-content {
padding: 1.5rem;
}
.timeline-section  .timeline-number {
width: 48px;
height: 48px;
background-color: #141B5D;
color: white;
border-radius: 50%;
display: flex;
font-size: 32px;
align-items: center;
justify-content: center;
font-weight: 600;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.timeline-section  .timeline-icon {
max-width: 100%;
height: auto;
}
.timeline-section  .timeline-title {
color: #58595B;
text-align: right;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
}
.timeline-section .timeline-title-a {
color: #58595B;
text-align:left;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 200%;
}
.timeline-item-right .timeline-content .timeline-title
{
text-align: left;
}
.timeline-section .timeline-week {
color: #141B5D;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.timeline-section .timeline-item:last-child {
margin-bottom: 0rem;
}
.timeline-section .timeline-box ol li
{
color: #58595B;
font-size: 16px;
font-style: normal;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 200%; /* 32px */
}
.timeline-section .timeline-box ol li:last-child
{
margin-bottom: 0rem;
}
.timeline-section .timeline-box ol li strong
{
color: #58595B;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 200%;
}
.timeline-section
{
padding: 80px 0;
}
@media (min-width: 768px) {
.timeline-section .timeline-item-left .timeline-content {
margin-right: auto;
width: 45%;
}
.timeline-section .timeline-item-right .timeline-content {
margin-left: auto;
width: 45%;
}
}
@media (max-width: 767.98px) {
.timeline-section  .timeline::before {
left: 20px;
}
.timeline-section .timeline-number {
left: 0px;
transform: translateY(-50%);
}
.timeline-section  .timeline-content {
margin-left: 30px !important;
margin-right: 10px;
}
.timeline-section .timeline-title {
text-align: left;
}
}
/* ==========================================
Sleep Apnea Section
========================================== */
.sleep-apnea-section {
padding: 80px 0;
}

.sleep-apnea-section .sleep-apnea-subtitle {
color: #454545;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 12px;
}
.sleep-apnea-section .sleep-apnea-title {
color: #141B5D;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 24px;
}
.sleep-apnea-section .sleep-apnea-description {
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 40px */
margin-bottom: 32px;
}
.sleep-apnea-section .sleep-apnea-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 72px;
border: 1px solid #FFF;
background: #141B5D;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px 0 rgba(74, 58, 255, 0.10);
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 135%; /* 21.6px */
text-decoration: none;
transition: all 0.3s ease;
padding: 12px 30px;
}
.sleep-apnea-section .sleep-apnea-btn:hover {
background: #141B5D;
color: #ffffff;
}
.sleep-apnea-section .sleep-apnea-feature-list {
padding-left: 40px;
}
.sleep-apnea-section .sleep-apnea-feature-item {
display: flex;
align-items: center;
gap: 22px;
padding: 22px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.sleep-apnea-section .sleep-apnea-feature-item:last-child {
border-bottom: none;
}
.sleep-apnea-section .sleep-apnea-feature-icon img {
width: 80px;
height: 80px;
object-fit: contain;
}
.sleep-apnea-section .sleep-apnea-feature-text h6 {
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 40px */
margin: 0;
line-height: 1.4;
}
/* ==========================================
Responsive
========================================== */
@media (max-width: 1199px) {
.sleep-apnea-section .sleep-apnea-title {
font-size: 40px;
}
.sleep-apnea-section .sleep-apnea-description {
font-size: 16px;
line-height: 1.9;
}
}
@media (max-width: 991px) {
.sleep-apnea-section {
text-align: center;
}
.sleep-apnea-section .sleep-apnea-content {
margin: 0 auto;
}
.sleep-apnea-section .sleep-apnea-feature-list {
padding-left: 0;
margin-top: 20px;
}
.sleep-apnea-section .sleep-apnea-feature-item {
justify-content: center;
text-align: left;
}
.sleep-apnea-section .sleep-apnea-title {
font-size: 36px;
}
}
@media (max-width: 767px) {
.sleep-apnea-section {
padding: 60px 0;
}
.sleep-apnea-section .sleep-apnea-subtitle {
font-size: 18px;
}
.sleep-apnea-section .sleep-apnea-title {
font-size: 30px;
margin-bottom: 20px;
}
.sleep-apnea-section .sleep-apnea-description {
font-size: 15px;
line-height: 1.8;
margin-bottom: 24px;
}
.sleep-apnea-section .sleep-apnea-btn {
min-width: 100%;
height: 50px;
font-size: 14px;
}
.sleep-apnea-section .sleep-apnea-feature-item {
gap: 16px;
padding: 18px 0;
}
.sleep-apnea-section .sleep-apnea-feature-icon img {
width: 48px;
height: 48px;
}
.sleep-apnea-section .sleep-apnea-feature-text h6 {
font-size: 17px;
}
}
/* ==========================================
Care Starts Section
========================================== */
.care-starts-section {
padding: 80px 0;
}
.care-starts-section .care-starts-subtitle {
color: #454545;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 48px */
margin-bottom: 10px;
}
.care-starts-section .care-starts-title {
color: #141B5D;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 22px;
}
.care-starts-section .care-starts-description {
color: #58595B;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 40px */
}
.care-starts-section .care-starts-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 72px;
border: 1px solid #FFF;
background: #141B5D;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px 0 rgba(74, 58, 255, 0.10);
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 135%; /* 21.6px */
text-decoration: none;
transition: all 0.3s ease;
padding: 12px 30px;
}
.care-starts-section .care-starts-btn:hover {
background: #141B5D;
color: #ffffff;
}
.care-starts-section .care-starts-card {
border-radius: 12px;
background: #FFF;
box-shadow: 0 4.258px 63.872px 0 rgba(0, 0, 0, 0.08);
padding: 34px 28px;
display: flex;
align-items: center;
height: 100%;
transition: all 0.3s ease;
}
.care-starts-section .care-starts-card:hover {
transform: translateY(-5px);
}
.care-starts-section .care-starts-card p {
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 40px */
margin: 0;
}
.care-starts-section .care-starts-image img {
width: 100%;
border-radius: 14px;
object-fit: cover;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
/* ==========================================
Responsive
========================================== */
@media (max-width: 1199px) {
.care-starts-section .care-starts-title {
font-size: 42px;
}
.care-starts-section .care-starts-card p {
font-size: 18px;
}
}
@media (max-width: 991px) {
.care-starts-section {
text-align: center;
}
.care-starts-section .care-starts-title {
font-size: 36px;
}
.care-starts-section .care-starts-description {
font-size: 16px;
line-height: 1.9;
}
.care-starts-section .care-starts-image {
margin-top: 20px;
}
.care-starts-section .care-starts-card {
min-height: auto;
text-align: left;
}
}
@media (max-width: 767px) {
.care-starts-section {
padding: 60px 0;
}
.care-starts-section .care-starts-subtitle {
font-size: 18px;
}
.care-starts-section .care-starts-title {
font-size: 30px;
margin-bottom: 18px;
}
.care-starts-section .care-starts-description {
font-size: 15px;
line-height: 1.8;
margin-bottom: 24px;
}
.care-starts-section .care-starts-btn {
min-width: 100%;
height: 50px;
}
.care-starts-section .care-starts-card {
padding: 26px 22px;
}
.care-starts-section .care-starts-card p {
font-size: 16px;
line-height: 1.7;
}
}
/* ==========================================
AI Screening Process Section
========================================== */
.ai-screening-process-section {
padding: 80px 0;
}
.ai-screening-process-section .ai-screening-process-subtitle {
color: #454545;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 48px */
margin-bottom: 12px;
}
.ai-screening-process-section .ai-screening-process-title {
color: #141B5D;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 24px;
}
.ai-screening-process-section .ai-screening-process-description {
color: #58595B;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 40px */
margin: 0 auto 30px;
}
.ai-screening-process-section .ai-screening-process-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 72px;
border: 1px solid #FFF;
background: #141B5D;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px 0 rgba(74, 58, 255, 0.10);
text-decoration: none;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 135%; /* 21.6px */
transition: all 0.3s ease;
padding: 12px 28px;
}
.ai-screening-process-section .ai-screening-process-btn:hover {
background: #141B5D;
color: #ffffff;
}
/* ==========================================
Process Card
========================================== */
/* ==========================================
Box Image
========================================== */
.ai-screening-process-section .ai-screening-process-box-image img {
width: 100%;
border-radius: 12px;
object-fit: cover;
}
/* ==========================================
Card Content
========================================== */
.ai-screening-process-section .ai-screening-process-content h4 {
color: #58595B;
font-size: 20px;
text-align: center;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 40px */
margin-bottom: 0px;
}
.ai-screening-process-section .ai-screening-process-content p {
color: #58595B;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 32px */
margin: 0;
}
/* ==========================================
Responsive
========================================== */
@media (max-width: 1199px) {
.ai-screening-process-section .ai-screening-process-title {
font-size: 42px;
}
.ai-screening-process-section .ai-screening-process-content h4 {
font-size: 24px;
}
}
@media (max-width: 991px) {
.ai-screening-process-section {
text-align: center;
}
.ai-screening-process-section .ai-screening-process-title {
font-size: 36px;
}
.ai-screening-process-section .ai-screening-process-description {
font-size: 16px;
line-height: 1.9;
}
}
@media (max-width: 767px) {
.ai-screening-process-section {
padding: 60px 0;
}
.ai-screening-process-section .ai-screening-process-subtitle {
font-size: 20px;
}
.ai-screening-process-section .ai-screening-process-title {
font-size: 30px;
margin-bottom: 20px;
}
.ai-screening-process-section .ai-screening-process-description {
font-size: 15px;
line-height: 1.8;
margin-bottom: 24px;
}
.ai-screening-process-section .ai-screening-process-btn {
min-width: 100%;
height: 50px;
}
.ai-screening-process-section .ai-screening-process-card {
padding: 18px 18px 26px;
}
.ai-screening-process-section .ai-screening-process-content {
margin-top: 22px;
}
.ai-screening-process-section .ai-screening-process-content h4 {
font-size: 22px;
}
.ai-screening-process-section .ai-screening-process-content p {
font-size: 14px;
line-height: 1.7;
}
}
/* =========================================================
Patient Benefits Section CSS
========================================================= */
.sleep-benefits-section {
position: relative;
overflow: hidden;
background: #ffffff;
}
.sleep-benefits-section .sleep-benefits-content {
padding-right: 20px;
}
.sleep-benefits-section .sleep-benefits-subtitle {
display: inline-block;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #0d6efd;
margin-bottom: 18px;
}
.sleep-benefits-section .sleep-benefits-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: #111111;
margin-bottom: 35px;
}
.sleep-benefits-section .sleep-benefits-list {
list-style: none;
padding: 0;
margin: 0;
}
.sleep-benefits-section .sleep-benefits-list li {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e9ecef;
}
.sleep-benefits-section .sleep-benefits-list li:last-child {
margin-bottom: 0;
}
.sleep-benefits-section .sleep-benefits-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(13, 110, 253, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.sleep-benefits-section .sleep-benefits-icon i {
color: #0d6efd;
font-size: 16px;
}
.sleep-benefits-section .sleep-benefits-list p {
font-size: 18px;
line-height: 1.7;
color: #555555;
margin: 0;
}
.sleep-benefits-section .sleep-benefits-image-wrapper {
position: relative;
overflow: hidden;
border-radius: 24px;
}
.sleep-benefits-section .sleep-benefits-image {
width: 100%;
height: auto;
display: block;
border-radius: 24px;
transition: transform 0.5s ease;
}
.sleep-benefits-section .sleep-benefits-image-wrapper:hover .sleep-benefits-image {
transform: scale(1.05);
}
/* =========================================================
Responsive CSS
========================================================= */
@media (max-width: 991px) {
.sleep-benefits-section .sleep-benefits-content {
padding-right: 0;
}
.sleep-benefits-section .sleep-benefits-title {
font-size: 38px;
}
.sleep-benefits-section .sleep-benefits-list p {
font-size: 17px;
}
}
@media (max-width: 767px) {
.sleep-benefits-section {
padding-top: 60px;
padding-bottom: 60px;
}
.sleep-benefits-section .sleep-benefits-title {
font-size: 30px;
margin-bottom: 28px;
}
.sleep-benefits-section .sleep-benefits-list li {
gap: 14px;
margin-bottom: 20px;
padding-bottom: 20px;
}
.sleep-benefits-section .sleep-benefits-list p {
font-size: 16px;
line-height: 1.6;
}
.sleep-benefits-section .sleep-benefits-image-wrapper {
margin-top: 20px;
}
}
/* Circle Image */
.circle-image-wrapper {
position: relative;
}
/* Dotted Lines */
.dotted-line {
position: absolute;
z-index: 1;
}
.line-1 { 
top: 10px;
right: -50px;
}
.line-2 { 
top: 130px;
right: -50px; 
}
.line-3 { 
right: -50px; 
top: 250px; }
.line-4 { 
bottom: 20px;
right: -50px; 
}
/* Info Cards */
.info-card {
border-radius: 12px;
border: 0.859px solid #141B5D;
background: #FFF;
box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
padding: 18px 22px;
margin-bottom: 18px;
text-align: center;
position: relative;
z-index: 2;
}
.info-card h5 {
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 700;
margin-bottom: 0;
line-height: 200%; /* 40px */
}
.info-card p {
color: #58595B;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 32px */
margin: 0;
}
.Sle-App-section-title
{
color: #454545;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 48px */
}
.Sle-App-section-subtext
{
color: #58595B;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 200%;
margin: 0 auto 30px;
}
/* Timeline container */
.When-to-Use-sec .timeline {
position: relative;
list-style: none;
margin: 0;
padding-left: 60px;
}
/* Vertical dashed line */
.When-to-Use-sec  .timeline::before {
content: "";
position: absolute;
top: 0;
left: 20px;
width: 2px;
height: 100%;
border-left: 2px dashed #58595B;
}
/* Timeline item */
.When-to-Use-sec .timeline li {
position: relative;
margin-bottom: 40px;
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal; /* 40px */
}
/* Outer circle */
.When-to-Use-sec .timeline li::before {
content: "";
position: absolute;
left: -55px;
width: 32px;
height: 32px;
border: 2px solid #141B5D;  /* Dark Blue border */
border-radius: 50%;
background: #fff;
z-index: 1;
}
/* Inner dot */
.When-to-Use-sec  .timeline li::after {
content: "";
position: absolute;
left: -45px;
top: 10px;
width: 12px;
height: 12px;
background: #141B5D; /* Dark Blue fill */
border-radius: 50%;
z-index: 2;
}
.referral-services .service-box
{
border-radius: 12px;
background: #FEFEFE;
box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
padding: 20px;
height: 100%;
text-align: center;
}
.referral-services .service-box h6
{
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 40px */
}
.referral-services .service-box p
{
color: #58595B;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 32px */
}
.referral-services .badge
{
border-radius: 8px;
background: #F6F6F6;
padding: 8px 20px;
color:  #727272;
text-align: center;
font-size: 14px;
white-space: unset;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 285.714% */
}
.referral-services .main-box h4
{
color: #141B5D;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 48px */
}
.referral-services .main-box p
{
color: #58595B;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 200%; /* 32px */
}
.referral-services-main-box
{
border-radius: 16px;
background: rgba(247, 254, 255, 0.97);
padding: 30px;
}
.referral-services .step-box
{
border-radius: 24px;
background: #FFF;
box-shadow: 0 3.493px 10.48px 0 rgba(149, 157, 165, 0.20);
padding: 20px;
height: 100%;
}
.referral-services .step-box h6
{
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 40px */
}
.referral-services .step-box p strong
{
color: #58595B;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 32px */
display: block;
}
.referral-services .step-box p
{
color: #58595B;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 200%;
}
.referral-services .step-box img
{
width: 100%;
}
.When-to-Use-sec h5
{
color: #454545;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 120%;
margin-bottom: 12px;
}
.When-to-Use-sec h2
{
color: #141B5D;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 24px;
}
.When-to-Use-sec p
{
color: #58595B;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 200%;
margin: 0 auto 30px;
}
/* ======================================================
Insurance & Pricing Section CSS
====================================================== */
.insurance-pricing-section {
padding: 80px 0;
}
.insurance-pricing-section .insurance-pricing-content {
padding-right: 30px;
}
.insurance-pricing-section .insurance-pricing-subtitle {
color: #454545;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 120%;
margin-bottom: 12px;
}
.insurance-pricing-section .insurance-pricing-title {
color: #141B5D;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 20px;
}
.insurance-pricing-section .insurance-pricing-description {
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 200%;
margin: 0 auto 30px;
margin-bottom: 35px;
}
.insurance-pricing-section .insurance-pricing-card {
background: #141B5D;
border-radius: 20px;
padding: 30px;
transition: all 0.4s ease;
}
.insurance-pricing-section .insurance-pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
.insurance-pricing-section .insurance-pricing-card-title {
font-size: 24px;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
}
.insurance-pricing-section .insurance-pricing-card-text {
font-size: 18px;
line-height: 1.7;
color: #fff;
margin: 0;
}
.insurance-pricing-section .insurance-pricing-image-wrapper {
position: relative;
overflow: hidden;
border-radius: 24px;
}
.insurance-pricing-section .insurance-pricing-image {
width: 100%;
height: auto;
border-radius: 24px;
transition: transform 0.5s ease;
}
.insurance-pricing-section .insurance-pricing-image-wrapper:hover .insurance-pricing-image {
transform: scale(1.05);
}
/* ======================================================
Responsive CSS
====================================================== */
@media (max-width: 991px) {
.insurance-pricing-section .insurance-pricing-content {
padding-right: 0;
}
.insurance-pricing-section .insurance-pricing-title {
font-size: 38px;
}
.insurance-pricing-section .insurance-pricing-description {
font-size: 17px;
}
}
@media (max-width: 767px) {
.insurance-pricing-section {
padding-top: 60px;
padding-bottom: 60px;
}
.insurance-pricing-section .insurance-pricing-title {
font-size: 30px;
}
.insurance-pricing-section .insurance-pricing-description {
font-size: 16px;
margin-bottom: 25px;
}
.insurance-pricing-section .insurance-pricing-card {
padding: 24px;
}
.insurance-pricing-section .insurance-pricing-card-title {
font-size: 22px;
}
.insurance-pricing-section .insurance-pricing-card-text {
font-size: 16px;
}
.insurance-pricing-section .insurance-pricing-image-wrapper {
margin-top: 20px;
}
}
/* ======================================================
High Risk Result Section CSS
====================================================== */
.high-risk-result-section {
background: #141B5D;
margin: 80px 0; 
}
.high-risk-result-section .high-risk-result-wrapper {
background: #ffffff;
border-radius: 30px;
padding: 60px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.high-risk-result-section .high-risk-result-subtitle {
display: inline-block;
color: #454545;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 120%;
margin-bottom: 12px;
}
.high-risk-result-section .high-risk-result-title {
color: #141B5D;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 20px;
}
.high-risk-result-section .high-risk-result-alert {
border-radius: 12px;
border: 0.859px solid #141B5D;
background: #FFF;
box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
padding: 24px;
margin-bottom: 25px;
}
.high-risk-result-section .high-risk-result-alert-title,
.high-risk-result-section .high-risk-result-step-title {
color: #58595B;
font-size: 20px;
font-style: normal;
font-weight: 700;
margin-bottom: 0;
line-height: 200%;
margin-bottom: 12px;
}
.high-risk-result-section .high-risk-result-alert-text,
.high-risk-result-section .high-risk-result-step-text {
color: rgb(88, 89, 91);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 200%;
margin-bottom: 10px;
}
.high-risk-result-section .high-risk-result-step {
border-radius: 12px;
border: 0.859px solid #141B5D;
background: #FFF;
box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
padding: 24px;
margin-bottom: 25px;
}
.high-risk-result-section .high-risk-result-description {
color: #141B5D;
font-size: 20px;
font-style: normal;
font-weight: 700;
margin-bottom: 0;
line-height: 200%;
margin: 0;
}
.high-risk-result-section .high-risk-result-image-wrapper {
position: relative;
overflow: hidden;
border-radius: 24px;
}
.high-risk-result-section .high-risk-result-image {
width: 100%;
height: auto;
border-radius: 24px;
transition: transform 0.5s ease;
}
.high-risk-result-section .high-risk-result-image-wrapper:hover .high-risk-result-image {
transform: scale(1.05);
}
/* ======================================================
Responsive CSS
====================================================== */
@media (max-width: 991px) {
.high-risk-result-section .high-risk-result-wrapper {
padding: 40px;
}
.high-risk-result-section .high-risk-result-title {
font-size: 38px;
}
}
@media (max-width: 767px) {
.high-risk-result-section {
padding-top: 60px;
padding-bottom: 60px;
}
.high-risk-result-section .high-risk-result-wrapper {
padding: 30px 24px;
border-radius: 24px;
}
.high-risk-result-section .high-risk-result-title {
font-size: 30px;
}
.high-risk-result-section .high-risk-result-alert-title,
.high-risk-result-section .high-risk-result-step-title {
font-size: 20px;
}
.high-risk-result-section .high-risk-result-alert-text,
.high-risk-result-section .high-risk-result-step-text,
.high-risk-result-section .high-risk-result-description {
font-size: 16px;
}
.high-risk-result-section .high-risk-result-image-wrapper {
margin-top: 20px;
}
}