:root {
	/* Primitive Color Tokens */
	--color-white: rgba(255, 255, 255, 1);
	--color-black: rgba(0, 0, 0, 1);
	--color-cream-50: rgba(252, 252, 249, 1);
	--color-cream-100: rgba(255, 255, 253, 1);
	--color-gray-200: rgba(245, 245, 245, 1);
	--color-gray-300: rgba(167, 169, 169, 1);
	--color-gray-400: rgba(119, 124, 124, 1);
	--color-slate-500: rgba(98, 108, 113, 1);
	--color-brown-600: rgba(94, 82, 64, 1);
	--color-charcoal-700: rgba(31, 33, 33, 1);
	--color-charcoal-800: rgba(38, 40, 40, 1);
	--color-slate-900: rgb(102, 222, 249);
	--color-teal-300: rgb(38, 99, 106)
	--color-teal-400: rgba(45, 166, 178, 1);
	--color-teal-500: rgba(33, 128, 141, 1);
	--color-teal-600: rgba(29, 116, 128, 1);
	--color-teal-700: rgb(0, 97, 110);
	--color-teal-800: rgb(0, 93, 104);
	--color-red-400: rgba(255, 84, 89, 1);
	--color-red-500: rgb(236, 0, 35);
	--color-orange-400: rgba(230, 129, 97, 1);
	--color-orange-500: rgba(168, 75, 47, 1);

	/* RGB versions for opacity control */
	--color-brown-600-rgb: 94, 82, 64;
	--color-teal-500-rgb: 33, 128, 141;
	--color-slate-900-rgb: 19, 52, 59;
	--color-slate-500-rgb: 98, 108, 113;
	--color-red-500-rgb: 192, 21, 47;
	--color-red-400-rgb: 255, 84, 89;
	--color-orange-500-rgb: 168, 75, 47;
	--color-orange-400-rgb: 230, 129, 97;

	/* Background color tokens (Light Mode) */
	--color-bg-1: rgba(59, 130, 246, 0.08);
	/* Light blue */
	--color-bg-2: rgba(245, 158, 11, 0.08);
	/* Light yellow */
	--color-bg-3: rgba(34, 197, 94, 0.08);
	/* Light green */
	--color-bg-4: rgba(239, 68, 68, 0.08);
	/* Light red */
	--color-bg-5: rgba(147, 51, 234, 0.08);
	/* Light purple */
	--color-bg-6: rgba(249, 115, 22, 0.08);
	/* Light orange */
	--color-bg-7: rgba(236, 72, 153, 0.08);
	/* Light pink */
	--color-bg-8: rgba(6, 182, 212, 0.08);
	/* Light cyan */

	/* Semantic Color Tokens (Light Mode) */
	--color-background: var(--color-cream-50);
	--color-surface: var(--color-cream-100);
	--color-text: var(--color-slate-900);
	--color-text-secondary: var(--color-slate-500);
	--color-primary: var(--color-teal-500);
	--color-primary-hover: var(--color-teal-600);
	--color-primary-active: var(--color-teal-700);
	--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
	--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
	--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
	--color-border: rgba(var(--color-brown-600-rgb), 0.2);
	--color-btn-primary-text: var(--color-cream-50);
	--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
	--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
	--color-error: var(--color-red-500);
	--color-success: var(--color-teal-500);
	--color-warning: var(--color-orange-500);
	--color-info: var(--color-slate-500);
	--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
	--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

	/* Common style patterns */
	--focus-ring: 0 0 0 3px var(--color-focus-ring);
	--focus-outline: 2px solid var(--color-primary);
	--status-bg-opacity: 0.15;
	--status-border-opacity: 0.25;
	--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

	/* RGB versions for opacity control */
	--color-success-rgb: 33, 128, 141;
	--color-error-rgb: 192, 21, 47;
	--color-warning-rgb: 168, 75, 47;
	--color-info-rgb: 98, 108, 113;

	/* Typography */
	--font-family-base: 'FKGroteskNeue', 'Geist', 'Inter', -apple-system,
		BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-family-mono: 'Berkeley Mono', ui-monospace, SFMono-Regular, Menlo,
		Monaco, Consolas, monospace;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-md: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 18px;
	--font-size-2xl: 20px;
	--font-size-3xl: 24px;
	--font-size-4xl: 30px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 550;
	--font-weight-bold: 600;
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--letter-spacing-tight: -0.01em;

	/* Spacing */
	--space-0: 0;
	--space-1: 1px;
	--space-2: 2px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;

	/* Border Radius */
	--radius-sm: 6px;
	--radius-base: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
		0 2px 4px -1px rgba(0, 0, 0, 0.02);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
		0 4px 6px -2px rgba(0, 0, 0, 0.02);
	--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
		inset 0 -1px 0 rgba(0, 0, 0, 0.03);

	/* Animation */
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

	/* Layout */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
	:root {
		/* RGB versions for opacity control (Dark Mode) */
		--color-gray-400-rgb: 119, 124, 124;
		--color-teal-300-rgb: 50, 184, 198;
		--color-gray-300-rgb: 167, 169, 169;
		--color-gray-200-rgb: 245, 245, 245;

		/* Background color tokens (Dark Mode) */
		--color-bg-1: rgba(29, 78, 216, 0.15);
		/* Dark blue */
		--color-bg-2: rgba(180, 83, 9, 0.15);
		/* Dark yellow */
		--color-bg-3: rgba(21, 128, 61, 0.15);
		/* Dark green */
		--color-bg-4: rgba(185, 28, 28, 0.15);
		/* Dark red */
		--color-bg-5: rgba(107, 33, 168, 0.15);
		/* Dark purple */
		--color-bg-6: rgba(194, 65, 12, 0.15);
		/* Dark orange */
		--color-bg-7: rgba(190, 24, 93, 0.15);
		/* Dark pink */
		--color-bg-8: rgba(8, 145, 178, 0.15);
		/* Dark cyan */

		/* Semantic Color Tokens (Dark Mode) */
		--color-background: var(--color-charcoal-700);
		--color-surface: var(--color-charcoal-800);
		--color-text: var(--color-gray-200);
		--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
		--color-primary: var(--color-teal-300);
		--color-primary-hover: var(--color-teal-400);
		--color-primary-active: var(--color-teal-800);
		--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
		--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
		--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
		--color-border: rgba(var(--color-gray-400-rgb), 0.3);
		--color-error: var(--color-red-400);
		--color-success: var(--color-teal-300);
		--color-warning: var(--color-orange-400);
		--color-info: var(--color-gray-300);
		--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
		--color-btn-primary-text: var(--color-slate-900);
		--color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
		--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
		--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
			inset 0 -1px 0 rgba(0, 0, 0, 0.15);
		--button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
		--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
		--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

		/* Common style patterns - updated for dark mode */
		--focus-ring: 0 0 0 3px var(--color-focus-ring);
		--focus-outline: 2px solid var(--color-primary);
		--status-bg-opacity: 0.15;
		--status-border-opacity: 0.25;
		--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

		/* RGB versions for dark mode */
		--color-success-rgb: var(--color-teal-300-rgb);
		--color-error-rgb: var(--color-red-400-rgb);
		--color-warning-rgb: var(--color-orange-400-rgb);
		--color-info-rgb: var(--color-gray-300-rgb);
	}
}

