:root{

    --primary:#118847;
    --primary-dark:#046A38;

    --secondary:#6B35D8;

    --teal:#009688;

    --dark:#222B32;

    --light:#F6FCF8;

    --white:#ffffff;

}
.custom-navbar{
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
    padding:15px 0;
}

.custom-container{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 30px;
}

.navbar-brand{
    flex-shrink:0;
}

.navbar-collapse{
    flex-grow:1;
}

.navbar-nav{
    margin-left:auto;
}

.nav-link{
    font-size: 17px;
    padding:12px 18px !important;
    font-weight:600;
    color:#1f2937 !important;
}

.btn-main{
    background:#6B3EF4;
    color:#fff;
    border-radius:50px;
    padding:12px 28px;
}
.navbar{

background:#fff;

}

.navbar-brand img{

height:100px;

}



.nav-link:hover{

color:#5a34d6;

}



.btn-main:hover{

background:#4524ad;

color:#fff;

}

.btn-outline-main{

border:2px solid #5B32D6;

padding:14px 30px;

margin-left:15px;

border-radius:12px;

color:#5B32D6;

font-weight:600;

}

/*==============================
 HERO SECTION
==============================*/

.hero-area{

    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #F7FFF9 0%,
    #EEF9F3 45%,
    #FFFFFF 100%
    );

}

.hero-area::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-180px;

   width:700px;
height:700px;

    border-radius:50%;

    background:linear-gradient(135deg,#6d5efc,#9f67ff);

    opacity:.08;

}

.hero-area::after{

    content:"";

    position:absolute;

    bottom:-250px;

    left:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:#7f5cff;

    opacity:.05;

}

/*==============================
BACKGROUND BLOBS
==============================*/

.hero-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

}

.circle-1{

    width:320px;

    height:320px;

    background:#15B56A;
    opacity:.10;

    top:5%;

    left:5%;

}

.circle-2{

    width:240px;

    height:240px;

    background:#00B7A5;
    opacity:.12;


    right:8%;

    top:25%;

}

.circle-3{

    width:280px;

    height:280px;

    background:#7A4DFF;
    opacity:.08;

    bottom:5%;

    right:18%;

}

/*==============================
CONTENT
==============================*/

.hero-content{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:#EAF8EF;

    color:var(--primary);

    border:1px solid rgba(17,136,71,.15);

    box-shadow:
    0 12px 35px rgba(17,136,71,.10);

    font-weight:600;



    margin-bottom:30px;

}

.hero-badge i{
    color:var(--primary);
    font-size:18px;

}

.hero-content h1{

    font-size:64px;

    font-weight:800;

    color:var(--dark);

    line-height:1.08;

    margin-bottom:30px;

    letter-spacing:-2px;

}

.hero-content h1 span{
    
   color:#5B3CC4;

}

.hero-content p{

    font-size:18px;

   color:#5F6F66;

    line-height:1.9;

    max-width:600px;

    margin-bottom:40px;

}

/*==============================
BUTTONS
==============================*/

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:45px;

}

.btn-primary-custom{

display:inline-flex;
align-items:center;
gap:10px;

padding:17px 34px;

border-radius:60px;

background:
linear-gradient(
135deg,
var(--primary),
#18A75B
);

color:#fff;

font-weight:600;

text-decoration:none;

box-shadow:
0 18px 35px rgba(17,136,71,.25);

transition:.4s;

}

.btn-primary-custom:hover{

transform:translateY(-5px);

background:
linear-gradient(
135deg,
var(--primary-dark),
var(--primary)
);

color:#fff;

}

.btn-secondary-custom{

    display:inline-flex;

    align-items:center;

    padding:17px 34px;

    border-radius:60px;



    text-decoration:none;

    background:#fff;

    border:2px solid var(--primary);

    color:var(--primary);
    transition:.35s;

}

.btn-secondary-custom:hover{
    background:var(--primary);

    color:#fff;

}

/*==============================
FEATURE TAGS
==============================*/

.hero-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.hero-tags span{

    background:#fff;

    border:1px solid #DCEFE5;

    color:#334155;

    border-radius:50px;

    padding:12px 20px;

    font-size:15px;

    font-weight:500;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.35s;

}

.hero-tags span:hover{

    transform:translateY(-4px);

}

.hero-tags i{

    color:var(--primary);

    margin-right:8px;

}
/*==========================================
 HERO IMAGE
==========================================*/

.hero-image-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:750px;

    z-index:5;

}

.hero-doctor{

    position:relative;

    width:90%;

    max-width:650px;

    z-index:3;

    animation:doctorFloat 5s ease-in-out infinite;

    filter:drop-shadow(0 40px 60px rgba(0,0,0,.15));

}

/*==========================================
 DNA RING
==========================================*/

.dna-ring{

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1;

}
/* Outer Ring */

.ring1{

    width:620px;
    height:620px;

    top:0;
    left:0;

}

/* Middle Ring */

.ring2{

    width:500px;
    height:500px;

    top:60px;
    left:60px;

    border-color:rgba(0,150,136,.25);

    animation-duration:24s;
    animation-direction:reverse;

}

/* Inner Ring */

.ring3{

    width:380px;
    height:380px;

    top:120px;
    left:120px;

   border-color:rgba(107,53,216,.18);

    animation-duration:18s;

}
.dna-ring .ring{

    position:absolute;

    border-radius:50%;

    border:2px dashed rgba(17,136,71,.18);

    animation:rotateRing 30s linear infinite;

}

.dna-ring::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    border:1px solid rgba(125,199,236,.35);

}

.dna-ring::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    border:1px solid rgba(109,94,252,.20);

}

/*==========================================
 GLASS CARDS
==========================================*/

.glass-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 24px;

    min-width:220px;

    border-radius:22px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.5);

    box-shadow:

    0 25px 50px rgba(20,30,60,.12);

    z-index:10;

}

.glass-card i{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    color:#fff;

    background:
        linear-gradient(
        135deg,
        var(--primary),
        #18B96B
        );

    flex-shrink:0;

}

.glass-card strong{

    display:block;

    font-size:26px;

    color:#18254A;

    font-weight:800;

    line-height:1;

}

.glass-card small{

    color:#6f7688;

    font-size:14px;

}

/*==========================================
 CARD POSITION
==========================================*/

.card-one{

    top:60px;

    left:-20px;

    animation:float1 5s ease-in-out infinite;

}

.card-two{

    right:50px;

    top:180px;

    animation:float2 6s ease-in-out infinite;

}

.card-three{

    left:20px;

    bottom:70px;

    animation:float3 5.5s ease-in-out infinite;

}

/*==========================================
 ANIMATIONS
==========================================*/

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes doctorFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes float1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes float2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(18px);

    }

}

