/*
	Theme Name: Hello Elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.4.4
	Stable tag: 3.4.4
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/

/* =========================================
   MY VISION AGENCY - DARK LUXURY SYSTEM
   ========================================= */

/* --- 0. Imports & Setup --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Syne:wght@400;600;700;800&display=swap');

:root {
	/* Colors */
	--bg-deep: #050505;
	--bg-surface: #0a0a0a;
	--bg-glass: rgba(255, 255, 255, 0.03);
	--bg-glass-hover: rgba(255, 255, 255, 0.06);

	--primary-gold: #D4AF37;
	--primary-gold-dim: #AA8C2C;
	--accent-mint: #00ff88;

	--text-main: #ededed;
	--text-muted: #888888;

	/* Fonts */
	--font-display: 'Syne', sans-serif;
	--font-body: 'Outfit', sans-serif;

	/* Effects */
	--glass-blur: blur(16px);
	--border-glass: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- 1. Global Reset & Atmosphere --- */
body {
	background-color: var(--bg-deep) !important;
	color: var(--text-main) !important;
	font-family: var(--font-body) !important;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Subtle Noise Texture Overlay */
body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 99999;
	opacity: 0.03;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: #fff;
}

p,
span,
a,
li {
	font-family: var(--font-body) !important;
}

/* --- 2. Premium Header (Deep Glass) --- */
header.elementor-location-header {
	position: fixed !important;
	width: 100%;
	top: 0;
	z-index: 1000;
	background: rgba(5, 5, 5, 0.7) !important;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: var(--border-glass);
	transition: all 0.4s ease;
}

/* Navigation */
.elementor-nav-menu--main .elementor-item,
.main-navigation a {
	color: #fff !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 10px 15px !important;
}

.elementor-nav-menu--main .elementor-item:hover,
.main-navigation a:hover {
	color: var(--primary-gold) !important;
	text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* Logo */
.site-logo img {
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

/* --- 3. Glassmorphism Service Cards --- */
/* Target the cards specifically */
.elementor-widget-icon-box,
.elementor-widget-image-box,
.service-box {
	background: var(--bg-glass) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: var(--border-glass) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
	/* Highlight top for depth */
	border-radius: 16px !important;
	padding: 40px 30px !important;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.elementor-widget-icon-box:hover,
.elementor-widget-image-box:hover,
.service-box:hover {
	background: var(--bg-glass-hover) !important;
	transform: translateY(-8px);
	border-color: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Headings inside cards */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title {
	color: #fff !important;
	font-weight: 600 !important;
}

/* Text inside cards */
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description {
	color: var(--text-muted) !important;
	font-weight: 300 !important;
}

/* --- 4. Hero Section Typography --- */
/* Assume large H1s in Hero */
.elementor-widget-heading h1 {
	text-transform: uppercase;
	background: linear-gradient(135deg, #fff 0%, #aaa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Highlighted words (Gold) */
.text-gold,
span.gold {
	color: var(--primary-gold) !important;
	-webkit-text-fill-color: var(--primary-gold) !important;
}

/* --- 5. Enhanced WhatsApp Button (Cyber-Mint) --- */
.elementor-element-b828d2a a.elementor-button {
	background: rgba(0, 255, 136, 0.05) !important;
	border: 1px solid var(--accent-mint) !important;
	color: var(--accent-mint) !important;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 13px !important;
	padding: 12px 28px !important;
	border-radius: 4px !important;
	/* Sharper, more tech-feel */
	box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
	transition: all 0.3s ease;
	animation: neon-pulse 3s infinite;
}

.elementor-element-b828d2a a.elementor-button:hover {
	background: var(--accent-mint) !important;
	color: #000 !important;
	box-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
	transform: translateY(-2px);
}

@keyframes neon-pulse {

	0%,
	100% {
		box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
		border-color: rgba(0, 255, 136, 0.5);
	}

	50% {
		box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
		border-color: rgba(0, 255, 136, 1);
	}
}

/* --- 6. Footer Clean up --- */
footer,
.elementor-location-footer {
	background-color: #000 !important;
	/* Pure black for grounded feel */
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}