/* Data attribute for manual theme switching */
[data-color-scheme='dark'] {
	/* RGB versions for opacity control (dark mode) */
	--color-gray-400-rgb: 119, 124, 124;
	--color-teal-300-rgb: 50, 184, 198;
	--color-gray-300-rgb: 167, 169, 169;
	--color-gray-200-rgb: 245, 245, 245;

	/* Colorful background palette - Dark Mode */
	--color-bg-1: rgba(29, 78, 216, 0.15);
	/* Dark blue */
	--color-bg-2: rgba(180, 83, 9, 0.15);
	/* Dark yellow */
	--color-bg-3: rgba(21, 128, 61, 0.15);
	/* Dark green */
	--color-bg-4: rgba(185, 28, 28, 0.15);
	/* Dark red */
	--color-bg-5: rgba(107, 33, 168, 0.15);
	/* Dark purple */
	--color-bg-6: rgba(194, 65, 12, 0.15);
	/* Dark orange */
	--color-bg-7: rgba(190, 24, 93, 0.15);
	/* Dark pink */
	--color-bg-8: rgba(8, 145, 178, 0.15);
	/* Dark cyan */

	/* Semantic Color Tokens (Dark Mode) */
	--color-background: var(--color-charcoal-700);
	--color-surface: var(--color-charcoal-800);
	--color-text: var(--color-gray-200);
	--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
	--color-primary: var(--color-teal-300);
	--color-primary-hover: var(--color-teal-400);
	--color-primary-active: var(--color-teal-800);
	--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
	--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
	--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
	--color-border: rgba(var(--color-gray-400-rgb), 0.3);
	--color-error: var(--color-red-400);
	--color-success: var(--color-teal-300);
	--color-warning: var(--color-orange-400);
	--color-info: var(--color-gray-300);
	--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
	--color-btn-primary-text: var(--color-slate-900);
	--color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
	--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
	--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
	--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

	/* Common style patterns - updated for dark mode */
	--focus-ring: 0 0 0 3px var(--color-focus-ring);
	--focus-outline: 2px solid var(--color-primary);
	--status-bg-opacity: 0.15;
	--status-border-opacity: 0.25;
	--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

	/* RGB versions for dark mode */
	--color-success-rgb: var(--color-teal-300-rgb);
	--color-error-rgb: var(--color-red-400-rgb);
	--color-warning-rgb: var(--color-orange-400-rgb);
	--color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme='light'] {
	/* RGB versions for opacity control (light mode) */
	--color-brown-600-rgb: 94, 82, 64;
	--color-teal-500-rgb: 33, 128, 141;
	--color-slate-900-rgb: 19, 52, 59;

	/* Semantic Color Tokens (Light Mode) */
	--color-background: var(--color-cream-50);
	--color-surface: var(--color-cream-100);
	--color-text: var(--color-slate-900);
	--color-text-secondary: var(--color-slate-500);
	--color-primary: var(--color-teal-500);
	--color-primary-hover: var(--color-teal-600);
	--color-primary-active: var(--color-teal-700);
	--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
	--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
	--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
	--color-border: rgba(var(--color-brown-600-rgb), 0.2);
	--color-btn-primary-text: var(--color-cream-50);
	--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
	--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
	--color-error: var(--color-red-500);
	--color-success: var(--color-teal-500);
	--color-warning: var(--color-orange-500);
	--color-info: var(--color-slate-500);
	--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

	/* RGB versions for light mode */
	--color-success-rgb: var(--color-teal-500-rgb);
	--color-error-rgb: var(--color-red-500-rgb);
	--color-warning-rgb: var(--color-orange-500-rgb);
	--color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
	font-size: var(--font-size-base);
	font-family: var(--font-family-base);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	color: var(--color-text);
	letter-spacing: var(--letter-spacing-tight);
}

h1 {
	font-size: var(--font-size-4xl);
}

h2 {
	font-size: var(--font-size-3xl);
}

h3 {
	font-size: var(--font-size-2xl);
}

h4 {
	font-size: var(--font-size-xl);
}

h5 {
	font-size: var(--font-size-lg);
}

h6 {
	font-size: var(--font-size-md);
}

p {
	margin: 0 0 var(--space-16) 0;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
	color: var(--color-primary-hover);
}

code,
pre {
	font-family: var(--font-family-mono);
	font-size: calc(var(--font-size-base) * 0.95);
	background-color: var(--color-secondary);
	border-radius: var(--radius-sm);
}

code {
	padding: var(--space-1) var(--space-4);
}

pre {
	padding: var(--space-16);
	margin: var(--space-16) 0;
	overflow: auto;
	border: 1px solid var(--color-border);
}

pre code {
	background: none;
	padding: 0;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-base);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	transition: all var(--duration-normal) var(--ease-standard);
	border: none;
	text-decoration: none;
	position: relative;
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.btn--primary {
	background: var(--color-primary);
	color: var(--color-btn-primary-text);
}

.btn--primary:hover {
	background: var(--color-primary-hover);
}

.btn--primary:active {
	background: var(--color-primary-active);
}

.btn--secondary {
	background: var(--color-secondary);
	color: var(--color-text);
}

.btn--secondary:hover {
	background: var(--color-secondary-hover);
}

.btn--secondary:active {
	background: var(--color-secondary-active);
}

