/* ======================================
   DAULE HOSPITAL WEBSITE
   Professional Medical Theme
====================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0077b6;
--secondary:#00b4d8;
--dark:#023047;
--light:#f8fbff;
--white:#ffffff;
--text:#555;
--success:#28a745;
--shadow:0 10px 30px rgba(0,0,0,.08);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#fff;
color:var(--text);
line-height:1.7;
overflow-x:hidden;
}

/* TOP BAR */

.top-bar{
background:var(--primary);
color:#fff;
padding:8px 0;
font-size:14px;
}

.top-bar i{
margin-right:8px;
}

/* NAVBAR */

.navbar{
padding:14px 0;
transition:.4s;
}

.navbar-brand{
font-size:26px;
font-weight:700;
color:var(--primary)!important;
}

.navbar-brand img{
margin-right:10px;
}

.nav-link{
font-weight:600;
margin-left:12px;
color:#333!important;
transition:.3s;
}

.nav-link:hover{
color:var(--primary)!important;
}

.navbar .btn{
border-radius:50px;
padding:10px 25px;
}

/* HERO */

.hero{

padding:100px 0;

background:linear-gradient(135deg,#eef8ff,#ffffff);

}

.hero h5{

color:var(--secondary);

font-weight:700;

letter-spacing:2px;

}

.hero h1{

font-size:56px;

font-weight:800;

color:var(--dark);

margin:20px 0;

}

.hero h3{

font-size:28px;

font-weight:600;

color:var(--primary);

margin-bottom:20px;

}

.hero p{

font-size:18px;

margin-bottom:35px;

}

.hero img{

border-radius:20px;

box-shadow:var(--shadow);

animation:float 4s infinite ease-in-out;

}

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-12px);}

100%{transform:translateY(0);}

}

/* BUTTONS */

.btn-primary{

background:var(--primary);

border:none;

}

.btn-primary:hover{

background:#005f8f;

}

.btn-success{

border-radius:50px;

padding:14px 30px;

}

/* SECTION */

section{

padding:80px 0;

}

section h2{

font-size:40px;

font-weight:700;

color:var(--dark);

margin-bottom:20px;

text-align:center;

}

section p{

font-size:16px;

}

/* ABOUT */

#about img{

border-radius:20px;

box-shadow:var(--shadow);

}

#about .col-6{

padding:12px 0;

font-weight:600;

color:var(--dark);

}

/* SERVICE CARDS */

.service-card{

border:none;

border-radius:18px;

box-shadow:var(--shadow);

transition:.4s;

margin-bottom:30px;

overflow:hidden;

}

.service-card:hover{

transform:translateY(-12px);

}

.service-card .card-body{

padding:35px;

}

.service-card i{

color:var(--primary);

margin-bottom:20px;

}

.service-card h4{

font-size:24px;

font-weight:700;

margin-bottom:15px;

color:var(--dark);

}

.service-card p{

font-size:15px;

}

/* DOCTORS */

#doctors .card{

border:none;

box-shadow:var(--shadow);

border-radius:18px;

overflow:hidden;

transition:.4s;

}

#doctors .card:hover{

transform:translateY(-10px);

}

#doctors img{

height:420px;

object-fit:cover;

}

#doctors h3{

font-weight:700;

color:var(--dark);

}

#doctors h5{

color:var(--primary);

margin-bottom:15px;

}

/* GALLERY */

#gallery img{

width:100%;

height:260px;

object-fit:cover;

border-radius:15px;

transition:.4s;

cursor:pointer;

box-shadow:var(--shadow);

}

#gallery img:hover{

transform:scale(1.05);

}

/* FORM */

form{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

}

.form-control{

height:55px;

border-radius:10px;

}

textarea.form-control{

height:auto;

}

.form-control:focus{

border-color:var(--primary);

box-shadow:none;

}

/* CONTACT */

#contact{

background:linear-gradient(135deg,#023047,#005f73);

}

#contact h2{

color:#fff;

}

#contact p{

font-size:18px;

}

iframe{

border-radius:15px;

margin-top:20px;

}

/* FOOTER */

footer{

font-size:15px;

letter-spacing:1px;

}

/* FLOATING BUTTONS */

.call-btn,

.whatsapp-btn{

position:fixed;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:24px;

box-shadow:0 8px 20px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

text-decoration:none;

}

.call-btn{

background:#0d6efd;

bottom:30px;

left:30px;

}

.whatsapp-btn{

background:#25D366;

bottom:30px;

right:30px;

}

.call-btn:hover,

.whatsapp-btn:hover{

transform:scale(1.12);

color:#fff;

}

/* IMAGE EFFECT */

img{

max-width:100%;

}

/* SHADOW */

.shadow-box{

box-shadow:var(--shadow);

border-radius:20px;

}

/* ANIMATION */

.fade-up{

animation:fadeup 1s ease;

}

@keyframes fadeup{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* RESPONSIVE */

@media(max-width:991px){

.hero{

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero h3{

font-size:22px;

}

.hero img{

margin-top:40px;

}

.navbar-brand{

font-size:22px;

}

section h2{

font-size:34px;

}

}

@media(max-width:768px){

.hero{

padding:70px 0;

}

.hero h1{

font-size:34px;

}

.hero h3{

font-size:20px;

}

section{

padding:60px 0;

}

#doctors img{

height:320px;

}

#gallery img{

height:220px;

}

.call-btn,

.whatsapp-btn{

width:52px;

height:52px;

font-size:20px;

}

}

@media(max-width:576px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

section h2{

font-size:28px;

}

.top-bar{

text-align:center;

font-size:13px;

}

.navbar-brand img{

width:55px;

}

}