:root{
	/* Enhanced Color Palette */
	--color-primary:#8ecafc; /* baby blue */
	--color-primary-50:#f0f9ff;
	--color-primary-100:#e0f2fe;
	--color-primary-200:#bae6fd;
	--color-primary-300:#7dd3fc;
	--color-primary-400:#38bdf8;
	--color-primary-500:#0ea5e9;
	--color-primary-600:#5bb6f8;
	--color-primary-700:#0284c7;
	--color-primary-900:#0c4a6e;
	--color-primary-rgb:142, 202, 252;
	
	--color-secondary:#f8c1da; /* light pink */
	--color-secondary-50:#fdf2f8;
	--color-secondary-100:#fce7f3;
	--color-secondary-200:#fbcfe8;
	--color-secondary-300:#f9a8d4;
	--color-secondary-400:#f472b6;
	--color-secondary-500:#ec4899;
	--color-secondary-600:#f39bc4;
	--color-secondary-700:#db2777;
	--color-secondary-900:#831843;
	--color-secondary-rgb:248, 193, 218;
	
	/* Neutral Colors */
	--color-white:#ffffff;
	--color-gray-50:#f9fafb;
	--color-gray-100:#f3f4f6;
	--color-gray-200:#e5e7eb;
	--color-gray-300:#d1d5db;
	--color-gray-400:#9ca3af;
	--color-gray-500:#6b7280;
	--color-gray-600:#4b5563;
	--color-gray-700:#374151;
	--color-gray-800:#1f2937;
	--color-gray-900:#111827;
	
	/* Text Colors */
	--color-text:#0f172a;
	--color-text-light:#475569;
	--color-text-muted:#64748b;
	--color-text-inverse:#ffffff;
	
	/* Status Colors */
	--color-success:#10b981;
	--color-success-light:#d1fae5;
	--color-warning:#f59e0b;
	--color-warning-light:#fef3c7;
	--color-error:#ef4444;
	--color-error-light:#fee2e2;
	
	/* Background */
	--color-bg:#ffffff;
	--color-bg-soft:#fafbfc;
	--color-bg-muted:#f8fafc;
	
	/* Spacing System */
	--space-xs:0.25rem; /* 4px */
	--space-sm:0.5rem;  /* 8px */
	--space-md:0.75rem; /* 12px */
	--space-lg:1rem;    /* 16px */
	--space-xl:1.5rem;  /* 24px */
	--space-2xl:2rem;   /* 32px */
	--space-3xl:3rem;   /* 48px */
	--space-4xl:4rem;   /* 64px */
	--space-5xl:6rem;   /* 96px */
	
	/* Typography Scale */
	--text-xs:0.75rem;   /* 12px */
	--text-sm:0.875rem;  /* 14px */
	--text-base:1rem;    /* 16px */
	--text-lg:1.125rem;  /* 18px */
	--text-xl:1.25rem;   /* 20px */
	--text-2xl:1.5rem;   /* 24px */
	--text-3xl:1.875rem; /* 30px */
	--text-4xl:2.25rem;  /* 36px */
	--text-5xl:3rem;     /* 48px */
	
	/* Design System */
	--radius-sm:8px;
	--radius:12px;
	--radius-lg:16px;
	--radius-xl:20px;
	--radius-2xl:24px;
	
	/* Shadows */
	--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);
	--shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
	--shadow-md:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	--shadow-lg:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
	--shadow-xl:0 25px 50px -12px rgba(0,0,0,0.25);
	
	/* Transitions */
	--transition-fast:150ms ease;
	--transition-normal:250ms ease;
	--transition-slow:350ms ease;
}

*{box-sizing:border-box}
html{
	scroll-behavior:smooth;
	overflow-x: hidden;
	background: var(--color-white);
}
body{
	overflow-x: hidden;
	margin:0;
	font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;
	color:var(--color-text);
	background: var(--color-white);
	line-height:1.6;
	font-size:var(--text-base);
	font-weight:400;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}

.container{
	width:min(1200px,100%);
	margin-inline:auto;
	padding-inline:var(--space-lg);
}

@media (min-width: 768px) {
	.container {
		padding-inline:var(--space-xl);
	}
}

.site-header{
	position:sticky;
	top:0;
	z-index:1000;
	background:rgba(255,255,255,0.95);
	backdrop-filter:saturate(180%) blur(12px);
	border-bottom:1px solid var(--color-gray-200);
	transition:all var(--transition-normal);
}

.site-header.scrolled {
	background:rgba(255,255,255,0.98);
	box-shadow:0 8px 24px rgba(2,6,23,0.12), 0 2px 6px rgba(2,6,23,0.06);
	border-bottom-color:var(--color-gray-300);
}

/* Floating inner container when scrolled */
.site-header.scrolled .header-inner{
	background:rgba(255,255,255,0.9);
	border:1px solid var(--color-gray-200);
	border-radius:calc(var(--radius-lg) + 4px);
	box-shadow:var(--shadow-md);
	padding-inline:var(--space-lg);
}

.header-inner{
	display:grid; 
	grid-template-columns:auto 1fr auto; 
	align-items:center; 
	gap:var(--space-xl); 
	min-height:80px;
	padding-block:var(--space-md);
}

.brand{
	display:flex; 
	align-items:center; 
	gap:var(--space-md); 
	text-decoration:none;
	font-weight:700;
	font-size:var(--text-xl);
	color:var(--color-text);
	transition:transform var(--transition-fast);
}

.brand:hover {
	transform:scale(1.02);
}

.brand img{
	display:block;
	height:48px;
	width:auto;
}

.nav{
	justify-self:center;
}

.nav ul{
	display:flex; 
	gap:var(--space-sm);
	list-style:none;
	padding:0;
	margin:0;
}

.nav a{
	padding:var(--space-md) var(--space-lg); 
	border-radius:var(--radius-lg); 
	font-weight:500;
	font-size:var(--text-sm);
	text-decoration:none;
	color:var(--color-text-light);
	transition:all var(--transition-fast);
	position:relative;
}

/* Gradient underline for nav links */
.nav a::after{
	content:"";
	position:absolute;
	left:var(--space-lg);
	right:var(--space-lg);
	bottom:6px;
	height:2px;
	background:linear-gradient(90deg, var(--color-secondary-600), var(--color-primary-600));
	border-radius:2px;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform var(--transition-fast);
}
.nav a:hover::after{transform:scaleX(1)}

.nav a:hover {
	background:var(--color-primary-50);
	color:var(--color-primary-700);
	transform:translateY(-1px);
}

.nav a.active{
	background:var(--color-primary-100); 
	color:var(--color-primary-700);
	font-weight:600;
}
.nav a.active::after{transform:scaleX(1)}

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

.nav-cta .btn{
	border-radius:var(--radius-lg);
	font-size:var(--text-sm);
	font-weight:600;
	padding:var(--space-md) var(--space-lg);
}
/* Navigation CTA - Hidden by default, shown on desktop */
.nav-cta{
	display:none; 
	gap:var(--space-sm); 
	align-items:center;
}

.menu-toggle{
	border:2px solid var(--color-gray-200);
	background:var(--color-white);
	display:inline-flex;
	flex-direction:column;
	gap:var(--space-xs);
	cursor:pointer;
	width:52px; 
	height:52px; 
	padding:var(--space-md); 
	align-items:center; 
	justify-content:center;
	border-radius:var(--radius-lg);
	transition:all var(--transition-fast);
	box-shadow:var(--shadow-sm);
}

.menu-toggle:hover {
	background:var(--color-primary-50);
	border-color:var(--color-primary-300);
	transform:translateY(-1px);
	box-shadow:var(--shadow-md);
}

.menu-toggle .bar{
	width:26px;
	height:3px;
	background:var(--color-text);
	border-radius:3px;
	display:block;
	transition:all var(--transition-fast);
}

.menu-toggle:hover .bar{
	background:var(--color-primary-700);
}

/* Desktop Navigation */
@media (min-width: 900px){
	.menu-toggle{display:none}
    .nav{
		display:flex; 
		align-items:center; 
		gap:var(--space-lg);
	}
	.nav-cta{display:flex}
}

/* Mobile Navigation */
@media (max-width: 899px){
    .header-inner{
		grid-template-columns:auto 1fr;
		gap:var(--space-lg);
	}
    .menu-toggle{justify-self:end}
    .nav{
        position:fixed; 
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.98); 
		backdrop-filter: blur(20px);
		transform: translateX(100%); 
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		opacity: 0;
		visibility: hidden;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: var(--space-2xl);
    }
    .nav.open{
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}
    .nav ul{
		flex-direction: column; 
		padding: 0;
		gap: var(--space-lg);
		margin: 0 0 var(--space-3xl) 0;
		width: 100%;
		max-width: 280px;
	}
	.nav a{
		font-size: var(--text-xl);
		font-weight: 600;
		padding: var(--space-lg) var(--space-xl);
		border-radius: var(--radius-lg);
		background: rgba(255, 255, 255, 0.8);
		border: 2px solid var(--color-gray-200);
		text-align: center;
		min-height: 64px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		backdrop-filter: blur(10px);
		color: var(--color-text);
		text-decoration: none;
		width: 100%;
	}
	.nav a:hover{
		background: var(--color-primary-50);
		border-color: var(--color-primary-300);
		color: var(--color-primary-700);
		transform: translateY(-3px) scale(1.02);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
		box-shadow:var(--shadow-md);
	}
	.nav a.active{
		background:linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-100));
		border-color:var(--color-primary-300);
		color:var(--color-primary-800);
		font-weight:700;
		box-shadow:var(--shadow-lg);
	}
	.nav a::after{
		display:none;
	}
    .nav-cta{
		display: flex; 
		flex-direction: column;
		gap: var(--space-md);
		width: 100%;
		max-width: 280px;
		margin-top: var(--space-lg);
	}
	.nav-cta .btn{
		font-size: var(--text-lg);
		font-weight: 700;
		padding: var(--space-lg) var(--space-xl);
		border-radius: var(--radius-lg);
		min-height: 56px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		width: 100%;
		backdrop-filter: blur(10px);
	}
	.nav-cta .btn:hover{
		transform: translateY(-3px) scale(1.02);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}
}

/* Modern Button System */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:var(--space-sm);
	padding:var(--space-md) var(--space-xl);
	border-radius:var(--radius-lg);
	font-weight:600;
	font-size:var(--text-sm);
	text-decoration:none;
	border:2px solid transparent;
	cursor:pointer;
	transition:all var(--transition-fast);
	white-space:nowrap;
	line-height:1.2;
}

.btn:active{
	transform:translateY(1px) scale(0.98);
}

.btn-primary{
	background:linear-gradient(135deg, var(--color-primary-600), var(--color-primary)); 
	color:var(--color-white); 
	box-shadow:var(--shadow-md);
	border-color:var(--color-primary-600);
}

.btn-primary:hover{
	background:linear-gradient(135deg, var(--color-primary-700), var(--color-primary-600));
	box-shadow:var(--shadow-lg);
	transform:translateY(-2px);
}

.btn-secondary{
	background:linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary)); 
	color:var(--color-white); 
	box-shadow:var(--shadow-md);
	border-color:var(--color-secondary-600);
}

.btn-secondary:hover{
	background:linear-gradient(135deg, var(--color-secondary-700), var(--color-secondary-600));
	box-shadow:var(--shadow-lg);
	transform:translateY(-2px);
}

.btn-outline{
	border-color:var(--color-primary-600); 
	color:var(--color-primary-700); 
	background:var(--color-white);
}

.btn-outline:hover{
	background:var(--color-primary-50);
	border-color:var(--color-primary-700);
	color:var(--color-primary-900);
	transform:translateY(-1px);
}

/* Hero */
.hero{
	position:relative;
	min-height:62vh;
	display:grid;
	place-items:center;
	overflow:hidden;
}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.15) 100%); z-index:0}
.hero-bg{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
	filter:brightness(.85);
}
.hero-content{
	position:relative;
	color:#ffffff !important;
	text-align:center;
	padding:48px 24px;
	max-width:900px;
	margin:0 auto;
	background:rgba(0,0,0,0.4);
	backdrop-filter:blur(8px);
	border-radius:var(--radius-2xl);
	border:1px solid rgba(255,255,255,0.1);
}
.hero h1{
	font-size:clamp(30px, 5vw, 52px);
	line-height:1.2;
	margin:0 0 16px 0;
	font-weight:800;
	color:#ffffff;
	text-shadow:0 4px 20px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.8);
	letter-spacing:-0.02em;
}
.hero p{
	max-width:740px;
	margin:0 auto 24px;
	color:#ffffff;
	text-shadow:0 3px 15px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.7);
	font-size:clamp(16px, 2.5vw, 20px);
	font-weight:500;
	line-height:1.6;
}
.hero-actions{
	display:flex;
	gap:12px;
	justify-content:center;
	flex-wrap:wrap;
	margin-top:var(--space-2xl);
}

.hero-actions .btn {
	font-weight:600;
	padding:var(--space-md) var(--space-xl);
	box-shadow:0 4px 15px rgba(0,0,0,0.3);
	transition:all 0.3s ease;
}

.hero-actions .btn:hover {
	transform:translateY(-2px);
	box-shadow:0 6px 20px rgba(0,0,0,0.4);
}

/* Modern Section System */
.section{
	padding-block:var(--space-4xl);
}

.section + .section{
	padding-top:var(--space-3xl);
}

.intro p{
	color:var(--color-text-muted);
	font-size:var(--text-lg);
	line-height:1.7;
}

/* Modern Intro Section */
.modern-intro {
	padding:var(--space-4xl) 0;
	position:relative;
}