.btn--outline {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.btn--outline:hover {
	background: var(--color-secondary);
}

.btn--sm {
	padding: var(--space-4) var(--space-12);
	font-size: var(--font-size-sm);
	border-radius: var(--radius-sm);
}

.btn--lg {
	padding: var(--space-10) var(--space-20);
	font-size: var(--font-size-lg);
	border-radius: var(--radius-md);
}

.btn--full-width {
	width: 100%;
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Form elements */
.form-control {
	display: block;
	width: 100%;
	padding: var(--space-8) var(--space-12);
	font-size: var(--font-size-md);
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	transition: border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
}

select.form-control {
	padding: var(--space-8) var(--space-12);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: var(--select-caret-light);
	background-repeat: no-repeat;
	background-position: right var(--space-12) center;
	background-size: 16px;
	padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
	select.form-control {
		background-image: var(--select-caret-dark);
	}
}

/* Also handle data-color-scheme */
[data-color-scheme='dark'] select.form-control {
	background-image: var(--select-caret-dark);
}

[data-color-scheme='light'] select.form-control {
	background-image: var(--select-caret-light);
}

.form-control:focus {
	border-color: var(--color-primary);
	outline: var(--focus-outline);
}

.form-label {
	display: block;
	margin-bottom: var(--space-8);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
}

.form-group {
	margin-bottom: var(--space-16);
}

/* Card component */
.card {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
	box-shadow: var(--shadow-md);
}

.card__body {
	padding: var(--space-16);
}

.card__header,
.card__footer {
	padding: var(--space-16);
	border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
	display: inline-flex;
	align-items: center;
	padding: var(--space-6) var(--space-12);
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
}

.status--success {
	background-color: rgba(
		var(--color-success-rgb, 33, 128, 141),
		var(--status-bg-opacity)
	);
	color: var(--color-success);
	border: 1px solid
		rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
	background-color: rgba(
		var(--color-error-rgb, 192, 21, 47),
		var(--status-bg-opacity)
	);
	color: var(--color-error);
	border: 1px solid
		rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
	background-color: rgba(
		var(--color-warning-rgb, 168, 75, 47),
		var(--status-bg-opacity)
	);
	color: var(--color-warning);
	border: 1px solid
		rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
	background-color: rgba(
		var(--color-info-rgb, 98, 108, 113),
		var(--status-bg-opacity)
	);
	color: var(--color-info);
	border: 1px solid
		rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--space-16);
	padding-left: var(--space-16);
}

@media (min-width: 640px) {
	.container {
		max-width: var(--container-sm);
	}
}

@media (min-width: 768px) {
	.container {
		max-width: var(--container-md);
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: var(--container-lg);
	}
}

@media (min-width: 1280px) {
	.container {
		max-width: var(--container-xl);
	}
}

/* Utility classes */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.gap-4 {
	gap: var(--space-4);
}

.gap-8 {
	gap: var(--space-8);
}

.gap-16 {
	gap: var(--space-16);
}

.m-0 {
	margin: 0;
}

.mt-8 {
	margin-top: var(--space-8);
}

.mb-8 {
	margin-bottom: var(--space-8);
}

.mx-8 {
	margin-left: var(--space-8);
	margin-right: var(--space-8);
}

.my-8 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}

.p-0 {
	padding: 0;
}

.py-8 {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

.px-8 {
	padding-left: var(--space-8);
	padding-right: var(--space-8);
}

.py-16 {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.px-16 {
	padding-left: var(--space-16);
	padding-right: var(--space-16);
}

.block {
	display: block;
}

.hidden {
	display: none;
}

/* Accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

:focus-visible {
	outline: var(--focus-outline);
	outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme='dark'] .btn--outline {
	border: 1px solid var(--color-border-secondary);
}

@font-face {
	font-family: 'FKGroteskNeue';
	src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
		format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* Hospital Theme Overrides */
:root {
	--color-hospital-blue: #2196f3;
	--color-hospital-light-blue: #e8f4f8;
	--color-hospital-dark-blue: #1976d2;
	--color-hospital-accent: #03a9f4;
}

/* Light Theme Variables */
[data-theme='light'] {
	--color-background: #ffffff;
	--color-surface: #ffffff;
	--color-text: var(--color-slate-900);
	--color-text-secondary: var(--color-slate-500);
	--color-primary: var(--color-hospital-blue);
	--color-primary-hover: var(--color-hospital-dark-blue);
	--color-border: rgba(33, 150, 243, 0.2);
	--color-card-border: rgba(33, 150, 243, 0.1);
	--color-secondary: var(--color-hospital-light-blue);
	--color-secondary-hover: rgba(33, 150, 243, 0.15);
}

/* Animation Keyframes */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes pulseGlow {
	0% {
		box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
	}
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0px);
	}
}

@keyframes slideLeft {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0%);
	}
}

@keyframes slideRight {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0%);
	}
}

/* Animation Classes */
.fade-in-up {
	animation: fadeInUp 0.8s var(--ease-standard) forwards;
	opacity: 0;
}

.slide-in-up {
	animation: slideInUp 0.8s var(--ease-standard) forwards;
	opacity: 0;
}

.slide-in-left {
	animation: slideInLeft 0.8s var(--ease-standard) forwards;
	opacity: 0;
}

.slide-in-right {
	animation: slideInRight 0.8s var(--ease-standard) forwards;
	opacity: 0;
}

.zoom-in {
	animation: zoomIn 0.6s var(--ease-standard) forwards;
	opacity: 0;
}

.pulse-animation {
	animation: pulse 2s infinite;
}

.pulse-slow {
	animation: pulse 3s infinite;
}

.float-animation {
	animation: float 3s ease-in-out infinite;
}

/* Hover Animations */
.hover-lift {
	transition: all var(--duration-normal) var(--ease-standard);
	will-change: transform, box-shadow;
}

.hover-lift:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}

.hover-scale {
	transition: transform var(--duration-normal) var(--ease-standard);
	will-change: transform;
}

.hover-scale:hover {
	transform: scale(1.05);
}

.zoom-in-hover {
	transition: transform var(--duration-normal) var(--ease-standard);
	overflow: hidden;
	will-change: transform;
}

.zoom-in-hover:hover {
	transform: scale(1.1);
}

.hover-underline {
	position: relative;
	transition: color var(--duration-normal) var(--ease-standard);
}

