/* CSS Reset */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
html {
 line-height: 1.15;
 -webkit-text-size-adjust: 100%;
}
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
 margin: 0;
 font-weight: inherit;
 font-size: inherit;
}
p {
 margin: 0;
}
ol, ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
img, picture, video, canvas, svg {
 display: block;
 max-width: 100%;
}
input, button, textarea, select {
 font: inherit;
}
button {
 background: none;
 border: none;
 cursor: pointer;
}
a {
 color: inherit;
 text-decoration: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* CSS Variables - Color Palette from SPA */
:root {
 /* Primary Colors */
 --blue-600: #2563eb;
 --blue-700: #1d4ed8;
 --green-600: #059669;
 --green-500: #10b981;
 --purple-600: #9333ea;
 --purple-500: #a855f7;
 --orange-600: #ea580c;
 --pink-600: #db2777;
 --indigo-600: #4f46e5;
 --yellow-500: #eab308;
 --red-600: #dc2626;
 --red-500: #ef4444;
 --teal-600: #0d9488;
 --teal-500: #14b8a6;
 /* Background Variants */
 --blue-50: #eff6ff;
 --blue-100: #dbeafe;
 --blue-200: #bfdbfe;
 --blue-300: #93c5fd;
 --blue-500: #3b82f6;
 --green-50: #f0fdf4;
 --green-100: #dcfce7;
 --green-200: #bbf7d0;
 --green-250: #a0f4b8;
 --green-300: #86efac;
 --green-350: #70e494;
 --green-400: #56df7c;
 --green-500: #22c55e;
 --green-600: #059669;
 
 --emerald-200: #a7f3d0;
 
 --violet-200: #ddd6fe;
 
 --cyan-500: #06b6d4;
 --pink-500: #ec4899;
 --teal-500: #14b8a6;
 --red-100: #fee2e2;
 --red-800: #991b1b;
 --yellow-600: #ca8a04;
 --purple-50: #faf5ff;
 --purple-100: #f3e8ff;
 --purple-200: #e9d5ff;
 --purple-300: #d8b4fe;
 --purple-350: #c0a0f8;
 --purple-400: #a284fa;
 --purple-500: #a855f7;
 --orange-50: #fff7ed;
 --orange-100: #ffedd5;
 --orange-200: #fdba74;
 --orange-300: #fb923c;
 --orange-500: #f97316;
 --pink-50: #fdf2f8;
 --pink-100: #fce7f3;
 --pink-200: #fbcfe8;
 --pink-300: #f9a8d4;
 --pink-500: #ec4899;
 --indigo-50: #eef2ff;
 --indigo-100: #e0e7ff;
 --indigo-200: #c7d2fe;
 --indigo-300: #a5b4fc;
 --indigo-500: #6366f1;
 --yellow-100: #fef3c7;
 --yellow-300: #fde047;
 --red-50: #fef2f2;
 --red-100: #fee2e2;
 --red-200: #fecaca;
 --teal-50: #f0fdfa;
 --teal-100: #ccfbf1;
 --teal-200: #99f6e4;
 
 /* Text Variants */
 --blue-700: #1d4ed8;
 --blue-800: #1e40af;
 --blue-900: #103090;
 --green-700: #047857;
 --green-800: #065f46;
 --purple-700: #7c3aed;
 --orange-700: #c2410c;
 --pink-700: #be185d;
 --indigo-700: #4338ca;
 --red-700: #b91c1c;
 --teal-700: #0f766e;
 
 /* Grays */
 --gray-50: #f9fafb;
 --gray-100: #f3f4f6;
 --gray-200: #e5e7eb;
 --gray-300: #d1d5db;
 --gray-400: #9ca3af;
 --gray-500: #6b7280;
 --gray-600: #4b5563;
 --gray-700: #374151;
 --gray-800: #1f2937;
 --gray-900: #111827;
 
 /* Slate colors for hero background */
 --slate-50: #f8fafc;
 --slate-100: #f1f5f9;
 
 /* Spacing */
 --space-1: 0.25rem;
 --space-2: 0.5rem;
 --space-3: 0.75rem;
 --space-4: 1rem;
 --space-6: 1.5rem;
 --space-8: 2rem;
 --space-12: 3rem;
 --space-16: 4rem;
 
 /* Typography */
 --text-xs: 0.75rem;
 --text-sm: 0.875rem;
 --text-base: 1rem;
 --text-lg: 1.125rem;
 --text-xl: 1.25rem;
 --text-2xl: 1.5rem;
 --text-3xl: 1.875rem;
 --text-4xl: 2.25rem;
 --text-5xl: 3rem;
 --text-6xl: 3.75rem;
 
 /* Line heights */
 --leading-none: 1;
 --leading-tight: 1.25;
 --leading-snug: 1.375;
 --leading-normal: 1.5;
 --leading-relaxed: 1.625;
 
 /* Font weights */
 --font-normal: 400;
 --font-medium: 500;
 --font-semibold: 600;
 --font-bold: 700;
 
 /* Border radius */
 --rounded-sm: 0.125rem;
 --rounded: 0.25rem;
 --rounded-md: 0.375rem;
 --rounded-lg: 0.5rem;
 --rounded-xl: 0.75rem;
 --rounded-2xl: 1rem;
 --rounded-full: 9999px;
 
 /* Shadows */
 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
 /* Container max-widths */
 --max-w-7xl: 80rem;
 
 /* Z-index */
 --z-10: 10;
 --z-50: 50;
 --z-100: 100;
 --z-200: 200;
 --z-300: 300;
 --z-500: 500;
 --z-1000: 1000;
 
 /* Transitions */
 --transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 --transition-transform: transform 0.3s ease-in-out;
}
/* Base Styles */
body {
 background-color: var(--gray-100);
 color: var(--gray-900);
 font-size: var(--text-base);
 line-height: var(--leading-normal);
 min-height: 100vh;
}
/* Typography */
h1 {
 font-size: var(--text-3xl);
 font-weight: var(--font-bold);
 line-height: var(--leading-tight);
}
h2 {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 line-height: var(--leading-tight);
}
h3 {
 font-size: var(--text-xl);
 font-weight: var(--font-bold);
 line-height: var(--leading-tight);
}
p {
 line-height: var(--leading-relaxed);
}
/* Button Base Styles */
.btn-primary {
 background-color: var(--blue-600);
 color: white;
 padding: var(--space-2) var(--space-6);
 border-radius: var(--rounded-lg);
 font-weight: var(--font-medium);
 transition: var(--transition-colors);
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 border: none;
 cursor: pointer;
}
.btn-primary:hover {
 color: white;
 background-color: var(--blue-700);
}
.btn-secondary {
 background-color: transparent;
 color: var(--gray-700);
 padding: var(--space-2) var(--space-4);
 border: 1px solid var(--gray-300);
 border-radius: var(--rounded-lg);
 font-weight: var(--font-medium);
 transition: var(--transition-colors);
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 cursor: pointer;
}
.btn-secondary:hover {
 color: var(--gray-700);
 background-color: var(--gray-50);
}
/* Icon Styles */
.icon-blue {
 color: var(--blue-600);
}
.icon-green {
 color: var(--green-600);
}
.icon-purple {
 color: var(--purple-600);
}
.icon-orange {
 color: var(--orange-600);
}
.icon-pink {
 color: var(--pink-600);
}
.icon-indigo {
 color: var(--indigo-600);
}
.icon-yellow {
 color: var(--yellow-500);
}
/* Utility Classes */
.bg-gray-100 {
 background-color: var(--gray-100);
}
.text-gray-600 {
 color: var(--gray-600);
}
.text-gray-700 {
 color: var(--gray-700);
}
.text-gray-900 {
 color: var(--gray-900);
}
.font-medium {
 font-weight: var(--font-medium);
}
.font-bold {
 font-weight: var(--font-bold);
}
/* Card Styles */
.card {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
}
/* Container */
.container {
 max-width: var(--max-w-7xl);
 margin: 0 auto;
 padding: 0 var(--space-4);
}
@media (min-width: 640px) {
 .container {
 padding: 0 var(--space-6);
 }
}
@media (min-width: 1024px) {
 .container {
 padding: 0 var(--space-8);
 }
}
/* Form Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
 width: 100%;
 padding: var(--space-3);
 border: 1px solid var(--gray-300);
 border-radius: var(--rounded-md);
 font-size: var(--text-base);
 transition: var(--transition-colors);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
 outline: none;
 border-color: var(--blue-500);
 box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}
label {
 display: block;
 font-weight: var(--font-medium);
 margin-bottom: var(--space-2);
 color: var(--gray-700);
}
.form-group {
 margin-bottom: var(--space-4);
}
.radio-group {
 display: grid;
 gap: var(--space-2);
}
.radio-group label {
 font-weight: var(--font-normal);
 display: flex;
 align-items: center;
 gap: var(--space-2);
}
.checkbox-label {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 font-weight: var(--font-normal);
}
/* Responsive Text Sizes */
@media (min-width: 768px) {
 h1 {
 font-size: var(--text-4xl);
 }
}
/* Hidden / Visible */
.hidden {display: none; visibility: hidden;}
.visible {display: inline; visibility: visible;} 
/* Links */
a {
 color: var(--blue-900);
 transition: color 0.2s ease-in-out;
} 
a:hover {
 color: var(--blue-800);
} 
/* Tables where still used */
table {
 }
tr {
	justify-items: start;
}
td {
	padding: var(--space-1) var(--space-2);
}
/* Layout Styles - Grid-based */
/* Header Layout */
.header-sticky {
 background: white;
 box-shadow: var(--shadow-sm);
 position: sticky;
 top: 0;
 left: 0;
 right: 0;
 z-index: var(--z-50);
 overflow: visible; /* Allow banner to extend beyond nav */ 
}
.header-container {
 max-width: var(--max-w-7xl);
 margin: 0 auto;
 padding: 0 var(--space-4);
}
@media (min-width: 640px) {
 .header-container {
 padding: 0 var(--space-6);
 }
}
@media (min-width: 1024px) {
 .header-container {
 padding: 0 var(--space-8);
 }
}
.header-content {
 display: grid;
 grid-template-columns: 1fr auto;
 height: 4rem;
 gap: var(--space-4);
}
/* Logo Layout */
.header-logo {
	display: grid;
	align-items: center;
}
.logo-link {
 display: grid;
 grid-template-columns: auto 1fr;
 align-items: center;
 gap: var(--space-3);
}
.logo-icon {
 background: linear-gradient(to bottom right, var(--blue-600), var(--indigo-700));
 padding: var(--space-2);
 border-radius: var(--rounded-lg);
 color: white;
 width: 2.5rem;
 height: 2.5rem;
 display: grid;
 place-items: center;
}
.logo-text {
 display: grid;
}
.logo-title {
 font-size: var(--text-xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.logo-subtitle {
 font-size: var(--text-xs);
 color: var(--gray-600);
}
/* Navigation Layout */
.main-nav {
 display: grid; /* none */
 grid-template-columns: repeat(3, auto);
 align-items: center;
 gap: var(--space-3);
}
.notmobile {
	display: none;
}
@media (min-width: 1280px) {
 .DISABLED-main-nav {
 display: grid;
 }
	.notmobile {
		display: block;
	}
 
}
.nav-link {
 color: var(--gray-700);
 font-weight: var(--font-medium);
 transition: var(--transition-colors);
}
.nav-link:hover {
 color: var(--blue-600);
}
.mobile-menu-btn {
 display: none; /* grid */
 place-items: center;
 padding: var(--space-2);
 border-radius: var(--rounded-lg);
 transition: var(--transition-colors);
}
.mobile-menu-btn:hover {
 background-color: var(--gray-100);
}
@media (min-width: 1280px) {
 .mobile-menu-btn {
 display: none;
 }
}
/* Main Container */
.main-container {
x-background-color: #ffff00;
 max-width: var(--max-w-7xl);
 margin: 0 auto;
 padding: var(--space-1) var(--space-4);
}
@media (min-width: 640px) {
 .main-container {
 padding: var(--space-1) var(--space-6);
 }
}
@media (min-width: 1024px) {
 .main-container {
 padding: var(--space-1) var(--space-8);
 }
}
/* Breadcrumbs Layout */
.breadcrumbs {
 margin-bottom: var(--space-6); 
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	overflow-wrap: break-word;
	gap: var(--space-2);
	font-size: var(--text-base);
	color: var(--gray-600);
}
@media (min-width: 640px) {
 .breadcrumb-list {
 gap: var(--space-3);
 }
}
.breadcrumb-item {
	x-white-space:nowrap;
}
.breadcrumb-link {
 transition: var(--transition-colors);
}
.breadcrumb-link:hover {
 color: var(--gray-900);
}
.breadcrumb-current {
 font-weight: var(--font-normal);
 color: var(--gray-900);
}
.breadcrumb-separator {
	color: var(--gray-600);
	width: 14px;
	height: 14px;
}
/* Main Layout Grid */
.main-layout {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-8);
}
@media (min-width: 1024px) {
 .main-layout {
 grid-template-columns: 2fr 1fr;
 }
}
.main-content {
 display: grid;
 gap: var(--space-8);
}
/* Hero Section Layout */
.hero-section {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
 margin-bottom: var(--space-8);
}
.hero-gradient-line {
 height: 0.25rem;
 background: linear-gradient(to right, var(--blue-200), var(--purple-200), var(--indigo-200));
 opacity: 0.4;
}
.hero-content {
 position: relative;
 background: linear-gradient(to bottom right, var(--slate-50), var(--slate-100));
 padding: var(--space-3);
}
@media (min-width: 1024px) {
 .hero-content {
 padding: var(--space-2);
 }
}
.hero-decorations {
 position: absolute;
 inset: 0;
 overflow: hidden;
}
.decoration-card {
 position: absolute;
 border-radius: var(--rounded-xl);
 opacity: 0.2;
}
.decoration-blue {
 right: -1rem;
 top: -1rem;
 width: 8rem;
 height: 6rem;
 background-color: var(--blue-200);
 transform: rotate(12deg);
}
.decoration-purple {
 left: -2rem;
 top: 2rem;
 width: 6rem;
 height: 8rem;
 background-color: var(--purple-200);
 transform: rotate(-6deg);
}
.decoration-green {
 right: -1rem;
 top: -1rem;
 width: 8rem;
 height: 6rem;
 background-color: var(--green-200);
 transform: rotate(12deg);
}
.decoration-pink {
 left: -2rem;
 top: 2rem;
 width: 6rem;
 height: 8rem;
 background-color: var(--pink-200);
 transform: rotate(-6deg);
}
.hero-main {
 position: relative;
 z-index: var(--z-10);
}
/* Stats Grid */
.stats-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-4);
 margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
 .stats-grid {
 grid-template-columns: repeat(4, 1fr);
 }
}
.stat-card {
 background: white;
 border-radius: var(--rounded-lg);
 padding: var(--space-4);
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--gray-100);
 text-align: center;
 display: grid;
 gap: var(--space-2);
}
.stat-icon {
 width: 1.25rem;
 height: 1.25rem;
 justify-self: center;
 justify-content: center; 
}
.stat-icon-blue {
 color: var(--blue-500);
}
.stat-icon-green {
 color: var(--green-500);
}
.stat-icon-purple {
 color: var(--purple-500);
}
.stat-icon-yellow {
 color: var(--yellow-500);
 fill: currentColor;
}
.stat-content {
 display: grid;
 gap: var(--space-1);
 align-items: baseline;
 justify-content: center; 
 text-align: center;
}
.stat-number {
 font-weight: var(--font-bold);
 font-size: var(--text-lg);
}
.stat-label {
 font-size: var(--text-sm);
 color: var(--gray-500);
}
/* Location Info */
.location-info {
 display: grid;
 grid-template-columns: auto 1fr;
 align-items: center;
 gap: var(--space-2);
 margin-bottom: var(--space-3);
}
.location-icon {
 width: 1rem;
 height: 1rem;
 color: var(--gray-400);
}
.location-text {
 font-size: var(--text-sm);
 color: var(--gray-600);
}
/* Hero Bottom Layout */
.hero-bottom {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
}
@media (min-width: 1024px) {
 .hero-bottom {
 grid-template-columns: 1fr auto;
 align-items: start;
 }
}
.hero-info {
 display: grid;
 gap: var(--space-4);
}
.school-name, .hero-h1 {
 font-size: var(--text-3xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
@media (min-width: 768px) {
 .school-name, .hero-h1 {
 font-size: var(--text-4xl);
 }
}
.school-description {
 font-size: var(--text-lg);
 color: var(--gray-600);
}
/* School Tags */
.school-tags {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
 justify-content: start;
}
.tag {
 padding: var(--space-1) var(--space-3);
 border-radius: var(--rounded-full);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
}
.tag-blue {
 background-color: var(--blue-100);
 color: var(--blue-700);
}
.tag-green {
 background-color: var(--green-100);
 color: var(--green-700);
}
.tag-purple {
 background-color: var(--purple-100);
 color: var(--purple-700);
}
.tag-orange {
 background-color: var(--orange-100);
 color: var(--orange-700);
}
.tag-pink {
 background-color: var(--pink-100);
 color: var(--pink-700);
}
.tag-indigo {
 background-color: var(--indigo-100);
 color: var(--indigo-700);
}
/* Hero Actions */
.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-3);
 justify-content: start;
}
.action-icon {
 width: 1rem;
 height: 1rem;
}
/* Hero Photos */
.hero-photo-desktop {
 display: none;
}
@media (min-width: 1024px) {
 .hero-photo-desktop {
 display: block;
 }
}
.hero-photo-mobile {
 display: block;
}
@media (min-width: 1024px) {
 .hero-photo-mobile {
 display: none;
 }
}
.polaroid-photo {
 background: white;
 padding: var(--space-4);
 border-radius: var(--rounded-lg);
 box-shadow: var(--shadow-lg);
 transform: rotate(3deg);
 transition: var(--transition-transform);
 cursor: pointer;
 width: 12rem;
}
.polaroid-photo:hover {
 transform: rotate(0deg);
}
.mobile-photo {
 background: white;
 padding: var(--space-4);
 border-radius: var(--rounded-lg);
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--gray-100);
 cursor: pointer;
}
.campus-image {
 width: 100%;
 border-radius: var(--rounded);
 object-fit: cover;
}
.polaroid-photo .campus-image {
 height: 9rem;
}
.mobile-photo .campus-image {
 height: 8rem;
}
.photo-caption {
 margin-top: var(--space-2);
 text-align: center;
 color: var(--gray-600);
}
.polaroid-photo .photo-caption {
 font-size: var(--text-xs);
}
.mobile-photo .photo-caption {
 font-size: var(--text-sm);
}
/* Sidebar Layout */
.sidebar {
 display: grid;
 gap: var(--space-8);
 align-content: start;
}
.sidebar-section {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-sm);
 padding: var(--space-6);
}
.sidebar-title {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-4);
}
.sidebar-btn {
 width: 100%;
 margin-bottom: var(--space-2);
}
.sidebar-btn:last-child {
 margin-bottom: 0;
}
.vpadded {
 padding: var(--space-4) 0;
}
.vpaddedsm {
 padding: var(--space-2) 0;
}
.toppadded {
 padding-top: var(--space-4);
}
.toppaddedsm {
 padding-top: var(--space-2);
}
.hint {
	color: var(--gray-500);
	font-size: var(--text-sm);
}
.grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
}
.grid3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
}
.flexy {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Component Styles */
/* Content Sections */
.content-section {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-sm);
 padding: var(--space-6);
}
.section-header {
 display: grid;
 grid-template-columns: auto 1fr;
 align-items: center;
 gap: var(--space-3);
 margin-bottom: var(--space-4);
}
.section-icon {
 width: 1.5rem;
 height: 1.5rem;
 background: none !important;
}
.section-title {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.section-content {
 margin-bottom: var(--space-4);
}
.section-actions {
 display: grid;
 grid-template-columns: auto auto;
 gap: var(--space-4);
 justify-content: start;
}
/* About Section */
.about-text {
 color: var(--gray-600);
 line-height: var(--leading-relaxed);
}
.action-show-more {
 display: grid;
 grid-template-columns: auto auto;
 align-items: center;
 gap: var(--space-2);
 color: var(--blue-600);
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: var(--transition-colors);
 background: none;
 border: none;
 padding: 0;
 cursor: pointer;
}
.action-show-more:hover {
 color: var(--blue-700);
}
.action-read-more {
 color: var(--blue-600);
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: var(--transition-colors);
}
.action-read-more:hover {
 color: var(--blue-700);
}
/* Share Dropdown */
.share-dropdown {
 position: relative;
 display: inline-block;
}
.share-dropdown-content {
 display: none;
 position: absolute;
 right: 0;
 bottom: 100%;
 margin-bottom: var(--space-1);
 background: white;
 min-width: 160px;
 box-shadow: var(--shadow-lg);
 border-radius: var(--rounded-lg);
 border: 1px solid var(--gray-200);
 z-index: 1000;
 overflow: hidden;
}
.share-dropdown-content.show {
 display: block;
}
.share-option {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-3);
 color: var(--gray-700);
 text-decoration: none;
 font-size: var(--text-sm);
 transition: var(--transition-colors);
}
.share-option:hover {
 background-color: var(--gray-50);
 color: var(--gray-900);
}
.share-option svg {
 color: var(--gray-500);
}
.fact-link {
 color: var(--blue-600);
 transition: var(--transition-colors);
}
.fact-link:hover {
 color: var(--blue-700);
}
/* Responsive adjustments for school tags */
@media (max-width: 767px) {
 .school-tags {
 grid-auto-flow: row;
 grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
 justify-items: start;
 }
}
/* Responsive adjustments for hero actions */
@media (max-width: 767px) {
 .hero-actions {
 grid-auto-flow: row;
 grid-template-columns: 1fr;
 gap: var(--space-2);
 }
 
 .hero-actions .btn-primary,
 .hero-actions .btn-secondary {
 justify-self: stretch;
 text-align: center;
 justify-content: center;
 }
}

