/* ============================================
 GUZALIC Luxurious Salon - Main Stylesheet
 Black & Silver Luxury Theme
============================================ */

/* CSS Variables */
:root {
 --primary-black: #0a0a0a;
 --secondary-black: #1a1a1a;
 --tertiary-black: #2a2a2a;
 --primary-silver: #c0c0c0;
 --light-silver: #e8e8e8;
 --dark-silver: #808080;
 --gold-accent: #d4af37;
 --gold-light: #f4e4bc;
 --rose-gold: #b76e79;
 --white: #ffffff;
 --off-white: #f5f5f5;
 --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4e4bc 50%, #d4af37 100%);
 --gradient-dark: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
 --gradient-silver: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
 --shadow-luxury: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 --shadow-gold: 0 10px 40px rgba(212, 175, 55, 0.3);
 --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Reset & Base Styles */
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 font-size: 16px;
}

body {
 font-family: 'Montserrat', sans-serif;
 background-color: var(--primary-black);
 color: var(--light-silver);
 line-height: 1.7;
 overflow-x: hidden;
 cursor: default;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
 width: 10px;
}

::-webkit-scrollbar-track {
 background: var(--primary-black);
}

::-webkit-scrollbar-thumb {
 background: var(--gold-accent);
 border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
 background: var(--gold-light);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
 font-family: 'Playfair Display', serif;
 font-weight: 600;
 line-height: 1.3;
 color: var(--white);
}

.elegant-text {
 font-family: 'Cormorant Garamond', serif;
 font-style: italic;
}

/* Selection Styling */
::selection {
 background: var(--gold-accent);
 color: var(--primary-black);
}

/* ============================================
 LOADING SCREEN
============================================ */
.loader-wrapper {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--primary-black);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 99999;
 transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-wrapper.loaded {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

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

.loader-logo {
 width: 200px;
 height: 200px;
 animation: logoReveal 1s ease-out;
}

.loader-logo img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 filter: brightness(0) invert(1);
}

.loader-text {
 margin-top: 20px;
 font-family: 'Playfair Display', serif;
 font-size: 2rem;
 color: var(--gold-accent);
 letter-spacing: 8px;
 animation: textFade 0.8s ease-out;
}

@keyframes logoReveal {
 0%{transform: scale(0.8) rotate(-5deg);opacity: 0;}
 100%{transform: scale(1) rotate(0deg);opacity: 1;}
}

@keyframes textFade {
 0%{opacity: 0;}
 100%{opacity: 1;}
}

/* ============================================
 CUSTOM CURSOR
============================================ */
.custom-cursor {
 width: 20px;
 height: 20px;
 border: 2px solid var(--gold-accent);
 border-radius: 50%;
 position: fixed;
 pointer-events: none;
 z-index: 99998;
 transition: transform 0.15s ease, border-color 0.3s ease;
 transform: translate(-50%, -50%);
}

.cursor-dot {
 width: 5px;
 height: 5px;
 background: var(--gold-accent);
 border-radius: 50%;
 position: fixed;
 pointer-events: none;
 z-index: 99999;
 transform: translate(-50%, -50%);
}

.custom-cursor.hover {
 transform: translate(-50%, -50%) scale(1.5);
 border-color: var(--rose-gold);
 background: rgba(212, 175, 55, 0.1);
}

/* ============================================
 ULTRA PREMIUM TOPBAR
============================================ */
.topbar {
 background: linear-gradient(90deg, var(--primary-black) 0%, var(--secondary-black) 50%, var(--primary-black) 100%);
 border-bottom: 1px solid rgba(212, 175, 55, 0.3);
 padding: 10px 5%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1001;
 font-size: 0.85rem;
}

.topbar-left {
 display: flex;
 align-items: center;
 gap: 25px;
}

.topbar-item {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--light-silver);
 text-decoration: none;
 transition: var(--transition-smooth);
}

.topbar-item:hover {
 color: var(--gold-accent);
}

.topbar-item i {
 color: var(--gold-accent);
 font-size: 0.9rem;
}

.topbar-right {
 display: flex;
 align-items: center;
 gap: 20px;
}

.topbar-social {
 display: flex;
 gap: 12px;
}

.topbar-social a {
 width: 28px;
 height: 28px;
 background: rgba(212, 175, 55, 0.1);
 border: 1px solid rgba(212, 175, 55, 0.3);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--gold-accent);
 font-size: 0.75rem;
 transition: var(--transition-smooth);
}

.topbar-social a:hover {
 background: var(--gold-accent);
 color: var(--primary-black);
 transform: translateY(-2px);
}

.topbar-cta {
 background: var(--gradient-gold);
 color: var(--primary-black);
 padding: 6px 18px;
 border-radius: 20px;
 font-weight: 600;
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 text-decoration: none;
 transition: var(--transition-smooth);
}

.topbar-cta:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-gold);
}

/* ============================================
 NAVIGATION
============================================ */
.header-wrapper {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
}

.navbar {
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 /* padding: 15px 5%;*/
 display: flex;
 justify-content: space-between;
 align-items: center;
 z-index: 1000;
 transition: var(--transition-smooth);
 background: rgba(10, 10, 10, 0.85);
 backdrop-filter: blur(15px);
 border-bottom: 1px solid rgba(212, 175, 55, 0.15);
 margin-top: 48px;
}

.navbar.scrolled {
 background: rgba(10, 10, 10, 0.98);
 backdrop-filter: blur(20px);
 padding: 12px 5%;
 box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
 margin-top: 0;
}

.header-wrapper.scrolled .topbar {
 transform: translateY(-100%);
 opacity: 0;
}

.nav-logo {
 display: flex;
 align-items: center;
 gap: 15px;
 text-decoration: none;
}

.nav-logo img {
 height: 130px;
 width: auto;
 transition: var(--transition-smooth);
 filter: brightness(0) invert(1);
}

.navbar.scrolled .nav-logo img {
 height: 50px;
}

.nav-logo-text {
 font-family: 'Playfair Display', serif;
 font-size: 1.8rem;
 color: var(--white);
 letter-spacing: 3px;
 font-weight: 600;
}

.nav-logo-tagline {
 font-size: 0.7rem;
 color: var(--gold-accent);
 letter-spacing: 4px;
 text-transform: uppercase;
 margin-top: -5px;
}

.nav-menu {
 display: flex;
 align-items: center;
 gap: 50px;
 list-style: none;
}

.nav-item {
 position: relative;
}

.nav-link {
 color: var(--white);
 text-decoration: none;
 font-size: 0.9rem;
 font-weight: 500;
 letter-spacing: 1px;
 text-transform: uppercase;
 padding: 10px 8px;
 transition: var(--transition-smooth);
 position: relative;
}

.nav-link::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--gold-accent);
 transition: var(--transition-smooth);
}

.nav-link:hover {
 color: var(--gold-accent);
}

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

.nav-link.active {
 color: var(--gold-accent);
}

.nav-link.active::after {
 width: 100%;
}

/* Dropdown Menu */
.nav-dropdown {
 position: relative;
}

.dropdown-toggle {
 display: flex;
 align-items: center;
 gap: 5px;
 cursor: pointer;
}