.hover-underline::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-primary);
	transition: width var(--duration-normal) var(--ease-standard);
}

.hover-underline:hover::after {
	width: 100%;
}

/* Scroll Reveal Animation */
.scroll-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s var(--ease-standard);
}

.scroll-reveal.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-family-base);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background-color: var(--color-background);
	transition: background-color var(--duration-normal) var(--ease-standard),
		color var(--duration-normal) var(--ease-standard);
	overflow-x: hidden;
}

/* Image Styles */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

.hospital-image {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.service-image {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: var(--radius-base);
	margin-bottom: var(--space-12);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.service-card:hover .service-image {
	transform: scale(1.05);
}

.doctor-image {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--color-hospital-blue);
	flex-shrink: 0;
	transition: transform var(--duration-normal) var(--ease-standard);
	margin: 0 auto;
}

.gallery-image {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-lg);
}

.about-image {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-24);
	box-shadow: var(--shadow-md);
}

.leader-image {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--color-hospital-blue);
	flex-shrink: 0;
}

.appointment-doctor-image {
	width: 100%;
	max-width: 200px;
	height: auto;
	border-radius: var(--radius-lg);
	margin: 0 auto var(--space-16);
	box-shadow: var(--shadow-md);
	display: block;
}

.map-image {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-16);
}

/* Header */
.header {
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: background-color var(--duration-normal) var(--ease-standard);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-16) 0;
}

.nav-brand {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-hospital-blue);
}

.nav-brand i {
	font-size: var(--font-size-2xl);
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	list-style: none;
}

.nav-link {
	color: var(--color-text);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	transition: color var(--duration-fast) var(--ease-standard);
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-base);
	position: relative;
}

.nav-link:hover,
.nav-link.active {
	color: var(--color-hospital-blue);
}

.nav-link:hover::after {
	width: 100%;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
	transition: all var(--duration-normal) var(--ease-standard);
}

.theme-toggle:hover {
	background: var(--color-secondary);
	transform: scale(1.05);
}

.theme-toggle:focus-visible {
	outline: var(--focus-outline);
	outline-offset: 2px;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: var(--space-4);
	background: none;
	border: none;
	cursor: pointer;
}

.nav-toggle span {
	width: 25px;
	height: 3px;
	background: var(--color-text);
	transition: all var(--duration-normal) var(--ease-standard);
	border-radius: 2px;
}

/* Mobile Navigation */
@media (max-width: 768px) {
	.nav-toggle {
		display: flex;
	}

	.nav-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-surface);
		flex-direction: column;
		gap: 0;
		box-shadow: var(--shadow-md);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: all var(--duration-normal) var(--ease-standard);
	}

	.nav-menu.active {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.nav-menu li {
		width: 100%;
	}

	.nav-link {
		display: block;
		padding: var(--space-16);
		border-bottom: 1px solid var(--color-border);
	}

	.nav-actions {
		gap: var(--space-12);
	}

	.theme-toggle {
		width: 40px;
		height: 40px;
	}
}

/* Main Content */
main {
	min-height: calc(100vh - 80px);
}

.section {
	display: none;
	min-height: 100vh;
	/* padding: var(--space-32) 0; */
}

.section.active {
	display: block;
	animation: fadeInUp 0.6s var(--ease-standard);
}

.section-header {
	text-align: center;
	margin-bottom: var(--space-32);
}

.section-header h1,
.section-header h2 {
	margin-bottom: var(--space-16);
	color: var(--color-hospital-blue);
}

.section-header p {
	font-size: var(--font-size-lg);
	color: var(--color-text-secondary);
	max-width: 600px;
	margin: 0 auto;
}

/* Hero Slider */
.hero-slider {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	/* opacity: 0; */
	transition: opacity 1s ease;
	background-size: cover;
	background-position: center center;
}

.hero-slide {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.hero-slide.active {
	/* opacity: 1; */
}

.hero-bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(82, 82, 82, 0.4), rgba(94, 94, 94, 0.6));
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: white;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--space-24);
}

.hero-title {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-tagline {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-32);
	opacity: 0.95;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
	display: flex;
	gap: var(--space-16);
	justify-content: center;
	flex-wrap: wrap;
}

/* Slider Navigation */
.slider-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 var(--space-24);
	z-index: 3;
}

.slider-btn {
	width: 50px;
	height: 50px;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-lg);
	transition: all var(--duration-normal) var(--ease-standard);
	backdrop-filter: blur(10px);
}

.slider-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

/* Slider Indicators */
.slider-indicators {
	position: absolute;
	bottom: var(--space-24);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-12);
	z-index: 3;
}

.indicator {
	width: 12px;
	height: 12px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all var(--duration-normal) var(--ease-standard);
}

.indicator.active {
	background: white;
	transform: scale(1.2);
}

@media (max-width: 768px) {
	.hero-title {
		font-size: var(--font-size-3xl);
	}

	.hero-tagline {
		font-size: var(--font-size-lg);
	}

	.hero-buttons {
		flex-direction: column;
		align-items: center;
	}

	.hero-buttons .btn {
		width: 250px;
	}

	.slider-btn {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-md);
	}

	.slider-nav {
		padding: 0 var(--space-16);
	}

	.hero-slider {
		height: 50vh;
		/* Adjust height for tablets */
	}

	.hero-slide {
		background-position: center center;
		/* Ensure proper positioning on small screens */
	}
}

/* Intro Section */
.intro-section {
	padding: var(--space-32) 0;
}

.intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-32);
	align-items: center;
}

.intro-text h2 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-16);
}

.intro-text p {
	margin-bottom: var(--space-24);
	color: var(--color-text-secondary);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.intro-grid {
		grid-template-columns: 1fr;
		gap: var(--space-24);
	}
}

/* Emergency Section */
.emergency-section {
	background: var(--color-bg-4);
	padding: var(--space-32) 0;
}

.emergency-card {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	background: var(--color-surface);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	border-left: 4px solid var(--color-error);
	position: relative;
	overflow: hidden;
}

.emergency-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg,
		transparent 30%,
		rgba(255, 255, 255, 0.1) 50%,
		transparent 70%
	);
	transform: translateX(-100%);
	transition: transform 0.6s var(--ease-standard);
}

.emergency-card:hover::before {
	transform: translateX(100%);
}

