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

/*font-family:'Poppins',sans-serif;*/
}


html,body{
background:#fff;
color:#333;
overflow-x: hidden;
  width:100%;
max-width: 100%;
}


.container{
width:90%;
max-width:1320px;
margin:auto;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}
.top-bar{

background:#004d99;

color:#fff;

font-size:14px;

}

.top-bar .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 0;

}

.top-left a{

color:#fff;

margin-right:200px;

}

.top-right a{

color:#fff;

margin-left:15px;

font-size:15px;

}

nav{

background:#fff;

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

position:sticky;

top:0;

z-index:999;

}

nav .container{

display:flex;

justify-content:space-between;

align-items:center;

height:90px;

}

.logo img{

height:65px;

}

/* .menu{

display:flex;

gap:35px;

} */

.menu li a{

font-weight:500;

color:#222;

transition:.3s;

}

.menu li a:hover{

color:#0a7cff;

}

.appointment-btn a{

background:#ffe200;

padding:14px 28px;

color:#000000;

border-radius:40px;

font-weight:600;

transition:.3s;

}

.appointment-btn a:hover{

background:#005fd3;

}

.menu-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

.hero-slider{

position:relative;

height:90vh;

overflow:hidden;

}

.slide{

position:absolute;

width:100%;

height:100%;

opacity:0;

transition:1s;

}

.slide.active{

opacity:1;

z-index:2;

}

.slide img{

width:100%;

height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

width:100%;

height:100%;

/* background:rgba(0,40,80,.55); */

top:0;

left:0;

}

.hero-content{

position:absolute;

top:50%;

left:8%;

transform:translateY(-50%);

color:#fff;

max-width:650px;

z-index:3;

}

.hero-content span{

font-size:18px;

letter-spacing:2px;

color:#8fd3ff;

}

.hero-content h1{

font-size:60px;

margin:20px 0;

font-weight:700;

line-height:1.2;

}

.hero-content p{

font-size:18px;

margin-bottom:35px;

line-height:1.8;

}

.hero-buttons{

display:flex;

gap:20px;

}

.btn-primary{

background:#0a7cff;

padding:16px 35px;

color:#fff;

border-radius:40px;

}

.btn-outline{

border:2px solid #fff;

padding:16px 35px;

color:#fff;

border-radius:40px;

}

.btn-outline:hover{

background:#fff;

color:#000;

}
.emergency-box{

margin-top:50px;

position:relative;

z-index:99;

}

.emergency-box .container{

display:grid;

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

gap:25px;

}

.card{

background:#fff;

padding:40px;

border-radius:15px;

text-align:center;

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

transition:.4s;

}

.card:hover{

transform:translateY(-10px);

}

.card i{

font-size:45px;

color:#0a7cff;

margin-bottom:20px;

}

.card h2{

margin:15px 0;

color:#0a7cff;

}

.about-section{

padding:50px 0;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:20px;

display:block;

}

.experience-box{

position:absolute;

bottom:30px;

right:-20px;

background:#0a7cff;

color:#fff;

padding:25px;

border-radius:15px;

text-align:center;

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

}

.experience-box h2{

font-size:40px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#eaf4ff;

color:#0a7cff;

border-radius:30px;

font-weight:600;

margin-bottom:20px;

}

.about-content h2{

font-size:42px;

margin-bottom:25px;

line-height:1.3;

}

.about-content p{

font-size:17px;

line-height:1.9;

margin-bottom:30px;

color:#666;

}

.about-features{

display:grid;
justify-content: start;

gap:20px;

margin-bottom:35px;

}

.mission-box h3{
    color: #0a7cff;
}




.feature-card{

display:flex;

align-items:flex-start;

gap:20px;

padding:20px;

background:#ffffff;

border-radius:15px;

box-shadow:0 2px 20px rgba(0,0,0,15%);

}

.feature-card i{

font-size:40px;

color:#ffe200;
margin: auto;

}



.about-btn{

display:inline-block;

padding:15px 35px;

background:#0a7cff;

color:#fff;

border-radius:40px;

font-weight:600;

}

.mission-section{

padding:70px 0;

background:#f8fbff;

}

.mission-grid{

display:grid;

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

gap:30px;

}

.mission-box{

padding:40px;

text-align:center;

background:#fff;

border-radius:20px;

box-shadow:0 2px 15px rgba(0,0,0,25%);

transition:.3s;

}

.mission-box:hover{

transform:translateY(-8px);

}

.mission-box i{

font-size:45px;

color:#ffe200;

margin-bottom:20px;

}

.counter-section{

padding:90px 0;

background:#0a7cff;

}

.counter-grid{

display:grid;

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

gap:30px;

text-align:center;

}

.counter-box h2{

font-size:50px;

color:#fff;

margin-bottom:10px;

}

.counter-box p{

color:#fff;

font-size:18px;

}

/*==================================
 Department Section
==================================*/

.department-section{

padding:50px 0;

background:#f8fbff;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:8px 18px;

background:#eaf4ff;

color:#0a7cff;

border-radius:40px;

font-weight:600;

margin-bottom:20px;

}

.section-title h2{

font-size:42px;

margin-bottom:15px;

}

.section-title p{

/* max-width:650px; */

margin:auto;

color:#666;

line-height:1.8;

}

.department-grid{

display:grid;

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

gap:30px;

}

.department-card{

background:#fff;

padding:40px 30px;

text-align:center;

border-radius:20px;

box-shadow:0 2px 20px rgba(0,0,0,25%);

transition:.4s;

position:relative;

overflow:hidden;

}

.department-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:5px;

background:#ffe200;

transition:.4s;

}

.department-card:hover::before{

left:0;

}

.department-card:hover{

transform:translateY(-12px);

}

.department-icon{

width:90px;

height:90px;

margin:auto;

background:#eef6ff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

transition:.4s;

}

.department-card:hover .department-icon{

background:#0a7cff;

color:#fff;

}

.department-icon i{

font-size:38px;

}

.department-card h3{

margin-bottom:15px;

font-size:24px;

}

.department-card p{

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.department-card a{

display:inline-block;

padding:12px 25px;

background:#ffe200;

color:#fff;

border-radius:30px;

transition:.3s;

}

.department-card a:hover{

background:#0a7cff;

}

/*==================================
    Doctors Section
==================================*/

.doctor-section{

padding:110px 0;

background:#ffffff;

}

.doctor-grid{

display:grid;

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

gap:30px;

}

.doctor-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

}

.doctor-card:hover{

transform:translateY(-12px);

}

.doctor-image{

position:relative;

overflow:hidden;

}

.doctor-image img{

width:100%;

display:block;

transition:.5s;

}

.doctor-card:hover img{

transform:scale(1.08);

}

.doctor-social{

position:absolute;

bottom:-60px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:12px;

transition:.4s;

}

.doctor-card:hover .doctor-social{

bottom:20px;

}

.doctor-social a{

width:42px;

height:42px;

background:#0a7cff;

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

}

.doctor-content{

padding:30px;

text-align:center;

}

.doctor-content span{

color:#0a7cff;

font-weight:600;

}

.doctor-content h3{

margin:12px 0;

font-size:24px;

}

.doctor-content p{

color:#777;

margin-bottom:20px;

}

.doctor-btn{

display:inline-block;

padding:12px 28px;

background:#0a7cff;

color:#fff;

border-radius:30px;

text-decoration:none;

transition:.3s;

}

.doctor-btn:hover{

background:#004d99;

}


/*=====================================
 Appointment
======================================*/

.appointment-section{

padding:110px 0;

background:#f7fbff;

}

.appointment-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.appointment-content span{

color:#0a7cff;

font-weight:600;

}

.appointment-content h2{

font-size:45px;

margin:20px 0;

line-height:1.3;

}

.appointment-content p{

line-height:1.8;

color:#666;

margin-bottom:35px;

}

.info-box{

display:flex;

gap:20px;

margin-bottom:30px;

align-items:center;

}

.info-box i{

width:65px;

height:65px;

background:#0a7cff;

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

}

.appointment-form{

background:#fff;

padding:45px;

border-radius:20px;

box-shadow:0 2px 20px rgba(0,0,0,25%);

}

.input-group{

margin-bottom:20px;

}

.input-group input,

.input-group select,

.input-group textarea{

width:100%;

padding:16px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

outline:none;

transition:.3s;

}

.input-group input:focus,

.input-group select:focus,

.input-group textarea:focus{

border-color:#0a7cff;

}

.appointment-form button{

width:100%;

padding:18px;

border:none;

background:#ffe200;

color:#fff;

font-size:17px;

font-weight:600;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.appointment-form button:hover{

background:#0a7cff;

}



/*=========================
Gallery
==========================*/

.gallery-section{

padding:110px 0;

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-grid img{

width:100%;

border-radius:18px;

transition:.4s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

/*=========================
Awards
==========================*/

.award-section{

padding:110px 0;

background:#0a7cff;

}

.award-wrapper{

display:grid;

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

gap:30px;

}

.award-box{

text-align:center;

color:#fff;

}

.award-box i{

font-size:50px;

margin-bottom:25px;

}



.lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.85);

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}

.lightbox img{

max-width:90%;

max-height:90%;

border-radius:15px;

}


/*=========================
Contact
=========================*/

.contact-section{

padding:110px 0;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}

.contact-box{

display:flex;

gap:20px;

margin-bottom:35px;

}

.contact-box i{

width:60px;

height:60px;

background:#0a7cff;

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:20px;

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

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:16px;

margin-bottom:18px;

border:1px solid #ddd;

border-radius:10px;

}

.contact-form button{

background:#ffe200;

color:#fff;

padding:16px 35px;

border:none;

border-radius:10px;

cursor:pointer;

}

/*=========================
Map
=========================*/

.map-section iframe{

width:100%;

height:500px;

border:0;

}

/*=========================
Emergency Banner
=========================*/

.emergency-banner{

background:#004d99;

padding:60px 0;

color:#fff;

text-align:center;

}

.emergency-banner a{

display:inline-block;

margin-top:25px;

padding:15px 35px;

background:#fff;

color:#004d99;

border-radius:40px;

font-weight:600;

}

/*=========================
Footer
=========================*/



hr{

margin:50px 0 20px;

border-color:rgba(255,255,255,.1);

}

.copyright{

text-align:center;

}

/*=========================
Back To Top
=========================*/

#topBtn{

position:fixed;

bottom:25px;

right:25px;

width:55px;

height:55px;

background:#0a7cff;

color:#fff;

border:none;

border-radius:50%;

display:none;

cursor:pointer;

font-size:20px;

}

@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-grid{

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

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

}





/*==============================
ABOUT HERO
==============================*/


/*==============================
Premium About
==============================*/



.doctor-card{

position:absolute;

left:40px;

bottom:80px;

background:#fff;

display:flex;

align-items:center;

gap:18px;

padding:18px;

border-radius:20px;

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

}

.doctor-card img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

}

/* Content */

.section-badge{

display:inline-block;

padding:12px 24px;

background:#eef7ff;

color:#0a7cff;

border-radius:50px;

font-weight:600;

margin-bottom:30px;

}

.about-content h2{

font-size:56px;

line-height:1.2;

margin-bottom:30px;
animation: float 3s ease-in-out infinite;

}
@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

.about-content p{

font-size:18px;

line-height:2;

color:#000000;

margin-bottom:20px;

}

.feature-list{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-bottom:45px;

}

.feature-list div{

font-size:17px;

font-weight:500;

}

.feature-list i{

color:#0a7cff;

margin-right:10px;

}

.glass-cards{

display:grid;

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

gap:20px;

margin-bottom:45px;

}

.glass-cards div{

background:#ffe200;

backdrop-filter:blur(15px);

padding:30px;

text-align:center;

border-radius:22px;

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

}

.glass-cards h3{

font-size:38px;

color:#fff;

margin-bottom:8px;

}

.luxury-btn{

display:inline-flex;

align-items:center;

gap:12px;

padding:18px 42px;

background:#0a7cff;

color:#fff;

border-radius:50px;

font-weight:600;

transition:.4s;

}

.luxury-btn:hover{

transform:translateY(-6px);

box-shadow:0 20px 50px rgba(10,124,255,.35);

}


/*============================
Department Hero
=============================*/

.department-hero{

height:95vh;

background:url("../images/banner/departments-banner.jpg");

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

}

.department-hero .hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(

90deg,

rgba(3,30,68,.92),

rgba(0,0,0,.45)

);

}

.department-hero .hero-pattern{

position:absolute;

inset:0;

background-image:radial-gradient(

rgba(255,255,255,.08) 1px,

transparent 1px);

background-size:35px 35px;

}

.department-hero-content{

position:relative;

z-index:10;

max-width:720px;

color:#fff;

}

.hero-tag{

display:inline-block;

padding:12px 24px;

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

backdrop-filter:blur(18px);

border-radius:40px;

margin-bottom:25px;

}

.department-hero-content h1{

font-size:72px;

line-height:1.1;

margin-bottom:25px;

}

.department-hero-content span{

color:#47c4ff;

}

.department-hero-content p{

font-size:20px;

line-height:2;

margin-bottom:40px;

opacity:.92;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:35px;

}

.hero-btn{

background:#0a7cff;

padding:18px 42px;

border-radius:50px;

color:#fff;

font-weight:600;

transition:.4s;

}

.hero-btn:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(10,124,255,.35);

}

.hero-btn-outline{

padding:18px 42px;

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

border-radius:50px;

color:#fff;

backdrop-filter:blur(15px);

transition:.4s;

}

.hero-btn-outline:hover{

background:#fff;

color:#111;

}


/*==================================
Departments Grid
===================================*/

.departments-grid-section{

padding:50px 0;

background:#f7fbff;

position:relative;

overflow:hidden;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

display:inline-block;

padding:12px 25px;

background:#eef7ff;

color:#0a7cff;

border-radius:40px;

font-weight:600;

margin-bottom:20px;

}

.section-heading h2{

font-size:52px;

margin-bottom:20px;
color: black;

}

.section-heading p{

max-width:700px;

margin:auto;

line-height:2;

color:#666;

}

.departments-grid{

display:grid;

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

gap:35px;

}

.department-box{

position:relative;

height:460px;

border-radius:28px;

overflow:hidden;

cursor:pointer;

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

transition:.5s;

}

.department-box img{

width:100%;

height:100%;

object-fit:cover;

transition:.8s;

}

.department-overlay{

position:absolute;

inset:0;

background:linear-gradient(

180deg,

rgba(0,0,0,.15),

rgba(2,28,58,40%)

);

}

.department-content{

position:absolute;

left:35px;

right:35px;

bottom:35px;

color:#fff;

z-index:5;

}

.department-icon{

width:80px;

height:80px;

background:#0a7cff;

/* backdrop-filter:blur(18px); */

color:#fff;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

margin-bottom:25px;

transition:.5s;

}

.department-box h3{

font-size:32px;

margin-bottom:15px;

}

.department-box p{

line-height:1.8;

opacity:.9;

margin-bottom:30px;

}

.department-box a{

display:inline-flex;

align-items:center;

gap:10px;

color:#fff;

font-weight:600;

}

.department-box:hover{

transform:translateY(-18px);

}

.department-box:hover img{

transform:scale(1.12);

}

.department-box:hover .department-icon{

background:#0a7cff;

transform:rotate(10deg);

}
.department-box::before{

content:"";

position:absolute;

inset:0;

border:2px solid transparent;

border-radius:28px;

transition:.5s;

z-index:3;

}

.department-box:hover::before{

border-color:rgba(255,255,255,.65);

box-shadow:0 0 40px rgba(66,183,255,.45);

}


/*===================================
Why Choose Section
====================================*/

.why-department{

padding:50px 0;

/* background:#031b39; */

position:relative;

overflow:hidden;

}

.why-department::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:#0a7cff;

filter:blur(220px);

opacity:.12;

top:-300px;

left:-250px;

}

.why-title{

text-align:center;

color:#333;

margin-bottom:80px;

position:relative;

z-index:2;

}

.why-title span{

display:inline-block;

color: #0a7cff;

padding:12px 26px;

border-radius:50px;

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

backdrop-filter:blur(15px);

margin-bottom:25px;

}

.why-title h2{

font-size:56px;

margin-bottom:25px;

}

.why-title p{

max-width:720px;

margin:auto;

line-height:2;

opacity:.8;

}

.why-grid{

display:grid;

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

gap:35px;

position:relative;

z-index:2;

}

.why-card{

background:#ffffff;

backdrop-filter:blur(18px);

padding:45px 35px;

border-radius:28px;

position:relative;

transition:.5s;

border:1px solid rgba(255,255,255,.08);
box-shadow: 0 0px 30px rgba(0, 0, 0, 20%);

}

.card-number{

position:absolute;

right:25px;

top:20px;

font-size:60px;

font-weight:700;

color:rgba(0,0,0,20%);

}

