:root{--primary:#006666;--brown:#4A2C17;--text:#333;--bg:#fff;--shadow:0 10px 30px rgba(0,0,0,.08);--radius:16px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Cairo','Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;position:relative}
.container{width:min(1120px,92%);margin:0 auto}

/* Professional Header */
.site-header{
	position: sticky;
	top: 0;
	background: var(--header-bg);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--header-border);
	box-shadow: 
		0 2px 20px rgba(0, 102, 102, 0.08),
		0 1px 3px rgba(0, 0, 0, 0.05);
	z-index: 50;
	transition: all 0.3s ease;
}

.site-header .container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
}

.logo-wrap{
	display: flex;
	align-items: center;
	gap: 14px;
	transition: transform 0.3s ease;
}

.logo-wrap:hover{
	transform: translateY(-1px);
}

.logo-icon{
	display: grid;
	place-items: center;
	filter: 
		drop-shadow(0 4px 12px rgba(0, 102, 102, 0.4))
		drop-shadow(0 2px 4px rgba(0, 102, 102, 0.2));
	transition: filter 0.3s ease;
}

.logo-wrap:hover .logo-icon{
	filter: 
		drop-shadow(0 6px 16px rgba(0, 102, 102, 0.6))
		drop-shadow(0 3px 6px rgba(0, 102, 102, 0.3));
}

.brand-name{
	font-weight: 800;
	font-size: 24px;
	letter-spacing: 0.5px;
	color: var(--text);
	position: relative;
	background: linear-gradient(45deg, var(--text), var(--primary), var(--brown));
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: brandShimmer 4s ease-in-out infinite;
}

.brand-name::after{
	content: "";
	position: absolute;
	inset: auto 0 -8px 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--brown), var(--primary));
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.6s ease;
	border-radius: 2px;
}

.logo-wrap:hover .brand-name::after{
	transform: scaleX(1);
	transform-origin: left;
}