.dropdown-toggle i {
 font-size: 0.7rem;
 transition: var(--transition-smooth);
}

.nav-dropdown:hover .dropdown-toggle i {
 transform: rotate(180deg);
}

.dropdown-menu {
 position: absolute;
 top: 100%;
 left: -20px;
 min-width: 250px;
 background: rgba(26, 26, 26, 0.98);
 backdrop-filter: blur(20px);
 border: 1px solid rgba(212, 175, 55, 0.2);
 border-radius: 10px;
 padding: 15px 0;
 opacity: 0;
 visibility: hidden;
 transform: translateY(20px);
 transition: var(--transition-smooth);
 box-shadow: var(--shadow-luxury);
}

.nav-dropdown:hover .dropdown-menu {
 opacity: 1;
 visibility: visible;
 transform: translateY(10px);
}

.dropdown-item {
 display: block;
 padding: 12px 25px;
 color: var(--light-silver);
 text-decoration: none;
 font-size: 0.85rem;
 letter-spacing: 1px;
 transition: var(--transition-smooth);
 border-left: 3px solid transparent;
}

.dropdown-item:hover {
 background: rgba(212, 175, 55, 0.1);
 color: var(--gold-accent);
 border-left-color: var(--gold-accent);
 padding-left: 30px;
}

.dropdown-item i {
 margin-right: 10px;
 color: var(--gold-accent);
}

/* Book Now Button */
.nav-book-btn {
 background: var(--gradient-gold);
 color: var(--primary-black);
 padding: 12px 30px;
 border-radius: 30px;
 text-decoration: none;
 font-weight: 600;
 font-size: 0.85rem;
 letter-spacing: 1px;
 text-transform: uppercase;
 transition: var(--transition-smooth);
 position: relative;
 overflow: hidden;
}

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

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

.nav-book-btn:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-gold);
}

/* Mobile Menu Toggle */
.nav-toggle {
 display: none;
 flex-direction: column;
 gap: 6px;
 cursor: pointer;
 padding: 10px;
 background: none;
 border: none;
 z-index: 1001;
}

.nav-toggle span {
 width: 30px;
 height: 2px;
 background: var(--white);
 transition: var(--transition-smooth);
 display: block;
}

.nav-toggle.active span:nth-child(1) {
 transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
 opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
 transform: rotate(-45deg) translate(7px, -6px);
}

/* ============================================
 HERO SECTION
============================================ */
.hero {
 position: relative;
 height: 100vh;
 min-height: 750px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 padding-top: 120px;
}

/* Hero Slider */
.hero-slider {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
}

.hero-slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 1.5s ease;
}

.hero-slide.active {
 opacity: 1;
}

.hero-slide img,
.hero-slide .hero-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(0.4);
 position: absolute;
 top: 0;
 left: 0;
 content-visibility: auto;
}

.hero-slide .hero-video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(0.4);
 position: absolute;
 top: 0;
 left: 0;
}

.hero-slide .hero-fallback {
 display: none;
}

.hero-slide[data-type="video"] .hero-fallback {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}

/* TV Section Image */
.tv-screen .tv-image,
.tv-screen .tv-video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.transformation-video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 15px;
}

/* Hero Video Background */
.hero-video-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(0.3);
}

/* Hero Overlay */
.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
 180deg,
 rgba(10, 10, 10, 0.3) 0%,
 rgba(10, 10, 10, 0.5) 50%,
 rgba(10, 10, 10, 0.8) 100%
 );
 z-index: 2;
}

/* Particles Container */
#particles-js {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 3;
}

/* Smoke Animation */
.smoke-animation {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 40%;
 z-index: 4;
 pointer-events: none;
 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%230a0a0a" fill-opacity="0.8" d="M0,192L48,181.3C96,171,192,149,288,154.7C384,160,480,192,576,202.7C672,213,768,203,864,181.3C960,160,1056,128,1152,128C1248,128,1344,160,1392,176L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat center bottom;
 background-size: cover;
 animation: smokeFloat 10s ease-in-out infinite;
}

@keyframes smokeFloat {
 0%, 100%{transform: translateY(0);opacity: 0.8;}
 50%{transform: translateY(-20px);opacity: 1;}
}

/* Hero Content */
.hero-content {
 position: relative;
 z-index: 10;
 text-align: center;
 max-width: 1000px;
 padding: 0 20px;
}

.hero-subtitle {
 font-size: 1rem;
 color: var(--gold-accent);
 letter-spacing: 8px;
 text-transform: uppercase;
 margin-bottom: 10px;
 opacity: 0;
 animation: fadeInUp 1s ease 0.5s forwards;
}

.hero-title {
 font-family: 'Playfair Display', serif;
 font-size: 5rem;
 font-weight: 600;
 color: var(--white);
 line-height: 1.1;
 margin-bottom: 30px;
 opacity: 0;
 animation: fadeInUp 1s ease 0.8s forwards;
}

.hero-title span {
 display: block;
 font-family: 'Cormorant Garamond', serif;
 font-style: italic;
 font-weight: 400;
}

.hero-description {
 font-size: 1.2rem;
 color: var(--light-silver);
 max-width: 600px;
 margin: 0 auto 40px;
 opacity: 0;
 animation: fadeInUp 1s ease 1.1s forwards;
}

.hero-buttons {
 display: flex;
 justify-content: center;
 gap: 20px;
 flex-wrap: wrap;
 opacity: 0;
 animation: fadeInUp 1s ease 1.4s forwards;
 position: relative;
 z-index: 15;
 margin-top: 20px;
}

.hero-btn {
 padding: 18px 45px;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 600;
 font-size: 0.9rem;
 letter-spacing: 2px;
 text-transform: uppercase;
 transition: var(--transition-smooth);
 position: relative;
 overflow: hidden;
}

.hero-btn-primary {
 background: var(--gradient-gold);
 color: var(--primary-black);
}

.hero-btn-primary:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-gold);
}

.hero-btn-secondary {
 background: transparent;
 color: var(--white);
 border: 2px solid var(--gold-accent);
}

.hero-btn-secondary:hover {
 background: var(--gold-accent);
 color: var(--primary-black);
 transform: translateY(-5px);
}

/* Hero Slider Navigation */
.hero-nav {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 50px;
 height: 50px;
 background: rgba(212, 175, 55, 0.2);
 border: 2px solid var(--gold-accent);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 20;
 transition: var(--transition-smooth);
 color: var(--gold-accent);
 font-size: 1.2rem;
}

.hero-nav:hover {
 background: var(--gold-accent);
 color: var(--primary-black);
 transform: translateY(-50%) scale(1.1);
}

.hero-prev {
 left: 30px;
}

.hero-next {
 right: 30px;
}

/* Hero Dots */
.hero-dots {
 position: absolute;
 bottom: 50px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 15px;
 z-index: 20;
}

.hero-dot {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.3);
 cursor: pointer;
 transition: var(--transition-smooth);
}

.hero-dot.active {
 background: var(--gold-accent);
 transform: scale(1.3);
}

.hero-dot:hover {
 background: var(--gold-light);
}

