/*==========================================================
COMPONENTS.CSS
Reusable Premium Components
==========================================================*/

/*==========================
SECTION HEADER
==========================*/

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    background:#F8F3F7;

    color:#7F3F73;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.section-header h2{

    font-family:'Playfair Display',serif;

    font-size:58px;

    color:#1B1B1B;

    margin-bottom:18px;

    line-height:1.15;

}

.section-header p{

    color:#666;

    font-size:17px;

    line-height:1.9;

}




/*==========================
TITLE UNDERLINE
==========================*/

.title-line{

    width:90px;

    height:5px;

    border-radius:999px;

    background:linear-gradient(90deg,#7F3F73,#B77C90);

    margin:25px auto;

}





/*==========================
BADGES
==========================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

    font-size:14px;

    font-weight:600;

}

.badge i{

    color:#7F3F73;

}





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

.feature-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    transition:.4s;

    border:1px solid #EEE;

    overflow:hidden;

    position:relative;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.08);

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#7F3F73,#B77C90);

    transform:scaleX(0);

    transition:.35s;

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    background:#F7F2F7;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.feature-icon i{

    font-size:34px;

    color:#7F3F73;

}

.feature-card h3{

    margin-bottom:15px;

}

.feature-card p{

    line-height:1.9;

}





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

.treatment-card{

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 15px 45px rgba(0,0,0,.05);

    transition:.35s;

}

.treatment-card:hover{

    transform:translateY(-10px);

}

.treatment-image{

    height:260px;

    overflow:hidden;

}

.treatment-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.treatment-card:hover img{

    transform:scale(1.08);

}

.treatment-content{

    padding:35px;

}

.treatment-content h3{

    margin-bottom:14px;

}

.treatment-content p{

    margin-bottom:24px;

}

.read-more{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#7F3F73;

    font-weight:600;

}





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

.doctor-card{

    border-radius:35px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 18px 50px rgba(0,0,0,.06);

    transition:.35s;

}

.doctor-card:hover{

    transform:translateY(-12px);

}

.doctor-image{

    position:relative;

}

.doctor-image img{

    width:100%;

}

.doctor-content{

    padding:35px;

}

.doctor-content h3{

    margin-bottom:10px;

}

.doctor-content small{

    color:#7F3F73;

    display:block;

    margin-bottom:18px;

    font-weight:600;

}





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

.result-card{

    border-radius:24px;

    overflow:hidden;

    position:relative;

}

.result-card img{

    width:100%;

    transition:.5s;

}

.result-card:hover img{

    transform:scale(1.05);

}





/*==========================
TESTIMONIAL
==========================*/

.testimonial{

    background:#fff;

    border-radius:30px;

    padding:40px;

    box-shadow:0 20px 55px rgba(0,0,0,.05);

}

.testimonial .stars{

    color:#FDBB2D;

    margin-bottom:20px;

}

.testimonial p{

    font-size:17px;

    line-height:2;

}

.client{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:30px;

}

.client img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}





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

.cta-box{

    background:linear-gradient(135deg,#7F3F73,#B77C90);

    border-radius:40px;

    padding:90px;

    color:#fff;

    text-align:center;

}

.cta-box h2{

    color:#fff;

}

.cta-box p{

    color:#fff;

    opacity:.9;

    max-width:700px;

    margin:25px auto 40px;

}

.cta-box .primary-btn{

    background:#fff;

    color:#7F3F73;

}





/*==========================
FORM
==========================*/

.form-group{

    margin-bottom:24px;

}

.form-control{

    width:100%;

    height:62px;

    border-radius:18px;

    border:1px solid #E8E8E8;

    padding:0 22px;

    transition:.3s;

}

textarea.form-control{

    height:180px;

    padding:20px;

    resize:none;

}

.form-control:focus{

    border-color:#7F3F73;

    box-shadow:0 0 0 4px rgba(127,63,115,.08);

}





/*==========================
IMAGE OVERLAY
==========================*/

.overlay-card{

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.75)

    );

}





/*==========================
HOVER SCALE
==========================*/

.hover-scale{

    overflow:hidden;

}

.hover-scale img{

    transition:.45s;

}

.hover-scale:hover img{

    transform:scale(1.08);

}
/*==========================================
TREATMENTS
==========================================*/

.treatments-section{

    background:#fff;

}

.treatments-grid{

    display:grid;

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

    gap:32px;

}

.treatment-tag{

    display:inline-block;

    padding:8px 18px;

    background:#F8F3F7;

    color:#7F3F73;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.treatment-card{

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    box-shadow:0 18px 50px rgba(0,0,0,.06);

    transition:.4s;

}