@keyframes brandShimmer {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Navigation Menu */
.nav-menu{
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item{
	position: relative;
}

.nav-link{
	text-decoration: none;
	color: var(--text);
	font-weight: 500;
	font-size: 16px;
	padding: 8px 16px;
	border-radius: 8px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

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

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

.nav-link:hover{
	color: var(--primary);
	background: rgba(0, 102, 102, 0.05);
	transform: translateY(-1px);
}

/* CTA Button in Header */
.header-cta{
	display: flex;
	align-items: center;
	gap: 12px;
}

.header-btn{
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
}

.header-btn-primary{
	background: var(--primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 102, 102, 0.3);
}

.header-btn-primary:hover{
	background: rgba(0, 102, 102, 0.9);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 102, 102, 0.4);
}

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

[data-theme="dark"] .header-btn-outline{
	color: #e7eef7;
	border-color: rgba(255,255,255,0.28);
}

.header-btn-outline:hover{
	background: var(--primary);
	color: #fff;
	transform: translateY(-1px);
}

.hero{position:relative;padding:64px 0 32px;background:linear-gradient(180deg,#f7fffe,transparent)}
.hero-bg{position:absolute;inset:0;background:radial-gradient(1200px 400px at 20% -10%,rgba(0,102,102,.3),transparent),radial-gradient(1000px 300px at 90% 10%,rgba(0,102,102,.22),transparent);pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero-media{perspective:1000px}
.hero-img{width:100%;max-width:520px;border-radius:20px;box-shadow:var(--shadow);transform:translateZ(0);will-change:transform}
.hero-title{margin:0 0 10px;font-size:42px;line-height:1.25}
.hero-title .light{display:block;font-weight:400;color:#444;margin-bottom:6px}

/* Enhanced Typing Effect */
.typing-container {
	position: relative;
	display: inline-block;
}

.typing {
	display: inline-block;
	min-width: 8ch;
	white-space: nowrap;
	position: relative;
	background: linear-gradient(45deg, #006666, #20B2AA, #006666);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: typingGradient 3s ease-in-out infinite;
	font-weight: 800;
	letter-spacing: 1px;
}

.typing-cursor {
	position: absolute;
	right: -8px;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, #006666, #20B2AA);
	animation: cursorBlink 1s infinite;
	border-radius: 2px;
}

.typing-glow {
	position: absolute;
	top: -5px;
	left: -10px;
	right: -10px;
	bottom: -5px;
	background: linear-gradient(45deg, 
		rgba(0, 102, 102, 0.1), 
		rgba(32, 178, 170, 0.15), 
		rgba(0, 102, 102, 0.1)
	);
	border-radius: 15px;
	opacity: 0;
	animation: typingGlow 2s ease-in-out infinite;
	z-index: -1;
	filter: blur(5px);
}

@keyframes typingGradient {
	0%, 100% { 
		background-position: 0% 50%;
	}
	50% { 
		background-position: 100% 50%;
	}
}

@keyframes cursorBlink {
	0%, 50% { 
		opacity: 1;
		transform: scaleY(1);
	}
	51%, 100% { 
		opacity: 0;
		transform: scaleY(0.3);
	}
}

@keyframes typingGlow {
	0%, 100% { 
		opacity: 0;
		transform: scale(0.8);
	}
	50% { 
		opacity: 0.6;
		transform: scale(1.1);
	}
}

/* Responsive Design for Typing Effect */
@media (max-width: 768px) {
	.typing {
		font-size: 36px;
		letter-spacing: 0.5px;
	}
	
	.typing-cursor {
		width: 2px;
		right: -6px;
	}
	
	.typing-glow {
		top: -3px;
		left: -8px;
		right: -8px;
		bottom: -3px;
		filter: blur(3px);
	}
}

@media (max-width: 480px) {
	.typing {
		font-size: 28px;
		letter-spacing: 0.3px;
	}
	
	.typing-cursor {
		width: 2px;
		right: -4px;
	}
	
	.typing-glow {
		top: -2px;
		left: -6px;
		right: -6px;
		bottom: -2px;
		filter: blur(2px);
	}
}
.hero-sub{margin:0 0 20px;color:#555}
.cta-group{display:flex;gap:12px;flex-wrap:wrap}

.btn{
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 14px 24px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 0.95rem;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
	letter-spacing: 0.5px;
	min-width: 140px;
	text-align: center;
}

.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.6s ease;
}

.btn:hover::before {
	left: 100%;
}

.btn-primary{
	background: linear-gradient(135deg, var(--primary), #20B2AA);
	box-shadow: 0 6px 20px rgba(0, 102, 102, 0.3);
	border: 2px solid transparent;
}

.btn-primary:hover{
	background: linear-gradient(135deg, #004d4d, var(--primary));
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 30px rgba(0, 102, 102, 0.4);
}

.btn-brown{
	background: linear-gradient(135deg, var(--brown), #8B4513);
	box-shadow: 0 6px 20px rgba(74, 44, 23, 0.3);
	border: 2px solid transparent;
}

.btn-brown:hover{
	background: linear-gradient(135deg, #3A1F0F, var(--brown));
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 30px rgba(74, 44, 23, 0.4);
}

.btn:active{
	transform: translateY(-1px) scale(1.02);
	transition: all 0.1s ease;
}

/* تأثيرات الأيقونات للأزرار */
.btn svg {
	transition: transform 0.3s ease;
}

.btn:hover svg {
	transform: scale(1.1);
}

.btn-primary:hover svg {
	transform: translateX(2px) scale(1.1);
}

.btn-brown:hover svg {
	transform: translateX(-2px) scale(1.1);
}

/* Session Code Section Enhanced */
.session-code {
	padding: 80px 0;
	background: 
		linear-gradient(135deg, 
			rgba(0, 102, 102, 0.05) 0%, 
			rgba(255, 255, 255, 0.9) 50%,
			rgba(32, 178, 170, 0.03) 100%
		);
	position: relative;
	overflow: hidden;
}

.session-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.session-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		radial-gradient(circle at 40% 40%, rgba(0, 102, 102, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 60% 60%, rgba(32, 178, 170, 0.06) 0%, transparent 50%);
	animation: sessionPattern 20s ease-in-out infinite;
}

@keyframes sessionPattern {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(0.3deg); }
}

.session-card {
	background: 
		linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
	backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 102, 102, 0.1);
	border-radius: 24px;
	box-shadow: 
		0 25px 50px rgba(0, 102, 102, 0.15),
		0 10px 20px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	padding: 40px;
	text-align: center;
	position: relative;
	z-index: 2;
}

.session-header {
	margin-bottom: 30px;
}

.session-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, var(--primary), #20B2AA);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	box-shadow: 0 8px 20px rgba(0, 102, 102, 0.3);
}

.session-description {
	font-size: 1.1rem;
	color: #666;
	margin: 10px 0 0 0;
	line-height: 1.6;
}

.code-row {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.code-input {
	flex: 1;
	min-width: 250px;
	border: 2px solid rgba(0, 102, 102, 0.1);
	border-radius: 16px;
	padding: 16px 20px;
	font-size: 1.1rem;
	outline: none;
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
}

.code-input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(0, 102, 102, 0.2);
	background: rgba(255, 255, 255, 0.95);
}

.btn-go {
	min-width: 160px;
}

.session-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
	padding: 15px 20px;
	background: rgba(0, 102, 102, 0.05);
	border-radius: 12px;
	border: 1px solid rgba(0, 102, 102, 0.1);
	color: #006666;
	font-size: 0.95rem;
	font-weight: 500;
}

/* Modern Elegant Waves Section */
.waves-section{
	position: relative;
	height: 80px;
	overflow: hidden;
	margin-top: 24px;
	background: 
		/* Modern gradient background */
		radial-gradient(ellipse at 30% 40%, rgba(0, 102, 102, 0.05) 0%, transparent 30%),
		radial-gradient(ellipse at 70% 60%, rgba(74, 44, 23, 0.03) 0%, transparent 25%),
		linear-gradient(135deg, 
			rgba(248, 249, 250, 0.8) 0%, 
			rgba(233, 236, 239, 0.6) 50%, 
			rgba(241, 243, 244, 0.7) 100%
		);
	/* Smooth wave effect */
	clip-path: polygon(
		0% 0%, 
		100% 0%, 
		100% 70%, 
		90% 80%, 
		80% 70%, 
		70% 80%, 
		60% 70%, 
		50% 80%, 
		40% 70%, 
		30% 80%, 
		20% 70%, 
		10% 80%, 
		0% 70%
	);
}

.waves-section svg{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: modernWaveFlow 12s ease-in-out infinite;
	filter: 
		drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
		drop-shadow(0 0 6px rgba(0, 102, 102, 0.1));
}

.waves-section svg:nth-child(2){
	animation-delay: -5s;
	opacity: 0.6;
	filter: 
		drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))
		drop-shadow(0 0 6px rgba(160, 82, 45, 0.15));
}

.waves-section svg:nth-child(3){
	animation-delay: -10s;
	opacity: 0.4;
	filter: 
		drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15))
		drop-shadow(0 0 4px rgba(101, 67, 33, 0.1));
}

@keyframes modernWaveFlow {
	0%, 100% { 
		transform: translateX(-20%) scaleY(1);
		filter: 
			drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
			drop-shadow(0 0 6px rgba(0, 102, 102, 0.1));
	}
	50% { 
		transform: translateX(20%) scaleY(1.05);
		filter: 
			drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15))
			drop-shadow(0 0 8px rgba(0, 102, 102, 0.15));
	}
}

/* Animated background */
.animated-bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden}
.floating-shapes{position:absolute;width:100%;height:100%}
.shape{position:absolute;border-radius:50%;background:linear-gradient(45deg, rgba(0,102,102,.08), rgba(74,44,23,.05));animation:float 20s ease-in-out infinite}
.shape:nth-child(1){width:80px;height:80px;top:20%;left:10%;animation-delay:0s;animation-duration:25s}
.shape:nth-child(2){width:120px;height:120px;top:60%;right:15%;animation-delay:-5s;animation-duration:30s}
.shape:nth-child(3){width:60px;height:60px;top:80%;left:70%;animation-delay:-10s;animation-duration:22s}
.shape:nth-child(4){width:100px;height:100px;top:30%;right:40%;animation-delay:-15s;animation-duration:28s}
.shape:nth-child(5){width:90px;height:90px;top:70%;left:30%;animation-delay:-8s;animation-duration:26s}
.shape:nth-child(6){width:70px;height:70px;top:10%;right:60%;animation-delay:-12s;animation-duration:24s}
@keyframes float{0%,100%{transform:translateY(0px) translateX(0px) rotate(0deg)}25%{transform:translateY(-20px) translateX(10px) rotate(90deg)}50%{transform:translateY(-10px) translateX(-15px) rotate(180deg)}75%{transform:translateY(-30px) translateX(5px) rotate(270deg)}}
/* Modern Professional Footer */
.site-footer{
	position: relative;
	background: 
		/* Modern gradient background */
		linear-gradient(135deg, 
			#1a1a2e 0%, 
			#16213e 25%, 
			#0f3460 50%, 
			#16213e 75%, 
			#1a1a2e 100%
		);
	color: #ffffff;
	padding: 80px 0 40px;
	overflow: hidden;
	border-top: 1px solid rgba(0, 102, 102, 0.3);
	/* Modern subtle wave effect */
	clip-path: polygon(
		0% 0%, 
		100% 0%, 
		100% 85%, 
		0% 100%
	);
	/* Modern shadow effects */
	box-shadow: 
		0 -10px 40px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Modern Geometric Pattern Overlay */
.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		/* Modern geometric patterns */
		radial-gradient(circle at 20% 30%, rgba(0, 102, 102, 0.1) 0%, transparent 20%),
		radial-gradient(circle at 80% 70%, rgba(0, 102, 102, 0.08) 0%, transparent 18%),
		radial-gradient(circle at 50% 20%, rgba(0, 102, 102, 0.06) 0%, transparent 15%),
		/* Modern grid pattern */
		repeating-linear-gradient(
			90deg,
			transparent 0px,
			transparent 50px,
			rgba(0, 102, 102, 0.03) 51px,
			rgba(0, 102, 102, 0.03) 52px
		),
		repeating-linear-gradient(
			0deg,
			transparent 0px,
			transparent 50px,
			rgba(0, 102, 102, 0.03) 51px,
			rgba(0, 102, 102, 0.03) 52px
		);
	background-size: 100% 100%, 100% 100%, 100% 100%, 100px 100px, 100px 100px;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
	pointer-events: none;
	z-index: 1;
	/* Modern subtle animation */
	animation: modernGlow 6s ease-in-out infinite;
}