/* Scroll Indicator */
.scroll-indicator {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 20;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 5px;
 opacity: 0;
 animation: fadeInUp 1s ease 2s forwards;
}

.scroll-indicator span {
 font-size: 0.65rem;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: var(--gold-accent);
 display: block;
 margin-bottom: 2px;
}

.scroll-mouse {
 width: 22px;
 height: 36px;
 border: 1.5px solid var(--gold-accent);
 border-radius: 12px;
 position: relative;
 margin: 0 auto;
}

.scroll-wheel {
 width: 3px;
 height: 7px;
 background: var(--gold-accent);
 border-radius: 2px;
 position: absolute;
 top: 6px;
 left: 50%;
 transform: translateX(-50%);
 animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {
 0%, 100%{transform: translateX(-50%) translateY(0);opacity: 1;}
 50%{transform: translateX(-50%) translateY(15px);opacity: 0;}
}

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

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

@keyframes fadeInLeft {
 from {
 opacity: 0;
 transform: translateX(-30px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

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

@keyframes scaleIn {
 from {
 opacity: 0;
 transform: scale(0.8);
 }
 to {
 opacity: 1;
 transform: scale(1);
 }
}

/* ============================================
 SECTION STYLES
============================================ */
.section {
 padding: 120px 5%;
 position: relative;
}

.section-dark {
 background: var(--primary-black);
}

.section-darker {
 background: var(--secondary-black);
}

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

.section-subtitle {
 font-size: 0.9rem;
 color: var(--gold-accent);
 letter-spacing: 5px;
 text-transform: uppercase;
 margin-bottom: 15px;
 display: inline-block;
}

.section-title {
 font-size: 3.5rem;
 margin-bottom: 20px;
 position: relative;
 display: inline-block;
}

.section-title::after {
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 3px;
 background: var(--gradient-gold);
}

.section-description {
 font-size: 1.1rem;
 color: var(--dark-silver);
 max-width: 700px;
 margin: 30px auto 0;
 line-height: 1.8;
}

/* ============================================
 ABOUT SECTION
============================================ */
.about-section {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 80px;
 align-items: center;
}

.about-image {
 position: relative;
}

.about-image img {
 width: 100%;
 border-radius: 20px;
 box-shadow: var(--shadow-luxury);
}

.about-image::before {
 content: '';
 position: absolute;
 top: -20px;
 left: -20px;
 width: 100%;
 height: 100%;
 border: 3px solid var(--gold-accent);
 border-radius: 20px;
 z-index: -1;
}

.about-content h2 {
 font-size: 3rem;
 margin-bottom: 20px;
}

.about-content p {
 color: var(--light-silver);
 margin-bottom: 20px;
 line-height: 1.8;
}

.about-features {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 margin-top: 40px;
}

.about-feature {
 display: flex;
 align-items: center;
 gap: 15px;
}

.about-feature i {
 width: 50px;
 height: 50px;
 background: rgba(212, 175, 55, 0.1);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--gold-accent);
 font-size: 1.2rem;
}

.about-feature span {
 font-weight: 500;
 color: var(--white);
}

/* ============================================
 SERVICES SECTION
============================================ */
.services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 gap: 40px;
}

.service-card {
 background: var(--secondary-black);
 border-radius: 20px;
 overflow: hidden;
 transition: var(--transition-smooth);
 position: relative;
 border: 1px solid rgba(212, 175, 55, 0.1);
}

.service-card:hover {
 transform: translateY(-15px);
 box-shadow: var(--shadow-gold);
 border-color: var(--gold-accent);
}

.service-image {
 position: relative;
 height: 280px;
 overflow: hidden;
}

.service-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: var(--transition-smooth);
}

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

.service-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.9) 100%);
 display: flex;
 align-items: flex-end;
 padding: 30px;
 opacity: 0;
 transition: var(--transition-smooth);
}

.service-card:hover .service-overlay {
 opacity: 1;
}

.service-content {
 padding: 30px;
}

.service-icon {
 width: 70px;
 height: 70px;
 background: var(--gradient-gold);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 20px;
 font-size: 1.8rem;
 color: var(--primary-black);
 margin-top: -55px;
 position: relative;
 z-index: 10;
 box-shadow: var(--shadow-gold);
}

.service-title {
 font-size: 1.5rem;
 margin-bottom: 15px;
 color: var(--white);
}

.service-description {
 color: var(--dark-silver);
 font-size: 0.95rem;
 margin-bottom: 20px;
}

.service-price {
 color: var(--gold-accent);
 font-weight: 600;
 font-size: 1.1rem;
}

.service-link {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 color: var(--gold-accent);
 text-decoration: none;
 font-weight: 500;
 font-size: 0.9rem;
 margin-top: 15px;
 transition: var(--transition-smooth);
}

.service-link:hover {
 gap: 15px;
}

/* ============================================
 3D TV SECTION
============================================ */
.tv-section {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: radial-gradient(ellipse at center, var(--secondary-black) 0%, var(--primary-black) 70%);
 perspective: 1500px;
}

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

.tv-wrapper {
 position: relative;
 width: 800px;
 max-width: 90vw;
 margin: 0 auto;
 transform-style: preserve-3d;
 animation: tvFloat 6s ease-in-out infinite;
}

@keyframes tvFloat {
 0%, 100%{transform: rotateY(-5deg) rotateX(5deg);}
 50%{transform: rotateY(5deg) rotateX(-5deg);}
}

.tv-frame {
 background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #2a2a2a 100%);
 border-radius: 20px;
 padding: 20px 20px 60px;
 box-shadow: 
 0 50px 100px rgba(0, 0, 0, 0.8),
 inset 0 2px 0 rgba(255, 255, 255, 0.1),
 0 0 50px rgba(212, 175, 55, 0.2);
 position: relative;
}

.tv-frame::before {
 content: '';
 position: absolute;
 top: 5px;
 left: 5px;
 right: 5px;
 bottom: 65px;
 border: 2px solid rgba(212, 175, 55, 0.3);
 border-radius: 15px;
 pointer-events: none;
}

.tv-screen {
 background: #000;
 border-radius: 10px;
 overflow: hidden;
 aspect-ratio: 16/9;
 position: relative;
}

.tv-screen video,
.tv-screen iframe {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.tv-stand {
 position: absolute;
 bottom: 15px;
 left: 50%;
 transform: translateX(-50%);
 width: 150px;
 height: 20px;
 background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
 border-radius: 10px;
}

.tv-reflection {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
 border-radius: 10px;
 pointer-events: none;
}

.tv-content-text {
 margin-top: 50px;
}

.tv-content-text h2 {
 font-size: 2.5rem;
 margin-bottom: 15px;
}

.tv-content-text p {
 color: var(--dark-silver);
 max-width: 600px;
 margin: 0 auto;
}

/* ============================================
 3D IPHONE SECTION
============================================ */
.iphone-section {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--primary-black) 0%, var(--secondary-black) 50%, var(--primary-black) 100%);
 perspective: 2000px;
 padding: 100px 5%;
}

.iphone-container {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 100px;
 max-width: 1400px;
 flex-wrap: wrap;
}