.intro-content {
	text-align:center;
	max-width:900px;
	margin:0 auto;
	position:relative;
	z-index:1;
}

.intro-badge {
	display:inline-block;
	background:var(--color-primary-100);
	color:var(--color-primary-700);
	padding:var(--space-sm) var(--space-xl);
	border-radius:var(--radius-full);
	font-size:var(--text-sm);
	font-weight:600;
	letter-spacing:0.5px;
	margin-bottom:var(--space-xl);
	animation:fadeInUp 0.6s ease-out;
}

.intro-title {
	font-size:clamp(2rem, 5vw, 3.5rem);
	font-weight:800;
	line-height:1.2;
	margin:0 0 var(--space-2xl) 0;
	color:var(--color-text);
	animation:fadeInUp 0.8s ease-out;
}

.text-gradient {
	background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background-clip:text;
}

.intro-description {
	font-size:var(--text-xl);
	line-height:1.8;
	color:var(--color-text-light);
	animation:fadeInUp 1s ease-out;
}

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

/* Enhanced Section Headers */
.section-header {
	display:flex;
	flex-direction:column;
	gap:var(--space-2xl);
	margin-bottom:var(--space-4xl);
}

.section-content {
	text-align:center;
}

.section-description {
	color:var(--color-text-light);
	font-size:var(--text-lg);
	line-height:1.6;
	max-width:600px;
	margin:var(--space-lg) auto 0;
}

@media (min-width: 768px) {
	.section-header {
		flex-direction:row;
		align-items:center;
		text-align:left;
	}
	
	.section-content {
		text-align:left;
		flex:1;
	}
	
	.section-cover {
		flex:0 0 40%;
		margin:0;
		order:2;
	}
	
	.section-description {
		margin:var(--space-lg) 0 0;
	}
}

/* Page hero (inner pages) */
.page-hero{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color:#0b1220; padding:48px 0}
.page-hero .title{margin:0; font-size:clamp(24px, 4vw, 36px)}
.page-hero p{margin:6px 0 0 0; color:#1f2937}
.breadcrumbs{font-size:14px; color:#475569; margin-top:6px}
.breadcrumbs a{text-decoration:none; color:#334155}
.breadcrumbs a:hover{text-decoration:underline}

/* Modern Feature Cards */
.features-section {
	margin:var(--space-4xl) 0;
}

.features-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-3xl);
}

.feature-card {
	background:var(--color-white);
	border:1px solid var(--color-gray-200);
	border-radius:var(--radius-2xl);
	padding:var(--space-3xl);
	box-shadow:var(--shadow-md);
	transition:all var(--transition-normal);
	position:relative;
	overflow:hidden;
}

.feature-card:hover {
	transform:translateY(-6px);
	box-shadow:var(--shadow-xl);
	border-color:var(--color-primary-300);
}

.feature-header {
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-bottom:var(--space-2xl);
}

.gradient-line {
	width:80px;
	height:4px;
	background:linear-gradient(90deg, var(--color-primary-600) 0%, var(--color-secondary-600) 50%, var(--color-primary-600) 100%);
	border-radius:2px;
	margin-bottom:var(--space-xl);
}

.feature-icon {
	width:64px;
	height:64px;
	background:linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-100));
	border:2px solid var(--color-gray-200);
	border-radius:var(--radius-xl);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-primary-700);
	transition:all var(--transition-normal);
}

.feature-card:hover .feature-icon {
	background:linear-gradient(135deg, var(--color-primary-200), var(--color-secondary-200));
	border-color:var(--color-primary-400);
	transform:scale(1.05);
}

.feature-content {
	text-align:center;
}

.feature-content h3 {
	font-size:var(--text-2xl);
	font-weight:700;
	color:var(--color-text);
	margin:0 0 var(--space-lg) 0;
	line-height:1.3;
}

.feature-content p {
	color:var(--color-text-light);
	font-size:var(--text-base);
	line-height:1.6;
	margin:0;
	max-width:280px;
	margin-left:auto;
	margin-right:auto;
}

/* Modern Features Section */
.modern-features {
	padding:var(--space-5xl) 0;
	background:linear-gradient(to bottom, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.features-wrapper {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	gap:var(--space-3xl);
	max-width:1200px;
	margin:0 auto;
}

.feature-item {
	position:relative;
	background:var(--color-white);
	border-radius:var(--radius-2xl);
	padding:var(--space-4xl) var(--space-3xl);
	box-shadow:0 10px 40px rgba(0, 0, 0, 0.05);
	transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	overflow:hidden;
	cursor:pointer;
}

.feature-item::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:3px;
	background:linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform 0.4s ease;
}

.feature-item:hover {
	transform:translateY(-8px);
	box-shadow:0 20px 60px rgba(0, 0, 0, 0.1);
}

.feature-item:hover::before {
	transform:scaleX(1);
}

.feature-icon-wrapper {
	position:relative;
	width:80px;
	height:80px;
	margin:0 auto var(--space-2xl) auto;
}

.feature-icon-bg {
	position:absolute;
	inset:0;
	background:linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-100));
	border-radius:var(--radius-xl);
	opacity:0.2;
}

.feature-icon {
	position:relative;
	width:100%;
	height:100%;
	background:linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
	border-radius:var(--radius-xl);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-white);
	box-shadow:0 10px 30px rgba(var(--color-primary-rgb), 0.3);
	transition:all 0.3s ease;
}

.feature-item:hover .feature-icon {
	transform:rotate(5deg) scale(1.05);
	box-shadow:0 15px 40px rgba(var(--color-primary-rgb), 0.4);
}

.feature-text {
	text-align:center;
}

.feature-text h3 {
	font-size:var(--text-2xl);
	font-weight:700;
	color:var(--color-text);
	margin:0 0 var(--space-lg) 0;
	line-height:1.3;
	transition:color 0.3s ease;
}

.feature-item:hover .feature-text h3 {
	color:var(--color-primary-600);
}

.feature-text p {
	color:var(--color-text-light);
	font-size:var(--text-base);
	line-height:1.6;
	margin:0;
}



/* Legacy card support */
.card{
	background:var(--color-white); 
	border:1px solid var(--color-gray-200); 
	border-radius:var(--radius-2xl); 
	padding:var(--space-2xl); 
	box-shadow:var(--shadow-md); 
	text-align:center;
	transition:all var(--transition-normal);
}

.card:hover {
	transform:translateY(-4px);
	box-shadow:var(--shadow-lg);
	border-color:var(--color-primary-200);
}

.card img{
	margin:0 auto var(--space-lg);
	filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.card h3{
	margin:0 0 var(--space-md) 0;
	color:var(--color-text);
}

.card p {
	color:var(--color-text-muted);
	font-size:var(--text-sm);
	line-height:1.6;
}

/* Enhanced Products */
.product-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-2xl);
}

.product-card{
	background:var(--color-white); 
	border:1px solid var(--color-gray-200); 
	border-radius:var(--radius-2xl); 
	overflow:hidden; 
	box-shadow:var(--shadow-md);
	transition:all var(--transition-normal);
}

.product-card:hover {
	transform:translateY(-6px);
	box-shadow:var(--shadow-xl);
	border-color:var(--color-primary-300);
}

.product-card img{
	width:100%; 
	aspect-ratio:4/3; 
	object-fit:cover;
	transition:transform var(--transition-normal);
}

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

.product-info{
	padding:var(--space-2xl);
}

.product-info h3 {
	margin:0 0 var(--space-md) 0;
	color:var(--color-text);
}

.product-info p {
	color:var(--color-text-light);
	font-size:var(--text-sm);
	line-height:1.6;
	margin:0;
}

.section-cover{
	width:100%; 
	aspect-ratio:5/2; 
	object-fit:cover; 
	border-radius:var(--radius-2xl); 
	box-shadow:var(--shadow-lg); 
	margin:var(--space-lg) 0 var(--space-2xl);
	transition:transform var(--transition-normal);
}

.section-cover:hover {
	transform:scale(1.02);
}

/* Responsive grids */
@media (min-width:700px){
	.features-grid{grid-template-columns:repeat(3,1fr)}
	.product-grid{grid-template-columns:repeat(3,1fr)}
}

/* Tablet: show 2 columns for features */
@media (min-width:560px) and (max-width:699px){
    .features-grid{grid-template-columns:repeat(2,1fr)}
}

/* Tablet: show 2 columns for products */
@media (min-width:560px) and (max-width:699px){
    .product-grid{grid-template-columns:repeat(2,1fr)}
}

/* Compact sections on very small screens */
@media (max-width:480px){
    .section{padding:28px 0}
}

/* Modern CTA Band */
.cta-band{
	background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
	color:var(--color-white);
	border-radius:var(--radius-2xl);
	margin:var(--space-4xl) 0;
	box-shadow:var(--shadow-xl);
}

.cta-inner{
	display:flex; 
	flex-direction:column; 
	gap:var(--space-xl); 
	align-items:center;
	text-align:center;
	padding:var(--space-4xl) var(--space-2xl);
}

.cta-inner h2 {
	color:var(--color-white);
	margin:0;
}

.cta-inner p {
	color:rgba(255,255,255,0.9);
	font-size:var(--text-lg);
	margin:0;
	max-width:600px;
}

.cta-actions{
	display:flex; 
	gap:var(--space-lg); 
	flex-wrap:wrap;
	justify-content:center;
}

/* About */
.about-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:20px;
}
@media (min-width:900px){
	.about-grid{grid-template-columns:1.1fr .9fr; align-items:center}
}

/* Contact */
.contact-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
}
.contact-card, .map-card{
	background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)
}
.map-embed{aspect-ratio:16/9; height:clamp(260px, 45vh, 420px); background:#f1f5f9; border-radius:12px; overflow:hidden}
.map-embed iframe{width:100%; height:100%}
.map-card .cta-actions{margin-top:10px}

/* Blog */
.blog-post{
	background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)
}
.post-meta{color:var(--color-muted); font-size:14px}
.blog-grid{display:grid; gap:16px}
@media(min-width:800px){.blog-grid{grid-template-columns:repeat(2,1fr)}}

