:root{

    /* Brand Colors */

    --primary:#24544b;
    --primary-dark:#183d37;
    --primary-light:#edf7f5;
    --secondary:#5f847c;

    --white:#ffffff;

    --bg:#fafcfb;

    --heading:#1b2d29;

    --text:#667085;

    --border:#e6eeeb;

    --success:#3cb179;

    --warning:#f5b942;

    --danger:#ef4444;


    /* Typography */

    --font-heading:'Playfair Display',serif;

    --font-body:'Poppins',sans-serif;

    --fw-400:400;
    --fw-500:500;
    --fw-600:600;
    --fw-700:700;


    /* Font Size */

    --fs-14:14px;
    --fs-16:16px;
    --fs-18:18px;
    --fs-20:20px;
    --fs-24:24px;
    --fs-32:32px;
    --fs-42:42px;
    --fs-56:56px;


    /* Line Height */

    --lh-base:1.7;
    --lh-heading:1.2;


    /* Border Radius */

    --radius-sm:8px;

    --radius-md:12px;

    --radius-lg:18px;

    --radius-xl:24px;

    --radius-pill:100px;


    /* Shadows */

    --shadow-sm:0 3px 10px rgba(0,0,0,.05);

    --shadow-md:0 12px 30px rgba(0,0,0,.07);

    --shadow-lg:0 20px 60px rgba(0,0,0,.10);


    /* Transition */

    --transition:.35s ease;


    /* Section Spacing */

    --section-space:100px;

    --content-space:60px;


    /* Container */

    --container:1320px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:var(--font-body);

font-size:var(--fs-16);

color:var(--text);

line-height:var(--lh-base);

background:var(--white);

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

padding:0;

margin:0;

}

section{

padding:var(--section-space) 0;

}

.container{

max-width:var(--container);

}


.section-title{

margin-bottom:60px;

text-align:center;

}

.section-title span{

display:inline-block;

padding:8px 18px;

background:var(--primary-light);

color:var(--primary);

border-radius:var(--radius-pill);

font-size:var(--fs-14);

font-weight:600;

margin-bottom:20px;

}

.section-title h2{

font-size:var(--fs-42);

font-family:var(--font-heading);

color:var(--heading);

line-height:var(--lh-heading);

margin-bottom:15px;

}

.section-title p{

max-width:700px;

margin:auto;

}

.btn-theme{

background:var(--primary);

color:var(--white);

padding:16px 34px;

border-radius:var(--radius-md);

font-weight:600;

display:inline-flex;

align-items:center;

gap:10px;

transition:var(--transition);

}

.btn-theme:hover{

background:var(--primary-dark);

transform:translateY(-3px);

}

.btn-outline{

background:transparent;

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

color:var(--primary);

padding:15px 34px;

border-radius:var(--radius-md);

font-weight:600;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

.card-ui{

background:#fff;

border:1px solid var(--border);

border-radius:var(--radius-lg);

padding:30px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.card-ui:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-md);

}

.icon-box{

width:65px;

height:65px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary-light);

color:var(--primary);

font-size:26px;

margin-bottom:20px;

}

.hero{

padding-top:110px;

padding-bottom:80px;

background:linear-gradient(180deg,#fff,#fafcfb);

}

.hero-image{

position:relative;

}

.hero-image::before{

content:"";

position:absolute;

width:520px;

height:520px;

background:var(--primary-light);

border-radius:50%;

left:50%;

top:50%;

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

z-index:-1;

}

.hero-image img{

width:100%;

max-width:520px;

margin:auto;

}

.stats{

background:#fff;

border-radius:var(--radius-xl);

box-shadow:var(--shadow-md);

padding:35px;

margin-top:-40px;

position:relative;

z-index:10;

}

.stats-item h3{

font-size:36px;

color:var(--heading);

font-weight:700;

}

.stats-item p{

margin:0;

}

.bg-light{

background:var(--bg);

}

.bg-primary-soft{

background:var(--primary-light);

}

.bg-primary{

background:var(--primary);

color:#fff;

}


/* ===========================
      Hero Section
=========================== */

.hero-section{

padding:50px 0;

position:relative;

overflow:hidden;

background:#f7f0f2;

}


/* Badge */

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:var(--primary-light);

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:28px;

}

.hero-badge i{

font-size:15px;

}


/* Heading */

.hero-title{

font-size:58px;

line-height:1.1;

font-family:var(--font-heading);

font-weight:700;

color:var(--heading);

margin-bottom:25px;

max-width:620px;

}

.hero-title span{

color:var(--primary);

}


/* Description */