@keyframes float3{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

/*==========================================
 HOVER EFFECT
==========================================*/

.hero-image-wrapper:hover .glass-card{

    transform:scale(1.04);

}

.hero-image-wrapper:hover .dna-ring{

    /* transform:scale(1.02); */

}

/*==========================================
 RESPONSIVE
==========================================*/

@media(max-width:1200px){

.hero-content h1{

font-size:54px;

}

.hero-image-wrapper{

min-height:620px;

}

.dna-ring{

width:520px;

height:520px;

}

}

@media(max-width:991px){

.hero-area{

    padding:80px 0 60px;

    overflow:hidden;

}

.hero-content{

    text-align:center;

}

.hero-badge{

    font-size:13px;

    padding:8px 16px;

}

.hero-content h1{

    font-size:42px;

    line-height:1.25;

    margin:20px 0;

}

.hero-content p{

    font-size:16px;

    max-width:100%;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}

.hero-tags{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-image-wrapper{

    margin-top:70px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-circle{

    width:380px;

    height:380px;

}

.hero-doctor{

    width:100%;

    height:100%;

    object-fit:contain;

}

.glass-card{

    transform:scale(.9);

}

.card-one{

    top:20px;

    left:-10px;

}

.card-two{

    right:-10px;

}

.card-three{

    bottom:-20px;

    left:50%;

    transform:translateX(-50%);

}

.dna-ring{

    width:380px;

    height:380px;

}


}

@media (max-width:768px){

.hero-content h1{

    font-size:36px;

}

.hero-circle{

    width:320px;

    height:320px;

}

.hero-image-wrapper{

    position:relative;

    width:100%;

    max-width:320px;

    margin:50px auto 0;

}

.hero-circle{

    width:100%;

    aspect-ratio:1/1;

    border-radius:50%;
    width: 425px!important;
    height: 425px!important;
    overflow:visible;   /* not hidden */

    display:flex;

    justify-content:center;

    align-items:flex-end;

}

.hero-doctor{

    width:100%;

    height:auto;

    object-fit:contain;

    display:block;

}

.dna-ring{

    width:100%;

    height:100%;

}

.glass-card{

    padding:10px 15px;

    font-size:13px;

}

.glass-card i{

    font-size:18px;

}

.glass-card strong{

    font-size:16px;

}

}
@media (max-width:576px){

.hero-area{

    padding-top:60px;

}

.hero-content h1{

    font-size:30px;

}

.hero-content p{

    font-size:15px;

}

.hero-circle{

    width:260px;

    height:260px;

}

.dna-ring{

    width:260px;

    height:260px;

}

.glass-card{

    position:absolute;

    transform:scale(.8);

}

.card-one{

    left:-5px;

    top:5px;

}

.card-two{

    right:-5px;

    top:45%;

}

.card-three{

    bottom:-25px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons a{

    width:100%;

    justify-content:center;

}

.hero-tags span{

    font-size:12px;

    padding:8px 14px;

}

}
@media (max-width:400px){

.hero-content h1{

    font-size:26px;

}

.hero-circle{

    width:220px;

    height:220px;

}

.dna-ring{

    width:220px;

    height:220px;

}

.glass-card{

    transform:scale(.7);

}

.hero-badge{

    font-size:12px;

}

}
.hero-image-wrapper{

    position:relative;

    width:650px;

    height:650px;

    margin:auto;

}

.hero-circle{

    position:absolute;

    top:50%;

    left:50%;

    width:520px;

    height:520px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    overflow:hidden;

    z-index:5;

   background:#cccbf3;

backdrop-filter:blur(15px);

border:8px solid rgba(255,255,255,.4);

box-shadow:

0 40px 90px rgba(17,136,71,.18);
}

.hero-circle img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

}

.dna-ring{

    position:absolute;

    top:50%;

    left:50%;

    width:620px;

    height:620px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:2px solid rgba(107,62,244,.15);

}
/*====================================================
FEATURED TESTS
====================================================*/

.featured-tests{

    position:relative;

    padding:60px 0;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #FFFFFF,
    #F4FCF8
    ) !important;

}

.bg-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.28;

}

.shape1{

    width:320px;

    height:320px;

    background:#d9c9ff;

    left:-100px;

    top:80px;

}

.shape2{

    width:300px;

    height:300px;

    background:#bce6ff;

    right:-120px;

    bottom:100px;

}

/*=========================
Heading
=========================*/

.section-heading{

    margin-bottom:70px;

}

/* .section-heading .section-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    background:#EAF8EF;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

} */

.section-heading h2{

    margin-top:25px;

    font-size:58px;

    font-weight:800;

    line-height:1.08;

    color:#1d2340;

}

.section-heading h2 span{

    display:block;

    color:var(--primary);

}

.section-heading p{

    width:720px;

    max-width:100%;

    margin:22px auto 0;

    font-size:18px;

    line-height:1.9;

    color:#70768c;

}

/*=========================
Statistics
=========================*/

.stats-wrapper{

    margin-bottom:65px;

}

.stat-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:

    0 18px 45px rgba(0,0,0,.06);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

    flex-shrink:0;

}

.stat-icon.purple{

    background:linear-gradient(135deg,#6B35D8,#8E67FF);


}

.stat-icon.blue{

    background:linear-gradient(135deg,#009688,#16B7A4);

}

.stat-icon.pink{

    background:linear-gradient(135deg,#6B35D8,#118847);

}

.stat-icon.green{

    background:linear-gradient(135deg,#118847,#21C36A);

}

.stat-card h3{

    font-size:34px;

    font-weight:800;

    margin:0;

    color:#1e293b;

}

.stat-card p{

    margin:5px 0 0;

    color:#6b7280;

}

/*=========================
Featured Banner
=========================*/


.featured-banner::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-240px;

    right:-180px;

}


.featured-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(255,255,255,.18);

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:28px;

}

/*=========================
Button
=========================*/


.featured-btn:hover{

    color:#ff4f9a;

    transform:translateY(-4px);

}

.featured-btn i{

    transition:.35s;

}

.featured-btn:hover i{

    transform:translateX(6px);

}


/*====================================================
GENETIC TEST CARDS
====================================================*/

.test-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:35px;

    color:#fff;

    min-height:420px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.45s ease;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.test-card:hover{

    transform:translateY(-12px);

}

/* Background Glow */

.test-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-130px;

    right:-100px;

}

/* Decorative Circle */

.test-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.08);

    bottom:-90px;

    right:-70px;

}

/*================ Colors ================*/

