:root { --gold: #c5a059; --dark: #1a1a1a; --light: #f9f9f9; --white: #ffffff; --grey: #777; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; color: #333; line-height: 1.6; overflow-x: hidden; background-color: var(--white); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Navigation (Same as Home) */
header { background: var(--white); border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; height: 70px; }
.logo { font-size: 22px; font-weight: 700; color: var(--gold); letter-spacing: 2px; text-decoration: none; }
.nav-links { display: flex; gap: 25px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--dark); font-size: 14px; font-weight: 500; }
.nav-links a:hover ,.nav-links a.active {color:var(--gold);}
/* Page Header */
.page-banner { background: var(--light); padding: 60px 0; text-align: center; border-bottom: 1px solid #eee; }
.page-banner h1 { font-size: 36px; font-weight: 300; color: var(--dark); letter-spacing: 2px; margin-bottom: 10px; }
.breadcrumb { font-size: 12px; color: var(--grey); letter-spacing: 1px; }
.breadcrumb a { color: var(--gold); text-decoration: none; }

/* Treatment Categories Filter */
.filter-nav { padding: 40px 0; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.filter-btn { padding: 10px 25px; border: 1px solid #ddd; background: none; cursor: pointer; font-size: 13px; letter-spacing: 1px; transition: 0.3s; border-radius: 20px; }
.filter-btn.active, .filter-btn:hover { background: var(--gold); color: white; border-color: var(--gold); }

/* Treatment Cards Detail */
.treatment-list { padding-bottom: 80px; }
.treatment-card { display: flex; background: white; margin-bottom: 40px; border: 1px solid #f2f2f2; overflow: hidden; transition: 0.3s; }
.treatment-card:hover { box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
.t-image { flex: 1; min-height: 300px; background-size: cover; background-position: center; }
.t-content { flex: 1.2; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.t-category { color: var(--gold); font-size: 12px; font-weight: bold; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
.t-content h3 { font-size: 26px; margin-bottom: 15px; color: var(--dark); font-weight: 400; }
.t-content p { color: #666; margin-bottom: 25px; font-size: 15px; }

.t-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; border-top: 1px solid #eee; padding-top: 20px; }
.meta-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dark); }
.meta-item i { color: var(--gold); width: 15px; }

.price-tag { font-size: 18px; color: var(--gold); font-weight: 600; margin-bottom: 25px; display: block; }
.btn-outline { border: 1px solid var(--gold); color: var(--gold); padding: 12px 30px; text-decoration: none; display: inline-block; font-size: 13px; letter-spacing: 1px; transition: 0.3s; text-align: center; }
.btn-outline:hover { background: var(--gold); color: white; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .treatment-card { flex-direction: column; }
    .t-image { height: 250px; }
    .t-content { padding: 30px 20px; }
    .nav-links { position: fixed; top: 0; right: -100%; width: 250px; height: 100vh; background: var(--white); flex-direction: column; gap: 0; padding-top: 80px; transition: 0.4s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 999; }
    .nav-links.active { right: 0; }
    .nav-links li { width: 100%; border-bottom: 1px solid #eee; }
    .nav-links a { display: block; padding: 20px; font-size: 16px; color: var(--dark); }
}

footer { background: var(--dark); color: white; padding: 60px 0; text-align: center; font-size: 13px; letter-spacing: 1px; }
.whatsapp-btn { position: fixed; bottom: 30px; right: 30px; background: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 1000; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: 0.3s; }
.whatsapp-btn:hover { transform: scale(1.1); }