.site-footer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		/* Modern accent highlights */
		radial-gradient(circle at 25% 35%, rgba(0, 102, 102, 0.08) 0%, transparent 25%),
		radial-gradient(circle at 75% 65%, rgba(0, 102, 102, 0.06) 0%, transparent 22%),
		radial-gradient(circle at 50% 15%, rgba(0, 102, 102, 0.04) 0%, transparent 18%),
		radial-gradient(circle at 40% 85%, rgba(0, 102, 102, 0.05) 0%, transparent 15%),
		/* Modern tech grid pattern */
		repeating-linear-gradient(
			45deg,
			transparent 0px,
			transparent 20px,
			rgba(0, 102, 102, 0.02) 21px,
			rgba(0, 102, 102, 0.02) 22px
		),
		repeating-linear-gradient(
			-45deg,
			transparent 0px,
			transparent 20px,
			rgba(0, 102, 102, 0.02) 21px,
			rgba(0, 102, 102, 0.02) 22px
		);
	pointer-events: none;
	z-index: 1;
	/* Modern subtle glow effect */
	animation: modernAccentGlow 8s ease-in-out infinite;
}

/* Modern Professional Text */
.site-footer p {
	margin: 0;
	text-align: center;
	font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-shadow: 
		1px 1px 2px rgba(0, 0, 0, 0.3);
	position: relative;
	z-index: 2;
	color: #ffffff;
	opacity: 0.9;
	/* Modern clean text styling */
	line-height: 1.6;
}