.iphone-content {
 flex: 1;
 min-width: 300px;
}

.iphone-content h2 {
 font-size: 3rem;
 margin-bottom: 20px;
}

.iphone-content p {
 color: var(--light-silver);
 margin-bottom: 30px;
 font-size: 1.1rem;
 line-height: 1.8;
}

.iphone-features {
 list-style: none;
}

.iphone-features li {
 display: flex;
 align-items: center;
 gap: 15px;
 margin-bottom: 15px;
 color: var(--light-silver);
}

.iphone-features li i {
 color: var(--gold-accent);
 font-size: 1.2rem;
}

.iphone-wrapper {
 position: relative;
 width: 320px;
 height: 650px;
 transform-style: preserve-3d;
 animation: iphoneFloat 8s ease-in-out infinite;
}

@keyframes iphoneFloat {
 0%, 100%{transform: rotateY(-15deg) rotateX(5deg) translateY(0);}
 25%{transform: rotateY(-10deg) rotateX(0deg) translateY(-20px);}
 50%{transform: rotateY(15deg) rotateX(-5deg) translateY(0);}
 75%{transform: rotateY(10deg) rotateX(0deg) translateY(-20px);}
}

.iphone-frame {
 position: relative;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
 border-radius: 55px;
 padding: 15px;
 box-shadow: 
 0 50px 100px rgba(0, 0, 0, 0.8),
 inset 0 2px 0 rgba(255, 255, 255, 0.2),
 inset 0 -2px 0 rgba(0, 0, 0, 0.5),
 0 0 60px rgba(212, 175, 55, 0.15);
}

.iphone-frame::before {
 content: '';
 position: absolute;
 top: 0;
 right: -3px;
 width: 4px;
 height: 80px;
 background: #3a3a3a;
 border-radius: 0 3px 3px 0;
 top: 150px;
}

.iphone-frame::after {
 content: '';
 position: absolute;
 top: 100px;
 left: -3px;
 width: 4px;
 height: 40px;
 background: #3a3a3a;
 border-radius: 3px 0 0 3px;
}

.iphone-screen {
 width: 100%;
 height: 100%;
 background: #000;
 border-radius: 45px;
 overflow: hidden;
 position: relative;
}

.iphone-notch {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 120px;
 height: 35px;
 background: #000;
 border-radius: 0 0 20px 20px;
 z-index: 10;
}

.iphone-notch::before {
 content: '';
 position: absolute;
 top: 10px;
 left: 50%;
 transform: translateX(-50%);
 width: 10px;
 height: 10px;
 background: #1a1a1a;
 border-radius: 50%;
}

.iphone-video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.iphone-home-bar {
 position: absolute;
 bottom: 8px;
 left: 50%;
 transform: translateX(-50%);
 width: 120px;
 height: 5px;
 background: #fff;
 border-radius: 3px;
}

/* ============================================
 3D LOCATION SECTION
============================================ */
.location-section {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--secondary-black);
 perspective: 1500px;
 padding: 100px 5%;
}

.location-container {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 80px;
 max-width: 1400px;
 flex-wrap: wrap;
}

.location-content {
 flex: 1;
 min-width: 300px;
}

.location-content h2 {
 font-size: 3rem;
 margin-bottom: 20px;
}

.location-content p {
 color: var(--light-silver);
 margin-bottom: 30px;
 font-size: 1.1rem;
}

.location-info {
 list-style: none;
}

.location-info li {
 display: flex;
 align-items: flex-start;
 gap: 15px;
 margin-bottom: 25px;
 color: var(--light-silver);
}

.location-info li i {
 color: var(--gold-accent);
 font-size: 1.5rem;
 width: 50px;
 height: 50px;
 background: rgba(212, 175, 55, 0.1);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.location-info-text h4 {
 color: var(--white);
 margin-bottom: 5px;
}

.location-map-wrapper {
 position: relative;
 width: 600px;
 max-width: 90vw;
 height: 450px;
 transform-style: preserve-3d;
 animation: mapFloat 6s ease-in-out infinite;
}

@keyframes mapFloat {
 0%, 100%{transform: rotateY(5deg) rotateX(-5deg);}
 50%{transform: rotateY(-5deg) rotateX(5deg);}
}

.location-map-frame {
 width: 100%;
 height: 100%;
 background: var(--tertiary-black);
 border-radius: 20px;
 overflow: hidden;
 border: 3px solid rgba(212, 175, 55, 0.3);
 box-shadow: 
 0 50px 100px rgba(0, 0, 0, 0.5),
 0 0 50px rgba(212, 175, 55, 0.1);
 position: relative;
}

.location-map-frame iframe {
 width: 100%;
 height: 100%;
 filter: grayscale(100%) invert(92%) contrast(83%);
 border: none;
}

.location-pin {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -100%);
 z-index: 10;
}

.location-pin-icon {
 font-size: 3rem;
 color: var(--gold-accent);
 animation: pinBounce 2s ease-in-out infinite;
 filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.5));
}

@keyframes pinBounce {
 0%, 100%{transform: translateY(0);}
 50%{transform: translateY(-15px);}
}

.location-pulse {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100px;
 height: 100px;
 border-radius: 50%;
 background: rgba(212, 175, 55, 0.2);
 animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
 0%{transform: translate(-50%, -50%) scale(0.5);opacity: 1;}
 100%{transform: translate(-50%, -50%) scale(2);opacity: 0;}
}

.get-directions-btn {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 background: var(--gradient-gold);
 color: var(--primary-black);
 padding: 15px 35px;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 2px;
 transition: var(--transition-smooth);
 margin-top: 30px;
}

.get-directions-btn:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-gold);
}

/* ============================================
 STATS SECTION
============================================ */
.stats-section {
 background: linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.9)), url('../images/reception_area_1765360691536.JPG');
 background-size: cover;
 background-attachment: fixed;
 padding: 100px 5%;
}

.stats-grid {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 40px;
 max-width: 1200px;
 margin: 0 auto;
 flex-wrap: wrap;
}

.stat-item {
 text-align: center;
 padding: 40px;
 background: rgba(26, 26, 26, 0.8);
 border-radius: 20px;
 border: 1px solid rgba(212, 175, 55, 0.2);
 transition: var(--transition-smooth);
 flex: 1;
 min-width: 250px;
 max-width: 350px;
}

.stat-item:hover {
 transform: translateY(-10px);
 border-color: var(--gold-accent);
 box-shadow: var(--shadow-gold);
}

.stat-icon {
 font-size: 3rem;
 color: var(--gold-accent);
 margin-bottom: 20px;
}

.stat-number {
 font-family: 'Playfair Display', serif;
 font-size: 4rem;
 font-weight: 700;
 color: var(--white);
 margin-bottom: 10px;
}

.stat-label {
 color: var(--dark-silver);
 font-size: 1rem;
 text-transform: uppercase;
 letter-spacing: 2px;
}

/* ============================================
 TESTIMONIALS SECTION
============================================ */
.testimonials-section {
 background: var(--secondary-black);
}

.testimonials-slider {
 max-width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}