.emergency-icon {
	font-size: 3rem;
	color: var(--color-error);
}

.emergency-content h3 {
	color: var(--color-error);
	margin-bottom: var(--space-8);
	font-size: var(--font-size-2xl);
}

.emergency-content p {
	margin-bottom: var(--space-16);
	color: var(--color-text-secondary);
}

.emergency-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-error);
	text-decoration: none;
	transition: all var(--duration-normal) var(--ease-standard);
}

.emergency-phone:hover {
	color: var(--color-error);
	transform: scale(1.05);
}

@media (max-width: 768px) {
	.emergency-card {
		flex-direction: column;
		text-align: center;
		gap: var(--space-16);
	}
}

/* Highlights Section */
.highlights-section {
	padding: var(--space-32) 0;
}

.highlights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-24);
}

.highlight-card {
	text-align: center;
	padding: var(--space-32);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.highlight-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-normal) var(--ease-standard);
}

.highlight-card:hover::before {
	transform: scaleX(1);
}

.highlight-icon {
	font-size: 3rem;
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-16);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.highlight-card:hover .highlight-icon {
	transform: scale(1.1) rotate(5deg);
}

.highlight-card h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-12);
}

.highlight-card p {
	color: var(--color-text-secondary);
}

/* Services Overview */
.services-overview {
	background: var(--color-hospital-light-blue);
	padding: var(--space-32) 0;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-24);
	margin-bottom: var(--space-32);
}

.service-card {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	text-align: center;
	cursor: pointer;
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.service-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(33, 150, 243, 0.1),
		transparent
	);
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-standard);
}

.service-card:hover::after {
	opacity: 1;
}

.service-card i {
	font-size: 2.5rem;
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-16);
	transition: all var(--duration-normal) var(--ease-standard);
}

.service-card:hover i {
	transform: scale(1.1);
	color: var(--color-hospital-dark-blue);
}

.service-card h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-8);
}

.service-card p {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

/* Gallery Styles */
.gallery-filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin-bottom: var(--space-32);
}

.filter-btn {
	padding: var(--space-8) var(--space-16);
	border: 2px solid var(--color-hospital-blue);
	background: transparent;
	color: var(--color-hospital-blue);
	border-radius: var(--radius-full);
	cursor: pointer;
	font-weight: var(--font-weight-medium);
	transition: all var(--duration-normal) var(--ease-standard);
	position: relative;
	overflow: hidden;
}

.filter-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--color-hospital-blue);
	transition: width var(--duration-normal) var(--ease-standard);
	z-index: -1;
}

.filter-btn:hover::before,
.filter-btn.active::before {
	width: 100%;
}

.filter-btn:hover,
.filter-btn.active {
	color: white;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-24);
}

.gallery-item {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: all var(--duration-normal) var(--ease-standard);
	cursor: pointer;
}

.gallery-item .gallery-image {
	position: relative;
	overflow: hidden;
	transition: transform var(--duration-normal) var(--ease-standard);
}

.gallery-item:hover .gallery-image {
	transform: scale(1.05);
}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all var(--duration-normal) var(--ease-standard);
	padding: var(--space-24);
	text-align: center;
	color: white;
	transform: translateY(20px);
}

.gallery-item:hover .image-overlay {
	opacity: 1;
	transform: translateY(0);
}

.image-overlay h4 {
	margin-bottom: var(--space-8);
	color: white;
}

.image-overlay p {
	margin-bottom: var(--space-16);
	font-size: var(--font-size-sm);
	opacity: 0.9;
}

.view-btn {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-16);
	background: var(--color-hospital-blue);
	color: white;
	border: none;
	border-radius: var(--radius-base);
	cursor: pointer;
	font-size: var(--font-size-sm);
	transition: all var(--duration-fast) var(--ease-standard);
}

.view-btn:hover {
	background: var(--color-hospital-dark-blue);
	transform: scale(1.05);
}

/* Lightbox Modal */
.lightbox-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-24);
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-standard);
}

.lightbox-modal:not(.hidden) {
	opacity: 1;
}

.lightbox-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.lightbox-content {
	position: relative;
	max-width: 800px;
	max-height: 90vh;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	transform: scale(0.8);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.lightbox-modal:not(.hidden) .lightbox-content {
	transform: scale(1);
}

.lightbox-close {
	position: absolute;
	top: var(--space-16);
	right: var(--space-16);
	width: 40px;
	height: 40px;
	background: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: all var(--duration-fast) var(--ease-standard);
}

.lightbox-close:hover {
	background: rgba(0, 0, 0, 0.7);
	transform: scale(1.1);
}

.lightbox-image {
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lightbox-info {
	padding: var(--space-24);
	text-align: center;
}

.lightbox-info h3 {
	margin-bottom: var(--space-8);
	color: var(--color-hospital-blue);
}

.lightbox-info p {
	color: var(--color-text-secondary);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	.gallery-filters {
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: var(--space-8);
	}

	.filter-btn {
		flex-shrink: 0;
	}

	.lightbox-content {
		margin: var(--space-16);
		max-height: calc(100vh - 32px);
	}

	.lightbox-image {
		height: 250px;
	}
}

/* Doctors Overview */
.doctors-overview {
	padding: var(--space-32) 0;
}

.doctors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-24);
	margin-bottom: var(--space-32);
}

.doctor-card {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	text-align: center;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.doctor-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleX(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.doctor-card:hover::before {
	transform: scaleX(1);
}

.doctor-card .doctor-image {
	width: 100px;
	height: 100px;
	margin: 0 auto var(--space-16);
}

.doctor-card h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-8);
}

.doctor-specialty {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-4);
}

.doctor-qualification {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-16);
}

/* News Section */
.news-section {
	background: var(--color-bg-1);
	padding: var(--space-32) 0;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: var(--space-24);
}

.news-card {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	display: flex;
	gap: var(--space-16);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.news-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleX(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.news-card:hover::after {
	transform: scaleX(1);
}

.news-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-12);
	background: var(--color-hospital-blue);
	color: white;
	border-radius: var(--radius-base);
	min-width: 60px;
}

.news-date .date {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.news-date .month {
	font-size: var(--font-size-sm);
	text-transform: uppercase;
}

.news-content h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-8);
}

