*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Manrope',sans-serif;
background:#eef4fa;
color:#0b1f3a;

}

.hero{

padding:70px 0;
position:relative;
overflow:hidden;
background: #eff8fe;
}




.hero-grid{

display:grid;
grid-template-columns:1.15fr .75fr;
gap:70px;
align-items:center;

}










.tag{

display:inline-flex;
align-items:center;
gap:8px;
padding:12px 18px;
border-radius:40px;
background:#edf7ff;
border:1px solid #d7ebff;
color:#0067b8;
font-size:14px;
font-weight:700;
margin-bottom:25px;

}

h1{

font-size:41.6px;
line-height:1.05;
font-weight:600;
margin-bottom:15px;

}

h2{

font-size:22.4px;
color:#0b7d79;
margin-bottom:28px;
font-weight:600;

}

.hero-content p{

font-size:13px;
line-height:20px;
color:#44546b;
max-width:760px;

}

.hospital-title{

margin-top:40px;
font-size:12px;
font-weight:800;
color:#60728f;
letter-spacing:.5px;

}

.hospital-list{

display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:20px;

}

.hospital-list span{

padding:14px 18px;
background:#fff;
border-radius:12px;
border:1px solid #d8e4ef;
font-weight:700;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
box-shadow:0 6px 20px rgba(0,0,0,.05);

}

.hospital-list i{

color:#0077c8;

}

.buttons{

display:flex;
gap:18px;
margin-top:45px;

}

.btn{

text-decoration:none;
padding:18px 22px;
border-radius:14px;
font-size:13px;
font-weight:600;
display:inline-flex;
align-items:center;
gap:5px;
transition:.35s;

}

.primary{

background:#006fad;
color:#fff;
box-shadow:0 15px 35px rgba(0,111,173,.25);

}

.primary:hover{

transform:translateY(-4px);

}

.secondary{

background:#fff;
color:#08244d;
border:1px solid #dbe6f1;

}

.doctor-card{

background:#fff;
border-radius:26px;
padding:35px;
box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.doctor-top{

display:flex;
gap:18px;
align-items:flex-start;

}

.icon-box{
    width:120px;
    height:120px;
    min-width:120px;
    min-height:120px;
    border-radius:20px;
    overflow:hidden;
    flex-shrink:0;
    background:#f5f5f5;
}

.icon-box img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;   /* fills the box */
}

.doctor-top h3{

font-size:24.8px;
margin-bottom:5px;

}

.designation{

color:#0f918c;
font-weight:700;
margin-bottom:6px;

}

.doctor-top small{

font-size:14px;
color:#617089;

}

.doctor-card hr{

margin:28px 0;
border:none;
height:1px;
background:#e8edf2;

}

.card-text{

font-size:14px;
line-height:20px;
color:#56657d;
margin-bottom:30px;

}

.speciality{

background:#f3f9fd;
border:1px solid #d7e7f4;
padding:22px;
border-radius:16px;

}

.speciality strong{

display:block;
margin-bottom:15px;
font-size:12.8px;

}

.speciality ul{

list-style:none;

}

.speciality li{

padding:8px 0;
padding-left:24px;
position:relative;
color:#3c4b61;
font-size:14px;

}

.speciality li::before{

content:"✓";
position:absolute;
left:0;
color:#0aa36c;
font-weight:800;

}

.bottom-box{

margin-top:28px;
border:1px solid #dde8f3;
border-radius:16px;
padding:18px;
display:flex;
justify-content:space-between;
align-items:center;

}

.bottom-box strong{

display:block;
font-size:14px;

}

.bottom-box span{

display:block;
margin-top:4px;
font-size:14px;
color:#65738a;

}

.enquire{

padding:16px 28px;
background:#006fad;
color:#fff;
text-decoration:none;
border-radius:14px;
font-weight:700;

}

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;
gap:40px;

}

h1{

font-size:30.4px;

}

h2{

font-size:17.6px;

}

.hero-content p{

font-size:14px;

}

.buttons{

flex-direction:column;

}

.btn{

justify-content:center;

}

}






/*=========================================================
CLINIC LOCATIONS
=========================================================*/

.clinic-locations{
    padding:12px 0;
}

/* Grid */

.location-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* Card */

.location-card{
    background:#fff;
    border:1px solid #dbe7f2;
    border-radius:18px;
    padding:30px;
    box-shadow:0 8px 22px rgba(0,0,0,.06);
    transition:all .35s ease;
}

