/* ===== Cathay Dental Journey - shared stylesheet ===== */
:root{--primary:#d9534f;--secondary:#005b9f;--gold:#b08d4a;--dark:#222;--light:#f4f7f6;--whatsapp:#25D366}
*{box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;margin:0;background:#fff}
.container{max-width:1200px;margin:0 auto;padding:20px}
header{background:#fff;padding:10px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.08)}
header .container{display:flex;justify-content:space-between;align-items:center}
.logo-img{height:72px;width:auto;display:block;object-fit:contain}
nav a{color:var(--secondary);text-decoration:none;margin-left:25px;font-weight:600}
nav a:hover{opacity:.7;text-decoration:underline}
.page-hero{color:#fff;text-align:center;padding:110px 20px;background-size:cover;background-position:center}
.page-hero h1{font-size:3em;margin:0 0 12px;text-shadow:2px 2px 4px rgba(0,0,0,.6)}
.page-hero p{font-size:1.25em;max-width:840px;margin:0 auto;text-shadow:1px 1px 3px rgba(0,0,0,.6)}
.section{padding:70px 0}
.section h2{text-align:center;color:var(--secondary);font-size:2.4em;margin-bottom:18px}
.section-subtitle{text-align:center;max-width:860px;margin:0 auto 45px;font-size:1.08em;color:#666}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px}
.card{background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.06);display:flex;flex-direction:column}
.card img{width:100%;height:190px;object-fit:cover}
.card-body{padding:22px}
.card-body h3,.card-body h4{color:var(--secondary);margin-top:0}
.card-body a{color:var(--primary);font-weight:700;text-decoration:none}
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.package-card{border:1px solid #e0e0e0;border-radius:10px;padding:30px;text-align:center;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.05);transition:transform .3s;display:flex;flex-direction:column;justify-content:space-between}
.package-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,.1)}
.package-card h3{color:var(--secondary);font-size:1.5em;margin-top:0}
.package-card ul{list-style:none;padding:0;text-align:left;margin:22px 0}
.package-card li{padding:9px 0;border-bottom:1px dashed #eee;font-size:.95em;display:flex;align-items:center}
.package-card li::before{content:"✓";color:var(--primary);font-weight:bold;margin-right:10px}
.price{font-size:1.3em;color:var(--primary);font-weight:bold;background:var(--light);padding:14px;border-radius:5px;border:2px dashed var(--primary);margin-bottom:15px}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.content-grid img{width:100%;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.1)}
.content-text h3{color:var(--secondary);font-size:1.7em;margin-bottom:12px}
.steps{max-width:860px;margin:0 auto}
.step{background:#fff;border:1px solid #eee;border-left:5px solid var(--primary);border-radius:8px;padding:18px 24px;margin-bottom:16px}
.step h4{margin:0 0 6px;color:var(--secondary)}
table.compare{width:100%;max-width:900px;margin:0 auto;border-collapse:collapse;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.compare th,.compare td{border:1px solid #e0e0e0;padding:12px 16px;text-align:center}
.compare th{background:var(--secondary);color:#fff}
.btn{background:var(--primary);color:#fff;padding:14px 32px;border:none;border-radius:5px;cursor:pointer;font-size:1.05em;font-weight:700;text-decoration:none;display:inline-block;transition:background .3s}
.btn:hover{background:#c9302c}
.wa-btn{background:var(--whatsapp)}
.wa-btn:hover{background:#1ebe5b}
.cta{background:var(--secondary);color:#fff;text-align:center;padding:70px 20px}
.cta h2{color:#fff;font-size:2.2em;margin:0 0 10px}
.wa-number{font-size:1.7em;font-weight:800;letter-spacing:1px;margin:14px 0 24px}
.legal{max-width:880px;margin:0 auto}
.legal h3{color:var(--secondary)}
footer{background:var(--dark);color:#aaa;text-align:center;padding:40px 0}
footer a{color:#fff;text-decoration:none;margin:0 10px}
@media (max-width:768px){
 .page-hero h1{font-size:2.2em}
 .content-grid{grid-template-columns:1fr}
 header .container{flex-direction:column;gap:12px}
 nav{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}
 nav a{margin:0}
}