.testimonial-card {
 background: var(--tertiary-black);
 border-radius: 20px;
 padding: 50px;
 text-align: center;
 border: 1px solid rgba(212, 175, 55, 0.2);
 position: relative;
}

.testimonial-card::before {
 content: '\f10d';
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
 font-size: 4rem;
 color: rgba(212, 175, 55, 0.2);
 position: absolute;
 top: 30px;
 left: 30px;
}

.testimonial-content {
 font-size: 1.3rem;
 color: var(--light-silver);
 font-style: italic;
 line-height: 1.8;
 margin-bottom: 30px;
}

.testimonial-author {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 20px;
}

.testimonial-avatar {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 border: 3px solid var(--gold-accent);
}

.testimonial-info h4 {
 color: var(--white);
 margin-bottom: 5px;
}

.testimonial-info span {
 color: var(--gold-accent);
 font-size: 0.9rem;
}

.testimonial-stars {
 color: var(--gold-accent);
 margin-top: 10px;
}

/* ============================================
 INSTAGRAM SECTION
============================================ */
.instagram-section {
 background: var(--primary-black);
}

.instagram-grid {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 15px;
}

.instagram-item {
 position: relative;
 aspect-ratio: 1;
 overflow: hidden;
 border-radius: 15px;
 cursor: pointer;
}

.instagram-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: var(--transition-smooth);
}

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

.instagram-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(212, 175, 55, 0.8);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: var(--transition-smooth);
}

.instagram-item:hover .instagram-overlay {
 opacity: 1;
}

.instagram-overlay i {
 font-size: 2rem;
 color: var(--primary-black);
}

.instagram-follow {
 text-align: center;
 margin-top: 50px;
}

.instagram-follow a {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 color: var(--gold-accent);
 text-decoration: none;
 font-size: 1.2rem;
 transition: var(--transition-smooth);
}

.instagram-follow a:hover {
 color: var(--white);
}

/* ============================================
 YOUTUBE SECTION
============================================ */
.youtube-section {
 background: var(--secondary-black);
}

.youtube-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 30px;
}

.youtube-item {
 position: relative;
 border-radius: 20px;
 overflow: hidden;
 background: var(--tertiary-black);
 transition: var(--transition-smooth);
}

.youtube-item:hover {
 transform: translateY(-10px);
 box-shadow: var(--shadow-gold);
}

.youtube-thumbnail {
 position: relative;
 aspect-ratio: 16/9;
}

.youtube-thumbnail img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.youtube-play {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 80px;
 height: 80px;
 background: rgba(212, 175, 55, 0.9);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: var(--transition-smooth);
}

.youtube-play i {
 color: var(--primary-black);
 font-size: 2rem;
 margin-left: 5px;
}

.youtube-item:hover .youtube-play {
 transform: translate(-50%, -50%) scale(1.1);
 box-shadow: var(--shadow-gold);
}

.youtube-info {
 padding: 20px;
}

.youtube-title {
 color: var(--white);
 font-size: 1.1rem;
 margin-bottom: 10px;
}

.youtube-views {
 color: var(--dark-silver);
 font-size: 0.9rem;
}

/* ============================================
 NEWSLETTER SECTION
============================================ */
.newsletter-section {
 background: linear-gradient(135deg, var(--gold-accent) 0%, var(--rose-gold) 100%);
 padding: 80px 5%;
}

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

.newsletter-content h2 {
 color: var(--primary-black);
 font-size: 2.5rem;
 margin-bottom: 15px;
}

.newsletter-content p {
 color: var(--secondary-black);
 margin-bottom: 30px;
 font-size: 1.1rem;
}

.newsletter-form {
 display: flex;
 gap: 15px;
 max-width: 500px;
 margin: 0 auto;
}

.newsletter-form input {
 flex: 1;
 padding: 18px 25px;
 border: none;
 border-radius: 50px;
 background: var(--white);
 font-size: 1rem;
 outline: none;
}

.newsletter-form button {
 padding: 18px 40px;
 background: var(--primary-black);
 color: var(--white);
 border: none;
 border-radius: 50px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 2px;
 cursor: pointer;
 transition: var(--transition-smooth);
}

.newsletter-form button:hover {
 background: var(--secondary-black);
 transform: translateY(-3px);
}

/* ============================================
 FOOTER - ULTRA PREMIUM DESIGN
============================================ */
.footer {
 background: linear-gradient(180deg, var(--secondary-black) 0%, var(--primary-black) 100%);
 padding: 100px 5% 40px;
 border-top: 3px solid var(--gold-accent);
 position: relative;
}

.footer::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
}

.footer-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-bottom: 50px;
 margin-bottom: 50px;
 border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.footer-top-brand {
 display: flex;
 align-items: center;
 gap: 20px;
}

.footer-top-brand img {
 height: 70px;
 filter: brightness(0) invert(1);
}

.footer-top-tagline {
 font-family: 'Cormorant Garamond', serif;
 font-size: 1.3rem;
 font-style: italic;
 color: var(--gold-accent);
 max-width: 300px;
}

.footer-top-cta {
 display: flex;
 gap: 15px;
}

.footer-top-cta a {
 padding: 15px 30px;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 600;
 font-size: 0.85rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 transition: var(--transition-smooth);
}

.footer-cta-primary {
 background: var(--gradient-gold);
 color: var(--primary-black);
}

.footer-cta-primary:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-gold);
}

.footer-cta-secondary {
 border: 2px solid var(--gold-accent);
 color: var(--gold-accent);
}

.footer-cta-secondary:hover {
 background: var(--gold-accent);
 color: var(--primary-black);
}

.footer-grid {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
 gap: 60px;
 margin-bottom: 60px;
}

.footer-brand {
 padding-right: 30px;
}

.footer-brand img {
 height: 90px;
 margin-bottom: 25px;
 filter: brightness(0) invert(1);
}

.footer-brand p {
 color: var(--dark-silver);
 margin-bottom: 25px;
 line-height: 1.9;
 font-size: 0.95rem;
}

.footer-social {
 display: flex;
 gap: 12px;
}

.footer-social a {
 width: 50px;
 height: 50px;
 background: linear-gradient(135deg, var(--secondary-black), var(--tertiary-black));
 border: 1px solid rgba(212, 175, 55, 0.3);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--gold-accent);
 font-size: 1.1rem;
 transition: var(--transition-smooth);
}

.footer-social a:hover {
 background: var(--gradient-gold);
 color: var(--primary-black);
 transform: translateY(-5px) scale(1.1);
 border-color: var(--gold-accent);
 box-shadow: var(--shadow-gold);
}

.footer-links h4 {
 color: var(--white);
 font-size: 1.1rem;
 margin-bottom: 30px;
 position: relative;
 padding-bottom: 15px;
 font-family: 'Playfair Display', serif;
 letter-spacing: 1px;
}

.footer-links h4::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 50px;
 height: 2px;
 background: var(--gradient-gold);
}

.footer-links ul {
 list-style: none;
}

.footer-links li {
 margin-bottom: 15px;
}

.footer-links a {
 color: var(--dark-silver);
 text-decoration: none;
 transition: var(--transition-smooth);
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 0.95rem;
}