@keyframes modernGlow {
	0%, 100% { 
		opacity: 0.7;
		filter: brightness(0.95);
	}
	50% { 
		opacity: 1;
		filter: brightness(1.05);
	}
}

@keyframes modernAccentGlow {
	0%, 100% { 
		opacity: 0.5;
		filter: brightness(0.9);
	}
	50% { 
		opacity: 0.8;
		filter: brightness(1.1);
	}
}

/* Modern Footer Social Header */
.footer-social-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	position: relative;
	z-index: 2;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-header p {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	text-shadow: 
		1px 1px 2px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.5px;
}

.footer-logo .brand-name {
	font-size: 24px;
	font-weight: 800;
	color: #ffffff;
	text-shadow: 
		1px 1px 2px rgba(0, 0, 0, 0.3);
	background: linear-gradient(45deg, #ffffff, #00cccc);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: modernBrandShimmer 3s ease-in-out infinite;
}

@keyframes modernBrandShimmer {
	0%, 100% { 
		background-position: 0% 50%; 
	}
	50% { 
		background-position: 100% 50%; 
	}
}

/* Social Media Icons Container */
.footer-social {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 20px 0;
	position: relative;
	z-index: 2;
}

/* Modern Professional Social Icons */
.social-icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background: 
		/* Modern glass morphism effect */
		rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #ffffff;
	font-size: 20px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 
		0 4px 15px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	/* Modern clean effect */
	text-shadow: none;
}

.social-icon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, 
		transparent 30%, 
		rgba(255, 255, 255, 0.2) 50%, 
		transparent 70%
	);
	transform: translateX(-100%);
	transition: transform 0.4s ease;
}

.social-icon:hover {
	background: 
		/* Modern hover effect */
		rgba(255, 255, 255, 0.2);
	border-color: rgba(0, 102, 102, 0.6);
	color: #ffffff;
	transform: translateY(-5px) scale(1.05);
	box-shadow: 
		0 8px 25px rgba(0, 0, 0, 0.3),
		0 0 20px rgba(0, 102, 102, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	/* Modern clean hover effect */
	filter: brightness(1.1);
}

.social-icon:hover::before {
	transform: translateX(100%);
}

/* Modern Professional Glow Animation */
.site-footer {
	animation: modernProfessionalGlow 8s ease-in-out infinite;
}

@keyframes modernProfessionalGlow {
	0%, 100% { 
		box-shadow: 
			0 -10px 40px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
	50% { 
		box-shadow: 
			0 -15px 50px rgba(0, 0, 0, 0.4),
			0 0 30px rgba(0, 102, 102, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.15);
	}
}

/* Responsive Design for All Sections */
@media (max-width: 768px) {
	.features-section {
		padding: 80px 0;
	}
	
	.courses-preview {
		padding: 80px 0;
	}
	
	.session-code {
		padding: 60px 0;
	}
	
	.session-card {
		padding: 30px 20px;
	}
	
	.session-icon {
		width: 60px;
		height: 60px;
	}
	
	.code-input {
		min-width: 200px;
		font-size: 1rem;
		padding: 14px 16px;
	}
	
	.site-footer {
		padding: 50px 0 30px;
		/* Simplified modern wave for mobile */
		clip-path: polygon(
			0% 0%, 
			100% 0%, 
			100% 90%, 
			0% 100%
		);
	}
	
	.site-footer p {
		font-size: 14px;
		margin-bottom: 15px;
		letter-spacing: 0.3px;
	}
	
	.footer-social-header {
		flex-direction: column;
		gap: 15px;
		text-align: center;
		padding: 15px 0;
	}
	
	.footer-social-header p {
		font-size: 16px;
		margin-bottom: 0;
	}
	
	.footer-logo .brand-name {
		font-size: 20px;
	}
	
	.footer-social {
		gap: 15px;
		margin: 20px 0;
	}
	
	.social-icon {
		width: 45px;
		height: 45px;
		font-size: 18px;
	}
}

/* Modern decorative elements */
.site-footer .container {
	position: relative;
}

.site-footer .container::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 2px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(0, 102, 102, 0.3) 20%, 
		rgba(0, 102, 102, 0.6) 50%, 
		rgba(0, 102, 102, 0.3) 80%, 
		transparent 100%
	);
	border-radius: 1px;
	animation: modernDecorativeLine 6s ease-in-out infinite;
	box-shadow: 
		0 0 10px rgba(0, 102, 102, 0.2);
}

