/* Source: index.html */
body { padding-top: 72px; }

	/* ── Hero ── */
	.hero {
		position: relative;
		padding: 6rem 2rem 5rem;
		overflow: hidden;
		background: linear-gradient(135deg, #0f2057 0%, #1a3a8f 55%, #00B8A9 100%);
	}
	.hero::before {
		content: '';
		position: absolute; inset: 0;
		background: radial-gradient(ellipse at 70% 50%, rgba(0,184,169,0.22), transparent 60%);
	}
	.hero-inner {
		position: relative; z-index: 1;
		max-width: 1100px; margin: 0 auto;
		display: grid; grid-template-columns: 1fr 1fr;
		gap: 4rem; align-items: center;
	}
	.hero-text { color: white; }
	.hero-badge {
		display: inline-block;
		background: rgba(255,255,255,0.12);
		border: 1px solid rgba(255,255,255,0.25);
		color: rgba(255,255,255,0.92);
		font-size: 0.875rem; font-weight: 700;
		padding: 0.4rem 1.2rem; border-radius: 9999px;
		backdrop-filter: blur(8px); margin-bottom: 1.5rem;
	}
	.hero-text h1 {
		font-size: clamp(2.25rem, 4.5vw, 3.5rem);
		font-weight: 900; line-height: 1.15; margin-bottom: 1.25rem;
	}
	.hero-text h1 .grad {
		background: linear-gradient(to left, #00B8A9, #a5f3ef);
		-webkit-background-clip: text; background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.hero-text p {
		font-size: 1.05rem; color: rgba(255,255,255,0.82);
		line-height: 1.85; max-width: 480px; margin-bottom: 2rem;
	}
	.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
	.btn-hero-cta {
		display: inline-flex; align-items: center; gap: 0.5rem;
		background: var(--cta); color: white;
		font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 700;
		padding: 0.9rem 2rem; border-radius: 0.875rem;
		text-decoration: none;
		box-shadow: 0 8px 24px rgba(255,138,52,0.3);
		transition: transform 0.2s, opacity 0.2s;
	}
	.btn-hero-cta:hover { transform: translateY(-2px); opacity: 0.9; }
	.btn-hero-cta svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
	.btn-hero-outline {
		display: inline-flex; align-items: center; justify-content: center;
		background: transparent; color: white;
		font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 700;
		padding: 0.9rem 2rem; border-radius: 0.875rem;
		text-decoration: none; border: 2px solid rgba(255,255,255,0.35);
		transition: background 0.2s, border-color 0.2s;
	}
	.btn-hero-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.65); }

	/* Hero Image */
	.hero-image { position: relative; }
	.hero-image img {
		width: 100%; border-radius: 1.5rem;
		border: 3px solid rgba(255,255,255,0.12);
		box-shadow: 0 30px 80px rgba(0,0,0,0.28);
		display: block;
	}
	.hero-float {
		position: absolute; bottom: 1.5rem; left: 1.5rem;
		background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
		border-radius: 1rem; padding: 0.85rem 1.25rem;
		box-shadow: 0 8px 30px rgba(0,0,0,0.14);
		display: flex; align-items: center; gap: 0.75rem;
	}
	.float-icon {
		width: 42px; height: 42px; border-radius: 50%;
		background: #dcfce7; display: flex; align-items: center; justify-content: center;
	}
	.float-icon svg { width: 22px; height: 22px; stroke: #16a34a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.float-text strong { display: block; font-size: 0.875rem; font-weight: 800; color: #1e293b; }
	.float-text span { font-size: 0.75rem; color: #64748b; }

	/* ── Stats ── */
	.stats-wrap {
		background: white;
		padding: 0 2rem 1.5rem;
	}
	.stats-inner {
		max-width: 1100px; margin: 0 auto;
		display: grid; grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
		background: white;
		border-radius: 1.5rem;
		box-shadow: 0 16px 48px rgba(0,0,0,0.08);
		border: 1px solid var(--border);
		padding: 2rem 2.5rem;
		transform: translateY(-2rem);
	}
	.stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; }
	.stat-icon {
		width: 56px; height: 56px; border-radius: 1rem;
		display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem;
	}
	.stat-icon svg { width: 28px; height: 28px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.stat-icon.blue   { background: #eff6ff; } .stat-icon.blue   svg { stroke: #3b82f6; }
	.stat-icon.teal   { background: #f0fdfa; } .stat-icon.teal   svg { stroke: #14b8a6; }
	.stat-icon.purple { background: #faf5ff; } .stat-icon.purple svg { stroke: #a855f7; }
	.stat-icon.orange { background: #fff7ed; } .stat-icon.orange svg { stroke: #f97316; }
	.stat-num { font-size: 1.5rem; font-weight: 900; color: var(--text); line-height: 1; }
	.stat-lbl { font-size: 0.875rem; color: var(--text-muted); font-weight: 600; }

	/* ── Section base ── */
	.sec { padding: 5rem 2rem; }
	.sec-head { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
	.sec-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 900; color: var(--text); margin-bottom: 0.4rem; }
	.sec-head h2.white { color: white; }
	.sec-bar {
		width: 72px; height: 5px; border-radius: 9999px;
		margin: 0.75rem auto 1.25rem;
	}
	.sec-bar.teal   { background: var(--secondary); }
	.sec-bar.blue   { background: var(--primary); }
	.sec-bar.orange { background: var(--cta); }
	.sec-sub { font-size: 1.05rem; color: var(--text-muted); }
	.sec-sub.muted-light { color: #94a3b8; }

	/* ── App Features ── */
	.features-bg { background: var(--bg); }
	.features-grid {
		max-width: 1100px; margin: 0 auto;
		display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
	}
	.feat-card {
		background: white; border-radius: 1.25rem; padding: 2rem;
		border: 1px solid var(--border);
		transition: transform 0.25s, box-shadow 0.25s;
	}
	.feat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,102,204,0.1); }
	.feat-card-icon {
		width: 64px; height: 64px; border-radius: 1rem;
		background: rgba(0,184,169,0.1);
		display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
		transition: background 0.25s;
	}
	.feat-card:hover .feat-card-icon { background: var(--secondary); }
	.feat-card-icon svg { width: 32px; height: 32px; stroke: var(--secondary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s; }
	.feat-card:hover .feat-card-icon svg { stroke: white; }
	.feat-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.75rem; }
	.feat-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; }

	/* ── Specialties ── */
	.spec-bg { background: white; }
	.spec-grid {
		max-width: 1100px; margin: 0 auto;
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
	}
	.spec-card {
		display: flex; align-items: center; gap: 1rem;
		padding: 1.25rem 1.5rem;
		border-radius: 1.25rem;
		background: var(--bg); border: 1px solid var(--border);
		text-decoration: none;
		transition: background 0.25s, border-color 0.25s, transform 0.2s;
	}
	.spec-card:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
	.spec-icon {
		width: 48px; height: 48px; border-radius: 50%;
		background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	}
	.spec-icon svg { width: 24px; height: 24px; stroke: var(--primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.spec-card h3 { font-size: 1rem; font-weight: 800; color: var(--text); transition: color 0.25s; margin: 0; }
	.spec-card:hover h3 { color: white; }

	/* ── How It Works ── */
	.how-bg {
		background: #0f172a;
		position: relative; overflow: hidden;
	}
	.how-bg::before {
		content: ''; position: absolute;
		top: -120px; right: -120px;
		width: 400px; height: 400px;
		background: rgba(0,102,204,0.25); border-radius: 50%; filter: blur(80px);
	}
	.how-bg::after {
		content: ''; position: absolute;
		bottom: -120px; left: -120px;
		width: 400px; height: 400px;
		background: rgba(0,184,169,0.15); border-radius: 50%; filter: blur(80px);
	}
	.how-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
	.steps-grid {
		display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
		position: relative;
	}
	.steps-grid::before {
		content: ''; position: absolute;
		top: 2.5rem; right: 12.5%; left: 12.5%;
		height: 2px;
		background: linear-gradient(to left, var(--cta), var(--secondary), var(--primary));
		opacity: 0.3;
	}
	.step-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
	.step-circle {
		width: 80px; height: 80px; border-radius: 50%;
		background: #1e293b;
		display: flex; align-items: center; justify-content: center;
		margin-bottom: 1.5rem; position: relative; z-index: 1;
		box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	}
	.step-circle::before {
		content: ''; position: absolute; inset: 0; border-radius: 50%;
		background: linear-gradient(135deg, rgba(0,102,204,0.25), rgba(0,184,169,0.2));
	}
	.step-circle svg { width: 32px; height: 32px; stroke: var(--secondary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; }
	.step-num {
		position: absolute; top: -6px; left: -6px;
		width: 28px; height: 28px; border-radius: 50%;
		background: var(--cta); color: white;
		font-size: 0.8rem; font-weight: 900;
		display: flex; align-items: center; justify-content: center;
		border: 2px solid #0f172a; z-index: 2;
	}
	.step-item h3 { font-size: 1.1rem; font-weight: 800; color: white; margin-bottom: 0.6rem; }
	.step-item p { font-size: 0.875rem; color: #94a3b8; line-height: 1.75; }

	/* ── Doctor Section ── */
	.doctor-bg { background: var(--bg); }
	.doctor-card {
		max-width: 1100px; margin: 0 auto;
		background: white; border-radius: 2rem;
		box-shadow: 0 20px 60px rgba(0,0,0,0.06);
		border: 1px solid var(--border);
		overflow: hidden;
		display: grid; grid-template-columns: 1fr 1fr;
	}
	.doctor-text { padding: 4rem; display: flex; flex-direction: column; justify-content: center; }
	.doctor-tag {
		display: inline-block;
		background: rgba(0,102,204,0.08); color: var(--primary);
		font-size: 0.8rem; font-weight: 700;
		padding: 0.35rem 1rem; border-radius: 9999px; margin-bottom: 1.25rem;
		width: fit-content;
	}
	.doctor-text h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 900; margin-bottom: 1rem; }
	.doctor-text > p { color: var(--text-muted); line-height: 1.85; margin-bottom: 2rem; font-size: 1rem; }
	.doctor-feats { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
	.doctor-feats li { display: flex; align-items: flex-start; gap: 1rem; }
	.df-icon {
		width: 40px; height: 40px; border-radius: 50%;
		background: rgba(0,102,204,0.08);
		display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	}
	.df-icon svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.doctor-feats span { font-size: 0.975rem; font-weight: 600; line-height: 1.65; color: var(--text); padding-top: 0.5rem; }
	.doctor-img-wrap {
		position: relative; overflow: hidden;
		background: linear-gradient(135deg, rgba(0,102,204,0.06), rgba(0,184,169,0.06));
	}
	.doctor-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

	/* ── Download ── */
	.download-bg {
		background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--secondary) 100%);
		padding: 6rem 2rem; text-align: center; position: relative; overflow: hidden;
	}
	.download-bg::before {
		content: '';
		position: absolute; inset: 0;
		background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.07) 1px, transparent 0);
		background-size: 40px 40px;
	}
	.download-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }
	.dl-icon { width: 64px; height: 64px; margin: 0 auto 1.5rem; opacity: 0.82; }
	.dl-icon svg { width: 64px; height: 64px; stroke: white; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
	.download-inner h2 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 900; color: white; margin-bottom: 1rem; line-height: 1.2; }
	.download-inner > p { font-size: 1.1rem; color: rgba(255,255,255,0.82); margin-bottom: 2.5rem; line-height: 1.75; }
	.store-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
	.store-btn {
		display: inline-flex; align-items: center; gap: 0.75rem;
		background: #0f172a; color: white;
		padding: 0.9rem 1.75rem; border-radius: 0.875rem;
		text-decoration: none;
		box-shadow: 0 8px 24px rgba(0,0,0,0.25);
		transition: background 0.2s, transform 0.2s;
	}
	.store-btn:hover { background: black; transform: translateY(-2px); }
	.store-btn svg { width: 32px; height: 32px; flex-shrink: 0; }
	.store-btn-text { text-align: right; line-height: 1.25; }
	.store-btn-text .small { font-size: 0.75rem; color: #94a3b8; display: block; }
	.store-btn-text .big { font-size: 1.05rem; font-weight: 800; display: block; }
	.feat-card, .spec-card, .step-item, .doctor-text, .store-btn { min-width: 0; }

	/* ── Responsive ── */
	@media (max-width: 1024px) {
		.hero-inner { gap: 2.5rem; }
		.stats-inner { grid-template-columns: repeat(2, 1fr); padding: 2rem; }
		.features-grid { grid-template-columns: repeat(2, 1fr); }
		.spec-grid { grid-template-columns: repeat(2, 1fr); }
	}
	@media (max-width: 900px) {
		.hero-inner { grid-template-columns: 1fr; align-items: center; }
		.hero-image { display: none; }
		.hero { padding: 4.5rem 2rem 4rem; }
		.hero-text { text-align: center; }
		.hero-text p { margin-left: auto; margin-right: auto; margin-bottom: 2rem; }
		.hero-btns { justify-content: center; }
		.doctor-card { grid-template-columns: 1fr; }
		.doctor-img-wrap { height: 280px; }
		.doctor-text { padding: 3rem 2.25rem; }
		.steps-grid { grid-template-columns: repeat(2, 1fr); }
		.steps-grid::before { display: none; }
	}
	@media (max-width: 640px) {
		.hero, .stats-wrap, .sec, .download-bg { padding-left: 1rem; padding-right: 1rem; }
		.stats-inner {
		grid-template-columns: 1fr;
		padding: 1.5rem;
		transform: translateY(-1.5rem);
		}
		.spec-grid { grid-template-columns: 1fr; }
		.features-grid { grid-template-columns: 1fr; }
		.steps-grid { grid-template-columns: 1fr; }
		.hero-btns { flex-direction: column; }
		.btn-hero-cta, .btn-hero-outline { width: 100%; justify-content: center; }
		.spec-card { padding: 1rem 1.1rem; }
		.doctor-card { border-radius: 1.5rem; }
		.doctor-text { padding: 2rem 1.25rem; }
		.store-btns { flex-direction: column; }
		.store-btn { width: 100%; justify-content: center; padding-inline: 1.25rem; }
		.store-btn-text { text-align: center; }
	}

/* Source: about.html */
body {
		padding-top: 72px;
		}

		/* ── Hero ── */
		.hero {
		background: linear-gradient(
			135deg,
			var(--primary-dark) 0%,
			var(--primary) 55%,
			var(--secondary) 100%
		);
		padding: 4.5rem 2rem 5rem;
		text-align: center;
		position: relative;
		overflow: hidden;
		}
		.hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(
			ellipse at 30% 50%,
			rgba(0, 184, 169, 0.25) 0%,
			transparent 65%
		);
		}
		.hero-content {
		position: relative;
		z-index: 1;
		max-width: 700px;
		margin: 0 auto;
		}
		.hero-badge {
		display: inline-block;
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.3);
		color: rgba(255, 255, 255, 0.9);
		font-size: 0.875rem;
		font-weight: 600;
		padding: 0.4rem 1.2rem;
		border-radius: 9999px;
		backdrop-filter: blur(8px);
		margin-bottom: 1.5rem;
		}
		.hero h1 {
		font-size: clamp(2rem, 5vw, 3.5rem);
		font-weight: 900;
		color: var(--white);
		line-height: 1.2;
		margin-bottom: 1.25rem;
		}
		.hero h1 span {
		color: var(--secondary);
		}
		.hero p {
		font-size: 1.1rem;
		color: rgba(255, 255, 255, 0.85);
		max-width: 560px;
		margin: 0 auto;
		}

		/* ── Sections ── */
		section {
		padding: 2rem 2rem;
		}

		.mission {
		background: var(--white);
		}
		.mission-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: center;
		}
		.mission-visual {
		border-radius: 1.5rem;
		overflow: hidden;
		background: linear-gradient(
			135deg,
			var(--primary-dark),
			var(--primary),
			var(--secondary)
		);
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		box-shadow: 0 20px 60px rgba(0, 102, 204, 0.12);
		}
		.mission-icon-wrap {
		width: 160px;
		height: 160px;
		background: rgba(255, 255, 255, 0.15);
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10px);
		}
		.mission-icon-wrap svg {
		width: 80px;
		height: 80px;
		stroke: white;
		fill: none;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		}
		.mission-float {
		position: absolute;
		background: white;
		border-radius: 1rem;
		padding: 0.75rem 1.25rem;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
		font-weight: 700;
		font-size: 0.85rem;
		color: var(--text);
		display: flex;
		align-items: center;
		gap: 0.5rem;
		}
		.mission-float.top {
		top: 1.5rem;
		left: 1.5rem;
		}
		.mission-float.bottom {
		bottom: 1.5rem;
		right: 1.5rem;
		}
		.badge-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--secondary);
		flex-shrink: 0;
		}
		.badge-dot.orange {
		background: var(--cta);
		}

		/* ── Stats ── */
		.stats {
		background: linear-gradient(
			135deg,
			var(--primary-dark),
			var(--primary)
		);
		padding: 4rem 2rem;
		}
		.stats-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
		text-align: center;
		}
		.stat-number {
		font-size: 2.5rem;
		font-weight: 900;
		color: var(--secondary);
		line-height: 1;
		}
		.stat-label {
		font-size: 0.95rem;
		color: rgba(255, 255, 255, 0.82);
		margin-top: 0.5rem;
		}

		/* ── Values ── */
		.values {
		background: var(--bg);
		}
		.values-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 1.5rem;
		}
		.value-card {
		background: var(--white);
		border-radius: 1.25rem;
		padding: 2rem 1.75rem;
		border: 1px solid var(--border);
		transition:
			transform 0.25s,
			box-shadow 0.25s;
		}
		.value-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0, 102, 204, 0.1);
		}
		.value-icon {
		width: 56px;
		height: 56px;
		border-radius: 1rem;
		background: linear-gradient(
			135deg,
			rgba(0, 102, 204, 0.1),
			rgba(0, 184, 169, 0.08)
		);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.25rem;
		}
		.value-icon svg {
		width: 28px;
		height: 28px;
		stroke: var(--primary);
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		}
		.value-card h3 {
		font-size: 1.1rem;
		font-weight: 800;
		margin-bottom: 0.5rem;
		}
		.value-card p {
		font-size: 0.9rem;
		color: var(--text-muted);
		line-height: 1.7;
		}

		/* ── Team ── */      .team {
		background: var(--white);
		}
		.team-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		gap: 2rem;
		}
		.team-card {
		border-radius: 1.25rem;
		overflow: hidden;
		border: 1px solid var(--border);
		text-align: center;
		transition:
			transform 0.25s,
			box-shadow 0.25s;
		background: #fff;
		}
		.team-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0, 102, 204, 0.1);
		}
		.team-avatar {
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 4rem;
		}
		.team-avatar.blue {
		background: linear-gradient(135deg, #e0eeff, #c7deff);
		}
		.team-avatar.teal {
		background: linear-gradient(135deg, #d6f5f3, #a9ece8);
		}
		.team-avatar.orange {
		background: linear-gradient(135deg, #ffe8d6, #ffd0b3);
		}
		.team-avatar.purple {
		background: linear-gradient(135deg, #ede9ff, #d8d1ff);
		}
		.team-info {
		padding: 1.25rem;
		}
		.team-info h3 {
		font-size: 1.05rem;
		font-weight: 800;
		color: var(--text);
		margin-bottom: 0.25rem;
		}
		.team-info p {
		font-size: 0.875rem;
		color: var(--primary);
		font-weight: 600;
		}
		.doctor-card-item {
		text-align: right;
		}
		.doctor-card-link-wrapper {
		position: relative;
		}
		.doctor-card-link {
		display: block;
		color: inherit;
		text-decoration: none;
		height: 100%;
		}
		.doctor-card-link:focus-visible {
		outline: 3px solid rgba(0, 102, 204, 0.35);
		outline-offset: 4px;
		}
		.doctor-photo-wrap {
		position: relative;
		height: 320px;
		padding: 1rem 1rem 0;
		align-items: flex-end;
		}
		.doctor-photo-wrap::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 45%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
		pointer-events: none;
		}
		.doctor-photo {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		border-radius: 1rem 1rem 0 0;
		display: block;
		}
		.doctor-photo-center {
		object-position: center center;
		}
		.doctor-photo-right {
		object-position: 70% center;
		}
		.doctor-photo-left {
		object-position: 30% center;
		}
		.doctor-photo-placeholder {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.28));
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--primary-dark);
		font-size: clamp(3rem, 6vw, 4.5rem);
		font-weight: 900;
		}
		.doctor-info {
		padding: 1.25rem 1.25rem 1.5rem;
		}
		.doctor-info h3 {
		margin-bottom: 0.45rem;
		}
		.doctor-info p {
		color: var(--text-muted);
		font-weight: 700;
		line-height: 1.7;
		}
		.doctor-empty-state {
		background: linear-gradient(135deg, rgba(0, 102, 204, 0.06), rgba(0, 184, 169, 0.08));
		border: 1px solid rgba(0, 102, 204, 0.14);
		border-radius: 1.5rem;
		padding: 2rem;
		text-align: center;
		}
		.doctor-empty-state strong {
		display: block;
		font-size: 1.1rem;
		color: var(--text);
		margin-bottom: 0.5rem;
		}
		.doctor-empty-state p {
		color: var(--text-muted);
		}

		/* —— Single Doctor Page —— */
		.doctor-profile-hero {
		position: relative;
		padding: 4rem 2rem 5rem;
		background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 52%, var(--secondary) 100%);
		overflow: hidden;
		}
		.doctor-profile-hero::before,
		.doctor-profile-hero::after {
		content: "";
		position: absolute;
		border-radius: 50%;
		filter: blur(20px);
		opacity: 0.32;
		}
		.doctor-profile-hero::before {
		width: 280px;
		height: 280px;
		top: -100px;
		right: -40px;
		background: rgba(255, 255, 255, 0.18);
		}
		.doctor-profile-hero::after {
		width: 340px;
		height: 340px;
		bottom: -160px;
		left: -80px;
		background: rgba(255, 138, 52, 0.2);
		}
		.doctor-profile-shell {
		max-width: 1120px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		}
		.doctor-profile-hero .doctor-profile-shell {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
		gap: 2rem;
		align-items: center;
		}
		.doctor-profile-copy {
		color: var(--white);
		}
		.doctor-profile-badge {
		display: inline-flex;
		align-items: center;
		padding: 0.45rem 1rem;
		border-radius: 9999px;
		font-size: 0.85rem;
		font-weight: 700;
		margin-bottom: 1.25rem;
		color: rgba(255, 255, 255, 0.94);
		background: rgba(255, 255, 255, 0.12);
		border: 1px solid rgba(255, 255, 255, 0.22);
		backdrop-filter: blur(10px);
		}
		.doctor-profile-title {
		font-size: clamp(2.2rem, 4vw, 3.8rem);
		line-height: 1.1;
		margin-bottom: 0.75rem;
		color: var(--white);
		}
		.doctor-profile-specialty {
		font-size: 1.1rem;
		font-weight: 700;
		color: rgba(255, 255, 255, 0.92);
		margin-bottom: 1rem;
		}
		.doctor-profile-summary {
		max-width: 640px;
		font-size: 1.02rem;
		line-height: 1.95;
		color: rgba(255, 255, 255, 0.85);
		}
		.doctor-profile-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		margin-top: 2rem;
		}
		.doctor-profile-cta,
		.doctor-profile-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		border-radius: 9999px;
		padding: 0.85rem 1.6rem;
		text-decoration: none;
		font-weight: 800;
		transition: transform 0.2s, opacity 0.2s, background 0.2s;
		}
		.doctor-profile-cta {
		background: var(--cta);
		color: var(--white);
		box-shadow: 0 16px 32px rgba(255, 138, 52, 0.24);
		}
		.doctor-profile-link {
		color: var(--white);
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.18);
		}
		.doctor-profile-cta:hover,
		.doctor-profile-link:hover {
		transform: translateY(-2px);
		}
		.doctor-profile-visual {
		position: relative;
		}
		.doctor-profile-image-card {
		position: relative;
		border-radius: 2rem;
		overflow: hidden;
		background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
		border: 1px solid rgba(255, 255, 255, 0.18);
		min-height: 560px;
		box-shadow: 0 28px 70px rgba(8, 22, 59, 0.26);
		}
		.doctor-profile-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		}
		.doctor-profile-image-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(209, 234, 255, 0.75));
		color: var(--primary-dark);
		font-size: clamp(4rem, 10vw, 6rem);
		font-weight: 900;
		}
		.doctor-profile-floating-card {
		position: absolute;
		right: 1.5rem;
		bottom: 1.5rem;
		max-width: 260px;
		padding: 1rem 1.15rem;
		background: rgba(255, 255, 255, 0.94);
		border-radius: 1.2rem;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
		}
		.doctor-profile-floating-card strong {
		display: block;
		color: var(--text);
		margin-bottom: 0.25rem;
		}
		.doctor-profile-floating-card span {
		font-size: 0.86rem;
		line-height: 1.7;
		color: var(--text-muted);
		}
		.doctor-profile-body {
		padding: 0 2rem 5rem;
		}
		.doctor-profile-grid,
		.doctor-profile-lower-grid {
		display: grid;
		gap: 1.5rem;
		}
		.doctor-profile-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
		margin-top: -2.5rem;
		}
		.doctor-profile-lower-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: 1.5rem;
		}
		.doctor-profile-panel {
		background: var(--white);
		border: 1px solid var(--border);
		border-radius: 1.75rem;
		padding: 2rem;
		box-shadow: var(--shadow-sm);
		}
		.doctor-flexible-sections {
		display: grid;
		gap: 1.5rem;
		margin-top: 1.5rem;
		}
		.doctor-flex-section-default {
		background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
		}
		.doctor-flex-section-highlight {
		background: linear-gradient(135deg, rgba(0, 102, 204, 0.08), rgba(0, 184, 169, 0.08));
		border-color: rgba(0, 102, 204, 0.14);
		}
		.doctor-flex-section-info {
		background: linear-gradient(135deg, rgba(255, 138, 52, 0.08), rgba(255, 255, 255, 0.9));
		border-color: rgba(255, 138, 52, 0.16);
		}
		.doctor-panel-heading {
		margin-bottom: 1.5rem;
		}
		.doctor-panel-heading h2 {
		font-size: 1.55rem;
		color: var(--text);
		margin-top: 0.4rem;
		}
		.doctor-panel-text,
		.doctor-content-entry p {
		color: var(--text-muted);
		line-height: 1.95;
		}
		.doctor-content-entry > * + * {
		margin-top: 1rem;
		}
		.doctor-flex-section-content {
		color: var(--text-muted);
		line-height: 1.95;
		}
		.doctor-flex-section-content > * + * {
		margin-top: 1rem;
		}
		.doctor-flex-section-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		margin-top: 1.25rem;
		padding: 0.75rem 1.3rem;
		border-radius: 9999px;
		text-decoration: none;
		font-weight: 800;
		color: var(--primary);
		background: rgba(0, 102, 204, 0.08);
		transition: transform 0.2s, background 0.2s;
		}
		.doctor-flex-section-link:hover {
		transform: translateY(-2px);
		background: rgba(0, 102, 204, 0.14);
		}
		.doctor-profile-sidebar {
		display: flex;
		flex-direction: column;
		}
		.doctor-quick-facts {
		background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
		}
		.doctor-fact-card {
		padding: 1rem 1.1rem;
		border-radius: 1rem;
		border: 1px solid rgba(0, 102, 204, 0.09);
		background: rgba(0, 102, 204, 0.03);
		}
		.doctor-fact-card + .doctor-fact-card {
		margin-top: 0.85rem;
		}
		.doctor-fact-label {
		display: block;
		font-size: 0.8rem;
		color: var(--text-muted);
		margin-bottom: 0.35rem;
		}
		.doctor-fact-card strong {
		color: var(--text);
		line-height: 1.7;
		}
		.doctor-experience-list {
		list-style: none;
		display: grid;
		gap: 0.9rem;
		}
		.doctor-experience-list li {
		position: relative;
		padding: 1rem;
		border-radius: 1rem;
		padding-inline-start: 3rem;
		background: rgba(0, 184, 169, 0.05);
		color: var(--text);
		line-height: 1.85;
		}
		.doctor-experience-list li::before {
		content: "";
		position: absolute;
		inset-inline-start: 1rem;
		top: 1.15rem;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--secondary), var(--primary));
		box-shadow: 0 0 0 6px rgba(0, 184, 169, 0.12);
		}
		.doctor-schedule-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
		}
		.doctor-schedule-card {
		border-radius: 1.15rem;
		padding: 1rem 1.1rem;
		background: linear-gradient(145deg, rgba(0, 102, 204, 0.06), rgba(0, 184, 169, 0.07));
		border: 1px solid rgba(0, 102, 204, 0.11);
		}
		.doctor-schedule-card strong {
		display: block;
		margin-bottom: 0.35rem;
		color: var(--text);
		}
		.doctor-schedule-card span,
		.doctor-schedule-empty p {
		color: var(--text-muted);
		}
		.doctor-schedule-empty {
		padding: 1.25rem;
		border-radius: 1rem;
		background: rgba(255, 138, 52, 0.08);
		border: 1px solid rgba(255, 138, 52, 0.18);
		margin-bottom: 1rem;
		}

		.doctor-certifications-panel,
		.doctor-experience-panel,
		.doctor-schedule-panel {
		height: 100%;
		}
		.doctor-schedule-empty strong {
		display: block;
		color: var(--text);
		margin-bottom: 0.45rem;
		}
		.doctor-profile-cta-inline {
		margin-top: 1.5rem;
		}

		/* —— Doctors Directory —— */
		.doctors-page-layout {
		background:
			radial-gradient(circle at top right, rgba(0, 102, 204, 0.08), transparent 22%),
			linear-gradient(180deg, #f4f8fc 0%, #f7fafc 40%, #f3f7fb 100%);
		}
		.doctors-page-content {
		padding: 0;
		}
		.doctors-page-editor-shell {
		display: grid;
		gap: 1rem;
		margin-bottom: 0;
		}
		.doctors-page-editor-title {
		font-size: clamp(2rem, 4vw, 3.2rem);
		color: var(--text);
		margin: 0;
		}
		.doctors-page-editor-description {
		max-width: 720px;
		color: var(--text-muted);
		line-height: 1.9;
		margin: 0;
		}
		.doctors-page-content-shell {
		max-width: 1360px;
		margin: 0 auto;
		padding: 3rem 2rem 5rem;
		}
		.doctors-page-content-shell.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		}
		.doctors-page-content-shell > .wp-block-shortcode,
		.doctors-page-content-shell > .wp-block-spacer,
		.doctors-page-content-shell > .mission {
		max-width: none;
		}
		.androcare360-page-layout,
		.androcare360-page-layout > * {
		width: 100%;
		}
		.doctors-page-editor-extra {
		margin-top: 0;
		}
		.doctors-page-editor-section-title {
		font-size: clamp(1.45rem, 3vw, 2rem);
		color: var(--text);
		margin: 0;
		}
		.doctors-page-editor-columns {
		gap: 1.25rem;
		}
		.doctors-page-editor-card {
		height: 100%;
		padding: 1.5rem;
		border-radius: 1.35rem;
		background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
		border: 1px solid rgba(0, 102, 204, 0.1);
		box-shadow: 0 16px 32px rgba(15, 23, 42, 0.04);
		}
		.doctors-page-editor-card h3 {
		margin-bottom: 0.75rem;
		color: var(--text);
		}
		.doctors-page-editor-card p {
		margin: 0;
		color: var(--text-muted);
		line-height: 1.85;
		}
		.doctors-directory-shell {
		max-width: 1360px;
		margin: 0 auto;
		}
		.doctors-directory-nav-wrap {
		position: sticky;
		top: 40px;
		z-index: 40;
		margin-bottom: 2.5rem;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(12px);
		border-bottom: 2px solid var(--border);
		border-radius: 0;
		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
		transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease;
		border-radius: 25px;
		overflow: hidden;
		}
		.doctors-directory-nav {
		display: flex;
		gap: 0.25rem;
		overflow-x: auto;
		max-width: 1320px;
		margin: 0 auto;
		padding: 0.75rem 1.25rem 0;
		scrollbar-width: thin;
		transition: padding 0.2s ease, gap 0.2s ease;
		}
		.doctors-directory-nav-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		min-height: 52px;
		padding: 0.9rem 1.35rem 1rem;
		border-radius: 1rem 1rem 0 0;
		color: var(--text-muted);
		text-decoration: none;
		font-weight: 800;
		background: rgba(255, 255, 255, 0.88);
		border: 1px solid transparent;
		border-bottom: 0;
		transition:
			transform 0.2s ease,
			background 0.2s ease,
			color 0.2s ease,
			min-height 0.2s ease,
			padding 0.2s ease,
			border-radius 0.2s ease,
			font-size 0.2s ease;
		}
		.doctors-directory-nav-link:hover {
		transform: translateY(-1px);
		background: rgba(255, 255, 255, 0.98);
		color: var(--primary);
		}
		.doctors-directory-nav-wrap.is-compact {
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
		border-bottom-color: rgba(0, 102, 204, 0.12);
		border-radius: 0;
		}
		.doctors-directory-nav-wrap.is-compact .doctors-directory-nav {
		gap: 0.2rem;
		padding: 0.55rem 1rem 0;
		}
		.doctors-directory-nav-wrap.is-compact .doctors-directory-nav-link {
		min-height: 44px;
		padding: 0.7rem 1rem 0.75rem;
		border-radius: 0.85rem 0.85rem 0 0;
		font-size: 0.9rem;
		}
		.doctors-directory-body {
		padding: 0 0 2rem;
		}
		.doctors-directory-section + .doctors-directory-section {
		margin-top: 3rem;
		}
		.doctors-directory-section {
		background: #fff;
		border: 1px solid var(--border);
		border-radius: 1.5rem;
		padding: 2rem;
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
		}
		.doctors-directory-section-head {
		margin-bottom: 2rem;
		display: grid;
		gap: 0.55rem;
		}
		.doctors-directory-section-head h2 {
		font-size: clamp(1.5rem, 3vw, 2.2rem);
		color: var(--text);
		margin: 0.15rem 0 0;
		}
		.doctors-directory-section-head p {
		max-width: 760px;
		color: var(--text-muted);
		margin: 0;
		line-height: 1.85;
		}
		.doctors-directory-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 2rem;
		}
		.doctors-directory-card {
		border-radius: 1.25rem;
		overflow: hidden;
		background: var(--white);
		border: 1px solid var(--border);
		box-shadow: none;
		transition: transform 0.25s, box-shadow 0.25s;
		}
		.doctors-directory-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 16px 40px rgba(0, 102, 204, 0.1);
		}
		.doctors-directory-card-link {
		display: block;
		color: inherit;
		text-decoration: none;
		height: 100%;
		text-align: right;
		}
		.doctors-directory-card-link:focus-visible {
		outline: 3px solid rgba(0, 102, 204, 0.35);
		outline-offset: 4px;
		}
		.doctors-directory-card-media {
		position: relative;
		height: 320px;
		padding: 1rem 1rem 0;
		align-items: flex-end;
		}
		.doctors-directory-card-media::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 45%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
		pointer-events: none;
		}
		.doctors-directory-card-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		border-radius: 1.1rem 1.1rem 0 0;
		display: block;
		}
		.doctors-directory-card-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(209, 234, 255, 0.78));
		color: var(--primary-dark);
		font-size: clamp(3rem, 7vw, 4.2rem);
		font-weight: 900;
		}
		.doctors-directory-card-blue .doctors-directory-card-media {
		background: linear-gradient(135deg, #e0eeff, #c7deff);
		}
		.doctors-directory-card-teal .doctors-directory-card-media {
		background: linear-gradient(135deg, #d6f5f3, #a9ece8);
		}
		.doctors-directory-card-orange .doctors-directory-card-media {
		background: linear-gradient(135deg, #ffe8d6, #ffd0b3);
		}
		.doctors-directory-card-purple .doctors-directory-card-media {
		background: linear-gradient(135deg, #ede9ff, #d8d1ff);
		}
		.doctors-directory-card-body {
		padding: 1rem 1.25rem 1.2rem;
		}
		.doctors-directory-card-body h3 {
		font-size: 1rem;
		color: var(--text);
		margin-bottom: 0.45rem;
		}
		.doctors-directory-card-specialty {
		color: var(--text-muted);
		line-height: 1.8;
		margin-bottom: 0.9rem;
		font-size: 0.92rem;
		}
		.doctors-directory-card-experience {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
		padding: 0.3rem 0.85rem;
		border-radius: 9999px;
		background: rgba(0, 102, 204, 0.08);
		color: var(--primary);
		font-weight: 800;
		font-size: 0.85rem;
		}
		.doctors-directory-empty-state {
		margin-top: 1rem;
		}

		/* ── CTA ── */
		.cta-section {
		background: linear-gradient(
			135deg,
			var(--primary-dark),
			var(--primary),
			var(--secondary)
		);
		text-align: center;
		padding: 5rem 2rem;
		}
		.cta-section h2 {
		font-size: clamp(1.75rem, 4vw, 2.75rem);
		font-weight: 900;
		color: white;
		margin-bottom: 1rem;
		}
		.cta-section p {
		color: rgba(255, 255, 255, 0.85);
		font-size: 1.05rem;
		margin-bottom: 2rem;
		}

		/* ── Responsive ── */
		@media (max-width: 768px) {
		.mission-grid {
			grid-template-columns: 1fr;
			gap: 2.5rem;
		}
		.stats-grid {
			grid-template-columns: repeat(2, 1fr);
		}
		.doctor-profile-hero .doctor-profile-shell,
		.doctor-profile-grid,
		.doctor-profile-lower-grid {
			grid-template-columns: 1fr;
		}
		.doctor-profile-body {
			padding-left: 1rem;
			padding-right: 1rem;
		}
		.doctor-profile-grid {
			margin-top: -2rem;
		}
		.doctor-profile-image-card {
			min-height: 460px;
		}
		.doctor-schedule-grid {
			grid-template-columns: 1fr;
		}
		.doctors-page-hero {
			padding-top: 3.75rem;
			padding-bottom: 2.75rem;
		}
		.doctors-page-content-shell {
			padding-top: 1.5rem;
			padding-left: 1.25rem;
			padding-right: 1.25rem;
		}
		.doctors-directory-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		}
		@media (max-width: 560px) {
		.doctor-profile-hero {
			padding-left: 1rem;
			padding-right: 1rem;
		}
		.doctor-profile-actions {
			flex-direction: column;
		}
		.doctor-profile-cta,
		.doctor-profile-link {
			width: 100%;
		}
		.doctor-profile-panel {
			padding: 1.4rem;
			border-radius: 1.3rem;
		}
		.doctor-profile-image-card {
			min-height: 360px;
			border-radius: 1.5rem;
		}
		.doctor-profile-floating-card {
			right: 1rem;
			left: 1rem;
			bottom: 1rem;
			max-width: none;
		}
		.doctors-directory-body,
		.doctors-page-content,
		.doctors-page-content-shell {
			padding-left: 1rem;
			padding-right: 1rem;
		}
		.doctors-directory-nav-wrap {
			margin-bottom: 2rem;
		}
		.doctors-directory-nav {
			padding: 0.75rem 0.75rem 0;
		}
		.doctors-directory-section {
			padding: 1.35rem;
			border-radius: 1.2rem;
		}
		.doctors-directory-grid {
			grid-template-columns: 1fr;
		}
		.doctors-directory-nav-wrap.is-compact .doctors-directory-nav {
			gap: 0.2rem;
			padding: 0.5rem 0.75rem 0;
		}
		.doctors-directory-nav-wrap.is-compact .doctors-directory-nav-link {
			min-height: 40px;
			padding: 0.55rem 0.85rem 0.6rem;
			font-size: 0.9rem;
		}
		}
		@media (max-width: 320px) {
		.doctor-profile-title {
			font-size: 1.8rem;
		}
		.doctor-profile-panel {
			padding: 1.1rem;
		}
		.doctors-directory-nav-link {
			min-height: 44px;
			padding-inline: 0.85rem;
			font-size: 0.85rem;
		}
		.doctors-directory-nav-wrap.is-compact .doctors-directory-nav-link {
			min-height: 36px;
			padding-inline: 0.8rem;
			font-size: 0.8rem;
		}
		}

/* Source: services.html */
/* ── Page body offset for fixed nav ── */
		body {
		padding-top: 72px;
		background:
			radial-gradient(circle at top right, rgba(0, 102, 204, 0.08), transparent 22%),
			linear-gradient(180deg, #f4f8fc 0%, #f7fafc 40%, #f3f7fb 100%);
		}

		/* ── Hero ── */
		.hero {
		background: linear-gradient(
			135deg,
			var(--primary-dark) 0%,
			var(--primary) 55%,
			var(--secondary) 100%
		);
		padding: 4.5rem 2rem 5rem;
		text-align: center;
		position: relative;
		overflow: hidden;
		isolation: isolate;
		}
		.hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(
			ellipse at 30% 60%,
			rgba(0, 184, 169, 0.25),
			transparent 65%
		);
		}
		.hero::after {
		content: "";
		position: absolute;
		inset: auto -10% -35% auto;
		width: 360px;
		height: 360px;
		background: radial-gradient(
			circle,
			rgba(255, 255, 255, 0.16),
			transparent 65%
		);
		pointer-events: none;
		}
		.hero-content {
		position: relative;
		z-index: 1;
		max-width: 860px;
		margin: 0 auto;
		}
		.hero-badge {
		display: inline-block;
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.3);
		color: rgba(255, 255, 255, 0.92);
		font-size: 0.875rem;
		font-weight: 600;
		padding: 0.4rem 1.25rem;
		border-radius: 9999px;
		backdrop-filter: blur(8px);
		margin-bottom: 1.25rem;
		}
		.hero h1 {
		font-size: clamp(2rem, 5vw, 3.25rem);
		font-weight: 900;
		color: white;
		line-height: 1.2;
		margin-bottom: 1rem;
		}
		.hero h1 span {
		color: var(--secondary);
		}
		.hero p {
		font-size: 1.05rem;
		color: rgba(255, 255, 255, 0.85);
		max-width: 680px;
		margin: 0 auto;
		}
		.hero-highlights {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.9rem;
		margin-top: 2rem;
		}
		.hero-highlights li {
		background: rgba(255, 255, 255, 0.12);
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 1.1rem;
		padding: 1rem 1.1rem;
		backdrop-filter: blur(10px);
		box-shadow: 0 14px 30px rgba(15, 32, 87, 0.12);
		}
		.hero-highlights strong {
		display: block;
		color: white;
		font-size: 1rem;
		font-weight: 800;
		margin-bottom: 0.18rem;
		}
		.hero-highlights span {
		color: rgba(255, 255, 255, 0.78);
		font-size: 0.84rem;
		}

		/* ── Specialty Tabs ── */
		.tabs-section {
		background:
			radial-gradient(circle at top left, rgba(0, 184, 169, 0.07), transparent 20%),
			linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.98));
		}

		.tabs-nav-wrap {
		background: var(--white);
		border-bottom: 2px solid var(--border);
		position: sticky;
		top: 72px;
		z-index: 50;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		backdrop-filter: blur(14px);
		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
		}
		.tabs-nav-wrap::-webkit-scrollbar {
		height: 3px;
		}
		.tabs-nav-wrap::-webkit-scrollbar-thumb {
		background: var(--primary);
		border-radius: 4px;
		}

		.tabs-nav {
		display: flex;
		list-style: none;
		gap: 0.25rem;
		white-space: nowrap;
		max-width: 1100px;
		margin: 0 auto;
		padding: 0.75rem 1rem 0;
		}
		.tabs-nav li {
		display: flex;
		}

		.tab-btn {
		background: rgba(255, 255, 255, 0.84);
		border: 1px solid transparent;
		border-bottom: 3px solid transparent;
		padding: 0.95rem 1.2rem;
		font-family: "Cairo", sans-serif;
		font-size: 0.9rem;
		font-weight: 700;
		color: var(--text-muted);
		cursor: pointer;
		white-space: nowrap;
		transition:
			color 0.2s,
			border-color 0.2s,
			background 0.2s,
			transform 0.2s,
			box-shadow 0.2s;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		border-radius: 1rem 1rem 0 0;
		min-height: 52px;
		}

		.tab-btn:hover {
		color: var(--primary);
		background: rgba(0, 102, 204, 0.05);
		border-color: rgba(0, 102, 204, 0.1);
		transform: translateY(-1px);
		}
		.tab-btn.active {
		color: var(--primary);
		border-bottom-color: var(--primary);
		background: linear-gradient(
			180deg,
			rgba(0, 102, 204, 0.1),
			rgba(255, 255, 255, 0.96)
		);
		box-shadow: 0 10px 18px rgba(0, 102, 204, 0.08);
		}
		.tab-btn:focus-visible,
		.subtab-btn:focus-visible {
		outline: 3px solid rgba(0, 184, 169, 0.28);
		outline-offset: 2px;
		}
		.tab-btn svg {
		width: 20px;
		height: 20px;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex-shrink: 0;
		display: block;
		overflow: visible;
		}
		.tab-btn svg use {
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		}

		/* ── Panels ── */
		.panels {
		max-width: 1100px;
		margin: 0 auto;
		padding: 3rem 1.5rem 4rem;
		}
		.panel {
		display: none;
		}
		.panel.active {
		display: block;
		}

		.panel-header {
		margin-bottom: 2.25rem;
		max-width: 760px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66));
		border: 1px solid rgba(226, 232, 240, 0.8);
		border-radius: 1.5rem;
		padding: 1.6rem 1.6rem 1.35rem;
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
		backdrop-filter: blur(10px);
		}
		.panel-header h2 {
		font-size: clamp(1.5rem, 3vw, 2rem);
		font-weight: 900;
		color: var(--text);
		margin-bottom: 0.35rem;
		letter-spacing: -0.02em;
		line-height: 1.35;
		text-wrap: balance;
		}
		.panel-header p {
		color: var(--text-muted);
		font-size: 1rem;
		line-height: 1.8;
		max-width: 62ch;
		}

		/* ── Services Grid ── */
		.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
		gap: 1.5rem;
		align-items: stretch;
		}

		.service-card {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.98),
			rgba(248, 252, 255, 0.98)
		);
		border: 1px solid var(--border);
		border-radius: 1.25rem;
		padding: 1.75rem;
		transition:
			transform 0.25s,
			box-shadow 0.25s,
			border-color 0.25s,
			background 0.25s;
		display: flex;
		gap: 1.25rem;
		align-items: flex-start;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		}
		.service-card::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: 4px;
		background: linear-gradient(
			180deg,
			rgba(0, 102, 204, 0.8),
			rgba(0, 184, 169, 0.45)
		);
		opacity: 0;
		transition: opacity 0.25s;
		}
		.service-card::after {
		content: "";
		position: absolute;
		inset: auto -30px -30px auto;
		width: 110px;
		height: 110px;
		background: radial-gradient(circle, rgba(0, 184, 169, 0.1), transparent 70%);
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.25s;
		}
		.service-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
		border-color: rgba(0, 102, 204, 0.22);
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 1),
			rgba(240, 249, 255, 0.98)
		);
		}
		.service-card:hover::before {
		opacity: 1;
		}
		.service-card:hover::after {
		opacity: 1;
		}

		.service-icon {
		width: 56px;
		height: 56px;
		border-radius: 0.875rem;
		background: linear-gradient(
			135deg,
			rgba(0, 102, 204, 0.1),
			rgba(0, 184, 169, 0.08)
		);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.08);
		transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
		}
		.service-card:hover .service-icon {
		transform: scale(1.04);
		background: linear-gradient(
			135deg,
			rgba(0, 102, 204, 0.16),
			rgba(0, 184, 169, 0.14)
		);
		box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.14);
		}
		.service-icon svg {
		width: 26px;
		height: 26px;
		stroke: var(--primary);
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		display: block;
		overflow: visible;
		}
		.service-icon svg use {
		stroke: var(--primary);
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		}

		.service-body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0.05rem;
		}
		.service-body h3 {
		font-size: 1.04rem;
		font-weight: 800;
		color: var(--text);
		line-height: 1.5;
		margin-bottom: 0.45rem;
		text-wrap: balance;
		}
		.service-body p {
		font-size: 0.92rem;
		color: var(--text-muted);
		line-height: 1.8;
		margin-bottom: 0.8rem;
		text-wrap: pretty;
		}

		.service-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
		list-style: none;
		margin-top: auto;
		padding-top: 0.15rem;
		}
		.service-tags li {
		background: rgba(0, 102, 204, 0.06);
		color: var(--primary);
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.45;
		padding: 0.3rem 0.7rem;
		border-radius: 9999px;
		border: 1px solid rgba(0, 102, 204, 0.08);
		}

		/* ── Subtabs ── */
		.subtabs-nav {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 2rem;
		flex-wrap: wrap;
		padding-bottom: 0.1rem;
		}

		.subtab-btn {
		background: rgba(255, 255, 255, 0.92);
		border: 2px solid var(--border);
		padding: 0.6rem 1.25rem;
		font-family: "Cairo", sans-serif;
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--text-muted);
		cursor: pointer;
		border-radius: 0.75rem;
		transition: all 0.2s;
		white-space: nowrap;
		box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		}

		.subtab-btn svg {
		width: 18px;
		height: 18px;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex-shrink: 0;
		display: block;
		overflow: visible;
		}
		.subtab-btn svg use {
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		}

		.subtab-btn:hover {
		border-color: var(--primary);
		color: var(--primary);
		background: rgba(0, 102, 204, 0.04);
		}

		.subtab-btn.active {
		background: linear-gradient(135deg, var(--primary), var(--secondary));
		border-color: var(--primary);
		color: white;
		box-shadow: 0 10px 18px rgba(0, 102, 204, 0.18);
		}

		.subtab-content {
		display: none;
		}

		.subtab-content.active {
		display: block;
		animation: fadeIn 0.3s ease-in-out;
		}

		@media (max-width: 768px) {
		.hero {
			padding: 3.5rem 1.1rem 4rem;
		}

		.hero h1 {
			line-height: 1.28;
		}

		.hero p {
			font-size: 0.98rem;
			line-height: 1.8;
		}

		.hero-highlights {
			grid-template-columns: 1fr;
			gap: 0.7rem;
			margin-top: 1.4rem;
		}

		.hero-highlights li {
			padding: 0.9rem 1rem;
		}

		.tabs-nav {
			padding: 0.65rem 0.75rem 0;
		}

		.tab-btn {
			padding: 0.8rem 1rem;
			font-size: 0.84rem;
			min-height: 48px;
		}

		.panels {
			padding: 2rem 1rem 3rem;
		}

		.panel-header {
			margin-bottom: 1.75rem;
			padding: 1.2rem 1rem 1.05rem;
			border-radius: 1.1rem;
		}

		.panel-header p {
			font-size: 0.94rem;
			max-width: none;
		}

		.services-grid {
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		.service-card {
			padding: 1.25rem;
			gap: 1rem;
			border-radius: 1rem;
		}

		.service-body h3 {
			font-size: 0.98rem;
			margin-bottom: 0.38rem;
		}

		.service-body p {
			font-size: 0.88rem;
			line-height: 1.75;
			margin-bottom: 0.72rem;
		}

		.service-tags li {
			font-size: 0.72rem;
			padding: 0.28rem 0.62rem;
		}

		.service-icon {
			width: 46px;
			height: 46px;
		}

		.service-icon svg {
			width: 24px;
			height: 24px;
		}

		.subtabs-nav {
			flex-wrap: nowrap;
			overflow-x: auto;
			padding-bottom: 0.4rem;
			margin-bottom: 1.35rem;
		}

		.subtab-btn {
			padding: 0.58rem 1rem;
			font-size: 0.82rem;
		}

		.suggestion-note {
			padding: 0.9rem 1rem;
			font-size: 0.8rem;
		}
		}

		@keyframes fadeIn {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 1; transform: translateY(0); }
		}

		/* ── CTA Banner ── */
		.cta-banner {
		background: linear-gradient(
			135deg,
			var(--primary-dark),
			var(--primary),
			var(--secondary)
		);
		padding: 4rem 2rem;
		text-align: center;
		position: relative;
		overflow: hidden;
		}
		.cta-banner::before {
		content: "";
		position: absolute;
		inset: -20% auto auto -10%;
		width: 320px;
		height: 320px;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
		}
		.cta-banner .container {
		position: relative;
		z-index: 1;
		}
		.cta-banner h2 {
		font-size: clamp(1.5rem, 3.5vw, 2.25rem);
		font-weight: 900;
		color: white;
		margin-bottom: 0.75rem;
		}
		.cta-banner p {
		color: rgba(255, 255, 255, 0.85);
		font-size: 1rem;
		margin-bottom: 1.75rem;
		}

		/* ── Suggestion Note ── */
		.suggestion-note {
		background: linear-gradient(135deg, rgba(0, 184, 169, 0.08), rgba(255, 255, 255, 0.92));
		border: 1px solid rgba(0, 184, 169, 0.16);
		border-radius: 1rem;
		padding: 1rem 1.25rem;
		font-size: 0.85rem;
		color: var(--text-muted);
		margin-bottom: 2rem;
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		box-shadow: 0 14px 24px rgba(15, 23, 42, 0.03);
		}
		.suggestion-note strong {
		color: var(--secondary);
		}