.purple-card{

    background:linear-gradient(135deg,#5B2BE0,#8D5CFF);

}

.green-card{

    background:linear-gradient(135deg,#00A88A,#22C9A3);

}

.orange-card{

    background:linear-gradient(135deg,#F97316,#FDBA3B);

}

/*================ Icon ================*/



.test-card:hover .card-icon{

    transform:rotate(-8deg) scale(1.08);

}

/*================ Title ================*/

.test-card h3{

    font-size:30px;

    font-weight:700;

    margin-bottom:15px;

    line-height:1.2;

}

.test-card p{

    font-size:16px;

    line-height:1.9;

    opacity:.95;

    margin-bottom:28px;

}

/*================ Chips ================*/
.chips{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-top:25px;

    margin-bottom:28px;

}

.chips span{

    padding:6px 14px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

    background:rgba(255,255,255,.16);

    border:1px solid rgba(255,255,255,.12);

}
/*================ Bottom ================*/


.card-bottom{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.card-bottom small{

    display:block;

    font-size:11px;

    letter-spacing:1px;

    opacity:.7;

    margin-bottom:3px;

}

.card-bottom h5{

    margin:0;

    font-size:16px;

    font-weight:700;

}

.card-bottom a{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#6B3EF4;

    text-decoration:none;

    transition:.35s;

}

.card-bottom a:hover{

    transform:translateX(5px);

}


/*====================================================
VIEW ALL BUTTON
====================================================*/

.view-all-btn{

    display:inline-flex;

    align-items:center;

    gap:15px;

    background:var(--primary);

    box-shadow:
    0 18px 35px rgba(17,136,71,.25);


    color:#fff;

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.view-all-btn:hover{

    color:#fff;
    background:var(--primary-dark);

    transform:translateY(-4px);

}

.view-all-btn i{

    transition:.35s;

}

.view-all-btn:hover i{

    transform:translateX(5px);

}
/* Illustration */

.card-bg{

    position:absolute;

    right:-15px;

    bottom:-15px;

    width:220px;

    z-index:0;

    opacity:.12;

    transition:.5s;

}

.card-bg img{

    width:100%;

}

.test-card>*{

    position:relative;

    z-index:2;

}

.test-card:hover .card-bg{

    transform:scale(1.08) rotate(5deg);

    opacity:.18;

}
/* Illustration */

.card-bg{

    position:absolute;

    right:-15px;

    bottom:-15px;

    width:220px;

    z-index:0;

    opacity:.12;

    transition:.5s;

}

.card-bg img{

    width:100%;

}

.test-card>*{

    position:relative;

    z-index:2;

}

.test-card:hover .card-bg{

    transform:scale(1.08) rotate(5deg);

    opacity:.18;

}
.test-card{

    isolation:isolate;

}

.test-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    transform:skewX(-20deg);

    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.18),

    transparent

    );

}

.test-card:hover::after{

    animation:shine 1s;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:140%;

}

}
.test-card{

    border:1px solid rgba(255,255,255,.08);

}
/*=========================
Top Layout
=========================*/

.card-top{

    display:flex;

    align-items:flex-start;

    gap:18px;

    /* margin-bottom:28px; */

}

.card-heading{

    flex:1;

}

.card-heading h3{

    margin:0 0 10px;

    font-size:28px;

    font-weight:700;

    color:#fff;

    line-height:1.2;

}

.card-heading p{

    margin:0;

    font-size:18px;
    
    line-height:1.7;

    color:#6F7693;

}
/*=========================
Circle Icon
=========================*/

.card-icon{

    width:58px;
    height:58px;

    min-width:58px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#F3F0FF;

    font-size:22px;

    transition:.35s;

    box-shadow:
    0 8px 20px rgba(107,62,244,.12);

}

.card-icon i{

    color:#6B3EF4;

}
/* ThyroTrack */

.purple-card .card-icon{

    background:#F1E9FF;

}

.purple-card .card-icon i{

    color:#7A4DFF;

}

/* BRCA */

.green-card .card-icon{

    background:#E9FBF5;

}

.green-card .card-icon i{

    color:#15B88A;

}

/* WES */

.orange-card .card-icon{

    background:#FFF4E7;

}

.orange-card .card-icon i{

    color:#F59E0B;

}
.test-card:hover .card-icon{

    transform:scale(1.1) rotate(-8deg);

    box-shadow:
    0 15px 35px rgba(107,62,244,.20);

}
.test-card:hover .card-icon{

    transform:scale(1.1) rotate(-8deg);

    box-shadow:
    0 15px 35px rgba(107,62,244,.20);

}
/*=========================================
WHITE CARD
=========================================*/

.white-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    padding:28px;

    height:100%;

    border:1px solid #ECECF5;

    box-shadow:0 12px 35px rgba(32,38,84,.08);

    transition:.35s;

    display:flex;

    flex-direction:column;

}

.white-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(32,38,84,.14);

}

/*=========================
Top
=========================*/

.card-top{

    display:flex;

    gap:16px;

    align-items:flex-start;

}

.card-heading{

    flex:1;

}

.card-heading h4{

    margin:2px 0 8px;

    font-size:28px;

    font-weight:700;

    color:#1F2340;

    line-height:1.2;

}



/*=========================
ICON
=========================*/

.card-icon{

    width:100px;

    height:100px;

    min-width:100px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

}
.card-icon i{
   font-size: 40px; 
}
/* Purple */

.white-card.purple .card-icon{

    background:#F1E9FF;

}

.white-card.purple .card-icon i{

    color:#6B3EF4;

}

/* Green */

.white-card.green .card-icon{

    background:#E9FBF5;

}

.white-card.green .card-icon i{

    color:#10B981;

}

/* Orange */

.white-card.orange .card-icon{

    background:#FFF3E3;

}

.white-card.orange .card-icon i{

    color:#F59E0B;

}

/*=========================
CHIPS
=========================*/

.chips{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin:25px 0;

}

.chips span{

    padding:6px 14px;

    border-radius:30px;

    font-size: 15px;

    font-weight:700;

}

/* Purple */

.white-card.purple .chips span{

    background:#F3EEFF;

    color:#6B3EF4;

}

/* Green */

.white-card.green .chips span{

    background:#EAFBF5;

    color:#10B981;

}

/* Orange */

.white-card.orange .chips span{

    background:#FFF3E4;

    color:#F59E0B;

}

/*=========================
FOOTER
=========================*/

.card-footer{

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid #ECECF5;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.card-footer small{

    display:block;

    color:#7A8098;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.card-footer h5{

    margin:4px 0 0;

    color:#1F2340;

    font-size:22px;

    font-weight:700;

}

/*=========================
ARROW BUTTON
=========================*/

.card-footer a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

/* Purple */

.white-card.purple .card-footer a{

    background:#6B3EF4;

}

/* Green */

.white-card.green .card-footer a{

    background:#10B981;

}

/* Orange */

.white-card.orange .card-footer a{

    background:#F59E0B;

}

.card-footer a:hover{

    transform:translateX(4px) scale(1.08);

}
.featured-banner .row{

    min-height:320px;

    align-items:center;

}


.featured-content h2{

    font-size:47px;

    font-weight:800;

    color:#fff;

    margin-bottom:8px;

}

.featured-content h5{

    color:#fff;

    font-size:24px;

    font-weight:500;

    margin-bottom:18px;

}

.featured-content p{

    color:rgba(255,255,255,.95);

    line-height:1.8;

    font-size:18px;

}



.featured-banner::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.12);

}
.featured-btn{

    display:inline-flex;

    align-items:center;

    gap:15px;

    background:#fff;

    color:#F15B95;

    padding:14px 28px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

    margin-top:15px;

}
.feature-tags{

    margin:28px 0;

    display:flex;

    gap:10px;

}

.feature-tags span{

    background:rgba(255,255,255,.18);

    color:#fff;

    border:1px solid rgba(255,255,255,.25);

    padding:8px 16px;

    border-radius:20px;

    font-size:13px;

}
.featured-banner{

    position:relative;

    overflow:hidden;

    min-height:360px;

    border-radius:28px;

    padding:55px;

    background: linear-gradient(90deg, #F15A95 0%, #f690b9 45%, #FFD9E8 100%);

}

.featured-content{

    position:relative;

    z-index:5;

    /* width:45%; */

}
.featured-image{

    position:absolute;

    right:-25px;

    bottom:0;

    width:58%;

    height:100%;

    z-index:1;

    pointer-events:none;

}
.featured-image{

    position:absolute;

    right:-25px;

    bottom:0;

    width:58%;

    height:100%;

    z-index:1;

    pointer-events:none;

}
.featured-image img{

    position:absolute;

    right:0;

    bottom:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:right bottom;

}
.featured-image::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    right:30px;

    top:-90px;

    background:radial-gradient(circle,
    rgba(255,255,255,.55),
    transparent 70%);

}
.featured-image{

    position:absolute;
    right:-20px;
    bottom:0;
    width:58%;
    height:100%;
    overflow:hidden;
}