@keyframes modernDecorativeLine {
	0%, 100% { 
		opacity: 0.6;
		transform: translateX(-50%) scaleX(1);
		box-shadow: 
			0 0 10px rgba(0, 102, 102, 0.2);
	}
	50% { 
		opacity: 1;
		transform: translateX(-50%) scaleX(1.2);
		box-shadow: 
			0 0 15px rgba(0, 102, 102, 0.4);
	}
}

/* Footer Content Section */
.footer-content {
	text-align: center;
	margin: 30px 0;
	position: relative;
	z-index: 2;
}

.copyright {
	font-size: 14px;
	color: #ffffff;
	margin: 0 0 20px;
	text-shadow: 
		1px 1px 2px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
	line-height: 1.5;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 25px;
	flex-wrap: wrap;
}

.footer-link {
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	text-shadow: 
		1px 1px 2px rgba(0, 0, 0, 0.3);
	position: relative;
	opacity: 0.8;
}

.footer-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, #00cccc, #006666);
	transition: width 0.3s ease;
}

.footer-link:hover {
	color: #00cccc;
	opacity: 1;
	text-shadow: 
		1px 1px 2px rgba(0, 0, 0, 0.5),
		0 0 8px rgba(0, 204, 204, 0.3);
}

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

/* Footer Bottom Section */
.footer-bottom {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 20px;
	position: relative;
	z-index: 2;
}

.language-selector {
	position: relative;
}

.lang-select {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #ffffff;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease;
	text-shadow: none;
}

.lang-select:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(0, 102, 102, 0.6);
	box-shadow: 0 0 10px rgba(0, 102, 102, 0.3);
}

.lang-select:focus {
	border-color: rgba(0, 102, 102, 0.8);
	box-shadow: 0 0 15px rgba(0, 102, 102, 0.4);
}

.lang-select option {
	background: #1a1a2e;
	color: #ffffff;
	border: none;
}

/* Modern WhatsApp Floating Button */
.whatsapp-float {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #25d366, #128c7e);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	box-shadow: 
		0 8px 25px rgba(37, 211, 102, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	z-index: 1000;
	animation: modernWhatsappPulse 3s ease-in-out infinite;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.whatsapp-float:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow: 
		0 12px 30px rgba(37, 211, 102, 0.4),
		0 6px 15px rgba(0, 0, 0, 0.3);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}

@keyframes modernWhatsappPulse {
	0%, 100% {
		box-shadow: 
			0 8px 25px rgba(37, 211, 102, 0.3),
			0 4px 12px rgba(0, 0, 0, 0.2);
	}
	50% {
		box-shadow: 
			0 8px 25px rgba(37, 211, 102, 0.4),
			0 4px 12px rgba(0, 0, 0, 0.2),
			0 0 25px rgba(37, 211, 102, 0.2);
	}
}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.fade-slide{--delay:0s;transition-delay:var(--delay)}
.zoom-in{transform:scale(.96);opacity:.001}
.zoom-in.in{transform:scale(1);opacity:1}
.slide-down{transform:translateY(-30px);opacity:0}
.slide-down.in{transform:translateY(0);opacity:1}

/* Slide-in Animations */
.slide-in-left{opacity:0;transform:translateX(-50px);transition:opacity .8s ease,transform .8s ease}
.slide-in-left.in{opacity:1;transform:translateX(0)}
.slide-in-right{opacity:0;transform:translateX(50px);transition:opacity .8s ease,transform .8s ease}
.slide-in-right.in{opacity:1;transform:translateX(0)}

/* Features Section Enhanced */
.features-section {
	padding: 120px 0;
	background: 
		/* Modern gradient background */
		linear-gradient(135deg, 
			rgba(0, 102, 102, 0.03) 0%, 
			rgba(255, 255, 255, 0.95) 30%,
			rgba(74, 44, 23, 0.02) 70%,
			rgba(0, 102, 102, 0.05) 100%
		);
	position: relative;
	overflow: hidden;
}

.features-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.features-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		radial-gradient(circle at 25% 25%, rgba(0, 102, 102, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 75% 75%, rgba(32, 178, 170, 0.06) 0%, transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(74, 44, 23, 0.04) 0%, transparent 50%);
	animation: featuresPattern 25s ease-in-out infinite;
}

@keyframes featuresPattern {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-15px) rotate(1deg); }
}