.news-content p {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
	.news-grid {
		grid-template-columns: 1fr;
	}

	.news-card {
		align-items: flex-start;
	}
}

/* Newsletter Section */
.newsletter-section {
	background: linear-gradient(
		135deg,
		var(--color-hospital-blue) 0%,
		var(--color-hospital-dark-blue) 100%
	);
	color: white;
	padding: var(--space-32) 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.newsletter-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="rgba(255,255,255,.1)"/><stop offset="100%" stop-color="rgba(255,255,255,.05)"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>')
		repeat;
	opacity: 0.5;
	animation: float 10s ease-in-out infinite;
}

.newsletter-content {
	position: relative;
	z-index: 1;
}

.newsletter-content h2 {
	color: white;
	margin-bottom: var(--space-8);
}

.newsletter-content p {
	margin-bottom: var(--space-24);
	opacity: 0.9;
}

.newsletter-form .form-group {
	display: flex;
	gap: var(--space-12);
	max-width: 500px;
	margin: 0 auto;
}

.newsletter-form .form-control {
	flex: 1;
	border: none;
}

.newsletter-form .btn {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.newsletter-form .form-group {
		flex-direction: column;
	}
}

/* About Page Styles */
.about-content {
	max-width: 1000px;
	margin: 0 auto;
}

.about-intro {
	margin-bottom: var(--space-32);
}

.about-intro h2 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-16);
}

.about-intro p {
	color: var(--color-text-secondary);
	margin-bottom: var(--space-16);
	line-height: 1.6;
}

.leadership-section {
	margin-bottom: var(--space-32);
}

.leadership-section h2 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-24);
}

.leader-card {
	display: flex;
	gap: var(--space-24);
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.leader-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(
		180deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleY(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.leader-card:hover::before {
	transform: scaleY(1);
}

.leader-content h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-4);
}

.leader-title {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-12);
}

.leader-content p {
	color: var(--color-text-secondary);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.leader-card {
		flex-direction: column;
		text-align: center;
	}
}

.mission-vision {
	margin-bottom: var(--space-32);
}

.mv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-24);
}

.mv-card {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-align: center;
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.mv-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleX(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.mv-card:hover::before {
	transform: scaleX(1);
}

.mv-icon {
	font-size: 2.5rem;
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-16);
}

.mv-card h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-12);
}

.mv-card p {
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.values-section h2 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-24);
	text-align: center;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-24);
}

.value-card {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-align: center;
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.value-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(33, 150, 243, 0.05),
		transparent
	);
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-standard);
}

.value-card:hover::after {
	opacity: 1;
}

.value-icon {
	font-size: 2.5rem;
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-16);
}

.value-card h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-12);
}

.value-card p {
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* Doctors Page Styles */
.doctors-list {
	max-width: 1000px;
	margin: 0 auto;
}

.doctor-profile {
	display: flex;
	gap: var(--space-24);
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-24);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.doctor-profile::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(
		180deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleY(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.doctor-profile:hover::before {
	transform: scaleY(1);
}

.doctor-info h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-8);
}

.doctor-info .doctor-specialty {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-4);
}

.doctor-info .doctor-qualification {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-12);
}

.doctor-description {
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: var(--space-16);
}

@media (max-width: 768px) {
	.doctor-profile {
		flex-direction: column;
		text-align: center;
	}

	.doctor-profile .doctor-image {
		align-self: center;
	}
}

/* Services Page Styles */
.services-list {
	max-width: 1000px;
	margin: 0 auto;
}

.service-detail {
	display: flex;
	gap: var(--space-24);
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-24);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.service-detail::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(
		180deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleY(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.service-detail:hover::before {
	transform: scaleY(1);
}

.service-detail .service-image {
	width: 200px;
	height: 150px;
	flex-shrink: 0;
	border-radius: var(--radius-base);
}

.service-content h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-12);
}

.service-content p {
	color: var(--color-text-secondary);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.service-detail {
		flex-direction: column;
		text-align: center;
	}

	.service-detail .service-image {
		align-self: center;
		width: 100%;
		max-width: 300px;
	}
}

/* Contact Page Styles */
.contact-content {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-32);
	margin-bottom: var(--space-32);
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.contact-item {
	display: flex;
	gap: var(--space-16);
	padding: var(--space-24);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
}

.contact-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(
		180deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleY(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.contact-item:hover::before {
	transform: scaleY(1);
}

.contact-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(
		135deg,
		var(--color-hospital-light-blue) 0%,
		var(--color-hospital-blue) 100%
	);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-lg);
	color: white;
	flex-shrink: 0;
}

.contact-details h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-8);
}

.contact-details p {
	color: var(--color-text-secondary);
}

.contact-details a {
	color: var(--color-hospital-blue);
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-standard);
}

.contact-details a:hover {
	color: var(--color-hospital-dark-blue);
	text-decoration: underline;
}

.contact-form-container {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	cursor: pointer;
	font-weight: normal;
}

.checkbox-label input[type='checkbox'] {
	margin: 0;
}

.map-container {
	margin-top: var(--space-32);
	text-align: center;
}

.map-info {
	margin-top: var(--space-16);
}

.map-info h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
	.contact-content {
		grid-template-columns: 1fr;
		gap: var(--space-24);
	}

	.form-row {
		grid-template-columns: 1fr;
	}
}

/* Appointment Page Styles */
.appointment-content {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-32);
}

.appointment-info {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	height: fit-content;
	border: 1px solid var(--color-card-border);
	position: relative;
	overflow: hidden;
	text-align: center;
}

.appointment-info::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(
		180deg,
		var(--color-hospital-blue),
		var(--color-hospital-accent)
	);
	transform: scaleY(0);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.appointment-info:hover::before {
	transform: scaleY(1);
}

.appointment-info h3 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-16);
}

.appointment-info ul {
	list-style: none;
	margin-bottom: var(--space-24);
	text-align: left;
}

.appointment-info li {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
	color: var(--color-text-secondary);
}

.appointment-info li i {
	color: var(--color-success);
}

.appointment-hours h4 {
	color: var(--color-hospital-blue);
	margin-bottom: var(--space-12);
}

.hours-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.hours-item {
	display: flex;
	justify-content: space-between;
	padding: var(--space-8);
	background: var(--color-hospital-light-blue);
	border-radius: var(--radius-base);
	transition: background var(--duration-normal) var(--ease-standard);
}

