:root{ --primary:#2f8f9d; --dark:#1f2f38; --light:#f7fbfc; } *{ margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; } body{ background:var(--light); color:var(--dark); } /* HEADER */ header{ background:white; position:sticky; top:0; z-index:999; box-shadow:0 2px 6px rgba(0,0,0,0.05); } .navbar{ max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; padding:0 20px; height:95px; } .logo-wrap img{ height:115px; max-width:220px; object-fit:contain; } nav ul{ list-style:none; display:flex; gap:30px; } nav a{ text-decoration:none; color:var(--dark); font-weight:500; font-size:15px; } nav a:hover{ color:var(--primary); } /* HERO */ .hero{ position:relative; background-image: linear-gradient(to right, rgba(47,143,157,0.9), rgba(47,143,157,0.7)), url("../assets/img/doctor-hero.jpeg"); background-size:cover; background-position:center; background-repeat:no-repeat; color:white; padding:140px 20px; } .hero-content{ max-width:1200px; margin:auto; } .hero h1{ font-size:2.5rem; margin-bottom:15px; } .hero p{ font-size:1.1rem; max-width:600px; } .hero button{ margin-top:25px; padding:12px 30px; border:none; background:white; color:var(--primary); font-size:16px; border-radius:25px; cursor:pointer; font-weight:500; } /* SECTION */ section{ padding:70px 20px; } .container{ max-width:1200px; margin:auto; } .section-title{ text-align:center; margin-bottom:40px; } .section-title h2{ color:var(--primary); font-size:2rem; } /* SERVICES */ .services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .service-card{ background:white; padding:30px 25px; border-radius:15px; text-align:center; box-shadow:0 5px 15px rgba(0,0,0,0.08); transition:.3s; } .service-card:hover{ transform:translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,0.12); } .service-card i{ font-size:38px; color:var(--primary); margin-bottom:15px; } /* DOCTOR */ .doctor-section{ background:linear-gradient(135deg,#e9f7f9,#ffffff); } .doctor-container{ max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:50px; flex-wrap:wrap; } .doctor-text{ flex:1; min-width:300px; } .doctor-text h2{ font-size:2.2rem; color:var(--primary); margin-bottom:15px; } .doctor-text h4{ margin-bottom:20px; font-weight:500; color:#555; } .doctor-text p{ line-height:1.8; margin-bottom:15px; color:#444; } .doc-highlights{ display:flex; flex-wrap:wrap; gap:15px; margin-top:20px; } .doc-pill{ background:white; padding:10px 18px; border-radius:25px; box-shadow:0 4px 10px rgba(0,0,0,0.08); font-size:14px; } .doctor-image{ flex:1; text-align:center; min-width:280px; } .doctor-image img{ width:100%; max-width:580px; border-radius:25px; box-shadow:0 15px 35px rgba(0,0,0,0.15); transition:.4s; } .doctor-image img:hover{ transform:scale(1.05); } /* FLOATING */ .book-btn{ position:fixed; bottom:20px; left:20px; background:var(--primary); color:white; padding:14px 22px; border-radius:30px; text-decoration:none; box-shadow:0 5px 15px rgba(0,0,0,0.2); z-index:999; } .call-btn{ position:fixed; bottom:90px; right:15px; background:#2f8f9d; color:white; width:55px; height:55px; display:flex; justify-content:center; align-items:center; border-radius:50%; font-size:24px; text-decoration:none; z-index:999; } .whatsapp-btn{ position:fixed; bottom:20px; right:15px; background:#25d366; color:white; width:55px; height:55px; display:flex; justify-content:center; align-items:center; border-radius:50%; font-size:26px; text-decoration:none; z-index:999; } /* ENQUIRY */ .enquiry-modal{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); display:none; justify-content:center; align-items:center; z-index:9999; } .enquiry-box{ background:white; padding:25px; border-radius:12px; width:90%; max-width:420px; } .enquiry-box input, .enquiry-box textarea{ width:100%; padding:12px; margin-bottom:12px; border-radius:8px; border:1px solid #ccc; } .whatsapp-submit{ width:100%; padding:12px; background:#218c4f; color:white; border:none; border-radius:6px; font-size:16px; cursor:pointer; } /* FOOTER */ footer{ background:#1f2f38; color:white; padding:40px 20px; text-align:center; } /* MOBILE */ @media(max-width:768px){ .navbar{ flex-direction:column; align-items:flex-start; height:auto; padding:10px 15px; } .logo-wrap img{ height:60px; margin-bottom:5px; } nav ul{ flex-wrap:wrap; gap:12px; } .hero h1{ font-size:1.8rem; } .doctor-container{ flex-direction:column-reverse; text-align:center; } } /* ================= APPOINTMENT FORM ================= */ .appointment-section{ padding:80px 20px; background:#f7fbfc; } .appointment-container{ max-width:550px; margin:auto; background:white; padding:40px 30px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.08); } .appt-heading{ text-align:center; color:#2f8f9d; margin-bottom:30px; } .appointment-form{ display:flex; flex-direction:column; gap:18px; } .form-group{ position:relative; } .form-group input, .form-group select{ width:100%; padding:14px 12px; border-radius:6px; border:1px solid #ccc; outline:none; background:transparent; font-size:15px; } .form-group label{ position:absolute; top:50%; left:12px; transform:translateY(-50%); background:white; padding:0 4px; color:#888; font-size:14px; pointer-events:none; transition:.3s; } .form-group input:focus + label, .form-group input:not(:placeholder-shown) + label{ top:-8px; font-size:12px; color:#2f8f9d; } .book-btn-form{ margin-top:10px; padding:14px; background:#2f8f9d; color:white; border:none; border-radius:6px; font-size:16px; cursor:pointer; transition:.3s; } .book-btn-form:hover{ background:#247884; } .fee-box{ margin-top:20px; background:#d8f0f4; padding:15px; border-radius:6px; text-align:center; font-size:14px; } /* MOBILE */ @media(max-width:600px){ .appointment-container{ padding:25px 20px; } .appt-heading{ font-size:20px; } } /* ================= PATIENT LOGIN ================= */ .login-section{ padding:90px 20px; background:#f7fbfc; display:flex; justify-content:center; align-items:center; } .login-container{ width:100%; max-width:420px; background:white; padding:40px 30px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.08); text-align:center; } .login-heading{ color:#2f8f9d; margin-bottom:5px; } .login-subtext{ font-size:14px; margin-bottom:25px; color:#666; } .form-group{ position:relative; margin-bottom:20px; } .form-group input{ width:100%; padding:14px 12px; border-radius:6px; border:1px solid #ccc; outline:none; background:transparent; font-size:15px; } .form-group label{ position:absolute; top:50%; left:12px; transform:translateY(-50%); background:white; padding:0 4px; color:#888; font-size:14px; pointer-events:none; transition:.3s; } .form-group input:focus + label, .form-group input:not(:placeholder-shown) + label{ top:-8px; font-size:12px; color:#2f8f9d; } .login-btn{ width:100%; padding:14px; background:#2f8f9d; color:white; border:none; border-radius:6px; font-size:16px; cursor:pointer; transition:.3s; } .login-btn:hover{ background:#247884; } /* MOBILE */ @media(max-width:600px){ .login-container{ padding:25px 20px; } .login-heading{ font-size:20px; } } /* ================= ADMIN LOGIN ================= */ .admin-login-section{ padding:90px 20px; background:#f7fbfc; display:flex; justify-content:center; align-items:center; } .admin-login-container{ width:100%; max-width:420px; background:white; padding:40px 30px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.08); text-align:center; } .admin-heading{ color:#2f8f9d; margin-bottom:5px; } .admin-subtext{ font-size:14px; margin-bottom:25px; color:#666; } .admin-error{ background:#ffe5e5; color:#cc0000; padding:10px; border-radius:6px; margin-bottom:15px; font-size:14px; } .admin-login-btn{ width:100%; padding:14px; background:#2f8f9d; color:white; border:none; border-radius:6px; font-size:16px; cursor:pointer; transition:.3s; } .admin-login-btn:hover{ background:#247884; } /* MOBILE */ @media(max-width:600px){ .admin-login-container{ padding:25px 20px; } .admin-heading{ font-size:20px; } } /* ================= MOBILE FOOTER FIX ================= */ @media(max-width:768px){ footer .footer-container{ flex-direction:column !important; text-align:center !important; align-items:center !important; justify-content:center !important; gap:15px; } footer .footer-container div{ width:100% !important; text-align:center !important; } footer p{ text-align:center !important; } } /* ================= FOOTER ================= */ footer{ background:#1f2f38; color:white; padding:40px 20px; width:100%; } .footer-container{ max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; } .footer-left h3{ margin-bottom:8px; } .footer-left p{ font-size:14px; color:#ccc; } .footer-right p{ margin-bottom:5px; } .footer-right a{ color:#b3e5ec; text-decoration:none; margin-left:5px; } .footer-copy{ text-align:center; font-size:13px; color:#aaa; margin-top:15px; } /* ================= MOBILE FOOTER FIX ================= */ @media(max-width:768px){ .footer-container{ flex-direction:column; text-align:center; align-items:center; justify-content:center; } .footer-left, .footer-right{ width:100%; text-align:center; } }