.why-icon{

width:85px;

height:85px;

border-radius:22px;

background:#ffe200;

display:flex;

justify-content:center;

align-items:center;

font-size:36px;

color:#fff;

margin-bottom:35px;

}

.why-card h3{

color:#333;

font-size:28px;

margin-bottom:20px;

}

.why-card p{

color:#333;

line-height:1.9;

}

.why-card:hover{

transform:translateY(-15px);

/* background:#0a7cff; */


}
/*====================================
Treatment Process
====================================*/

.treatment-process{

padding:150px 0;

background:#fff;

}

.process-line{

display:flex;

justify-content:space-between;

position:relative;

margin-top:90px;

}

.process-line::before{

content:"";

position:absolute;

top:40px;

left:0;

right:0;

height:4px;

background:#e4eef8;

}

.process-step{

position:relative;

/* width:25%; */

text-align:center;

z-index:2;

}

.circle{

width:80px;

height:80px;

background:#0a7cff;

border-radius:50%;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:700;

color:#fff;

margin-bottom:25px;

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

}

.process-step h4{

font-size:26px;

margin-bottom:15px;

}

.process-step p{

color:#666;

line-height:1.8;

}

.department-achievements{

padding:120px 0;

background:linear-gradient(90deg,#0a7cff,#042b64);

color:#fff;

}

.achievement-grid{

display:grid;

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

text-align:center;

gap:30px;

}

.achievement-grid h2{

font-size:60px;

margin-bottom:10px;

}

.achievement-grid p{

font-size:18px;

opacity:.9;

}
/*=========================
Specialists
==========================*/

.specialist-section{

padding:50px 0;

background:#fff;

}

.specialist-grid{

display:grid;

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

gap:35px;

}

.specialist-card{

background:#fff;

border-radius:28px;

overflow:hidden;

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

transition:.5s;

}

.specialist-card:hover{

transform:translateY(-12px);

}

.doctor-image{

position:relative;

overflow:hidden;

}

.doctor-image img{

width:100%;

height:360px;

object-fit:cover;

transition:.6s;

}

.specialist-card:hover img{

transform:scale(1.08);

}

.doctor-badge{

position:absolute;

left:20px;

bottom:20px;

background:#0a7cff;

padding:12px 22px;

border-radius:30px;

color:#fff;

font-weight:600;

}

.doctor-content{

padding:35px;

}

.doctor-content span{

color:#0a7cff;

display:block;

margin:10px 0 20px;

font-weight:600;

}

.doctor-content ul{

padding:0;

list-style:none;

margin-bottom:25px;

}

.doctor-content li{

margin-bottom:12px;

}

.doctor-content i{

color:#0a7cff;

margin-right:10px;

}

.doctor-content a{

display:inline-block;

padding:15px 32px;

background:#0a7cff;

color:#fff;

border-radius:40px;

font-weight:600;

}



.faq-section{

padding:140px 0;

background:#f7fbff;

}

.faq-item{

background:#fff;

margin-bottom:20px;

border-radius:18px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.faq-title{

padding:28px;

display:flex;

justify-content:space-between;

cursor:pointer;

font-size:20px;

font-weight:600;

}

.faq-content{

display:none;

padding:0 28px 28px;

color:#666;

line-height:1.9;

}

.department-emergency{

padding:80px 0;

background:linear-gradient(90deg,#0a7cff,#042b64);

color:#fff;

}

.emergency-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

}

.emergency-wrapper a{

padding:18px 40px;

background:#fff;

color:#0a7cff;

border-radius:40px;

font-weight:700;

}


.department-cta{

padding:140px 0;

background:url("../images/banner/cta-bg.jpg") center/cover;

position:relative;

}

.department-cta::before{

content:"";

position:absolute;

inset:0;

background:rgba(2,28,58,.75);

}

.cta-box{

position:relative;

z-index:2;

text-align:center;

color:#fff;

}

.cta-box h2{

font-size:58px;

margin-bottom:25px;

}

.cta-box p{

font-size:20px;

margin-bottom:35px;

}

.cta-box a{

display:inline-block;

padding:18px 45px;

background:#0a7cff;

color:#fff;

border-radius:50px;

font-weight:600;

transition:.4s;

}

.cta-box a:hover{

background:#fff;

color:#021c3a;

}

/*==========================
Doctor Hero
==========================*/

.doctor-hero{

height:70vh;

background:url("../images/banner/doctors-banner.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

position:relative;

}

.doctor-overlay{

position:absolute;

inset:0;

background:linear-gradient(

90deg,

rgba(2,28,58,.9),

rgba(0,0,0,.45)

);
height: 550px;
}

.doctor-overlay img{
    width: 100%;
    height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
}

.doctor-hero-content{

position:relative;

z-index:2;

max-width:700px;

color:#fff;

}

.doctor-hero-content h1{

font-size:72px;

line-height:1.1;

margin:25px 0;

}

.doctor-hero-content h1 span{

color:#47c4ff;

}

.hero-label{

display:inline-block;

padding:12px 24px;

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

border-radius:40px;

backdrop-filter:blur(15px);

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:40px;

}

/*==========================
Search Box
==========================*/

.doctor-filter{

margin-top:-60px;

position:relative;

z-index:20;

}

.filter-box{

display:grid;

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

gap:20px;

padding:35px;

background:#fff;

border-radius:30px;

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

}

.filter-box input,

.filter-box select{

padding:18px;

border:1px solid #ddd;

border-radius:15px;

font-size:16px;

}

.filter-box button{

background:#0a7cff;

color:#fff;

border:none;

padding:18px 40px;

border-radius:15px;

cursor:pointer;

}

/*==========================
Doctor Cards
==========================*/

.doctor-list{

padding:120px 0;

}

.doctor-grid{

display:grid;

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

gap:35px;

}

.doctor-item{

background:#fff;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

}

.doctor-item:hover{

transform:translateY(-12px);

}

.doctor-image{

position:relative;

overflow:hidden;

}

.doctor-image img{

width:100%;

height:360px;

object-fit:cover;

transition:.5s;

}

.doctor-item:hover img{

transform:scale(1.08);

}

.doctor-experience{

position:absolute;

left:20px;

bottom:20px;

background:#0a7cff;

padding:12px 24px;

border-radius:30px;

color:#fff;

font-weight:600;

}

.doctor-info{

padding:30px;

}

.doctor-info span{

display:block;

margin:10px 0 20px;

color:#0a7cff;

font-weight:600;

}

.doctor-info ul{

list-style:none;

padding:0;

margin:20px 0;

}

.doctor-info li{

margin-bottom:12px;

}

.doctor-buttons{

display:flex;

gap:15px;

margin-top:30px;

}

.doctor-buttons a{

flex:1;

text-align:center;

padding:15px;

background:#0a7cff;

color:#fff;

border-radius:40px;

font-weight:600;

}

.doctor-buttons a:last-child{

background:#021c3a;

}


.doctor-schedule{

padding:50px 0;

background:#fff;

}

.doctor-schedule table{

width:100%;

border-collapse:collapse;

margin-top:50px;

overflow:hidden;

border-radius:20px;

}

.doctor-schedule th{

background:#0a7cff;

color:#fff;

padding:22px;

font-size:18px;

}

.doctor-schedule td{

padding:20px;

border-bottom:1px solid #eee;

}

.doctor-schedule tr:hover{

background:#f5faff;

}



.doctor-awards{

padding:120px 0;

background:#f7fbff;

}

.award-grid{

display:grid;

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

gap:35px;

}

.award-box{

background:#fff;

padding:50px 35px;

border-radius:25px;

text-align:center;

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

transition:.4s;

}

.award-box i{

font-size:55px;

color:#0a7cff;

margin-bottom:25px;

}

.award-box:hover{

transform:translateY(-10px);

}

.doctor-status{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

margin-top:15px;

}

.available{

background:#e9fff1;

color:#0d8c45;

}

.unavailable{

background:#fff2f2;

color:#d32f2f;

}

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

.doctor-stats{

padding:60px 0;

background:#ffffff;

}

.stats-grid{

display:grid;

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

gap:35px;

}

.stat-box{

/* background:#ffe200; */

backdrop-filter:blur(15px);

padding:50px;

border-radius:25px;

text-align:center;

color:#fff;

transition:.4s;

box-shadow: 0 2px 30px rgba(0, 0, 0, 20%);

}

.stat-box:hover{

transform:translateY(-12px);

}

.stat-box i{
color: #ffe200;
font-size:48px;

margin-bottom:25px;

}

.stat-box h2{
color:#0a7cff;
font-size:54px;

margin-bottom:10px;

}

.doctor-testimonials{

padding:140px 0;

background:#f7fbff;

}

.testimonial-slider{

display:grid;

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

gap:35px;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:25px;

text-align:center;

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

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card img{

width:90px;

height:90px;

border-radius:50%;

margin-bottom:25px;

object-fit:cover;

}
.floating-appointment{

position:fixed;

right:30px;

bottom:30px;

background:#0a7cff;

color:#fff;

padding:18px 28px;

border-radius:60px;

font-weight:600;

box-shadow:0 20px 50px rgba(10,124,255,.4);

z-index:999;

transition:.4s;

}

.floating-appointment:hover{

transform:translateY(-6px);

}
.doctor-emergency{

padding:80px 0;

background:#021c3a;

color:#fff;

}

.emergency-box{

display:flex;

justify-content:space-between;

align-items:center;

}

.emergency-box a{

padding:18px 40px;

background:#ffe200;

color:#fff;

border-radius:40px;

font-weight:700;

}

.doctor-cta{

padding:150px 0;

background:url(images/banner/doctor-cta.jpg) center/cover;

position:relative;

}

.doctor-cta::before{

content:"";

position:absolute;

inset:0;

background:rgba(2,28,58,.75);

}

.doctor-cta-box{

position:relative;

z-index:2;

text-align:center;

color:#fff;

}

.doctor-cta-box h2{

font-size:58px;

margin-bottom:25px;

}

.doctor-cta-box p{

font-size:20px;

margin-bottom:35px;

}

.doctor-cta-box a{

display:inline-block;

padding:18px 45px;

background:#0a7cff;

color:#fff;

border-radius:50px;

font-weight:600;

transition:.4s;

}

.doctor-cta-box a:hover{

background:#fff;

color:#021c3a;

}

/*=============================
Doctor Profile Hero
==============================*/

.doctor-details-hero{

padding:140px 0;

background:linear-gradient(135deg,#031b39,#0a7cff);

position:relative;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:radial-gradient(circle at top right,rgba(255,255,255,.08),transparent);

}

.doctor-profile{

display:grid;

grid-template-columns:420px 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:2;

}

.doctor-photo{

position:relative;

}

.doctor-photo img{

width:100%;

border-radius:35px;

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

}

.experience-badge{

position:absolute;

bottom:25px;

left:25px;

background:#0a7cff;

padding:15px 28px;

border-radius:40px;

color:#fff;

font-weight:600;

}

.doctor-information{

color:#fff;

}

.doctor-tag{

display:inline-block;

padding:12px 24px;

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

border-radius:50px;

margin-bottom:25px;

}

.doctor-information h1{

font-size:64px;

margin-bottom:15px;

}

.doctor-information h4{

color:#8fd3ff;

margin-bottom:20px;

}

.doctor-short-info{

display:grid;

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

gap:20px;

margin:40px 0;

}

.doctor-short-info div{

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

padding:25px;

border-radius:20px;

text-align:center;

}

.profile-buttons{

display:flex;

gap:20px;

}

.profile-buttons a{

padding:18px 40px;

border-radius:50px;

background:#fff;

color:#031b39;

font-weight:600;

}

.profile-buttons a:first-child{

background:#0a7cff;

color:#fff;

}

.doctor-biography{

padding:140px 0;

background:#fff;

}

.bio-grid{

display:grid;

grid-template-columns:1.4fr .8fr;

gap:70px;

}

.bio-left h2{

font-size:48px;

margin-bottom:25px;

}

.bio-left p{

line-height:2;

margin-bottom:25px;

color:#666;

}

.bio-card{

background:#f7fbff;

padding:35px;

border-radius:25px;

margin-bottom:30px;

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

}

.bio-card h3{

margin-bottom:20px;

color:#0a7cff;

}

.bio-card ul{

padding-left:20px;

line-height:2;

}
.expertise-section{

padding:60px 0;

background:#f7fbff;

}

.expertise-grid{

display:grid;

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

gap:30px;

}

.expertise-card{

background:#ffe200;

padding:45px 25px;

border-radius:25px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.06);

transition:.4s;

}

.expertise-card i{

font-size:48px;

color:#fff;

margin-bottom:20px;

}

.expertise-card:hover{

transform:translateY(-10px);

background:#0a7cff;

color:#fff;

}

.expertise-card:hover i{

color:#fff;

}

/*==============================
Awards Timeline
==============================*/

.doctor-awards-section{

padding:140px 0;

background:#fff;

}

.award-timeline{

position:relative;

margin-top:70px;

}

.award-timeline::before{

content:"";

position:absolute;

left:120px;

top:0;

bottom:0;

width:4px;

background:#0a7cff;

}

.timeline-item{

display:flex;

gap:50px;

margin-bottom:70px;

align-items:flex-start;

}

.timeline-year{

width:90px;

height:90px;

background:#0a7cff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:22px;

font-weight:700;

flex-shrink:0;

box-shadow:0 15px 35px rgba(10,124,255,.35);

}

.timeline-content{

background:#f7fbff;

padding:35px;

border-radius:20px;

flex:1;

box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.doctor-opd{

padding:60px 0;

background:#f7fbff;

}

.opd-table{

width:100%;

margin-top:50px;

border-collapse:collapse;

overflow:hidden;

border-radius:20px;

background:#fff;

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

}

.opd-table th{

background:#0a7cff;

color:#fff;

padding:22px;

}

.opd-table td{

padding:20px;

border-bottom:1px solid #eee;

}

.opd-table tr:hover{

background:#eef8ff;

}

.doctor-review-section{

padding:140px 0;

background:#fff;

}

.review-grid{

display:grid;

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

gap:35px;

}

.review-card{

background:#fff;

padding:40px;

border-radius:25px;

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

transition:.4s;

}

.review-card:hover{

transform:translateY(-10px);

}

.review-card p{

margin:20px 0;

line-height:2;

color:#666;

}

.publication-section{

padding:60px 0;

background:#f7fbff;

}

.publication-item{

background:#fff;

padding:35px;

border-radius:20px;

margin-bottom:25px;

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

transition:.4s;

border-left:5px solid #0a7cff;

}

.publication-item:hover{

transform:translateX(10px);

}

.doctor-gallery{

padding:140px 0;

background:#fff;

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:25px;

}

.gallery-item img{

width:100%;

height:300px;

object-fit:cover;

transition:.6s;

}

.gallery-overlay{

position:absolute;

inset:0;

background:rgba(3,27,57,.65);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.4s;

}

.gallery-overlay i{

font-size:42px;

color:#fff;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.doctor-video{

padding:120px 0;

background:#f7fbff;

}

.video-box{

position:relative;

border-radius:30px;

overflow:hidden;

}

.video-box img{

width:100%;

display:block;

}

.play-btn{

position:absolute;

top:50%;

left:50%;

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

width:90px;

height:90px;

background:#0a7cff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:30px;

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

}

.doctor-book{

padding:140px 0;

background:#fff;

}

.book-grid{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:60px;

align-items:center;

}

.doctor-book form{

display:grid;

gap:20px;

}

.doctor-book input,
.doctor-book select,
.doctor-book textarea{

padding:18px;

border:1px solid #ddd;

border-radius:15px;

font-size:16px;

}

.doctor-book textarea{

height:180px;

resize:none;

}

.doctor-book button{

background:#0a7cff;

color:#fff;

padding:18px;

border:none;

border-radius:15px;

font-weight:600;

cursor:pointer;

}

.related-doctors{

padding:140px 0;

background:#f7fbff;

}

.related-grid{

display:grid;

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

gap:35px;

}

.related-card{

background:#fff;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

text-align:center;

}

.related-card img{

width:100%;

height:320px;

object-fit:cover;

}

.related-card h3{

margin-top:25px;

}

.related-card p{

color:#0a7cff;

margin:15px 0;

}

.related-card a{

display:inline-block;

margin-bottom:30px;

padding:14px 30px;

background:#0a7cff;

color:#fff;

border-radius:40px;

}

.related-card:hover{

transform:translateY(-10px);

}



.hospital-contact-card{

padding:90px 0;

background:linear-gradient(135deg,#021c3a,#0a7cff);

color:#fff;

}

/* .contact-card{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

} */

.contact-card a{

display:inline-block;

margin-left:15px;

padding:16px 35px;

background:#fff;

color:#021c3a;

border-radius:40px;

font-weight:600;

}

/*==================================
Gallery Hero
===================================*/

.gallery-hero{

height:80vh;

background:url("../images/banner/gallery-banner.jpg") center center/cover;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

}

.gallery-overlay{

position:absolute;

inset:0;

background:linear-gradient(
90deg,
rgba(2,28,58,.88),
rgba(2,28,58,.45)
);

}

.gallery-hero-content{

position:relative;

z-index:2;

max-width:720px;

color:#fff;

}

.gallery-hero-content span{

display:inline-block;

padding:12px 24px;

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

border-radius:50px;

margin-bottom:25px;

backdrop-filter:blur(15px);

}

.gallery-hero-content h1{

font-size:72px;

line-height:1.1;

margin-bottom:30px;

}

.gallery-hero-content p{

font-size:20px;

line-height:2;

}

.gallery-filter{

padding:80px 0 40px;

background:#fff;

}

.filter-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.filter-buttons button{

padding:16px 35px;

border:none;

border-radius:50px;

background:#edf6ff;

font-weight:600;

cursor:pointer;

transition:.4s;

}

.filter-buttons button.active{

background:#0a7cff;

color:#fff;

}

.filter-buttons button:hover{

background:#0a7cff;

color:#fff;

}
.hospital-gallery{

padding:80px 0 140px;

background:#f8fbff;

}

.gallery-grid{

columns:3;

column-gap:25px;

}

.gallery-box{

position:relative;

margin-bottom:25px;

overflow:hidden;

border-radius:25px;

break-inside:avoid;

cursor:pointer;

}

.gallery-box img{

width:100%;

display:block;

transition:.7s;

}

.gallery-content{

position:absolute;

left:0;

right:0;

bottom:-120px;

padding:30px;

background:linear-gradient(
transparent,
rgba(2,28,58,.95)
);

color:#fff;

transition:.5s;

}

.gallery-box:hover img{

transform:scale(1.12);

}

.gallery-box:hover .gallery-content{

bottom:0;

}

.gallery-stats{

padding:120px 0;

background:#0a7cff;

color:#fff;

}

.gallery-stat-grid{

display:grid;

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

gap:35px;

text-align:center;

}

.gallery-stat-grid h2{

font-size:60px;
color: #ffe200;

margin-bottom:15px;

}
.gallery-stat-grid p{
    color: #000;
}

.gallery-stat-grid div{

background:#fff;

padding:50px 25px;

border-radius:25px;

backdrop-filter:blur(12px);

transition:.4s;

}

.gallery-stat-grid div:hover{

transform:translateY(-10px);

}

/*===========================
Lightbox
============================*/

.gallery-lightbox{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.gallery-lightbox img{

max-width:85%;

max-height:85%;

border-radius:18px;

box-shadow:0 30px 80px rgba(0,0,0,.6);

animation:zoomImage .35s;

}

@keyframes zoomImage{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.lightbox-close{

position:absolute;

top:40px;

right:50px;

font-size:42px;

color:#fff;

cursor:pointer;

}
.video-gallery{

padding:50px 0;

background:#fff;

}

.video-grid{

display:grid;

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

gap:35px;

}

.video-card{

position:relative;

overflow:hidden;

border-radius:25px;

cursor:pointer;

}

.video-card img{

width:100%;

height:320px;

object-fit:cover;

transition:.6s;

}

.play-icon{

position:absolute;

left:50%;

top:50%;

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

width:90px;

height:90px;

border-radius:50%;

background:#0a7cff;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:#fff;

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

}

.video-card:hover img{

transform:scale(1.1);

}
.gallery-events{

padding:140px 0;

background:#f8fbff;

}

.event-grid{

display:grid;

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

gap:35px;

}

.event-card{

background:#fff;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

}

.event-card img{

width:100%;

height:260px;

object-fit:cover;

}

.event-card h3{

padding:25px 25px 10px;

}

.event-card p{

padding:0 25px 30px;

color:#666;

}

.event-card:hover{

transform:translateY(-12px);

}

.before-after{

padding:140px 0;

background:#fff;

}

.before-grid{

display:grid;

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

gap:40px;

}

.compare-card{

background:#fff;

border-radius:25px;

overflow:hidden;

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

text-align:center;

}

.compare-card img{

width:100%;

height:420px;

object-fit:cover;

}

.compare-card h4{

padding:25px;

font-size:22px;

}

.gallery-load{

text-align:center;

padding:80px 0;

}

.gallery-load button{

padding:18px 45px;

background:#0a7cff;

color:#fff;

border:none;

border-radius:50px;

font-size:18px;

cursor:pointer;

transition:.4s;

}

.gallery-load button:hover{

background:#021c3a;

}

/*====================================
Services Hero
====================================*/

.services-hero{

height:85vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:

linear-gradient(rgba(2,28,58,.82),rgba(2,28,58,.75)),

url("../images/banner/services-banner.jpg") center/cover;

}

.services-hero .hero-content{

position:relative;

z-index:2;

max-width:720px;

color:#fff;

}

.services-hero h1{

font-size:70px;

line-height:1.1;

margin:25px 0;

}

.services-hero p{

font-size:20px;

line-height:2;

margin-bottom:40px;

}

/*====================================
Services Section
====================================*/

.services-section{

padding:50px 0;

background:#f7fbff;

}

.services-grid{

display:grid;

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

gap:35px;

}

.service-card{

background:#fff;

padding:45px;

border-radius:28px;

box-shadow:0 5px 20px rgba(0,0,0,15%);

transition:.45s;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:#ffe200;

transform:scaleX(0);

transition:.4s;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-card:hover{

transform:translateY(-12px);

}

.service-icon{

width:90px;

height:90px;

border-radius:50%;

background:#ffe200;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:30px;
margin:auto;

}

.service-icon i{

font-size:38px;

color:#fff;

}

.service-card h3{

font-size:28px;

margin-bottom:20px;

color:#0a7cff;

}

.service-card p{

line-height:1.9;

color:#000000;

margin-bottom:30px;

}

.service-card a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

color:#0a7cff;

text-decoration:none;

transition:.3s;

}

.service-card a:hover{

padding-left:10px;

}

/*=========================================
Treatment Process
==========================================*/

.treatment-process{

padding:50px 0;

background:#fff;

}

.process-wrapper{

position:relative;

margin-top:70px;

}

.process-wrapper::before{

content:"";

position:absolute;

left:55px;

top:0;

bottom:0;

width:4px;

background:linear-gradient(#0a7cff,#18b5ff);

}

.process-item{

display:flex;

gap:35px;

margin-bottom:55px;

position:relative;

}

.process-number{

width:110px;

height:110px;

background:#ffe200;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:32px;

font-weight:700;

flex-shrink:0;

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

}

.process-content{

background:#f8fbff;

padding:35px;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.06);

flex:1;

transition:.4s;

}

.process-content:hover{

transform:translateX(10px);

}

.process-content h3{

margin-bottom:15px;

font-size:28px;

color:#0a7cff;

}

.process-content p{

color:#000;

line-height:1.9;

}
.medical-facilities{

padding:50px 0;

background:#f7fbff;

}

.facility-grid{

display:grid;

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

gap:35px;

}

.facility-card{

background:#fff;

padding:45px;

text-align:center;

border-radius:25px;

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

transition:.4s;

}

.facility-card:hover{

transform:translateY(-12px);

}

.facility-card i{

font-size:55px;

margin-bottom:25px;

color:#ffe200;

}

.facility-card h3{

font-size:24px;
color: #0a7cff;

}

.service-stats{

padding:130px 0;

/* background:linear-gradient(135deg,#021c3a,#0a7cff); */

}

.stats-grid{

display:grid;

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

gap:35px;

}

.stat-card{

background:#0a7cff;

backdrop-filter:blur(15px);

padding:50px;

text-align:center;

border-radius:25px;

color:#fff;

}

.stat-card h2{

font-size:60px;

margin-bottom:15px;

}
.why-services{

padding:50px 0;

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.why-image img{

width:100%;

border-radius:30px;

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

}

.why-content span{

color:#0a7cff;

font-weight:600;

}

.why-content h2{

font-size:52px;

margin:20px 0 30px;

}

.why-content ul{

list-style:none;

padding:0;

margin-bottom:35px;

}

.why-content li{

margin-bottom:18px;

font-size:18px;

color:#555;

}

.services-emergency{

padding:100px 0;

background:linear-gradient(135deg,#031b39,#0a7cff);

color:#fff;

}

.emergency-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

flex-wrap:wrap;

}

.emergency-wrapper h2{

font-size:42px;

margin-bottom:15px;

}

.emergency-wrapper p{

font-size:18px;

line-height:1.8;

max-width:700px;

}

/*====================================
Featured Treatments
====================================*/

.featured-treatments{

padding:140px 0;

background:#ffffff;

}

.treatment-grid{

display:grid;

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

gap:35px;

}

.treatment-card{

overflow:hidden;

border-radius:28px;

background:#fff;

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

transition:.45s;

}

.treatment-card:hover{

transform:translateY(-12px);

}

.treatment-card img{

width:100%;

height:280px;

object-fit:cover;

transition:.6s;

}

.treatment-card:hover img{

transform:scale(1.08);

}

.treatment-content{

padding:35px;

}

.treatment-content h3{

font-size:28px;

margin-bottom:18px;

}

.treatment-content p{

line-height:1.9;

color:#666;

margin-bottom:25px;

}

.treatment-content a{

color:#0a7cff;

font-weight:600;

}

.service-doctors{

padding:140px 0;

background:#f8fbff;

}

.doctor-slider{

display:grid;

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

gap:35px;

}

.doctor-box{

background:#fff;

border-radius:28px;

overflow:hidden;

text-align:center;

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

transition:.4s;

}

.doctor-box:hover{

transform:translateY(-10px);

}

.doctor-box img{

width:100%;

height:360px;

object-fit:cover;

}

.doctor-box h3{

margin:30px 0 10px;

}

.doctor-box span{

display:block;

padding-bottom:30px;

color:#0a7cff;

font-weight:600;

}

.service-testimonials{

padding:140px 0;

background:#fff;

}

.testimonial-grid{

display:grid;

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

gap:35px;

}

.testimonial-card{

background:#f8fbff;

padding:40px;

border-radius:25px;

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

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card p{

line-height:2;

margin-bottom:25px;

color:#555;

}

.testimonial-card h4{

color:#021c3a;

}

/*==================================
Facilities Hero
==================================*/

.facilities-hero{

height:85vh;

display:flex;

align-items:center;

position:relative;

background:

linear-gradient(rgba(2,28,58,.85),rgba(2,28,58,.75)),

url("../images/banner/facilities-banner.jpg") center/cover;

}

.facilities-hero .hero-content{

max-width:720px;

color:#fff;

position:relative;

z-index:2;

}

.facilities-hero h1{

font-size:72px;

margin:25px 0;

line-height:1.1;

}

.facilities-hero p{

font-size:20px;

line-height:2;

margin-bottom:40px;

}

/*==================================
Facilities
==================================*/

.facility-section{

padding:140px 0;

background:#f8fbff;

}

.facility-grid{

display:grid;

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

gap:35px;

}

.facility-card{

background:#ffffff;

overflow:hidden;

border-radius:28px;

box-shadow:0 2px 20px rgba(0,0,0,20%);

transition:.45s;

}

.facility-card:hover{

transform:translateY(-12px);

}

.facility-card img{

width:100%;

height:270px;

object-fit:cover;

transition:.5s;

}

.facility-card:hover img{

transform:scale(1.08);

}

.facility-content{

padding:35px;

text-align:center;

}

.facility-content i{

width:80px;

height:80px;

background:#0a7cff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:#fff;

margin:auto;

margin-top:-75px;

position:relative;

box-shadow:0 15px 35px rgba(10,124,255,.25);

}

.facility-content h3{

margin:30px 0 20px;

font-size:28px;

}

.facility-content p{

line-height:1.9;

color:#666;

}

/*=====================================
Patient Rooms
=====================================*/

.patient-rooms{

padding:140px 0;

background:#ffffff;

}

.rooms-grid{

display:grid;

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

gap:35px;

}

.room-card{

background:#fff;

border-radius:30px;

overflow:hidden;

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

transition:.45s;

}

.room-card:hover{

transform:translateY(-15px);

}

.room-card img{

width:100%;

height:300px;

object-fit:cover;

transition:.6s;

}

.room-card:hover img{

transform:scale(1.08);

}

.room-content{

padding:35px;

}

.room-content span{

display:inline-block;

padding:8px 18px;

background:#eaf4ff;

border-radius:40px;

color:#0a7cff;

font-weight:600;

margin-bottom:18px;

}

.room-content h3{

font-size:28px;

margin-bottom:20px;

color:#021c3a;

}

.room-content ul{

padding:0;

list-style:none;

}

.room-content li{

padding:10px 0;

color:#666;

}

.room-content i{

color:#0a7cff;

margin-right:10px;

}
.diagnostic-center{

padding:140px 0;

background:#f8fbff;

}

.diagnostic-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.diagnostic-image img{

width:100%;

border-radius:30px;

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

}

.diagnostic-list{

display:grid;

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

gap:20px;

margin-top:35px;

}

.diagnostic-list div{

background:#fff;

padding:18px 20px;

border-radius:15px;

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

font-weight:600;

}

.diagnostic-list i{

color:#0a7cff;

margin-right:10px;

}
/*=========================================
Patient Safety & Infection Control
=========================================*/

.infection-control{

    position:relative;
    padding:140px 0;
    background:#ffffff;
    overflow:hidden;

}

.infection-control::before{

    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:rgba(10,124,255,.05);
    top:-250px;
    left:-250px;

}

.infection-control::after{

    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(24,181,255,.05);
    bottom:-220px;
    right:-220px;

}

.infection-control .container{

    position:relative;
    z-index:2;

}

.safety-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:70px;

}

.safety-card{

    position:relative;
    background:#fff;
    border-radius:30px;
    padding:50px 40px;
    text-align:center;
    overflow:hidden;
    transition:.45s;
    border:1px solid #edf3fb;
    box-shadow:0 20px 50px rgba(0,0,0,.07);

}

.safety-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0a7cff,#18b5ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.45s;

}

.safety-card:hover::before{

    transform:scaleX(1);

}

.safety-card:hover{

    transform:translateY(-15px);
    box-shadow:0 30px 60px rgba(10,124,255,.15);

}

.safety-card i{

    width:95px;
    height:95px;
    margin:auto;
    margin-bottom:30px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    color:#fff;
    background:linear-gradient(135deg,#0a7cff,#19b8ff);
    box-shadow:0 18px 35px rgba(10,124,255,.25);
    transition:.45s;

}

.safety-card:hover i{

    transform:rotateY(180deg) scale(1.08);

}

.safety-card h3{

    font-size:28px;
    font-weight:700;
    color:#021c3a;
    margin-bottom:18px;

}

.safety-card p{

    font-size:16px;
    line-height:1.9;
    color:#666;

}

/* Floating Glow */

.safety-card::after{

    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(10,124,255,.08);
    right:-90px;
    top:-90px;
    transition:.45s;

}

.safety-card:hover::after{

    transform:scale(1.3);

}

/* Responsive */

@media(max-width:991px){

.safety-grid{

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

}

}

@media(max-width:768px){

.infection-control{

padding:90px 0;

}

.safety-grid{

grid-template-columns:1fr;

}

.safety-card{

padding:40px 30px;

}

.safety-card h3{

font-size:24px;

}

.safety-card i{

width:85px;
height:85px;
font-size:36px;

}

}



/*==============================
Facility Gallery
==============================*/

.facility-gallery{

padding:140px 0;

background:#ffffff;

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:25px;

height:300px;

cursor:pointer;

}

.gallery-item.large{

grid-column:span 2;

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-overlay{

position:absolute;

inset:0;

background:linear-gradient(transparent,rgba(2,28,58,.9));

display:flex;

align-items:flex-end;

padding:30px;

opacity:0;

transition:.4s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay h3{

color:#fff;

font-size:28px;

}


/*=========================================
Virtual Hospital Tour
=========================================*/

.virtual-tour{

    padding:140px 0;
    background:#f8fbff;

}

.tour-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

.tour-content span{

    display:inline-block;
    color:#0a7cff;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:20px;

}

.tour-content h2{

    font-size:52px;
    color:#021c3a;
    margin-bottom:25px;
    line-height:1.2;

}

.tour-content p{

    color:#666;
    line-height:2;
    margin-bottom:40px;
    font-size:17px;

}

.tour-video{

    position:relative;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.10);

}

.tour-video img{

    width:100%;
    display:block;
    transition:.6s;

}

.tour-video:hover img{

    transform:scale(1.08);

}

.play-btn{

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:95px;
    height:95px;
    border-radius:50%;
    background:#0a7cff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    text-decoration:none;
    transition:.4s;
    box-shadow:0 20px 40px rgba(10,124,255,.35);

}

.play-btn:hover{

    background:#021c3a;
    transform:translate(-50%,-50%) scale(1.1);

}


/*=========================================
Patient Amenities
=========================================*/

.patient-amenities{

    padding:140px 0;
    background:#ffffff;

}

.amenity-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:70px;

}

.amenity-card{

    background:#fff;
    padding:50px 30px;
    border-radius:28px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.07);
    border:1px solid #edf3fb;
    transition:.45s;
    position:relative;
    overflow:hidden;

}

.amenity-card::before{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#0a7cff,#18b5ff);
    opacity:0;
    transition:.4s;

}

.amenity-card:hover::before{

    opacity:1;

}

.amenity-card i,
.amenity-card h3{

    position:relative;
    z-index:2;

}

.amenity-card i{

    width:90px;
    height:90px;
    margin:auto;
    margin-bottom:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eef6ff;
    color:#0a7cff;
    font-size:38px;
    transition:.4s;

}

.amenity-card:hover i{

    background:#fff;
    color:#0a7cff;
    transform:rotateY(180deg);

}

.amenity-card h3{

    color:#021c3a;
    font-size:24px;
    transition:.3s;

}

.amenity-card:hover h3{

    color:#fff;

}
/*=========================================
Facilities FAQ
=========================================*/

.facilities-faq{

    padding:140px 0;
    background:#f8fbff;

}

.faq-wrapper{

    max-width:900px;
    margin:70px auto 0;

}

.faq-item{

    background:#fff;
    border-radius:22px;
    margin-bottom:25px;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    overflow:hidden;

}

.faq-item h4{

    padding:28px 35px;
    cursor:pointer;
    position:relative;
    font-size:22px;
    color:#021c3a;
    transition:.3s;

}

.faq-item h4::after{

    content:"+";
    position:absolute;
    right:35px;
    font-size:28px;
    color:#0a7cff;

}

.faq-item.active h4::after{

    content:"−";

}

.faq-item p{

    display:none;
    padding:0 35px 30px;
    color:#666;
    line-height:2;

}
/*=========================================
Facility CTA
=========================================*/

.facility-cta{

    padding:160px 0;
    background:
    linear-gradient(rgba(2,28,58,.90),rgba(2,28,58,.85)),
    url("../images/banner/facility-cta.jpg") center/cover;
    position:relative;
    overflow:hidden;

}

.cta-box{

    max-width:900px;
    margin:auto;
    text-align:center;
    color:#fff;

}

.cta-box h2{

    font-size:62px;
    line-height:1.2;
    margin-bottom:25px;

}

.cta-box p{

    font-size:20px;
    line-height:2;
    margin-bottom:45px;
    opacity:.95;

}

.cta-box .primary-btn{

    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 45px;
    border-radius:50px;
    background:#fff;
    color:#021c3a;
    font-weight:700;
    text-decoration:none;
    transition:.4s;

}

.cta-box .primary-btn:hover{

    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(255,255,255,.25);

}
/*====================================================
Insurance Hero
====================================================*/

.insurance-hero{

    position:relative;
    height:85vh;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
    linear-gradient(rgba(2,28,58,.88),rgba(2,28,58,.82)),
    url("../images/banner/insurance-banner.jpg") center/cover no-repeat;

}

.insurance-hero .hero-content{

    max-width:760px;
    color:#fff;
    position:relative;
    z-index:5;

}

.insurance-hero span{

    display:inline-block;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#8fd2ff;
    font-weight:700;
    margin-bottom:20px;

}

.insurance-hero h1{

    font-size:72px;
    line-height:1.1;
    margin-bottom:30px;

}

.insurance-hero p{

    font-size:20px;
    line-height:2;
    opacity:.95;
    margin-bottom:45px;

}

.hero-btns{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}


/*====================================================
Insurance Partners
====================================================*/

.insurance-partners{

    padding:140px 0;
    background:#f8fbff;

}

.partner-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-top:70px;

}

.partner-card{

    background:#fff;
    border-radius:25px;
    height:170px;

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

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

    transition:.45s;

    border:1px solid #edf3fb;

}

.partner-card:hover{

    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(10,124,255,.12);

}

.partner-card img{

    max-width:160px;
    max-height:80px;
    object-fit:contain;
    transition:.4s;

}

.partner-card:hover img{

    transform:scale(1.08);

}


/*====================================================
Cashless Process
====================================================*/

.cashless-process{

    padding:50px 0;
    background:#fff;

}

.process-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-top:70px;

}

.process-box{

    position:relative;
    text-align:center;

    padding:45px 35px;

    border-radius:30px;

    background:#f8fbff;

     box-shadow:0 2px 20px rgba(0,0,0,15%);

    transition:.45s;

    overflow:hidden;

}

.process-box:hover{

    transform:translateY(-12px);

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

}

.process-box::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:linear-gradient(90deg,#0a7cff,#19b8ff);

    transform:scaleX(0);

    transition:.4s;

}

.process-box:hover::before{

    transform:scaleX(1);

}

.process-box .number{

    width:90px;
    height:90px;

    margin:auto auto 30px;

    border-radius:50%;

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

    background:#ffe200;

    color:#fff;

    font-size:34px;
    font-weight:700;

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

}

.process-box h3{

    font-size:28px;
    color:#0a7cff;
    margin-bottom:20px;

}

.process-box p{

    line-height:1.9;
    color:#000;

}


/*====================================================
Required Documents
====================================================*/

.required-documents{

    padding:10px 0;

    background:#f8fbff;

}


.document-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.document-image img{

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

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

}

.document-content span{

    color:#0a7cff;

    font-weight:700;

    letter-spacing:2px;

}

.document-content h2{

    font-size:52px;

    margin:20px 0 30px;

    color:#021c3a;

}

.document-content ul{

    list-style:none;

    padding:0;

    margin:0;

}

.document-content li{

    background:#ffe200;

    color: #fff;

    font-weight: bolder;

    margin-bottom:18px;

    padding:18px 22px;

    border-radius:16px;

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

    transition:.35s;

    font-size:17px;

}

.document-content li:hover{

    transform:translateX(12px);

}

.document-content i{

    color:#0a7cff;

    margin-right:12px;

}


/*=========================================
Packages Hero
=========================================*/

.packages-hero{

height:85vh;

display:flex;

align-items:center;

background:

linear-gradient(rgba(2,28,58,.85),rgba(2,28,58,.80)),
url("../images/banner/health-package-banner.jpg") center/cover;

}

.packages-hero .hero-content{

max-width:760px;

color:#fff;

}

.packages-hero span{

letter-spacing:3px;

color:#8fd2ff;

font-weight:700;

}

.packages-hero h1{

font-size:72px;

margin:25px 0;

line-height:1.1;

}

.packages-hero p{

font-size:20px;

line-height:2;

margin-bottom:40px;

}

.hero-btns{

display:flex;

gap:20px;

flex-wrap:wrap;

}

/*=========================================
Category
=========================================*/

.package-category{

padding:50px 0;

background:#f8fbff;

}

.category-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.category-box{

background:#fff;

padding:45px;

border-radius:30px;

text-align:center;

box-shadow:0 2px 25px rgba(0,0,0,15%);

transition:.4s;

cursor:pointer;

}

.category-box:hover{

transform:translateY(-12px);

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

}

.category-box i{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#ffe200;

color:#fff;

font-size:36px;

margin-bottom:25px;

}

.category-box h3{

font-size:26px;

color:#021c3a;

}

/*=========================================
Package Cards
=========================================*/

.health-packages{

padding:50px 0;

background:#ffffff;

}

.package-grid{

display:grid;

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

gap:40px;

margin-top:70px;

}

.package-card{

position:relative;

padding:50px 40px;

background:#fff;

border-radius:30px;

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

transition:.45s;

overflow:hidden;

border:1px solid #edf3fb;

}

.package-card:hover{

transform:translateY(-15px);

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

}

.package-badge{

position:absolute;

top:25px;

right:-35px;

background:#ff6b35;

color:#fff;

padding:8px 45px;

transform:rotate(45deg);

font-size:13px;

font-weight:600;

}

.package-card h3{

font-size:30px;

color:#021c3a;

margin-bottom:20px;

}

.package-card h4{

font-size:52px;

color:#0a7cff;

margin-bottom:30px;

}

.package-card ul{

list-style:none;

padding:0;

margin:0 0 35px;

}

.package-card li{

padding:12px 0;

color:#666;

border-bottom:1px solid #f1f1f1;

}

.package-card li:last-child{

border:none;

}

.package-card li i{

color:#0a7cff;

margin-right:12px;

}

.package-card .primary-btn{

width:100%;

justify-content:center;

}

/* Featured Card */

.package-card.featured{

background:linear-gradient(135deg,#021c3a,#0a7cff);

color:#fff;

transform:scale(1.04);

}

.package-card.featured h3,

.package-card.featured h4,

.package-card.featured li{

color:#fff;

}

.package-card.featured li i{

color:#8fd2ff;

}


/*=========================================
Special Packages
=========================================*/

.special-packages{

padding:50px 0;

background:#fff;

}

.gray-bg{

background:#f8fbff;

}

.special-grid{

display:grid;

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

gap:40px;

margin-top:70px;

}

.special-card{

background:#000;

padding:45px;

border-radius:30px;

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

border:1px solid #edf3fb;

transition:.45s;

}

.special-card:hover{

transform:translateY(-12px);

}

.special-card.premium{

background:#000;

color:#fff;

}

.special-card.premium h3,
.special-card.premium h4,
.special-card.premium li{

color:#fff;

}
.special-card.premium h4{
    color: #0a7cff;
}

.package-icon{

width:90px;

height:90px;

border-radius:50%;

background:#ffe200;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#fff;

margin-bottom:30px;

}

.special-card h3{

font-size:30px;

margin-bottom:15px;
color: #fff;

}

.special-card h4{

font-size:46px;

color:#0a7cff;

margin-bottom:25px;

}

.special-card ul{

list-style:none;

padding:0;

margin:0 0 30px;

}

.special-card li{

padding:12px 0;

border-bottom:1px solid #eee;
color: #fff;

}

.special-card li i{

color:#ffe200;

margin-right:10px;

}

.special-card.premium li i{

color:#ffe200;

}

/*=========================================
Combo Packages
=========================================*/

.combo-packages{

padding:50px 0;

background:#ffffff;

}

.combo-grid{

display:grid;

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

gap:40px;

}

.combo-box{

padding:60px;

background:#000;

border-radius:35px;

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

transition:.45s;

}

.combo-box:hover{

transform:translateY(-12px);

}

.combo-box.corporate{

background:#000;

color:#fff;

}

.combo-box h2{

font-size:38px;

margin-bottom:20px;
color: #0a7cff;

}

.combo-box p{

line-height:2;

margin-bottom:30px;
color: #fff;

}

.combo-box ul{

list-style:none;

padding:0;

margin-bottom:35px;
color: #fff;

}

.combo-box li{

padding:12px 0;

}

.combo-box h3{

font-size:42px;

margin-bottom:30px;
color: #ffe200;

}



/*==================================================
CONTACT HERO
==================================================*/

.contact-hero{

    position:relative;
    height:85vh;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
    linear-gradient(rgba(2,28,58,.88),rgba(2,28,58,.82)),
    url("../images/banner/contact-banner.jpg") center/cover no-repeat;

}

.contact-hero .hero-content{

    max-width:720px;
    color:#fff;
    position:relative;
    z-index:2;

}

.contact-hero span{

    display:inline-block;
    color:#8fd2ff;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:20px;

}

.contact-hero h1{

    font-size:68px;
    line-height:1.1;
    margin-bottom:25px;

}

.contact-hero p{

    font-size:19px;
    line-height:2;
    margin-bottom:40px;
    opacity:.95;

}

.hero-btns{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}

/*==================================================
CONTACT INFO
==================================================*/

.contact-info{

    padding:60px 0;
    background:#f8fbff;

}

.contact-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:70px;

}

.contact-card{

    background:#fff;
    border-radius:25px;
    padding:45px 35px;
    text-align:center;

    box-shadow:0 2px 20px rgba(0,0,0,15%);

    transition:.4s;

}

.contact-card:hover{

    transform:translateY(-12px);

    box-shadow:0 28px 55px rgba(10,124,255,.12);

}

.contact-card i{

    width:90px;
    height:90px;

    margin:auto auto 25px;

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

    border-radius:50%;

    background:#ffe200;

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

}

.contact-card h3{

    font-size:28px;
    color:#0a7cff;
    margin-bottom:20px;

}

.contact-card p{

    line-height:2;
    color:#000;

}

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

.contact-section{

    padding:130px 0;
    background:#fff;

}

.contact-wrapper{

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:start;

}

.contact-form{

    background:#fff;
    border-radius:30px;
    padding:50px;

    box-shadow:0 2px 20px rgba(0,0,0,20%);

}

.contact-form h2{

    font-size:42px;
    margin-bottom:35px;
    color:#021c3a;

}

.form-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;
    padding:18px 22px;

    border:1px solid #dbe7f6;
    border-radius:14px;

    outline:none;

    font-size:16px;

    transition:.3s;

    margin-bottom:20px;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    border-color:#0a7cff;

    box-shadow:0 0 0 4px rgba(10,124,255,.12);

}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    border:none;
    cursor:pointer;

}

/*==================================================
MAP
==================================================*/

.contact-map{

    height:100%;

}

.contact-map iframe{

    width:100%;
    height:100%;
    min-height:650px;

    border:none;

    border-radius:30px;

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

}

/*==================================================
EMERGENCY
==================================================*/

.emergency-contact{

    padding:110px 0;

    background:#f8fbff;

}

.emergency-box{

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

    gap:40px;

    padding:60px;

    border-radius:35px;

    color:#fff;

    background:#0a7cff;

}

.emergency-box h2{

    font-size:46px;
    margin-bottom:15px;

}

.emergency-box p{

    line-height:2;
    max-width:700px;

}

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

.contact-faq{

    padding:130px 0;
    background:#fff;

}

.contact-faq .faq-wrapper{

    max-width:900px;
    margin:70px auto 0;

}

.contact-faq .faq-item{

    background:#fff;

    margin-bottom:25px;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.contact-faq .faq-item h4{

    padding:28px 35px;

    cursor:pointer;

    position:relative;

    font-size:22px;

}

.contact-faq .faq-item h4::after{

    content:"+";

    position:absolute;

    right:35px;

    color:#0a7cff;

    font-size:30px;

}

.contact-faq .faq-item.active h4::after{

    content:"−";

}

.contact-faq .faq-item p{

    display:none;

    padding:0 35px 30px;

    color:#666;

    line-height:2;

}

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

.contact-cta{

    padding:150px 0;

    text-align:center;

    color:#fff;

    background:
    linear-gradient(rgba(2,28,58,.88),rgba(2,28,58,.82)),
    url("../images/banner/contact-cta.jpg") center/cover;

}

.contact-cta .cta-content{

    max-width:850px;
    margin:auto;

}

.contact-cta h2{

    font-size:60px;
    margin-bottom:25px;

}

.contact-cta p{

    font-size:20px;
    line-height:2;
    margin-bottom:40px;

}

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

@media(max-width:1200px){

.contact-grid{

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

}

}

@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-map iframe{

min-height:500px;

}

.form-grid{

grid-template-columns:1fr;

}

.emergency-box{

flex-direction:column;
text-align:center;

}

}

@media(max-width:768px){

.contact-hero{

height:auto;
padding:120px 0;

}


.contact-section,
.contact-faq,
.emergency-contact,
.contact-cta{

padding:20px 0;

}

.contact-info{
   padding:20px 0; 
}

.contact-grid{

grid-template-columns:1fr;

}

.contact-form{

padding:35px 25px;

}

.contact-hero h1{

font-size:40px;

}

.contact-form h2{

font-size:34px;

}

.contact-cta h2{

font-size:38px;

}

.contact-cta p{

font-size:17px;

}

.hero-btns{

flex-direction:column;

}

.emergency-box{

padding:40px 30px;

}

.emergency-box h2{

font-size:34px;

}

}


/*====================================================
OUR STORY
====================================================*/

.our-story{

    padding:50px 0;
    background:#ffffff;
    position:relative;
    overflow:hidden;

}

.our-story::before{

    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(10,124,255,.05);
    top:-250px;
    right:-180px;

}

.story-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    position:relative;
    z-index:2;

}

.story-image{

    position:relative;

}

.story-image img{

    width:100%;
    border-radius:30px;
    box-shadow:0 25px 70px rgba(0,0,0,.08);

}

.story-content span{

    display:inline-block;
    color:#0a7cff;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

}

.story-content h2{

    font-size:54px;
    color:#021c3a;
    margin:20px 0 30px;
    line-height:1.2;

}

.story-content p{

    color:#666;
    line-height:2;
    margin-bottom:25px;

}

/*====================================================
MISSION & VISION
====================================================*/

.mission-vision{

    padding:140px 0;
    background:#f8fbff;

}

.mission-grid{

    display:grid;
    /* grid-template-columns:repeat(2fr); */
    gap:40px;

}

.mission-card{

    background:#fff;
    padding:55px 45px;
    border-radius:30px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
    transition:.4s;
    border:1px solid #edf3fb;

}

.mission-card:hover{

    transform:translateY(-12px);
    box-shadow:0 30px 70px rgba(10,124,255,.12);

}

.mission-card i{

    width:95px;
    height:95px;
    margin:auto auto 25px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,#0a7cff,#18b5ff);
    color:#fff;
    font-size:38px;

}

.mission-card h3{

    font-size:32px;
    color:#021c3a;
    margin-bottom:20px;

}

.mission-card p{

    line-height:2;
    color:#666;

}

/*====================================================
CORE VALUES
====================================================*/

.core-values{

    padding:50px 0;
    background:#fff;

}

.value-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-top:70px;

}

.value-card{

    background:#fff;
    padding:45px 35px;
    text-align:center;
    border-radius:28px;
    box-shadow:0 0px 30px rgba(0,0,0,20%);
    transition:.4s;

}

.value-card:hover{

    transform:translateY(-12px);

}

.value-card i{

    width:85px;
    height:85px;
    margin:auto auto 25px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#ffe200;
    color:#fff;
    font-size:32px;

}

.value-card h3{

    font-size:28px;
    color:#021c3a;
    margin-bottom:15px;

}

.value-card p{

    color:#0a7cff;
    line-height:1.9;

}

/*====================================================
WHY CHOOSE EVAN
====================================================*/

.why-evan{

    padding:50px 0;
    background:#f8fbff;

}

.choose-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:70px;

}

.choose-item{

    background:#ffe200;
    padding:28px 30px;
    border-radius:18px;
    font-size:18px;
    font-weight:600;
    color:#fff;
    box-shadow:0 0px 15px rgba(0,0,0,10%);
    transition:.35s;

}

.choose-item:hover{

    transform:translateX(10px);
    color:#0a7cff;

}

/*====================================================
HOSPITAL TIMELINE
====================================================*/

.hospital-timeline{

    padding:50px 0;
    background:#fff;

}

.timeline{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-top:70px;

}

.timeline-box{

    position:relative;
    background:#fff;
    border-radius:28px;
    padding:45px 30px;
    text-align:center;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 20%);
    transition:.4s;

}