.footer-links a i {
 color: var(--gold-accent);
 font-size: 0.8rem;
 width: 20px;
}

.footer-links a:hover {
 color: var(--gold-accent);
 padding-left: 8px;
}

.footer-contact-info {
 background: rgba(212, 175, 55, 0.05);
 border: 1px solid rgba(212, 175, 55, 0.15);
 border-radius: 15px;
 padding: 25px;
}

.footer-contact-info h4 {
 margin-bottom: 25px;
}

.footer-contact-item {
 display: flex;
 align-items: flex-start;
 gap: 15px;
 margin-bottom: 20px;
 color: var(--light-silver);
}

.footer-contact-item:last-child {
 margin-bottom: 0;
}

.footer-contact-item i {
 color: var(--gold-accent);
 font-size: 1rem;
 margin-top: 3px;
}

.footer-contact-item span {
 font-size: 0.9rem;
 line-height: 1.6;
}

.footer-contact-item a {
 color: var(--light-silver);
 text-decoration: none;
 transition: var(--transition-smooth);
}

.footer-contact-item a:hover {
 color: var(--gold-accent);
}

.footer-bottom {
 border-top: 1px solid rgba(212, 175, 55, 0.2);
 padding-top: 35px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 20px;
}

.footer-bottom p {
 color: var(--dark-silver);
 font-size: 0.9rem;
}

.footer-bottom-links {
 display: flex;
 gap: 30px;
}

.footer-bottom-links a {
 color: var(--dark-silver);
 text-decoration: none;
 font-size: 0.85rem;
 transition: var(--transition-smooth);
 position: relative;
}

.footer-bottom-links a::after {
 content: '';
 position: absolute;
 bottom: -3px;
 left: 0;
 width: 0;
 height: 1px;
 background: var(--gold-accent);
 transition: var(--transition-smooth);
}

.footer-bottom-links a:hover {
 color: var(--gold-accent);
}

.footer-bottom-links a:hover::after {
 width: 100%;
}

/* ============================================
 FLOATING BUTTONS
============================================ */
.floating-buttons {
 position: fixed;
 bottom: 30px;
 right: 30px;
 display: flex;
 flex-direction: column;
 gap: 15px;
 z-index: 999;
}

.floating-btn {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 color: var(--white);
 text-decoration: none;
 transition: var(--transition-smooth);
 box-shadow: var(--shadow-luxury);
}

.whatsapp-btn {
 background: #25D366;
}

.call-btn {
 background: var(--gold-accent);
 color: var(--primary-black);
}

.floating-btn:hover {
 transform: scale(1.1) translateY(-5px);
}

.floating-btn::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background: inherit;
 animation: floatingPulse 2s ease-in-out infinite;
 z-index: -1;
}

@keyframes floatingPulse {
 0%, 100%{transform: scale(1);opacity: 0.5;}
 50%{transform: scale(1.3);opacity: 0;}
}

/* Back to Top */
.back-to-top {
 position: fixed;
 bottom: 30px;
 left: 30px;
 width: 50px;
 height: 50px;
 background: var(--secondary-black);
 border: 2px solid var(--gold-accent);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--gold-accent);
 font-size: 1.2rem;
 cursor: pointer;
 opacity: 0;
 visibility: hidden;
 transition: var(--transition-smooth);
 z-index: 999;
}

.back-to-top.show {
 opacity: 1;
 visibility: visible;
}

.back-to-top:hover {
 background: var(--gold-accent);
 color: var(--primary-black);
 transform: translateY(-5px);
}

/* ============================================
 RESPONSIVE DESIGN
============================================ */

/* Topbar Responsive */
@media (max-width: 992px) {
 .topbar {
 padding: 8px 3%;
 font-size: 0.75rem;
 }
 
 .topbar-left {
 gap: 15px;
 }
 
 .topbar-item span {
 display: none;
 }
 
 .topbar-cta {
 padding: 5px 12px;
 font-size: 0.7rem;
 }
 
 .navbar {
 margin-top: 40px;
 }
 
 .navbar.scrolled {
 margin-top: 0;
 }
}

@media (max-width: 768px) {
 .topbar {
 justify-content: center;
 flex-wrap: wrap;
 gap: 10px;
 }
 
 .topbar-left {
 display: none;
 }
 
 .topbar-right {
 width: 100%;
 justify-content: center;
 }
 
 .navbar {
 margin-top: 38px;
 padding: 12px 3%;
 }
 
 .hero {
 padding-top: 100px;
 }
 
 .footer-top {
 flex-direction: column;
 gap: 30px;
 text-align: center;
 }
 
 .footer-top-cta {
 flex-direction: column;
 }
 
 .footer-grid {
 grid-template-columns: 1fr;
 text-align: center;
 }
 
 .footer-links h4::after {
 left: 50%;
 transform: translateX(-50%);
 }
 
 .footer-social {
 justify-content: center;
 }
 
 .footer-contact-info {
 text-align: left;
 }
}

@media (max-width: 480px) {
 .topbar-social {
 gap: 8px;
 }
 
 .topbar-social a {
 width: 24px;
 height: 24px;
 font-size: 0.65rem;
 }
 
 .topbar-cta {
 padding: 4px 10px;
 font-size: 0.65rem;
 }
}

@media (max-width: 1200px) {
 .hero-title {
 font-size: 4rem;
 }
 
 .section-title {
 font-size: 3rem;
 }
 
 .stats-grid {
 display: flex;
 flex-direction: column;
 align-items: center;
 }

 .stat-item {
 width: 100%;
 max-width: 400px;
 }
 
 .youtube-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 
 .footer-grid {
 grid-template-columns: 1fr 1fr;
 }
}

