/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}

/* Body */
body{font-family:'Montserrat',sans-serif; background:#f5f9ff; color:#333;}

/* Header */
header{display:flex; justify-content:space-between; align-items:center; padding:15px 30px; background:#0a6ed1; position:fixed; width:100%; top:0; z-index:100;}
header .logo{color:white; font-weight:700;}
header nav a{color:white; margin:0 10px; text-decoration:none; font-weight:600;}

/* Hero */
.hero{position:relative; height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; color:white; background:url("images/clinic-front.webp") center/cover no-repeat;}
.hero-overlay{position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index:1;}
.hero-content{position:relative; z-index:2;}
.hero-content h1{font-size:48px; margin-bottom:10px; animation:fadeIn 1.5s;}
.hero-content p{margin-bottom:20px; animation:fadeIn 2s;}
.hero-content .btn{background:#25D366; padding:12px 30px; border-radius:30px; color:white; text-decoration:none; font-weight:600; animation:fadeIn 2.5s;}

/* Sections */
.section{padding:80px 20px; text-align:center;}
.section h2{margin-bottom:40px; color:#0a6ed1;}

/* Service Cards */
.cards{display:flex; justify-content:center; flex-wrap:wrap; gap:25px;}
.card{width:280px; background:white; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1); transition:transform 0.3s; animation:fadeInUp 1.3s;}
.card:hover{transform:translateY(-10px);}
.card img{width:100%; height:180px; object-fit:cover; border-radius:10px 10px 0 0;}
.card h3{margin:15px 0;}

/* Gallery */
.gallery{display:flex; flex-wrap:wrap; justify-content:center; gap:15px;}
.gallery img{width:300px; border-radius:8px;}

/* Reviews */
.reviews .review{background:white; padding:15px; margin:10px auto; max-width:600px; border-radius:8px; box-shadow:0 3px 10px rgba(0,0,0,0.1); animation:fadeInDown 1s;}

/* Contact Form */
form{display:flex; flex-direction:column; gap:10px; max-width:500px; margin:20px auto;}
input, textarea{padding:12px; border:1px solid #ccc; border-radius:6px;}
button{background:#0a6ed1; color:white; border:none; padding:12px; border-radius:6px; cursor:pointer; font-weight:600;}

/* Map */
.map{margin-top:30px;}

/* Footer */
footer{background:#0a6ed1; color:white; text-align:center; padding:20px;}

/* Floating Button */
.float-btn{position:fixed; bottom:25px; right:25px; background:#25D366; color:white; padding:15px 20px; border-radius:50px; font-weight:600; text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,0.2); z-index:1000;}

/* Animations */
@keyframes fadeIn{from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);}}
@keyframes fadeInUp{from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}}
@keyframes fadeInDown{from{opacity:0; transform:translateY(-30px);} to{opacity:1; transform:translateY(0);}}