.section-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 102, 102, 0.1);
	backdrop-filter: blur(10px);
	padding: 8px 16px;
	border-radius: 25px;
	border: 1px solid rgba(0, 102, 102, 0.2);
	margin-bottom: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #006666;
	box-shadow: 0 4px 15px rgba(0, 102, 102, 0.1);
}

/* Add decorative elements */
.features-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23006666' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.5;
	z-index: 1;
}

.features-section .container {
	position: relative;
	z-index: 2;
}

/* Features Layout */
.features-layout {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	align-items: center;
	margin-top: 60px;
}

/* Master Image */
.master-image {
	text-align: center;
	position: relative;
	padding: 40px;
	background: 
		linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)),
		linear-gradient(45deg, rgba(0, 102, 102, 0.05), rgba(74, 44, 23, 0.03));
	backdrop-filter: blur(15px);
	border-radius: 30px;
	box-shadow: 
		0 25px 50px rgba(0, 102, 102, 0.15),
		0 10px 20px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 102, 102, 0.2);
	transition: all 0.4s ease;
}

.master-image:hover {
	transform: translateY(-8px);
	box-shadow: 
		0 35px 70px rgba(0, 102, 102, 0.2),
		0 15px 30px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.master-img {
	width: 300px;
	height: 300px;
	border-radius: 25px;
	object-fit: cover;
	box-shadow: 
		0 25px 50px rgba(0, 102, 102, 0.2),
		0 10px 20px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 3px solid rgba(255, 255, 255, 0.9);
	position: relative;
	overflow: hidden;
}

.master-img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(0, 102, 102, 0.1), rgba(74, 44, 23, 0.05));
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 25px;
}

.master-img:hover {
	transform: translateY(-15px) scale(1.05);
	box-shadow: 
		0 40px 80px rgba(0, 102, 102, 0.25),
		0 15px 30px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.master-img:hover::before {
	opacity: 1;
}

.master-info {
	margin-top: 25px;
	text-align: center;
	padding: 20px;
	background: 
		linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
	backdrop-filter: blur(10px);
	border-radius: 20px;
	box-shadow: 
		0 10px 20px rgba(0, 102, 102, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 102, 102, 0.1);
}

.master-info h3 {
	font-size: 24px;
	font-weight: 800;
	background: linear-gradient(135deg, var(--primary), var(--brown));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0 0 10px 0;
	letter-spacing: 0.5px;
}

.master-info p {
	font-size: 16px;
	color: var(--text);
	margin: 0;
	opacity: 0.9;
	font-weight: 500;
}

/* Responsive Design for Features */
@media (max-width: 768px) {
	.features-layout {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}
	
	.features-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 100%;
	}
	
	.feature-card {
		min-height: 280px;
		padding: 30px 20px;
	}
	
	.feature-icon {
		width: 70px;
		height: 70px;
		margin: 0 auto 20px;
	}
	
	.feature-title {
		font-size: 19px;
		margin: 0 0 12px;
	}
	
	.feature-description {
		font-size: 15px;
	}
	
	.master-image {
		padding: 30px;
	}
	
	.master-img {
		width: 250px;
		height: 250px;
	}
	
	.master-info {
		padding: 15px;
		margin-top: 20px;
	}
	
	.master-info h3 {
		font-size: 22px;
	}
	
	.master-info p {
		font-size: 15px;
	}
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-title {
	font-size: 36px;
	font-weight: 800;
	color: var(--text);
	margin: 0 0 16px;
	background: linear-gradient(45deg, var(--text), var(--primary), var(--brown));
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: brandShimmer 4s ease-in-out infinite;
}

.section-subtitle {
	font-size: 18px;
	color: #666;
	margin: 0;
	max-width: 600px;
	margin: 0 auto;
}

/* Decorative Line Under Section Title */
.decorative-line {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 25px 0 30px 0;
	position: relative;
}

.line-segment {
	height: 2px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(0, 102, 102, 0.3) 20%, 
		rgba(0, 102, 102, 0.6) 50%, 
		rgba(0, 102, 102, 0.3) 80%, 
		transparent 100%
	);
	position: relative;
	animation: lineGlow 3s ease-in-out infinite;
}

.segment-1 {
	width: 80px;
	margin-left: 20px;
}

.segment-2 {
	width: 80px;
	margin-right: 20px;
}

.line-center {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, 
		rgba(0, 102, 102, 0.1) 0%, 
		rgba(32, 178, 170, 0.15) 50%,
		rgba(0, 102, 102, 0.1) 100%
	);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #006666;
	box-shadow: 
		0 4px 15px rgba(0, 102, 102, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	border: 2px solid rgba(0, 102, 102, 0.2);
	position: relative;
	animation: centerPulse 2s ease-in-out infinite;
}