/* Accordion */
.accordion{display:grid; gap:12px}
.accordion-item{border:0; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.accordion-header{margin:0}
.accordion-trigger{appearance:none; border:none; background:transparent; width:100%; text-align:left; padding:16px 18px; font-weight:700; cursor:pointer; border-radius:18px; position:relative}
.accordion-trigger:hover{background:#f8fafc}
.accordion-trigger::after{content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-weight:700; color:#0f172a; font-size:22px}
.accordion-trigger[aria-expanded="true"]::after{content:"–"}
.accordion-panel{padding:0 16px 16px}
.product-list{margin:8px 0 10px 18px}
.price-note{color:var(--color-muted)}

/* Emphasized school list */
.accordion.school-list .accordion-item{margin:6px 0}
.accordion.school-list .accordion-trigger{font-size:clamp(18px, 2.6vw, 24px); padding:18px 20px}
.accordion.school-list .accordion-trigger[aria-expanded="true"]{background:#f5faff; border-left:4px solid var(--color-primary-600)}

/* OLD FOOTER STYLES REMOVED FOR COMPACT VERSION */

/* OLD FOOTER LINKS AND BOTTOM REMOVED */

/* Footer responsive */
/* OLD FOOTER RESPONSIVE RULES REMOVED */

    /* On small screens, make map a bit taller for usability */
    .map-embed{aspect-ratio:4/3; height:clamp(280px, 50vh, 480px)}
	
	/* Enhanced mobile menu for very small screens */
	.nav{
		inset:80px var(--space-sm) auto var(--space-sm);
	}
	.nav ul{
		padding:var(--space-xl);
	}
	.nav a{
		font-size:var(--text-xl);
		padding:var(--space-xl) var(--space-lg);
		min-height:60px;
	}
	.nav-cta{
		padding:var(--space-xl);
		gap:var(--space-xl);
	}
	.nav-cta .btn{
		font-size:var(--text-xl);
		min-height:60px;
		padding:var(--space-xl);
	}
}

/* Enhanced Typography System */
h1,h2,h3,h4,h5,h6{
	line-height:1.2;
	font-weight:700;
	color:var(--color-text);
	margin:0;
	letter-spacing:-0.02em;
}

h1{
	font-size:clamp(var(--text-3xl), 4vw, var(--text-5xl));
	font-weight:800;
	line-height:1.1;
}

h2{
	font-size:clamp(var(--text-2xl), 3vw, var(--text-4xl));
	font-weight:700;
	line-height:1.15;
}

h3{
	font-size:clamp(var(--text-xl), 2.4vw, var(--text-3xl));
	font-weight:600;
	line-height:1.2;
}

h4{
	font-size:clamp(var(--text-lg), 2vw, var(--text-2xl));
	font-weight:600;
}

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

h6{
	font-size:var(--text-base);
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.05em;
}

p{
	margin:0 0 var(--space-lg) 0;
	color:var(--color-text-light);
	line-height:1.7;
}

a{
	color:inherit;
	transition:color var(--transition-fast);
}

/* Text utilities */
.text-muted {
	color:var(--color-text-muted);
}

.text-light {
	color:var(--color-text-light);
}

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

.text-large {
	font-size:var(--text-lg);
}

.text-small {
	font-size:var(--text-sm);
}

/* Accessibility: skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#ffffff; color:#0b1220; padding:8px 12px; border-radius:10px; box-shadow:var(--shadow); z-index:1001}

.visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* Focus styles */
a:focus, button:focus{outline:3px solid var(--color-secondary); outline-offset:2px; border-radius:8px}

/* Subtle hover */
.card:hover, .product-card:hover, .contact-card:hover, .map-card:hover, .blog-post:hover{
	box-shadow:0 16px 40px rgba(2,6,23,0.12);
	transform:translateY(-1px);
	transition:all .2s ease;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
	*{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}



/* Lock scroll when overlays/menus are open */
.no-scroll{overflow:hidden}

/* Modern Intro and Features Responsive */
@media (max-width:768px){
	/* Hero Mobile Adjustments */
	.hero {
		min-height:80vh;
	}
	
	.hero-content {
		padding:32px 16px;
		background:rgba(0,0,0,0.5);
		border-radius:var(--radius-lg);
	}
	
	.hero h1 {
		font-size:clamp(24px, 6vw, 36px);
	}
	
	.hero p {
		font-size:16px;
	}
	/* Modern Intro Mobile */
	.modern-intro {
		padding:var(--space-3xl) 0;
	}
	
	.intro-title {
		font-size:clamp(1.75rem, 5vw, 2.5rem);
	}
	
	.intro-description {
		font-size:var(--text-base);
		padding:0 var(--space-md);
	}
	
	.intro-badge {
		font-size:var(--text-xs);
		padding:var(--space-xs) var(--space-lg);
	}
	
	/* Modern Features Mobile */
	.modern-features {
		padding:var(--space-3xl) 0;
	}
	
	.features-wrapper {
		grid-template-columns:1fr;
		gap:var(--space-2xl);
		padding:0 var(--space-md);
	}
	
	.feature-item {
		padding:var(--space-3xl) var(--space-2xl);
	}
	

	
	.feature-icon-wrapper {
		width:70px;
		height:70px;
		margin-bottom:var(--space-xl);
	}
}

/* Tablet and Desktop Responsive */
@media (min-width:769px){
	.features-wrapper {
		grid-template-columns:repeat(3, 1fr);
	}
	
	.modern-intro {
		padding:var(--space-5xl) 0;
	}
	
	/* Animation delays for staggered effect */
	.feature-item:nth-child(1) {
		animation:fadeInUp 0.8s ease-out;
	}
	
	.feature-item:nth-child(2) {
		animation:fadeInUp 0.8s ease-out 0.1s both;
	}
	
	.feature-item:nth-child(3) {
		animation:fadeInUp 0.8s ease-out 0.2s both;
	}
}

/* Large screens */
@media (min-width:1200px){
	.features-wrapper {
		max-width:1100px;
	}
	
	.intro-content {
		max-width:1000px;
	}
}

/* Enhanced reduced motion support */
@media (prefers-reduced-motion: reduce){
	.intro-badge,
	.intro-title,
	.intro-description,
	.feature-item {
		animation:none;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark){
	.modern-features {
		background:linear-gradient(to bottom, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
	}
	
	.feature-item {
		background:var(--color-gray-800);
		border:1px solid var(--color-gray-700);
	}
	
	.feature-text h3,
	.feature-text p {
		color:var(--color-gray-100);
	}
	
	.intro-badge {
		background:var(--color-gray-700);
		color:var(--color-gray-100);
	}
}

/* Modern Products Page Styles */
.products-hero {
	background:linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
	padding:var(--space-5xl) 0 var(--space-4xl) 0;
	position:relative;
}



.products-hero .container {
	position:relative;
	z-index:1;
}

.products-hero .breadcrumbs {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	font-size:var(--text-sm);
	color:var(--color-text-light);
	margin-bottom:var(--space-2xl);
}

.products-hero .breadcrumbs a {
	color:var(--color-primary-600);
	text-decoration:none;
	transition:color 0.2s ease;
}

.products-hero .breadcrumbs a:hover {
	color:var(--color-primary-700);
	text-decoration:underline;
}

.products-hero .breadcrumbs svg {
	color:var(--color-gray-400);
}

.hero-content {
	text-align:center;
	max-width:800px;
	margin:0 auto;
}

.hero-title {
	font-size:clamp(2.5rem, 5vw, 4rem);
	font-weight:800;
	line-height:1.1;
	margin:0 0 var(--space-xl) 0;
	color:var(--color-text);
	animation:fadeInUp 0.8s ease-out;
}

.hero-description {
	font-size:var(--text-xl);
	color:var(--color-text-light);
	line-height:1.6;
	animation:fadeInUp 1s ease-out;
}

/* Category Filter */
.category-filter {
	background:var(--color-white);
	padding:var(--space-3xl) 0;
	border-bottom:1px solid var(--color-gray-200);
	position:sticky;
	top:80px;
	z-index:50;
	backdrop-filter:blur(10px);
}

.filter-wrapper {
	display:flex;
	gap:var(--space-md);
	justify-content:center;
	flex-wrap:wrap;
}

.filter-btn {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	padding:var(--space-md) var(--space-xl);
	background:var(--color-white);
	border:2px solid var(--color-gray-200);
	border-radius:var(--radius-full);
	font-size:var(--text-base);
	font-weight:600;
	color:var(--color-text-light);
	cursor:pointer;
	transition:all 0.3s ease;
}

.filter-btn:hover {
	border-color:var(--color-primary-300);
	color:var(--color-primary-600);
	transform:translateY(-2px);
	box-shadow:var(--shadow-md);
}

.filter-btn.active {
	background:linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
	border-color:transparent;
	color:var(--color-white);
	box-shadow:var(--shadow-lg);
}

.filter-icon {
	font-size:var(--text-xl);
}

/* Products Grid */
.products-section {
	padding:var(--space-5xl) 0;
}

.products-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
	gap:var(--space-3xl);
	margin-bottom:var(--space-5xl);
}

.product-item {
	background:var(--color-white);
	border-radius:var(--radius-2xl);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);
	transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor:pointer;
	position:relative;
}

.product-item:hover {
	transform:translateY(-8px);
	box-shadow:0 20px 50px rgba(0, 0, 0, 0.1);
}

.product-image {
	position:relative;
	overflow:hidden;
	height:250px;
}

.product-image img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 0.6s ease;
}

.product-item:hover .product-image img {
	transform:scale(1.1);
}

.product-badge {
	position:absolute;
	top:var(--space-lg);
	left:var(--space-lg);
	background:var(--color-primary-600);
	color:var(--color-white);
	padding:var(--space-xs) var(--space-lg);
	border-radius:var(--radius-full);
	font-size:var(--text-sm);
	font-weight:600;
	box-shadow:var(--shadow-md);
}

.badge-pink {
	background:var(--color-secondary-600);
}

.product-content {
	padding:var(--space-3xl);
}

.product-content h3 {
	font-size:var(--text-2xl);
	font-weight:700;
	margin:0 0 var(--space-lg) 0;
	color:var(--color-text);
}

.product-content p {
	color:var(--color-text-light);
	line-height:1.6;
	margin:0 0 var(--space-xl) 0;
}

.product-features {
	list-style:none;
	padding:0;
	margin:0 0 var(--space-2xl) 0;
}

.product-features li {
	color:var(--color-text-muted);
	font-size:var(--text-sm);
	padding:var(--space-xs) 0;
	display:flex;
	align-items:center;
	gap:var(--space-sm);
}

.product-actions .btn {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--space-sm);
}

/* Featured Schools */
.featured-schools {
	background:linear-gradient(to bottom, var(--color-gray-50) 0%, var(--color-white) 100%);
	padding:var(--space-5xl) 0;
}

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

.section-badge {
	display:inline-block;
	background:var(--color-secondary-100);
	color:var(--color-secondary-700);
	padding:var(--space-sm) var(--space-xl);
	border-radius:var(--radius-full);
	font-size:var(--text-sm);
	font-weight:600;
	letter-spacing:0.5px;
	margin-bottom:var(--space-xl);
}

.section-title {
	font-size:clamp(2rem, 4vw, 3rem);
	font-weight:800;
	line-height:1.2;
	margin:0 0 var(--space-xl) 0;
	color:var(--color-text);
}

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

.schools-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	gap:var(--space-2xl);
	max-width:1200px;
	margin:0 auto;
}

.school-card {
	background:var(--color-white);
	border:1px solid var(--color-gray-200);
	border-radius:var(--radius-xl);
	padding:var(--space-3xl);
	text-align:center;
	transition:all 0.3s ease;
	position:relative;
	overflow:hidden;
}

.school-card::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:3px;
	background:linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
	transform:scaleX(0);
	transition:transform 0.3s ease;
}

.school-card:hover {
	transform:translateY(-4px);
	box-shadow:var(--shadow-lg);
	border-color:var(--color-primary-300);
}

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

.school-icon {
	font-size:3rem;
	margin-bottom:var(--space-lg);
}

.school-card h3 {
	font-size:var(--text-xl);
	font-weight:700;
	margin:0 0 var(--space-md) 0;
	color:var(--color-text);
}

.school-card p {
	color:var(--color-text-light);
	font-size:var(--text-base);
	margin:0;
}

/* Modern CTA Section */
.modern-cta {
	background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
	padding:var(--space-5xl) 0;
	color:var(--color-white);
	position:relative;
}



.cta-content {
	text-align:center;
	position:relative;
	z-index:1;
}

.cta-content h2 {
	font-size:clamp(2rem, 4vw, 3.5rem);
	font-weight:800;
	margin:0 0 var(--space-xl) 0;
}

.cta-content p {
	font-size:var(--text-xl);
	opacity:0.9;
	max-width:600px;
	margin:0 auto var(--space-3xl) auto;
}

.cta-stats {
	display:flex;
	justify-content:center;
	gap:var(--space-4xl);
	margin-bottom:var(--space-3xl);
	flex-wrap:wrap;
}

.stat-item {
	text-align:center;
}

.stat-number {
	display:block;
	font-size:clamp(2.5rem, 4vw, 3.5rem);
	font-weight:800;
	line-height:1;
	margin-bottom:var(--space-sm);
}

.stat-label {
	font-size:var(--text-base);
	opacity:0.8;
}

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

.btn-large {
	padding:var(--space-lg) var(--space-2xl);
	font-size:var(--text-lg);
	display:flex;
	align-items:center;
	gap:var(--space-sm);
}

/* Responsive adjustments */
@media (max-width:768px){
	.products-hero {
		padding:var(--space-3xl) 0;
	}
	
	.hero-title {
		font-size:clamp(2rem, 6vw, 3rem);
	}
	
	.category-filter {
		position:static;
		padding:var(--space-2xl) 0;
	}
	
	.filter-wrapper {
		gap:var(--space-sm);
	}
	
	.filter-btn {
		padding:var(--space-sm) var(--space-lg);
		font-size:var(--text-sm);
	}
	
	.products-grid {
		grid-template-columns:1fr;
		gap:var(--space-2xl);
	}
	
	.schools-grid {
		grid-template-columns:1fr;
	}
	
	.cta-stats {
		gap:var(--space-2xl);
	}
	
	.cta-buttons {
		flex-direction:column;
		align-items:center;
	}
	
	.btn-large {
		width:100%;
		max-width:300px;
	}
}

/* School Uniforms Page Styles */
.school-hero {
	background:linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
	padding:var(--space-5xl) 0 var(--space-4xl) 0;
	position:relative;
}



.school-hero .container {
	position:relative;
	z-index:1;
}

.school-hero .breadcrumbs {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	font-size:var(--text-sm);
	color:var(--color-text-light);
	margin-bottom:var(--space-2xl);
}

.school-hero .breadcrumbs a {
	color:var(--color-primary-600);
	text-decoration:none;
	transition:color 0.2s ease;
}

.school-hero .breadcrumbs a:hover {
	color:var(--color-primary-700);
	text-decoration:underline;
}

.hero-badge {
	display:inline-block;
	background:var(--color-primary-100);
	color:var(--color-primary-700);
	padding:var(--space-sm) var(--space-xl);
	border-radius:var(--radius-full);
	font-size:var(--text-sm);
	font-weight:600;
	letter-spacing:0.5px;
	margin-bottom:var(--space-xl);
	animation:fadeInUp 0.6s ease-out;
}

/* School Filter */
.school-filter {
	background:var(--color-white);
	padding:var(--space-3xl) 0;
	border-bottom:1px solid var(--color-gray-200);
	position:sticky;
	top:80px;
	z-index:50;
	backdrop-filter:blur(10px);
}

/* Schools Grid */
.schools-section {
	padding:var(--space-5xl) 0;
}

.schools-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
	gap:var(--space-3xl);
}

.school-item {
	background:var(--color-white);
	border-radius:var(--radius-2xl);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);
	transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position:relative;
}

.school-item:hover {
	transform:translateY(-8px);
	box-shadow:0 20px 50px rgba(0, 0, 0, 0.1);
}

.school-header {
	padding:var(--space-2xl) var(--space-2xl) var(--space-lg);
}

.school-badge-wrapper {
	display:flex;
	gap:var(--space-sm);
	margin-bottom:var(--space-lg);
}

.school-badge {
	display:inline-block;
	padding:var(--space-xs) var(--space-md);
	border-radius:var(--radius-full);
	font-size:var(--text-xs);
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.badge-blue {
	background:var(--color-primary-100);
	color:var(--color-primary-700);
}

.badge-green {
	background:#d1fae5;
	color:#065f46;
}

.badge-purple {
	background:#e9d5ff;
	color:#6b21a8;
}

.badge-orange {
	background:#fed7aa;
	color:#9a3412;
}

.school-name {
	font-size:var(--text-xl);
	font-weight:700;
	color:var(--color-text);
	margin:0;
	line-height:1.3;
}

.school-image {
	position:relative;
	height:200px;
	overflow:hidden;
}

.school-image img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 0.6s ease;
}

.school-item:hover .school-image img {
	transform:scale(1.1);
}

.school-content {
	padding:var(--space-2xl);
}

