body{
margin:0;
font-family:'Poppins',sans-serif;
background:#f9fbff;
}

/* CONTAINER */
.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* HEADER */
.header{
background:#ffffff;
color:#000;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 0;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo img{
width:65px;
}

.logo h2{
margin:0;
font-size:22px;
color:#000;
}

.logo p{
margin:0;
font-size:13px;
color:#555;
}

nav a{
color:#000;
margin:10px;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

nav a:hover{
color:#4a00e0;
}

/* HERO */
.hero{
height:85vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:#ffffff;
color:#000;
}

.hero h1{
font-size:55px;
font-weight:800;
margin-bottom:10px;
}

.hero p{
font-size:20px;
color:#333;
}

/* SECTION */
.section{
padding:70px 0;
text-align:center;
}

.section h2{
font-size:32px;
margin-bottom:25px;
color:#333;
}

/* ABOUT */
.about-text{
max-width:800px;
margin:auto;
margin-bottom:20px;
line-height:1.6;
font-size:17px;
}

/* SERVICES */
.card-grid{
display:flex;
gap:25px;
justify-content:center;
flex-wrap:wrap;
}

.card{
width:300px;
padding:25px;
background:white;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
transition:0.3s;
}

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

/* DOCTORS */
.doctor-tabs{
margin-bottom:30px;
}

.doctor-tabs button{
padding:10px 25px;
margin:5px;
border:none;
border-radius:25px;
cursor:pointer;
background:#ddd;
font-weight:600;
transition:0.3s;
}

.doctor-tabs button.active{
background:#4a00e0;
color:white;
}

.doctor-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
margin-top:30px;
}

.doctor{
cursor:pointer;
transition:0.3s;
}

.doctor:hover{
transform:scale(1.05);
}

.doctor img{
width:150px;
height:150px;
border-radius:50%;
object-fit:cover;
margin-bottom:10px;
}

.doctor p{
font-weight:600;
}

/* GALLERY */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
margin-top:30px;
}

.gallery-grid img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

.gallery-grid img:hover{
transform:scale(1.05);
}

/* POPUPS */
.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
justify-content:center;
align-items:center;
z-index:2000;
}

.popup-box{
background:white;
padding:25px;
border-radius:12px;
text-align:center;
max-width:400px;
animation:fadeIn 0.3s ease;
}

.popup-box img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-bottom:10px;
}

/* MAP */
iframe{
width:100%;
height:400px;
border:none;
border-radius:10px;
margin-top:20px;
}

/* FLOAT BUTTONS */
.call, .whatsapp{
position:fixed;
right:20px;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:22px;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
z-index:1500;
}

.call{
bottom:100px;
background:#007bff;
}

.whatsapp{
bottom:30px;
background:#25D366;
}

/* BOOK BUTTON */
.book-btn{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(45deg,#8e2de2,#4a00e0);
color:white;
padding:15px 35px;
border:none;
border-radius:40px;
font-size:18px;
font-weight:600;
cursor:pointer;
z-index:2000;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
transition:0.3s;
}

.book-btn:hover{
transform:translateX(-50%) scale(1.05);
}

/* ANIMATION */
@keyframes fadeIn{
from{opacity:0;transform:scale(0.9);}
to{opacity:1;transform:scale(1);}
}

/* IMAGE POPUP */
#imgPopup .popup-box{
max-width:500px;
}

#imgPopup img{
width:100%;
height:auto;
border-radius:10px;
}    
/* FIXED IMAGE POPUP SIZE */
#imgPopup .popup-box{
max-width:90vw;
max-height:90vh;
padding:10px;
background:transparent;
box-shadow:none;
}

#imgPopup img{
max-width:85vw;
max-height:85vh;
width:auto;
height:auto;
border-radius:12px;
object-fit:contain;
}