/* Section Links */
.section-actions {
 text-align: center;
 width: 100%;
 justify-content: center;
}
.section-link {
 color: var(--blue-600);
 text-decoration: none;
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
 display: inline-block;
}
.section-link:hover {
 color: var(--blue-700);
 text-decoration: underline;
}
.section-link-blue { color: var(--blue-600); }
.section-link-blue:hover { color: var(--blue-700); }
.section-link-green { color: var(--green-600); }
.section-link-green:hover { color: var(--green-700); }
.section-link-purple { color: var(--purple-600); }
.section-link-purple:hover { color: var(--purple-700); }
.section-link-orange { color: var(--orange-600); }
.section-link-orange:hover { color: var(--orange-700); }
.section-link-yellow { color: var(--yellow-500); }
.section-link-yellow:hover { color: var(--yellow-600); }
.section-link-pink { color: var(--pink-600); }
.section-link-pink:hover { color: var(--pink-700); }
.section-link-indigo { color: var(--indigo-600); }
.section-link-indigo:hover { color: var(--indigo-700); }
/* Icon Color Classes */
.icon-blue {
 background: var(--blue-100);
 color: var(--blue-600);
}
.icon-green {
 background: var(--green-100);
 color: var(--green-600);
}
.icon-orange {
 background: var(--orange-100);
 color: var(--orange-600);
}
.icon-red {
 background: var(--red-100);
 color: var(--red-600);
}
.icon-purple {
 background: var(--purple-100);
 color: var(--purple-600);
}
.icon-indigo {
 background: var(--indigo-100);
 color: var(--indigo-600);
}
.icon-teal {
 background: var(--teal-100);
 color: var(--teal-600);
}
.icon-pink {
 background: var(--pink-100);
 color: var(--pink-600);
}
/* Enhanced Sidebar Sections */
.open-day-info {
 display: grid;
 gap: var(--space-4);
}
.open-day-item {
 background: var(--blue-50);
 border: 1px solid var(--blue-200);
 border-radius: var(--rounded-md);
 padding: var(--space-4);
 display: grid;
 gap: var(--space-3);
}
.open-day-date {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 color: var(--blue-700);
 font-weight: var(--font-medium);
}
.open-day-date svg {
 color: var(--blue-600);
}
.date-text {
 font-size: var(--text-sm);
}
.open-day-description {
 color: var(--gray-600);
 font-size: var(--text-sm);
 margin: 0;
}
.open-day-btn {
	max-width: 150px;
	text-align: center;
}
.btn-outline {
 background: transparent;
 color: var(--blue-600);
 border: 1px solid var(--blue-600);
 padding: var(--space-2) var(--space-4);
 border-radius: var(--rounded-md);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 cursor: pointer;
 transition: all 0.2s ease-in-out;
}
.btn-outline:hover {
 background: var(--blue-600);
 color: white;
}
.recent-submissions {
 display: grid;
 gap: var(--space-3);
}
.submission-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: var(--space-3);
 align-items: center;
 padding: var(--space-3) 0;
 border-radius: var(--rounded-md);
 transition: background-color 0.2s ease-in-out;
}
.submission-item:hover {
 background: var(--gray-50);
}
.submission-info {
 display: grid;
 gap: var(--space-1);
}
.submission-title {
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 color: var(--gray-900);
 margin: 0;
}
.submission-date {
 color: var(--gray-500);
 font-size: var(--text-xs);
 margin: 0;
}
/* Homepage/Mainpage Styles */
.hero-section-main {
 text-align: center;
 margin-bottom: var(--space-12);
}
.hero-title {
 font-size: var(--text-4xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-4);
 line-height: 1.2;
}
@media (min-width: 768px) {
 .hero-title {
 font-size: var(--text-6xl);
 }
}
.hero-title-gradient {
 display: block;
 background: linear-gradient(135deg, var(--blue-600) 0%, var(--indigo-600) 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 color: transparent;
}
.hero-description {
 font-size: var(--text-xl);
 color: var(--gray-600);
 max-width: 48rem;
 margin: 0 auto;
 line-height: var(--leading-relaxed);
}
/* Stats Section */
.stats-section {
 background: linear-gradient(135deg, var(--blue-50) 0%, var(--indigo-50) 100%);
 border-radius: var(--rounded-2xl);
 padding: var(--space-8);
 margin-bottom: var(--space-12);
}
.stats-title {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 text-align: center;
 margin-bottom: var(--space-8);
}
.stats-grid-main {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-6);
}
@media (min-width: 1024px) {
 .stats-grid-main {
 grid-template-columns: repeat(4, 1fr);
 }
}
.stat-item {
 text-align: center;
}
/* Mainpage stats icons */
.stats-grid-main .stat-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 3rem;
 height: 3rem;
 border-radius: var(--rounded-full);
 background: white;
 margin-bottom: var(--space-3);
}
/* Mainpage stats icon colors */
.stats-grid-main .stat-icon.blue {
 color: var(--blue-600);
}
.stats-grid-main .stat-icon.green {
 color: var(--green-600);
}
.stats-grid-main .stat-icon.purple {
 color: var(--purple-600);
}
.stats-grid-main .stat-icon.yellow {
 color: var(--yellow-600);
}
.stat-value {
 font-size: var(--text-3xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-1);
}
.stat-label {
 font-size: var(--text-sm);
 color: var(--gray-600);
}
/* Featured Schools */
.featured-schools {
 margin-bottom: var(--space-12);
}
.section-header {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 margin-bottom: var(--space-6);
}
.trophy-icon, .news-icon, .calendar-icon {
 color: var(--yellow-600);
}
.news-icon {
 color: var(--blue-600);
}
.calendar-icon {
 color: var(--green-600);
}
.section-title {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.featured-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
}
@media (min-width: 768px) {
 .featured-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}