.uniform-items {
	margin-bottom:var(--space-2xl);
}

.uniform-items h4 {
	font-size:var(--text-base);
	font-weight:600;
	color:var(--color-text);
	margin:0 0 var(--space-lg) 0;
}

.items-grid {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:var(--space-md);
}

.item {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	padding:var(--space-sm);
	background:var(--color-gray-50);
	border-radius:var(--radius-md);
	font-size:var(--text-sm);
	color:var(--color-text-light);
}

.item-icon {
	font-size:var(--text-lg);
}

.school-features {
	display:flex;
	flex-direction:column;
	gap:var(--space-sm);
	margin-bottom:var(--space-2xl);
}

.school-features .feature {
	font-size:var(--text-sm);
	color:var(--color-text-muted);
}

.school-actions .btn {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--space-sm);
}

/* Uniform Features Section */
.uniform-features {
	background:linear-gradient(to bottom, var(--color-gray-50) 0%, var(--color-white) 100%);
	padding:var(--space-5xl) 0;
}

.features-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
	gap:var(--space-3xl);
	margin-top:var(--space-4xl);
}

.feature-box {
	text-align:center;
	padding:var(--space-2xl);
}

.feature-icon-circle {
	width:80px;
	height:80px;
	margin:0 auto var(--space-2xl);
	background:linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-100));
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-primary-600);
	box-shadow:0 10px 30px rgba(var(--color-primary-rgb), 0.2);
	transition:all 0.3s ease;
}

.feature-box:hover .feature-icon-circle {
	transform:scale(1.1);
	box-shadow:0 15px 40px rgba(var(--color-primary-rgb), 0.3);
}

.feature-box h3 {
	font-size:var(--text-xl);
	font-weight:700;
	color:var(--color-text);
	margin:0 0 var(--space-lg) 0;
}

.feature-box p {
	color:var(--color-text-light);
	font-size:var(--text-base);
	line-height:1.6;
}

/* School CTA Section */
.school-cta {
	background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
	padding:var(--space-5xl) 0;
	color:var(--color-white);
	position:relative;
}



.school-cta .cta-content {
	text-align:center;
	position:relative;
	z-index:1;
}

.school-cta h2 {
	font-size:clamp(2rem, 4vw, 3.5rem);
	font-weight:800;
	margin:0 0 var(--space-xl) 0;
}

.school-cta p {
	font-size:var(--text-xl);
	opacity:0.9;
	max-width:600px;
	margin:0 auto var(--space-3xl) auto;
}

.cta-features {
	display:flex;
	justify-content:center;
	gap:var(--space-3xl);
	margin-bottom:var(--space-3xl);
	flex-wrap:wrap;
}

.cta-feature {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	font-size:var(--text-lg);
}

.cta-icon {
	font-size:var(--text-2xl);
}

/* Responsive adjustments */
@media (max-width:768px){
	.school-hero {
		padding:var(--space-3xl) 0;
	}
	
	.school-filter {
		position:static;
		padding:var(--space-2xl) 0;
	}
	
	.schools-grid {
		grid-template-columns:1fr;
		gap:var(--space-2xl);
	}
	
	.items-grid {
		grid-template-columns:1fr;
	}
	
	.features-grid {
		grid-template-columns:1fr;
		gap:var(--space-2xl);
	}
	
	.cta-features {
		flex-direction:column;
		gap:var(--space-xl);
		align-items:center;
	}
	
	.cta-buttons {
		flex-direction:column;
		align-items:center;
		gap:var(--space-lg);
	}
	
	.btn-large {
		width:100%;
		max-width:300px;
	}
}

/* About Page Styles */
.about-hero {
	background:linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
	padding:var(--space-5xl) 0 var(--space-4xl) 0;
	position:relative;
}

/* Bu blok kaldırıldı - çakışan tanımlar yüzünden */



.about-hero .container {
	position:relative;
	z-index:1;
}

/* Story Section */
.story-section {
	padding:var(--space-5xl) 0;
}

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

.story-content {
	animation:fadeInUp 0.8s ease-out;
}

.section-title {
	font-size:clamp(2rem, 4vw, 3rem);
	font-weight:800;
	line-height:1.2;
	margin:0 0 var(--space-2xl) 0;
	color:var(--color-text);
}

.story-text {
	font-size:var(--text-lg);
	line-height:1.8;
	color:var(--color-text-light);
	margin-bottom:var(--space-xl);
}

.story-stats {
	display:flex;
	gap:var(--space-3xl);
	margin-top:var(--space-3xl);
}

.stat-box {
	text-align:center;
}

.stat-box .stat-number {
	display:block;
	font-size:clamp(2.5rem, 4vw, 3rem);
	font-weight:800;
	color:var(--color-primary-600);
	line-height:1;
	margin-bottom:var(--space-sm);
}

.stat-box .stat-label {
	font-size:var(--text-sm);
	color:var(--color-text-light);
}

.story-image {
	position:relative;
	animation:fadeInUp 1s ease-out;
}

.story-image img {
	width:100%;
	height:auto;
	border-radius:var(--radius-2xl);
	box-shadow:var(--shadow-xl);
}

.image-decoration {
	position:absolute;
	top:-20px;
	right:-20px;
	width:100px;
	height:100px;
	background:linear-gradient(135deg, var(--color-primary-400), var(--color-secondary-400));
	border-radius:50%;
	opacity:0.5;
	filter:blur(50px);
}

/* Values Section */
.values-section {
	background:linear-gradient(to bottom, var(--color-gray-50) 0%, var(--color-white) 100%);
	padding:var(--space-5xl) 0;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-3xl);
	margin-top: var(--space-4xl);
}

.value-card {
	text-align: center;
	padding: var(--space-2xl);
	background: var(--color-white);
	border-radius: var(--radius-xl);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--color-gray-100);
	transition: all 0.3s ease;
}

.value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.value-card .value-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-100));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-xl) auto;
	color: var(--color-primary-600);
}

.value-card h3 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin: 0 0 var(--space-md) 0;
	color: var(--color-text);
}

.value-card p {
	font-size: var(--text-base);
	color: var(--color-text-light);
	line-height: 1.6;
	margin: 0;
}

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

.value-card {
	background:var(--color-white);
	border-radius:var(--radius-2xl);
	padding:var(--space-3xl);
	text-align:center;
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);
	transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position:relative;
	overflow:hidden;
}

.value-card::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:4px;
	background:linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform 0.4s ease;
}

.value-card:hover {
	transform:translateY(-8px);
	box-shadow:0 20px 50px rgba(0, 0, 0, 0.1);
}

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

.value-icon {
	width:80px;
	height:80px;
	margin:0 auto var(--space-2xl);
	background:linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-100));
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-primary-600);
	transition:all 0.3s ease;
}

.value-card:hover .value-icon {
	transform:scale(1.1);
	background:linear-gradient(135deg, var(--color-primary-200), var(--color-secondary-200));
}

.value-card h3 {
	font-size:var(--text-xl);
	font-weight:700;
	color:var(--color-text);
	margin:0 0 var(--space-lg) 0;
}

.value-card p {
	color:var(--color-text-light);
	font-size:var(--text-base);
	line-height:1.6;
}

/* Team Section */
.team-section {
	padding:var(--space-5xl) 0;
	background:var(--color-primary-50);
}

.team-content {
	text-align:center;
	max-width:800px;
	margin:0 auto;
}

.team-content h2 {
	font-size:clamp(2rem, 4vw, 3rem);
	font-weight:800;
	color:var(--color-text);
	margin:0 0 var(--space-xl) 0;
}

.team-content p {
	font-size:var(--text-lg);
	color:var(--color-text-light);
	line-height:1.8;
	margin-bottom:var(--space-3xl);
}

.team-features {
	display:flex;
	justify-content:center;
	gap:var(--space-3xl);
	flex-wrap:wrap;
}

.team-feature {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	font-size:var(--text-lg);
	color:var(--color-text);
}

.feature-icon {
	font-size:var(--text-2xl);
}

/* About CTA Section */
.about-cta {
	background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
	padding:var(--space-5xl) 0;
	color:var(--color-white);
	position:relative;
}



.about-cta .cta-content {
	text-align:center;
	position:relative;
	z-index:1;
}

.about-cta h2 {
	font-size:clamp(2rem, 4vw, 3.5rem);
	font-weight:800;
	margin:0 0 var(--space-xl) 0;
}

.about-cta p {
	font-size:var(--text-xl);
	opacity:0.9;
	max-width:600px;
	margin:0 auto var(--space-3xl) auto;
}

.cta-info {
	display:flex;
	justify-content:center;
	gap:var(--space-4xl);
	margin-bottom:var(--space-3xl);
	flex-wrap:wrap;
}

.info-item {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	font-size:var(--text-lg);
}

/* Bu blok kaldırıldı - 3113 satırındaki !important tanımlarla çakışıyordu */

/* Blog Page Styles */
.blog-intro {
	text-align: center;
	margin-bottom: var(--space-4xl);
}

.blog-main-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	margin: 0 0 var(--space-md) 0;
	color: var(--color-text);
}

.blog-subtitle {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
	color: var(--color-primary-600);
	width: 100%;
	height: 200px;
	border-radius: var(--radius-lg);
	border: 2px dashed var(--color-primary-200);
	gap: var(--space-sm);
}

.image-placeholder.school-themed {
	background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-primary-50) 100%);
	color: var(--color-secondary-600);
	border-color: var(--color-secondary-200);
}

.placeholder-text {
	font-size: var(--text-sm);
	font-weight: 600;
	text-align: center;
}

.post-highlights {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	flex-wrap: wrap;
}

.highlight {
	padding: 4px 8px;
	background: var(--color-success-100);
	color: var(--color-success-700);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: 600;
}

/* Blog Page Styles */
.blog-hero {
	background:linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
	padding:var(--space-5xl) 0 var(--space-4xl) 0;
	position:relative;
}



.blog-hero .container {
	position:relative;
	z-index:1;
}

/* Featured Post Section */
.featured-post-section {
	padding:var(--space-5xl) 0;
}

.featured-post {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--space-4xl);
	align-items:center;
	background:var(--color-white);
	border-radius:var(--radius-2xl);
	overflow:hidden;
	box-shadow:0 20px 60px rgba(0, 0, 0, 0.08);
}

.featured-image {
	position:relative;
	height:400px;
	overflow:hidden;
}

.featured-image img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 0.6s ease;
}

.featured-post:hover .featured-image img {
	transform:scale(1.05);
}

.post-badge {
	position:absolute;
	top:var(--space-xl);
	left:var(--space-xl);
	background:var(--color-primary-600);
	color:var(--color-white);
	padding:var(--space-sm) var(--space-xl);
	border-radius:var(--radius-full);
	font-size:var(--text-sm);
	font-weight:600;
	box-shadow:var(--shadow-md);
}

.featured-content {
	padding:var(--space-4xl);
}

.post-meta {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	color:var(--color-text-muted);
	font-size:var(--text-sm);
	margin-bottom:var(--space-xl);
}

.meta-icon {
	font-size:var(--text-lg);
}

.meta-divider {
	color:var(--color-gray-300);
}

.featured-title {
	font-size:clamp(1.75rem, 3vw, 2.5rem);
	font-weight:800;
	line-height:1.2;
	color:var(--color-text);
	margin:0 0 var(--space-xl) 0;
}

.featured-excerpt {
	font-size:var(--text-lg);
	line-height:1.7;
	color:var(--color-text-light);
	margin-bottom:var(--space-2xl);
}

.read-more-btn {
	display:inline-flex;
	align-items:center;
	gap:var(--space-sm);
	color:var(--color-primary-600);
	font-weight:600;
	text-decoration:none;
	transition:all 0.3s ease;
}

.read-more-btn:hover {
	gap:var(--space-md);
	color:var(--color-primary-700);
}

/* Blog Posts Grid */
.blog-posts-section {
	padding:var(--space-5xl) 0;
	background:linear-gradient(to bottom, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.blog-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
	gap:var(--space-3xl);
	margin-top:var(--space-4xl);
}

.blog-card {
	background:var(--color-white);
	border-radius:var(--radius-xl);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);
	transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.blog-card:hover {
	transform:translateY(-8px);
	box-shadow:0 20px 50px rgba(0, 0, 0, 0.1);
}

.blog-card-image {
	position:relative;
	height:240px;
	overflow:hidden;
}

.blog-card-image img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 0.6s ease;
}

.blog-card:hover .blog-card-image img {
	transform:scale(1.1);
}

.card-badges {
	position:absolute;
	top:var(--space-lg);
	left:var(--space-lg);
	display:flex;
	gap:var(--space-sm);
}

