body{
margin:0;
font-family:Arial;
}

.navbar{
display:flex;
justify-content:space-between;
background:#0d47a1;
color:white;
padding:10px 20px;
}

.navbar ul{
display:flex;
list-style:none;
gap:20px;
}

.navbar a{
color:white;
text-decoration:none;
}

.wrapper{
background-image:url("images/hospital.jpeg");
background-size:cover;
background-position:center;
min-height:100vh;
padding:20px;
}


h1{
text-align:center;
color:rgb(2, 0, 0);
}

.container{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
margin-top:30px;
}

.box{
width:260px;
padding:20px;
border-radius:15px;
background:rgba(255,255,255,0.2);
backdrop-filter:blur(10px);
text-align:center;
}

input{
width:90%;
padding:8px;
margin:8px;
}

button{
padding:8px 15px;
background:#1976d2;
color:white;
border:none;
border-radius:5px;
}

.login-container{
display:flex;
justify-content:center;
gap:30px;
margin-top:50px;
}

.login-box{
width:250px;
padding:20px;
background:rgba(255,255,255,0.3);
border-radius:15px;
text-align:center;
}

.doctor-container{
display:flex;
justify-content:center;
gap:30px;
margin-top:30px;
}

.doctor-card{
background:rgba(255,255,255,0.3);
padding:20px;
border-radius:15px;
width:200px;
text-align:center;
}

.doctor-card img{
width:100px;
height:100px;
border-radius:50%;
}
/* CHATBOT BUTTON */

.chatbot-button{

position:fixed;

bottom:20px;

right:20px;

background:#1976d2;

color:white;

font-size:25px;

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

cursor:pointer;

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

}

/* CHATBOX */

.chatbot-box{

position:fixed;

bottom:90px;

right:20px;

width:300px;

background:rgba(255,255,255,0.9);

border-radius:10px;

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

display:none;

flex-direction:column;

}

/* HEADER */

.chat-header{

background:#0d47a1;

color:white;

padding:10px;

display:flex;

justify-content:space-between;

}

/* BODY */

.chat-body{

height:250px;

overflow-y:auto;

padding:10px;

font-size:14px;

}

/* INPUT */

.chat-input{

display:flex;

border-top:1px solid #ccc;

}

.chat-input input{

flex:1;

padding:10px;

border:none;

}

.chat-input button{

background:#1976d2;

color:white;

border:none;

padding:10px;

cursor:pointer;
.location-section{

text-align:center;

padding:40px;

background: rgba(255,255,255,0.2);

backdrop-filter: blur(10px);

border-radius:15px;

margin:40px;

}

.location-section h2{

color:#0d47a1;

margin-bottom:10px;

}

.map-container{

margin-top:20px;

border-radius:15px;

overflow:hidden;

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

}
/* HERO SECTION */

.hero{

height:500px;

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

background-size: cover;

background-position: center;

position: relative;

}

/* Blue overlay effect */

.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
to right,
rgba(0,120,200,0.8),
rgba(0,120,200,0.5),
rgba(0,120,200,0.2),
transparent
);

display:flex;
align-items:center;

}

/* Text */

.hero-text{

color:white;

margin-left:80px;

max-width:500px;

}


body{
margin:0;
font-family:Arial;
}

/* BACKGROUND */

.wrapper{

min-height:100vh;

background:
linear-gradient(
rgba(143,182,217,0.85),
rgba(143,182,217,0.85)
),
url("images/hospital.jpg");

background-size:cover;
background-position:center;

}

/* NAVBAR */

.navbar{

background:#2d5aa3;

padding:15px 40px;

display:flex;
justify-content:flex-end;

gap:30px;

}

.navbar a{

color:white;
text-decoration:none;

}

/* TITLE */

.title{

text-align:center;
color:white;

margin-top:40px;

}

/* LOGIN BOXES */

.login-container{

display:flex;

justify-content:center;

gap:40px;

margin-top:60px;

}

.login-box{

background:rgba(255,255,255,0.75);

padding:25px;

border-radius:10px;

width:260px;

text-align:center;

}

.login-box input{

width:100%;

padding:10px;

margin:10px 0;

border-radius:5px;

border:1px solid #ccc;

}

.login-box button{

background:#2d5aa3;

color:white;

border:none;

padding:8px 15px;

border-radius:5px;

cursor:pointer;

}
/* ABOUT HOSPITAL SECTION */

.about-hospital{

background:white;

padding:60px;

}

.about-container{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}

.about-text{

width:50%;

}

.about-text h2{

font-size:32px;

margin-bottom:15px;

}

.about-text p{

color:#555;

line-height:1.6;

}

.about-video{

width:50%;

}

.about-video iframe{
width:100%;
border-radius:10px;
}

}