@font-face {
	font-family: "menufont";
	src: url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.eot);
	/* ... keep your existing src lines ... */
	font-weight: 400;
	font-style: normal;
	
	/* ADD THIS LINE */
	font-display: swap;
}

/* --- 2. RESET --- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	/* Default font for descriptions (NOT menufont) */
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: #f0f4f8; 
	color: var(--text-dark); 
	overflow-x: hidden; 
}

/* --- 3. APPLY CUSTOM FONT TO SPECIFIC AREAS --- */
/* This forces your font onto these specific items */

.nav-links a,         /* Menu Items */
.hero-content p,      /* Hero Subtitle */
.section-title,       /* Section Headers */
.glass-card h3,       /* About/History Titles */
.service-card h3,     /* Service Titles */
.video-title,         /* Video Titles */
.stat-item p,         /* Stat Labels */
.footer-logo {        /* Footer Logo */
	font-family: "menufont", sans-serif !important;
}

/* --- GLOBAL VARIABLES --- */
:root {
	--primary-color: #e55d87;
	--secondary-color: #5fc3e4;
	--gradient-bg: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
	--text-dark: #2d3748;
	--text-light: #f7fafc;
	--glass-bg: rgba(255, 255, 255, 0.85);
	--glass-border: 1px solid rgba(255, 255, 255, 0.5);
	--shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

html { scroll-behavior: smooth; }

/* --- BACKGROUND ORBS --- */
.orb { position: fixed; border-radius: 50%; filter: blur(100px); z-index: -1; }
.orb-1 { width: 500px; height: 500px; background: #e55d87; top: -100px; left: -100px; opacity: 0.2; }
.orb-2 { width: 400px; height: 400px; background: #5fc3e4; bottom: -100px; right: -100px; opacity: 0.2; }

/* --- NAVIGATION --- */
.navbar {
	position: fixed; top: 0; width: 100%; padding: 15px 0;
	z-index: 1000; transition: 0.3s;
}
.navbar.scrolled {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
	backdrop-filter: blur(10px);
}
.nav-container {
	display: flex; justify-content: space-between; align-items: center;
	max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.logo {
	font-size: 24px; font-weight: 800; color: var(--primary-color);
	text-decoration: none; background: var(--gradient-bg);
	-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	font-family: "menufont", sans-serif !important;
}
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { 
	text-decoration: none; color: var(--text-dark); font-weight: 600; transition: 0.3s;
}
.nav-links a:hover { color: var(--primary-color); }
.hamburger { display: none; font-size: 24px; cursor: pointer; color: var(--text-dark); }

/* --- HERO SECTION --- */
.hero-section {
	height: 100vh; 
	display: flex; 
	flex-direction: column;
	justify-content: center; 
	align-items: center; 
	text-align: center;
	padding: 0 20px;
	position: relative; 
}

.hero-content h1 {
	font-size: 4rem; 
	margin-bottom: 20px;
	background: var(--gradient-bg); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent;
	font-family: "menufont", sans-serif !important;
}

.hero-content p { 
	font-size: 1.5rem; 
	color: #718096; 
	margin-bottom: 50px; 
}

/* Update this existing rule to include z-index if missing */
.scroll-indicator { 
	position: absolute; 
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10; /* Ensures it sits on top of background */
}

/* ADD THIS NEW RULE */
.scroll-indicator a {
	cursor: pointer;
	display: block; /* Makes the whole area clickable */
}

.mouse {
	width: 30px; height: 50px; border: 2px solid var(--primary-color);
	border-radius: 20px; position: relative; margin: 0 auto 10px;
}

.wheel {
	width: 4px; height: 8px; background: var(--primary-color);
	border-radius: 2px; position: absolute; top: 10px; left: 50%;
	transform: translateX(-50%); animation: scroll 1.5s infinite;
}

@keyframes scroll { 0% { top: 10px; opacity: 1; } 100% { top: 30px; opacity: 0; } }

/* --- SECTIONS COMMON --- */
.section { padding: 80px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section-title {
	text-align: center; 
	font-size: 2.5rem; 
	margin-bottom: 60px;
	color: var(--text-dark); 
	position: relative;
}
.section-title::after {
	content: ''; display: block; width: 60px; height: 4px;
	background: var(--gradient-bg); margin: 10px auto 0; border-radius: 2px;
}

/* --- CARDS & GRID --- */
.glass-card {
	background: var(--glass-bg); border: var(--glass-border);
	border-radius: 20px; padding: 30px; text-align: center;
	box-shadow: var(--shadow); backdrop-filter: blur(5px);
	transition: transform 0.3s;
}
.glass-card h3 { margin-bottom: 10px; }
.glass-card:hover { transform: translateY(-10px); }

/* About Grid */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.icon-large { font-size: 40px; color: var(--secondary-color); margin-bottom: 20px; }

/* Services Grid */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.service-card {
	background: white; padding: 30px; border-radius: 20px;
	text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: 0.3s;
}
.service-card h3 { margin: 15px 0 10px 0; }
.service-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }
.icon-bubble {
	width: 60px; height: 60px; background: rgba(229, 93, 135, 0.1);
	color: var(--primary-color); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 24px; margin: 0 auto 20px;
}

/* Video Grid */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video-card {
	background: white; padding: 10px; border-radius: 15px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.video-card video { width: 100%; border-radius: 10px; }
.video-title { padding: 10px 5px; font-weight: 600; font-size: 14px; }

/* Stats Section */
.stats-section { background: white; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; text-align: center; }
.stat-item i { font-size: 40px; color: var(--primary-color); margin-bottom: 10px; }
.counter { font-size: 3rem; font-weight: 800; color: var(--text-dark); margin-bottom: 5px; }

/* Footer */
footer { background: #fff; padding: 40px 0; text-align: center; border-top: 1px solid #eee; }
.footer-logo { font-weight: 800; color: var(--primary-color); margin-bottom: 20px; font-size: 20px; }
.social-icons { margin-bottom: 20px; }
.social-icons a {
	font-size: 24px; color: #718096; margin: 0 15px; transition: 0.3s;
}
.social-icons a:hover { color: var(--primary-color); transform: scale(1.1); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
	.nav-links {
		display: none; flex-direction: column; position: absolute;
		top: 60px; right: 0; background: white; width: 100%;
		padding: 20px; box-shadow: 0 10px 10px rgba(0,0,0,0.1);
	}
	.nav-links.active { display: flex; }
	.hamburger { display: block; }
	.hero-content h1 { font-size: 2.5rem; }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
	/* ... existing rules ... */

	/* ADD THIS TO FIX BIG NUMBERS */
	.counter {
		font-size: 2rem; /* Reduced from 3rem to fit screen */
	}
	
	.stats-grid {
		gap: 15px; /* Reduce gap slightly to save space */
	}
}

/* --- ANIMATIONS (Fade Up) --- */
.fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* --- MODERN TUTORIAL GRID --- */
.tutorial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
}

/* THE CARD */
.tutorial-card {
	background: white;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	border: 1px solid rgba(255,255,255,0.5);
}

.tutorial-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(229, 93, 135, 0.2); /* Pink glow on hover */
}

/* THUMBNAIL AREA (Gradient Background) */
.thumb-wrapper {
	height: 160px;
	width: 100%;
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%); /* Your Brand Gradient */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Play Button Styling */
.play-button {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e55d87;
	font-size: 24px;
	transition: 0.3s;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	z-index: 2;
}

/* Play Button Animation */
.tutorial-card:hover .play-button {
	transform: scale(1.1);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
}

/* TEXT CONTENT */
.card-content {
	padding: 20px;
	text-align: left;
}

.lesson-badge {
	font-size: 12px;
	font-weight: 700;
	color: #5fc3e4;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 5px;
	font-family: 'Segoe UI', sans-serif; /* Small text looks better in standard font */
}

.card-content h3 {
	font-family: "menufont", sans-serif !important;
	font-size: 18px;
	color: var(--text-dark);
	margin: 0;
	line-height: 1.4;
}

/* --- VIDEO MODAL (POPUP) --- */
.video-modal {
	display: none; /* Hidden by default */
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s;
}

.video-modal.show {
	opacity: 1; /* JS handles the display property now for safety */
}

.modal-content {
	position: relative;
	width: 90%;
	max-width: 900px;
	background: transparent;
	border-radius: 10px;
	text-align: center;
}

.modal-content h3 {
	color: white;
	font-family: "menufont", sans-serif !important;
	margin-bottom: 15px;
	font-size: 24px;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	height: 0;
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	background: black;
}

.video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Close Button */
.close-modal {
	position: absolute;
	top: -40px;
	right: 0;
	color: white;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	transition: 0.3s;
}

.close-modal:hover {
	color: #e55d87;
	transform: rotate(90deg);
}

/* --- MOBILE SPEED OPTIMIZATION --- */
@media (max-width: 768px) {
	/* 1. Hide the heavy background orbs */
	.orb { 
		display: none !important; 
	}
	
	/* 2. Disable Glass Blur (Major lag cause) */
	.navbar {
		backdrop-filter: none !important;
		background: rgba(255, 255, 255, 0.98) !important;
	}
	
	/* 3. Simplify Background */
	body {
		background: linear-gradient(135deg, #f0f4f8 0%, #e6e9f0 100%);
	}
}