.timeline-box:hover{

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

}

/* .timeline-box::before{

    content:;
    width:70px;
    height:70px;
    background:#ffe200;
    border-radius:50%;
    display:block;
    margin:0 auto 25px;

} */

.timeline-box h3{

    font-size:28px;
    color:#ffe200;
    margin-bottom:15px;

}

.timeline-box p{

    line-height:1.9;
    color:#0a7cff;

}

/*====================================================
LEADERSHIP MESSAGE
====================================================*/

.leadership-message{

    padding:140px 0;
    background:#f8fbff;

}

.leader-wrapper{

    display:grid;
    grid-template-columns:400px 1fr;
    gap:70px;
    align-items:center;

}

.leader-image img{

    width:100%;
    border-radius:30px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.leader-content span{

    display:inline-block;
    color:#0a7cff;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

}

.leader-content h2{

    font-size:52px;
    color:#021c3a;
    margin:20px 0 25px;

}

.leader-content p{

    color:#666;
    line-height:2;
    margin-bottom:30px;

}

.leader-content h4{

    color:#0a7cff;
    font-size:22px;
    font-weight:700;

}

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

@media(max-width:1200px){

.value-grid{

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

}

.timeline{

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

}

}

@media(max-width:991px){

.story-wrapper,
.leader-wrapper,
.mission-grid{

grid-template-columns:1fr;

}

.choose-grid{

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

}

.story-content h2,
.leader-content h2{

font-size:42px;

}

}

@media(max-width:768px){

.our-story,
.mission-vision,
.core-values,
.why-evan,
.hospital-timeline,
.leadership-message{

padding:90px 0;

}

.value-grid,
.choose-grid,
.timeline{

grid-template-columns:1fr;

}

.story-content h2,
.leader-content h2{

font-size:34px;

}

.mission-card,
.value-card,
.timeline-box{

padding:35px 25px;

}

.leader-wrapper{

gap:40px;

}

}

.menu{
    display:flex;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
}

.menu li{
    position:relative;
}

.menu li a{
    display:block;
    padding:15px 20px;
    text-decoration:none;
    color:#222;
    transition:.3s;
    
}

.menu li a:hover{
    color:#0077ff;
}

/* Dropdown */
.submenu{
    position:absolute;
    top:100%;
    left:0;
    width:250px;
    background:#fff;
    list-style:none;
    padding:8px 0;
    margin:0;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.3s ease;
    z-index:999;
}

.submenu li{
    width:100%;
}

.submenu li a{
    padding:12px 20px;
    color:#333;
    white-space:nowrap;
}

.submenu li a:hover{
    background:#f4f8ff;
    color:#0077ff;
}

.dropdown:hover .submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/*=====================================
    MANAGEMENT SECTION
======================================*/

.management-section{
    padding:50px 0;
    background:#f8fbff;
}

.management-section .container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

.section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.section-title span{
    display:inline-block;
    color:#0d6efd;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}

.section-title h2{
    font-size:42px;
    margin-bottom:18px;
    color:#16243d;
}

.section-title p{
    color:#6b7280;
    line-height:1.8;
    font-size:16px;
}

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

.management-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 2px 25px rgba(0,0,0,15%);
    transition:.4s;
}

.management-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.management-image{
    height:320px;
    overflow:hidden;
}

.management-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.management-card:hover img{
    transform:scale(1.08);
}

.management-content{
    padding:25px;
    text-align:center;
    background-color: #fff;
    box-shadow: ;
}

.management-content h3{
    font-size:22px;
    color:#0a7cff;
    margin-bottom:10px;
}

.management-content span{
    display:inline-block;
    background:#ffe200;
    
    color:#000;
    padding:8px 20px;
    border-radius:30px;
    font-size:14px;
    font-weight:500;
}


/*===============================
        EVAN DOCTORS
================================*/

.eh-doctors-section{
    padding:100px 0;
    background:#f7fbff;
}

.eh-doctor-container{
    width:90%;
    max-width:1320px;
    margin:auto;
}

.eh-doctor-heading{
    text-align:center;
    margin-bottom:70px;
}

.eh-doctor-heading span{
    display:inline-block;
    color:#00A6FB;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.eh-doctor-heading h2{
    font-size:42px;
    color:#163560;
    margin-bottom:20px;
}

.eh-doctor-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.eh-doctor-grid{

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

}

.eh-doctor-card{

    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 2px 20px rgba(0,0,0,15%);
    transition:.4s;

}

.eh-doctor-card:hover{

    transform:translateY(-10px);

}

.eh-doctor-image{

    height:350px;
    overflow:hidden;

}

.eh-doctor-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;

}