.hours-item:hover {
	background: rgba(33, 150, 243, 0.15);
}

.day {
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
}

.time {
	color: var(--color-text-secondary);
}

.appointment-form-container {
	background: var(--color-surface);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-card-border);
}

.confirmation-note {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-12);
	background: var(--color-bg-3);
	border-radius: var(--radius-base);
	margin-bottom: var(--space-16);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.confirmation-note i {
	color: var(--color-info);
}

@media (max-width: 768px) {
	.appointment-content {
		grid-template-columns: 1fr;
		gap: var(--space-24);
	}
}

/* Footer */
.footer {
	background: var(--color-charcoal-700);
	color: var(--color-gray-200);
	padding: var(--space-32) 0 var(--space-16);
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-32);
	margin-bottom: var(--space-24);
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-hospital-accent);
	margin-bottom: var(--space-12);
}

.footer-brand i {
	font-size: var(--font-size-xl);
}

.footer-section h4 {
	color: var(--color-hospital-accent);
	margin-bottom: var(--space-12);
}

.footer-section ul {
	list-style: none;
}

.footer-section li {
	margin-bottom: var(--space-8);
}

.footer-section a {
	color: var(--color-gray-300);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.footer-section a:hover {
	color: var(--color-hospital-accent);
}

.footer-section .hours-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.footer-section .hours-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-8) var(--space-12);
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	color: var(--color-gray-200);
	transition: background var(--duration-normal) var(--ease-standard);
}

.footer-section .hours-item:hover {
	background: rgba(255, 255, 255, 0.15);
}

.footer-section .hours-item span:first-child {
	font-weight: var(--font-weight-medium);
}

.footer-section .hours-item span:last-child {
	color: var(--color-gray-300);
}

.footer-section .contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.footer-section .contact-info p {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin: 0;
	color: var(--color-gray-300);
	line-height: 1.5;
}

.footer-section .contact-info i {
	color: var(--color-hospital-accent);
	width: 16px;
	flex-shrink: 0;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: var(--space-16);
	text-align: center;
	color: var(--color-gray-400);
	font-size: var(--font-size-sm);
}

/* Utility Classes */
.text-center {
	text-align: center;
}

.hidden {
	display: none !important;
}

/* Form Message Styles */
.form-message {
	padding: var(--space-12);
	border-radius: var(--radius-base);
	margin-bottom: var(--space-16);
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-sm);
	animation: slideInUp 0.5s var(--ease-standard);
}

.form-message.success-message {
	background: rgba(var(--color-success-rgb), 0.1);
	border: 1px solid rgba(var(--color-success-rgb), 0.3);
	color: var(--color-success);
}

.form-message.error-message {
	background: rgba(var(--color-error-rgb), 0.1);
	border: 1px solid rgba(var(--color-error-rgb), 0.3);
	color: var(--color-error);
}

/* Responsive Design */
@media (max-width: 480px) {
	.container {
		padding-left: var(--space-12);
		padding-right: var(--space-12);
	}

	.hero-title {
		font-size: var(--font-size-2xl);
	}

	.hero-tagline {
		font-size: var(--font-size-lg);
	}

	.section {
		padding: var(--space-24) 0;
	}

	.highlights-grid,
	.services-grid,
	.doctors-grid {
		grid-template-columns: 1fr;
	}

	.emergency-card {
		padding: var(--space-20);
	}

	.footer-content {
		grid-template-columns: 1fr;
	}

	.hospital-image,
	.about-image {
		height: 200px;
	}

	.service-image {
		height: 120px;
	}
	.hero-slider {
		height: 40vh;
		/* Adjust height for mobile */
	}

	.hero-slide {
		background-position: center center;
		/* Ensure proper positioning on mobile */
	}
}

/* Gallery filter animation */
.gallery-item {
	transition: all var(--duration-normal) var(--ease-standard);
}

.gallery-item.hidden {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

/* Form Validation Styles */
.form-control.error {
	border-color: var(--color-error);
	box-shadow: 0 0 0 2px rgba(var(--color-error-rgb), 0.2);
}

.form-control.success {
	border-color: var(--color-success);
	box-shadow: 0 0 0 2px rgba(var(--color-success-rgb), 0.2);
}

.error-message {
	color: var(--color-error);
	font-size: var(--font-size-sm);
	margin-top: var(--space-4);
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.error-message::before {
	content: '⚠️';
	font-size: var(--font-size-xs);
}

.success-message {
	color: var(--color-success);
	font-size: var(--font-size-sm);
	margin-top: var(--space-4);
}

/* Performance Optimizations */
.hover-lift,
.hover-scale,
.zoom-in-hover {
	will-change: transform;
}

/* Dark Theme Adjustments */
@media (prefers-color-scheme: dark) {
	.hero-slide {
		background-blend-mode: multiply;
	}
}

/* Scroll to top animation */
.scroll-to-top {
	position: fixed;
	bottom: var(--space-24);
	right: var(--space-24);
	width: 50px;
	height: 50px;
	background: var(--color-primary);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all var(--duration-normal) var(--ease-standard);
	z-index: 1000;
}

.scroll-to-top.show {
	opacity: 1;
	visibility: visible;
}

.scroll-to-top:hover {
	transform: scale(1.1);
	background: var(--color-primary-hover);
}

.nav-brand img {
	height: 40px;
	width: auto;
}

/* Responsive Styles */
@media (max-width: 768px) {
	.hero-title {
		font-size: var(--font-size-3xl);
	}

	.hero-tagline {
		font-size: var(--font-size-lg);
	}

	.hero-buttons {
		flex-direction: column;
		align-items: center;
	}

	.hero-buttons .btn {
		width: 250px;
	}

	.slider-btn {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-md);
	}

	.nav-menu {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
	}

	.nav-toggle {
		display: flex;
	}

	.nav-link {
		padding: var(--space-8) var(--space-16);
		text-align: center;
	}
}

@media (max-width: 480px) {
	.container {
		padding-left: var(--space-12);
		padding-right: var(--space-12);
	}

	.hero-title {
		font-size: var(--font-size-2xl);
	}

	.hero-tagline {
		font-size: var(--font-size-base);
	}

	.intro-grid {
		grid-template-columns: 1fr;
	}

	.footer-content {
		grid-template-columns: 1fr;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
	}

	.doctor-profile {
		flex-direction: column;
		text-align: center;
	}
}

/* Fix button text visibility on hover in light theme */
[data-color-scheme='light'] .btn--primary:hover {
	background: var(--color-teal-600);
	color: var(--color-cream-50);
}

[data-color-scheme='light'] .btn--primary:active {
	background: var(--color-teal-700);
	color: var(--color-cream-50);
}

[data-color-scheme='light'] .btn--outline:hover {
	background: var(--color-slate-500);
	color: var(--color-cream-50);
}

/* Adjust hover state for dark theme as well */
[data-color-scheme='dark'] .btn--primary:hover {
	background: var(--color-teal-400);
	color: var(--color-slate-900);
}

[data-color-scheme='dark'] .btn--primary:active {
	background: var(--color-teal-500);
	color: var(--color-slate-900);
}

[data-color-scheme='dark'] .btn--outline:hover {
	background: var(--color-slate-700);
	color: var(--color-slate-200);
}

/* Light Theme */
[data-color-scheme='light'] {
	--color-background: #ffffff; /* White background */
	--color-surface: #f9f9f9; /* Light gray for surfaces */
	--color-text: #333333; /* Dark text for readability */
	--color-text-secondary: #777777; /* Lighter text for secondary content */
	--color-primary: #007bff; /* Primary color for buttons and links */
	--color-primary-hover: #0056b3; /* Hover effect for buttons and links */
	--color-border: #dddddd; /* Light border color */
	--color-btn-primary-text: #ffffff; /* Button text color */
}

/* Apply the light theme globally */
body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: 'Poppins', sans-serif; /* Unique font for body */
	line-height: 1.6;
}