.location-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 35px rgba(0,0,0,.10);
}

/* Header */

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:24px;
}

/* Hospital Icon */

.hospital-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:#eaf5ff;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#0077c8;
    font-size:17.6px;
    flex-shrink:0;
}

/* Badge */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 14px;
    border:1px solid #80e8da;
    background:#f3fffc;
    color:#008b80;
    font-size:12px;
    font-weight:600;
    border-radius:6px;
    white-space:nowrap;
}

/* Hospital Name */

.location-card h3{
    font-size:16px;
    font-weight:700;
    color:#0f2342;
    line-height:1.35;
    margin:0 0 12px;
}

/* Location */

.location{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:#66758b;
    margin-bottom:18px;
}

.location i{
    color:#0077c8;
    font-size:12px;
}

/* Description */

.location-card p{
    font-size:14px;
    line-height:1.75;
    color:#56657d;
    margin:0 0 25px;
}

/* Link */

.appointment-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#006db2;
    font-size:13px;
    font-weight:700;
    transition:.3s;
}

.appointment-link i{
    font-size:9.6px;
    transition:.3s;
}

.appointment-link:hover{
    color:#0095dd;
}

.appointment-link:hover i{
    transform:translateX(4px);
}

/* Bottom Note */

.location-note{
    margin-top:40px;
    background:#111d37;
    border-radius:18px;
    padding:22px 30px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    text-align:center;
    color:#fff;
    font-size:14px;
    line-height:1.7;
}

.location-note i{
    color:#28dbc4;
    font-size:16px;
    flex-shrink:0;
}

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

@media (max-width:991px){

    .location-grid{
        grid-template-columns:1fr;
    }

    .location-card{
        padding:24px;
    }

    .location-card h3{
        font-size:13.6px;
    }

    .location-card p{
        font-size:13px;
    }

    .location-note{
        flex-direction:column;
        font-size:13px;
        padding:20px;
    }

}

@media (max-width:576px){

    .clinic-locations{
        padding:50px 0;
    }

    .card-header{
        flex-direction:column;
        gap:15px;
    }

    .badge{
        align-self:flex-start;
    }

    .hospital-icon{
        width:44px;
        height:44px;
        font-size:16px;
    }

    .location-card{
        padding:20px;
    }

    .location-card h3{
        font-size:12.8px;
    }

    .location{
        font-size:12px;
    }

    .location-card p{
        font-size:13px;
        line-height:1.7;
    }

    .appointment-link{
        font-size:12px;
    }

    .location-note{
        font-size:12px;
        line-height:1.6;
    }

}



















/*=====================================================
Conditions
=====================================================*/

.conditions-section{
    padding:12px 0;
}

.conditions-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.condition-card{

    background:#fff;
    border:1px solid #dce5ef;
    border-radius:18px;
    padding:22px;
    transition:.35s;
    box-shadow:0 3px 14px rgba(0,0,0,.04);

}

.condition-card:hover{

    transform:translateY(-5px);
    box-shadow:0 14px 28px rgba(0,0,0,.10);

}

.condition-icon{

    width:42px;
    height:42px;
    border-radius:14px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#006db5;
    font-size:16px;
    margin-bottom:18px;
    box-shadow:0 5px 14px rgba(0,0,0,.08);

}

.condition-card h3{

    font-size:16px;
    font-weight:700;
    margin-bottom:12px;
    color:#081d42;

}

.condition-card p{

    font-size:14px;
    line-height:1.6;
    color:#65748b;
    margin:0;

}

.wide{

    grid-column:span 2;

}

.conditions-note{

    margin-top:35px;
    text-align:center;
    font-size:14px;
    color:#66748b;
    font-style:italic;

}

/*==========================================
Responsive
==========================================*/

@media(max-width:1200px){

.conditions-grid{

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

}

}

@media(max-width:992px){

.conditions-grid{

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

}

.wide{

grid-column:span 2;

}

}

@media(max-width:768px){

.conditions-grid{

grid-template-columns:1fr;

}

.wide{

grid-column:span 1;

}

.condition-card{

padding:20px;

}

.condition-card h3{

font-size:13.6px;

}

.condition-card p{

font-size:13px;

}

.conditions-note{

font-size:13px;

}

}

