.eh-doctor-card:hover img{

    transform:scale(1.08);

}

.eh-doctor-content{
    background-color: #fff;
    padding:20px;
    text-align:center;

}

.eh-doctor-content h3{

    font-size:24px;
    color:#000;
    margin-bottom:8px;

}

.eh-doctor-content h5{

    color:#00A6FB;
    margin-bottom:15px;
    font-size:15px;

}

.eh-doctor-content p{

    color:#ffe200;
    line-height:1.7;
    margin-bottom:0px;
    font-weight: bolder;

}

.eh-doctor-btn{

    display:inline-block;
    padding:12px 28px;
    background:#00A6FB;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    transition:.3s;

}

.eh-doctor-btn:hover{

    background:#163560;

}





/*==============================
        HERO SLIDER
==============================*/

.hero-slider{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    /* background:#000; */
}

.hero-slider .slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:1s ease;
}

.hero-slider .slide.active{
    opacity:1;
    visibility:visible;
    z-index:2;
}

.hero-slider .slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.1);
    transition:8s linear;
}

.hero-slider .slide.active img{
    transform:scale(1);
}

.hero-slider .overlay{
    position:absolute;
    inset:0;
    /* background:linear-gradient(
    90deg,
    rgba(5,25,45,.90) 15%,
    rgba(5,25,45,.65) 45%,
    rgba(5,25,45,.35) 75%,
    rgba(5,25,45,.20) 100%); */
}

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