.featured-image::after{

    content:"";

    position:absolute;

    inset:0;

    background: linear-gradient(to left, rgba(255, 214, 230, 0) 20%, rgba(255, 214, 230, .25) 45%, rgb(244 173 204) 75%, #F68DB7 100%);

    pointer-events:none;
}
.custom-container{

    width:100%;

    max-width: 1750px;

    margin:auto;

    padding-left:25px;

    padding-right:25px;

}

/* Footer */

footer{

    background:#ebe8f2;

    padding:80px 0 30px;

    border-top:1px solid #E9EDF5;

}

footer p{

    color:#667085;

    line-height:30px;

    margin-top:25px;

}

footer h5{

    color:#1C2450;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}

footer ul{

    padding:0;

    list-style:none;

}

footer ul li{

    margin-bottom:14px;

}

footer ul li a{

    color:#667085;

    text-decoration:none;

    transition:.3s;

}

footer ul li a:hover{

    color:#6B3EF4;

    padding-left:6px;

}

footer hr{

    margin:20px 0 25px;

    border-color:#7a8ba9;

}

footer .text-center{

    color:#667085;

}
.footer-contact-card{

    display:flex;

    gap:16px;

    padding:18px;

    margin-bottom:18px;

    background:#fff;

    border:1px solid #EEF2F7;

    border-radius:18px;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.footer-contact-card:hover{

    transform:translateY(-5px);

    border-color:#6B3EF4;

    box-shadow:0 18px 40px rgba(107,62,244,.12);

}

.footer-contact-card .icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:linear-gradient(
    135deg,
    #6B3EF4,
    #18A75B);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;

    flex-shrink:0;

}

.footer-contact-card h6{

    color:#1C2450;

    font-weight:700;

    margin-bottom:8px;

}

.footer-contact-card a{

    color:#667085;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}

.footer-contact-card a:hover{

    color:#6B3EF4;

}
/*=========================================
EARLY DETECTION
==========================================*/

.early-detection{

    padding:120px 0;
    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #F7FCF9 100%
    );

    position:relative;
    overflow:hidden;

}

.early-detection::before{

    content:"";
    position:absolute;

    width:550px;
    height:550px;

    background:
    radial-gradient(circle,
    rgba(17,136,71,.08),
    transparent 70%);

    left:-180px;
    top:-180px;

}

.early-image{

    position:relative;

}

.early-image img{

    width:100%;
    border-radius:30px;

    box-shadow:
    0 30px 70px rgba(17,136,71,.15);

}



.early-detection h2{

    font-size:42px;
    font-weight:800;

    color:#222B32;

    margin:25px 0;

}

.early-detection h2 span{

    color:#118847;

}

.early-detection p{

    color:#64748B;
    line-height:1.9;
    font-size:18px;

    margin-bottom:35px;

}

.early-detection ul{

    padding:0;
    margin:0;

    list-style:none;

}

.early-detection li{

    display:flex;
    align-items:center;

    margin-bottom:20px;

    font-size:18px;
    font-weight:600;

    color:#334155;

}

.early-detection li i{

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-right:15px;

    background:#EAF8EF;

    color:#118847;

}
/*=========================================
HOW IT WORKS
==========================================*/

.how-work-section{

    /* padding:120px 0; */

    background:
    linear-gradient(180deg, #ccf3dc, #ffffff) !important;

}

.section-title{

    text-align:center;
    margin-bottom:70px;

}

.section-title h2{

    font-size:56px;
    font-weight:800;

    color:#222B32;

}

.timeline{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    flex-wrap:wrap;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    top:50px;

    left:5%;
    width:90%;

    height:4px;

    background:
    linear-gradient(
    90deg,
    #118847,
    #009688,
    #6B35D8
    );

    z-index:0;

}

.timeline-item{

    position:relative;

    width:13%;

    text-align:center;

    z-index:2;

}

.icon-box{

    width:95px;
    height:95px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;

    background:#fff;

    border:4px solid #EAF8EF;

    box-shadow:
    0 15px 40px rgba(17,136,71,.12);

    transition:.35s;

}

.icon-box i{

    font-size:34px;

    color:#118847;

}

.timeline-item:hover .icon-box{

    transform:translateY(-10px);

    background:
    linear-gradient(
    135deg,
    #118847,
    #18B86B
    );

    border-color:#118847;

}

.timeline-item:hover .icon-box i{

    color:#fff;

}

.step{

    display:inline-block;

    margin-top:18px;

    font-size:14px;

    font-weight:700;

    color:#6B35D8;

    background:#F3EEFF;

    padding:6px 14px;

    border-radius:30px;

}

.timeline-item h5{

    margin-top:18px;

    font-size:22px;

    color:#222B32;

    font-weight:700;

    line-height:1.5;

}

.connector{

    display:none;

}

/* Mobile */

@media(max-width:1200px){

.timeline{

flex-wrap:wrap;
gap:50px;

}

.timeline-item{

width:calc(25% - 20px);

}

.connector{

display:none;

}

}

@media(max-width:768px){

.timeline-item{

width:50%;

}

}

@media(max-width:576px){

.timeline-item{

width:100%;

}

}
.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#EAF8EF;

    color:#118847;

    padding:10px 22px;

    border-radius:40px;

    font-weight:600;

    margin-bottom:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}
/*=========================================
WHY CHOOSE SECTION
==========================================*/

.why-section{

    padding:60px 0;

    background:linear-gradient(180deg, #6b3ef40d 0%, #F5FCF8 100%);

    position:relative;
    overflow:hidden;

}

.why-section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-180px;
    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
        rgba(17,136,71,.08),
        transparent 70%
    );

}

.why-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:url(images/hex-line.svg);

    opacity:.05;

    animation:moveGrid 20s linear infinite;
}
.why-section .section-title{

    text-align:center;

    margin-bottom:70px;

}

.why-section .section-title h2{

    font-size:42px;

    font-weight:800;

    color:#222B32;

    line-height:1.2;

}

.why-section .section-title span{

    color:#118847;

}

.why-section .section-title p{

    margin-top:18px;

    color:#64748B;

    font-size:18px;

}
/* Tablet */
@media (max-width: 991px) {

    .why-card{
        padding: 35px 28px 18px !important;
    }

}

/* Mobile */
@media (max-width: 576px) {

    .why-card{
        padding: 30px 22px 15px;
        border-radius: 22px;
    }

    .why-card h4{
        font-size: 22px;
    }

    .why-card p{
        font-size: 15px;
        line-height: 1.7;
    }

    .why-card .icon{
        width: 75px;
        height: 75px;
        margin-bottom: 20px;
    }

    .why-card .icon i{
        font-size: 30px;
    }

}
.why-card{

     background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.7);

    box-shadow:
        0 20px 45px rgba(54,54,54,.06);

    border-radius:28px;

    padding:37px 30px 0px;

    height:100%;

    text-align:center;



    

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.why-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:linear-gradient(
        130deg,
        #18A75B,
        #6B3EF4,
        #18A75B);

    background-size:250%;

    animation:borderMove 6s linear infinite;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;
}
@keyframes borderMove{

0%{
background-position:0%;
}

100%{
background-position:250%;
}

}
.why-card:hover{

    transform:
        translateY(-14px)
        rotateX(4deg);

    box-shadow:

    0 30px 60px rgba(107,62,244,.18),

    0 0 50px rgba(24,167,91,.12);

}
.why-card .icon{
position:relative;
    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAF8EF;
    animation:floatIcon 4s ease-in-out infinite;
    transition:.35s;

}
@keyframes floatIcon{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0);
}

}
.why-card .icon i{

    font-size:36px;

    color:#118847;

    transition:.35s;

}
.why-card .icon::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(24,167,91,.25);

    animation:ripple 3s infinite;
}
@keyframes ripple{

0%{

transform:scale(.8);

opacity:1;

}

100%{

transform:scale(1.45);

opacity:0;

}

}
.why-card:hover .icon{

    background:linear-gradient(
    135deg,
    #118847,
    #18B96B
    );
   transform:

    rotate(8deg)

    scale(1.1);
}