.treatment-card:hover{

    transform:translateY(-12px);

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

}

.treatment-image{

    height:280px;

    overflow:hidden;

}

.treatment-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.treatment-card:hover img{

    transform:scale(1.08);

}

.treatment-content{

    padding:35px;

}

.treatment-content h3{

    margin-bottom:14px;

    font-size:28px;

}

.treatment-content p{

    margin-bottom:28px;

}

.consultation-card{

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#7F3F73,#B77C90);

    color:#fff;

    text-align:center;

}

.consultation-inner{

    padding:50px;

}

.consultation-inner i{

    font-size:60px;

    margin-bottom:20px;

}

.consultation-inner h3{

    color:#fff;

    margin-bottom:18px;

}

.consultation-inner p{

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

    margin-bottom:30px;

}

.consultation-inner .primary-btn{

    background:#fff;

    color:#7F3F73;

}
/*==================================================
BEFORE AFTER
==================================================*/

.before-after-section{
    background:#FCFCFD;
}

.before-wrapper{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.image-compare{
    position:relative;
    width:100%;
    height:650px;
    border-radius:35px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.08);
    user-select:none;
}

.before-img,
.after-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.after-image{
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    overflow:hidden;
}

.compare-slider{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:ew-resize;
    z-index:20;
}

.slider-button{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:68px;
    height:68px;
    border-radius:50%;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#7F3F73;
    font-size:28px;
    box-shadow:0 15px 45px rgba(0,0,0,.18);
    z-index:15;
    pointer-events:none;
}

.slider-button::before{
    content:"";
    position:absolute;
    left:50%;
    top:-1000px;
    bottom:-1000px;
    width:3px;
    background:#fff;
    transform:translateX(-50%);
}

.result-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#F8F2F7;
    color:#7F3F73;
    padding:12px 20px;
    border-radius:999px;
    margin-bottom:25px;
    font-weight:600;
}

.before-right h3{
    font-size:56px;
    line-height:1.15;
    margin-bottom:25px;
    font-family:'Playfair Display';
}

.before-right p{
    margin-bottom:35px;
}

.result-list{
    display:grid;
    gap:18px;
    margin-bottom:40px;
}

.result-list div{
    display:flex;
    gap:14px;
    align-items:center;
    font-weight:500;
}

.result-list i{
    color:#7F3F73;
}

.result-stats{
    display:flex;
    gap:60px;
    margin-bottom:40px;
}

.result-stats h2{
    color:#7F3F73;
    margin-bottom:5px;
}

.result-stats span{
    color:#666;
}

/* Responsive */

@media(max-width:991px){

    .before-wrapper{
        grid-template-columns:1fr;
    }

    .image-compare{
        height:520px;
    }

}

@media(max-width:768px){

    .image-compare{
        height:420px;
    }

}
/*==================================================
TECHNOLOGY
==================================================*/

.technology-section{

background:#fff;

}

.technology-grid{

display:grid;

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

gap:30px;

}

.technology-card{

background:#fff;

border-radius:30px;

overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.05);

transition:.4s;

border:1px solid #eee;

}

.technology-card:hover{

transform:translateY(-12px);

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

}

.technology-image{

height:260px;

overflow:hidden;

}

.technology-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.technology-card:hover img{

transform:scale(1.08);

}

.technology-content{

padding:35px;

}

.technology-content span{

display:inline-block;

padding:8px 16px;

background:#F8F2F7;

color:#7F3F73;

border-radius:999px;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}

.technology-content h3{

font-size:28px;

margin-bottom:15px;

}

.technology-content p{

margin-bottom:28px;

}

.technology-content a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

color:#7F3F73;

}
/*==================================================
PATIENT JOURNEY
==================================================*/

.journey-section{

background:#FCFCFD;

}

.journey-wrapper{

display:grid;

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

gap:28px;

position:relative;

margin-top:80px;

}

.journey-line{

position:absolute;

left:5%;

right:5%;

top:46px;

height:3px;

background:linear-gradient(
90deg,
#7F3F73,
#B77C90
);

z-index:0;

}

.journey-step{

position:relative;

z-index:2;

text-align:center;

}

.step-number{

font-size:13px;

font-weight:700;

color:#999;

margin-bottom:12px;

}

.step-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#7F3F73;

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

transition:.35s;

}

.journey-step:hover .step-icon{

transform:translateY(-10px);

background:#7F3F73;

color:#fff;

}

.journey-step.active .step-icon{

background:#7F3F73;

color:#fff;

}