video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero-content{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    width:750px;
    /* max-width:90%; */
    z-index:5;

    padding:20px;
    border-radius:30px;

    background:rgba(255,255,255,10%);
    backdrop-filter:blur(18px);

    /* border:1px solid rgba(255,255,255,.15); */

    animation:contentFade .9s ease;
}

.hero-content span{
    display:inline-block;
    color:#000;
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.hero-content h1{
    font-size:62px;
    line-height:1.15;
    color:#fff;
    font-weight:800;
    margin-bottom:25px;
}

.hero-content p{
    color:#000;
    font-size:18px;
    line-height:1.8;
    margin-bottom:40px;
}

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

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.btn-primary,
.btn-outline{
    text-decoration:none;
    padding:16px 34px;
    border-radius:60px;
    font-size:16px;
    font-weight:700;
    transition:.4s;
}

.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,#00bcd4,#0077ff);
    box-shadow:0 15px 35px rgba(0,140,255,.35);
}

.btn-primary:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 45px rgba(0,140,255,.45);
}

.btn-outline{
    color:#fff;
    border:2px solid rgba(255,255,255,.45);
    background:#0a7cff;
}

.btn-outline:hover{
    background:#ffe200;
    color:#fff;
}

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

.slide.active .hero-content span{
    animation:fadeUp .6s ease .2s both;
}

.slide.active .hero-content h1{
    animation:fadeUp .6s ease .4s both;
}

.slide.active .hero-content p{
    animation:fadeUp .6s ease .6s both;
}

.slide.active .hero-buttons{
    animation:fadeUp .6s ease .8s both;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes contentFade{

    from{
        opacity:0;
        transform:translateY(-40%) scale(.95);
    }

    to{
        opacity:1;
        transform:translateY(-50%) scale(1);
    }

}

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

@media(max-width:992px){

.hero-slider{
    height:85vh;
}

.hero-content{
    left:5%;
    right:5%;
    width:auto;
    padding:40px;
}

.hero-content h1{
    font-size:46px;
}

}

@media(max-width:768px){

.hero-slider{
    height:75vh;
}

.hero-content{
    padding:30px;
    border-radius:20px;
}

.hero-content span{
    font-size:13px;
    letter-spacing:2px;
}

.hero-content h1{
    font-size:34px;
}

.hero-content p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
}

.btn-primary,
.btn-outline{
    width:100%;
    text-align:center;
}

}

@media(max-width:480px){

.hero-slider{
    height:70vh;
}

.hero-content{
    padding:22px;
}

.hero-content h1{
    font-size:28px;
}

.hero-content p{
    font-size:15px;
}

}


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

.footer{
    position: relative;
    background: #fff;
    color:#0a7cff;
    overflow:hidden;
    padding:80px 0 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 25%);
}

.footer::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(0,174,239,.08);
    border-radius:50%;
    top:-180px;
    left:-180px;
    filter:blur(20px);
}

.footer::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,.04);
    border-radius:50%;
    bottom:-120px;
    right:-120px;
}

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

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

.footer-top{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;
    gap:45px;
    /* margin-bottom:50px; */
}

.footer-column h3{
    color:#0a7cff;
    font-size:22px;
    margin-bottom:25px;
    position:relative;
    font-weight:700;
}

.footer-column h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:55px;
    height:3px;
    background:#000;
    border-radius:20px;
}

.footer-logo{
    color:#ffe200;
    font-size:32px;
    margin-bottom:20px;
    font-weight:700;
}

.footer-logo i{
    color:#0a7cff;
    margin-right:10px;
}

.footer-about p{
    line-height:1.9;
    color:#000;
    margin-bottom:25px;
    /* text-align:justify; */
}

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

.footer-badges{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.footer-badges span{
    background:#ffe200;
    color: black;
    padding:10px 18px;
    border-radius:30px;
    font-size:14px;
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
}

.footer-badges span:hover{
    background:#00c6ff;
    color:#fff;
    transform:translateY(-3px);
}

.footer-badges i{
    margin-right:8px;
}

/*==========================
        LINKS
==========================*/

.footer-column ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-column ul li{
    margin-bottom:14px;
    color: #000;
}

.footer-column ul li a{
    color:#000;
    text-decoration:none;
    transition:.3s;
    display:inline-block;
}

.footer-column ul li a:hover{
    color:#00c6ff;
    transform:translateX(8px);
}

/*==========================
     CONTACT
==========================*/

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    line-height:1.8;
    color:#d7e4f7;
}

.footer-contact i{
    color:#0a7cff;
    margin-top:6px;
    min-width:18px;
}

/*==========================
      SOCIAL
==========================*/

.footer-social{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.footer-social a{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:18px;
    transition:.4s;
}

.footer-social a:hover{
    background:#00c6ff;
    transform:translateY(-6px) rotate(360deg);
    box-shadow:0 10px 25px rgba(0,198,255,.45);
}

/*==========================
      BOTTOM
==========================*/

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.copyright{
    color:#000;
    font-size:15px;
    margin: auto;
}

.footer-links{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.footer-links a{
    color:#d6e3f5;
    text-decoration:none;
    transition:.3s;
}

.footer-links a:hover{
    color:#00c6ff;
}

.footer-social a {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-size: 18px;
    border-radius: 50%;
    text-decoration: none;
    background: #ffe200;
    transition: 0.4s;
}

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


/*=========================================
      PREMIUM MEDICAL TEAM SECTION
=========================================*/

.medical-team-area{
    padding:50px 0;
    background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
    position:relative;
    overflow:hidden;
}

.medical-team-area::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(0,153,255,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.medical-team-area::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(0,180,255,.05);
    border-radius:50%;
    bottom:-100px;
    right:-100px;
}

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

.team-heading{
    max-width:700px;
    margin:0 auto 70px;
    text-align:center;
    position:relative;
    z-index:2;
}

.team-subtitle{
    display:inline-block;
    padding:10px 24px;
    background:#eaf6ff;
    color:#0077ff;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
    margin-bottom:18px;
}

.team-heading h2{
    font-size:44px;
    color:#0d2340;
    margin-bottom:20px;
    font-weight:700;
}

.team-heading p{
    color:#6d7d93;
    line-height:1.8;
    font-size:16px;
}

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

.medical-team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    align-items:start;
}

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

.specialist-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    transition:.45s;
    box-shadow:0 20px 45px rgba(15,52,96,.08);
    position:relative;
}

.specialist-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,119,255,.18);
}

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

.specialist-image{
    position:relative;
    overflow:hidden;
}

.specialist-image img{
    width:100%;
    height:360px;
    object-fit:cover;
    display:block;
    transition:.6s;
}

.specialist-card:hover .specialist-image img{
    transform:scale(1.08);
}

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

.specialist-overlay{
    position:absolute;
    inset:0;
    /* background:linear-gradient(to top,rgba(0,55,120,.85),transparent); */
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:12px;
    padding-bottom:25px;
    opacity:0;
    transition:.4s;
}

.specialist-card:hover .specialist-overlay{
    opacity:1;
}

/* .specialist-overlay a{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#fff;
    color:#0077ff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.35s;
} */

.specialist-overlay a:hover{
    background:#009dff;
    color:#fff;
    transform:translateY(-5px) rotate(360deg);
}

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

.specialist-info{
    padding:30px;
    text-align:center;
    position:relative;
}

.speciality-tag{
    display:inline-block;
    padding:8px 20px;
    background:#ffe200;
    color:#fff;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
}

.specialist-info h3{
    font-size:27px;
    color:#0d2340;
    margin-bottom:8px;
    font-weight:700;
}

.specialist-info h5{
    color:#009dff;
    font-size:17px;
    margin-bottom:18px;
    font-weight:600;
}

.specialist-info p{
    color:#000;
    line-height:1.8;
    font-size:15px;
}

/*=========================================
        HOVER TOP BORDER
=========================================*/

.specialist-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:5px;
    background:linear-gradient(90deg,#00b7ff,#006dff);
    transition:.45s;
}

.specialist-card:hover::before{
    width:100%;
}


/*=============================
    INSURANCE SECTION
==============================*/

.eh-insurance-area{
    padding:50px 0;
    background:#f7fbff;
    overflow:hidden;
}

.eh-insurance-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

.eh-insurance-header span{
    display:inline-block;
    padding:10px 25px;
    background:#e8f5ff;
    color:#0d8eff;
    border-radius:40px;
    font-size:15px;
    font-weight:600;
    margin-bottom:18px;
}