.featured-card {
 position: relative;
 height: 12rem;
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 color: white;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 cursor: pointer;
 overflow: hidden;
 transition: transform 0.3s ease-in-out;
}
.featured-card:hover {
 transform: translateY(-4px);
}
.featured-card.blue {
 background: linear-gradient(135deg, var(--blue-500) 0%, var(--cyan-500) 100%);
}
.featured-card.purple {
 background: linear-gradient(135deg, var(--purple-500) 0%, var(--pink-500) 100%);
}
.featured-card.green {
 background: linear-gradient(135deg, var(--green-500) 0%, var(--teal-500) 100%);
}
.featured-badge {
 background: rgba(255, 255, 255, 0.2);
 backdrop-filter: blur(8px);
 border-radius: var(--rounded-full);
 padding: var(--space-1) var(--space-3);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
 display: inline-block;
 margin-bottom: var(--space-3);
}
.featured-name {
 font-size: var(--text-xl);
 font-weight: var(--font-bold);
 margin-bottom: var(--space-2);
}
.featured-details {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}
.featured-detail {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 color: rgba(255, 255, 255, 0.9);
 font-size: var(--text-sm);
}
.featured-bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.featured-rating {
 display: flex;
 align-items: center;
 gap: var(--space-1);
 font-size: var(--text-sm);
 font-weight: var(--font-semibold);
}
/* Events Section */
.events-section {
 margin-bottom: var(--space-12);
}
.events-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
}
@media (min-width: 768px) {
 .events-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (min-width: 1024px) {
 .events-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}
.event-card {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-lg);
 padding: var(--space-6);
 border-left: 4px solid var(--green-500);
 transition: all 0.3s ease-in-out;
 cursor: pointer;
}
.event-card:hover {
 box-shadow: var(--shadow-xl);
 transform: translateY(-2px);
}
.event-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: var(--space-4);
}
.event-type {
 background: var(--green-100);
 color: var(--green-800);
 padding: var(--space-1) var(--space-3);
 border-radius: var(--rounded-full);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
}
.event-upcoming {
 background: var(--red-100);
 color: var(--red-800);
 padding: var(--space-1) var(--space-2);
 border-radius: var(--rounded-full);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
}
.event-school {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-2);
 transition: color 0.2s ease-in-out;
}
.event-card:hover .event-school {
 color: var(--green-600);
}
.event-details {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 margin-bottom: var(--space-4);
}
.event-detail {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--text-sm);
 color: var(--gray-600);
}
.event-detail svg {
 color: var(--gray-400);
 width: 1rem;
 height: 1rem;
}
.event-description {
 color: var(--gray-600);
 font-size: var(--text-sm);
 margin-bottom: var(--space-4);
 line-height: var(--leading-relaxed);
}
.event-register-btn {
 width: 100%;
 background: var(--green-600);
 color: white;
 border: none;
 padding: var(--space-2) var(--space-4);
 border-radius: var(--rounded-lg);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 cursor: pointer;
 transition: background-color 0.2s ease-in-out;
}
.event-register-btn:hover {
 background: var(--green-700);
}
/* Directory Preview */
.directory-preview {
 margin-bottom: var(--space-12);
}
.directory-cta {
 text-align: center;
 margin-top: var(--space-8);
}
/* CTA */
.cta {
 color: var(--green-600);
 transition: var(--transition-colors);
 text-decoration: underline;
}
.cta:hover {
 color: var(--green-700);
}
/* FORMS */
.loginform2 {
	padding: 5px;
}
.forminput, .formbutton {
	width: 150px;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--rounded-lg);
	border: 1px solid var(--gray-200);
	font-size: var(--text-lg);
}
.formbutton {
	font-weight: bold;
}
/* Responsive Styles */
/* Mobile-first breakpoints */
/* Mobile: < 768px */
/* Tablet: 768px - 1023px */
/* Desktop: 1023px - 1279px */
/* Large Desktop: >= 1280px */
/* Mobile Overrides (< 768px) */
@media (max-width: 767px) {
 /* Header adjustments */
 .header-content {
 grid-template-columns: 1fr auto;
 align-items: center;
 gap: var(--space-2);
 }
 
 .logo-title {
 font-size: var(--text-lg);
 }
 
 /* Container padding adjustments */
 .main-container {
 padding: var(--space-3) var(--space-4);
 }
 
 /* Hero section mobile adjustments */
 .hero-content {
 padding: var(--space-3);
 }
 
 .stats-grid {
 gap: var(--space-3);
 }
 
 .stat-card {
 padding: var(--space-3);
 }
 
 .school-name, .hero-h1 {
 font-size: var(--text-2xl);
 }
 
 .school-description {
 font-size: var(--text-base);
 }
 
 /* Content sections mobile */
 .content-section {
 padding: var(--space-4);
 }
 
 .section-title {
 font-size: var(--text-xl);
 }
 
 /* Guide section mobile */
 .guide-content {
 gap: var(--space-4);
 }
 
 .guide-title {
 font-size: var(--text-xl);
 }
 
 /* Form adjustments */
 .radio-group label {
 font-size: var(--text-sm);
 }
 
 /* News items mobile */
 .news-meta {
 grid-template-columns: 1fr;
 gap: var(--space-1);
 align-items: start;
 }
 
 /* Sidebar mobile - full width */
 .sidebar-section {
 padding: var(--space-4);
 }
}
/* Tablet adjustments (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
 /* Stats grid - 4 columns on tablet */
 .stats-grid {
 grid-template-columns: repeat(4, 1fr);
 }
 
 .stat-card {
 grid-template-columns: 1fr;
 text-align: center;
 }
 
 .stat-icon {
 justify-self: center;
 }
 
 /* Hero bottom still stacked on tablet */
 .hero-bottom {
 grid-template-columns: 1fr;
 }
 
 /* School tags wrap better on tablet */
 .school-tags {
 grid-auto-flow: row;
 grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
 justify-items: start;
 }
}
/* Desktop enhancements (>= 1024px) */
@media (min-width: 1024px) {
 /* Large container spacing */
 .main-container {
 padding: var(--space-3) var(--space-8);
 }
 
 /* Hero section desktop enhancements */
 .hero-content {
 padding: var(--space-6);
 }
 
 /* Stats cards - horizontal layout on desktop */
 .stat-card {
 grid-template-columns: auto auto auto;
 text-align: left;
 justify-content: center;
 align-items: center;
 }
 
 .stat-content {
	display: flex;
 justify-items: space-around; 
 justify-content: center;
 grid-template-columns: auto auto auto;
 }
 
 .stat-icon {
	justify-self: end;
	text-align: right;
	padding: 3px;
	
 }
 
 /* School tags - single row on desktop */
 .school-tags {
 grid-auto-flow: column;
 grid-auto-columns: max-content;
 justify-content: start;
 }
 
 /* Hero actions - single row on desktop */
 .hero-actions {
 grid-auto-flow: column;
 grid-auto-columns: max-content;
 }
 
 /* Content sections desktop spacing */
 .content-section {
 padding: var(--space-8);
 }
 
 .section-header {
 margin-bottom: var(--space-6);
 }
 
 /* Guide section desktop layout */
 .guide-content {
 gap: var(--space-8);
 }
 
 .guide-thumbnail {
 width: 15rem;
 }
 
 .guide-image {
 height: 18rem;
 }
}
/* Large desktop (>= 1280px) */
@media (min-width: 1280px) {
 .header-content {
	grid-template-columns: 1fr auto;
	gap: var(--space-2);
 }
 /* Even more spacing for large screens */
 .main-container {
 x-padding: var(--space-8) var(--space-8);
 padding: var(--space-3) var(--space-8);
 }
 
 .hero-content {
 padding: var(--space-8);
 }
 
 /* Larger guide thumbnail */
 .guide-thumbnail {
 width: 18rem;
 }
 
 .guide-image {
 height: 22rem;
 }
}
/* Print styles */
@media print {
 .header-sticky,
 .mobile-menu-btn,
 .hero-actions,
 .section-actions,
 .action-buttons,
 .guide-form {
 display: none;
 }
 
 .hero-section,
 .content-section,
 .sidebar-section {
 box-shadow: none;
 border: 1px solid var(--gray-300);
 }
 
 .main-layout {
 grid-template-columns: 1fr;
 }
 
 body {
 background: white;
 }
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
 * {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
 
 .polaroid-photo {
 transform: none;
 }
 
 .polaroid-photo:hover {
 transform: none;
 }
}
	.pageany, .pagenow {padding: 5px 2px; transition: all 0.2 ease-in-out;}
	.pageany {font-weight: bold; }
	.pagenow {font-weight: bold; background-color: var(--blue-500); color: white; border-radius: var(--rounded-lg);}
	a.linkpage,a.linkpage:link,a.linkpage:visited,a.linkpage:active {text-decoration:none;color:#444444; border:0; padding: 5px 2px;}
	a.linkpage:hover {font-weight: bold; background-color: var(--blue-500); color: #ffffff; border-radius: var(--rounded-lg); }
	.pagecustom {
		background-color:#f0f0f0;
		border:1px solid #a0a0a0;
		padding:5px;
		border-radius:5px;
		margin-bottom: 10px;
	}
	.pageinput {
		padding: var(--space-1) var(--space-2);
		border-radius: var(--rounded-sm);
		margin-right: 0 var(--space-3);
	}
	.pagebtn {
		background-color: var(--blue-600);
		color: white;
		border-radius: var(--rounded-xl);
		padding: var(--space-1) var(--space-3);
		font-weight: bold;
	}
	
	
 	
 	.pgs1 {
		margin:10px 0;		
	}
	.pgs1pgs {margin:0;line-height: 38px;}
	.pgsshare {float: left; margin-left:30px;}
	.pgs2 {
		margin:10px 0;		
		line-height: 38px;		
	}
	.prepgs1 {
		margin: 0 5px 15px 5px;
		line-height: 25px;
	}
	.prepgs1 > span {white-space:nowrap; margin-right:15px;}
	@media screen and (max-width:500px) {
		.pgs1 {
			margin:10px 0; line-height: 3;
		}
		.pgs1pgs, .pgsshare {
			float:none;
			margin:0 0 10px 5px;
		}
	}
	@media screen and (max-width:320px) {
		.prepgs1 {margin-bottom:5px;}
	}
	
	@media screen and (min-width: 321px) and (max-width:720px) {
		.prepgs1 {margin-bottom:5px;}
	}
	
/* Pagination */
.pagination {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-2);
}
.pagination-btn {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-2) var(--space-4);
 border: 1px solid var(--gray-300);
 background: white;
 color: var(--gray-700);
 border-radius: var(--rounded-lg);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 cursor: pointer;
 transition: all 0.2s ease-in-out;
}
.pagination-btn:hover:not(:disabled) {
 background: var(--gray-50);
 border-color: var(--gray-400);
}
.pagination-btn:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}
.pagination-btn svg {
 width: 1rem;
 height: 1rem;
}
.pagination-numbers {
 display: flex;
 gap: var(--space-1);
 margin: 0 var(--space-4);
}
.pagination-number {
 width: 2.5rem;
 height: 2.5rem;
 border: 1px solid var(--gray-300);
 background: white;
 color: var(--gray-700);
 border-radius: var(--rounded-lg);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 cursor: pointer;
 transition: all 0.2s ease-in-out;
 display: flex;
 align-items: center;
 justify-content: center;
}
.pagination-number:hover {
 background: var(--gray-50);
 border-color: var(--gray-400);
}
.pagination-number.active {
 background: var(--blue-600);
 border-color: var(--blue-600);
 color: white;
}
.pagination-number.active:hover {
 background: var(--blue-700);
 border-color: var(--blue-700);
}
	.bannerdesktop, .bannermarkdesktop {
		display: none;
		visibility: hidden;
	}
	.bannermobile, .bannermarkmobile {
		display: block;
		visibility: visible;
	}
	.bannermobile {
		width: 360px;
		height: 250px;
	}
	
	.bannermark {
		padding: 5px 0 3px 0;
		color: #777777;
		font-size: 0.8em;
		text-align: right;
	}
	
	.promoslot {
		width: 360px;
		justify-self: center;
	}
	.bannertopmobile, .bannermidmobile, .bannerbtmmobile {
		width: 360px;
		height: 250px;
	}
	.bannertopdesktop, .bannermiddesktop, .bannerbtmdesktop {
		width: 728px;
		height: 90px;
	}
	
	.toppromoslot {
		display: grid;
		width: 100%;
		min-height: 285px;
		padding-top: 10px;
		justify-content: center;
		align-content: center;
		x-border: 2px solid #ff00ff;
	}
				
	#toppromo {
		width: 360px;
		justify-self: center;		
	}
	
	#midpromoslot {
		grid-column: 1/-1;
		justify-self: center;
	}
	
	#midpromo {
		justify-items: center;
	}
	
	#btmpromo {
		justify-items: center;
	}
	
	@media screen and (min-width:1000px) {
		.bannermobile, .bannermarkmobile {
			display: none;
			visibility: hidden;
		}
		.bannerdesktop, .bannermarkdesktop {
			display: block;
			visibility: visible;
		}
		.bannerdesktop {		
			width: 728px;
			height: 90px;
		}
		.promoslot {
			width: 728px;
		}
		.toppromoslot {
			width: 100%;
			min-height: 125px;
		}
		#toppromo {
			width: 728px;
		}
		
	}
	
	/* demo banners */
	
	.demobanner {
		width: 100%;
		height: 100%;
		background-color:#ffff00;
		border:2px solid #ffa000;
		border-radius: 3px;
		display: grid;
		justify-content: center;
		align-content: center;
		justify-items: center;
		align-items: center;
	}
	
	.demobannercontent {
		orig-font-size: 60px;
		font-size: 30px;
		color: #555555;
		font-weight: bold;
		orig-height: 60px;
		height: 40px;
	}
	.demobannercomment {
		color: #555555;
		font-weight: bold;
	}
	