.line-center::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	background: linear-gradient(45deg, 
		rgba(0, 102, 102, 0.1), 
		rgba(32, 178, 170, 0.1), 
		rgba(0, 102, 102, 0.1)
	);
	border-radius: 50%;
	animation: outerGlow 4s ease-in-out infinite;
	z-index: -1;
}

.line-center svg {
	animation: iconRotate 6s linear infinite;
}

@keyframes lineGlow {
	0%, 100% { 
		opacity: 0.6;
		transform: scaleX(1);
	}
	50% { 
		opacity: 1;
		transform: scaleX(1.1);
	}
}

@keyframes centerPulse {
	0%, 100% { 
		transform: scale(1);
		box-shadow: 
			0 4px 15px rgba(0, 102, 102, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
	50% { 
		transform: scale(1.05);
		box-shadow: 
			0 6px 20px rgba(0, 102, 102, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.4);
	}
}

@keyframes outerGlow {
	0%, 100% { 
		opacity: 0.3;
		transform: scale(1);
	}
	50% { 
		opacity: 0.6;
		transform: scale(1.1);
	}
}

@keyframes iconRotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Enhanced Decorative Line Effects */
.decorative-line {
	transition: all 0.3s ease;
}

.line-segment {
	transform: scaleX(0);
	opacity: 0;
	transition: all 0.5s ease;
	transform-origin: center;
}

.line-center {
	transform: scale(0);
	opacity: 0;
	transition: all 0.5s ease;
}

.decorative-line:hover .line-segment {
	transform: scaleX(1.2);
}

.decorative-line:hover .line-center {
	transform: scale(1.1);
}

/* Responsive Design for Decorative Line */
@media (max-width: 768px) {
	.decorative-line {
		margin: 20px 0 25px 0;
	}
	
	.segment-1, .segment-2 {
		width: 60px;
	}
	
	.segment-1 {
		margin-left: 15px;
	}
	
	.segment-2 {
		margin-right: 15px;
	}
	
	.line-center {
		width: 50px;
		height: 50px;
	}
	
	.line-center svg {
		width: 20px;
		height: 20px;
	}
}

@media (max-width: 480px) {
	.decorative-line {
		margin: 15px 0 20px 0;
	}
	
	.segment-1, .segment-2 {
		width: 40px;
	}
	
	.segment-1 {
		margin-left: 10px;
	}
	
	.segment-2 {
		margin-right: 10px;
	}
	
	.line-center {
		width: 40px;
		height: 40px;
	}
	
	.line-center svg {
		width: 16px;
		height: 16px;
	}
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	max-width: 800px;
}

.feature-card {
	background: 
		linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)),
		linear-gradient(45deg, rgba(0, 102, 102, 0.02), rgba(74, 44, 23, 0.01));
	backdrop-filter: blur(10px);
	padding: 35px 25px;
	border-radius: 24px;
	text-align: center;
	box-shadow: 
		0 20px 40px rgba(0, 102, 102, 0.1),
		0 8px 16px rgba(0, 0, 0, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(0, 102, 102, 0.15);
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.6s ease;
}

.feature-card:hover::before {
	left: 100%;
}

.feature-card:hover {
	transform: translateY(-12px) scale(1.02);
	box-shadow: 
		0 30px 60px rgba(0, 102, 102, 0.2),
		0 15px 30px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	border-color: rgba(0, 102, 102, 0.3);
}

.feature-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 25px;
	background: 
		linear-gradient(135deg, var(--primary) 0%, var(--brown) 100%),
		linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 
		0 8px 20px rgba(0, 102, 102, 0.3),
		0 4px 8px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
}

.feature-icon::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transform: rotate(45deg);
	transition: all 0.6s ease;
	opacity: 0;
}

.feature-card:hover .feature-icon::before {
	opacity: 1;
	transform: rotate(45deg) translate(50%, 50%);
}

.feature-card:hover .feature-icon {
	transform: scale(1.15) rotate(5deg);
	box-shadow: 
		0 12px 30px rgba(0, 102, 102, 0.4),
		0 6px 12px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.feature-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 12px;
	line-height: 1.3;
}

.feature-description {
	font-size: 15px;
	color: #666;
	line-height: 1.5;
	margin: 0;
}

/* Statistics Section */
.stats-section {
	padding: 60px 0;
	background: var(--primary);
	color: #fff;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	text-align: center;
}

.stat-item {
	transition: all 0.3s ease;
}

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

.stat-number {
	font-size: 48px;
	font-weight: 800;
	margin-bottom: 8px;
	background: linear-gradient(45deg, #fff, rgba(255, 255, 255, 0.8));
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: brandShimmer 3s ease-in-out infinite;
}

.stat-label {
	font-size: 18px;
	font-weight: 500;
	opacity: 0.9;
}

/* Courses Preview Section Enhanced */
.courses-preview {
	padding: 120px 0;
	background: 
		linear-gradient(135deg, 
			rgba(255, 255, 255, 0.95) 0%, 
			rgba(0, 102, 102, 0.02) 50%,
			rgba(255, 255, 255, 0.95) 100%
		);
	position: relative;
	overflow: hidden;
}

.courses-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.courses-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		radial-gradient(circle at 30% 30%, rgba(0, 102, 102, 0.06) 0%, transparent 50%),
		radial-gradient(circle at 70% 70%, rgba(32, 178, 170, 0.04) 0%, transparent 50%);
	animation: coursesPattern 30s ease-in-out infinite;
}