.card-badge {
	padding:var(--space-xs) var(--space-md);
	border-radius:var(--radius-full);
	font-size:var(--text-xs);
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.badge-blue {
	background:var(--color-primary-100);
	color:var(--color-primary-700);
}

.badge-green {
	background:#d1fae5;
	color:#065f46;
}

.badge-purple {
	background:#e9d5ff;
	color:#6b21a8;
}

.badge-orange {
	background:#fed7aa;
	color:#9a3412;
}

.blog-card-content {
	padding:var(--space-2xl);
}

.card-title {
	font-size:var(--text-xl);
	font-weight:700;
	line-height:1.3;
	color:var(--color-text);
	margin:0 0 var(--space-lg) 0;
}

.card-excerpt {
	color:var(--color-text-light);
	font-size:var(--text-base);
	line-height:1.6;
	margin:0 0 var(--space-xl) 0;
}

.card-footer {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.card-meta {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	color:var(--color-text-muted);
	font-size:var(--text-sm);
}

.card-link {
	display:inline-flex;
	align-items:center;
	gap:var(--space-xs);
	color:var(--color-primary-600);
	font-weight:600;
	font-size:var(--text-sm);
	text-decoration:none;
	transition:all 0.3s ease;
}

.card-link:hover {
	gap:var(--space-sm);
	color:var(--color-primary-700);
}

/* Blog CTA Section */
.blog-cta {
	background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
	padding:var(--space-5xl) 0;
	color:var(--color-white);
	position:relative;
}



.blog-cta .cta-content {
	text-align:center;
	position:relative;
	z-index:1;
}

.blog-cta h2 {
	font-size:clamp(2rem, 4vw, 3.5rem);
	font-weight:800;
	margin:0 0 var(--space-xl) 0;
}

.blog-cta p {
	font-size:var(--text-xl);
	opacity:0.9;
	max-width:600px;
	margin:0 auto var(--space-3xl) auto;
}

/* Responsive adjustments */
@media (max-width:768px){
	.featured-post {
		grid-template-columns:1fr;
	}
	
	.featured-content {
		padding:var(--space-3xl);
	}
	
	.blog-grid {
		grid-template-columns:1fr;
		gap:var(--space-2xl);
	}
	
	.card-footer {
		flex-direction:column;
		align-items:flex-start;
		gap:var(--space-lg);
	}
}

/* Contact Page Styles */
.contact-hero {
	background:linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
	padding:var(--space-5xl) 0 var(--space-4xl) 0;
	position:relative;
}



.contact-hero .container {
	position:relative;
	z-index:1;
}

/* Contact Info Section */
.contact-info-section {
	padding:var(--space-5xl) 0;
}

.contact-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--space-2xl);
	align-items:start;
}

.info-cards {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--space-2xl);
}

.info-card {
	background:var(--color-white);
	border-radius:var(--radius-xl);
	padding:var(--space-3xl);
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);
	transition:all 0.3s ease;
	text-align:center;
}

.info-card:hover {
	transform:translateY(-4px);
	box-shadow:0 15px 40px rgba(0, 0, 0, 0.08);
}

.info-icon {
	width:64px;
	height:64px;
	margin:0 auto var(--space-xl);
	background:linear-gradient(135deg, var(--color-primary-100), var(--color-secondary-100));
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-primary-600);
}

.info-card h3 {
	font-size:var(--text-xl);
	font-weight:700;
	color:var(--color-text);
	margin:0 0 var(--space-lg) 0;
}

.info-card p {
	color:var(--color-text-light);
	margin:0 0 var(--space-sm) 0;
}

.contact-number {
	font-size:var(--text-2xl);
	font-weight:700;
	color:var(--color-primary-600);
}

.info-link {
	display:inline-flex;
	align-items:center;
	gap:var(--space-xs);
	color:var(--color-primary-600);
	font-weight:600;
	text-decoration:none;
	margin-top:var(--space-lg);
	transition:all 0.3s ease;
}

.info-link:hover {
	gap:var(--space-sm);
	color:var(--color-primary-700);
}

.hours-note {
	font-size:var(--text-sm);
	color:var(--color-text-muted);
	font-style:italic;
}

/* Map Container */
.map-container {
	background:var(--color-white);
	border-radius:var(--radius-xl);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);
	width: 100%;
	height: auto;
	min-height: 427px;
}

.map-header {
	padding:var(--space-2xl);
	border-bottom:1px solid var(--color-gray-200);
}

.map-header h2 {
	font-size:var(--text-2xl);
	font-weight:700;
	color:var(--color-text);
	margin:0 0 var(--space-sm) 0;
}

.map-header p {
	color:var(--color-text-light);
	margin:0;
}

.map-wrapper {
	position:relative;
	width: 304px;
	height: 200px;
	overflow:hidden;
	margin: 0 auto;
}

.map-wrapper iframe {
	width:100%;
	height:100%;
	border:0;
}

.map-actions {
	padding: 8px 12px;
	display: flex;
	gap: 8px;
	justify-content: center;
	background: var(--color-gray-50);
	border-top: 1px solid var(--color-gray-100);
}

/* Map actions responsive */
@media (max-width: 640px) {
	.map-actions {
		flex-direction: column;
		gap: 6px;
		padding: 6px 12px;
	}
	
	.map-actions .btn {
		width: 100%;
		justify-content: center;
		padding: 8px 12px;
	}
	
	/* Prevent horizontal scroll on mobile */
	html, body {
		overflow-x: hidden;
		max-width: 100vw;
		background: var(--color-white) !important;
	}
	
	.container {
		max-width: 100%;
		padding-inline: var(--space-sm);
	}
}

/* Quick Contact Section */
.quick-contact {
	background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
	padding:var(--space-5xl) 0;
	color:var(--color-white);
	position:relative;
}



.quick-contact-content {
	text-align:center;
	position:relative;
	z-index:1;
}

.quick-contact h2 {
	font-size:clamp(2rem, 4vw, 3.5rem);
	font-weight:800;
	margin:0 0 var(--space-xl) 0;
}

.quick-contact p {
	font-size:var(--text-xl);
	opacity:0.9;
	max-width:600px;
	margin:0 auto var(--space-3xl) auto;
}

.contact-methods {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:var(--space-3xl);
	max-width:900px;
	margin:0 auto;
}

.method-card {
	background:rgba(255, 255, 255, 0.1);
	backdrop-filter:blur(10px);
	border:1px solid rgba(255, 255, 255, 0.2);
	border-radius:var(--radius-xl);
	padding:var(--space-3xl);
	text-align:center;
	transition:all 0.3s ease;
}

.method-card:hover {
	background:rgba(255, 255, 255, 0.15);
	transform:translateY(-4px);
}

.method-icon {
	font-size:3rem;
	margin-bottom:var(--space-xl);
}

.method-card h3 {
	font-size:var(--text-xl);
	font-weight:700;
	margin:0 0 var(--space-md) 0;
}

.method-card p {
	font-size:var(--text-base);
	opacity:0.8;
	margin:0 0 var(--space-xl) 0;
}

.method-link {
	color:var(--color-white);
	font-weight:600;
	text-decoration:underline;
	transition:opacity 0.3s ease;
}

.method-link:hover {
	opacity:0.8;
}

/* Responsive adjustments */
@media (max-width:968px){
	.contact-grid {
		grid-template-columns:1fr;
	}
	
	.info-cards {
		grid-template-columns:1fr 1fr;
	}
	
	.contact-methods {
		grid-template-columns:1fr;
		gap:var(--space-2xl);
	}
}

@media (max-width: 640px) {
	/* About page mobile consistency - Container kenarlıklarını diğer sayfalarla tutarlı hale getir */
	/* About hero override */
	.about-hero {
		padding: var(--space-xl) 0 !important;
	}
	
	.about-hero .container {
		padding: 0 var(--space-sm) !important;
		max-width: 100%;
	}
	
	.story-section {
		padding: var(--space-lg) 0;
	}
	
	/* Container kenarlıkları diğer sayfalarla tutarlı - About sayfası özel */
	.story-section .container,
	.values-section .container,
	.team-section .container,
	.about-cta .container {
		padding: 0 var(--space-sm) !important;
		max-width: 100%;
	}
	
	/* Mobilde tek sütun grid ve merkez hizalama */
	.story-grid {
		gap: var(--space-lg) !important;
		grid-template-columns: 1fr !important;
		text-align: center !important;
	}
	
	.story-content {
		text-align: center !important;
		order: 1;
	}
	
	.story-image {
		order: 2;
		margin-top: var(--space-lg) !important;
		text-align: center !important;
	}
	
	.story-image img {
		max-width: 280px !important;
		margin: 0 auto !important;
		display: block !important;
	}
	
	.story-content .section-title {
		font-size: var(--text-xl);
		margin-bottom: var(--space-md);
	}
	
	.story-text {
		font-size: var(--text-base);
		line-height: 1.6;
		margin-bottom: var(--space-md);
	}
	
	.story-stats {
		gap: var(--space-sm);
		flex-wrap: wrap;
		justify-content: center;
		margin-top: var(--space-lg);
	}
	
	.stat-box {
		min-width: 80px;
		text-align: center;
		padding: var(--space-sm);
	}
	
	.story-image {
		margin-top: var(--space-lg);
		text-align: center;
	}
	
	.story-image img {
		max-width: 280px;
		margin: 0 auto;
	}
	
	/* Values bölümü mobil optimizasyonu */
	.values-section {
		padding: var(--space-lg) 0 !important;
	}
	
	.values-section .section-header-modern {
		text-align: center !important;
		margin-bottom: var(--space-lg) !important;
	}
	
	.values-section .section-title {
		font-size: var(--text-xl) !important;
	}
	
	.values-grid {
		gap: var(--space-md) !important;
		grid-template-columns: 1fr !important;
	}
	
	.value-card {
		padding: var(--space-lg) !important;
		text-align: center !important;
		margin: 0 auto !important;
		max-width: 320px !important;
	}
	
	.value-card .value-icon {
		margin: 0 auto var(--space-md) auto !important;
		width: 60px !important;
		height: 60px !important;
	}
	
	/* Team bölümü mobil optimizasyonu */
	.team-section {
		padding: var(--space-lg) 0 !important;
	}
	
	.team-content {
		text-align: center !important;
		max-width: 400px !important;
		margin: 0 auto !important;
	}
	
	.team-content h2 {
		font-size: var(--text-xl) !important;
		margin-bottom: var(--space-md) !important;
	}
	
	.team-content p {
		font-size: var(--text-base) !important;
		margin-bottom: var(--space-lg) !important;
		line-height: 1.6 !important;
	}
	
	.team-features {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: var(--space-sm) !important;
		max-width: 300px !important;
		margin: 0 auto !important;
	}
	
	.team-feature {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: var(--space-sm) !important;
		padding: var(--space-sm) var(--space-md) !important;
		background: var(--color-white) !important;
		border-radius: var(--radius-md) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
		border: 1px solid var(--color-gray-100) !important;
		font-size: var(--text-sm) !important;
	}
	
	/* About CTA bölümü mobil optimizasyonu */
	.about-cta {
		padding: var(--space-lg) 0 !important;
	}
	
	.about-cta .cta-content {
		text-align: center !important;
		max-width: 400px !important;
		margin: 0 auto !important;
	}
	
	.about-cta h2 {
		font-size: var(--text-xl) !important;
		margin-bottom: var(--space-md) !important;
	}
	
	.about-cta p {
		font-size: var(--text-base) !important;
		margin-bottom: var(--space-lg) !important;
		line-height: 1.6 !important;
	}
	
	.cta-info {
		flex-direction: column !important;
		gap: var(--space-md) !important;
		align-items: center !important;
		margin-bottom: var(--space-lg) !important;
	}
	
	.info-item {
		display: flex !important;
		align-items: center !important;
		gap: var(--space-sm) !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: var(--text-sm) !important;
	}
	
	.cta-buttons {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-md) !important;
		align-items: center !important;
	}
	
	.cta-buttons .btn {
		width: 100% !important;
		max-width: 280px !important;
	}
	
	.info-cards {
		grid-template-columns:1fr;
	}
	
	/* map-actions mobil tanımı kaldırıldı - ana tanımda zaten var */
}

/* School Photo Slider Styles - Mobile Optimized & Modern */
.school-image {
	grid-column: 1 / -1;
	margin-bottom: var(--space-lg);
}

.photo-slider {
	position: relative;
	width: 100%;
	height: 380px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--color-gray-100);
}

.slider-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	padding: var(--space-md);
	box-sizing: border-box;
}

.slide:first-child {
	opacity: 1;
	visibility: visible;
}

.slide.active {
	opacity: 1 !important;
	visibility: visible !important;
}

.slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	background: var(--color-white);
}

/* Slider Navigation Buttons */
.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: white;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 2;
	backdrop-filter: blur(10px);
}

.slider-btn:hover {
	background: rgba(0, 0, 0, 0.9);
	transform: translateY(-50%) scale(1.1);
}

.slider-btn:active {
	transform: translateY(-50%) scale(0.95);
}

.slider-btn.prev {
	left: 12px;
}

.slider-btn.next {
	right: 12px;
}

/* Slider Dots */
.slider-dots {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-md) 0;
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 8px 16px;
	backdrop-filter: blur(10px);
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--color-gray-400);
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	background: var(--color-primary);
	transform: scale(1.2);
}

.dot:hover {
	background: var(--color-primary-300);
	transform: scale(1.1);
}

/* Photo counter */
.photo-counter {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	backdrop-filter: blur(10px);
}

/* Modern School Card Layout */
.school-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid var(--color-gray-100);
	position: relative;
}

.school-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	border-color: var(--color-primary-200);
}

.school-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.school-item:hover::before {
	opacity: 1;
}

/* Modern School Header */
.school-header {
	padding: var(--space-lg) var(--space-lg) var(--space-md);
	background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.school-name {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-text);
	margin: var(--space-sm) 0 0 0;
	line-height: 1.3;
}

/* Modern Badge Styling */
.school-badge-wrapper {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
	margin-bottom: var(--space-xs);
}

.school-badge {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid transparent;
	transition: all 0.2s ease;
}

.badge-blue {
	background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
	color: var(--color-primary-700);
	border-color: var(--color-primary-200);
}