/* Footer Styles */
.site-footer {
 background: var(--gray-900);
 color: var(--gray-300);
 margin-top: var(--space-16);
}
.footer-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--space-4);
}
.footer-content {
 display: grid;
 grid-template-columns: 1fr 2fr;
 gap: var(--space-12);
 padding: var(--space-12) 0;
 border-bottom: 1px solid var(--gray-800);
}
.footer-section {
 display: grid;
 gap: var(--space-6);
}
.footer-brand {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 color: white;
 margin: 0;
}
.footer-tagline {
 color: var(--gray-400);
 margin: 0;
}
.footer-social {
 display: flex;
 gap: var(--space-4);
}
.social-link {
 width: 2.5rem;
 height: 2.5rem;
 background: var(--gray-800);
 color: var(--gray-400);
 border-radius: var(--rounded-md);
 display: grid;
 place-items: center;
 transition: all 0.2s ease-in-out;
 text-decoration: none;
}
.social-link:hover {
 background: var(--blue-600);
 color: white;
 transform: translateY(-2px);
}
.footer-links {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--space-8);
}
.footer-column {
 display: grid;
 gap: var(--space-4);
}
.footer-heading {
 font-size: var(--text-base);
 font-weight: var(--font-semibold);
 color: white;
 margin: 0;
}
.footer-menu {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: var(--space-3);
}
.footer-link {
 color: var(--gray-400);
 text-decoration: none;
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
}
.footer-link:hover {
 color: white;
}
.footer-bottom {
 padding: var(--space-6) 0;
}
.footer-bottom-content {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: var(--space-8);
 align-items: center;
}
.footer-legal {
 display: grid;
 gap: var(--space-4);
}
.copyright {
 color: var(--gray-500);
 font-size: var(--text-sm);
 margin: 0;
}
.legal-links {
 display: flex;
 gap: var(--space-6);
}
.legal-link {
 color: var(--gray-500);
 text-decoration: none;
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
}
.legal-link:hover {
 color: var(--gray-300);
}
.footer-apps {
 display: flex;
 align-items: center;
 gap: var(--space-4);
}
.apps-text {
 color: var(--gray-500);
 font-size: var(--text-sm);
}
.app-link {
 text-decoration: none;
}
.app-badge {
 height: 2.5rem;
 width: auto;
}
/* Responsive Footer */
@media (max-width: 768px) {
 .footer-content {
 grid-template-columns: 1fr;
 gap: var(--space-8);
 }
 .footer-links {
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-6);
 }
 .footer-bottom-content {
 grid-template-columns: 1fr;
 text-align: center;
 gap: var(--space-6);
 }
 .legal-links {
 justify-content: center;
 }
 .footer-apps {
 justify-content: center;
 }
 .documents-grid {
 grid-template-columns: 1fr;
 }
 .faculty-grid {
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
}
.panel {
	background-color: var(--green-100);
	border: 1px solid var(--green-300);
	padding: var(--space-2) var(--space-2);
	border-radius: var(--rounded-xl);
}
.panelheader {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: var(--space-2);
}
.paneltag {
	color: white;
	font-weight: bold;
	background-color: var(--green-700);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--rounded-xl);
}
.panelttl {
	font-weight: bold;
}
a.panellink {
	color: var(--green-700);
}
a.panellink:hover {
	color: var(--green-600);
}
.panelslots {
	display: flex;
	flex-wrap: wrap;	
	gap: var(--space-1);
}
.panelslot {
	text-align: center;
	border: 1px solid var(--green-300);
	border-radius: var(--rounded-lg);
	padding: var(--space-1) var(--space-2);
	background: white;
	font-size: var(--text-sm);
}
.apanel {
	color: var(--green-700);
	transition: color 0.2 ease-in-out;
}
a.apanel:hover {
	color: var(--green-600);
}
.panelslotfirst {
	border-radius: 4px 4px 0 4px;
}
.panelslotlast {
	border-radius: 4px 4px 4px 0;
}
.panelslotactive {
	background: rgba(240,250,240,0.5);
	font-weight: bold
}
.chartdiv, #chartplacesdiv {
	width: 330px;
	max-width: 90%;
	height: 300px;
}
@media (min-width: 768px) {
	.chartdiv, #chartplacesdiv {
		width: 720px;
		height: 300px;
	}
}
.admctl {
	background-color:#ffffe0;
	border:1px solid #ffff80;
	border-radius:10px;
	padding:5px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#ctlmenublock {
	background-color: var(--blue-100);
	border: 1px solid var(--blue-300);
	padding: var(--space-2) var(--space-2);
	border-radius: var(--rounded-xl);}