.why-card:hover .icon i{

    color:#fff;

}
.why-card h4{

    font-size:26px;

    font-weight:700;

    color:#222B32;

    margin-bottom:18px;

    line-height:1.35;

}
.why-card p{

    color:#64748B;

    font-size:17px;

    line-height:1.9;

    margin:0;

}
/* .why-card:hover{

    border-color:#118847;

} */
.why-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-20deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

}

.why-card:hover::after{

    animation:shine .9s;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:140%;

}

}


.why-section .section-title span{

background:linear-gradient(
90deg,
#118847,
#6B35D8
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}
.why-card.green{
    border-top:5px solid #118847;
}

.why-card.purple{
    border-top:5px solid #6B35D8;
}

.why-card.teal{
    border-top:5px solid #009688;
}
.why-card.green .icon{
    background:#EAF8EF;
}
.why-card.green .icon i{
    color:#118847;
}

.why-card.purple .icon{
    background:#F4EEFF;
}
.why-card.purple .icon i{
    color:#6B35D8;
}

.why-card.teal .icon{
    background:#E8FBF9;
}
.why-card.teal .icon i{
    color:#009688;
}
.why-card:hover{
    transform:translateY(-10px);
    border-color:#118847;
    box-shadow:0 30px 60px rgba(17,136,71,.18);
}
.why-card{
    margin-top:0;
}

.col-lg-4:nth-child(2) .why-card,
.col-lg-4:nth-child(5) .why-card{
    margin-top:45px;
}

@media(max-width:991px){
    .col-lg-4:nth-child(2) .why-card,
    .col-lg-4:nth-child(5) .why-card{
        margin-top:0;
    }
}

/*=========================================
PARTNERS SECTION
==========================================*/

.partners{

    padding:60px 0px 100px;

    background:linear-gradient(
        180deg,
        #F7FCF9 0%,
        #ffffff 100%
    );

    position:relative;
    overflow:hidden;

}

.partners::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-180px;
    top:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(17,136,71,.08),
    transparent 70%);

}

.partners::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-180px;
    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(107,53,216,.06),
    transparent 70%);

}
.partners .section-title{

    margin-bottom:70px;

}

.partners .section-title span{

    display:inline-block;

    padding:5px 22px;

    border-radius:40px;

    background:#EAF8EF;

    color:#118847;

    font-weight:700;

    margin-bottom:20px;

}

.partners .section-title h2{

    font-size:42px;

    font-weight:800;

    color:#222B32;

}