.eh-insurance-header h2{
    font-size:42px;
    color:#0b2f52;
    margin-bottom:20px;
}

.eh-insurance-header p{
    color:#666;
    line-height:1.8;
}

/*=============================
        LOGO SLIDER
==============================*/

.eh-logo-slider{

    position:relative;
    overflow:hidden;
    margin:50px 0;
}

.eh-logo-slider::before,
.eh-logo-slider::after{

    content:"";
    position:absolute;
    top:0;
    width:140px;
    height:100%;
    z-index:5;
}

.eh-logo-slider::before{

    left:0;
    background:linear-gradient(to right,#f7fbff,transparent);

}

.eh-logo-slider::after{

    right:0;
    background:linear-gradient(to left,#f7fbff,transparent);

}

.eh-logo-track{

    display:flex;
    width:max-content;
    animation:scrollLogo 28s linear infinite;

}

.eh-logo-slider:hover .eh-logo-track{

    animation-play-state:paused;

}

.eh-logo-item{

    width:220px;
    height:120px;
    margin:0 18px;
    background:#fff;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.4s;

}

.eh-logo-item:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,140,255,.18);

}

.eh-logo-item img{

    max-width:140px;
    max-height:70px;
    object-fit:contain;
    /* filter:grayscale(100%); */
    transition:.4s;

}

.eh-logo-item:hover img{

    filter:grayscale(0);

}

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

.eh-insurance-btn{

    text-align:center;
    margin-top:45px;

}

.eh-insurance-btn a{

    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 35px;
    background:linear-gradient(135deg,#00a6ff,#005bea);
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.4s;

}

.eh-insurance-btn a:hover{

    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,100,255,.3);

}

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

@keyframes scrollLogo{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*==========================
      WELCOME SECTION
==========================*/

.eh-about-intro{
    padding:50px 0;
    background:#f8fbff;
}

.eh-about-wrapper{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    align-items:center;
    gap:70px;
}

.eh-about-tag{
    display:inline-block;
    padding:10px 24px;
    background:#eaf6ff;
    color:#0088ff;
    border-radius:40px;
    font-weight:600;
    margin-bottom:20px;
}

.eh-about-content{

    /* position: relative;
    z-index: 10; */

    padding: 45px;
    width: 90%;
    border-radius: 30px;

    /* background: rgba(255,255,255,0.12); */

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

    /* border: 1px solid rgba(255,255,255,0.25); */

    box-shadow:
    0 0px 10px rgba(255,255,255,20%),
    inset 0 0px 0px rgba(255,255,255,.25);

    overflow: hidden;

}

.eh-about-content h2{
    font-size:35px;
    color:#fff;
    line-height:1.25;
    margin-bottom:25px;
}

.eh-about-content h2 span{
    color:#0099ff;
}

.eh-about-content p{
    font-size:15px;
    color:#fff;
    line-height:1.9;
    margin-bottom:35px;
}

.eh-about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    /* margin-bottom:40px; */
}

.eh-feature-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:#ffffff2b;
    padding:10px 15px;
    border-radius:16px;
    box-shadow:0 12px 35px rgba(0,0,0,.07);
    transition:.35s;
}

.eh-feature-box:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,120,255,.15);
}

.eh-feature-box i{
    width:40px;
    height:40px;
    background:#ffe200;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.eh-feature-box span{
    font-weight:600;
    color:#000;
}

.eh-about-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
    background:#0a7cff;
    padding:16px 34px;
    border-radius:50px;
    font-weight:600;
    transition:.35s;
}

.eh-about-btn:hover{
    transform:translateY(-5px);
    /* box-shadow:0 18px 35px rgba(0,120,255,.3); */
}

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

.eh-about-image{
    position:relative;
}

.eh-about-image img{
    width:100%;
    height: 80vh;
    border-radius:25px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    transition:.5s;
}

.eh-about-image:hover img{
    transform:scale(1.03);
}

/* Decorative Box */

/* .eh-about-image::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:#00a6ff;
    border-radius:25px;
    top:-20px;
    left:-20px;
    z-index:-1;
    opacity:.15;
} */



/*=============================
Insurance Partners
=============================*/

.insurance-partners{
    padding:50px 0;
    background:#f5f9ff;
    position:relative;
}

.insurance-partners .container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

.insurance-partners .section-title{
    text-align:center;
    margin-bottom:60px;
}

.insurance-partners .section-title h2{
    font-size:42px;
    color:#14213d;
    font-weight:700;
    position:relative;
    display:inline-block;
    padding-bottom:15px;
}

.insurance-partners .section-title h2::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:90px;
    height:4px;
    border-radius:20px;
    background:#00b4d8;
}

/*=============================
Grid
=============================*/

.insurance-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

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

.insurance-card{
    background:#fff;
    border-radius:18px;
    padding:30px 25px;
    min-height:140px;

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

    font-size:17px;
    font-weight:600;
    color:#000;
    line-height:1.7;

    border:1px solid rgba(0,180,216,.15);

    box-shadow:0 2px 20px rgba(20,33,61,15%);

    transition:.4s ease;
    position:relative;
    overflow:hidden;
}

.insurance-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:5px;
    background:#ffe200;
    transition:.4s;
}

.insurance-card:hover::before{
    left:0;
}

.insurance-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(20,33,61,.18);
    border-color:#ffe200;
}


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

.eh-topbar{
    width:100%;
    background:#0a7cff;
    padding:10px 20px;
    box-sizing:border-box;
}

.eh-wrapper{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.eh-contact{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
}

.eh-contact a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:6px;
}

.eh-social{
    display:flex;
    gap:15px;
}

.eh-social a{
    color:#fff;
    font-size:18px;
    text-decoration:none;
    transition:.3s;
}

.eh-social a:hover{
    color:#ffd700;
}

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

.evan-about-sec{
    padding:80px 20px;
    background:#fff;
}

.evan-about-container{
    max-width:1200px;
    margin:auto;
}

.evan-about-grid{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

/* Left */

.evan-about-left{
    flex:1;
    position:relative;
}

.evan-main-image img{
    width:100%;
    border-radius:20px;
    display:block;
}

.evan-small-image{
    position:absolute;
    width:220px;
    right:-20px;
    bottom:-30px;
}

.evan-small-image img{
    width:100%;
    border-radius:15px;
}

.evan-exp-box{
    position:absolute;
    top:20px;
    left:-20px;
    background:#0a7cff;
    color:#fff;
    padding:20px;
    border-radius:15px;
    width:170px;
    text-align:center;
}

.evan-exp-box h2{
    font-size:40px;
}

.evan-ceo-box{
    position:absolute;
    left:-20px;
    bottom:40px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 18px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.evan-ceo-box img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
}

/* Right */

.evan-about-right{
    flex:1;
}

.evan-tag{
    color:#0a7cff;
    font-weight:700;
    letter-spacing:1px;
}

.evan-about-right h2{
    font-size:42px;
    margin:20px 0;
    line-height:1.3;
}

.evan-about-right p{
    line-height:1.8;
    color:#555;
}

.evan-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:30px 0;
}

.evan-feature-grid div{
    display:flex;
    align-items:center;
    gap:10px;
}

.evan-feature-grid i{
    color:#0a7cff;
}

.evan-counter-box{
    display:flex;
    gap:20px;
    margin:35px 0;
}

.evan-counter-box div{
    flex:1;
    background:#ffe200;
    text-align:center;
    padding:20px;
    border-radius:15px;
}
.evan-counter-box div h3{
    font-size:30px;
    color:#fff;
    margin-bottom:8px;
}
.evan-counter-box div span{
    color:#fff;
    font-weight:600;
} 

.evan-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#0a7cff;
    color:#fff;
    padding:14px 28px;
    text-decoration:none;
    border-radius:50px;
}



.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.doctor-schedule {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    background: #fff;
}

.doctor-schedule th,
.doctor-schedule td {
    border: 1px solid #ddd;
    padding: 14px;
    text-align: center;
    font-size: 16px;
}

.doctor-schedule th {
    background: #0a7cff;
    color: #fff;
}

.doctor-schedule tr:nth-child(even) {
    background: #f8f8f8;
}

.doctor-schedule tr:hover {
    background: #eef9f5;
}

/* Responsive Table */
.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.opd-table{
    width:100%;
    border-collapse:collapse;
    min-width:500px;
    background:#fff;
}

.opd-table th{
    background:#0a7cff;
    color:#fff;
    padding:14px;
    text-align:center;
    font-size:17px;
}

.opd-table td{
    padding:14px;
    text-align:center;
    border:1px solid #e5e5e5;
    font-size:16px;
}

.opd-table tr:nth-child(even){
    background:#f8f8f8;
}

.opd-table tr:hover{
    background:#eef9f5;
}





footer{
    background:#000;
    color:#fff;
}

.footer-top{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.4fr;
    gap:40px;
    padding:30px 0 0px;
}

.footer-column h3{
    color:#0a7cff;
    font-size:24px;
    margin-bottom:25px;
    position:relative;
}

.footer-column h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:60px;
    height:3px;
    background:#0a7cff;
}

.footer-logo{
    color:#0a7cff;
    font-size:32px;
    margin-bottom:20px;
}

.footer-logo i{
    color:#0a7cff;
}

.footer-about p{
    color:#000;
    line-height:1.9;
    margin-bottom:25px;
}

/*==========================
    Badges
==========================*/

.footer-badges{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.footer-badges span{
    background:#0ffe200;
    color:#fff;
    padding:8px 15px;
    border-radius:30px;
    font-size:14px;
    transition:.3s;
}

.footer-badges span:hover{
    background:#0a7cff;
    color:#000;
}

/*==========================
    Links
==========================*/

.footer-column ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-column ul li{
    margin-bottom:14px;
}

.footer-column ul li a{
    color:#000;
    text-decoration:none;
    transition:.3s;
}

.footer-column ul li a:hover{
    color:#ffe200;
    padding-left:8px;
}

/*==========================
    Contact
==========================*/

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#ddd;
    line-height:1.7;
}

.footer-contact li i{
    color:#0a7cff;
    min-width:18px;
    margin-top:4px;
}

/*==========================
    Social
==========================*/

.footer-social{
    display:flex;
    gap:12px;
    margin-top:25px;
    flex-wrap:wrap;
}

.footer-social a{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#ffe200;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    transition:.3s;
    font-size:18px;
}

.footer-social a:hover{
    background:#ffe200;
    color:#000;
    transform:translateY(-5px);
}

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

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 0;
    gap:20px;
}

.copyright{
    color:#bbb;
}

.footer-links{
    display:flex;
    gap:20px;
}

.footer-links a{
    color:#ddd;
    text-decoration:none;
}

.footer-links a:hover{
    color:#ffe200;
}



/*====================================
      Cardiology Department Page
====================================*/

.department-details{
    background:url(/images/cardiology-ultromics.jpg) center/cover;
    
    padding:100px 0;
    color:#fff;
    text-align:center;
}

.department-header{
    max-width:900px;
    margin:auto;
}

.department-header span{
    display:inline-block;
    background:#0a7cff;
    color:#fff;
    padding:8px 20px;
    border-radius:30px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:20px;
}

.department-header h1{
    font-size:50px;
    margin-bottom:20px;
    font-weight:700;
}

.department-header p{
    font-size:18px;
    line-height:1.8;
}

/*==============================
        Sections
==============================*/

.department-section{
    padding:40px 0;
}

.bg-light{
    background:#f8fbff;
}

.section-title{
    text-align:center;
    margin-bottom:45px;
}

.section-title h2{
    font-size:38px;
    color:#000;
    position:relative;
    display:inline-block;
}

.section-title h2::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-12px;
    width:80px;
    height:4px;
    background:#0a7cff;
    border-radius:10px;
}

.department-section p{
    font-size:17px;
    color:#666;
    line-height:1.9;
}

/*==============================
        List Grid
==============================*/

.list-grid ul{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px 30px;
    list-style:none;
    padding:0;
    margin:0;
}

.list-grid li{
    background:#fff;
    padding:16px 20px;
    border-left:5px solid #0a7cff;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:.3s;
    font-weight:500;
}

.list-grid li:hover{
    background:#ffe200;
    color:#fff;
    transform:translateX(8px);
}

/*==============================
      Diagnostic Cards
==============================*/

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

.service-card{
    background:#fff;
    padding:30px 25px;
    border-radius:15px;
    box-shadow:0 12px 25px rgba(0,0,0,.08);
    text-align:center;
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-8px);
}

.service-card h3{
    color:#0a7cff;
    font-size:22px;
    margin-bottom:15px;
    margin-top:10px;
}

.service-card p{
    font-size:15px;
    color:#666;
}

/*==============================
      Appointment CTA
==============================*/

.department-cta{
    background:#0a7cff;
    color:#fff;
    padding:80px 0;
    text-align:center;
}

.department-cta h2{
    font-size:42px;
    margin-bottom:20px;
}

.department-cta p{
    max-width:700px;
    margin:auto auto 30px;
    line-height:1.8;
    color:#fff;
}

.primary-btn{
    display:inline-block;
    padding:15px 35px;
    background:#0a7cff;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    border-radius:40px;
    transition:.3s;
}

.primary-btn:hover{
    background:#ffe200;
    color:#000;
}




/* Common Banner */

.department-details{
    position: relative;
    padding: 50px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    

}

.department-details::before{
    content: "";
    position: absolute;
    inset: 0;
    /* background: rgba(10,124,255,0.75); */
}

.department-details .container{
    position: relative;
    z-index: 2;
}

/* Neurology Banner */

.neurology-banner{
    background-image: url("/images/brain.jpg");
}

.orthopaedics-banner{
    background-image:
    /* linear-gradient(rgba(10,124,255,.75),rgba(10,124,255,.75)), */
    url("/images/ortho.jpg");
    background-size:cover;
    background-position:center;
}


.paediatrics-banner{
    background-image:
    /* linear-gradient(rgba(10,124,255,.75),rgba(10,124,255,.75)), */
    url("/images/PAEDIATRI.jpg");
    background-size: cover;
    background-position: center;
}



/*=====================================
  Obstetrics & Gynaecology Banner
=====================================*/

.gynecology-banner {
   
    background:url("/images/gynecology.jpg");
    background-size: cover;
    background-position: center;
}

@media (max-width: 991px) {
    .gynecology-banner {
        padding: 130px 0 90px;
        background-position: center center;
    }
}

@media (max-width: 576px) {
    .gynecology-banner {
        padding: 110px 0 80px;
        background-position: center;
    }
}
/*=====================================
  Pulmonology Banner
=====================================*/

.pulmonology-banner {
  
    background: url("/images/pulmonology.jpg");
    background-size: cover;
    background-position: center;
    
}

.critical-care-banner {
    
    background:url("/images/critical-care-banner.jpg");
    background-size: cover;
    background-position:center;
   
}


.ent-banner{
    background: url("/images/ENT.jpg");
     background-size: cover;
     background-position:center;
}





/*==================================
    Floating Contact Buttons
===================================*/

.floating-contact{
    position: fixed;
    right: 25px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}

/* Common Style */

.floating-contact a{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    transition: .3s;
}

/* WhatsApp */

.whatsapp-btn{
    background: #25D366;
}

/* Call */

.call-btn{
    background: #0a7cff;
}

/* Hover */

.floating-contact a:hover{
    transform: translateY(-5px) scale(1.08);
}

/* Pulse Animation */

.whatsapp-btn,
.call-btn{
    animation: pulse 2s infinite;
}

@keyframes pulse{

    0%{
        box-shadow: 0 0 0 0 rgba(0,0,0,.25);
    }

    70%{
        box-shadow: 0 0 0 15px rgba(0,0,0,0);
    }

    100%{
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }

}

/*==================================
    Premium Emergency Button
===================================*/