#ctlmenuinner {
	text-align:left;
	padding: var(--space-1) var(--space-3);
}
#ctlmenu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
	padding: 5px;
}
#ctlmenu > * {
x-border: 1px solid #ff0000;
}
.ctllog {grid-row: 1; grid-column: 1/span 2;}
.ctladm {grid-row: 2; grid-column: 1;}
.ctlaccount {grid-row: 2; grid-column: 2;}
.ctlnote {grid-row: 3; grid-column: 1/span 2;}
@media screen and (min-width:1280px) {
	#ctlmenu {
		display: grid;
		grid-template-columns: auto 110px 50px 1fr;
		grid-gap: 25px;
	}
	.ctllog {grid-row: 1; grid-column: 1;}
	.ctladm {grid-row: 1; grid-column: 2;}
	.ctlaccount {grid-row: 1; grid-column: 3;}
	.ctlnote {grid-row: 1; grid-column: 4;
		 white-space: nowrap; 
		 overflow: hidden;
		 text-overflow: ellipsis; 	
	}
}
.ctlmenu {color:var(--blue-700); transition: 0.3s;}
a.ctlmenu,a.ctlmenu:link,a.ctlmenu:visited,a.ctlmenu:active {text-decoration:none;color:var(--blue-700);}
a.ctlmenu:hover {text-decoration:underline;color:var(--blue-600);}
.ctlmenuval {color:var(--blue-600); transition: 0.3s;}
a.ctlmenuval,a.ctlmenuval:link,a.ctlmenuval:visited,a.ctlmenuval:active {text-decoration:none; color:var(--blue-600);}
a.ctlmenuval:hover {text-decoration:underline; color:var(--blue-600);}
.ctlmenuyes, .ctlmenuno {
	padding: 2px 5px;
	border-radius: var(--rounded-xl);
}
.ctlmenuyes {
	padding: var(--space-1) var(--space-2);
}
a.ctlmenuyes,a.ctlmenuyes:link,a.ctlmenuyes:visited,a.ctlmenuyes:active {
	text-decoration:none;
	background-color: #008800;
	color: white;
}
a.ctlmenuyes:hover {text-decoration:underline;color:white;}
.ctlmenuno {
	padding: var(--space-1) var(--space-2);
}
a.ctlmenuno,a.ctlmenuno:link,a.ctlmenuno:visited,a.ctlmenuno:active {
	text-decoration:none;
	background-color: #ffa000;
	color: white;
}
a.ctlmenuno:hover {text-decoration:underline;color:white;}
/* Accounts (PRO etc) */
.ctlaccountfree, .ctlaccountpro, .ctlaccountexclusive {
	border-radius: var(--rounded-xl);
	text-align: center;
	transition: background-color 0.3s ease-in-out;
	cursor: pointer;
	max-width: 60px;
}
.ctlaccountfree {
	border: 1px solid var(--gray-300);
	background-color: var(--gray-200);
}
.ctlaccountfree:hover {
	background-color: var(--gray-100);
}
a.ctlaccountlinkfree {
	color: var(--gray-400);
	font-weight: bold;
}
.ctlaccountpro {
	background-color: var(--green-200);
	border: 1px solid var(--green-300);
}
.ctlaccountpro:hover {
	background-color: var(--green-250);
}
a.ctlaccountlinkpro {
	color: var(--green-600);
	font-weight: bold;
}
.ctlaccountexclusive {
	border: 1px solid var(--purple-400);
	background-color: var(--purple-300);
}
.ctlaccountexclusive:hover {
	background-color: var(--purple-350);
}
a.ctlaccountlinkexclusive {
	color: var(--purple-600);
	font-weight: bold;
}
.factinput {
	border: 1px solid #808080;
	border-radius: 3px;
	padding: 5px;
}
/* factinput::errors */
.factinput_error_field {
	background-color: #ffe0e0;
	border: 2px solid #ff0000;
}
.factinput_errors {
	padding: 0;
	margin: 0;
}
.factinput_error_info {
	padding: 0;
	margin: 5px;
	color: #ff0000;
	font-weight: bold;
}
/* factinput::types */
.factinput_label, .factinput_contact {
	width: 320px;
}
.factinput_text {
	width: 320px;
	height: 200px;
}
.factinput_range {
	width: 60px;
}
.factinput_timerange {
	width: 60px;
}
.factinput_view {
	border: 1px solid #b0b0b0;
	border-radius: 3px;
	padding: 3px;
}
.factinput_view_yesno {
	width: 40px;
	border-radius: 5px;
}
.factinput_view_yesno_yes {
	background-color: #e0ffe0;
	border: 1px solid #d0f0d0;
}
.factinput_view_yesno_no {
	background-color: #fff0e0;
	border: 1px solid #f0e0d0;
}
.factinput_view_txt {
	
}
.factinput_view_gotvalue_yes {
	background-color: #e0ffe0;
	border: 1px solid #d0f0d0;
}
.factinput_view_gotvalue_no, .factinput_view_yesno_unknown {
	width: 150px;
	background-color: #ffe0e0;
	color: #ff0000;
	border: 1px solid #f0e0d0;
}
/* Catalog/Directory Page Styles */
.directory-header {
 text-align: center;
 margin-bottom: var(--space-8);
}
.directory-title {
 font-size: var(--text-5xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
 .directory-title {
 font-size: var(--text-6xl);
 }
}
.directory-description {
 font-size: var(--text-xl);
 color: var(--gray-600);
 max-width: 32rem;
 margin: 0 auto;
}
/* Search Filters */
.search-filters {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-sm);
 padding: var(--space-6);
 margin-bottom: var(--space-8);
}
.filters-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-4);
}
@media (min-width: 768px) {
 .filters-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (min-width: 1024px) {
 .filters-grid {
 grid-template-columns: repeat(4, 1fr);
 }
}
.filter-group {
 position: relative;
}
.search-input-wrapper {
 position: relative;
}
/* Search icon removed to prevent text overlap */
.search-input {
 width: 100%;
 padding: var(--space-3);
 border: 1px solid var(--gray-200);
 border-radius: var(--rounded-lg);
 font-size: var(--text-base);
 transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.search-input:focus {
 outline: none;
 border-color: var(--blue-500);
 box-shadow: 0 0 0 3px var(--blue-100);
}
.filter-select {
 width: 100%;
 padding: var(--space-3) var(--space-4);
 border: 1px solid var(--gray-200);
 border-radius: var(--rounded-lg);
 font-size: var(--text-base);
 background: white;
 cursor: pointer;
 transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 appearance: none;
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
 background-position: right var(--space-2) center;
 background-repeat: no-repeat;
 background-size: 1.5em 1.5em;
 padding-right: var(--space-10);
}
.filter-select:focus {
 outline: none;
 border-color: var(--blue-500);
 box-shadow: 0 0 0 3px var(--blue-100);
}
.location-input-wrapper {
 position: relative;
}
/* Location icon removed to prevent text overlap */
/* Location select now uses default padding */
/* Results Header */
.results-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: var(--space-6);
}
.results-title {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.results-meta {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--text-sm);
 color: var(--gray-600);
}
.results-meta svg {
 width: 1rem;
 height: 1rem;
}
/* Schools Grid */
.schools-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
 margin-bottom: var(--space-8);
}
.orgs-grid {
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
 .schools-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (min-width: 1024px) {
 .schools-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

/* other lists */
.regionlistname {
	max-width: 200px;
	word-break: break-word;
}
.regionlistnumber {
	text-align: center; 
	color: var(--gray-500);
	font-size: var(--text-sm);
	padding: 2px 5px 0 0;
}
.regionlistcnt {
	text-align: center; 
	background-color: var(--purple-700);
	color: white;
	font-size: var(--text-xs);
	font-weight: bold;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--rounded-xl);
	margin-bottom: 5px;
}
.regionlistlink {
	color: white;
	transition: color 0.2 ease-in-out;
}
.regionlistlink:hover {
	color: var(--purple-200);
}
/* catalog hero */
.hero-intro {
 color: var(--gray-600);
 font-size: var(--text-sm);
 x-margin-bottom: var(--space-4);
 line-height: var(--leading-relaxed);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 width: 100%;
}
@media (min-width: 1000px) {
	.hero-description {
		justify-self: start;
		justify-items: start;
	}
}
.catalog-org-name, a.catalog-org-name {
	color: var(--gray-700);
}
.orgs-minimap {
	align-content: center;
	justify-content: center;
	justify-items: center;
	text-align: center;
	width: 100%;
}
/* School Card */
.school-card, .orgs-minimap {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-lg);
 overflow: hidden;
 transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.school-card:hover, .orgs-minimap:hover {
 box-shadow: var(--shadow-xl);
 transform: translateY(-2px);
}
.school-card {
	display: grid;
	grid-template-rows: 12rem 1fr auto 5rem;
}
.school-card-link {
 display: block;
 text-decoration: none;
}
.school-image {
 position: relative;
 height: 12rem;
 background: linear-gradient(135deg, var(--blue-100) 0%, var(--indigo-200) 100%);
 overflow: hidden;
}
.school-photo {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s ease-in-out;
}
.school-card:hover .school-photo {
 transform: scale(1.05);
}
.school-image.montessori {
 background: linear-gradient(135deg, var(--green-100) 0%, var(--emerald-200) 100%);
}
.school-image.preparatory {
 background: linear-gradient(135deg, var(--purple-100) 0%, var(--violet-200) 100%);
}
.school-image::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}
.school-rating {
 position: absolute;
 top: var(--space-4);
 right: var(--space-4);
 background: rgba(255, 255, 255, 0.5);
 backdrop-filter: blur(8px);
 border-radius: var(--rounded-full);
 padding: var(--space-1) var(--space-3);
 display: flex;
 align-items: center;
 gap: var(--space-1);
 z-index: 2;
}
.school-rating svg {
 color: var(--yellow-500);
 width: 1rem;
 height: 1rem;
}
.school-rating span {
 font-size: var(--text-sm);
 font-weight: var(--font-semibold);
}
.school-type-badge {
 position: absolute;
 bottom: var(--space-4);
 left: var(--space-4);
 background: var(--blue-600);
 color: white;
 padding: var(--space-1) var(--space-3);
 border-radius: var(--rounded-full);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
 z-index: 2;
}
.school-type-badge.montessori {
 background: var(--green-600);
}
.school-type-badge.preparatory {
 background: var(--purple-600);
}
.school-content, .school-geo, .school-footer {
 padding: var(--space-6);
 x-background-color: #ffff00;
}
.school-geo {
	display: grid;
	padding: var(--space-3) var(--space-6);
	border-top: 1px solid var(--gray-100);
	border-bottom: 1px solid var(--gray-100);
	background-color: var(--gray-50);
	align-items: center;
	align-content: center;
}
.school-name-link {
 text-decoration: none;
}
.school-name, .hero-h1 {
 font-weight: var(--font-bold);
 color: var(--gray-900);
 x-margin-bottom: var(--space-2);
 transition: color 0.2s ease-in-out;
}
.school-name-link:hover .school-name,
.school-name-link:hover .hero-h1 {
 color: var(--blue-600);
}
.school-description {
 color: var(--gray-600);
 font-size: var(--text-sm);
 x-margin-bottom: var(--space-4);
 line-height: var(--leading-relaxed);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.school-details {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}
.school-detail {
 display: flex;
 align-items: flex-start;
 gap: var(--space-2);
}
.school-detail svg {
 color: var(--gray-400);
 width: 1rem;
 height: 1rem;
 margin-top: 0.125rem;
 flex-shrink: 0;
}
.school-detail span {
 font-size: var(--text-sm);
 color: var(--gray-600);
}
.school-addr {
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.school-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding-top: var(--space-4);
 border-top: 1px solid var(--gray-100);
}
.school-grade-tuition {
 display: flex;
 flex-direction: column;
}
.school-grades {
 font-size: var(--text-xs);
 color: var(--gray-500);
 margin: 0;
}
.school-tuition {
 font-size: var(--text-sm);
 font-weight: var(--font-semibold);
 color: var(--green-600);
 margin: 0;
}
.view-details-btn {
 background: var(--blue-600);
 color: white;
 padding: var(--space-2) var(--space-4);
 border-radius: var(--rounded-lg);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 text-decoration: none;
 display: flex;
 align-items: center;
 gap: var(--space-2);
 transition: background-color 0.2s ease-in-out;
}
.view-details-btn:hover {
 color: white;
 background: var(--blue-700);
}
.view-details-btn svg {
 width: 1rem;
 height: 1rem;
}
.school-card-plain {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-lg);
 padding: var(--space-2) var(--space-4);
 overflow: hidden;
 transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.school-card-plain:hover {
 box-shadow: var(--shadow-xl);
 transform: translateY(-2px);
}
.orglogo {
	border-radius: 4px;
}
.metrocontainer {
	display: block;
} 
@media (min-width: 1080px) {
	.metrocontainer {
		display: grid;
		grid-template-columns: repeat(4, 240px);
		grid-gap: 0 20px;
	} 
}
.metrocol {
	display: grid;
	grid-template-columns: 20px 1fr;
	grid-gap: 7px 7px;
	align-content: start;
} 
.metrolistlink, .metrolistline {
	color: var(--gray-800); 
}
.metrolistlink:hover, .metrolistline:hover {
	color: var(--gray-500); 
}
.metrolines {
	display: grid;
	grid-gap: 5px 10px;
	grid-template-columns: 25px 1fr;
}
.metrolistnextfont {
	font-size: var(--text-xl);
	font-weight: bold;
	color: var(--gray-700);
	text-align: center;
}
/* News Section */
.news-list {
 display: grid;
 gap: var(--space-4);
 margin-bottom: var(--space-4);
}
.news-item {
 border-left: 4px solid var(--green-500);
 padding-left: var(--space-4);
 padding-top: var(--space-2);
 padding-bottom: var(--space-2);
}
.news-meta {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 margin-bottom: var(--space-1);
}
.news-badge {
 padding: var(--space-1) var(--space-2);
 border-radius: var(--rounded-full);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
}
.badge-news {
 background-color: var(--blue-100);
 color: var(--blue-800);
}
.badge-event {
 background-color: var(--green-100);
 color: var(--green-800);
}
.news-date {
 display: flex;
 align-items: center;
 gap: var(--space-1);
 font-size: var(--text-sm);
 color: var(--gray-500);
}
.date-icon {
 width: 0.75rem;
 height: 0.75rem;
}
.news-title {
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-1);
}
.news-excerpt {
 color: var(--gray-600);
 font-size: var(--text-sm);
}
.view-all-btn {
 width: 100%;
 color: var(--green-600);
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: var(--transition-colors);
 background: none;
 border: none;
 padding: var(--space-2) 0;
 cursor: pointer;
}
.view-all-btn:hover {
 color: var(--green-700);
}