.hero-desc{

max-width:540px;

font-size:18px;

line-height:1.8;

margin-bottom:35px;

}


/* Features */

.hero-points{

display:flex;

flex-wrap:wrap;

gap:18px 35px;

margin-bottom:40px;

}

.point{

display:flex;

align-items:center;

gap:12px;

font-weight:500;

color:var(--heading);

}

.point i{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--primary-light);

color:var(--primary);

font-size:20px;

transition:.3s;

}

.point:hover i{

background:var(--primary);

color:#fff;

}


/* Buttons */

.hero-btns{

display:flex;

gap:18px;

align-items:center;

flex-wrap:wrap;

}


/* Image */

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}


/* Circle */

.hero-circle{

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:#edf7f5;

z-index:0;

}


/* Image */

.hero-image img{

position:relative;

z-index:2;

max-width:520px;

width:100%;

}


/* Decorative Blur */

.hero-image::before{

content:"";

position:absolute;

width:130px;

height:130px;

background:#dceee9;

filter:blur(70px);

top:30px;

left:20px;

z-index:-1;

}

.hero-image::after{

content:"";

position:absolute;

width:100px;

height:100px;

background:#edf7f5;

border-radius:50%;

bottom:30px;

right:60px;

z-index:1;

}


/*=========================
        Stats Section
==========================*/

.stats-section{

    margin-top:-195px;

    position:relative;

    z-index:10;

}

.stats-wrapper{

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(36,84,75,.08);

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    overflow:hidden;

}

.stat-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:35px;

    border-right:1px solid var(--border);

    height:100%;

}

.stat-icon{

    width:72px;

    height:72px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--primary-light);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.stat-icon i{

    font-size:30px;

    color:var(--primary);

}

.stat-content h3{

    margin:0;

    color:var(--heading);

    font-size:40px;

    font-weight:700;

    line-height:1;

}

.stat-content p{

    margin:8px 0 0;

    color:var(--text);

    font-size:16px;

    line-height:1.6;

}

.stat-item:hover .stat-icon{

    background:var(--primary);

    transform:translateY(-4px);

}

.stat-item:hover .stat-icon i{

    color:#fff;

}

/*==================================
        Treatment Section
===================================*/

.treatment-section{

background:#fff;

}

.section-heading{

max-width:700px;

margin:auto;

}

.section-tag{

display:inline-block;

position:relative;

font-size:13px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

color:var(--primary);

margin-bottom:15px;

}

.section-tag::before,

.section-tag::after{

content:"";

position:absolute;

width:45px;

height:2px;

background:var(--primary);

top:50%;

}

.section-tag::before{

right:100%;

margin-right:12px;

}

.section-tag::after{

left:100%;

margin-left:12px;

}

.section-heading h2{

font-size:42px;

font-family:var(--font-heading);

color:var(--heading);

font-weight:700;

margin-bottom:0;

}

/* Card */

.treatment-card{

background:#fff;

border-radius:18px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.treatment-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.10);

}

/* Image */

.treatment-img{

overflow:hidden;

height:210px;

}

.treatment-img img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.treatment-card:hover img{

transform:scale(1.08);

}

/* Content */

.treatment-content{

padding:30px;

position:relative;

}

/* Icon */

.treatment-icon{

width:55px;

height:55px;

border-radius:50%;

background:var(--primary-light);

display:flex;

align-items:center;

justify-content:center;

margin-top:-58px;

margin-bottom:18px;

position:relative;

z-index:5;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.treatment-icon i{

font-size:22px;

color:var(--primary);

}

.treatment-card:hover .treatment-icon{

background:var(--primary);

}

.treatment-card:hover .treatment-icon i{

color:#fff;

}

.treatment-content h3{

font-size:24px;

font-weight:600;

color:var(--heading);

margin-bottom:12px;

}

.treatment-content p{

margin:0;

font-size:15px;

line-height:1.8;

}

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

.why-us-section{

    position:relative;

    padding:100px 0;

    background:#fff;

}

/*=========================================
        FEATURE BOX
==========================================*/

.feature-box{

    display:flex;
    flex-wrap: wrap;
    align-items:center;

    gap:14px;

    transition:.35s;

    height:100%;

}

.feature-box:hover{

    transform:translateY(-5px);

}

.feature-icon{

    width:54px;

    height:54px;

    min-width:54px;

    border-radius:50%;

    background:var(--primary-light);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.feature-icon i{

    color:var(--primary);

    font-size:22px;

}

.feature-box:hover .feature-icon{

    background:var(--primary);

}

.feature-box:hover i{

    color:#fff;

}

.feature-box h6{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:var(--heading);

}

.feature-box p{

    margin:3px 0 0;

    font-size:14px;

    color:var(--text);

}

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

.cta-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    padding:65px 50px;

    background:linear-gradient(135deg,#24544b,#1a3f38);

    color:#fff;

    min-height:420px;

    display:flex;

    align-items:center;

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

}

.cta-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

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

    border-radius:50%;

    top:-80px;

    right:-60px;

}

.cta-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

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

    border-radius:50%;

    bottom:-80px;

    left:-60px;

}