@keyframes coursesPattern {
	0%, 100% { transform: translateX(0px) rotate(0deg); }
	50% { transform: translateX(-10px) rotate(0.5deg); }
}

.courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 30px;
	margin-bottom: 50px;
}

.course-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 102, 102, 0.1);
}

.course-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 102, 102, 0.15);
}

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

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

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

.course-overlay {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}

.course-content {
	padding: 24px;
}

.course-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 12px;
}

.course-description {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin: 0 0 16px;
}

.course-meta {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
}

.course-level, .course-students {
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 12px;
	font-weight: 600;
}

.course-level {
	background: rgba(0, 102, 102, 0.1);
	color: var(--primary);
}

.course-students {
	background: rgba(74, 44, 23, 0.1);
	color: var(--brown);
}


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

/* Testimonials Section */
.testimonials-section {
	padding: 80px 0;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 30px;
}

.testimonial-card {
	background: #fff;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 102, 102, 0.1);
}

.testimonial-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 102, 102, 0.15);
}

.testimonial-content {
	margin-bottom: 24px;
}

.quote-icon {
	font-size: 48px;
	color: var(--primary);
	line-height: 1;
	margin-bottom: 16px;
}

.testimonial-text {
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	margin: 0;
	font-style: italic;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 16px;
}

.author-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
}

.author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 4px;
}

.author-title {
	font-size: 14px;
	color: #666;
}

/* Newsletter Section */
.newsletter-section {
	padding: 60px 0;
	background: var(--primary);
	color: #fff;
}

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

.newsletter-title {
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 16px;
}

.newsletter-subtitle {
	font-size: 18px;
	opacity: 0.9;
	margin: 0 0 40px;
}

.newsletter-form {
	margin-bottom: 20px;
}

.form-group {
	display: flex;
	gap: 12px;
	max-width: 400px;
	margin: 0 auto;
}

.newsletter-input {
	flex: 1;
	padding: 16px 20px;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	outline: none;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	backdrop-filter: blur(10px);
}

.newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.newsletter-btn {
	background: var(--brown);
	color: #fff;
	border: none;
	padding: 16px 24px;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.newsletter-btn:hover {
	background: rgba(74, 44, 23, 0.9);
	transform: translateY(-2px);
}

.newsletter-note {
	font-size: 14px;
	opacity: 0.8;
	margin: 0;
}

/* Contact Info Section */
.contact-info-section {
	padding: 60px 0;
	background: #fff;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
}

.contact-item {
	text-align: center;
	padding: 30px 20px;
	border-radius: 16px;
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 102, 102, 0.1);
}

.contact-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 102, 102, 0.1);
}

.contact-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, var(--primary), var(--brown));
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.contact-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 12px;
}

.contact-description {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin: 0;
}

/* Responsive Design */
@media (max-width: 900px){
	.hero-grid{grid-template-columns:1fr;gap:20px}
	.hero-title{font-size:34px}
	.hero-img{max-width:100%}
	
	/* Header responsive */
	.nav-menu{
		display: none;
	}
	
	.header-cta{
		gap: 8px;
	}
	
	.header-btn{
		padding: 8px 16px;
		font-size: 13px;
	}
	
	.brand-name{
		font-size: 20px;
	}
}

@media (max-width: 768px) {
	.site-footer {
		padding: 30px 0;
	}
	
	.footer-social-header {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
	
	.footer-social-header p {
		font-size: 16px;
		margin-bottom: 0;
	}
	
	.footer-logo .brand-name {
		font-size: 18px;
	}
	
	.footer-social {
		gap: 15px;
		margin: 15px 0;
	}
	
	.social-icon {
		width: 35px;
		height: 35px;
		font-size: 16px;
	}
	
	.copyright {
		font-size: 12px;
		margin-bottom: 15px;
	}
	
	.footer-links {
		gap: 15px;
	}
	
	.footer-link {
		font-size: 12px;
	}
	
	.footer-bottom {
		justify-content: center;
	}
	
	.lang-select {
		font-size: 12px;
		padding: 6px 10px;
	}
	
	.whatsapp-float {
		width: 50px;
		height: 50px;
		bottom: 15px;
		left: 15px;
		border-radius: 12px;
	}
	
	.whatsapp-float svg {
		width: 20px;
		height: 20px;
	}
	
	/* Header mobile */
	.site-header .container{
		padding: 12px 0;
	}
	
	.header-cta{
		flex-direction: column;
		gap: 6px;
	}
	
	.header-btn{
		padding: 6px 12px;
		font-size: 12px;
	}
	
	.brand-name{
		font-size: 18px;
	}
	
	.logo-icon{
		width: 28px;
		height: 28px;
	}
}