/* News Section */
.news-section {
 margin-bottom: var(--space-12);
}
.news-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
}
@media (min-width: 768px) {
 .news-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
.news-card {
 background: white;
 border-radius: var(--rounded-xl);
 box-shadow: var(--shadow-lg);
 padding: var(--space-6);
 transition: all 0.3s ease-in-out;
 cursor: pointer;
}
.news-card:hover {
 box-shadow: var(--shadow-xl);
 transform: translateY(-2px);
}
.news-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: var(--space-3);
}
.news-category {
 background: var(--blue-100);
 color: var(--blue-800);
 padding: var(--space-1) var(--space-3);
 border-radius: var(--rounded-full);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
}
.news-date {
 font-size: var(--text-sm);
 color: var(--gray-500);
}
.news-title {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-3);
 transition: color 0.2s ease-in-out;
}
.news-card:hover .news-title {
 color: var(--blue-600);
}
.news-excerpt {
 color: var(--gray-600);
 font-size: var(--text-sm);
 margin-bottom: var(--space-4);
 line-height: var(--leading-relaxed);
 
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 overflow: hidden;
}
.news-read-more {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 color: var(--blue-600);
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
}
.news-card:hover .news-read-more {
 color: var(--blue-700);
}
.news-read-more svg {
 transition: transform 0.2s ease-in-out;
}
.news-card:hover .news-read-more svg {
 transform: translateX(2px);
}
.news-link {
 color: var(--green-600);
 transition: var(--transition-colors);
}
.news-link:hover {
 color: var(--green-700);
}
/* Gallery Styles */
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-4);
 margin-bottom: var(--space-6);
}
@media (min-width: 769px) and (max-width: 1279px) {
 .gallery-grid {
	 display: grid;
	 grid-template-columns: repeat(3, 1fr);
	 gap: var(--space-4);
	 margin-bottom: var(--space-6);
 }
}
@media (min-width: 361px) and (max-width: 758px) {
 .gallery-grid {
	 display: grid;
	 grid-template-columns: repeat(2, 1fr);
	 gap: var(--space-4);
	 margin-bottom: var(--space-6);
 }
}
@media (max-width: 361px) {
 .gallery-grid {
 grid-template-columns: 1fr;
 }
}
.gallery-item {
 position: relative;
 border-radius: var(--rounded-lg);
 overflow: hidden;
 cursor: pointer;
 transition: var(--transition-transform);
}
.gallery-item:hover {
 transform: scale(1.02);
}
.gallery-image {
 width: 100%;
 height: 12rem;
 object-fit: cover;
}
.gallery-overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
 color: white;
 padding: var(--space-4);
 transform: translateY(100%);
 transition: var(--transition-transform);
}
.gallery-item:hover .gallery-overlay {
 transform: translateY(0);
}
.gallery-caption {
 font-weight: var(--font-medium);
}
/* Reviews Styles */
.reviews-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--space-6);
 margin-bottom: var(--space-6);
}
.review-card {
 background: linear-gradient(135deg, white 0%, var(--blue-50) 100%);
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 border: 1px solid var(--gray-200);
 transition: var(--transition-colors), box-shadow 0.15s ease;
}
.review-card:hover {
 border-color: var(--blue-300);
 box-shadow: var(--shadow-md);
}
.review-rating {
 display: grid;
 grid-template-columns: auto auto;
 align-items: center;
 gap: var(--space-2);
 margin-bottom: var(--space-4);
}
.stars {
 display: grid;
 grid-template-columns: repeat(5, auto);
 gap: var(--space-1);
}
.star-filled {
 color: var(--yellow-500);
}
.rating-number {
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.review-text {
 color: var(--gray-700);
 line-height: var(--leading-relaxed);
 margin-bottom: var(--space-4);
 font-style: italic;
}
.review-author {
 display: grid;
 gap: var(--space-1);
 margin-bottom: var(--space-2);
}
.author-name {
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.author-role {
 color: var(--gray-600);
 font-size: var(--text-sm);
}
.review-date {
 color: var(--gray-500);
 font-size: var(--text-sm);
}
/* Quick Facts */
.quick-facts {
 display: grid;
 gap: var(--space-4);
}
.fact-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: var(--space-3);
 align-items: start;
}
.fact-icon {
 color: var(--indigo-600);
 padding: var(--space-1);
}
.fact-content {
 display: grid;
 gap: var(--space-1);
}
.fact-label {
 font-weight: var(--font-medium);
 color: var(--gray-500);
 font-size: var(--text-xs);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.fact-value {
 color: var(--gray-900);
 font-size: var(--text-sm);
}
/* Admission Info */
.admission-info {
 display: grid;
 gap: var(--space-4);
}
.admission-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: var(--space-3);
 align-items: start;
}
.admission-icon {
 color: var(--blue-600);
 padding: var(--space-1);
}
.admission-content {
 display: grid;
 gap: var(--space-1);
}
.admission-label {
 font-weight: var(--font-medium);
 color: var(--gray-500);
 font-size: var(--text-xs);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.admission-value {
 color: var(--gray-900);
 font-size: var(--text-sm);
}
.admission-info {
 display: grid;
 gap: var(--space-2);
}
.admission-info p {
 color: var(--gray-600);
 font-size: var(--text-sm);
}
/* Action Buttons */
.action-buttons {
 display: grid;
 gap: var(--space-2);
}
/* Icon Utilities */
.icon-graduation-cap,
.icon-menu,
.icon-chevron-right {
 width: 1.5rem;
 height: 1.5rem;
}
/* Section Description */
.section-description {
 color: var(--gray-600);
 line-height: var(--leading-relaxed);
 margin-bottom: var(--space-6);
}
/* Specs */
/* specs & Fees Styles */
.specs-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--space-6);
 margin-bottom: var(--space-6);
}
.specs-card {
 background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 border: 2px solid var(--gray-200);
 text-align: center;
 transition: var(--transition-colors), box-shadow 0.15s ease;
 max-width: 360px;
}
.specs-card:hover {
 border-color: var(--orange-300);
 box-shadow: var(--shadow-md);
}
.specs-one {
 border-color: var(--blue-300);
}
.specs-two {
 border-color: var(--green-300);
}
.specs-three {
 border-color: var(--purple-300);
}
.specs-four {
 border-color: var(--pink-300);
}
.specs-kinds {
 font-size: var(--text-sm);
 font-weight: var(--font-normal);
 color: var(--gray-500);
 margin-bottom: var(--space-4);
 word-break: break-word;
 overflow-wrap: break-all;
}
.specs-ttl {
 x-font-size: var(--text-3xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-1);
 overflow-wrap: break-word;
 hyphens: auto;
}
.specs-period {
 color: var(--gray-600);
 margin-bottom: var(--space-4);
}
.specs-price {
 color: var(--gray-600);
 margin-bottom: var(--space-4);
}
.specs-includes {
 list-style: none;
 text-align: left;
}
.specs-includes li {
 color: var(--gray-600);
 padding: var(--space-1) 0;
 border-bottom: 1px solid var(--gray-100);
}
.specs-includes li:last-child {
 border-bottom: none;
}
.specs-includes li:before {
 content: "✓";
 color: var(--green-600);
 font-weight: var(--font-bold);
 margin-right: var(--space-2);
}
.specs-intro {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 overflow: hidden;
 text-align: left;
}
.specs-descr {
 text-align: left;
}
.specs-link {
 color: var(--orange-600);
 text-decoration: none;
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
}
.specs-link:hover {
 color: var(--orange-700);
 text-decoration: underline;
}
/* Achievements Styles */
.achievements-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: var(--space-6);
 margin-bottom: var(--space-6);
}
.achievement-card {
 background: white;
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 border: 1px solid var(--gray-200);
 text-align: center;
 transition: var(--transition-colors), box-shadow 0.15s ease;
}
.achievement-card:hover {
 border-color: var(--yellow-300);
 box-shadow: var(--shadow-md);
}
.achievement-academic {
 background: linear-gradient(135deg, var(--blue-50) 0%, white 100%);
 border-color: var(--blue-200);
}
.achievement-national {
 background: linear-gradient(135deg, var(--green-50) 0%, white 100%);
 border-color: var(--green-200);
}
.achievement-arts {
 background: linear-gradient(135deg, var(--pink-50) 0%, white 100%);
 border-color: var(--pink-200);
}
.achievement-sports {
 background: linear-gradient(135deg, var(--orange-50) 0%, white 100%);
 border-color: var(--orange-200);
}
.achievement-icon {
 width: 3rem;
 height: 3rem;
 background: var(--yellow-100);
 color: var(--yellow-600);
 border-radius: var(--rounded-lg);
 display: grid;
 place-items: center;
 margin: 0 auto var(--space-4);
}
.achievement-title {
 font-size: var(--text-xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-2);
}
.achievement-description {
 color: var(--gray-600);
 line-height: var(--leading-relaxed);
 margin-bottom: var(--space-3);
}
.achievement-year {
 background: var(--yellow-100);
 color: var(--yellow-800);
 padding: var(--space-1) var(--space-3);
 border-radius: var(--rounded-full);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 display: inline-block;
}
/* Faculty & Staff Section */
.faculty-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--space-6);
 margin-top: var(--space-8);
}
.faculty-card {
 background: linear-gradient(135deg, white 0%, var(--purple-50) 100%);
 border-radius: var(--rounded-lg);
 border: 1px solid var(--gray-200);
 padding: var(--space-6);
 display: grid;
 gap: var(--space-4);
 transition: all 0.2s ease-in-out;
}
.faculty-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 border-color: var(--purple-200);
}
.faculty-image {
 display: grid;
 justify-items: center;
}
.faculty-avatar {
 width: 4rem;
 height: 4rem;
 background: var(--purple-600);
 color: white;
 border-radius: 50%;
 display: grid;
 place-items: center;
 font-weight: var(--font-bold);
 font-size: var(--text-lg);
}
.faculty-info {
 text-align: center;
 display: grid;
 gap: var(--space-2);
}
.faculty-name {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin: 0;
}
.faculty-title {
 color: var(--purple-600);
 font-weight: var(--font-medium);
 margin: 0;
}
.faculty-qualification {
 color: var(--gray-600);
 font-size: var(--text-sm);
 margin: 0;
}
.faculty-experience {
 color: var(--gray-500);
 font-size: var(--text-sm);
 margin: 0;
}
/* Documents & Presentations Section */
.documents-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--space-6);
 margin-bottom: var(--space-6);
}
.document-card {
 background: linear-gradient(135deg, white 0%, var(--indigo-50) 100%);
 border: 1px solid var(--indigo-200);
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
 transition: var(--transition-colors), box-shadow 0.15s ease;
}
.document-card:hover {
 border-color: var(--indigo-300);
 box-shadow: var(--shadow-md);
}
.document-header {
 display: flex;
 justify-content: flex-end;
}
.document-file-type {
 background: var(--indigo-100);
 color: var(--indigo-700);
 padding: var(--space-1) var(--space-2);
 border-radius: var(--rounded-full);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
}
.document-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: var(--space-3);
 flex-grow: 1;
}
.document-icon {
 color: var(--indigo-600);
}
.document-title {
 font-size: var(--text-lg);
 font-weight: var(--font-semibold);
 color: var(--gray-900);
}
.document-description {
 font-size: var(--text-sm);
 color: var(--gray-600);
}
.document-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: var(--space-3);
 border-top: 1px solid var(--gray-200);
}
.document-size {
 font-size: var(--text-sm);
 color: var(--gray-500);
}
.document-download-link {
 color: var(--indigo-600);
 text-decoration: none;
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
}
.document-download-link:hover {
 color: var(--indigo-700);
 text-decoration: underline;
}
.document-category {
 background: white;
 border-radius: var(--rounded-lg);
 border: 1px solid var(--gray-200);
 padding: var(--space-6);
}
.category-title {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin: 0 0 var(--space-4) 0;
 padding-bottom: var(--space-3);
 border-bottom: 2px solid var(--indigo-100);
}
.document-list {
 display: grid;
 gap: var(--space-4);
}
.document-item {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: var(--space-4);
 align-items: center;
 padding: var(--space-4);
 border-radius: var(--rounded-md);
 transition: background-color 0.2s ease-in-out;
}
.document-item:hover {
 background: var(--gray-50);
}
.document-icon {
 font-size: var(--text-2xl);
}
.document-info {
 display: grid;
 gap: var(--space-1);
}
.document-info h4 {
 font-size: var(--text-base);
 font-weight: var(--font-medium);
 color: var(--gray-900);
 margin: 0;
}
.document-info p {
 color: var(--gray-600);
 font-size: var(--text-sm);
 margin: 0;
}
.document-size {
 color: var(--gray-500);
 font-size: var(--text-xs);
}
.document-download {
 background: var(--indigo-600);
 color: white;
 border: none;
 padding: var(--space-2) var(--space-4);
 border-radius: var(--rounded-md);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
 cursor: pointer;
 transition: background-color 0.2s ease-in-out;
}
.document-download:hover {
 background: var(--indigo-700);
}
/* Tuition & Fees Styles */
.tuition-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--space-6);
 margin-bottom: var(--space-6);
}
.tuition-card {
 background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 border: 2px solid var(--gray-200);
 text-align: center;
 transition: var(--transition-colors), box-shadow 0.15s ease;
 max-width: 360px;
}
.tuition-card:hover {
 border-color: var(--orange-300);
 box-shadow: var(--shadow-md);
}
.tuition-one {
 border-color: var(--blue-300);
}
.tuition-two {
 border-color: var(--green-300);
}
.tuition-three {
 border-color: var(--purple-300);
}
.tuition-four {
 border-color: var(--pink-300);
}
.tuition-level {
 font-size: var(--text-xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-4);
}
.tuition-amount {
 font-size: var(--text-3xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-1);
}
.tuition-period {
 color: var(--gray-600);
 margin-bottom: var(--space-4);
}
.tuition-includes {
 list-style: none;
 text-align: left;
}
.tuition-includes li {
 color: var(--gray-600);
 padding: var(--space-1) 0;
 border-bottom: 1px solid var(--gray-100);
}
.tuition-includes li:last-child {
 border-bottom: none;
}
.tuition-includes li:before {
 content: "✓";
 color: var(--green-600);
 font-weight: var(--font-bold);
 margin-right: var(--space-2);
}
.tuition-intro {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 overflow: hidden;
 text-align: left;
}
.tuition-descr {
 text-align: left;
}
.tuition-link {
 color: var(--orange-600);
 text-decoration: none;
 font-weight: var(--font-medium);
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
}
.tuition-link:hover {
 color: var(--orange-700);
 text-decoration: underline;
}
.additional-fees {
 background: var(--gray-50);
 border-radius: var(--rounded-lg);
 padding: var(--space-6);
}
.fees-title {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-4);
}
.fees-list {
 display: grid;
 gap: var(--space-3);
}
.fee-item {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: center;
 padding: var(--space-3);
 background: white;
 border-radius: var(--rounded);
}
.fee-name {
 color: var(--gray-700);
 font-weight: var(--font-medium);
}
.fee-amount {
 color: var(--gray-900);
 font-weight: var(--font-bold);
}
/* Student Life Styles */
.student-life-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--space-6);
 margin-bottom: var(--space-6);
}
.club-card {
 background: white;
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 border: 1px solid var(--gray-200);
 transition: var(--transition-colors), box-shadow 0.15s ease;
}
.club-card:hover {
 border-color: var(--purple-300);
 box-shadow: var(--shadow-md);
}
.club-sports {
 background: linear-gradient(135deg, var(--blue-50) 0%, white 100%);
 border-color: var(--blue-200);
}
.club-academic {
 background: linear-gradient(135deg, var(--green-50) 0%, white 100%);
 border-color: var(--green-200);
}
.club-arts {
 background: linear-gradient(135deg, var(--pink-50) 0%, white 100%);
 border-color: var(--pink-200);
}
.club-service {
 background: linear-gradient(135deg, var(--purple-50) 0%, white 100%);
 border-color: var(--purple-200);
}
.club-icon {
 width: 3rem;
 height: 3rem;
 background: var(--gray-100);
 border-radius: var(--rounded-lg);
 display: grid;
 place-items: center;
 margin-bottom: var(--space-4);
 color: var(--gray-600);
}
.club-sports .club-icon {
 background: var(--blue-100);
 color: var(--blue-600);
}
.club-academic .club-icon {
 background: var(--green-100);
 color: var(--green-600);
}
.club-arts .club-icon {
 background: var(--pink-100);
 color: var(--pink-600);
}
.club-service .club-icon {
 background: var(--purple-100);
 color: var(--purple-600);
}
.club-title {
 font-size: var(--text-xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-2);
}
.club-description {
 color: var(--gray-600);
 line-height: var(--leading-relaxed);
 margin-bottom: var(--space-4);
}
.club-activities {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
 gap: var(--space-2);
}
.activity-tag {
 background: var(--gray-100);
 color: var(--gray-700);
 padding: var(--space-1) var(--space-2);
 border-radius: var(--rounded);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
 text-align: center;
}
/* Facilities Styles */
.facilities-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: var(--space-4);
 margin-bottom: var(--space-6);
}
.facility-card {
 background: white;
 border-radius: var(--rounded-lg);
 padding: var(--space-4);
 border: 1px solid var(--gray-200);
 text-align: center;
 transition: var(--transition-colors), box-shadow 0.15s ease;
}
.facility-card:hover {
 border-color: var(--green-300);
 box-shadow: var(--shadow);
}
.facility-icon {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: var(--rounded-lg);
 display: grid;
 place-items: center;
 margin: 0 auto var(--space-3);
 color: white;
}
.facility-library {
 background: var(--blue-500);
}
.facility-sports {
 background: var(--green-500);
}
.facility-lab {
 background: var(--purple-500);
}
.facility-computer {
 background: var(--indigo-500);
}
.facility-cafeteria {
 background: var(--orange-500);
}
.facility-arts {
 background: var(--pink-500);
}
.facility-title {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-2);
}
.facility-description {
 color: var(--gray-600);
 line-height: var(--leading-relaxed);
 font-size: var(--text-sm);
}
/* View All Button */
.view-all-programs {
 justify-self: center;
}
/* Academic Programs Grid */
.programs-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-4);
 margin-top: var(--space-6);
}
.program-card {
 background: white;
 border-radius: var(--rounded-lg);
 padding: var(--space-4);
 transition: all 0.2s ease-in-out;
}
.program-card:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.program-header {
 display: flex;
 align-items: center;
 gap: var(--space-1);
 margin-bottom: var(--space-1);
}
.program-header2 {
 display: flex;
 display: grid;
 grid-template-columns: 1.75rem 1fr;
 align-items: center;
 align-content: center;
 align-self: center;
 gap: var(--space-1);
}
.program-header2 > * {
 border: 1px solid #ff0000;
 align-items: center;
 align-content: center;
 align-self: center;
 gap: var(--space-1);
}
.programs-grid .program-icon {
 width: 2rem !important;
 height: 2rem !important;
 border-radius: var(--rounded);
 display: flex !important;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.programs-grid .program-icon svg {
 width: 1.25rem;
 height: 1.25rem;
}
.programs-grid .program-title {
 font-size: var(--text-base) !important;
 font-weight: var(--font-semibold);
 color: var(--gray-900);
 margin: 0;
 line-height: 2rem;
}
.program-description {
 color: var(--gray-600);
 font-size: var(--text-sm);
 margin: 0;
 line-height: 1.4;
}
/* Program Card Color Variants */
.program-card-blue {
 background: var(--blue-50);
 border: 1px solid var(--blue-100);
}
.program-card-blue .program-icon {
 background: var(--blue-100);
 color: var(--blue-600);
}
.program-card-purple {
 background: var(--purple-50);
 border: 1px solid var(--purple-100);
}
.program-card-purple .program-icon {
 background: var(--purple-100);
 color: var(--purple-600);
}
.program-card-green {
 background: var(--green-50);
 border: 1px solid var(--green-100);
}
.program-card-green .program-icon {
 background: var(--green-100);
 color: var(--green-600);
}
.program-card-orange {
 background: var(--orange-50);
 border: 1px solid var(--orange-100);
}
.program-card-orange .program-icon {
 background: var(--orange-100);
 color: var(--orange-600);
}
.program-card-pink {
 background: var(--pink-50);
 border: 1px solid var(--pink-100);
}
.program-card-pink .program-icon {
 background: var(--pink-100);
 color: var(--pink-600);
}
.program-card-indigo {
 background: var(--indigo-50);
 border: 1px solid var(--indigo-100);
}
.program-card-indigo .program-icon {
 background: var(--indigo-100);
 color: var(--indigo-600);
}
/* Academic Programs Styles */
.programs-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--space-6);
 margin-bottom: var(--space-6);
}
.program-card {
 background: white;
 border-radius: var(--rounded-xl);
 padding: var(--space-6);
 border: 1px solid var(--gray-200);
 transition: var(--transition-colors), box-shadow 0.15s ease;
}
.program-sciences {
 background: linear-gradient(135deg, var(--green-50) 0%, white 100%);
 border-color: var(--green-200);
}
.program-literature {
 background: linear-gradient(135deg, var(--blue-50) 0%, white 100%);
 border-color: var(--blue-200);
}
.program-arts {
 background: linear-gradient(135deg, var(--pink-50) 0%, white 100%);
 border-color: var(--pink-200);
}
.program-math {
 background: linear-gradient(135deg, var(--purple-50) 0%, white 100%);
 border-color: var(--purple-200);
}
.program-social {
 background: linear-gradient(135deg, var(--orange-50) 0%, white 100%);
 border-color: var(--orange-200);
}
.program-languages {
 background: linear-gradient(135deg, var(--indigo-50) 0%, white 100%);
 border-color: var(--indigo-200);
}
.program-sciences .program-icon {
 background: var(--green-100);
 color: var(--green-600);
}
.program-literature .program-icon {
 background: var(--blue-100);
 color: var(--blue-600);
}
.program-arts .program-icon {
 background: var(--pink-100);
 color: var(--pink-600);
}
.program-math .program-icon {
 background: var(--purple-100);
 color: var(--purple-600);
}
.program-social .program-icon {
 background: var(--orange-100);
 color: var(--orange-600);
}
.program-languages .program-icon {
 background: var(--indigo-100);
 color: var(--indigo-600);
}
.program-description {
 color: var(--gray-600);
 line-height: var(--leading-relaxed);
 margin-bottom: var(--space-4);
}
.program-subjects {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
 gap: var(--space-2);
}
.subject-tag {
 background: var(--gray-100);
 color: var(--gray-700);
 padding: var(--space-1) var(--space-2);
 border-radius: var(--rounded);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
 text-align: center;
}