.cta-content{

    position:relative;

    z-index:2;

}

.cta-content h3{

    font-family:var(--font-heading);

    font-size:48px;

    line-height:1.25;

    color:#fff;

    margin-bottom:25px;

}

.cta-content p{

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

    font-size:17px;

    line-height:1.8;

    max-width:320px;

    margin-bottom:35px;

}

.cta-card .btn-theme{

    background:#fff;

    color:var(--primary);

    border-radius:12px;

    padding:16px 32px;

    font-weight:600;

    display:inline-flex;

    gap:10px;

    align-items:center;

}

.cta-card .btn-theme:hover{

    background:#edf7f5;

    transform:translateY(-4px);

}

/*=========================================
        LEAF IMAGE
==========================================*/

.leaf-img{

    position:absolute;

    right:-10px;

    bottom:-10px;

    width:180px;

    opacity:.35;

    pointer-events:none;

}

/*=========================================
        LOCATION AREA
==========================================*/

.nearby-location{

    margin-top:100px;

}

.location-list{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:45px;

}

.location-list a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:13px 24px;

    background:#fff;

    color:var(--heading);

    border:1px solid var(--border);

    border-radius:12px;

    font-size:15px;

    font-weight:500;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.location-list a::before{

    content:"\F3E7";

    font-family:"bootstrap-icons";

    color:var(--primary);

    font-size:13px;

}

.location-list a:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

    transform:translateY(-4px);

}

.location-list a:hover::before{

    color:#fff;

}

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

.section-heading{

    margin-bottom:40px;

}

.section-heading.text-start{

    margin-bottom:55px;

}

.section-heading h2{

    font-size:46px;

    color:var(--heading);

    font-family:var(--font-heading);

    line-height:1.25;

}

.section-tag{

    display:inline-block;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary);

    margin-bottom:18px;

    position:relative;

}

.section-tag::after{

    content:"";

    width:55px;

    height:2px;

    background:var(--primary);

    display:inline-block;

    margin-left:12px;

    vertical-align:middle;

}

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

@media(max-width:1199px){

.cta-content h3{

font-size:40px;

}

}

@media(max-width:991px){

.why-us-section{

padding:80px 0;

}

.cta-card{

margin-top:40px;

min-height:auto;

padding:50px 35px;

}

.cta-content h3{

font-size:34px;

}

.nearby-location{

margin-top:70px;

}

}

@media(max-width:767px){

.section-heading h2{

font-size:30px;

}

.feature-box{

margin-bottom:25px;

}

.location-list{

justify-content:flex-start;

}

.location-list a{

width:calc(50% - 8px);

justify-content:center;

padding:12px;

}

.cta-card{

padding:40px 30px;

}

.cta-content h3{

font-size:28px;

}

.leaf-img{

width:130px;

opacity:.18;

}

}

@media(max-width:575px){

.location-list a{

width:100%;

}

}

/* Responsive */

@media(max-width:991px){

.section-heading h2{

font-size:34px;

}

.treatment-img{

height:220px;

}

}

@media(max-width:767px){

.section-heading h2{

font-size:28px;

}

.treatment-content{

padding:25px;

}

}



@media(max-width:991px){

.stat-item{

border-right:none;

border-bottom:1px solid var(--border);

}

}

@media(max-width:767px){

.stats-section{

margin-top:30px;

}

.stat-item{

padding:25px;

}

.stat-icon{

width:60px;

height:60px;

}

.stat-icon i{

font-size:24px;

}

.stat-content h3{

font-size:30px;

}

}




/* Responsive */

@media(max-width:991px){

.hero-section{

padding:70px 0;

}

.hero-title{

font-size:42px;

}

.hero-image{

margin-top:60px;

}

.hero-circle{

width:380px;

height:380px;

}

}

@media(max-width:576px){

.hero-title{

font-size:34px;

}

.hero-points{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.hero-circle{

width:320px;

height:320px;

}

}



@media(max-width:992px){

:root{

--section-space:70px;

--fs-56:42px;

--fs-42:34px;

}

}

@media(max-width:768px){

:root{

--section-space:60px;

--fs-56:34px;

--fs-42:28px;

--fs-32:24px;

}

}