.emergency-btn{

    position:fixed;

    left:85px;

    bottom:30px;

    width:240px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:12px 18px;

    background:linear-gradient(135deg,#ff0000,#b30000);

    color:#fff;

    text-decoration:none;

    border-radius:60px;

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

    z-index:9999;

    overflow:hidden;

    animation:emergencyPulse 1.5s infinite;

    transition:.3s;

}

.emergency-btn:hover{

    transform:translateY(-5px);

    color:#fff;

}

.emergency-icon{

    width:60px;

    height:60px;

    min-width:60px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.emergency-icon i{

    color:#e60000;

    font-size:28px;

}

.emergency-content{

    display:flex;

    flex-direction:column;

}

.emergency-content span{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    opacity:.9;

}

.emergency-content strong{

    font-size:15px;

    font-weight:700;

}

/* Flash Animation */

@keyframes emergencyPulse{

0%{

box-shadow:0 0 0 0 rgba(255,0,0,.7);

}

70%{

box-shadow:0 0 0 20px rgba(255,0,0,0);

}

100%{

box-shadow:0 0 0 0 rgba(255,0,0,0);

}

}





.surgery-banner{
    
    background: url("/images/surgery1.jpg") center center/cover no-repeat;
}
.internal-banner{
    background: url("/images/medicine.jpg") center center/cover no-repeat;
}
.gastro-banner{
   
    background:url("/images/liver.png") center center/cover no-repeat;
}





/*==============================
PATIENT REGISTRATION
===============================*/

.patient-registration{
    padding:50px 0;
    background:linear-gradient(135deg,#f5faff,#eef6ff);
}

.patient-registration .container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.patient-registration form{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    background:#fff;
    padding:45px;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.form-header{
    text-align:center;
    margin-bottom:40px;
}

.form-header h2{
    font-size:40px;
    font-weight:700;
    color:#0a7cff;
    margin-bottom:12px;
}

.form-header p{
    color:#666;
    font-size:17px;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

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

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-size:15px;
    font-weight:600;
    color:#222;
    margin-bottom:8px;
}

.full-width{
    grid-column:1/-1;
}

/*==============================
INPUTS
===============================*/

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;
    padding:15px 18px;
    border:1px solid #d8e2ef;
    border-radius:12px;
    outline:none;
    font-size:15px;
    transition:.35s;
    background:#fafcff;
}

.form-group textarea{
    resize:vertical;
    min-height:120px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#0a7cff;
    background:#fff;
    box-shadow:0 0 0 4px rgba(10,124,255,.12);

}

/*==============================
FILE INPUT
===============================*/

input[type=file]{
    background:#fff;
    padding:12px;
}

/*==============================
SELECT
===============================*/

select{
    cursor:pointer;
}

/*==============================
CONSENT
===============================*/

.consent{

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

}

.consent label{

    display:flex;
    gap:12px;
    line-height:1.7;
    color:#444;
    cursor:pointer;

}

.consent input{

    width:18px;
    height:18px;
    margin-top:4px;

}

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

button[type=submit]{

    width:100%;
    padding:18px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#0a7cff,#005bea);
    color:#fff;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
    letter-spacing:.5px;

}

button[type=submit]:hover{

    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(10,124,255,.35);

}

/*==============================
PLACEHOLDER
===============================*/

::placeholder{

    color:#999;

}

/*==============================
SCROLLBAR
===============================*/

textarea::-webkit-scrollbar{
    width:8px;
}

textarea::-webkit-scrollbar-thumb{
    background:#0a7cff;
    border-radius:10px;
}



.form-header p{

font-size:15px;

}

button[type=submit]{

font-size:16px;

padding:12px;

}



.eh-about-intro{
    position:relative;
    overflow:hidden;
    padding:50px 0;
    color:#fff;
}

/* Background Video */
.bg-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2;
}

/* Dark Overlay */
.video-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    /* z-index:-1; */
    background:
linear-gradient(rgba(0,0,0,25%), rgba(0,0,0,25%)),
url("/images/evan1.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    /* filter:blur(8px);
    transform:scale(1.08); */
       
}



/* Keep content above video */
.container{
    position:relative;
    z-index:2;
}





.testimonial{

padding:100px 0;

background:#f5f9ff;

overflow:hidden;

}

.title{

text-align:center;

margin-bottom:60px;

}

.title span{

background:#FFE200;
color: #fff;

padding:8px 18px;

border-radius:30px;

font-weight:600;

}

.title h2{

font-size:42px;

margin:20px 0;

color:#0a7cff;

}

.mySwiper{

padding:70px 0;

}

.swiper-slide{

width:340px;

transition:.5s;

}

.review-card{

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

backdrop-filter:blur(12px);

border-radius:25px;

padding:35px;

text-align:center;

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

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

transition:.4s;

}

.review-card img{

width:95px;

height:95px;

border-radius:50%;

border:4px solid #FFE200;

object-fit:cover;

margin-bottom:20px;

}

.review-card h3{

margin-bottom:5px;

color:#0A2B5C;

}

.review-card span{

color:#777;

display:block;

margin-bottom:15px;

}

.stars{

font-size:22px;

color:#FFD700;

margin-bottom:18px;

}

.review-card p{

line-height:1.8;

color:#555;

}

/* Active Card */

.swiper-slide-active .review-card{

transform:scale(1.12);

background:#fff;

box-shadow:0 25px 50px rgba(10,124,255,.25);

-webkit-box-reflect:
below 10px
linear-gradient(
transparent,
rgba(255,255,255,.08)
);

}

/* Side Cards */

.swiper-slide-prev .review-card,
.swiper-slide-next .review-card{

opacity:.85;

transform:scale(.9);

}

.swiper-button-next,
.swiper-button-prev{

color:#0A7CFF;

}

.swiper-pagination-bullet-active{

background:#0A7CFF;

}



/*==================================================
        READ MORE BUTTON
==================================================*/

.read-more-btn{
    width:100%;
    margin-top:15px;
    padding:12px 18px;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg,#0A7CFF,#005CE6);
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    transition:.35s;
    box-shadow:0 8px 18px rgba(10,124,255,.20);
}

.read-more-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 30px rgba(10,124,255,.30);
}

.read-more-btn .arrow{
    transition:.35s;
    font-size:13px;
}

.read-more-btn.active .arrow{
    transform:rotate(180deg);
}


/*==================================================
        BIOGRAPHY
==================================================*/

.doctor-bio{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.doctor-bio p{

    margin-top:18px;

    color:#666;

    font-size:15px;

    line-height:1.8;

    

}


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

.specialist-card{

    transition:.35s;

}

.specialist-card:hover{

    transform:translateY(-8px);

}


/*==================================================
        WHEN OPEN
==================================================*/

.specialist-card.active{

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

}

.specialist-card.active .specialist-info h3{

    color:#0A7CFF;

}


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

@media(max-width:768px){

.read-more-btn{

    padding:10px 14px;

    font-size:14px;

}

.doctor-bio p{

    font-size:14px;

}

}

/*==========================
        CEO MODAL
===========================*/

.ceo-modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.ceo-modal.show{

    opacity:1;

    visibility:visible;

}

.ceo-modal-content{

    width:90%;

    max-width:700px;

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

    position:relative;

    animation:popup .35s ease;

    max-height:90vh;

    overflow:auto;

}

@keyframes popup{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.ceo-modal-content img{

    width:170px;

    height:170px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid #0A7CFF;

    margin-bottom:20px;

}

.ceo-modal-content h2{

    margin-bottom:5px;

}

.ceo-modal-content h4{

    color:#0A7CFF;

    margin-bottom:20px;

}

.ceo-modal-content p{

    color:#666;

    line-height:1.2;

    /*text-align:justify;*/

    margin-bottom:15px;

}

.close-ceo{

    position:absolute;

    right:20px;

    top:15px;

    font-size:32px;

    cursor:pointer;

    color:#333;

}

.close-ceo:hover{

    color:red;

}

@media(max-width:768px){

.ceo-modal-content{

    padding:25px;

}

.ceo-modal-content img{

    width:120px;

    height:120px;

}

}


.evan-benefits-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

    margin-top:45px;

}

.evan-benefit-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#fff;

    padding:28px;

    border-radius:22px;

    overflow:hidden;

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

    box-shadow:0 12px 35px rgba(0,0,0,.07);

    transition:.45s ease;

}

.evan-benefit-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:linear-gradient(180deg,#0A7CFF,#00C6FF);

    transform:scaleY(0);

    transform-origin:top;

    transition:.4s;

}

.evan-benefit-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    right:-90px;

    top:-90px;

    transition:.4s;

}

.evan-benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(10,124,255,.18);

}

.evan-benefit-card:hover::before{

    transform:scaleY(1);

}

.evan-benefit-card:hover::after{

    transform:scale(1.3);

}

.evan-benefit-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:50%;

    background:#ffe200;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:30px;

    box-shadow:0 2px 25px rgba(10,124,255,10%);

    transition:.45s;

}

.evan-benefit-card:hover .evan-benefit-icon{

    transform:rotateY(180deg) scale(1.08);

}

.evan-benefit-content{

    flex:1;

}

.evan-benefit-content h4{

    margin:0 0 10px;

    font-size:22px;

    color:#222;

    font-weight:700;

}

.evan-benefit-content p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.8;

}

/* Mobile */

@media(max-width:768px){

.evan-benefits-grid{

    grid-template-columns:1fr;

}

.evan-benefit-card{

    padding:22px;
    display: flex;
        flex-direction: column;

}

.evan-benefit-icon{

    width:60px;

    height:60px;

    min-width:60px;

    font-size:24px;

}

.evan-benefit-content h4{

    font-size:19px;

}

.evan-benefit-content p{

    font-size:14px;

}

}




/*==========================================
        EVAN FLOATING FACILITIES
==========================================*/

.evan-facility-wrapper{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:50px;

}

.evan-facility-box{

    position:relative;

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

    backdrop-filter:blur(12px);

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    overflow:hidden;

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

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.45s;

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

}

/* Different floating timing */

.evan-facility-box:nth-child(2){
    animation-delay:.5s;
}

.evan-facility-box:nth-child(3){
    animation-delay:1s;
}

.evan-facility-box:nth-child(4){
    animation-delay:1.5s;
}

.evan-facility-box:nth-child(5){
    animation-delay:2s;
}

.evan-facility-box:nth-child(6){
    animation-delay:2.5s;
}

/* Floating Animation */

@keyframes facilityFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/* Top Gradient */

.evan-facility-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#0A7CFF,#19B5FE,#00D4FF);

}

/* Glow Circle */

.evan-facility-box::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    right:-90px;

    top:-90px;

    transition:.45s;

}

/* Hover */

.evan-facility-box:hover{

    transform:translateY(-15px) scale(1.03);

    box-shadow:0 30px 60px rgba(10,124,255,.20);

}

.evan-facility-box:hover::after{

    transform:scale(1.4);

}

/* Icon */

.evan-facility-icon{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#0A7CFF,#28A9FF);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:34px;

    box-shadow:0 15px 35px rgba(10,124,255,.30);

    transition:.4s;

}

.evan-facility-box:hover .evan-facility-icon{

    transform:rotateY(180deg) scale(1.1);

}

.evan-facility-box h3{

    margin:25px 0 15px;

    color:#222;

    font-size:24px;

    font-weight:700;

}

.evan-facility-box p{

    color:#666;

    font-size:15px;

    line-height:1.8;

}

/* Responsive */

@media(max-width:768px){

.evan-facility-wrapper{

    grid-template-columns:1fr;

}

.evan-facility-box{

    padding:30px 25px;

}

.evan-facility-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

.evan-facility-box h3{

    font-size:20px;

}
}
.ev-facilities-section{

padding:50px 0;

background:#f7fbff;

overflow:hidden;

}



.ev-sec-title{

text-align:center;

max-width:750px;

margin:auto auto 90px;

}



.ev-sec-title span{

color:#0A7CFF;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}



.ev-sec-title h2{

font-size:48px;

margin:15px 0;

font-weight:800;

color:#0d1b2a;

}



.ev-sec-title p{

font-size:18px;

color:#666;

line-height:1.8;

}



.ev-facility-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

margin-bottom:120px;

}



.ev-facility-row.reverse{

flex-direction:row-reverse;

}



.ev-facility-image{

flex:1;

position:relative;

overflow:hidden;

border-radius:30px;

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

}



.ev-facility-image img{

width:100%;

display:block;

transition:.8s;

}



.ev-facility-image:hover img{

transform:scale(1.08);

}



.ev-image-shine{

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

transition:1.2s;

}



.ev-facility-image:hover .ev-image-shine{

left:150%;

}



.ev-facility-content{

flex:1;

}



.ev-small-title{

display:inline-block;

padding:8px 18px;

background:#e8f4ff;

border-radius:30px;

font-size:14px;

font-weight:700;

color:#0A7CFF;

margin-bottom:15px;

}



.ev-facility-icon{

width:80px;

height:80px;

border-radius:20px;

background:linear-gradient(135deg,#0A7CFF,#36c3ff);

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#fff;

margin-bottom:25px;

box-shadow:0 20px 45px rgba(10,124,255,.35);

}



.ev-facility-icon.emergency{

background:linear-gradient(135deg,#ff4d4d,#ff9a3d);

}



.ev-facility-content h3{

font-size:38px;

margin-bottom:20px;

color:#111;

}



.ev-facility-content p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:25px;

}



.ev-facility-content ul{

padding:0;

list-style:none;

}



.ev-facility-content li{

margin:15px 0;

font-size:17px;

font-weight:600;

}



.ev-facility-content li i{

color:#18c964;

margin-right:10px;

}


.ev-scroll{

opacity:0;

transform:translateY(80px);

transition:1s ease;

}

.ev-scroll.show{

opacity:1;

transform:translateY(0);

}
.ev-facility-image{

position:relative;

}

.ev-facility-image::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

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

top:-60px;

right:-60px;

filter:blur(70px);

transition:.5s;

}

.ev-facility-row:hover .ev-facility-image::before{

transform:scale(1.2);

}

/* Floating Medical Icon */

.ev-facility-icon{

animation:facilityFloat 4s ease-in-out infinite;

}

@keyframes facilityFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/*==============================
    PREMIUM FACILITY SECTION
===============================*/

.ev-premium-facilities{
    padding:50px 0;
    background:#f8fbff;
}

.ev-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.ev-section-heading{
    text-align:center;
    margin-bottom:70px;
}

.ev-tag{
    display:inline-block;
    padding:8px 22px;
    background:#eaf4ff;
    color:#0A7CFF;
    border-radius:30px;
    font-weight:600;
    margin-bottom:15px;
}

.ev-section-heading h2{
    font-size:42px;
    margin:15px 0;
    color:#0d1b2a;
}

.ev-section-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.ev-facility-box{
    display:flex;
    align-items:center;
    gap:60px;
    margin-bottom:80px;
}

.ev-facility-box.reverse{
    flex-direction:row-reverse;
}