/* program mobile */
@media (max-width: 768px) {
 .programs-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-3);
 }
}
@media (max-width: 480px) {
 .programs-grid {
 grid-template-columns: 1fr;
 }
}
/* Inline Program/Club/Facility Styles */
.programs-list,
.student-life-list,
.facilities-list {
 display: grid;
 gap: var(--space-6);
 margin-top: var(--space-8);
}
.program-item,
.club-item,
.facility-item {
 background: white;
 border-radius: var(--rounded-lg);
 padding: var(--space-6);
 display: grid;
 gap: var(--space-4);
 transition: all 0.2s ease-in-out;
}
.program-item:hover,
.club-item:hover,
.facility-item:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.program-header,
.club-header,
.facility-header {
 display: flex;
 align-items: center;
 gap: var(--space-3);
}
/* Exclude Academic Programs grid from this rule */
.student-life-list .club-header .club-icon,
.facilities-list .facility-header .facility-icon {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: var(--rounded-md);
 display: grid;
 place-items: center;
}
.program-title,
.club-title,
.facility-title {
 font-size: var(--text-lg);
 font-weight: var(--font-semibold);
 color: var(--gray-900);
 margin: 0;
}
.program-description,
.club-description,
.facility-description {
 color: var(--gray-600);
 margin: 0;
 line-height: 1.6;
}
.program-subjects,
.club-activities {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
 margin-top: var(--space-2);
}
.subject-tag,
.activity-tag {
 background: var(--gray-100);
 color: var(--gray-700);
 padding: var(--space-1) var(--space-2);
 border-radius: var(--rounded-full);
 font-size: var(--text-xs);
 font-weight: var(--font-medium);
}
/* Mobile responsive adjustments */
@media (max-width: 767px) {
 .results-header {
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-2);
 }
 
 .results-meta {
 font-size: var(--text-xs);
 }
 
 
 .pagination {
 flex-wrap: wrap;
 gap: var(--space-1);
 }
 
 .pagination-numbers {
 margin: 0 var(--space-2);
 }
}
/* Additional mobile responsive adjustments for mainpage */
@media (max-width: 767px) {
 .hero-section-main {
 margin-bottom: var(--space-8);
 }
 
 .stats-section {
 padding: var(--space-6);
 margin-bottom: var(--space-8);
 }
 
 .stats-title {
 font-size: var(--text-xl);
 margin-bottom: var(--space-6);
 }
 
 .stats-grid-main .stat-icon {
 width: 2.5rem;
 height: 2.5rem;
 }
 
 .stat-value {
 font-size: var(--text-2xl);
 }
 
 .featured-card {
 height: 10rem;
 padding: var(--space-4);
 }
 
 .featured-name {
 font-size: var(--text-lg);
 }
}
 