/* Source: contact.html */
body {
		padding-top: 72px;
		}

		/* ── Hero ── */
		.contact-hero {
		background: linear-gradient(
			135deg,
			var(--primary-dark) 0%,
			var(--primary) 55%,
			var(--secondary) 100%
		);
		padding: 3.75rem 2rem 4.5rem;
		text-align: center;
		position: relative;
		overflow: hidden;
		}
		.contact-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(
			ellipse at 30% 60%,
			rgba(0, 184, 169, 0.28),
			transparent 60%
		);
		}
		.hero-content {
		position: relative;
		z-index: 1;
		max-width: 640px;
		margin: 0 auto;
		}
		.hero-badge {
		display: inline-block;
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.3);
		color: rgba(255, 255, 255, 0.92);
		font-size: 0.875rem;
		font-weight: 600;
		padding: 0.4rem 1.2rem;
		border-radius: 9999px;
		backdrop-filter: blur(8px);
		margin-bottom: 1.25rem;
		}
		.contact-hero h1 {
		font-size: clamp(2rem, 4.5vw, 3.25rem);
		font-weight: 900;
		color: white;
		line-height: 1.2;
		margin-bottom: 0.75rem;
		}
		.contact-hero h1 span {
		color: var(--secondary);
		}
		.contact-hero p {
		font-size: 1.05rem;
		color: rgba(255, 255, 255, 0.85);
		}

		/* ── Page layout ── */
		.contact-page {
		max-width: 1100px;
		margin: 0 auto;
		padding: 4rem 1.5rem 5rem;
		}

		/* ── Info Cards ── */
		.info-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
		margin-bottom: 3.5rem;
		}
		.info-card {
		background: var(--white);
		border: 1px solid var(--border);
		border-radius: 1.5rem;
		padding: 2rem 1.5rem;
		text-align: center;
		transition:
			transform 0.25s,
			box-shadow 0.25s;
		text-decoration: none;
		display: block;
		}
		.info-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-md);
		}
		.info-icon {
		width: 68px;
		height: 68px;
		border-radius: 1.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1.25rem;
		font-size: 1.75rem;
		}
		.info-icon.phone {
		background: linear-gradient(135deg, #dbeafe, #bfdbfe);
		}
		.info-icon.whatsapp {
		background: linear-gradient(135deg, #dcfce7, #bbf7d0);
		}
		.info-icon.email {
		background: linear-gradient(135deg, #ffe4e6, #fecdd3);
		}
		.info-card h3 {
		font-size: 1rem;
		font-weight: 800;
		color: var(--text);
		margin-bottom: 0.35rem;
		}
		.info-card p {
		font-size: 0.9rem;
		color: var(--text-muted);
		margin-bottom: 0.5rem;
		}
		.info-card .info-value {
		font-size: 1rem;
		font-weight: 800;
		display: block;
		margin-top: 0.4rem;
		text-decoration: none;
		}
		.info-card.phone-card .info-value {
		color: var(--primary);
		}
		.info-card.whatsapp-card .info-value {
		color: #16a34a;
		}
		.info-card.email-card .info-value {
		color: #dc2626;
		}

		/* ── Social Media ── */
		.social-section {
		text-align: center;
		margin-bottom: 56px;
		}
		.social-section h2 {
		font-size: 22px;
		font-weight: 900;
		color: var(--text);
		margin-bottom: 8px;
		}
		.social-section p {
		font-size: 15px;
		color: var(--text-muted);
		margin-bottom: 28px;
		}
		.social-icons {
		display: flex;
		justify-content: center;
		gap: 16px;
		flex-wrap: wrap;
		}
		.social-btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 10px 22px;
		border-radius: 9999px;
		font-weight: 700;
		font-size: 14px;
		text-decoration: none;
		transition:
			transform 0.2s,
			opacity 0.2s;
		}
		.social-btn:hover,
		.social-btn:focus-visible {
		transform: translateY(-2px);
		opacity: 0.88;
		}
		.social-btn i,
		.social-btn svg {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		font-size: 18px;
		line-height: 20px;
		text-align: center;
		}

		.social-btn--x,
		.social-btn.twitter {
		background: #000;
		color: white;
		}
		.social-btn--instagram,
		.social-btn.instagram {
		background: linear-gradient(135deg, #f97316, #ec4899, #a855f7);
		color: white;
		}
		.social-btn--linkedin,
		.social-btn.linkedin {
		background: #0077b5;
		color: white;
		}
		.social-btn--snapchat,
		.social-btn.snapchat {
		background: #fffc00;
		color: #1a1a2e;
		}
		.social-btn--youtube,
		.social-btn.youtube {
		background: #ff0000;
		color: white;
		}

		/* ── Map + Form Grid ── */
		.contact-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		align-items: start;
		}

		/* ── Map placeholder ── */
		.map-wrap h3 {
		font-size: 1.1rem;
		font-weight: 900;
		color: var(--text);
		margin-bottom: 1rem;
		}
		.map-placeholder {
		border-radius: 1.5rem;
		overflow: hidden;
		border: 2px solid var(--border);
		height: 360px;
		position: relative;
		background: linear-gradient(160deg, #e0eeff 0%, #d1fae5 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		}
		.map-grid-lines {
		position: absolute;
		inset: 0;
		opacity: 0.18;
		background-image:
			linear-gradient(var(--primary) 1px, transparent 1px),
			linear-gradient(90deg, var(--primary) 1px, transparent 1px);
		background-size: 40px 40px;
		}
		.map-pin-wrap {
		position: relative;
		z-index: 1;
		text-align: center;
		}
		.map-pin {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: var(--primary);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1rem;
		box-shadow:
			0 0 0 16px rgba(0, 102, 204, 0.15),
			0 0 0 32px rgba(0, 102, 204, 0.07);
		animation: pulse-pin 2s ease-in-out infinite;
		}
		@keyframes pulse-pin {
		0%,
		100% {
			box-shadow:
			0 0 0 16px rgba(0, 102, 204, 0.15),
			0 0 0 32px rgba(0, 102, 204, 0.07);
		}
		50% {
			box-shadow:
			0 0 0 20px rgba(0, 102, 204, 0.12),
			0 0 0 40px rgba(0, 102, 204, 0.04);
		}
		}
		.map-pin svg {
		width: 38px;
		height: 38px;
		stroke: white;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		}
		.map-pin-wrap h4 {
		font-size: 1rem;
		font-weight: 900;
		color: var(--primary-dark);
		margin-bottom: 0.25rem;
		}
		.map-pin-wrap p {
		font-size: 0.85rem;
		color: var(--text-muted);
		}
		.map-directions {
		position: absolute;
		bottom: 1.25rem;
		left: 0;
		right: 0;
		text-align: center;
		}
		.map-directions a {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		background: var(--white);
		color: var(--primary);
		font-size: 0.85rem;
		font-weight: 700;
		padding: 0.55rem 1.25rem;
		border-radius: 9999px;
		text-decoration: none;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		transition:
			background 0.2s,
			transform 0.2s;
		}
		.map-directions a:hover {
		background: var(--primary);
		color: white;
		transform: translateY(-1px);
		}

		.map-address {
		margin-top: 1rem;
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		background: var(--white);
		border: 1px solid var(--border);
		border-radius: 1rem;
		padding: 1rem 1.25rem;
		}
		.addr-icon {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: rgba(0, 102, 204, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		}
		.addr-icon svg {
		width: 18px;
		height: 18px;
		stroke: var(--primary);
		fill: none;
		stroke-width: 2;
		}
		.map-address p {
		font-size: 0.9rem;
		color: var(--text-muted);
		line-height: 1.6;
		margin: 0;
		}
		.map-address strong {
		color: var(--text);
		display: block;
		font-size: 0.95rem;
		margin-bottom: 0.2rem;
		}

		/* ── Contact Form ── */
		.form-wrap h3 {
		font-size: 1.1rem;
		font-weight: 900;
		color: var(--text);
		margin-bottom: 1rem;
		}
		.contact-form {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		}
		.form-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		}
		.form-group {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
		}
		.form-group label {
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--text);
		}
		.form-group input,
		.form-group select,
		.form-group textarea {
		font-family: "Cairo", sans-serif;
		font-size: 0.9rem;
		border: 2px solid var(--border);
		border-radius: 0.875rem;
		padding: 0.7rem 1rem;
		color: var(--text);
		background: var(--white);
		transition:
			border-color 0.2s,
			box-shadow 0.2s;
		outline: none;
		width: 100%;
		}
		.form-group input:focus,
		.form-group select:focus,
		.form-group textarea:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
		}
		.form-group textarea {
		resize: vertical;
		min-height: 120px;
		}
		.btn-send {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		font-family: "Cairo", sans-serif;
		font-size: 1rem;
		font-weight: 700;
		padding: 0.85rem 2rem;
		border-radius: 9999px;
		border: none;
		background: var(--primary);
		color: white;
		cursor: pointer;
		transition:
			background 0.2s,
			transform 0.2s;
		align-self: flex-start;
		}
		.btn-send:hover {
		background: #0055b0;
		transform: translateY(-1px);
		}
		.btn-send svg {
		width: 18px;
		height: 18px;
		stroke: white;
		fill: none;
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		}

		/* ── Thank you message ── */
		.thankyou {
		display: none;
		text-align: center;
		padding: 2.5rem;
		border: 2px solid rgba(0, 184, 169, 0.3);
		border-radius: 1.5rem;
		background: rgba(0, 184, 169, 0.04);
		}
		.thankyou.visible {
		display: block;
		}
		.ty-icon {
		width: 72px;
		height: 72px;
		border-radius: 50%;
		background: var(--secondary);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1.25rem;
		}
		.ty-icon svg {
		width: 36px;
		height: 36px;
		stroke: white;
		fill: none;
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		}
		.thankyou h3 {
		font-size: 1.35rem;
		font-weight: 900;
		color: var(--text);
		margin-bottom: 0.5rem;
		}
		.thankyou p {
		font-size: 0.95rem;
		color: var(--text-muted);
		}

		/* ── Working hours ── */
		.hours-section {
		margin-top: 3.5rem;
		padding-top: 3.5rem;
		border-top: 1px solid var(--border);
		}
		.hours-section h2 {
		font-size: 1.4rem;
		font-weight: 900;
		color: var(--text);
		text-align: center;
		margin-bottom: 1.75rem;
		}
		.hours-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		}
		.hours-card {
		background: var(--white);
		border: 1px solid var(--border);
		border-radius: 1.25rem;
		padding: 1.5rem;
		text-align: center;
		}
		.hours-day {
		font-size: 0.9rem;
		font-weight: 800;
		color: var(--text);
		margin-bottom: 0.35rem;
		}
		.hours-time {
		font-size: 1rem;
		font-weight: 700;
		color: var(--primary);
		margin-bottom: 0.35rem;
		}
		.hours-badge {
		display: inline-block;
		font-size: 0.72rem;
		font-weight: 700;
		padding: 0.18rem 0.65rem;
		border-radius: 9999px;
		}
		.hours-badge.open {
		background: #dcfce7;
		color: #16a34a;
		}
		.hours-badge.closed {
		background: #fee2e2;
		color: #dc2626;
		}

		/* ── Responsive ── */
		@media (max-width: 768px) {
		.info-cards {
			grid-template-columns: 1fr;
		}
		.contact-grid {
			grid-template-columns: 1fr;
		}
		.hours-grid {
			grid-template-columns: repeat(2, 1fr);
		}
		}
		@media (max-width: 500px) {
		.form-row {
			grid-template-columns: 1fr;
		}
		.hours-grid {
			grid-template-columns: 1fr;
		}
		}

/* Source: booking.html */
body { padding-top: 72px; }

	/* ── Hero ── */
	.booking-hero {
		background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--secondary) 100%);
		padding: 3.5rem 2rem 4rem;
		text-align: center; position: relative; overflow: hidden;
	}
	.booking-hero::before {
		content: '';
		position: absolute; inset: 0;
		background: radial-gradient(ellipse at 70% 40%, rgba(0,184,169,0.28), transparent 60%);
	}
	.booking-hero .hero-content { position: relative; z-index: 1; }
	.hero-badge {
		display: inline-block;
		background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
		color: rgba(255,255,255,0.92); font-size: 0.875rem; font-weight: 600;
		padding: 0.4rem 1.2rem; border-radius: 9999px;
		backdrop-filter: blur(8px); margin-bottom: 1.25rem;
	}
	.booking-hero h1 {
		font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; color: white;
		line-height: 1.2; margin-bottom: 0.75rem;
	}
	.booking-hero h1 span { color: var(--secondary); }
	.booking-hero p { font-size: 1.05rem; color: rgba(255,255,255,0.85); }

	/* ── Booking Wrapper ── */
	.booking-wrap {
		max-width: 860px; margin: 0 auto;
		padding: 3rem 1.5rem 5rem;
	}

	/* ── Progress Steps ── */
	.progress-bar {
		display: flex; align-items: center;
		justify-content: center;
		gap: 0; margin-bottom: 3rem;
		position: relative;
	}
	.progress-item {
		display: flex; flex-direction: column; align-items: center;
		gap: 0.5rem; flex: 1; position: relative;
	}
	.progress-item::before {
		content: '';
		position: absolute;
		top: 20px; right: 50%; left: -50%;
		height: 2px;
		background: var(--border);
		z-index: 0;
		transition: background 0.3s;
	}
	.progress-item:first-child::before { display: none; }
	.progress-item.done::before,
	.progress-item.active::before { background: var(--primary); }

	.progress-circle {
		width: 40px; height: 40px; border-radius: 50%;
		background: var(--border); color: var(--text-muted);
		display: flex; align-items: center; justify-content: center;
		font-weight: 900; font-size: 0.9rem;
		z-index: 1; position: relative;
		transition: background 0.3s, color 0.3s;
		border: 2px solid transparent;
	}
	.progress-item.done .progress-circle {
		background: var(--primary); color: white; border-color: var(--primary);
	}
	.progress-item.active .progress-circle {
		background: white; color: var(--primary); border-color: var(--primary);
		box-shadow: 0 0 0 4px rgba(0,102,204,0.15);
	}
	.progress-label {
		font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
		white-space: nowrap;
	}
	.progress-item.done .progress-label,
	.progress-item.active .progress-label { color: var(--primary); }

	/* ── Step Panels ── */
	.step-panel { display: none; }
	.step-panel.active { display: block; }

	.step-heading {
		text-align: center; margin-bottom: 2.25rem;
	}
	.step-heading h2 { font-size: 1.5rem; font-weight: 900; color: var(--text); margin-bottom: 0.35rem; }
	.step-heading p { color: var(--text-muted); font-size: 0.95rem; }

	/* ── Specialty Cards (Step 1) ── */
	.specialty-grid {
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
	}
	.specialty-card {
		border: 2px solid var(--border); border-radius: 1.25rem;
		padding: 1.25rem; text-align: center; cursor: pointer;
		transition: border-color 0.2s, background 0.2s, transform 0.2s;
		background: var(--white);
	}
	.specialty-card:hover { border-color: var(--primary); transform: translateY(-2px); }
	.specialty-card.selected {
		border-color: var(--primary); background: rgba(0,102,204,0.06);
	}
	.spec-icon-circle {
		width: 56px; height: 56px; border-radius: 50%;
		background: rgba(0,102,204,0.08);
		display: flex; align-items: center; justify-content: center;
		margin: 0 auto 0.75rem;
	}
	.spec-icon-circle svg {
		width: 26px; height: 26px; stroke: var(--primary); fill: none;
		stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
	}
	.specialty-card h3 { font-size: 0.95rem; font-weight: 800; color: var(--text); }
	.specialty-card .spec-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; }

	/* ── Doctor Cards (Step 2) ── */
	.doctors-grid {
		display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
	}
	.doctor-card {
		border: 2px solid var(--border); border-radius: 1.25rem;
		padding: 1.5rem; cursor: pointer;
		display: flex; gap: 1rem; align-items: flex-start;
		background: var(--white);
		transition: border-color 0.2s, background 0.2s, transform 0.2s;
	}
	.doctor-card:hover { border-color: var(--primary); transform: translateY(-2px); }
	.doctor-card.selected {
		border-color: var(--primary); background: rgba(0,102,204,0.05);
	}
	.doctor-avatar {
		width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
		display: flex; align-items: center; justify-content: center;
		font-size: 1.75rem;
	}
	.doctor-avatar.blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
	.doctor-avatar.teal   { background: linear-gradient(135deg, #ccfbf1, #99f6e4); }
	.doctor-avatar.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
	.doctor-avatar.purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
	.doctor-info h3 { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 0.2rem; }
	.doctor-info .specialty-badge {
		display: inline-block; font-size: 0.75rem; font-weight: 600;
		color: var(--primary); background: rgba(0,102,204,0.08);
		padding: 0.15rem 0.6rem; border-radius: 9999px; margin-bottom: 0.5rem;
	}
	.doctor-rating { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }
	.star { color: #f59e0b; font-size: 0.85rem; }
	.rating-num { font-weight: 700; color: var(--text); }
	.rating-count { color: var(--text-muted); }
	.doctor-info .consult-price {
		font-size: 0.82rem; font-weight: 700; color: var(--secondary);
		margin-top: 0.4rem; display: block;
	}

	/* ── Date & Time (Step 3) ── */
	.date-grid {
		display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem;
		margin-bottom: 2.25rem;
	}
	.date-cell {
		border: 2px solid var(--border); border-radius: 0.875rem;
		padding: 0.75rem 0.35rem; text-align: center; cursor: pointer;
		background: var(--white);
		transition: border-color 0.2s, background 0.2s;
	}
	.date-cell:hover { border-color: var(--primary); }
	.date-cell.selected { border-color: var(--primary); background: rgba(0,102,204,0.07); }
	.date-day { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 0.25rem; }
	.date-num { font-size: 1.1rem; font-weight: 900; color: var(--text); display: block; }
	.date-month { font-size: 0.7rem; color: var(--text-muted); display: block; }

	.time-heading { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 1rem; }
	.time-grid {
		display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem;
	}
	.time-slot {
		border: 2px solid var(--border); border-radius: 0.75rem;
		padding: 0.6rem; text-align: center; cursor: pointer;
		font-size: 0.9rem; font-weight: 700; color: var(--text-muted);
		direction: ltr; unicode-bidi: plaintext;
		background: var(--white);
		transition: border-color 0.2s, background 0.2s, color 0.2s;
	}
	.time-slot:hover { border-color: var(--primary); color: var(--primary); }
	.time-slot.selected { border-color: var(--primary); background: var(--primary); color: white; }
	.time-slot.busy { background: var(--bg); color: var(--border); cursor: not-allowed; }

	/* ── Patient Form (Step 4) ── */
	.patient-form { display: flex; flex-direction: column; gap: 1.25rem; }
	.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
	.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
	.form-group label {
		font-size: 0.9rem; font-weight: 700; color: var(--text);
	}
	.form-group input,
	.form-group select,
	.form-group textarea {
		font-family: 'Cairo', sans-serif; font-size: 0.95rem;
		border: 2px solid var(--border); border-radius: 0.875rem;
		padding: 0.75rem 1rem; color: var(--text); background: var(--white);
		transition: border-color 0.2s, box-shadow 0.2s; outline: none; width: 100%;
	}
	.form-group input:focus,
	.form-group select:focus,
	.form-group textarea:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 4px rgba(0,102,204,0.1);
	}
	.form-group textarea { resize: vertical; min-height: 110px; }
	.form-group select { appearance: none; cursor: pointer; }
	.flags-grid {
		display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
	}
	.flag-option {
		display: flex; align-items: center; gap: 0.6rem;
		padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 0.875rem;
		background: var(--white);
	}
	.flag-option input { width: 18px; height: 18px; accent-color: var(--primary); }
	.flag-option span { font-size: 0.9rem; font-weight: 600; color: var(--text); }
	.form-status {
		display: none; margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 0.875rem;
		font-size: 0.9rem; font-weight: 700;
	}
	.form-status.visible { display: block; }
	.form-status.error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
	.form-status.success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }

	/* ── Booking Summary ── */
	.booking-summary {
		background: rgba(0,184,169,0.05); border: 1px solid rgba(0,184,169,0.25);
		border-radius: 1.25rem; padding: 1.25rem 1.5rem;
		margin-bottom: 1.75rem;
		display: none;
	}
	.booking-summary.visible { display: block; }
	.summary-title { font-size: 0.85rem; font-weight: 800; color: var(--secondary); margin-bottom: 0.75rem; }
	.summary-row { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 0.35rem; }
	.summary-row span:first-child { color: var(--text-muted); font-weight: 600; }
	.summary-row span:last-child { color: var(--text); font-weight: 700; }

	/* ── Navigation Buttons ── */
	.step-nav {
		display: flex; justify-content: space-between; align-items: center;
		margin-top: 2.25rem; gap: 1rem;
	}
	.btn-back {
		font-family: 'Cairo', sans-serif; font-size: 0.95rem; font-weight: 700;
		padding: 0.75rem 1.75rem; border-radius: 9999px;
		border: 2px solid var(--border); background: var(--white); color: var(--text-muted);
		cursor: pointer; transition: border-color 0.2s, color 0.2s;
	}
	.btn-back:hover { border-color: var(--primary); color: var(--primary); }
	.btn-next {
		font-family: 'Cairo', sans-serif; font-size: 0.95rem; font-weight: 700;
		padding: 0.75rem 2.25rem; border-radius: 9999px;
		border: none; background: var(--primary); color: white;
		cursor: pointer; transition: background 0.2s, transform 0.2s, opacity 0.2s;
	}
	.btn-next:hover { background: #0055b0; transform: translateY(-1px); }
	.btn-next:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
	.btn-confirm {
		font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 700;
		padding: 0.85rem 2.5rem; border-radius: 9999px;
		border: none; background: var(--cta); color: white;
		cursor: pointer; transition: background 0.2s, transform 0.2s;
	}
	.btn-confirm:hover { background: #e87b28; transform: translateY(-1px); }
	.btn-confirm.loading { opacity: 0.7; pointer-events: none; }

	/* ── Success Screen ── */
	.success-screen {
		display: none; text-align: center; padding: 3rem 1.5rem;
	}
	.success-screen.visible { display: block; }
	.success-icon {
		width: 100px; height: 100px; border-radius: 50%;
		background: linear-gradient(135deg, var(--secondary), #06b6d4);
		display: flex; align-items: center; justify-content: center;
		margin: 0 auto 2rem;
		box-shadow: 0 12px 40px rgba(0,184,169,0.35);
		animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	@keyframes pop {
		from { transform: scale(0.5); opacity: 0; }
		to   { transform: scale(1);   opacity: 1; }
	}
	.success-icon svg { width: 52px; height: 52px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
	.success-screen h2 { font-size: 2rem; font-weight: 900; color: var(--text); margin-bottom: 0.75rem; }
	.success-screen p { font-size: 1rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 480px; margin-left: auto; margin-right: auto; }
	.success-ref {
		display: inline-block;
		background: rgba(0,102,204,0.06); color: var(--primary);
		font-weight: 800; font-size: 0.9rem; border-radius: 9999px;
		padding: 0.5rem 1.5rem; margin-bottom: 2.5rem;
	}
	.success-card {
		background: var(--white); border: 1px solid var(--border); border-radius: 1.5rem;
		padding: 2rem; max-width: 480px; margin: 0 auto 2.5rem; text-align: right;
	}
	.success-card-title { font-size: 1rem; font-weight: 900; color: var(--text); margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }
	.success-row { display: flex; justify-content: space-between; margin-bottom: 0.65rem; font-size: 0.9rem; }
	.success-row span:first-child { color: var(--text-muted); font-weight: 600; }
	.success-row span:last-child { color: var(--text); font-weight: 700; }

	/* ── Validation error ── */
	.err-msg { font-size: 0.8rem; color: #dc2626; margin-top: 0.25rem; display: none; }
	.form-group.has-error input,
	.form-group.has-error textarea,
	.form-group.has-error select { border-color: #dc2626; }
	.form-group.has-error .err-msg { display: block; }

	/* ── Responsive ── */
	@media (max-width: 600px) {
		.specialty-grid { grid-template-columns: repeat(2, 1fr); }
		.doctors-grid { grid-template-columns: 1fr; }
		.date-grid { grid-template-columns: repeat(4, 1fr); }
		.time-grid { grid-template-columns: repeat(3, 1fr); }
		.form-row { grid-template-columns: 1fr; }
		.flags-grid { grid-template-columns: 1fr; }
		.step-nav { flex-direction: column-reverse; }
		.btn-back, .btn-next, .btn-confirm { width: 100%; text-align: center; }
	}



		.tab-btn i,
		.subtab-btn i,
		.service-icon i {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		font-style: normal;
		}

		.tab-btn i,
		.subtab-btn i {
		width: 20px;
		min-width: 20px;
		text-align: center;
		}

		.service-icon i {
		font-size: 1.35rem;
		color: var(--primary);
		}

		.tab-btn i,
		.subtab-btn i {
		color: currentColor;
		}


		.info-icon i {
		font-size: 1.75rem;
		line-height: 1;
		}

		.info-icon.phone i,
		.info-icon.email i,
		.info-icon.whatsapp i {
		color: inherit;
		}