/* Hero Section */
.hero-slider {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 1s ease;
	background-size: cover;
	background-position: center center;
}

.hero-slide.active {
	opacity: 1;
}

.hero-bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)); */
}

/* Heading Styles - Unique Font */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Roboto Slab', serif; /* Unique font for headings */
	font-weight: 700; /* Bold for headings */
	color: var(--color-primary); /* Primary color for headings */
	text-transform: uppercase; /* Uppercase for more impact */
	letter-spacing: 2px; /* Slightly increased letter spacing for headings */
	margin-bottom: var(--space-16);
}

.hero-title {
	font-size: var(--font-size-4xl);
	margin-bottom: var(--space-16);
}

/* Button Styles */
.btn {
	background-color: var(--color-primary);
	color: var(--color-btn-primary-text);
	font-size: var(--font-size-base);
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-base);
	border: none;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: var(--color-primary-hover);
}

.btn--outline {
	background: transparent;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.btn--outline:hover {
	background-color: var(--color-primary);
	color: var(--color-btn-primary-text);
}

/* Section Headers */
.section-header {
	text-align: center;
	margin-bottom: var(--space-32);
}

.section-header h2 {
	font-size: var(--font-size-3xl);
	color: var(--color-primary);
	font-family: 'Roboto Slab', serif; /* Unique font for section headings */
}

.section-header p {
	font-size: var(--font-size-lg);
	color: var(--color-text-secondary);
}

/* Footer */
.footer {
	background-color: var(--color-surface);
	color: var(--color-text);
	padding: var(--space-32) 0;
	text-align: center;
}

.footer .footer-brand {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
}

.footer a {
	color: var(--color-primary);
	text-decoration: none;
}

.footer a:hover {
	color: var(--color-primary-hover);
}

/* Adjustments for Light Theme Responsiveness */
@media (max-width: 768px) {
	.hero-slider {
		height: 50vh;
	}

	.hero-title {
		font-size: var(--font-size-3xl);
	}

	.btn {
		width: 100%;
	}

	.section-header h2 {
		font-size: var(--font-size-2xl);
	}
}

@media (max-width: 480px) {
	.hero-slider {
		height: 40vh;
	}

	.hero-title {
		font-size: var(--font-size-2xl);
	}

	.section-header h2 {
		font-size: var(--font-size-xl);
	}

	.footer-content {
		grid-template-columns: 1fr;
	}
}
/* Hero Section - Background Overlay */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)); /* Light opacity */
    opacity: 0.1; /* Adjust opacity for better visibility */
    transition: opacity 0.5s ease; /* Smooth opacity transition */
}

/* Button Hover Effect with Opacity Change */
.btn:hover {
    opacity: 0.9; /* Reduce opacity on hover */
}

/* Hero Slide Image - Opacity Adjustment on Hover */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease, transform 0.3s ease; /* Add transition for opacity */
    background-size: cover;
    background-position: center center;
}

.hero-slide.active {
    opacity: 1;
}

/* Fade-In Effect for Sections */
.scroll-reveal {
    opacity: 0; /* Initially hidden */
    transform: translateY(30px); /* Start from a lower position */
    transition: opacity 1s ease, transform 1s ease; /* Smooth fade-in */
}

.scroll-reveal.revealed {
    opacity: 1; /* Fade in when revealed */
    transform: translateY(0); /* Bring into position */
}

/* Footer Section - Opacity for background and text */
.footer {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-32) 0;
    text-align: center;
    opacity: 0.95; /* Light opacity for the footer */
    transition: opacity 0.3s ease;
}

.footer:hover {
    opacity: 1; /* Full opacity on hover */
}

/* Card Hover Effect with Opacity Change */
.card:hover {
    opacity: 0.8; /* Reduce opacity on hover */
    transform: translateY(-5px); /* Add subtle lift effect */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Button Opacity Changes for Hover and Active States */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
    transition: opacity 0.3s ease; /* Add transition */
}

.btn--primary:hover {
    background: var(--color-primary-hover);
    opacity: 0.85; /* Slight opacity change on hover */
}

.btn--primary:active {
    background: var(--color-primary-active);
    opacity: 0.75; /* Even more opacity change when clicked */
}

/* Button Outline Hover with Opacity Change */
.btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
    opacity: 0.9; /* Reduce opacity for hover effect */
}

/* Mobile Header - Nav Menu and Toggle Opacity */
@media (max-width: 768px) {
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        transform: translateY(-100%);
        opacity: 0; /* Start with hidden opacity */
        visibility: hidden;
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .nav-menu.active {
        transform: translateY(0);
        /* opacity: 1; Make visible when active */
        visibility: visible;
    }
}