/*==========================================================
PAIN MANAGEMENT PROCEDURES
==========================================================*/

.procedures-section{
    padding:12px 0;
}

.procedures-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

/*----------------------------------------------------------
Card
----------------------------------------------------------*/

.procedure-card{
    background:#fff;
    border:1px solid #dbe6f2;
    border-radius:18px;
    padding:26px;
    box-shadow:0 5px 18px rgba(0,0,0,.05);
    transition:.35s ease;
}

.procedure-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.10);
}

/*----------------------------------------------------------
Icon
----------------------------------------------------------*/

.procedure-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    background:#ecfbf8;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#0077b8;
    font-size:16px;
    margin-bottom:20px;
    box-shadow:0 5px 14px rgba(0,0,0,.05);
}

.procedure-icon i{
    color:#0077b8;
}

/*----------------------------------------------------------
Heading
----------------------------------------------------------*/

.procedure-card h3{
    margin:0 0 14px;
    font-size:16px;
    line-height:1.35;
    font-weight:700;
    color:#071d45;
}

/*----------------------------------------------------------
Description
----------------------------------------------------------*/

.procedure-card p{
    margin:0;
    font-size:14px;
    line-height:1.75;
    color:#64748b;
}

/*----------------------------------------------------------
Bottom Note
----------------------------------------------------------*/

.procedure-note{
    margin-top:35px;
    text-align:center;
    font-size:14px;
    color:#6b7280;
    line-height:1.7;
}

/*==========================================================
Hover Effect
==========================================================*/

.procedure-card:hover .procedure-icon{
    background:#0b7ea1;
    color:#fff;
}

.procedure-card:hover .procedure-icon i{
    color:#fff;
}

/*==========================================================
Responsive
==========================================================*/

@media(max-width:1200px){

.procedures-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.procedures-section{
    padding:60px 0;
}

.procedures-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.procedure-card{
    padding:22px;
}

.procedure-card h3{
    font-size:13.6px;
}

.procedure-card p{
    font-size:13px;
}

.procedure-note{
    font-size:13px;
    margin-top:25px;
}

}

@media(max-width:480px){

.procedure-card{
    padding:18px;
}

.procedure-icon{
    width:40px;
    height:40px;
    font-size:12.8px;
    margin-bottom:16px;
}

.procedure-card h3{
    font-size:12.8px;
}

.procedure-card p{
    font-size:12px;
    line-height:1.7;
}

.procedure-note{
    font-size:12px;
}

}

















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

.why-choose-section{
    background:#111a2e;
    padding:90px 0;
    overflow:hidden;
}

.why-choose-section .container{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
}

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

.section-heading{
    text-align:center;
    max-width:850px;
    margin:0 auto 60px;
}

.section-badge{
    display:inline-block;
    padding:8px 16px;
    border-radius:50px;
    background:rgba(33,222,197,.12);
    border:1px solid rgba(33,222,197,.35);
    color:#22e0c5;
    font-size:12px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.section-heading h2{
    margin:0 0 15px;
    font-size:43.2px;
    font-weight:800;
    color:#ffffff;
    line-height:1.2;
}

.section-heading p{
    margin:0;
    color:#d3dbe9;
    font-size:17.6px;
    line-height:1.7;
}

/*=========================================================
GRID
=========================================================*/

.choose-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

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

.choose-card{
    background:#163d5b;
    border:1px solid rgba(0,215,255,.12);
    border-radius:18px;
    padding:28px;
    transition:.35s;
}

.choose-card:hover{
    transform:translateY(-6px);
    background:#18486d;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

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

.choose-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:#175f79;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
}

.choose-icon i{
    font-size:17.6px;
    color:#29e2c5;
}

.choose-card:hover .choose-icon{
    background:#1b7897;
}

.choose-card:hover .choose-icon i{
    color:#fff;
}

/*=========================================================
TEXT
=========================================================*/

.choose-card h3{
    margin:0 0 14px;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    line-height:1.35;
}

.choose-card p{
    margin:0;
    color:#d8e3ef;
    font-size:14px;
    line-height:1.8;
}

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

@media (max-width:1200px){

    .choose-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .section-heading h2{
        font-size:33.6px;
    }

    .section-heading p{
        font-size:16px;
    }

}

@media (max-width:768px){

    .why-choose-section{
        padding:60px 0;
    }

    .choose-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .section-heading{
        margin-bottom:40px;
    }

    .section-heading h2{
        font-size:27.2px;
    }

    .section-heading p{
        font-size:12.8px;
    }

    .choose-card{
        padding:22px;
    }

    .choose-card h3{
        font-size:13.6px;
    }

    .choose-card p{
        font-size:13px;
    }

}

@media (max-width:480px){

    .section-badge{
        font-size:9.6px;
        padding:7px 14px;
    }

    .section-heading h2{
        font-size:22.4px;
    }

    .choose-icon{
        width:46px;
        height:46px;
    }

    .choose-icon i{
        font-size:16px;
    }

}








/*=========================================================
SERVICE AREAS
=========================================================*/

.service-areas{
    background:#fff;
    border:1px solid #dbe7f3;
    border-radius:22px;
    padding:32px;
    box-shadow:0 8px 28px rgba(0,0,0,.08);
}

/*=========================================================
AREA BLOCK
=========================================================*/

.area-block h3{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 20px;
    color:#071d45;
    font-size:19.2px;
    font-weight:700;
    text-transform:uppercase;
    line-height:1.4;
}

.area-block h3 i{
    color:#00968b;
    font-size:17.6px;
}

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

.area-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.area-tags span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    background:#f4f8fc;
    border:1px solid #d7e3ef;
    border-radius:8px;
    color:#17395d;
    font-size:14px;
    font-weight:500;
    line-height:1;
    transition:all .3s ease;
    cursor:default;
}