.badge-green {
	background: linear-gradient(135deg, #dcfce7, #f0fdf4);
	color: #166534;
	border-color: #bbf7d0;
}

.badge-purple {
	background: linear-gradient(135deg, #f3e8ff, #faf5ff);
	color: #7c3aed;
	border-color: #d8b4fe;
}

.badge-orange {
	background: linear-gradient(135deg, #fed7aa, #fef3c7);
	color: #ea580c;
	border-color: #fde68a;
}

/* Mobile-First Responsive Design */
@media (max-width: 1200px) {
	.photo-slider {
		height: 350px;
	}
}

@media (max-width: 1024px) {
	.photo-slider {
		height: 320px;
	}
	
	.schools-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
}

@media (max-width: 768px) {
	.photo-slider {
		height: 280px;
		border-radius: var(--radius-md);
	}
	
	.slide {
		padding: var(--space-sm);
	}
	
	.slider-btn {
		width: 36px;
		height: 36px;
	}
	
	.slider-btn.prev {
		left: 8px;
	}
	
	.slider-btn.next {
		right: 8px;
	}
	
	.slider-dots {
		bottom: 8px;
		padding: 6px 10px;
	}
	
	.dot {
		width: 6px;
		height: 6px;
	}
}

@media (max-width: 640px) {
	.photo-slider {
		height: 260px;
		margin: 0 -var(--space-sm);
		border-radius: var(--radius-sm);
	}
	
	.school-item {
		margin: 0 var(--space-sm);
		border-radius: var(--radius-lg);
	}
	
	.slider-btn {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 480px) {
	.photo-slider {
		height: 240px;
	}
	
	.slide {
		padding: var(--space-xs);
	}
	
	.slider-dots {
		padding: 4px 8px;
	}
	
	.dot {
		width: 5px;
		height: 5px;
	}
}

/* Photo-Focused Design - Test for Ulukent İlkokulu */
.school-item.photo-focused {
	display: flex;
	flex-direction: column;
	max-width: 400px;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.school-item.photo-focused .school-header {
	padding: var(--space-md) var(--space-md) var(--space-sm);
	text-align: center;
	background: var(--color-white);
	position: relative;
	z-index: 1;
}

.school-item.photo-focused .school-name {
	font-size: var(--text-lg);
	margin: var(--space-xs) 0 0 0;
}

.school-item.photo-focused .school-image {
	margin-bottom: 0;
}

/* Photo-focused layout fix */
.school-item.photo-focused {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 400px;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.school-item.photo-focused .school-header {
	order: 1;
	padding: var(--space-md) var(--space-md) var(--space-sm);
	text-align: center;
	background: var(--color-white);
	position: relative;
	z-index: 2;
}

.school-item.photo-focused .school-image {
	order: 2;
	margin: 0;
	position: relative;
}

.school-item.photo-focused .photo-slider {
	height: 450px;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.school-item.photo-focused .school-content {
	order: 3;
	padding: var(--space-md);
	background: var(--color-white);
	margin: 0;
	position: relative;
	z-index: 2;
}

.photo-slider.photo-main .slide {
	padding: 0;
}

.school-item.photo-focused .photo-slider.photo-main .slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 0 !important;
	display: block !important;
}

.school-item.photo-focused .school-content {
	padding: var(--space-md);
	background: var(--color-white);
	margin: 0;
}

.school-item.photo-focused .uniform-items {
	margin-bottom: var(--space-sm);
}

.school-item.photo-focused .uniform-items h4 {
	font-size: var(--text-sm);
	margin-bottom: var(--space-xs);
	text-align: center;
	color: var(--color-text-muted);
	font-weight: 500;
}

.school-item.photo-focused .items-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.school-item.photo-focused .item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 4px 8px;
	background: var(--color-gray-50);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
}

.school-item.photo-focused .item-icon {
	font-size: 12px;
}

.school-item.photo-focused .school-features {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.school-item.photo-focused .feature {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	background: var(--color-primary-50);
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-primary-100);
}

.school-item.photo-focused .school-actions {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}

.school-item.photo-focused .btn {
	padding: var(--space-sm) var(--space-lg);
	font-size: var(--text-sm);
	border-radius: var(--radius-md);
}

/* Photo-focused responsive design */
@media (max-width: 768px) {
	.school-item.photo-focused {
		max-width: 100%;
	}
	
	.school-item.photo-focused .photo-slider {
		height: 400px;
	}
}

@media (max-width: 640px) {
	.school-item.photo-focused .photo-slider {
		height: 350px;
	}
	
	.school-item.photo-focused .school-header {
		padding: var(--space-sm);
	}
	
	.school-item.photo-focused .school-content {
		padding: var(--space-sm);
		margin: 0;
	}
}

@media (max-width: 480px) {
	.school-item.photo-focused .photo-slider {
		height: 320px;
	}
	
	.school-item.photo-focused .items-grid {
		gap: 4px;
	}
	
	.school-item.photo-focused .item {
		padding: 2px 6px;
		font-size: 10px;
	}
	
	.school-item.photo-focused .feature {
		padding: 1px 6px;
		font-size: 10px;
	}
}

.photo-slider.compact .slider-btn {
	width: 32px;
	height: 32px;
	background: rgba(0, 0, 0, 0.6);
}

.photo-slider.compact .slider-btn.prev {
	left: 6px;
}

.photo-slider.compact .slider-btn.next {
	right: 6px;
}

.photo-slider.compact .slider-dots {
	bottom: 6px;
	padding: 4px 8px;
}

.photo-slider.compact .dot {
	width: 5px;
	height: 5px;
}

/* Compact responsive adjustments */
@media (max-width: 768px) {
	.photo-slider.compact {
		height: 240px;
	}
	
	.photo-slider.compact .slider-btn {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 640px) {
	.photo-slider.compact {
		height: 220px;
		margin: 0 -var(--space-xs);
	}
	
	.photo-slider.compact .slide {
		padding: var(--space-xs);
	}
}

@media (max-width: 480px) {
	.photo-slider.compact {
		height: 200px;
	}
	
	.photo-slider.compact .slider-btn {
		width: 24px;
		height: 24px;
	}
	
	.photo-slider.compact .dot {
		width: 4px;
		height: 4px;
	}
}

/* Thin Hero Sections - Apply to All Pages (about-hero kaldırıldı çakışma yüzünden) */
.school-hero,
.products-hero,
.blog-hero,
.contact-hero {
	padding: var(--space-sm) 0;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-gray-100);
}

.school-hero .container,
.products-hero .container,
.blog-hero .container,
.contact-hero .container {
	padding: 0 var(--space-md);
}

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

.breadcrumbs a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

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

.breadcrumbs svg {
	width: 12px;
	height: 12px;
	color: var(--color-gray-400);
}

.breadcrumbs span {
	color: var(--color-text);
	font-weight: 500;
}

/* Responsive thin hero - All pages */
@media (max-width: 640px) {
	.school-hero,
	.products-hero,
	.blog-hero,
	.contact-hero {
		padding: var(--space-xs) 0;
	}
	
	.school-hero .container,
	.products-hero .container,
	.blog-hero .container,
	.contact-hero .container {
		padding: 0 var(--space-sm) !important;
	}
	
	.breadcrumbs {
		font-size: var(--text-xs);
		gap: 4px;
	}
	
	.breadcrumbs svg {
		width: 10px;
		height: 10px;
	}
}

/* Compact Filter Area */
.school-filter {
	padding: var(--space-sm) 0;
	background: var(--color-gray-50);
	border-bottom: 1px solid var(--color-gray-100);
}

.filter-wrapper {
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

.filter-btn {
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--text-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-gray-200);
	background: var(--color-white);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 32px;
}

.filter-btn.active {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

.filter-btn:hover {
	background: var(--color-primary-50);
	border-color: var(--color-primary-200);
	transform: translateY(-1px);
}

.filter-btn .filter-icon {
	font-size: 14px;
}

/* Compact responsive filter */
@media (max-width: 640px) {
	.school-filter {
		padding: var(--space-xs) 0;
	}
	
	.filter-wrapper {
		gap: 4px;
	}
	
	.filter-btn {
		padding: 4px 8px;
		font-size: var(--text-xs);
		min-height: 28px;
	}
	
	.filter-btn .filter-icon {
		font-size: 12px;
	}
}

/* Compact CTA Section */
.school-cta {
	padding: var(--space-xl) 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	color: var(--color-white);
	text-align: center;
}

.cta-content h2 {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin: 0 0 var(--space-sm) 0;
	line-height: 1.2;
}

.cta-content p {
	font-size: var(--text-base);
	opacity: 0.9;
	margin: 0 0 var(--space-lg) 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.cta-features {
	display: flex;
	justify-content: center;
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}

.cta-feature {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-sm);
	font-weight: 500;
}

.cta-icon {
	font-size: 16px;
}

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

.btn-large {
	padding: var(--space-md) var(--space-xl);
	font-size: var(--text-base);
	font-weight: 600;
}

/* Compact CTA responsive */
@media (max-width: 768px) {
	.school-cta {
		padding: var(--space-lg) 0;
	}
	
	.cta-content h2 {
		font-size: var(--text-xl);
	}
	
	.cta-content p {
		font-size: var(--text-sm);
		margin-bottom: var(--space-md);
	}
	
	.cta-features {
		gap: var(--space-md);
		margin-bottom: var(--space-md);
	}
	
	.cta-feature {
		font-size: var(--text-xs);
	}
	
	.cta-icon {
		font-size: 14px;
	}
}

@media (max-width: 640px) {
	.school-cta {
		padding: var(--space-md) 0;
	}
	
	.cta-features {
		flex-direction: column;
		align-items: center;
		gap: var(--space-sm);
		margin-bottom: var(--space-md);
	}
	
	.cta-buttons {
		flex-direction: column;
		align-items: center;
		gap: var(--space-sm);
	}
	
	.btn-large {
		width: 100%;
		max-width: 280px;
		padding: var(--space-sm) var(--space-lg);
		font-size: var(--text-sm);
	}
}

/* Compact Products Page Sections */
.category-filter {
	padding: var(--space-sm) 0;
	background: var(--color-gray-50);
	border-bottom: 1px solid var(--color-gray-100);
}

.featured-schools {
	padding: var(--space-xl) 0;
	background: var(--color-gray-50);
}

.featured-schools .section-header-modern {
	margin-bottom: var(--space-lg);
}

.featured-schools .section-badge {
	padding: var(--space-xs) var(--space-md);
	font-size: var(--text-sm);
	border-radius: var(--radius-md);
}

.featured-schools .section-title {
	font-size: var(--text-2xl);
	margin: var(--space-sm) 0 0 0;
}

.modern-cta {
	padding: var(--space-xl) 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.modern-cta .cta-content h2 {
	font-size: var(--text-2xl);
	margin: 0 0 var(--space-sm) 0;
}

.modern-cta .cta-content p {
	font-size: var(--text-base);
	margin: 0 0 var(--space-lg) 0;
}

/* Compact responsive for products page */
@media (max-width: 768px) {
	.category-filter {
		padding: var(--space-xs) 0;
	}
	
	.featured-schools {
		padding: var(--space-lg) 0;
	}
	
	.featured-schools .section-title {
		font-size: var(--text-xl);
	}
	
	.modern-cta {
		padding: var(--space-lg) 0;
	}
	
	.modern-cta .cta-content h2 {
		font-size: var(--text-xl);
	}
	
	.modern-cta .cta-content p {
		font-size: var(--text-sm);
		margin-bottom: var(--space-md);
	}
}

@media (max-width: 640px) {
	.featured-schools {
		padding: var(--space-md) 0;
	}
	
	.featured-schools .section-header-modern {
		margin-bottom: var(--space-md);
	}
	
	.modern-cta {
		padding: var(--space-md) 0;
	}
}

/* Super Compact Features Section */
.uniform-features {
	padding: var(--space-lg) 0;
	background: var(--color-gray-50);
	border-top: 1px solid var(--color-gray-100);
}

.uniform-features .section-header-modern {
	margin-bottom: var(--space-md);
	text-align: center;
}

.uniform-features .section-badge {
	padding: 4px 12px;
	font-size: var(--text-xs);
	border-radius: var(--radius-sm);
	background: var(--color-secondary-100);
	color: var(--color-secondary-700);
	display: inline-block;
	margin-bottom: var(--space-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.uniform-features .section-title {
	font-size: var(--text-xl);
	margin: 0;
	line-height: 1.3;
	font-weight: 700;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	max-width: 800px;
	margin: 0 auto;
}

.feature-box {
	text-align: center;
	padding: var(--space-md);
	background: var(--color-white);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-gray-100);
	transition: all 0.2s ease;
}

.feature-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-color: var(--color-primary-200);
}

.feature-icon-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-sm) auto;
	color: var(--color-primary-600);
}

.feature-icon-circle svg {
	width: 20px;
	height: 20px;
}

.feature-box h3 {
	font-size: var(--text-base);
	font-weight: 600;
	margin: 0 0 var(--space-xs) 0;
	color: var(--color-text);
}

.feature-box p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* Super compact responsive */
@media (max-width: 768px) {
	.uniform-features {
		padding: var(--space-md) 0;
	}
	
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}
	
	.feature-box {
		padding: var(--space-sm);
	}
	
	.feature-icon-circle {
		width: 40px;
		height: 40px;
	}
	
	.feature-icon-circle svg {
		width: 16px;
		height: 16px;
	}
	
	.feature-box h3 {
		font-size: var(--text-sm);
	}
	
	.feature-box p {
		font-size: var(--text-xs);
	}
}

@media (max-width: 640px) {
	.uniform-features {
		padding: var(--space-sm) 0;
	}
	
	.uniform-features .section-title {
		font-size: var(--text-lg);
	}
	
	.features-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xs);
	}
	
	.feature-box {
		padding: var(--space-xs);
	}
	
	.feature-icon-circle {
		width: 32px;
		height: 32px;
		margin-bottom: var(--space-xs);
	}
	
	.feature-icon-circle svg {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 480px) {
	.uniform-features {
		padding: var(--space-md) 0;
		background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
		border-radius: var(--radius-lg);
		margin: var(--space-sm);
	}
	
	.uniform-features .section-header-modern {
		margin-bottom: var(--space-lg);
	}
	
	.uniform-features .section-badge {
		background: var(--color-primary);
		color: var(--color-white);
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius-full);
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	
	.uniform-features .section-title {
		font-size: var(--text-lg);
		margin-top: var(--space-sm);
		font-weight: 800;
	}
	
	.features-grid {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		max-width: 100%;
	}
	
	.feature-box {
		display: flex;
		align-items: center;
		gap: var(--space-md);
		text-align: left;
		padding: var(--space-md);
		background: var(--color-white);
		border-radius: var(--radius-md);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border: 1px solid var(--color-gray-100);
	}
	
	.feature-icon-circle {
		width: 40px;
		height: 40px;
		background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	
	.feature-icon-circle svg {
		width: 20px;
		height: 20px;
		color: var(--color-white);
	}
	
	.feature-box h3 {
		font-size: var(--text-sm);
		font-weight: 700;
		margin: 0 0 2px 0;
		color: var(--color-text);
	}
	
	.feature-box p {
		font-size: var(--text-xs);
		color: var(--color-text-muted);
		margin: 0;
		line-height: 1.4;
	}
	
	.feature-icon-circle {
		margin: 0;
		flex-shrink: 0;
	}
	
	.feature-box h3 {
		margin-bottom: 2px;
	}
}

/* Compact Homepage Sections */
.modern-intro {
	padding: var(--space-xl) 0;
	background: var(--color-white);
}

.modern-intro .intro-badge {
	padding: var(--space-xs) var(--space-md);
	font-size: var(--text-sm);
	border-radius: var(--radius-md);
	background: var(--color-primary-100);
	color: var(--color-primary-700);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.modern-features {
	padding: var(--space-xl) 0;
	background: var(--color-gray-50);
}

.features-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	max-width: 900px;
	margin: 0 auto;
}

.feature-item {
	text-align: center;
	padding: var(--space-lg);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
}

.feature-item h3 {
	color: var(--color-text) !important;
	font-weight: 700;
	margin: var(--space-sm) 0 var(--space-xs) 0;
	font-size: var(--text-lg);
}

.feature-item p {
	color: var(--color-text) !important;
	font-size: var(--text-base);
	line-height: 1.5;
	margin: 0;
}

.feature-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cta-band {
	padding: var(--space-2xl) 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	color: var(--color-white);
	text-align: center;
	position: relative;
}

.cta-band .container {
	max-width: 800px;
	margin: 0 auto;
}

.cta-band h2 {
	font-size: var(--text-3xl);
	font-weight: 800;
	margin: 0 0 var(--space-md) 0;
	line-height: 1.1;
	text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cta-band p {
	font-size: var(--text-lg);
	opacity: 0.95;
	margin: 0 0 var(--space-xl) 0;
	line-height: 1.5;
	font-weight: 500;
}

/* Compact homepage responsive */
@media (max-width: 768px) {
	.modern-intro {
		padding: var(--space-lg) 0;
	}
	
	.modern-features {
		padding: var(--space-lg) 0;
	}
	
	.features-wrapper {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	
	.feature-item {
		padding: var(--space-md);
	}
	
	.feature-item h3 {
		font-size: var(--text-base);
		color: var(--color-text) !important;
	}
	
	.feature-item p {
		font-size: var(--text-sm);
		color: var(--color-text) !important;
	}
	
	.cta-band {
		padding: var(--space-xl) 0;
	}
	
	.cta-band h2 {
		font-size: var(--text-2xl);
		margin-bottom: var(--space-sm);
	}
	
	.cta-band p {
		font-size: var(--text-base);
		margin-bottom: var(--space-lg);
	}
}

@media (max-width: 640px) {
	.modern-intro {
		padding: var(--space-md) 0;
	}
	
	.modern-features {
		padding: var(--space-md) 0;
	}
	
	.feature-item {
		padding: var(--space-sm);
	}
	
	.feature-item h3 {
		font-size: var(--text-sm);
		color: var(--color-text) !important;
	}
	
	.feature-item p {
		font-size: var(--text-xs);
		color: var(--color-text) !important;
	}
	
	.cta-band {
		padding: var(--space-lg) 0;
	}
	
	.cta-band h2 {
		font-size: var(--text-xl);
		margin-bottom: var(--space-xs);
	}
	
	.cta-band p {
		font-size: var(--text-sm);
		margin-bottom: var(--space-md);
	}
}

/* Super Compact Footer Redesign */
.site-footer {
	background: var(--color-gray-800) !important;
	color: var(--color-gray-300) !important;
	padding: var(--space-md) 0 var(--space-sm) 0 !important;
	border-top: 1px solid var(--color-gray-700);
}

.footer-grid {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr !important;
	gap: var(--space-md) !important;
	margin-bottom: var(--space-sm) !important;
}

.footer-grid h3 {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-white);
	margin: 0 0 var(--space-xs) 0;
}

.footer-grid h4 {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-white);
	margin: 0 0 var(--space-xs) 0;
}

.footer-grid p {
	font-size: var(--text-sm);
	line-height: 1.4;
	margin: 0 0 4px 0;
	color: var(--color-gray-300);
}

.footer-grid a {
	color: var(--color-primary-300);
	text-decoration: none;
	transition: color 0.2s ease;
}

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

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 8px;
}

.footer-links li {
	margin-bottom: 0;
}

.footer-links a {
	font-size: var(--text-sm);
	color: var(--color-gray-300);
	text-decoration: none;
	transition: color 0.2s ease;
	display: block;
	padding: 1px 0;
}

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

.footer-bottom {
	border-top: 1px solid var(--color-gray-700);
	padding-top: var(--space-xs) !important;
	text-align: center;
}

.footer-bottom p {
	font-size: var(--text-xs) !important;
	color: var(--color-gray-400) !important;
	margin: 0 !important;
}

/* Compact footer responsive */
@media (max-width: 768px) {
	.site-footer {
		padding: var(--space-sm) 0 var(--space-xs) 0 !important;
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: var(--space-sm) !important;
		margin-bottom: var(--space-xs) !important;
	}
	
	.footer-grid > div:first-child {
		grid-column: 1 / -1;
		text-align: center;
		margin-bottom: var(--space-xs);
	}
}

@media (max-width: 640px) {
	.site-footer {
		padding: var(--space-xs) 0 !important;
	}
	
	.footer-grid {
		grid-template-columns: 1fr !important;
		gap: var(--space-xs) !important;
		text-align: center;
		margin-bottom: 4px !important;
	}
	
	.footer-grid h3,
	.footer-grid h4 {
		font-size: var(--text-sm) !important;
		margin-bottom: 2px !important;
	}
	
	.footer-grid p {
		font-size: var(--text-xs) !important;
		margin-bottom: 1px !important;
	}
	
	.footer-links {
		grid-template-columns: 1fr !important;
		gap: 1px !important;
	}
	
	.footer-links a {
		font-size: var(--text-xs) !important;
		padding: 0 !important;
	}
}

/* Compact Contact Page Design */
.contact-info-section {
	padding: var(--space-lg) 0;
	background: var(--color-white);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}

.map-container {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.map-header {
	padding: var(--space-md);
	text-align: center;
	background: var(--color-gray-50);
	border-bottom: 1px solid var(--color-gray-100);
}

.map-header h2 {
	font-size: var(--text-lg);
	margin: 0 0 var(--space-xs) 0;
	color: var(--color-text);
}

.map-header p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

.map-wrapper iframe {
	width: 100%;
	height: 300px;
	border: 0;
}

/* Bu blok kaldırıldı - ana map-actions tanımı ile çakışıyordu */

/* Contact Methods Compact */
.contact-methods-compact {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	width: 100%;
	height: auto;
	min-height: 427px;
}

.contact-methods-compact h2 {
	font-size: var(--text-xl);
	text-align: center;
	margin: 0 0 var(--space-md) 0;
	color: var(--color-text);
}

.contact-methods-compact p {
	font-size: var(--text-sm);
	text-align: center;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-lg) 0;
}

.contact-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.contact-card {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	background: var(--color-gray-50);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-gray-100);
	transition: all 0.2s ease;
}

.contact-card:hover {
	background: var(--color-primary-50);
	border-color: var(--color-primary-200);
	transform: translateY(-1px);
}

.contact-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.contact-info h3 {
	font-size: var(--text-base);
	font-weight: 600;
	margin: 0 0 2px 0;
	color: var(--color-text);
}

.contact-info p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-xs) 0;
}