@media (max-width: 992px) {
 .nav-menu {
 position: fixed;
 top: 0;
 right: -100%;
 width: 100%;
 height: 100vh;
 background: rgba(10, 10, 10, 0.98);
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 30px;
 transition: var(--transition-smooth);
 }
 
 .nav-menu.active {
 right: 0;
 }
 
 .nav-toggle {
 display: flex;
 z-index: 1001;
 }
 
 .dropdown-menu {
 position: static;
 background: transparent;
 box-shadow: none;
 border: none;
 opacity: 1;
 visibility: visible;
 transform: none;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease;
 }
 
 .nav-dropdown.active .dropdown-menu {
 max-height: 500px;
 }
 
 .hero-title {
 font-size: 3rem;
 }
 
 .about-section {
 grid-template-columns: 1fr;
 gap: 50px;
 }
 
 .iphone-container,
 .location-container {
 flex-direction: column;
 text-align: center;
 }
 
 .tv-wrapper {
 width: 100%;
 }
 
 .iphone-wrapper {
 width: 280px;
 height: 570px;
 }
 
 .instagram-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

@media (max-width: 992px) {
 .nav-toggle{display: flex !important;}
 
 .nav-menu {
 display: none;
 position: fixed;
 top: 80px;
 left: 0;
 width: 100%;
 flex-direction: column;
 background: rgba(10, 10, 10, 0.99);
 backdrop-filter: blur(20px);
 padding: 20px;
 gap: 8px;
 border-top: 1px solid rgba(212, 175, 55, 0.2);
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
 z-index: 998;
 max-height: 90vh;
 overflow-y: auto;
 }
 
 .nav-menu.active{
 display: flex !important;
 animation: slideDown 0.3s ease;
 }
 
 @keyframes slideDown {
 from{transform: translateY(-20px);opacity: 0;}
 to{transform: translateY(0);opacity: 1;}
 }
 
 .nav-item{
 width: 100%;
 border-bottom: 1px solid rgba(212, 175, 55, 0.1);
 padding: 8px 0;
 }
 
 .nav-link{
 display: block;
 padding: 12px 15px;
 color: var(--light-silver);
 }
 
 .dropdown-menu {
 position: static;
 background: rgba(40, 40, 40, 0.95);
 border: none;
 border-radius: 8px;
 margin-top: 8px;
 opacity: 0;
 visibility: hidden;
 max-height: 0;
 overflow: hidden;
 transition: all 0.3s ease;
 }
 
 .nav-dropdown.active .dropdown-menu {
 opacity: 1;
 visibility: visible;
 max-height: 600px;
 padding: 10px 0;
 }
 
 .dropdown-item {
 padding: 10px 20px;
 font-size: 0.85rem;
 }
 
 .nav-book-btn {
 width: 100%;
 text-align: center;
 padding: 12px 20px;
 margin-top: 10px;
 }
}

@media (max-width: 768px) {
 .navbar{
 padding: 15px 3%;
 flex-wrap: wrap;
 }
 
 .nav-logo{
 flex: 1;
 }
 
 .nav-logo img{
 height: 50px;
 }
 
 .nav-logo-text{
 font-size: 1.1rem;
 }
 
 .nav-logo-tagline {
 font-size: 0.5rem;
 }
 
 .section {
 padding: 80px 5%;
 }
 
 .hero-title {
 font-size: 2.5rem;
 }
 
 .hero-subtitle {
 font-size: 0.8rem;
 letter-spacing: 4px;
 }
 
 .hero-buttons {
 flex-direction: column;
 align-items: center;
 }
 
 .hero-btn {
 width: 100%;
 max-width: 300px;
 text-align: center;
 }
 
 .hero-nav {
 display: none;
 }
 
 .section-title {
 font-size: 2.2rem;
 }
 
 .services-grid {
 grid-template-columns: 1fr;
 }
 
 .stats-grid {
 grid-template-columns: 1fr;
 }
 
 .stat-number {
 font-size: 3rem;
 }
 
 .youtube-grid {
 grid-template-columns: 1fr;
 }
 
 .newsletter-form {
 flex-direction: column;
 }
 
 .footer-grid {
 grid-template-columns: 1fr;
 text-align: center;
 }
 
 .footer-links h4::after {
 left: 50%;
 transform: translateX(-50%);
 }
 
 .footer-social {
 justify-content: center;
 }
 
 .footer-bottom {
 flex-direction: column;
 text-align: center;
 }
 
 .floating-buttons {
 bottom: 20px;
 right: 20px;
 }
 
 .floating-btn {
 width: 50px;
 height: 50px;
 font-size: 1.2rem;
 }
 
 .custom-cursor,
 .cursor-dot {
 display: none;
 }
}

@media (max-width: 480px) {
 .hero-title {
 font-size: 2rem;
 }
 
 .nav-logo-text {
 font-size: 1.3rem;
 }
 
 .nav-logo-tagline {
 font-size: 0.6rem;
 }
 
 .nav-book-btn {
 padding: 10px 16px;
 font-size: 0.7rem;
 }
 
 .section {
 padding: 60px 4%;
 }
 
 .section-title {
 font-size: 1.8rem;
 }
 
 .instagram-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 
 .testimonial-card {
 padding: 30px 20px;
 }
 
 .testimonial-content {
 font-size: 1.1rem;
 }
 
 .booking-container {
 grid-template-columns: 1fr;
 gap: 30px;
 }
 
 .form-row {
 flex-direction: column;
 }
 
 .form-group {
 width: 100%;
 }
 
 .contact-cards {
 gap: 10px;
 }
 
 .contact-card {
 gap: 12px;
 padding: 15px;
 }
}

/* ============================================
 UTILITY CLASSES
============================================ */
.text-gold {
 color: var(--gold-accent);
}

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

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

.bg-gradient-gold {
 background: var(--gradient-gold);
}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 10px;}
.mb-2{margin-bottom: 20px;}
.mb-3{margin-bottom: 30px;}
.mb-4{margin-bottom: 40px;}
.mb-5{margin-bottom: 50px;}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.mt-3{margin-top: 30px;}
.mt-4{margin-top: 40px;}
.mt-5{margin-top: 50px;}

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

.d-flex{display: flex;}
.d-grid{display: grid;}
.d-block{display: block;}
.d-none{display: none;}

.justify-center{justify-content: center;}
.align-center{align-items: center;}
.flex-wrap{flex-wrap: wrap;}

.container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 20px;
}

/* Hamam Highlight Navigation */
.nav-highlight {
 background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 50%, #d4af37 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 font-weight: 600;
 position: relative;
 padding: 8px 15px !important;
 border: 2px solid var(--gold-accent);
 border-radius: 25px;
 animation: hamam-glow 2s ease-in-out infinite alternate;
}

.nav-highlight:hover {
 background: var(--gold-accent);
 -webkit-background-clip: unset;
 -webkit-text-fill-color: var(--primary-black);
 background-clip: unset;
}

.nav-highlight i {
 margin-right: 5px;
}

@keyframes hamam-glow {
 0%{box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);}
 100%{box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);}
}

/* Mega Dropdown Menu */
.mega-dropdown {
 min-width: 700px !important;
 display: flex;
 flex-wrap: wrap;
 padding: 25px !important;
 left: 50% !important;
 transform: translateX(-50%) translateY(20px) !important;
}

.nav-dropdown:hover .mega-dropdown {
 transform: translateX(-50%) translateY(10px) !important;
}

.dropdown-column {
 flex: 1;
 min-width: 150px;
 padding: 0 15px;
 border-right: 1px solid rgba(212, 175, 55, 0.1);
}

.dropdown-column:last-child {
 border-right: none;
}

.dropdown-heading {
 color: var(--gold-accent);
 font-size: 0.85rem;
 font-weight: 600;
 letter-spacing: 1px;
 text-transform: uppercase;
 margin-bottom: 15px;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.mega-dropdown .dropdown-item {
 padding: 8px 0;
 font-size: 0.8rem;
}

.mega-dropdown .dropdown-item:hover {
 padding-left: 10px;
}

/* Hamam Page Styles */
.hamam-hero .page-hero-bg img {
 filter: brightness(0.4);
}

.hamam-intro {
 text-align: center;
 max-width: 900px;
 margin: 0 auto;
}

.intro-text {
 font-size: 1.3rem;
 color: var(--gold-accent);
 margin-bottom: 20px;
 font-family: 'Cormorant Garamond', serif;
 font-style: italic;
}

.hamam-features {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 30px;
 margin-top: 50px;
}

.feature-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 padding: 20px;
 background: var(--secondary-black);
 border-radius: 15px;
 border: 1px solid rgba(212, 175, 55, 0.1);
 min-width: 120px;
 transition: var(--transition-smooth);
}