.area-tags span:hover{
    background:#0b7ea1;
    border-color:#0b7ea1;
    color:#fff;
    transform:translateY(-2px);
}

/*=========================================================
DIVIDER
=========================================================*/

.service-areas hr{
    border:0;
    border-top:1px solid #e5edf5;
    margin:28px 0;
}

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

@media (max-width:991px){

    .service-areas{
        padding:24px;
    }

    .area-block h3{
        font-size:16px;
    }

    .area-tags span{
        font-size:13px;
        padding:9px 14px;
    }

}

@media (max-width:767px){

    .service-areas{
        padding:20px;
        border-radius:16px;
    }

    .area-block h3{
        font-size:12.8px;
        line-height:1.5;
        align-items:flex-start;
    }

    .area-block h3 i{
        margin-top:3px;
        font-size:16px;
    }

    .area-tags{
        gap:8px;
    }

    .area-tags span{
        font-size:12px;
        padding:8px 14px;
    }

    .service-areas hr{
        margin:22px 0;
    }

}


/* =========================
   FAQ Wrapper
========================= */

.faq-section{
    background:#f5f7fb;
    padding:10px 0;
}

/* =========================
   FAQ Card
========================= */

.faq-item{
    background:#fff;
    border:1px solid #e6edf5;
    border-radius:15px;
    margin-bottom:15px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(8,29,66,.04);
    transition:.3s ease;
}

.faq-item:hover{
    box-shadow:0 8px 24px rgba(8,29,66,.08);
}

/* =========================
   Question
========================= */

.faq-item summary{
    list-style:none;
    cursor:pointer;
    position:relative;
    padding:26px 70px 26px 30px;
    font-size:16px;
    font-weight:700;
    color:#081d42;
    line-height:1.4;
    user-select:none;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

/* =========================
   Arrow
========================= */

.faq-item summary::after{
    content:"\f078";
    font-family:"Font Awesome 6 Free";
    font-weight:700;
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    font-size:15px;
    color:#0077c8;
    transition:.3s ease;
}

.faq-item[open] summary::after{
    transform:translateY(-50%) rotate(180deg);
}

/* =========================
   Divider
========================= */

.faq-item[open] summary{
    border-bottom:1px solid #edf2f7;
}

/* =========================
   Answer
========================= */

.faq-content{
    padding:24px 30px 28px;
}

.faq-content p{
    margin:0;
    color:#66758a;
    font-size:15px;
    line-height:22px;
    font-weight:400;
}

/* =========================
   Mobile
========================= */

@media (max-width:767px){

    .faq-item{
        border-radius:14px;
        margin-bottom:14px;
    }

    .faq-item summary{
        padding:18px 50px 18px 18px;
        font-size:16px;
    }

    .faq-item summary::after{
        right:18px;
        font-size:13px;
    }

    .faq-content{
        padding:18px;
    }

    .faq-content p{
        font-size:14px;
        line-height:1.7;
    }
}