.contact-info a {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.contact-info a:hover {
	color: var(--color-primary-600);
	text-decoration: underline;
}

/* Compact contact responsive */
@media (max-width: 768px) {
	.contact-info-section {
		padding: var(--space-md) 0;
	}
	
	.contact-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
	
	.map-wrapper iframe {
		height: 250px;
	}
	
	.contact-methods-compact {
		padding: var(--space-md);
	}
	
	.contact-card {
		padding: var(--space-sm);
	}
	
	.contact-icon {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}

@media (max-width: 640px) {
	.contact-info-section {
		padding: var(--space-sm) 0;
	}
	
	.contact-grid {
		gap: var(--space-md);
	}
	
	.map-wrapper iframe {
		height: 200px;
	}
	
	.contact-methods-compact {
		padding: var(--space-sm);
	}
	
	.contact-methods-compact h2 {
		font-size: var(--text-lg);
	}
	
	.contact-card {
		padding: var(--space-xs);
		gap: var(--space-sm);
	}
	
	.contact-icon {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}
	
	/* Bu map-actions tanımı da kaldırıldı - ana tanımda zaten var */
}

/* Compact Elite Header Redesign */
.site-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
	background: rgba(255,255,255,0.98) !important;
	backdrop-filter: saturate(180%) blur(12px) !important;
	border-bottom: 1px solid var(--color-gray-100) !important;
	padding: 0 !important;
}

.site-header.scrolled {
	background: rgba(255,255,255,0.99) !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
	border-bottom-color: var(--color-gray-200) !important;
}

.header-inner {
	display: grid !important;
	grid-template-columns: auto 1fr auto !important;
	align-items: center !important;
	gap: var(--space-lg) !important;
	min-height: 60px !important;
	padding: 0 var(--space-lg) !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
}

.site-header.scrolled .header-inner {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 var(--space-lg) !important;
}

.brand img {
	width: 140px !important;
	height: auto !important;
	max-height: 48px !important;
}

.nav ul {
	display: flex !important;
	gap: var(--space-md) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.nav a {
	font-size: var(--text-sm) !important;
	font-weight: 500 !important;
	color: var(--color-text) !important;
	text-decoration: none !important;
	padding: var(--space-xs) var(--space-sm) !important;
	border-radius: var(--radius-sm) !important;
	transition: all 0.2s ease !important;
}

.nav a:hover,
.nav a.active {
	background: var(--color-primary-50) !important;
	color: var(--color-primary-700) !important;
}

.nav-cta {
	display: flex !important;
	gap: var(--space-sm) !important;
	align-items: center !important;
}

.nav-cta .btn {
	padding: var(--space-sm) var(--space-lg) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	border-radius: 25px !important;
	border: none !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--space-xs) !important;
	text-decoration: none !important;
	position: relative !important;
	overflow: hidden !important;
}

.nav-cta .btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s ease;
}

.nav-cta .btn:hover::before {
	left: 100%;
}

.nav-cta .btn-secondary {
	background: linear-gradient(135deg, #25D366, #128C7E) !important;
	color: white !important;
	box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
}

.nav-cta .btn-secondary:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
}

.nav-cta .btn-primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-600)) !important;
	color: white !important;
	box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3) !important;
}

.nav-cta .btn-primary:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.4) !important;
}

/* Compact header responsive */
@media (max-width: 899px) {
	.header-inner {
		grid-template-columns: auto 1fr !important;
		gap: var(--space-md) !important;
		min-height: 56px !important;
		padding: 0 var(--space-md) !important;
	}
	
	.brand img {
		width: 120px !important;
		max-height: 42px !important;
	}
	
	.nav-cta .btn {
		padding: var(--space-xs) var(--space-md) !important;
		font-size: var(--text-xs) !important;
		border-radius: 20px !important;
	}
}

@media (max-width: 640px) {
	.header-inner {
		min-height: 52px !important;
		padding: 0 var(--space-sm) !important;
	}
	
	.brand img {
		width: 100px !important;
		max-height: 36px !important;
	}
	
	.nav-cta .btn {
		padding: 4px var(--space-sm) !important;
		font-size: 10px !important;
		border-radius: 16px !important;
	}
}

/* Compact About Values Section */
.values-section {
	padding: var(--space-lg) 0;
	background: var(--color-gray-50);
}

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

.values-section .section-badge {
	padding: 4px 12px;
	font-size: var(--text-xs);
	border-radius: var(--radius-sm);
	background: var(--color-secondary-100);
	color: var(--color-secondary-700);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--space-xs);
	display: inline-block;
}

.values-section .section-title {
	font-size: var(--text-xl);
	margin: 0;
	line-height: 1.3;
	font-weight: 700;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	max-width: 900px;
	margin: 0 auto;
}

.value-card {
	background: var(--color-white);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border: 1px solid var(--color-gray-100);
	transition: all 0.2s ease;
}

.value-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	border-color: var(--color-primary-200);
}

.value-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-sm) auto;
	color: var(--color-primary-600);
}

.value-icon svg {
	width: 20px;
	height: 20px;
}

.value-card h3 {
	font-size: var(--text-base);
	font-weight: 600;
	margin: 0 0 var(--space-xs) 0;
	color: var(--color-text);
}