.feature-item:hover {
 border-color: var(--gold-accent);
 transform: translateY(-5px);
}

.feature-item i {
 font-size: 2rem;
 color: var(--gold-accent);
}

.feature-item span {
 font-size: 0.9rem;
 font-weight: 500;
}

/* Hamam Packages */
.hamam-packages {
 display: flex;
 justify-content: center;
 gap: 40px;
 flex-wrap: wrap;
 padding: 0 5%;
}

.hamam-package {
 background: var(--secondary-black);
 border-radius: 25px;
 padding: 40px;
 max-width: 450px;
 width: 100%;
 border: 2px solid rgba(212, 175, 55, 0.2);
 position: relative;
 transition: var(--transition-smooth);
}

.hamam-package:hover {
 border-color: var(--gold-accent);
 transform: translateY(-10px);
 box-shadow: var(--shadow-gold);
}

.hamam-package.premium {
 border-color: var(--gold-accent);
 background: linear-gradient(135deg, var(--secondary-black) 0%, rgba(212, 175, 55, 0.1) 100%);
}

.package-badge {
 position: absolute;
 top: -15px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--gold-accent);
 color: var(--primary-black);
 padding: 8px 25px;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.premium-badge {
 background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 100%);
}

.package-icon {
 width: 80px;
 height: 80px;
 background: rgba(212, 175, 55, 0.1);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 20px auto;
}

.package-icon i {
 font-size: 2.5rem;
 color: var(--gold-accent);
}

.hamam-package h3 {
 text-align: center;
 font-size: 1.8rem;
 margin-bottom: 10px;
}

.package-price {
 text-align: center;
 font-size: 2.5rem;
 color: var(--gold-accent);
 font-weight: 700;
 margin-bottom: 15px;
}

.package-description {
 text-align: center;
 color: var(--dark-silver);
 margin-bottom: 25px;
}

.package-features {
 list-style: none;
 margin-bottom: 25px;
}

.package-features li {
 padding: 10px 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 display: flex;
 align-items: center;
 gap: 10px;
}

.package-features li i {
 color: var(--gold-accent);
}

.package-benefits {
 background: rgba(212, 175, 55, 0.1);
 padding: 20px;
 border-radius: 15px;
 margin-bottom: 25px;
}

.package-benefits h4 {
 color: var(--gold-accent);
 margin-bottom: 10px;
 font-size: 1rem;
}

.package-benefits p {
 font-size: 0.9rem;
 line-height: 1.6;
 margin: 0;
}

.hamam-package .hero-btn {
 width: 100%;
 text-align: center;
 display: block;
}

/* Benefits Grid */
.benefits-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 60px;
 align-items: center;
}

.benefits-content h2 {
 font-size: 2.5rem;
 margin-bottom: 30px;
}

.benefits-list {
 list-style: none;
}

.benefits-list li {
 padding: 12px 0;
 display: flex;
 align-items: center;
 gap: 15px;
 font-size: 1.1rem;
}

.benefits-list li i {
 color: var(--gold-accent);
 font-size: 1.2rem;
}

.benefits-image img {
 width: 100%;
 border-radius: 20px;
 box-shadow: var(--shadow-luxury);
}

/* Who Should Grid */
.who-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 30px;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 5%;
}

.who-item {
 text-align: center;
 padding: 30px 20px;
 background: var(--secondary-black);
 border-radius: 20px;
 border: 1px solid rgba(212, 175, 55, 0.1);
 transition: var(--transition-smooth);
}

.who-item:hover {
 border-color: var(--gold-accent);
 transform: translateY(-5px);
}

.who-item i {
 font-size: 2.5rem;
 color: var(--gold-accent);
 margin-bottom: 15px;
}

.who-item h4 {
 font-size: 1.1rem;
 margin-bottom: 5px;
}

.who-item p {
 font-size: 0.9rem;
 color: var(--dark-silver);
 margin: 0;
}

/* Testimonial Highlight */
.testimonial-highlight {
 background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
 padding: 60px;
 border-radius: 25px;
 text-align: center;
 max-width: 900px;
 margin: 0 auto;
 position: relative;
 border: 1px solid rgba(212, 175, 55, 0.2);
}

.testimonial-highlight i {
 font-size: 3rem;
 color: var(--gold-accent);
 margin-bottom: 20px;
}

.testimonial-highlight p {
 font-size: 1.3rem;
 font-family: 'Cormorant Garamond', serif;
 font-style: italic;
 line-height: 1.8;
}

/* CTA Section */
.cta-section {
 text-align: center;
}

.cta-buttons {
 display: flex;
 justify-content: center;
 gap: 20px;
 flex-wrap: wrap;
 margin-bottom: 30px;
}

.contact-info {
 color: var(--dark-silver);
}

.contact-info i {
 color: var(--gold-accent);
 margin-right: 10px;
}

/* Video Container for Instagram */
.video-container {
 display: flex;
 justify-content: center;
 padding: 40px 0;
}

.video-container .iphone-frame {
 width: 320px;
 height: 600px;
}

.video-container .iphone-screen iframe {
 width: 100%;
 height: 100%;
 border: none;
 border-radius: 30px;
}

/* Mobile Responsive for Mega Dropdown */
@media (max-width: 992px) {
 .mega-dropdown {
 min-width: 100% !important;
 flex-direction: column;
 position: fixed;
 left: 0 !important;
 right: 0;
 transform: translateY(20px) !important;
 max-height: 60vh;
 overflow-y: auto;
 }
 
 .nav-dropdown:hover .mega-dropdown {
 transform: translateY(10px) !important;
 }
 
 .dropdown-column {
 border-right: none;
 border-bottom: 1px solid rgba(212, 175, 55, 0.1);
 padding: 15px;
 }
 
 .benefits-grid {
 grid-template-columns: 1fr;
 }
 
 .hamam-packages {
 flex-direction: column;
 align-items: center;
 }
}

/* Animation Classes */
[data-aos] {
 opacity: 0;
 transition-property: opacity, transform;
}

[data-aos].aos-animate {
 opacity: 1;
}

[data-aos="fade-up"] {
 transform: translateY(50px);
}

[data-aos="fade-up"].aos-animate {
 transform: translateY(0);
}

[data-aos="fade-down"] {
 transform: translateY(-50px);
}

[data-aos="fade-down"].aos-animate {
 transform: translateY(0);
}

[data-aos="fade-left"] {
 transform: translateX(50px);
}

[data-aos="fade-left"].aos-animate {
 transform: translateX(0);
}

[data-aos="fade-right"] {
 transform: translateX(-50px);
}

[data-aos="fade-right"].aos-animate {
 transform: translateX(0);
}

[data-aos="zoom-in"] {
 transform: scale(0.8);
}

[data-aos="zoom-in"].aos-animate {
 transform: scale(1);
}

[data-aos="flip-up"] {
 transform: perspective(2500px) rotateX(-100deg);
}

[data-aos="flip-up"].aos-animate {
 transform: perspective(2500px) rotateX(0);
}