:root { --primary: #0d2850; --secondary: #163a7a; --bg: #f5f7fa; --text: #333; }
body { font-family: 'Roboto', sans-serif; background: linear-gradient(135deg, #f5f7fa, #c3cfe2); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
.header-main { padding: 20px; text-align: center; }
.logo { max-width: 300px; height: auto; margin-bottom: 20px; }
.prescription-title { font-size: 2.5rem; font-weight: 700; margin-top: 20px; }
.main-header_title { font-size: 1.8rem; font-weight: 300; color: #555; margin-bottom: 40px; }
.drnow-card { background: white; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); overflow: hidden; display: flex; min-height: 220px; margin-bottom: 30px; transition: transform 0.3s; }
.drnow-card:hover { transform: translateY(-5px); }
.drnow-card-content { padding: 30px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.drnow-card.reverse { flex-direction: row-reverse; }
.drnow-cta { background: var(--primary); color: white; padding: 10px 20px; border-radius: 50px; text-decoration: none; font-weight: 600; width: fit-content; }
.drnow-image-wrap { width: 40%; position: relative; }
.drnow-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
#menu-container { position: fixed; top: 20px; right: 20px; z-index: 1000; }
#menu { position: fixed; top: 0; right: -400px; width: 350px; height: 100%; background: white; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right 0.3s ease; z-index: 999; overflow-y: auto; }
#menu.active { right: 0; }
.menu-header { background: var(--primary); color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.menu-category { padding: 20px; border-bottom: 1px solid #eee; }
.menu-item { padding: 10px 0; cursor: pointer; display: flex; align-items: center; }
.menu-icon { margin-right: 15px; width: 25px; text-align: center; }
.faq-item { background: white; margin-bottom: 15px; border-radius: 10px; border: 1px solid #e2efff; }
.faq-question { padding: 20px; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; }
.faq-answer { padding: 0 20px 20px; display: none; color: #555; }
.faq-item.active .faq-answer { display: block; }
@media (max-width: 768px) { .drnow-card { flex-direction: column !important; } .drnow-image-wrap { width: 100%; height: 200px; } }