.value-card p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* Compact values responsive */
@media (max-width: 768px) {
	.values-section {
		padding: var(--space-md) 0;
	}
	
	.values-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}
	
	.value-card {
		padding: var(--space-sm);
	}
	
	.value-icon {
		width: 40px;
		height: 40px;
	}
	
	.value-icon svg {
		width: 16px;
		height: 16px;
	}
	
	.value-card h3 {
		font-size: var(--text-sm);
	}
	
	.value-card p {
		font-size: var(--text-xs);
	}
}

@media (max-width: 640px) {
	.values-section {
		padding: var(--space-sm) 0;
	}
	
	.values-section .section-title {
		font-size: var(--text-lg);
	}
	
	.values-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xs);
	}
	
	.value-card {
		padding: var(--space-xs);
	}
	
	.value-icon {
		width: 32px;
		height: 32px;
		margin-bottom: var(--space-xs);
	}
	
	.value-icon svg {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 480px) {
	.values-section {
		padding: var(--space-xs) 0;
	}
	
	.values-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xs);
		max-width: 300px;
	}
	
	.value-card {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		text-align: left;
		padding: var(--space-xs);
	}
	
	.value-icon {
		margin: 0;
		flex-shrink: 0;
	}
	
	.value-card h3 {
		margin-bottom: 2px;
	}
}

/* Modern Products Page Redesign - No Images Needed */
.products-section {
	padding: var(--space-xl) 0;
	background: var(--color-white);
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-lg);
	max-width: 1200px;
	margin: 0 auto;
}

/* Modern Product Card - Icon Based */
.product-card-modern {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--color-gray-100);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.product-card-modern::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

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

.product-card-modern:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	border-color: var(--color-primary-200);
}

/* Product Header with Large Icon */
.product-header {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.product-icon-large {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-md) auto;
	font-size: 32px;
	color: var(--color-primary-600);
	position: relative;
}

.product-icon-large::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.product-card-modern:hover .product-icon-large::after {
	opacity: 0.1;
}

.product-category {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-primary-600);
	margin-bottom: var(--space-xs);
}

.product-title {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 var(--space-sm) 0;
	line-height: 1.3;
}

.product-description {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.5;
	margin-bottom: var(--space-lg);
}

/* Feature Tags */
.product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-lg);
	justify-content: center;
}

.product-tag {
	padding: 4px 8px;
	background: var(--color-gray-100);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	border: 1px solid var(--color-gray-200);
	transition: all 0.2s ease;
}

.product-tag:hover {
	background: var(--color-primary-50);
	border-color: var(--color-primary-200);
	color: var(--color-primary-700);
}

/* Age/Size Info */
.product-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-lg);
	padding: var(--space-sm);
	background: var(--color-gray-50);
	border-radius: var(--radius-md);
}

.info-item {
	text-align: center;
	flex: 1;
}

.info-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-bottom: 2px;
	text-transform: uppercase;
	font-weight: 600;
}

.info-value {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
}

/* Action Button */
.product-action {
	text-align: center;
}

.product-action .btn {
	width: 100%;
	padding: var(--space-md);
	font-weight: 600;
	border-radius: var(--radius-lg);
	transition: all 0.3s ease;
}

/* Responsive products */
@media (max-width: 768px) {
	.products-section {
		padding: var(--space-lg) 0;
	}
	
	.products-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	
	.product-card-modern {
		padding: var(--space-lg);
	}
	
	.product-icon-large {
		width: 64px;
		height: 64px;
		font-size: 24px;
	}
	
	.product-title {
		font-size: var(--text-lg);
	}
}

@media (max-width: 640px) {
	.products-section {
		padding: var(--space-md) 0;
	}
	
	.product-card-modern {
		padding: var(--space-md);
	}
	
	.product-icon-large {
		width: 56px;
		height: 56px;
		font-size: 20px;
	}
	
	.product-tags {
		justify-content: flex-start;
	}
	
	.product-info {
		flex-direction: column;
		gap: var(--space-xs);
	}
}

/* Additional Styles for New Products Page */
.schools-showcase {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--color-gray-100);
}

.school-badge-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
	margin-bottom: var(--space-lg);
}

.school-mini-badge {
	padding: var(--space-xs) var(--space-md);
	background: var(--color-primary-50);
	border: 1px solid var(--color-primary-200);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--color-primary-700);
	font-weight: 500;
	transition: all 0.2s ease;
}

.school-mini-badge:hover {
	background: var(--color-primary-100);
	transform: translateY(-1px);
}

.cta-stats {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: var(--space-2xl);
	margin: var(--space-xl) 0;
}

.stat-item {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.stat-number {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--color-white);
	line-height: 1;
	text-shadow: 0 2px 4px rgba(0,0,0,0.1);
	display: block;
}

.stat-label {
	font-size: var(--text-sm);
	opacity: 0.9;
	margin-top: var(--space-xs);
	display: block;
	white-space: nowrap;
}

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

/* Responsive for new elements */
@media (max-width: 768px) {
	.schools-showcase {
		padding: var(--space-lg);
	}
	
	.school-badge-list {
		gap: var(--space-xs);
	}
	
	.school-mini-badge {
		font-size: var(--text-xs);
		padding: 4px 8px;
	}
	
	.cta-stats {
		gap: var(--space-lg);
		flex-wrap: wrap;
	}
	
	.stat-item {
		min-width: 100px;
	}
	
	.stat-number {
		font-size: var(--text-2xl);
	}
	
	.stat-label {
		font-size: var(--text-xs);
	}
}

@media (max-width: 640px) {
	.schools-showcase {
		padding: var(--space-md);
	}
	
	.school-badge-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xs);
		justify-items: center;
		align-items: center;
	}
	
	.school-mini-badge {
		width: 100%;
		text-align: center;
		font-size: 11px;
		padding: 6px 4px;
		line-height: 1.2;
	}
	
	.cta-stats {
		gap: var(--space-md);
		flex-direction: row;
		justify-content: space-around;
	}
	
	.stat-item {
		min-width: 80px;
	}
	
	.cta-buttons {
		flex-direction: column;
		align-items: center;
	}
	
	.cta-buttons .btn {
		width: 100%;
		max-width: 280px;
	}
}

/* Improved Photo Modal & Gallery System */

/* Desktop Modal (Not Full Screen) */
.photo-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
	padding: var(--space-xl);
	box-sizing: border-box;
}

.photo-lightbox.active {
	opacity: 1;
	visibility: visible;
}

.lightbox-content {
	position: relative;
	max-width: 800px;
	max-height: 600px;
	width: 90%;
	background: var(--color-white);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
}

.lightbox-header {
	padding: var(--space-md) var(--space-lg);
	background: var(--color-gray-50);
	border-bottom: 1px solid var(--color-gray-200);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.lightbox-title {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}

.lightbox-close {
	width: 32px;
	height: 32px;
	background: var(--color-gray-100);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	color: var(--color-text);
}

.lightbox-close:hover {
	background: var(--color-gray-200);
	transform: scale(1.1);
}

.lightbox-image-container {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gray-50);
	min-height: 400px;
}

.lightbox-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: all 0.3s ease;
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	color: var(--color-text);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lightbox-nav:hover {
	background: var(--color-white);
	transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
	left: var(--space-md);
}

.lightbox-next {
	right: var(--space-md);
}

.lightbox-footer {
	padding: var(--space-md) var(--space-lg);
	background: var(--color-white);
	border-top: 1px solid var(--color-gray-200);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.lightbox-counter {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-weight: 500;
}

.lightbox-dots {
	display: flex;
	gap: 6px;
}

.lightbox-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-gray-300);
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lightbox-dot.active {
	background: var(--color-primary);
	transform: scale(1.2);
}

/* Enhanced Slider for Lightbox Integration */
.photo-slider.photo-main .slide img {
	cursor: pointer;
	transition: all 0.3s ease;
}

.photo-slider.photo-main .slide img:hover {
	transform: scale(1.02);
	filter: brightness(1.1);
}

/* Mobile Improved Gallery */
.mobile-gallery {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.mobile-gallery.active {
	opacity: 1;
	visibility: visible;
}

.mobile-gallery-header {
	height: 60px;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-md);
	flex-shrink: 0;
}

.mobile-gallery-title {
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: 600;
}

.mobile-gallery-close {
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	color: var(--color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.mobile-gallery-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.mobile-gallery-content {
	flex: 1;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.mobile-gallery-slider {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.mobile-gallery-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-gallery-slide {
	min-width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	box-sizing: border-box;
}

.mobile-gallery-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--radius-md);
}

.mobile-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	color: var(--color-text);
	z-index: 3;
}

.mobile-gallery-nav:hover {
	background: var(--color-white);
	transform: translateY(-50%) scale(1.1);
}

.mobile-gallery-prev {
	left: var(--space-md);
}

.mobile-gallery-next {
	right: var(--space-md);
}

.mobile-gallery-footer {
	height: 80px;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mobile-gallery-dots {
	display: flex;
	gap: 12px;
}

.mobile-gallery-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.mobile-gallery-dot.active {
	background: var(--color-white);
	transform: scale(1.3);
}

/* Touch gesture improvements */
.mobile-gallery-slide {
	touch-action: pan-x;
	user-select: none;
}

/* Responsive photo modal */
@media (max-width: 768px) {
	.lightbox-content {
		max-width: 95%;
		max-height: 80vh;
	}
	
	.lightbox-image-container {
		min-height: 300px;
	}
	
	.lightbox-nav {
		width: 40px;
		height: 40px;
	}
	
	.lightbox-header {
		padding: var(--space-sm) var(--space-md);
	}
	
	.lightbox-footer {
		padding: var(--space-sm) var(--space-md);
	}
}

@media (max-width: 640px) {
	/* Use mobile gallery on small screens */
	.photo-lightbox {
		display: none;
	}
	
	.mobile-gallery-nav {
		width: 44px;
		height: 44px;
	}
	
	.mobile-gallery-dots {
		gap: 10px;
	}
	
	.mobile-gallery-dot {
		width: 10px;
		height: 10px;
	}
}

/* Comprehensive Mobile Optimization */

/* Base mobile improvements */
@media (max-width: 768px) {
	/* Container padding optimization */
	.container {
		padding-left: var(--space-md);
		padding-right: var(--space-md);
	}
	
	/* Typography mobile scaling */
	h1 {
		font-size: var(--text-2xl);
		line-height: 1.2;
	}
	
	h2 {
		font-size: var(--text-xl);
		line-height: 1.3;
	}
	
	/* Button mobile optimization */
	.btn {
		padding: var(--space-sm) var(--space-lg);
		font-size: var(--text-sm);
		min-height: 44px; /* Touch target */
	}
	
	.btn-large {
		padding: var(--space-md) var(--space-xl);
		font-size: var(--text-base);
		min-height: 48px;
	}
}

@media (max-width: 640px) {
	/* Ultra-mobile optimization - Ana container padding'i */
	.container {
		padding-left: var(--space-sm) !important;
		padding-right: var(--space-sm) !important;
	}
	
	/* Compact typography */
	h1 {
		font-size: var(--text-xl);
	}
	
	h2 {
		font-size: var(--text-lg);
	}
	
	/* Touch-friendly buttons */
	.btn {
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
		display: block;
		text-align: center;
	}
	
	/* Grid mobile optimization */
	.schools-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	
	.products-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	
	.features-grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}
}

@media (max-width: 480px) {
	/* Extra small mobile */
	.container {
		padding-left: var(--space-xs);
		padding-right: var(--space-xs);
	}
	
	/* Minimal spacing */
	section {
		padding-top: var(--space-md);
		padding-bottom: var(--space-md);
	}
	
	/* Compact elements */
	.photo-slider.photo-main {
		height: 240px;
	}
	
	.product-card-modern {
		padding: var(--space-sm);
	}
	
	.school-item.photo-focused {
		margin: 0 var(--space-xs);
	}
}

/* Touch and accessibility improvements */
@media (hover: none) and (pointer: coarse) {
	/* Touch device optimizations */
	.btn:hover {
		transform: none; /* Disable hover transforms on touch */
	}
	
	.photo-slider.photo-main .slide img:hover {
		transform: none;
		filter: none;
	}
	
	/* Larger touch targets */
	.slider-btn {
		width: 48px;
		height: 48px;
	}
	
	.dot {
		width: 12px;
		height: 12px;
	}
}

/* High DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.brand img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
	.photo-slider.photo-main {
		height: 300px;
	}
	
	.mobile-gallery-slide {
		padding: 40px var(--space-sm) 60px;
	}
}

/* Products CTA Section */
.products-cta {
	padding: var(--space-xl) 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	color: var(--color-white);
	text-align: center;
}

.products-cta .cta-content h2 {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin: 0 0 var(--space-sm) 0;
	line-height: 1.2;
}

.products-cta .cta-content p {
	font-size: var(--text-base);
	opacity: 0.9;
	margin: 0 0 var(--space-lg) 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.products-cta .cta-buttons {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.products-cta {
		padding: var(--space-lg) 0;
	}
	
	.products-cta .cta-content h2 {
		font-size: var(--text-xl);
	}
	
	.products-cta .cta-content p {
		font-size: var(--text-sm);
		margin-bottom: var(--space-md);
	}
}

@media (max-width: 640px) {
	.products-cta {
		padding: var(--space-md) 0;
	}
	
	.products-cta .cta-buttons {
		flex-direction: column;
		align-items: center;
		gap: var(--space-sm);
	}
	
	.products-cta .cta-buttons .btn {
		width: 100%;
		max-width: 280px;
	}
}

/* css end */