.ev-image{
    flex:1;
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

.ev-image img{
    width:100%;
    display:block;
    transition:.5s;
}

.ev-image:hover img{
    transform:scale(1.08);
}

.ev-overlay{
    position:absolute;
    inset:0;
    /* background:rgba(0,0,0,.25); */
}

.ev-number{
    position:absolute;
    top:20px;
    left:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#fff;
    color:#0A7CFF;
    font-size:24px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.ev-content{
    flex:1;
}

.ev-content span{
    color:#0A7CFF;
    font-weight:600;
}

.ev-content h3{
    font-size:34px;
    margin:15px 0;
    color:#222;
}

.ev-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:20px;
}

.ev-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.ev-list div{
    font-weight:500;
}

.ev-list i{
    color:#17b857;
    margin-right:8px;
}

.ev-bottom-banner{
    background:linear-gradient(135deg,#0A7CFF,#28b7ff);
    color:#fff;
    border-radius:20px;
    padding:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.ev-bottom-banner h3{
    margin-bottom:10px;
    font-size:28px;
}

.ev-bottom-banner p{
    opacity:.9;
}

.ev-bottom-banner a{
    background:#fff;
    color:#0A7CFF;
    padding:14px 30px;
    border-radius:40px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.ev-bottom-banner a:hover{
    background:#ffe200;
    color:#000;
}

/* Responsive */



.value-card i{
    animation: bounce 1.5s ease-in-out infinite;
}

@keyframes bounce{
    0%,100%{
        transform: translateY(0);
    }
    30%{
        transform: translateY(-12px);
    }
    60%{
        transform: translateY(4px);
    }
}

.health-package-section{
    padding:80px 0;
    background:#f8fbff;
}

.health-package-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    background:#fff;
    border-radius:20px;
    padding:45px 50px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border-left:8px solid #ffe200;
    position:relative;
    overflow:hidden;
}

.health-package-box::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:#0a7cff10;
    border-radius:50%;
    right:-70px;
    top:-70px;
}

.package-content{
    max-width:700px;
    position:relative;
    z-index:2;
}

.package-content span{
    color:#0a7cff;
    font-weight:700;
    font-size:14px;
    letter-spacing:2px;
}

.package-content h2{
    margin:15px 0;
    font-size:42px;
    color:#222;
}

.package-content p{
    color:#666;
    line-height:1.8;
    font-size:17px;
}

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

.package-btn a{
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    padding:18px 35px;
    background:#0a7cff;
    color:#fff;
    border-radius:60px;
    font-weight:600;
    transition:.4s;
}

.package-btn a:hover{
    background:#ffe200;
    color:#000;
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(0,0,0,.18);
}

.package-btn i{
    transition:.4s;
}

.package-btn a:hover i{
    transform:translateX(8px);
}










.hpk-block {
            padding: 50px 0 50px;
            background: var(--black);
            position: relative;
        }

        /* Single subtle top glow — no noise, no dots, no wires */
        .hpk-block::before {
            content: '';
            position: absolute;
            top: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 700px;
            height: 350px;
            background: radial-gradient(ellipse, rgba(10,124,255,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .hpk-wrap {
            max-width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* ── Header ── */
        .hpk-header { text-align: center; margin-bottom: 60px; }

        .hpk-tag {
            display: inline-block;
            font-family: 'Outfit', sans-serif;
            /* font-size: 11px; */
            font-weight: 700;
            /* letter-spacing: 3px; */
            color:#0a7cff;
            text-transform: uppercase;
            padding: 7px 18px;
            background: #eef7ff;
            border: 1px solid rgba(255,226,0,0.12);
            border-radius: 100px;
            margin-bottom: 18px;
        }

        .hpk-title {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(32px, 4.5vw, 50px);
            font-weight: 800;
            letter-spacing: -1.5px;
            line-height: 1.15;
            color: #000;
        }

        .hpk-accent {
            background: linear-gradient(135deg, var(--gold), #ffcc00);
            -webkit-background-clip: text;
            /* -webkit-text-fill-color: transparent; */
            background-clip: text;
        }

        .hpk-sub {
            margin-top: 14px;
            font-size: 16px;
            color: var(--muted);
            max-width: 480px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }

        /* ── Grid ── */
        .hpk-rows {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            align-items: start;
        }

       

        /* ── Card ── */
        .hpk-tile {
            background: #0a0a0a;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 20px;
            padding: 36px 28px 32px;
            display: flex;
            flex-direction: column;
            transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        }

        .hpk-tile:hover {
            transform: translateY(-6px);
            border-color: rgba(10,124,255,0.18);
            box-shadow: 0 20px 50px -15px rgba(10,124,255,0.12);
        }

        /* Featured */
        .hpk-tile--hero {
            border-color: rgba(255,226,0,0.14);
            background: linear-gradient(170deg, #0c0f14 0%, #0a0a0a 50%, #0e0c04 100%);
            padding: 44px 28px 36px;
            position: relative;
        }

        .hpk-tile--hero:hover {
            transform: translateY(-6px);
            border-color: rgba(255,226,0,0.28);
            box-shadow: 0 24px 60px -15px rgba(255,226,0,0.1);
        }

        /* Badge */
        .hpk-ribbon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-family: 'Outfit', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 100px;
            background: #fff;
            color: var(--black);
        }

        /* Icon */
        .hpk-ico {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 22px;
            background-color: #0a7cff !important;
        }
        .hpk-ico i{
            color: white;
        }

        .hpk-tile:not(.hpk-tile--hero) .hpk-ico {
            background: rgba(10,124,255,0.07);
            color: var(--blue);
            border: 1px solid rgba(10,124,255,0.1);
        }

        .hpk-tile--hero .hpk-ico {
            background: rgba(255,226,0,0.08);
            color: var(--gold);
            border: 1px solid rgba(255,226,0,0.12);
        }

        /* Title */
        .hpk-name {
            font-family: 'Outfit', sans-serif;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.3px;
            margin-bottom: 10px;
            color: #fff;
        }

        /* Pills */
        .hpk-pills {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 100px;
            margin-bottom: 18px;
        }

        .hpk-tile:not(.hpk-tile--hero) .hpk-pills {
            background: #ff0000;
            color: #fff;
            border: 1px solid rgba(10,124,255,0.08);
        }

        .hpk-tile--hero .hpk-pills {
            background: rgb(255, 0, 0);
            color: #fff;
            border: 1px solid rgba(255,226,0,0.08);
        }

        /* Price */
        .hpk-rate {
            font-family: 'Outfit', sans-serif;
            font-size: 36px;
            font-weight: 900;
            letter-spacing: -2px;
            line-height: 1;
            margin-bottom: 6px;
            color: #0a7cff;
        }

        .hpk-tile--hero .hpk-rate {
            background: linear-gradient(135deg, var(--gold), #ffdd33);
            -webkit-background-clip: text;
            /* -webkit-text-fill-color: transparent; */
            background-clip: text;
            color: #0a7cff;
        }

        .hpk-meta {
            font-size: 12px;
            color: var(--muted);
            margin-bottom: 24px;
        }

        .hpk-crossed { text-decoration: line-through; margin-right: 5px; color: white; }
        .hpk-save { color: #34d399; font-weight: 600; }

        /* Divider */
        .hpk-rule {
            height: 1px;
            background: rgba(255,255,255,0.06);
            margin-bottom: 24px;
        }

        .hpk-tile--hero .hpk-rule {
            background: rgba(255,226,0,0.08);
        }

        /* List */
        .hpk-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 32px;
            flex: 1;
        }

        .hpk-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            color: #fff;
        }

        .hpk-list li i {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 10px;
            flex-shrink: 0;
        }

        .hpk-tile:not(.hpk-tile--hero) .hpk-list li i {
            background: #ffe200;
            color: #000;
        }

        .hpk-tile--hero .hpk-list li i {
            background: #ffe200;
            color: #000;
        }

        /* Button */
        .hpk-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 28px;
            border-radius: 12px;
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
            background-color: #0a7cff;
            color: white;
        }

        .hpk-tile:not(.hpk-tile--hero) .hpk-cta {
            background: #0a7cff;
            color: #fff;
        }

        .hpk-tile:not(.hpk-tile--hero) .hpk-cta:hover {
            background: #006ae6;
        }

        .hpk-tile--hero .hpk-cta {
            background: #0a7cff;
            color: #fff;
        }

        .hpk-tile--hero .hpk-cta:hover {
            background: #ffe200;
            color: #000;
        }

        .hpk-cta i {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .hpk-cta:hover i { transform: translateX(3px); }

        /* ── Footnote ── */
        .hpk-foot {
            text-align: center;
            margin-top: 48px;
        }

        .hpk-foot p {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 16px;
        }

        .hpk-foot a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 12px;
            font-family: 'Outfit', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--white);
            text-decoration: none;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.02);
            transition: all 0.3s ease;
        }

        .hpk-foot a:hover {
            border-color: rgba(255,255,255,0.16);
            background: rgba(255,255,255,0.04);
        }

        .hpk-foot a:hover i { transform: translateX(3px); }
        .hpk-foot a i { transition: transform 0.3s ease; }

        /* ── Simple fade-in ── */
        .hpk-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .hpk-up.show { opacity: 1; transform: translateY(0); }
        .hpk-up--d1 { transition-delay: 0.08s; }
        .hpk-up--d2 { transition-delay: 0.2s; }
        .hpk-up--d3 { transition-delay: 0.32s; }

     
        
.package-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.50);
    backdrop-filter: blur(5px);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:30px 15px;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:99999;
    overflow-y:auto;
}

.package-modal.active{
    opacity:1;
    visibility:visible;
}

.package-modal-box{
    width:100%;
    max-width:420px;
    background:#fff;
    border-radius:16px;
    padding:22px;
    position:relative;
    transform:translateY(-80px);
    opacity:0;
    transition:.45s ease;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.package-modal.active .package-modal-box{
    transform:translateY(0);
    opacity:1;
}

.close-package{
    position:absolute;
    top:12px;
    right:15px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#f2f2f2;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    font-size:18px;
    transition:.3s;
}

.close-package:hover{
    background:#0a7cff;
    color:#fff;
}

.package-modal h2{
    text-align:center;
    font-size:24px;
    color:#0a7cff;
    margin-bottom:18px;
}

.form-group{
    margin-bottom:12px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    height:44px;
    padding:0 15px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:14px;
    outline:none;
}

.form-group textarea{
    height:80px;
    padding:12px 15px;
    resize:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#0a7cff;
}

.submit-btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:8px;
    background:#0a7cff;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.submit-btn:hover{
    background:#ffe200;
    color:#000;
}

@media(max-width:576px){

    .package-modal{
        padding:20px 10px;
    }

    .package-modal-box{
        max-width:100%;
        padding:18px;
    }

    .package-modal h2{
        font-size:20px;
    }

}        



/* ==========================================
   PREMIUM PRELOADER
========================================== */

:root{
    --gold:#C9A84C;
    --gold-light:#E8D5A3;
    --gold-dark:#A08030;
    --cream:#FAF6EE;
    --dark:#090A10;
}

/* RESET */

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

/* ==========================================
   PRELOADER
========================================== */

#preloader{

    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

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

    overflow:hidden;

    background:var(--dark);

    z-index:999999;

    opacity:1;

    transform:translateY(0);

    transition:
        transform 1.2s cubic-bezier(.77,0,.18,1),
        opacity .8s ease;

}

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

.preloader-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.preloader-bg::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:420px;
    height:420px;

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

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(201,168,76,.08) 0%,
    transparent 70%);

    animation:breathe 5s ease infinite;

}

.preloader-bg::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:650px;
    height:650px;

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

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(201,168,76,.03) 0%,
    transparent 65%);

    animation:breathe 8s ease infinite reverse;

}

@keyframes breathe{

    0%,100%{

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

        opacity:1;

    }

    50%{

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

        opacity:.45;

    }

}

/* ==========================================
   PARTICLES
========================================== */

.particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.particle{

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:var(--gold);

    opacity:0;

    animation:floatParticle linear infinite;

}

@keyframes floatParticle{

    0%{

        transform:
        translateY(110vh)
        scale(.2);

        opacity:0;

    }

    20%{

        opacity:.8;

    }

    80%{

        opacity:.8;

    }

    100%{

        transform:
        translateY(-10vh)
        scale(1);

        opacity:0;

    }

}

/* ==========================================
   LIGHT RAYS
========================================== */

.light-rays{

    position:absolute;

    left:50%;
    top:50%;

    width:350px;
    height:350px;

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

    opacity:.08;

    animation:rotateRays 30s linear infinite;

}

.ray{

    position:absolute;

    left:50%;
    top:50%;

    width:1px;
    height:180px;

    background:

    linear-gradient(

    to top,

    transparent,

    var(--gold-light)

    );

    transform-origin:bottom center;

}

@keyframes rotateRays{

    from{

        transform:
        translate(-50%,-50%)
        rotate(0deg);

    }

    to{

        transform:
        translate(-50%,-50%)
        rotate(360deg);

    }

}

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

.preloader-content{
    position:relative;
    z-index:20;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:22px;

    padding:0 20px;

    text-align:center;
}

/* ==========================================
   LOGO
========================================== */

.logo-container{

    position:relative;

    width:110px;
    height:110px;

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

    opacity:0;

    transform:scale(.3) rotate(-15deg);

    animation:
         logoEnter .6s ease .1s forwards,
        logoFloat 4s ease-in-out infinite .8s;

}

@keyframes logoEnter{

    to{

        opacity:1;

        transform:
        scale(1)
        rotate(0);

    }

}

@keyframes logoFloat{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-10px);

    }

}

.logo-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid transparent;

    animation:ringSpin 8s linear infinite;

}

.logo-ring::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50%;

    border:2px solid transparent;

    border-top-color:var(--gold);

    border-right-color:var(--gold);

}

.logo-ring-outer{

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:1px solid rgba(201,168,76,.15);

    animation:ringSpin 16s linear infinite reverse;

}

@keyframes ringSpin{

    to{

        transform:rotate(360deg);

    }

}

.logo-inner{

    position:relative;

    width:72px;
    height:72px;

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

    border-radius:50%;

    background:

    linear-gradient(
        135deg,
        rgba(201,168,76,.15),
        rgba(201,168,76,.04)
    );

    border:1px solid rgba(201,168,76,.25);

}

.medical-cross{

    position:relative;

    width:28px;
    height:28px;

}

.medical-cross::before,
.medical-cross::after{

    content:"";

    position:absolute;

    background:

    linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    border-radius:2px;

    box-shadow:0 0 18px rgba(201,168,76,.45);

}

.medical-cross::before{

    width:8px;
    height:28px;

    left:10px;
    top:0;

}

.medical-cross::after{

    width:28px;
    height:8px;

    left:0;
    top:10px;

}

.logo-pulse{

    position:absolute;

    inset:-5px;

    border-radius:50%;

    border:1px solid rgba(201,168,76,.30);

    animation:pulseRing 3s linear infinite;

}

.logo-pulse:nth-child(2){

    animation-delay:1s;

}

.logo-pulse:nth-child(3){

    animation-delay:2s;

}

@keyframes pulseRing{

    from{

        transform:scale(1);

        opacity:.6;

    }

    to{

        transform:scale(2);

        opacity:0;

    }

}

/* ==========================================
   DECORATIVE LINE
========================================== */

.deco-line{

    width:0;

    height:1px;

    background:

    linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    opacity:0;

    animation:lineExpand .5s ease .4s forwards;

}

@keyframes lineExpand{

    to{

        width:180px;

        opacity:1;

    }

}

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

.welcome-text{

    color:var(--gold);

    font-size:13px;

    letter-spacing:.35em;

    text-transform:uppercase;

    font-weight:600;

    opacity:0;

    transform:translateY(20px);

    animation:textFade .5s ease .6s forwards;

}

@keyframes textFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   HOSPITAL NAME
========================================== */

.hospital-name{

    font-size:clamp(28px,6vw,52px);

    line-height:1.15;

    color:white;

    font-weight:700;

    overflow:hidden;

}

.hospital-name .line{

    display:block;

    overflow:hidden;

}

.hospital-name .line span{

    display:inline-block;

    transform:translateY(120%);

    animation:slideUp 1s ease forwards;

}

.hospital-name .line:nth-child(1) span{

    animation-delay:.9s;

}

.hospital-name .line:nth-child(2) span{

    animation-delay:1.2s;

}

.highlight{

    color:var(--gold);

}

@keyframes slideUp{

    to{

        transform:translateY(0);

    }

}

/* ==========================================
   SUBTITLE
========================================== */

.subtitle{

    display:flex;

    align-items:center;

    gap:10px;

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

    letter-spacing:.25em;

    font-size:11px;

    text-transform:uppercase;

    opacity:0;

    transform:translateY(15px);

    animation:textFade .5s ease 1.5s forwards;

}

.subtitle-dot{

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--gold);

}

/*=========================================
        PROGRESS BAR
=========================================*/

.progress-container{
    position:absolute;
    bottom:45px;
    left:50%;
    transform:translateX(-50%);
    width:280px;
    text-align:center;
    z-index:20;
}

.progress-bar-wrapper{
    width:100%;
    height:3px;
    background:rgba(255,255,255,.08);
    border-radius:50px;
    overflow:hidden;
}

.progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,
        var(--gold-dark),
        var(--gold),
        var(--gold-light));
    border-radius:50px;
    transition:width .2s linear;
}

.progress-text{
    margin-top:12px;
    color:var(--gold-light);
    font-size:11px;
    letter-spacing:.2em;
}

/*=========================================
        CORNER DESIGN
=========================================*/

.corner-deco{
    position:absolute;
    width:34px;
    height:34px;
    opacity:.45;
}

.corner-deco::before,
.corner-deco::after{
    content:"";
    position:absolute;
    background:var(--gold);
}

.corner-deco::before{
    width:18px;
    height:1px;
}

.corner-deco::after{
    width:1px;
    height:18px;
}

/* Top Left */

.tl{
    left:25px;
    top:25px;
}

.tl::before{
    left:0;
    top:0;
}

.tl::after{
    left:0;
    top:0;
}

/* Top Right */

.tr{
    right:25px;
    top:25px;
}

.tr::before{
    right:0;
    top:0;
}

.tr::after{
    right:0;
    top:0;
}

/* Bottom Left */

.bl{
    left:25px;
    bottom:25px;
}

.bl::before{
    left:0;
    bottom:0;
}

.bl::after{
    left:0;
    bottom:0;
}

/* Bottom Right */

.br{
    right:25px;
    bottom:25px;
}

.br::before{
    right:0;
    bottom:0;
}

.br::after{
    right:0;
    bottom:0;
}

/*=========================================
        EXIT ANIMATION
=========================================*/

#preloader.hide{

     transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

}

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

@media(max-width:768px){

    .logo-container{

        width:90px;
        height:90px;

    }

    .logo-inner{

        width:58px;
        height:58px;

    }

    .medical-cross{

        width:22px;
        height:22px;

    }

    .medical-cross::before{

        width:6px;
        height:22px;
        left:8px;

    }

    .medical-cross::after{

        width:22px;
        height:6px;
        top:8px;

    }

    .hospital-name{

        font-size:34px;

    }

    .progress-container{

        width:220px;

    }

    .corner-deco{

        display:none;

    }

}

@media(max-width:480px){

    .hospital-name{

        font-size:26px;

    }

    .welcome-text{

        font-size:11px;

        letter-spacing:.25em;

    }

    .subtitle{

        font-size:9px;

        letter-spacing:.18em;

    }

    .progress-container{

        width:180px;

        bottom:30px;

    }

}