* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "DM Sans", sans-serif; color: #1e2b4f; background: #fff; overflow-x: hidden; }
:root { --primary: #1b7f7a; --primary-dark: #126e68; --gold: #c5a059; --gold-light: #f5e7d3; --soft-bg: #f7fbfc; --gray: #6c7a8d; }
h1,h2,h3,h4 { font-weight: 600; letter-spacing: -0.02em; }
.btn-default { background: var(--primary); color: white; padding: 12px 32px; border-radius: 40px; font-weight: 600; border: 2px solid transparent; transition: 0.3s; text-decoration: none; display: inline-block; }
.btn-default:hover { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-gold { background: var(--gold); color: #1e2b4f; padding: 10px 28px; border-radius: 40px; font-weight: 600; text-decoration: none; border: 2px solid transparent; }
.btn-gold:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.bg-section { background: var(--soft-bg); }
.section-title h3 { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.section-title h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
/* topbar */
.topbar { background: var(--gold); color: #1e2b4f; padding: 8px 0; font-size: 0.9rem; font-weight: 500; }
.topbar a { color: #1e2b4f; text-decoration: none; margin-right: 20px; }
/* header */
.main-header { background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.02); padding: 6px 0; position: relative; z-index: 10; }
.brand-name { font-size: 1.8rem; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; }
.brand-gold { color: var(--gold); }
.navbar-nav .nav-link { color: #1e2b4f; font-weight: 500; margin: 0 12px; }
.dropdown-menu { border: none; border-radius: 20px; background: white; box-shadow: 0 20px 35px -8px rgba(0,40,40,0.2); padding: 12px 0; margin-top: 8px; }
.dropdown-menu .dropdown-item { padding: 10px 24px; font-weight: 500; color: #1e2b4f; transition: 0.2s; }
.dropdown-menu .dropdown-item:hover { background: var(--gold-light); color: var(--primary); }
/* hero slider */
.hero-swiper { height: 600px; border-radius: 0 0 40px 40px; overflow: hidden; }
.hero-swiper .swiper-slide { background-size: cover; background-position: center; display: flex; align-items: center; }
.hero-overlay { background: linear-gradient(90deg, rgba(0,40,40,0.8) 0%, rgba(0,0,0,0.3) 100%); padding: 60px; width: 100%; }
/* gallery */
.gallery-item { border-radius: 28px; overflow: hidden; box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1); margin-bottom: 24px; transition: 0.2s; }
.gallery-item:hover { transform: scale(1.02); }
.gallery-item img { width: 100%; height: 250px; object-fit: cover; }
/* notice */
.notice-card { background: white; border-radius: 30px; padding: 28px; box-shadow: 0 10px 25px -8px rgba(0,0,0,0.05); border-left: 6px solid var(--gold); margin-bottom: 20px; }
.notice-date { color: var(--gold); font-weight: 600; }
.badge-urgent { background: #ffecdc; color: #c05e00; }
/* hospital speaks */
.speak-card { background: white; border-radius: 30px; padding: 32px; box-shadow: 0 18px 35px -12px rgba(0,60,60,0.12); }
.speak-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }
/* upcoming */
.upcoming-item { background: #f8f3ea; border-radius: 60px; padding: 14px 24px; display: inline-block; margin: 0 8px 12px 0; }
/* client logo */
.client-logo { background: white; border-radius: 40px; padding: 20px 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.02); display: flex; align-items: center; justify-content: center; min-height: 120px; transition: 0.2s; }
.client-logo:hover { box-shadow: 0 15px 30px rgba(197,160,89,0.1); }
/* ===== NEW PROFESSIONAL ABOUT & SERVICES SECTION (from image) ===== */
.about-professional { background: white; overflow: hidden; }
.about-img-box { position: relative; border-radius: 40px; overflow: hidden; box-shadow: 0 30px 40px -20px rgba(0,80,80,0.3); transition: all 0.3s; }
.about-img-box:hover { transform: translateY(-8px); box-shadow: 0 40px 45px -15px rgba(0,100,100,0.4); }
.about-img-box img { width: 100%; height: auto; display: block; transition: transform 10s ease; }
.about-img-box:hover img { transform: scale(1.05); }
.video-badge { position: absolute; bottom: 30px; left: 30px; background: white; border-radius: 60px; padding: 12px 28px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 12px; animation: pulseShadow 2s infinite; }
.video-badge i { font-size: 2rem; color: var(--gold); }
.opening-hours-card { background: var(--primary); color: white; border-radius: 40px; padding: 28px; box-shadow: 0 20px 30px -10px rgba(0,80,80,0.5); transition: 0.3s; }
.opening-hours-card:hover { background: #146f6a; transform: scale(1.02); }
.opening-hours-card .clock-animate { animation: tickTock 2s infinite ease-in-out; display: inline-block; }
@keyframes tickTock { 0% { transform: rotate(0deg); } 10% { transform: rotate(10deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(6deg); } 40% { transform: rotate(-6deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes pulseShadow { 0% { box-shadow: 0 10px 20px rgba(197,160,89,0.3); } 50% { box-shadow: 0 18px 28px rgba(197,160,89,0.5); } 100% { box-shadow: 0 10px 20px rgba(197,160,89,0.3); } }
.service-card { background: white; border-radius: 40px; padding: 32px; box-shadow: 0 20px 30px -10px rgba(0,0,0,0.05); transition: 0.25s; border: 1px solid #eaf2f2; height: 100%; }
.service-card:hover { transform: translateY(-12px); box-shadow: 0 30px 45px -12px var(--primary); border-color: var(--gold); }
.service-icon { background: var(--gold-light); width: 80px; height: 80px; border-radius: 30px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: 0.2s; }
.service-card:hover .service-icon { background: var(--gold); }
.service-icon i { font-size: 40px; color: var(--primary); }
.service-card h3 { font-size: 1.8rem; margin-bottom: 16px; }
.service-card p { color: var(--gray); }
/* footer */
.main-footer { background: #13223b; color: #ccdbe9; padding: 60px 0 30px; }
.footer-links h3 { color: white; font-size: 1.2rem; margin-bottom: 20px; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links ul li { margin-bottom: 12px; }
.footer-links ul li a { color: #b3c6db; text-decoration: none; }
.footer-links ul li a:hover { color: var(--gold); }
@media (max-width: 991px) { .hero-swiper { height: 450px; } }