.journey-step h3{

margin-top:25px;

margin-bottom:12px;

font-size:22px;

}

.journey-step p{

font-size:15px;

line-height:1.8;

}
/*==================================================
DOCTORS
==================================================*/

.doctors-section{

background:#fff;

}

.doctor-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

}

.large{

display:grid;

grid-template-columns:420px 1fr;

}

.small{

margin-bottom:35px;

}

.doctor-image{

position:relative;

overflow:hidden;

}

.doctor-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.doctor-badge{

position:absolute;

left:25px;

bottom:25px;

padding:14px 22px;

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

backdrop-filter:blur(20px);

border-radius:999px;

font-weight:600;

color:#7F3F73;

}

.doctor-category{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:#F8F2F7;

color:#7F3F73;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}

.qualification{

margin:20px 0;

}

.doctor-highlights{

display:grid;

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

gap:18px;

margin:35px 0;

}

.doctor-highlights div{

display:flex;

gap:12px;

align-items:center;

font-weight:500;

}

.doctor-highlights i{

color:#7F3F73;

}

.doctor-buttons{

display:flex;

gap:20px;

margin-top:25px;

}
/*==================================================
TESTIMONIALS
==================================================*/

.testimonials-section{

background:#FCFCFD;

}

.review-layout{

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:70px;

align-items:center;

}

.rating-box{

display:flex;

align-items:center;

gap:25px;

margin-bottom:35px;

}

.rating-number{

width:100px;

height:100px;

border-radius:24px;

background:linear-gradient(135deg,#7F3F73,#B77C90);

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

font-weight:700;

color:#fff;

}

.review-content h3{

font-size:48px;

margin-bottom:20px;

font-family:'Playfair Display';

}

.review-content p{

margin-bottom:30px;

}

.review-points{

display:grid;

gap:18px;

margin-bottom:40px;

}

.review-points li{

display:flex;

gap:14px;

align-items:center;

font-weight:500;

}

.review-points i{

color:#7F3F73;

}

.testimonial-card{

background:#fff;

border-radius:32px;

padding:40px;

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

text-align:center;

}

.testimonial-card img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:25px;

}

.testimonial-card .stars{

color:#FDBB2D;

margin-bottom:20px;

font-size:20px;

}

.testimonial-card p{

font-size:17px;

line-height:1.9;

margin-bottom:25px;

}

.testimonial-card h4{

margin-bottom:6px;

}

.testimonial-card span{

color:#7F3F73;

font-weight:600;

}
/*==================================================
PREMIUM CTA
==================================================*/

.premium-cta{

padding:140px 0;

background:linear-gradient(
135deg,
#7F3F73,
#B77C90
);

overflow:hidden;

position:relative;

}

.premium-cta::before{

content:"";

position:absolute;

width:650px;

height:650px;

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

border-radius:50%;

top:-280px;

right:-180px;

}

.cta-wrapper{

display:grid;

grid-template-columns:1fr 480px;

gap:70px;

align-items:center;

}

.cta-content{

color:#fff;

}

.cta-content .section-subtitle{

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

color:#fff;

}

.cta-content h2{

font-size:68px;

line-height:1.1;

margin:30px 0;

color:#fff;

}

.cta-content p{

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

font-size:18px;

max-width:650px;

margin-bottom:40px;

}

.cta-features{

display:grid;

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

gap:22px;

margin-bottom:45px;

}

.cta-features div{

display:flex;

align-items:center;

gap:12px;

font-weight:500;

}

.cta-features i{

font-size:20px;

}

.cta-buttons{

display:flex;

gap:20px;

}

.cta-buttons .secondary-btn{

background:#fff;

border:none;

color:#7F3F73;

}

.cta-form{

background:#fff;

padding:45px;

border-radius:30px;

box-shadow:0 35px 80px rgba(0,0,0,.15);

}

.cta-form h3{

font-size:32px;

margin-bottom:10px;

}

.cta-form p{

margin-bottom:30px;

color:#777;

}

.cta-form input,

.cta-form select,

.cta-form textarea{

width:100%;

margin-bottom:18px;

height:58px;

border:1px solid #E8E8E8;

border-radius:16px;

padding:0 18px;

font-size:15px;

transition:.3s;

}

.cta-form textarea{

height:130px;

padding:18px;

resize:none;

}

.cta-form input:focus,

.cta-form select:focus,

.cta-form textarea:focus{

border-color:#7F3F73;

box-shadow:0 0 0 4px rgba(127,63,115,.08);

}

.full-btn{

width:100%;

margin-top:10px;

justify-content:center;

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

.footer{

background:#171717;

color:#fff;

padding:100px 0 30px;

}

.footer-top{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr 1.3fr;

gap:50px;

padding-bottom:70px;

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

}

.footer-logo img{

height:70px;

margin-bottom:25px;

}

.footer p{

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

line-height:1.9;

}

.footer h4{

margin-bottom:28px;

font-size:22px;

}

.footer ul{

display:grid;

gap:16px;

}

.footer a{

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

transition:.3s;

}

.footer a:hover{

color:#fff;

padding-left:8px;

}

.social-links{

display:flex;

gap:14px;

margin-top:30px;

}

.social-links a{

width:48px;

height:48px;

display:flex;

justify-content:center;

align-items:center;

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

border-radius:50%;

font-size:20px;

}

.social-links a:hover{

background:#7F3F73;

padding-left:0;

}

.footer-contact li{

display:flex;

align-items:flex-start;

gap:12px;

}

.footer-contact i{

color:#B77C90;

margin-top:3px;

}

.footer-newsletter{

margin:70px 0;

padding:45px;

border-radius:28px;

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

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

}

.footer-newsletter h3{

font-size:34px;

margin-bottom:10px;

}

.footer-newsletter form{

display:flex;

width:500px;

}

.footer-newsletter input{

flex:1;

height:60px;

padding:0 20px;

border:none;

border-radius:16px 0 0 16px;

}

.footer-newsletter button{

height:60px;

padding:0 35px;

background:#7F3F73;

color:#fff;

border:none;

border-radius:0 16px 16px 0;

cursor:pointer;

}

.footer-middle{

display:flex;

justify-content:center;

gap:35px;

padding:35px 0;

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

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

}

.footer-bottom{

display:flex;

justify-content:space-between;

padding-top:30px;

}

.footer-bottom p{

margin:0;

}
/*========================================
RESULTS PAGE
========================================*/

.results-grid{

display:grid;

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

gap:30px;

}

.result-card{

position:relative;

overflow:hidden;

border-radius:28px;

cursor:pointer;

}

.result-card img{

width:100%;

height:420px;

object-fit:cover;

transition:.5s;

}

.result-card:hover img{

transform:scale(1.08);

}

.result-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:30px;

background:linear-gradient(

transparent,

rgba(0,0,0,.82)

);

transform:translateY(40px);

transition:.35s;

}

.result-card:hover .result-overlay{

transform:none;

}

.result-overlay h3{

color:#fff;

margin-bottom:8px;

}

.result-overlay p{

color:#fff;

opacity:.85;

margin-bottom:20px;

}

.result-overlay a{

display:inline-block;

padding:12px 22px;

background:#fff;

border-radius:999px;

color:#7F3F73;

font-weight:600;

}

.video-grid{

display:grid;

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

gap:30px;

}

.video-card{

position:relative;

overflow:hidden;

border-radius:28px;

}

.video-card img{

width:100%;

display:block;

}

.play{

position:absolute;

left:50%;

top:50%;

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

width:90px;

height:90px;

border-radius:50%;

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

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:#7F3F73;

}

.success-grid{

display:grid;

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

gap:25px;

}

.success-card{

background:#fff;

padding:45px;

border-radius:28px;

text-align:center;

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

}

.success-card h2{

font-size:58px;

color:#7F3F73;

margin-bottom:10px;

}
/*=========================================
HAIR TRANSPLANT PAGE
=========================================*/

.treatment-hero{

padding:120px 0 80px;

background:linear-gradient(#fff,#FCFCFD);

}

.treatment-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.treatment-grid h1{

font-size:72px;

line-height:1.1;

margin:25px 0;

font-family:'Playfair Display';

}

.hero-icons{

display:flex;

gap:40px;

margin-top:45px;

}

.hero-icons h3{

color:#7F3F73;

font-size:42px;

}

.content-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.technique-grid{

display:grid;

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

gap:30px;

}

.process-grid{

display:grid;

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

gap:25px;

}

.process-card{

background:#fff;

padding:40px 25px;

text-align:center;

border-radius:24px;

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

}

.process-card span{

display:inline-flex;

width:55px;

height:55px;

align-items:center;

justify-content:center;

background:#7F3F73;

color:#fff;

border-radius:50%;

font-weight:700;

margin-bottom:20px;

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-card{

overflow:hidden;

border-radius:24px;

}

.gallery-card img{

width:100%;

transition:.5s;

}

.gallery-card:hover img{

transform:scale(1.08);

}