.pageblocks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	grid-gap: 15px 0;
}
.bookblocks { /* full-width with content */
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 15px 0;
}
@media screen and (min-width:740px) {
	.pageblocks {
		grid-gap: 10px;	
	}
}
@media screen and (min-width:1280px) {
	.pageblocks {
		grid-gap: 15px;	
	}
	
	.bookblocks {
		display: grid;
		grid-template-columns: 360px 1fr;
		grid-gap: 15px;
	}	
}
.pageblock {
	background-color: #ffffff;
	border-radius: 5px;	
}
.pageblock > h2 {
	padding: 0 4px; 
}
.pageblocktext {
	padding: 0 5px 5px 5px;
}
.pageblockactions {
	padding: 0 5px 5px 5px;
	line-height: 1.4em;
}
.pagetabs {
	x-display: grid;
	x-grid-template-columns: repeat(auto-fit, 110px);
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pagetabany, .pagetabnow {
	border-radius: var(--rounded-xl);
	padding: var(--space-1) var(--space-3);
	text-align: center;
	white-space: nowrap;
}
.pagetabany {
	border: 1px solid var(--gray-200);
}
.pagetabnow {
	border-bottom: 0;
	font-weight: bold;
	background-color: black;
	color: white;
}
.pagetablink {
	display: flex;
	justify-content: center;
	border: 0;
	text-decoration: none;
	text-align: center;
	color: black;
}
.pagetablink:hover {
	color: var(--orange-600);
}
.pagetabnow .pagetablink {
	color: white;
}
.taplabels {
	display: grid;
	width: 90vw;
	grid-template-columns: repeat(auto-fit, 90px);
}
.taplabel {
	padding: 10px;
}
.orgspeckindlist3 {
	display: grid;
	grid-template-columns: 1fr;
	padding-bottom: 10px;
	grid-gap: 10px;
}
@media screen and (min-width:700px) {
	.orgspeckindlist3 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (min-width:1000px) {
	.orgspeckindlist3 {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (min-width:1500px) {
	.orgspeckindlist3 {
		grid-template-columns: repeat(4, 1fr);
	}
}
.orgspeckinditemttl3 {
	font-weight: bold;
	font-size: 1.3em;
	padding-bottom: 5px;
}
.orgspeckinditem3 {
	background-color: #ffffff;
	border-radius: 5px;
	border: 1px solid #d0e0d0;
	padding: 7px;
}
.mapstatic {
	width: 300px;
	height: 300px;
}
.orgmetrolist {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-gap: 10px;
	padding-left: 3px;
}
.orgmetroline {
	text-align:center;
	font-weight:bold;
	border-radius:15px;
	padding: 2px;
	min-width:25px;	
}
.orgmetrolink {
 color: var(--gray-900);
 transition: var(--transition-colors);
}
.orgmetrolink:hover {
 color: var(--gray-700);
}
.orgmetrodist {
	font-size: var(--text-xs);
	color: var(--gray-600);
}
.orgmetrolinettl {
	font-size: var(--text-xs);
	color: var(--gray-600);
}
/* metro outside of org */
.metro-link {
 color: var(--gray-900);
 transition: var(--transition-colors);
}
.metro-link:hover {
 color: var(--gray-700);
}
/* Contact Info */
.contact-info {
 display: grid;
 gap: var(--space-4);
}
.contact-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: var(--space-3);
 align-items: start;
}
.contact-icon {
 color: var(--orange-600);
 padding: var(--space-1);
}
.contact-content {
 display: grid;
 gap: var(--space-1);
}
.contact-label {
 font-weight: var(--font-medium);
 color: var(--gray-500);
 font-size: var(--text-xs);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.contact-value {
 color: var(--gray-900);
 font-size: var(--text-sm);
 line-height: var(--leading-relaxed);
}
.contact-link {
 color: var(--blue-600);
 transition: var(--transition-colors);
}
.contact-link:hover {
 color: var(--blue-700);
}
/* Landmarks Info */
.landmarks-info {
 display: grid;
 gap: var(--space-3);
}
.landmark-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: var(--space-3);
 align-items: center;
}
.landmark-icon {
 color: var(--green-600);
 padding: var(--space-1);
}
.landmark-content {
 display: grid;
 gap: var(--space-1);
}
.landmark-name {
 color: var(--gray-900);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
}
.landmark-distance {
 color: var(--gray-500);
 font-size: var(--text-xs);
}
/* Recent Submissions */
.recent-submissions {
 display: grid;
 gap: var(--space-4);
}
.submission-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: var(--space-3);
 align-items: start;
}
.submission-icon {
 color: var(--purple-600);
 padding: var(--space-1);
}
.submission-content {
 display: grid;
 gap: var(--space-1);
}
.submission-label {
 font-weight: var(--font-medium);
 color: var(--gray-500);
 font-size: var(--text-xs);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.submission-value {
 color: var(--gray-900);
 font-size: var(--text-sm);
}
/* Location Styles */
.location-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
}
@media (min-width: 768px) {
 .location-content {
 grid-template-columns: 1fr 1fr;
 }
}
.location-details {
 display: grid;
 gap: var(--space-6);
}
.location-subtitle {
 font-size: var(--text-lg);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin-bottom: var(--space-2);
}
.location-address {
 color: var(--gray-600);
 line-height: var(--leading-relaxed);
}
.transport-options {
 display: grid;
 gap: var(--space-4);
}
.transport-option {
 display: grid;
 grid-template-columns: auto 1fr;
 align-items: center;
 gap: var(--space-3);
 padding: var(--space-3);
 background: var(--gray-50);
 border-radius: var(--rounded-lg);
}
.transport-icon {
 width: 2.5rem;
 height: 2.5rem;
 background: var(--green-100);
 color: var(--green-600);
 border-radius: var(--rounded-lg);
 display: grid;
 place-items: center;
}
.transport-details {
 display: grid;
 gap: var(--space-1);
}
.transport-name {
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.transport-description {
 color: var(--gray-600);
 font-size: var(--text-sm);
}
.map-placeholder {
 background: var(--gray-100);
 border-radius: var(--rounded-lg);
 padding: var(--space-8);
 text-align: center;
 border: 2px dashed var(--gray-300);
}
.map-content {
 display: grid;
 gap: var(--space-4);
 justify-items: center;
}
.map-icon {
 color: var(--gray-400);
}
.map-text {
 color: var(--gray-600);
 font-weight: var(--font-medium);
}
.map-btn {
 justify-self: center;
}
.photopreviews {
	width: 350px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	flex-gap: 10px;
}
.photopreviewholder {
}
.photopreviewlnk {
	border: 0;
	text-decoration:none;	
}
.photopreviewimg {	
	height: 80px;
	border: 0;
	margin-right: 5px;
	border-radius: 4px;
}
.photoviewerholder {
	display: block;
}
.photolarge {
	width: 98vw;
	border-radius: var(--rounded-lg);
}
@media screen and (min-width:1280px) {
	.photoviewerholder {
		grid-gap: 10px;
	}
	.photolarge {
		x-width: 640px;
	}
	
}
/* School Guide Section */
.guide-section {
 margin-top: var(--space-12);
}
.guide-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
}
@media (min-width: 768px) {
 .guide-content {
 grid-template-columns: auto 1fr;
 }
}
.guide-thumbnail {
 width: 12rem;
 justify-self: center;
}
@media (min-width: 768px) {
 .guide-thumbnail {
 justify-self: start;
 }
}
.guide-image {
 width: 100%;
 height: 15rem;
 object-fit: cover;
 border-radius: var(--rounded-lg);
 box-shadow: var(--shadow-md);
}
.guide-info {
 display: grid;
 gap: var(--space-4);
}
.guide-title {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
}
.guide-benefits {
 display: grid;
 gap: var(--space-2);
 color: var(--gray-700);
}
.guide-form {
 display: grid;
 gap: var(--space-4);
 max-width: 32rem;
}
.guide-submit {
 justify-self: start;
}
.additional-guides {
 padding-top: var(--space-4);
 border-top: 1px solid var(--gray-200);
}
.additional-guides p {
 font-weight: var(--font-medium);
 color: var(--gray-700);
 margin-bottom: var(--space-2);
}
.additional-guides ul {
 display: grid;
 gap: var(--space-1);
 color: var(--gray-600);
 font-size: var(--text-sm);
}
/* School Guide Section */
.guide-section {
 background: white;
 padding: var(--space-12) 0;
}
.guide-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-8);
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--space-6);
}
.guide-left {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
}
.guide-icon-container {
 width: 80px;
 height: 80px;
 background: linear-gradient(135deg, var(--blue-100) 0%, var(--blue-200) 100%);
 border-radius: var(--rounded-2xl);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: var(--space-2);
}
.guide-icon {
 color: var(--blue-600);
 width: 32px;
 height: 32px;
}
.guide-title {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
 color: var(--gray-900);
 margin: 0 0 var(--space-3) 0;
 line-height: 1.2;
}
.guide-benefits {
 list-style: none;
 padding: 0;
 margin: 0 0 var(--space-4) 0;
 display: flex;
 flex-direction: column;
 gap: var(--space-1);
}
.guide-benefits li {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 color: var(--gray-700);
 font-size: var(--text-sm);
 position: relative;
 padding-left: var(--space-4);
}
.guide-benefits li::before {
 content: '•';
 color: var(--blue-600);
 font-weight: bold;
 position: absolute;
 left: 0;
}
.additional-guides p {
 color: var(--gray-900);
 font-size: var(--text-sm);
 margin: 0 0 var(--space-2) 0;
}
.guide-links {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}
.guide-link {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 color: var(--blue-600);
 text-decoration: none;
 font-size: var(--text-sm);
 transition: color 0.2s ease-in-out;
}
.guide-link:hover {
 color: var(--blue-700);
 text-decoration: underline;
}
.guide-link svg {
 flex-shrink: 0;
}
.guide-right {
 background: white;
 border-radius: var(--rounded-lg);
}
.guide-form {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
}
.form-row {
 display: flex;
 flex-direction: column;
}
.form-group {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}
.form-group label {
 color: var(--gray-700);
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
}
.form-group input,
.form-group select {
 padding: var(--space-3);
 border: 1px solid var(--gray-300);
 border-radius: var(--rounded-md);
 font-size: var(--text-base);
 transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 background: var(--gray-50);
}
.form-group input:focus,
.form-group select:focus {
 outline: none;
 border-color: var(--blue-500);
 box-shadow: 0 0 0 3px var(--blue-100);
 background: white;
}
.radio-group {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 margin-top: var(--space-1);
}
.radio-label {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 cursor: pointer;
 font-size: var(--text-sm);
 color: var(--gray-700);
}
.radio-label input[type="radio"] {
 width: 16px;
 height: 16px;
 margin: 0;
 accent-color: var(--blue-600);
}
.radio-text {
 flex: 1;
}
.checkbox-label {
 display: flex;
 align-items: flex-start;
 gap: var(--space-2);
 cursor: pointer;
 font-size: var(--text-sm);
 color: var(--gray-700);
}
.checkbox-label input[type="checkbox"] {
 width: 16px;
 height: 16px;
 margin: 0;
 margin-top: 2px;
 accent-color: var(--blue-600);
}
.checkbox-text {
 flex: 1;
 line-height: 1.4;
}
.guide-submit-btn {
 background: var(--blue-600);
 color: white;
 border: none;
 padding: var(--space-4) var(--space-6);
 border-radius: var(--rounded-md);
 font-size: var(--text-base);
 font-weight: var(--font-medium);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-2);
 transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
 margin-top: var(--space-2);
}
.guide-submit-btn:hover {
 background: var(--blue-700);
 transform: translateY(-1px);
}
.guide-submit-btn:active {
 transform: translateY(0);
}
/* Mobile responsive */
@media (max-width: 768px) {
 .guide-container {
 grid-template-columns: 1fr;
 gap: var(--space-6);
 padding: 0 var(--space-4);
 }
 
 .guide-icon-container {
 width: 60px;
 height: 60px;
 }
 
 .guide-icon {
 width: 24px;
 height: 24px;
 }
 
 .guide-title {
 font-size: var(--text-xl);
 }
}
	.infoAdOption {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 10px;
	}
	
	.infoCard {
		max-width: 850px;
	}
	
	.infoAdDescr {
		padding: 0 0 7px 0;
		font-style: italic;
		color: #777777;
	}
	
	@media screen and (min-width: 1000px) {	
		.infoAdOptions {
			x-grid-template-columns: 1fr auto;
			
		}
	}
	.nearbyheader {
		padding: var(--space-3) 0;
	}
	
	/* --- */
	.near {
		margin-left: 5px;
	}
	
	.nearby {
		display: grid;
		grid-template-columns: repeat(auto-fill, 360px);
		grid-gap: 15px;
	}
	
	.nearbycard {
		width: 350px;
		display: grid;
		grid-template-columns: 70px 1fr;
		background-color: #ffffff;
		border-radius: 5px;
		border: 1px solid #d0e0d0;
		padding: 5px;
	}
	
	.nearbylogo {grid-column: 1; grid-row: 1;}
	.nearbyttl {grid-column: 2;}
	.nearbydist {grid-column: 1; grid-row: 3; align-self: end; color: rgb(80,160,144); font-weight: bold;}
	.nearbyaddr {grid-column: 2; grid-row: 3; align-self: end; color: rgb(140,160,164);}
	
	.nearbyintro {
		padding: 5px; border-radius: 5px;
		background-color: rgb(208,232,224);
		max-height: 100px;
		max-width: 260px;
		overflow-y: auto;
	}
	@media screen and (min-width:1000px) {
		.nearby {
			grid-gap: 20px 14px;
		}		
	}
	.forminp {width:310px;}
	
	.formkey {}
	.formval {margin-bottom:10px;}
	.forminfo {font-weight:bold;}
	
	@media screen and (min-width: 500px) {	
		.forminp {width:310px; margin-bottom:0;}
		.formval {margin-bottom:1px;}
	}
	.flexbox {
		display:flex;
		flex-wrap: wrap;
		flex-direction: row;		
	}
	
	.flexbox > div {
		margin-right:15px;
	}
 
.mph1 {
	margin: 7px 0;
}
.mpcalendar {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 10px 10px;
}
.mphint {
	color: #80b080;
}
.mplandmarks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 5px;
}
.mplandmark {
	text-align: center;
}
.mpblockintro {
	margin: 6px 5px 9px 5px;
}
.mplandmarkimg {
	width: 115px;
	height: 77px;
	border-radius: 5px;
}
/* --- */
.mpmiddle {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	grid-gap: 10px;	
}
.mpgrid {
	display: block;
	margin: 10px;
}
@media screen and (min-width: 800px) {
	.mpgrid {
		display: grid;
		grid-template-columns: 300px 1fr;
		grid-gap: 20px
	}
}
@media screen and (min-width: 1500px) {
	.mpmiddle {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
	}
}
.mpregion {
	margin-bottom: 10px;
}
.mpcapital {
	margin: 15px 0;
}
.mp-opendays {
 display: grid;
 grid-template-columns: minmax(280px, 350px);
 gap: var(--space-3);
}
@media screen and (min-width: 720px) {
	.mp-opendays {
	 display: grid;
	 grid-template-columns: repeat(auto-fit, 280px);
	 gap: var(--space-3);
	}
}
.mp-event-description {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 overflow: hidden; 
 
 color: var(--gray-600);
 font-size: var(--text-sm);
 margin-bottom: var(--space-4);
 line-height: var(--leading-relaxed);
} 
.sectionhdr {
	margin-bottom: 10px;
}
.centro {
	display: grid;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-align: center;
}
