/* ==========================================================================
   Theme Fantasy - Custom Styles
   ========================================================================== */

:root {
	--tf-primary: #ff6b00; /* Orange */
	--tf-secondary: #8c30f5; /* Purple */
	--tf-pink: #f82572;
	--tf-blue: #00b4d8;
	--tf-dark: #0a0c10;
	--tf-darker: #050608;
	--tf-gray: #1a1d24;
	--tf-light: #f8f9fa;
	--tf-text-muted: #8b92a5;
	--tf-font-primary: 'Inter', sans-serif;
	--tf-font-secondary: 'Outfit', sans-serif;
}

body {
	font-family: var(--tf-font-primary);
	background-color: var(--tf-darker);
	color: var(--tf-light);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .hero-title, .display-4, .display-6 {
	font-family: var(--tf-font-secondary);
}

/* Typography Utilities */
.text-primary { color: var(--tf-primary) !important; }
.text-purple { color: var(--tf-secondary) !important; }
.text-orange { color: var(--tf-primary) !important; }
.text-pink { color: var(--tf-pink) !important; }
.text-blue { color: var(--tf-blue) !important; }
.text-muted { color: var(--tf-text-muted) !important; }
.text-gray-300 { color: #d1d5db !important; }
.tracking-wide { letter-spacing: 0.1em; }

.bg-dark { background-color: var(--tf-dark) !important; }
.bg-darker { background-color: var(--tf-darker) !important; }

/* Gradients */
.text-gradient {
	background: linear-gradient(90deg, var(--tf-primary) 0%, var(--tf-secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.text-gradient-purple {
	background: linear-gradient(90deg, #d8b4fe 0%, var(--tf-secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.bg-gradient-primary {
	background: linear-gradient(135deg, var(--tf-primary) 0%, #ff8e3c 100%);
}
.bg-glow {
	background: radial-gradient(circle, rgba(140, 48, 245, 0.15) 0%, rgba(10, 12, 16, 0) 70%);
}
.bg-glow-purple {
	background: radial-gradient(circle, rgba(140, 48, 245, 0.4) 0%, rgba(10, 12, 16, 0) 70%);
}
.blur-100 { filter: blur(100px); }

/* Buttons */
.btn-primary {
	background-color: var(--tf-primary);
	border-color: var(--tf-primary);
	color: #fff;
	transition: all 0.3s ease;
}
.btn-primary:hover {
	background-color: #e66000;
	border-color: #e66000;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
}
.btn-glow {
	box-shadow: 0 0 15px rgba(255, 107, 0, 0.4);
}

.btn-outline-light:hover {
	background-color: transparent;
	color: var(--tf-primary);
	border-color: var(--tf-primary);
}
.btn-play:hover .play-icon {
	border-color: var(--tf-primary) !important;
	color: var(--tf-primary);
}

/* Header & Navbar */
.site-header {
	transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
	background-color: rgba(10, 12, 16, 0.95) !important;
	backdrop-filter: blur(10px);
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.navbar-nav .nav-link {
	color: #fff;
	font-weight: 500;
	padding: 0.5rem 1.2rem;
	font-size: 0.95rem;
	transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	color: var(--tf-primary);
}
.dropdown-menu {
	background-color: var(--tf-gray);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.dropdown-item {
	color: var(--tf-light);
	transition: all 0.2s;
}
.dropdown-item:hover {
	background-color: rgba(255, 107, 0, 0.1);
	color: var(--tf-primary);
}

/* Utility Classes */
.glass-panel, .glass-card {
	background: rgba(26, 29, 36, 0.6);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.transition-all { transition: all 0.3s ease; }
.hover-color:hover { filter: grayscale(0%); opacity: 1; }
.grayscale { filter: grayscale(100%); }
.pointer-events-none { pointer-events: none; }
.z-n1 { z-index: -1; }

/* Avatars */
.avatar-sm { width: 40px; height: 40px; object-fit: cover; }
.avatar-md { width: 60px; height: 60px; object-fit: cover; }
.avatar-overlap { margin-left: -15px; }

/* Spacing */
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }

/* Hero Section */
.hero-section { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.floating-animation {
	animation: float 6s ease-in-out infinite;
}
.floating-animation-slow {
	animation: float 8s ease-in-out infinite;
}
@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-15px); }
	100% { transform: translateY(0px); }
}
.play-icon { width: 40px; height: 40px; }

/* Services */
.heading-line {
	width: 60px;
	height: 4px;
	background: var(--tf-primary);
	border-radius: 2px;
}
.icon-wrapper { width: 70px; height: 70px; }
.service-card:hover, .service-card.active-card {
	transform: translateY(-10px);
	background: rgba(30, 33, 40, 0.8);
	border-color: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.service-card:hover .arrow-link i {
	transform: translateX(5px);
}

/* Why Choose Us */
.center-logo { width: 100px; height: 100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.logo-glow { box-shadow: 0 0 30px rgba(255, 107, 0, 0.3); }

/* Pulse Rings */
.pulse-rings {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	z-index: 1;
}
.pulse-rings .ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px dashed rgba(255, 107, 0, 0.4);
	animation: pulseRing 4s linear infinite;
}
.pulse-rings .ring:nth-child(1) { width: 100%; height: 100%; animation-delay: 0s; }
.pulse-rings .ring:nth-child(2) { width: 75%; height: 75%; animation-delay: 1.3s; }
.pulse-rings .ring:nth-child(3) { width: 50%; height: 50%; animation-delay: 2.6s; }

@keyframes pulseRing {
	0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Testimonials */
.testimonial-card.active {
	background: rgba(30, 33, 40, 0.8);
	border-color: rgba(255, 255, 255, 0.2) !important;
}
.custom-nav-btn {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	position: absolute; top: 40%; z-index: 10;
	cursor: pointer; transition: all 0.3s;
}
.custom-nav-btn:hover { background: var(--tf-primary) !important; border-color: var(--tf-primary) !important; }
.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }
.swiper-button-prev::after, .swiper-button-next::after { display: none; }
.swiper-pagination-bullet { background: rgba(255,255,255,0.3); opacity: 1; }
.swiper-pagination-bullet-active { background: var(--tf-primary); width: 24px; border-radius: 4px; }

/* Logos */
.client-logo { max-height: 40px; object-fit: contain; }

/* Footer */
.footer-widget .widget-title { color: #fff; font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; font-family: var(--tf-font-secondary); }
.footer-links li a:hover { color: var(--tf-primary) !important; padding-left: 5px; }
.social-icon { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.1); }
.social-icon:hover { background: var(--tf-primary) !important; border-color: var(--tf-primary); transform: translateY(-3px); }
.footer-links.two-columns { column-count: 2; column-gap: 20px; }

/* Responsive adjustments */
@media (max-width: 991.98px) {
	.display-4 { font-size: 2.5rem; }
	.display-6 { font-size: 2rem; }
	.py-6 { padding-top: 4rem; padding-bottom: 4rem; }
	.navbar-collapse {
		background: rgba(10, 12, 16, 0.98);
		padding: 1rem;
		border-radius: 0.5rem;
		margin-top: 1rem;
	}
}