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

.hero-section{
    min-height:650px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items:center;
}

.hero-section .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(3,32,63,.90),
        rgba(0,116,180,.55)
    );
}

.hero-section .container{
    position:relative;
    z-index:2;
}


.breadcrumb{
    color:#fff;
    margin-bottom:25px;
}


.hero-section h1{
    color:#fff;
    font-size:58px;
    font-weight:700;
    max-width:850px;
    line-height:1.15;
}


.hero-section p{
    color:#fff;
    font-size:20px;
    max-width:650px;
    margin:25px 0;
}


.btn-primary{
    background:#0074c8;
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    display:inline-block;
    transition:.3s;
}


.btn-primary:hover{
    background:#00a6a6;
}





/* =====================================================
   INTRODUCTION SECTION
===================================================== */


.intro-section{
    padding:90px 0;
    background:#fff;
}


.intro-section h2{
    font-size:42px;
    color:#06284a;
}


.intro-section img{

width:100%;
border-radius:25px;
box-shadow:0 20px 45px rgba(0,0,0,.12);

}





/* =====================================================
   WHY CHOOSE US
===================================================== */


.why-section{
    background:#f5faff;
    padding:90px 0;
}


.why-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}


.why-card{

background:#fff;
padding:35px 25px;
border-radius:22px;
text-align:center;
transition:.35s;
border:1px solid #e7eef5;

}


.why-card:hover{

transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12);

}


.why-icon{

height:75px;
width:75px;
margin:auto auto 20px;
background:#e5f5ff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

}


.why-icon img{

width:40px;

}


.why-card h3{

font-size:22px;
color:#06284a;

}





/* =====================================================
   TREATMENT FOCUS
===================================================== */


.treatment-section{

padding:90px 0;
background:#fff;

}


.treatment-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}


.treatment-card{

background:#fff;
overflow:hidden;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.3s;

}


.treatment-card:hover{

transform:translateY(-8px);

}


.treatment-image img{

height:240px;
width:100%;
object-fit:cover;

}


.treatment-content{

padding:30px;

}


.treatment-content h3{

font-size:25px;
color:#06284a;

}






/* =====================================================
   RELEVANT SERVICES
===================================================== */


.services-section{

background:#f5faff;
padding:90px 0;

}



.services-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}



.service-box{

background:#fff;
padding:35px 30px;
border-radius:20px;
position:relative;
overflow:hidden;
transition:.3s;

}


.service-box:hover{

background:#0074c8;

}


.service-box:hover h3,
.service-box:hover p{

color:#fff;

}


.service-number{

font-size:55px;
font-weight:800;
color:#dcecf8;

}


.service-box h3{

font-size:22px;
color:#06284a;

}





/* =====================================================
 PATIENT JOURNEY & TRAVEL
===================================================== */


.journey-section{

padding:90px 0;
background:#fff;

}


.journey-wrapper{

max-width:850px;
margin:auto;

}


.journey-item{

display:flex;
gap:25px;
padding:25px;
background:#f5faff;
border-radius:20px;
margin-bottom:20px;

}


.journey-count{

height:55px;
width:55px;
flex:none;
border-radius:50%;
background:#0074c8;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:700;

}


.journey-item h3{

color:#06284a;

}





/* =====================================================
 PATIENT EXPERIENCE
===================================================== */


.experience-section{

padding:90px 0;
background:#f5faff;

}


.experience-section h2{

font-size:42px;
color:#06284a;

}


.experience-section img{

border-radius:30px;
box-shadow:0 20px 45px rgba(0,0,0,.15);

}





/* =====================================================
 FAQ SECTION
===================================================== */


.faq-section{

padding:90px 0;
background:#fff;

}


.faq-wrapper{

max-width:900px;
margin:auto;

}


.faq-item{

border-bottom:1px solid #ddd;

}


.faq-question{

width:100%;
background:none;
border:0;
padding:25px 15px;
font-size:20px;
font-weight:600;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
color:#06284a;

}


.faq-question span{

font-size:30px;
color:#0074c8;

}



.faq-answer{

max-height:0;
overflow:hidden;
transition:max-height .4s ease;
padding:0 15px;

}


.faq-item.active .faq-answer{

padding-bottom:20px;

}





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


.cta-section{

padding:90px 20px;
background:
linear-gradient(
135deg,
#0074c8,
#00a6a6
);

text-align:center;

}



.cta-section h2{

color:#fff;
font-size:45px;

}


.cta-section p{

color:#fff;
font-size:18px;
max-width:700px;
margin:20px auto 35px;

}


.cta-section .btn-primary{

background:#fff;
color:#0074c8;

}


.cta-section .btn-primary:hover{

background:#06284a;
color:#fff;

}






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


@media(max-width:992px){


.why-grid,
.services-grid{

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

}


.treatment-grid{

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

}


.hero-section h1{

font-size:45px;

}


}



@media(max-width:767px){


.hero-section{

min-height:550px;

}


.hero-section h1{

font-size:34px;

}


.why-grid,
.services-grid,
.treatment-grid{

grid-template-columns:1fr;

}


.intro-section,
.why-section,
.treatment-section,
.services-section,
.journey-section,
.experience-section,
.faq-section,
.cta-section{

padding:60px 0;

}


.journey-item{

padding:20px;

}

}