.partners .section-title h2 span{

    padding:8px;

    background:none;

    background:linear-gradient(
        90deg,
        #118847,
        #6B35D8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.partners .section-title p{

    font-size:18px;

    color:#64748B;

    max-width:720px;

    margin:20px auto 0;

}
.partner-card{

    position:relative;
    z-index: 1;
    background:#fff;

    border-radius:28px;

    padding: 40px 40px 0px 40px;

    height:100%;

    border:none;
margin-top:70px;
    overflow:hidden;

    transition:.4s;

    box-shadow:
    0 15px 45px rgba(17,136,71,.08);

}

.partner-card:hover{

    transform:translateY(-10px);

}
.partner-card.green{

    border-top:5px solid #118847;

}
.partner-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:

    linear-gradient(
        135deg,
        #18A75B,
        #6B3EF4,
        #18A75B);

    background-size:300%;

    animation:borderAnimation 8s linear infinite;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;
}
.partner-logo::before{

    content:"";

    position:absolute;

    inset:-15px;

    border-radius:50%;

    background:

    radial-gradient(
        rgba(24,167,91,.25),
        transparent);

    z-index:-1;
}
.partner-card.purple{

    border-top:5px solid #6B35D8;

}

.partner-card.teal{

    border-top:5px solid #009688;

}
.partner-logo{

    max-height:70px;

    width:auto;

    object-fit:contain;

    margin-bottom:15px;

}
.partner-tags{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:30px 0;
}

.partner-tags span{

padding:10px 18px;

border-radius:40px;

background:#F7F8FC;

font-weight:600;

font-size:14px;
}
.partner-card{

background:rgba(255,255,255,.88);

backdrop-filter:blur(18px);

box-shadow:

0 25px 60px rgba(40,40,40,.08);
}
.partners{

background:

linear-gradient(

180deg,

#ffffff,

#F7FCFA);

}

.partners::before{

background-image:url(images/dna-pattern.svg);

background-repeat:no-repeat;

background-size:420px;

opacity:.05;
}
.col-lg-4:nth-child(2) .partner-card{

transform:scale(1.05);

z-index:5;
}
.col-lg-4:nth-child(2) .partner-card:hover{

transform:

scale(1.08)

translateY(-20px);
}
.partner-card:hover{

transform:

translateY(-18px)

rotateX(4deg);

box-shadow:

0 35px 70px rgba(107,62,244,.18),

0 0 60px rgba(24,167,91,.12);
}
.partner-card h4{

    font-size:28px;

    font-weight:700;

    color:#222B32;

    margin-bottom:18px;

}
.partner-card p{

    color:#64748B;

    line-height:1.9;

    margin-bottom:25px;

}
.partner-card ul{

    padding:0;

    margin:0 0 30px;

    list-style:none;

}

.partner-card li{

    position:relative;

    padding-left:28px;

    margin-bottom:14px;

    color:#334155;

    font-weight:500;

}

.partner-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    font-weight:bold;

}
.partner-card.green li::before{

    color:#118847;

}

.partner-card.purple li::before{

    color:#6B35D8;

}

.partner-card.teal li::before{

    color:#009688;

}
.partner-card a{

    display:inline-flex;
    position: relative;
    z-index: 999;
    align-items:center;

    gap:10px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.partner-card.green a{

    color:#118847;

}

.partner-card.purple a{

    color:#6B35D8;

}

.partner-card.teal a{

    color:#009688;

}

.partner-card a:hover{

    gap:16px;

}
.partner-card.green:hover{

    box-shadow:
    0 25px 60px rgba(17,136,71,.18);

}

.partner-card.purple:hover{

    box-shadow:
    0 25px 60px rgba(107,53,216,.18);

}

.partner-card.teal:hover{

    box-shadow:
    0 25px 60px rgba(0,150,136,.18);

}
/*=====================================
 SECTION
======================================*/

.cancer-section{

    position:relative;

    padding:60px 0;

    background:linear-gradient(
    180deg,
    #ffffff,
    #f4f9ff);

    overflow:hidden;

}

/*=====================================
 BACKGROUND CIRCLES
======================================*/

.bg-circle{

    position:absolute;

    border-radius:50%;

    background:#dceeff;

    filter:blur(2px);

    opacity:.45;

    animation:floatCircle 10s ease-in-out infinite;

}

.circle1{

    width:260px;
    height:260px;

    top:-80px;
    left:-80px;

}

.circle2{

    width:180px;
    height:180px;

    right:-60px;
    top:150px;

}

.circle3{

    width:140px;
    height:140px;

    left:18%;
    bottom:40px;

}

.circle4{

    width:220px;
    height:220px;

    right:10%;
    bottom:-70px;

}

@keyframes floatCircle{

50%{

transform:translateY(-25px);

}

}

/*=====================================
 HEADING
======================================*/

/* .section-title{

text-align:center;

margin-bottom:70px;

} */

.badge-title{

display:inline-block;

padding:10px 24px;

border-radius:50px;

background:#F3EEFF;
    color:#6B3EF4;

    border:1px solid #D8CCFF;

font-size:15px;

font-weight:600;

}

/* .section-title h2{

font-size:50px;

font-weight:700;

margin-top:18px;

color:#17375e;
  background:linear-gradient(
        90deg,
        #6B3EF4,
        #18A75B);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
} */

/* .section-title p{

font-size:18px;

color:#7185a1;

margin-top:15px;

} */

/*=====================================
 LIST
======================================*/

.cancer-list{

display:flex;

flex-direction:column;

gap:25px;

}

/*=====================================
 CARD
======================================*/

.cancer-card{

position:relative;

display:flex;

align-items:center;

gap:18px;

padding:20px;

border-radius:24px;

 background:#fff;

    border:1px solid #ECE8FF;

    box-shadow:
    0 10px 30px rgba(107,62,244,.08);

backdrop-filter:blur(16px);





transition:.35s;

cursor:pointer;

}

.cancer-card:hover{

 transform:translateY(-8px);

    border-color:#6B3EF4;

    box-shadow:
    0 18px 40px rgba(107,62,244,.16);

}

/*=====================================
 ICON
======================================*/

.card-icon{

/* width:72px;

height:72px; */

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;
background:linear-gradient(
    135deg,
    #F3EEFF,
    #EAF8F0);
}

.card-icon img{

width:77px;

height:77px;

object-fit:contain;

}

/*=====================================
 ICON COLORS
======================================*/

.pink .card-icon{background:#ffe8f3;}
.orange .card-icon{background:#fff0df;}
.cyan .card-icon{background:#e8fbff;}
.green .card-icon{background:#e8fff2;}
.purple .card-icon{background:#efe8ff;}
.blue .card-icon{background:#eaf3ff;}
.red .card-icon{background:#ffecec;}
.teal .card-icon{background:#e8ffff;}
.violet .card-icon{background:#f2ebff;}
.gold .card-icon{background:#fff6df;}
/*====================================
 BODY AREA
====================================*/
.body-area{
    position:relative;
    width:100%;
    aspect-ratio:500/700;
    max-width:620px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
}


/*====================================
 BODY GLOW
====================================*/

.body-glow{
    position: absolute;
    width: 500px;
    height: 700px;
    border-radius: 50%;
      background:
    radial-gradient(circle,

        rgba(107,62,244,.25),

        rgba(24,167,91,.12),

        transparent);
    filter: blur(20px);
    z-index: 1;
}

/*====================================
 BODY IMAGE
====================================*/

.human-body{
    width:100%;
    max-width:620px;
    height:auto;
    display:block;
}

@keyframes bodyFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*====================================
 CONNECTOR SVG
====================================*/

.body-glow{
    z-index:1;
}

.human-body{
    position:relative;
    z-index:2;
}

.connector-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    z-index:3;      /* Above body */

    overflow:visible;

    pointer-events:none;
}

.dot{
    z-index:4;
}

.connector-svg path{
    fill:none;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    shape-rendering:geometricPrecision;
}

.active-line{
    stroke-width:4px !important;
    opacity:1;
    filter:
        drop-shadow(0 0 6px currentColor)
        drop-shadow(0 0 12px currentColor);
}
/*====================================
 LINE COLORS
====================================*/

.connector-svg path{

    stroke:#6B3EF4;
    opacity:.55;
}

/*====================================
 HOTSPOTS
====================================*/

.dot{

    position:absolute;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#0d6efd;

    border:3px solid white;

    z-index:10;

    box-shadow:0 0 0 8px rgba(13,110,253,.20);

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.35);

}

100%{

transform:scale(1);

}

}

/*====================================
 HOTSPOT POSITIONS
 Adjust if your body image differs
====================================*/
.breast{
left: 39.4%;
top: 33.2%;
}

.liver{
left:41%;
top:37.4%;
}

.colon{
left:37.5%;
top:50.5%;
}

.ovary{
left:46%;
top:56.7%;
}

.lung{
left:55%;
top:28%;
}

.naso{
left:50.5%;
top:11%;
}

.leukemia{
left:52%;
top:40%;
}

.corpus-uteri{
left:49%;
top:59%;
}

.lymphoma{
left:39%;
top:70.5%;
}

.prostate{
left:77%;
top:82%;
}

/*====================================
 ACTIVE STATE
====================================*/

.active-dot{

   background:#18A75B;

    box-shadow:
    0 0 0 12px rgba(24,167,91,.28);

transform:scale(1.7);

}

.active-line{

    stroke:#18A75B;

    stroke-width:4;

    filter:
    drop-shadow(0 0 8px rgba(24,167,91,.45));
}

/*====================================
 BUTTON
====================================*/

.view-btn{

display:inline-block;

padding:18px 42px;

background:linear-gradient(90deg,#10b981,#059669);

border-radius:60px;

color:#fff;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.view-btn:hover{

transform:translateY(-6px);

color:#fff;

box-shadow:0 18px 35px rgba(16,185,129,.30);

}
/*====================================
 CARD CONTENT
====================================*/

.card-content{

    flex:1;

}

.card-content h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:6px;

    transition:.35s;

}

.card-content p{

    font-size:15px;

    color:#70839c;

    line-height:24px;

    margin:0;

}

/*====================================
 CARD NUMBER
====================================*/

.card-number{

    position:absolute;

    right:18px;

    top:18px;

    font-size:14px;

    font-weight:700;

    color:#ccd6e6;

}

/*====================================
 HEADING COLORS
====================================*/

.pink h4{color:#ff4f9d;}
.orange h4{color:#ff9800;}
.cyan h4{color:#00bcd4;}
.green h4{color:#1db954;}
.purple h4{color:#7b4dff;}
.blue h4{color:#2d7ff9;}
.red h4{color:#ef4444;}
.teal h4{color:#00b8b8;}
.violet h4{color:#9b5cff;}
.gold h4{color:#f4a000;}

/*====================================
 PREMIUM HOVER
====================================*/

.cancer-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.9),
        rgba(0,145,255,.15),
        rgba(255,255,255,.9)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.35s;

}

.cancer-card:hover::before{

    opacity:1;

}

.cancer-card:hover .card-icon{

    transform:scale(1.08) rotate(6deg);

}

.card-icon{

    transition:.35s;

}

.cancer-card:hover h4{

    transform:translateX(4px);

}

/*====================================
 BODY GLOW ANIMATION
====================================*/

.body-glow{

    animation:glowMove 5s ease-in-out infinite;

}

@keyframes glowMove{

0%,100%{

transform:scale(1);

opacity:.55;

}

50%{

transform:scale(1.08);

opacity:.9;

}

}

/*====================================
 CONNECTOR ANIMATION
====================================*/




/*====================================
 RESPONSIVE
====================================*/

@media (max-width:1400px){

.body-area{
max-width:520px;
}

}

@media (max-width:1200px){

.body-area{
max-width:460px;
}

}

@media (max-width:992px){

.body-area{
max-width:400px;
margin:40px auto;
}

}
@media (max-width:991px){

    /* Hide anatomy section */
    .body-area{
        display:none;
    }

    /* Left & right columns become full width */
    .col-xl-4{
        width:100%;
    }

    .left-list,
    .right-list{
        margin:0;
    }

    .cancer-list{
        gap:15px;
    }

    /* .section-title{
        margin-bottom:40px;
    } */

    .cancer-section{
        padding:60px 0;
    }
}
@media (max-width:768px){

/* .section-title h2{
    font-size:30px;
}

.section-title p{
    font-size:15px;
} */

.body-area{
    max-width:280px;
    width:100%;
    aspect-ratio:500/700;
    margin:35px auto;
    height:auto;
}

.human-body{
    width:100%;
    max-width:280px;
}

.body-glow{
    width:100%;
    height:100%;
}

.connector-svg{
    display:block;
}

.connector-svg path{
    stroke-width:2px;
}

.dot{
    display:block;
    width:9px;
    height:9px;
    border-width:2px;
     background:#6B3EF4;

    border:3px solid #fff;

    box-shadow:
    0 0 0 8px rgba(107,62,244,.20);
}

.cancer-card{
    padding:15px;
    margin-bottom:15px;
}

.card-icon{
    width:55px;
    height:55px;
}

.card-icon img{
    width:55px;
    height:55px;
}

.card-content h4{
    font-size:17px;
}

.card-content p{
    font-size:13px;
    line-height:20px;
}

.card-number{
    font-size:12px;
}

}

@media (max-width:576px){

.body-area{
    max-width:230px;
}

.human-body{
    max-width:230px;
}

.connector-svg path{
    stroke-width:1.5px;
}

.dot{
    width:7px;
    height:7px;
    box-shadow:0 0 0 4px rgba(13,110,253,.18);
}

/* .section-title h2{
    font-size:26px;
} */

.card-content h4{
    font-size:16px;
}

.card-content p{
    font-size:12px;
}

}
.custom-container{
max-width: 1750px;
margin:auto;
}
/* 1280 × 800 / 1366 × 768 */
@media (min-width:1200px) and (max-width:1366px){
    .naso{
        left:50.5%;
        top:14%;
    }
    .lung{
        left:55%;
        top:30%;
    }
    .lymphoma{
        left:39%;
        top:68.5%;
    }
    .prostate{
        left:76%;
        top:79%;
    }
    .custom-container{
        max-width:1240px;
        padding:0 20px;
    }

    .body-area{
        height:700px;
    }

    .human-body{
        width:430px;
    }

    .body-glow{
        width:380px;
        height:560px;
    }

    .cancer-card{
        padding:16px;
    }

    .card-icon{
        width:62px;
        height:62px;
    }

    .card-icon img{
        width:62px;
        height:62px;
    }

    .card-content h4{
        font-size:18px;
    }

    .card-content p{
        font-size:14px;
        line-height:22px;
    }

    /* .section-title h2{
        font-size:42px;
    }

    .section-title{
        margin-bottom:50px;
    } */
}
@media (min-width:1200px) and (max-width:1366px){

    .connector-svg{
        transform:scale(.92);
        transform-origin:center;
    }

}
/* 1280 × 800 / 1366 × 768 */
@media (min-width:1200px) and (max-width:1366px){

    /* Body */
    .human-body{
        width:430px;
    }

    /* Hotspots */
    /* .dot{
        width:12px;
        height:12px;
    } */


}
/*=====================================
Statistics Bar
======================================*/

.statistics-bar{

    margin-top:50px;

}

.statistics-bar .custom-container{

    background:linear-gradient(
        135deg,
        #6B3EF4 0%,
        #5F3DE6 45%,
        #18A75B 100%
    );

    border-radius:18px;

    overflow:hidden;

    position:relative;

}

/* Soft overlay for premium look */

.statistics-bar .custom-container::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top left,
    rgba(255,255,255,.10),
    transparent 45%);

    pointer-events:none;

}

/* DNA Pattern */

.statistics-bar .custom-container::after{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:240px;

    height:100%;

    background:url(images/dna-pattern.png);

    background-repeat:no-repeat;

    background-position:right center;

    background-size:contain;

    opacity:.08;

}

.stat-item{

    padding:35px 10px;

    text-align:center;

    color:#fff;

    position:relative;

    z-index:2;

}

.stat-item::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:55px;

    background:rgba(255,255,255,.18);

}

.col:last-child .stat-item::after{

    display:none;

}

.stat-item h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

}

.stat-item p{

    margin:0;

    font-size:16px;

    opacity:.9;

    font-weight:400;

}
.resources-section{

    position:relative;

    padding:100px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #F8F5FF 55%,
        #F5FFF8 100%);

    overflow:hidden;
}

.resources-section::before{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    left:-120px;
    top:-120px;

    border-radius:50%;

    background:rgba(107,62,244,.06);

    filter:blur(10px);
}

.resources-section::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-80px;
    bottom:-80px;

    border-radius:50%;

    background:rgba(24,167,91,.07);

    filter:blur(10px);
}
.faq-box{

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:1px solid #ECE8FF;

    box-shadow:
    0 20px 45px rgba(107,62,244,.08);
}

.faq-box h3{

    font-size:34px;

    font-weight:700;

    color:#2D2558;

    margin-bottom:30px;
}
.accordion-item{

    border:none;

    margin-bottom:18px;

    border-radius:18px !important;

    overflow:hidden;

    background:#fff;

    box-shadow:
    0 10px 25px rgba(107,62,244,.05);

    transition:.3s;
}

.accordion-item:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 30px rgba(107,62,244,.10);
}
.accordion-button{
    font-weight: 500;
    position:relative;
    padding-right:60px;
}

.accordion-button::before{

    content:"+";

    position:absolute;

    right:25px;
    top:50%;

    transform:translateY(-50%);

    width:32px;
    height:32px;

    border-radius:50%;

    background:#F3EEFF;

    color:#6B3EF4;

    font-size:22px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;
}

.accordion-button:not(.collapsed)::before{

    content:"−";

    background:#EAF8F0;

    color:#18A75B;
}
.accordion-body{

    padding:25px;

    color:#6B7280;

    font-size:16px;

    line-height:30px;
}
.accordion-button::after{
    display:none;
}

.faq-list{

    list-style:none;

    padding:0;

    margin:20px 0 0;
}

.faq-list li{

    display:flex;

    gap:12px;

    margin-bottom:14px;

    color:#4B5563;

    align-items:flex-start;
}

.faq-list i{

    color:#18A75B;

    margin-top:5px;
}
.test-box{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    padding:55px 40px;

    background:
    linear-gradient(
        135deg,
        #6B3EF4,
        #18A75B);

    box-shadow:
    0 25px 55px rgba(107,62,244,.25);

    /* height:100%; */
}
.test-box::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:rgba(255,255,255,.12);
}

.test-box::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    left:-50px;

    bottom:-50px;

    border-radius:50%;

    background:rgba(255,255,255,.08);
}
.test-content{

    position:relative;

    z-index:2;
}

.test-content h3{

    color:#fff;

    font-size:34px;

    font-weight:700;

    margin-bottom:20px;
}

.test-content p{

    color:rgba(255,255,255,.9);

    font-size:17px;

    line-height:30px;

    margin-bottom:35px;
}
.btn-test{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    border-radius:60px;

    background:#fff;

    color:#6B3EF4;

    font-weight:700;

    text-decoration:none;

    transition:.35s;
}

.btn-test:hover{

    background:#18A75B;

    color:#fff;

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.15);
}
@media(max-width:991px){

    .faq-box,
    .test-box{

        margin-bottom:30px;
    }

    .faq-box{

        padding:30px;
    }

    .test-box{

        padding:40px 30px;
    }

    .faq-box h3,
    .test-content h3{

        font-size:28px;
    }

}

@media(max-width:576px){

    .faq-box{

        padding:20px;
    }

    .accordion-button{

        font-size:16px;

        padding:18px;
    }

    .accordion-body{

        font-size:15px;

        line-height:28px;
    }

}
/*====================================
 CTA SECTION
====================================*/

.cta-section{

    /* padding:100px 0; */

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #F8F5FF);
}

/*====================================
 CTA BOX
====================================*/

.cta-box{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    padding:70px 60px;

    background:
    linear-gradient(
        135deg,
        #6B3EF4 0%,
        #5A34D8 45%,
        #18A75B 100%);

    box-shadow:
        0 25px 60px rgba(107,62,244,.22);
}

/* Decorative circles */

.cta-box::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    top:-120px;
    right:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.08);
}

.cta-box::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    bottom:-70px;
    left:-70px;

    border-radius:50%;

    background:rgba(255,255,255,.08);
}

/*====================================
 CONTENT
====================================*/

.cta-box h2{

    color:#fff;

    font-size:48px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;

    position:relative;
    z-index:2;
}

.cta-box p{

    color:rgba(255,255,255,.92);

    font-size:18px;

    line-height:30px;

    margin:0;

    position:relative;
    z-index:2;
}
.btn-consult{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:60px;

    background:#fff;

    color:#6B3EF4;

    font-weight:700;

    text-decoration:none;

    margin-right:15px;

    transition:.35s;

    position:relative;
    z-index:2;
}

.btn-consult:hover{

    background:#18A75B;

    color:#fff;

    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);
}
.btn-outline-white{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:60px;

    border:2px solid rgba(255,255,255,.8);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    position:relative;
    z-index:2;
}

.btn-outline-white:hover{

    background:#fff;

    color:#6B3EF4;

    border-color:#fff;

    transform:translateY(-5px);
}
@media(max-width:991px){

    .cta-box{

        padding:50px 30px;

        text-align:center;
    }

    .cta-box h2{

        font-size:34px;
    }

    .cta-box p{

        font-size:16px;

        margin-bottom:30px;
    }

    .btn-consult,
    .btn-outline-white{

        width:100%;

        margin:8px 0;
    }

}

@media(max-width:576px){

    .cta-section{

        padding:70px 0;
    }

    .cta-box{

        border-radius:22px;

        padding:40px 20px;
    }

    .cta-box h2{

        font-size:28px;
    }

}
@media (max-width: 991.98px) {

    .navbar-collapse{
        text-align:right;
    }

    .navbar-nav{
        align-items:center !important;
        width:100%;
        margin-top:20px;
        background: aliceblue;
    }

    .navbar-nav .nav-item{
        width:auto;
    }

    .navbar-nav .nav-link{
        padding:12px 0;
    }

}
/*============================================
Back To Top Button
============================================*/

#scrollTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    background:linear-gradient(135deg,#6B3EF4,#8458FF);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;

    cursor:pointer;

    box-shadow:0 12px 30px rgba(107,62,244,.30);

    transition:all .35s ease;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

}

#scrollTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#scrollTop:hover{

    transform:translateY(-6px) scale(1.08);

    box-shadow:0 20px 45px rgba(107,62,244,.45);

}

#scrollTop i{

    transition:.3s;

}

#scrollTop:hover i{

    transform:translateY(-2px);

}
@media (max-width:1200px){

.featured-banner{

    padding:50px;

}

.featured-content h2{

    font-size:42px;

}

.featured-image img{

    max-width:430px;

}

}
@media (max-width:991px){

.featured-banner{

    flex-direction:column;

    text-align:center;

    padding:50px 35px;

    border-radius:30px;

}

.featured-content{

    width:100%;

}

.featured-content h2{

    font-size:40px;

}

.featured-content h5{

    font-size:22px;

}

.featured-content p{

    max-width:100%;

}

.feature-tags{

    justify-content:center;

    flex-wrap:wrap;

}

.featured-btn{

    margin:auto;

}

.featured-image{

    margin-top:40px;

}

.featured-image img{

    width:100%;

    max-width:450px;

}

.stat-card{

    justify-content:center;

    text-align:center;

}

.test-card{

    height:100%;

}

}
@media (max-width:768px){

.partners{

    padding:80px 0;

}

.section-title h2{

    font-size:36px;

}

.section-title p{

    font-size:16px;

}

.featured-banner{

    padding:35px 25px;

}

.featured-content h2{

    font-size:34px;

}

.featured-content h5{

    font-size:20px;

}

.featured-image img{

    max-width:360px;

}

.card-top{

    flex-direction:column;

    text-align:center;

}

.card-heading{

    margin-top:20px;

}

.card-footer{

    flex-direction:column;

    gap:15px;

    text-align:center;

}

.card-footer a{

    margin:auto;

}

}
@media (max-width:576px){

.custom-container{

    padding-left:20px !important;

    padding-right:20px !important;

}

.section-title h2{

    font-size:30px;

    line-height:1.3;

}

.section-title p{

    font-size:15px;

}

.featured-banner{

    padding:30px 20px;

}

.featured-content h2{

    font-size:30px;

}

.featured-content h5{

    font-size:18px;

}

.featured-content p{

    font-size:15px;

}

.feature-tags{

    gap:10px;

}

.feature-tags span{

    font-size:12px;

    padding:8px 14px;

}

.featured-btn{

    width:100%;

    justify-content:center;

}

.featured-image img{

    width:100%;

    max-width:280px;

}

.stat-card{

    padding:20px;

}

.stat-icon{

    width:55px;

    height:55px;

    font-size:22px;

}

.stat-card h3{

    font-size:28px;

}

.test-card{

    padding:25px;

}

.card-heading h4{

    font-size:22px;

}

.card-heading p{

    font-size:14px;

}

.chips{

    flex-wrap:wrap;

}

.chips span{

    font-size:12px;

}

.view-all-btn{

    width:100%;

    justify-content:center;

}

}
@media (max-width:400px){

.section-title h2{

    font-size:26px;

}

.featured-content h2{

    font-size:26px;

}

.featured-image img{

    max-width:230px;

}

.card-heading h4{

    font-size:20px;

}

.card-heading p{

    font-size:13px;

}

.feature-tags span{

    width:100%;

}

}
@media (max-width:991px){

.how-work-section{

    padding:80px 0;

}

.how-work-section .custom-container{

    padding-left:30px !important;

    padding-right:30px !important;

}

.timeline{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.timeline-item{

    width:100%;

}

.connector{

    display:none;

}

.icon-box{

    margin:auto;

}

}
@media (max-width:768px){

.how-work-section{

    padding:70px 0;

}

.how-work-section .section-title{

    text-align:center;

    margin-bottom:40px;

}

.how-work-section .section-title h2{

    font-size:34px;

}

.timeline{

    grid-template-columns:1fr;

    gap:25px;

}

.timeline-item{

    display:flex;

    align-items:center;

    text-align:left;

    gap:18px;

    padding:20px;

    border-radius:18px;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.icon-box{

    width:65px;

    height:65px;

    flex-shrink:0;

    margin:0;

}

.step{

    position:absolute;

    top:12px;

    right:15px;

    font-size:14px;

}

.timeline-item h5{

    margin:0;

    font-size:18px;

    line-height:1.5;

}

}
@media (max-width:576px){

.how-work-section .custom-container{

    padding-left:20px !important;

    padding-right:20px !important;

}

.how-work-section .section-title h2{

    font-size:28px;

}

.timeline-item{

    padding:18px;

}

.icon-box{

    width:55px;

    height:55px;

}

.icon-box i{

    font-size:22px;

}

.timeline-item h5{

    font-size:16px;

}

.step{

    font-size:13px;

}

}
@media (max-width:400px){

.timeline-item{

    gap:15px;

    padding:15px;

}

.icon-box{

    width:50px;

    height:50px;

}

.icon-box i{

    font-size:20px;

}

.timeline-item h5{

    font-size:15px;

}

}