芝麻web文件管理V1.00

编辑当前文件:/home/unicorntechnolog/public_html/newtzar/contact.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tzar Night Club - Limassol's Most Exclusive Experience</title>
    
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">

/* --- GLOBAL & UTILITIES --- */
        body, html {
            height: 100%;
            margin: 0;
            overflow-x: hidden;
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Inter', sans-serif;
            overflow-y: auto;
        }

h1, h2, h3, h4, h5, .display-huge {
            font-family: var(--font-heading);
        }

/* ===========================================
           FIXED TOP BAR STYLES - LOGO SIZE FIXED
        ============================================ */
        /* Top Bar */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            z-index: 1000;
            pointer-events: none;
        }

.top-bar * {
            pointer-events: auto;
        }

.top-logo {
            width: 120px;
            height: 120px;
            object-fit: contain;
            transition: all 0.3s ease;
            opacity: 1;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.48);
            padding: 10px;
            border-radius: 50%;
        }

.top-logo.hidden {
            display: none;
        }

.top-logo.visible {
            opacity: 1;
        }

.top-logo:hover {
            transform: scale(1.05);
        }

.menu-btn {
            background: rgba(30, 30, 30, 0.8);
            backdrop-filter: blur(10px);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.2);
            padding: 8px 24px;
            border-radius: 50px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 1;
            transform: translateY(0);
            font-family: var(--font-body);
        }

.menu-btn.visible {
            opacity: 1;
            transform: translateY(0);
        }

.menu-btn:hover {
            background: #fff;
            color: #000;
        }

/* ===========================================
           METALAB MENU STYLES
        =========================================== */
        /* SIDEBAR CONTAINER (Desktop Only) */
        .sidebar-container {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 20px;
            z-index: 900;
            pointer-events: none;
            opacity: 0;
            transform: translateX(-20px);
            transition: all var(--transition-speed) var(--ease);
        }

.sidebar-container.context-visible {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

.nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: all var(--transition-speed) var(--ease);
            pointer-events: auto;
        }

.nav-link-item {
            display: block;
            margin-bottom: 15px;
            font-size: 1.1rem;
            color: #666;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            width: fit-content;
            padding: 8px 20px;
            border-radius: 20px;
            position: relative;
            background: transparent;
            border: 1px solid transparent;
            font-family: var(--font-body);
        }

.nav-link-item.active {
            color: var(--gold-color) !important;
            background: rgba(212, 175, 55, 0.15);
            border: 1px solid rgba(212, 175, 55, 0.4);
            transform: translateX(10px);
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
        }

.nav-link-item:hover {
            color: var(--gold-color);
            transform: translateX(5px);
        }

.global-menu .nav-link-item {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 20px;
            background: none !important;
            border: none !important;
            padding: 0;
        }
        
        .global-menu .nav-link-item:hover {
            color: #888;
        }

/* Main Content */
        .main-wrapper {
            margin-left: 0;
            width: 100%;
            transition: transform var(--transition-speed) var(--ease), opacity var(--transition-speed) var(--ease), filter var(--transition-speed) var(--ease);
            transform-origin: center right;
            will-change: transform, opacity;
        }

/* OPEN STATE CLASSES */
        body.menu-open .sidebar-container {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

body.menu-open .global-menu {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
            pointer-events: auto;
        }

body.menu-open .main-wrapper {
            transform: scale(0.85) translateX(50px);
            opacity: 0.4;
            filter: blur(2px);
            pointer-events: none;
        }

/* Update top menu button text */
        body.menu-open .menu-btn {
            background: #fff;
            color: #000;
        }

/* Mobile Menu Toggle Button */
        .mobile-menu-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: var(--gold-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #050505;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 1002;
            box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
            transition: all 0.3s ease;
            border: 2px solid #050505;
            display: none;
        }
        
        .mobile-menu-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(212, 175, 55, 0.6);
        }
        
        .mobile-menu-toggle.active {
            transform: rotate(45deg);
            background: #050505;
            color: var(--gold-color);
            border-color: var(--gold-color);
        }
        
        /* Mobile Global Menu */
        .mobile-global-menu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(5, 5, 5, 0.98);
            backdrop-filter: blur(30px);
            z-index: 1001;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .mobile-global-menu.active {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .mobile-global-nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        
        .mobile-global-nav-item {
            margin: 25px 0;
        }
        
        .mobile-global-nav-link {
            color: #fff;
            text-decoration: none;
            font-size: 2.2rem;
            font-family: var(--font-heading);
            font-weight: 400;
            transition: all 0.3s ease;
            display: inline-block;
            padding: 10px 20px;
        }
        
        .mobile-global-nav-link:hover {
            color: var(--gold-color);
            transform: scale(1.05);
        }
        
        .mobile-close-menu {
            position: absolute;
            top: 30px;
            right: 30px;
            color: var(--gold-color);
            font-size: 1.2rem;
            cursor: pointer;
            background: none;
            border: none;
            padding: 10px;
        }

/* WhatsApp Button */
        .whatsapp-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
            border: 2px solid white;
            text-decoration: none;
        }
        
        .whatsapp-button:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
            background: #128C7E;
        }
        
        .whatsapp-button span {
            display: none;
            margin-left: 10px;
            font-size: 0.9rem;
            font-family: var(--font-body);
        }

/* ===========================================
           TZAR NIGHT CLUB CONTENT STYLES
        =========================================== */
        /* Typography fixes to match image */
        h1, h2, h3, h4, h5 {
            font-weight: 200;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: var(--font-heading);
        }

.text-xs { 
            font-size: 11px; 
            letter-spacing: 1px; 
            text-transform: uppercase; 
            color: var(--text-muted); 
            font-family: var(--font-body);
        }
        
        /* The Giant Header Text */
        .display-huge { 
            font-size: 9vw;
            font-weight: 100; 
            line-height: 0.9;
            letter-spacing: -2px;
            color: #fff;
            font-family: var(--font-heading);
        }
        
        /* Custom Inputs - FIXED FOCUS RINGS */
        .form-control-custom {
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--border-color);
            border-radius: 0;
            color: white;
            padding: 15px 0;
            font-size: 14px;
            font-weight: 300;
            font-family: var(--font-body);
            outline: none !important;
            box-shadow: none !important;
        }
        
        .form-control-custom:focus {
            background: transparent;
            border-color: #fff;
            color: white;
            outline: none !important;
            box-shadow: none !important;
        }
        
        .form-control-custom::placeholder { 
            color: #555; 
            font-family: var(--font-body);
        }
        
        .btn-arrow { 
            background: none; 
            border: none; 
            color: white; 
            font-size: 11px; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            padding: 0; 
            text-decoration: none; 
            cursor: pointer;
            font-family: var(--font-body);
        }
        .btn-arrow:hover { color: #ccc; }

/* Sections */
        section { padding: 100px 0; }
        
        /* Image Grid in Contact Section */
        .grid-img-tall { 
            height: 100%; 
            width: 100%; 
            object-fit: cover; 
            background: #222; 
            min-height: 500px; 
            filter: grayscale(100%); 
            transition: filter 0.3s; 
        }
        .grid-img-small { 
            height: 245px; 
            width: 100%; 
            object-fit: cover; 
            background: #222; 
            filter: grayscale(100%); 
        }
        .grid-img-tall:hover, .grid-img-small:hover { filter: grayscale(0%); }

/* Map styling */
        .map-container { 
            background: #111; 
            height: 400px; 
            width: 100%; 
            position: relative; 
            border: 1px solid #222;
            overflow: hidden;
        }
        .map-overlay { opacity: 0.4; width: 100%; height: 100%; object-fit: cover; }

/* FAQ Accordion */
        .accordion-item { background: transparent; border: none; border-bottom: 1px solid var(--border-color); }
        .accordion-button { 
            background: transparent; 
            color: white; 
            font-weight: 300; 
            padding: 30px 0; 
            font-size: 18px; 
            box-shadow: none !important; 
            text-align: left;
            font-family: var(--font-heading);
            outline: none !important;
        }
        .accordion-button:not(.collapsed) { background: transparent; color: white; }
        .accordion-button::after { filter: invert(1); transform: scale(0.7); }
        .accordion-button:focus {
            outline: none !important;
            box-shadow: none !important;
            border-color: transparent !important;
        }
        .accordion-body { padding: 0 0 30px 0; color: #999; font-size: 14px; font-family: var(--font-body); }

/* Hero Section */
        .hero-section {
            position: relative;
            background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(5,5,5,1)), url('./assets/images/02_View26-scaled.jpg?auto=format&fit=crop&w=1600&q=80');
            background-size: cover;
            background-position: center;
            min-height: 85vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding-bottom: 80px;
        }
        
        /* Adjust first section for header */
        .pt-5 {
            padding-top: 50px !important;
        }
        
        /* IMPROVED FOOTER DESIGN */
        .main-footer {
            background-color: #000000;
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

.footer-container {
            width: 100%;
            max-width: 1400px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            position: relative;
            border: 1px solid rgba(212, 175, 55, 0.1);
            background: rgba(5, 5, 5, 0.95);
        }

/* Header for context */
        .footer-header {
            padding: 60px 80px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
            position: relative;
            overflow: hidden;
        }

.footer-header h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--gold);
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }

.footer-header p {
            font-size: 1.1rem;
            color: white;
            max-width: 600px;
            line-height: 1.6;
            font-family: var(--font-body);
        }

/* MAIN FOOTER DESIGN */
        .luxury-footer-content {
            padding: 100px 80px 80px;
            position: relative;
            overflow: hidden;
        }

/* Gold Accent Line */
        .accent-line {
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, var(--gold), #e8b962);
            margin-bottom: 50px;
            position: relative;
        }

.accent-line::after {
            content: '';
            position: absolute;
            right: -20px;
            top: -3px;
            width: 8px;
            height: 8px;
            background: var(--gold);
            transform: rotate(45deg);
        }

/* Main Grid Layout */
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 100px;
            margin-bottom: 100px;
        }

/* Left Column - Main Content */
        .footer-main h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 4rem;
            font-weight: 500;
            color: var(--gold);
            line-height: 1.1;
            margin-bottom: 30px;
            letter-spacing: -1px;
        }

.footer-main p {
            font-size: 1.2rem;
            color: white;
            line-height: 1.8;
            margin-bottom: 50px;
            max-width: 500px;
            font-family: var(--font-body);
        }

/* Membership Button */
        .membership-btn {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            background: transparent;
            border: 1px solid var(--gold);
            color: var(--gold);
            padding: 20px 40px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

.membership-btn:hover {
            background: var(--gold);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
        }

.membership-btn i {
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }

.membership-btn:hover i {
            transform: translateX(5px);
        }

/* Social Media */
        .social-section {
            margin-top: 60px;
        }

.social-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            color: white;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 25px;
            position: relative;
            padding-left: 20px;
        }

.social-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 1px;
            background: var(--gold);
        }

.social-icons {
            display: flex;
            gap: 15px;
        }

.social-icon {
            width: 45px;
            height: 45px;
            border: 1px solid rgba(212, 175, 55, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.social-icon:hover {
            border-color: var(--gold);
            color: var(--gold);
            transform: translateY(-3px);
        }

/* Right Column - Quick Links */
        .quick-links h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 30px;
            position: relative;
            padding-left: 20px;
        }

.quick-links h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 1px;
            background: var(--gold);
        }

.quick-links-list {
            list-style: none;
            padding: 0;
        }

.quick-links-list li {
            margin-bottom: 20px;
        }

.quick-links-list a {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding-left: 20px;
            font-family: var(--font-body);
        }

.quick-links-list a::before {
            content: '›';
            position: absolute;
            left: 0;
            color: var(--gold);
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
        }

.quick-links-list a:hover {
            color: var(--gold);
            padding-left: 25px;
        }

.quick-links-list a:hover::before {
            opacity: 1;
            transform: translateX(0);
        }

/* Bottom Section - Contact Info */
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 60px;
        }

.club-info {
            font-size: 0.9rem;
            color: #dddddd;
            line-height: 1.8;
            font-family: var(--font-body);
        }

.club-info div {
            margin-bottom: 5px;
        }

.club-info i {
            color: var(--gold);
            margin-right: 10px;
            width: 15px;
        }

.club-tagline {
            font-style: italic;
            color: white;
            margin-bottom: 10px;
            font-size: 1rem;
            font-family: var(--font-body);
        }

.contact-info {
            font-size: 0.9rem;
            color: #dddddd;
            line-height: 1.8;
            font-family: var(--font-body);
        }

.contact-info div {
            margin-bottom: 5px;
        }

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

/* CENTERED COPYRIGHT */
        .footer-copyright {
            text-align: center;
            padding: 30px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

.copyright-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            color: #666;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

/* IMAGE SCROLL ANIMATION STYLES */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .fade-in-left {
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .fade-in-right {
            opacity: 0;
            transform: translateX(30px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .scale-in {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .fade-in.animated,
        .fade-in-left.animated,
        .fade-in-right.animated,
        .scale-in.animated {
            opacity: 1;
            transform: translateY(0) translateX(0) scale(1);
        }
        
        /* Add slight delay for staggered animations */
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }

/* ===========================================
           RESPONSIVE MEDIA QUERIES
        =========================================== */

/* Medium devices (tablets, 768px - 992px) */
        @media (max-width: 992px) and (min-width: 768px) {
            /* Hero Section */
            .hero-section {
                min-height: 70vh;
                padding-bottom: 60px;
            }
            
            .display-huge {
                font-size: 12vw;
            }
            
            /* Main Content Padding */
            section {
                padding: 70px 0;
            }
            
            /* About Section */
            #main-floor .col-lg-10 {
                padding: 0 20px;
            }
            
            /* Membership Section */
            #vip-lounge .row {
                flex-direction: column;
            }
            
            #vip-lounge .col-lg-5 {
                order: 2;
                margin-bottom: 50px;
                width: 100%;
            }
            
            #vip-lounge .col-lg-7 {
                order: 1;
                margin-bottom: 40px;
                width: 100%;
            }
            
            /* Location Section */
            #dance-floor .row {
                flex-direction: column;
            }
            
            #dance-floor .col-lg-4 {
                margin-bottom: 40px;
                width: 100%;
            }
            
            #dance-floor .col-lg-8 {
                width: 100%;
            }
            
            .map-container {
                height: 400px !important;
            }
            
            /* Contact Section */
            #music-events .row {
                flex-wrap: wrap;
            }
            
            #music-events .col-md-3 {
                width: 33.33%;
                margin-bottom: 30px;
            }
            
            /* FAQ Section */
            .border-top-dark .row {
                flex-direction: column;
            }
            
            .border-top-dark .col-lg-5 {
                width: 100%;
                margin-bottom: 50px;
            }
            
            .border-top-dark .col-lg-7 {
                width: 100%;
            }
            
            /* Newsletter Section */
            section .row.align-items-center {
                flex-direction: column;
            }
            
            section .col-lg-5 {
                width: 100%;
                margin-bottom: 50px;
            }
            
            section .col-lg-7 {
                width: 100%;
            }
            
            /* Form Inputs */
            .form-control-custom {
                font-size: 16px; /* Better for mobile */
            }
            
            /* Accordion */
            .accordion-button {
                font-size: 16px;
                padding: 20px 0;
            }
            
            /* Image Grid */
            .grid-img-tall {
                min-height: 400px;
            }
            
            .grid-img-small {
                height: 200px;
            }
        }

/* Small devices (phones, less than 768px) */
        @media (max-width: 767px) {
            /* Hero Section */
            .hero-section {
                min-height: 60vh;
                padding-bottom: 40px;
                /* margin-top: 40px; */
            }
            
            .display-huge {
                font-size: 15vw;
                line-height: 1;
                letter-spacing: -1px;
            }
            
            /* Main Content */
            section {
                padding: 50px 0;
            }
            
            .container {
                padding-left: 20px;
                padding-right: 20px;
            }
            
            /* About Section */
            #main-floor {
                padding-top: 30px !important;
            }
            
            #main-floor h2.display-5 {
                font-size: 2.5rem;
                margin-bottom: 30px;
            }
            
            #main-floor .col-lg-10 {
                padding: 0;
            }
            
            #main-floor div[style*="height: 500px"] {
                height: 350px;
            }
            
            /* Membership Section */
            #vip-lounge .row {
                flex-direction: column;
            }
            
            #vip-lounge .col-lg-5,
            #vip-lounge .col-lg-7 {
                width: 100%;
            }
            
            #vip-lounge .col-lg-5 {
                order: 2;
                margin-bottom: 40px;
            }
            
            #vip-lounge .col-lg-7 {
                order: 1;
                margin-bottom: 30px;
            }
            
            #vip-lounge h3.h2 {
                font-size: 1.8rem;
            }
            
            .grid-img-tall {
                min-height: 300px;
                margin-bottom: 15px;
            }
            
            .grid-img-small {
                height: 150px;
                margin-bottom: 15px;
            }
            
            /* VIP lounge grid adjustments */
            #vip-lounge .row.g-3.h-100 {
                height: auto !important;
            }
            
            #vip-lounge .col-6 {
                width: 100% !important;
            }
            
            #vip-lounge .d-flex.flex-column.justify-content-between.gap-3 {
                gap: 15px !important;
            }
            
            /* Location Section */
            #dance-floor .row {
                flex-direction: column;
            }
            
            #dance-floor .col-lg-4,
            #dance-floor .col-lg-8 {
                width: 100%;
            }
            
            #dance-floor .col-lg-4 {
                margin-bottom: 30px;
            }
            
            #dance-floor h2.h3 {
                font-size: 1.5rem;
            }
            
            .map-container {
                height: 300px !important;
            }
            
            /* Contact Section */
            #music-events .row {
                flex-direction: column;
                text-align: center;
            }
            
            #music-events .col-md-3 {
                width: 100%;
                margin-bottom: 40px;
            }
            
            #music-events img {
                margin: 20px auto;
            }
            
            /* FAQ Section */
            .border-top-dark .row {
                flex-direction: column;
            }
            
            .border-top-dark .col-lg-5,
            .border-top-dark .col-lg-7 {
                width: 100%;
            }
            
            .border-top-dark .col-lg-5 {
                margin-bottom: 40px;
            }
            
            .border-top-dark h2.h2 {
                font-size: 2rem;
            }
            
            .border-top-dark .row.g-2.w-75 {
                width: 100% !important;
                margin-top: 20px;
            }
            
            .border-top-dark .col-6 {
                width: 50% !important;
            }
            
            .accordion-button {
                font-size: 1rem;
                padding: 15px 0;
            }
            
            .accordion-body {
                font-size: 0.9rem;
                padding: 0 0 20px 0;
            }
            
            /* Newsletter Section */
            section .row.align-items-center {
                flex-direction: column;
            }
            
            section .col-lg-5,
            section .col-lg-7 {
                width: 100%;
            }
            
            section .col-lg-5 {
                margin-bottom: 40px;
            }
            
            section .display-5 {
                font-size: 2.5rem;
            }
            
            section .col-lg-5 .d-flex {
                justify-content: center;
            }
            
            section .col-lg-5 img {
                width: 120px !important;
                height: 120px !important;
            }
            
            section .col-lg-5 img:nth-child(2) {
                width: 150px !important;
                height: 200px !important;
            }
            
            /* Form Elements */
            .form-control-custom {
                font-size: 16px;
                padding: 12px 0;
            }
            
            .btn-arrow {
                font-size: 12px;
            }
            
            /* Text Elements */
            .text-xs {
                font-size: 10px;
            }
            
            h2 {
                font-size: 1.8rem !important;
            }
            
            h3 {
                font-size: 1.3rem !important;
            }
            
            /* Spacing adjustments */
            .mb-5 {
                margin-bottom: 2rem !important;
            }
            
            .mb-4 {
                margin-bottom: 1.5rem !important;
            }
            
            .mb-3 {
                margin-bottom: 1rem !important;
            }
            
            /* Grid adjustments */
            .row.g-5 {
                gap: 2rem !important;
            }
            
            .row.g-3 {
                gap: 1rem !important;
            }
        }

/* Extra Small devices (phones, less than 576px) */
        @media (max-width: 575px) {
            .display-huge {
                /* font-size: 17vw; */
            }
            
            .hero-section {
                min-height: 50vh;
            }
            
            section {
                padding: 40px 0;
            }
            
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            /* Membership form on mobile */
            #vip-lounge form .d-flex {
                flex-direction: column;
                align-items: flex-start !important;
            }
            
            #vip-lounge form .btn-arrow {
                margin-top: 10px;
            }
            
            /* Contact section on mobile */
            #music-events .col-md-3 {
                padding: 0 10px;
            }
            
            /* Newsletter input on mobile */
            section .d-flex {
                flex-direction: column;
            }
            
            section .d-flex input {
                width: 100% !important;
                margin-bottom: 15px;
                padding: 10px 0;
            }
            
            section .d-flex .btn-arrow {
                align-self: flex-start;
            }
            
            /* Image adjustments */
            .grid-img-tall {
                min-height: 250px;
            }
            
            .grid-img-small {
                height: 120px;
            }
            
            /* FAQ images */
            .border-top-dark img {
                height: 150px !important;
            }
        }

/* Prevent horizontal scroll on mobile */
        @media (max-width: 992px) {
            body {
                overflow-x: hidden;
                width: 100%;
            }
            
            .main-wrapper {
                width: 100%;
                overflow-x: hidden;
            }
            
            .row {
                margin-left: 0;
                margin-right: 0;
            }
        }

/* Fix for bootstrap columns on mobile */
        @media (max-width: 767px) {
            [class*="col-"] {
                padding-left: 0;
                padding-right: 0;
            }
            
            /* Adjust the 2-column layouts to 1 column */
            .col-6 {
                flex: 0 0 100%;
                max-width: 100%;
            }
            
            /* FAQ images - keep 2 columns */
            .border-top-dark .col-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }

.mobile-menu-toggle {
                width: 50px;
                height: 50px;
                bottom: 100px;
                right: 15px;
                font-size: 1.3rem;
            }
        }

/* Tablet specific adjustments */
        @media (min-width: 768px) and (max-width: 992px) {
            /* Adjust 2-column layouts */
            .col-lg-7, .col-lg-5 {
                flex: 0 0 100%;
                max-width: 100%;
            }
            
            /* VIP lounge images - keep side by side but adjust */
            #vip-lounge .col-6 {
                flex: 0 0 48%;
                max-width: 48%;
            }
            
            /* Location section adjustments */
            #dance-floor .d-flex.gap-3 {
                flex-direction: row;
                align-items: center;
            }
            
            /* Contact section - keep 3 columns but adjust spacing */
            #music-events .col-md-3 {
                flex: 0 0 30%;
                max-width: 30%;
            }
        }

/* Ensure proper spacing for mobile menu */
        @media (max-width: 992px) {
            body.menu-open .main-wrapper {
                transform: none !important;
                opacity: 1 !important;
                filter: none !important;
            }
            
            .whatsapp-button {
                bottom: 90px;
                right: 20px;
                z-index: 1000;
            }
            
            .mobile-menu-toggle {
                display: flex !important;
                z-index: 1002;
            }
        }

/* RESPONSIVE DESIGN - Original */
        @media (max-width: 992px) {
            /* Show mobile elements */
            .mobile-menu-toggle {
                display: flex !important;
            }
            
            /* Hide desktop menu elements on mobile */
            .menu-btn {
                display: none !important;
            }
            
            .sidebar-container {
                display: none !important;
            }
            
            /* WhatsApp button positioning for mobile */
            .whatsapp-button {
                bottom: 90px;
                right: 20px;
                z-index: 1000;
            }
            
            /* Adjust body padding for mobile menu */
            body {
                padding-bottom: 20px;
            }
            
            .hero-section {
                min-height: 70vh;
                padding-bottom: 40px;
                /* margin-top: 60px; */
            }
            
            .display-huge {
                font-size: 15vw;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 60px;
            }
            
            .footer-main h2 {
                font-size: 3rem;
            }
        }

@media (max-width: 1200px) {
            .top-logo {
                width: 100px;
                height: 100px;
            }
            
            .footer-grid {
                gap: 60px;
            }
            
            .footer-main h2 {
                font-size: 3.5rem;
            }
            
            .footer-header,
            .luxury-footer-content {
                padding: 60px 50px;
            }
            
            .footer-copyright {
                padding: 25px 50px;
            }
        }

@media (max-width: 768px) {
            .top-logo {
                width: 80px;
                height: 80px;
            }
            
            .footer-header,
            .luxury-footer-content {
                padding: 50px 30px;
            }
            
            .footer-header h1 {
                font-size: 2.5rem;
            }
            
            .footer-main h2 {
                font-size: 2.5rem;
            }
            
            .footer-main p {
                font-size: 1.1rem;
            }
            
            .membership-btn {
                padding: 18px 35px;
            }
            
            .footer-bottom {
                flex-direction: column;
                gap: 20px;
            }
            
            .whatsapp-button {
                width: 50px;
                height: 50px;
                bottom: 160px;
                right: 15px;
                font-size: 1.5rem;
            }
        }

@media (max-width: 576px) {
            .top-logo {
                width: 70px;
                height: 70px;
            }
            
            .footer-header,
            .luxury-footer-content {
                padding: 40px 20px;
            }
            
            .footer-header h1 {
                font-size: 2.2rem;
            }
            
            .footer-main h2 {
                font-size: 2.2rem;
            }
            
            .social-icons {
                justify-content: flex-start;
            }
            
            .footer-grid {
                gap: 40px;
                margin-bottom: 60px;
            }
            
            .membership-btn {
                width: 100%;
                justify-content: center;
            }
            
            .footer-bottom {
                margin-bottom: 60px;
            }
            
            .copyright-text {
                font-size: 0.8rem;
            }
            
            .mobile-global-nav-link {
                font-size: 1.8rem;
            }
            
            .whatsapp-button {
                width: 45px;
                height: 45px;
                bottom: 60px;
                right: 10px;
                font-size: 1.3rem;
            }
            .mobile-menu-toggle {
                width: 45px;
                height: 45px;
                bottom: 10px;
                right: 10px;
                font-size: 1.2rem;
            }
        }

@media (min-width: 993px) {
            .mobile-menu-toggle,
            .mobile-global-menu {
                display: none !important;
            }
            
            body {
                padding-bottom: 0;
            }
            
            .menu-btn {
                display: block !important;
            }
            
            .whatsapp-button {
                bottom: 30px;
                right: 30px;
            }
        }

</style>
</head>
<body>
    
    
    <div class="top-bar">
        <img src="assets/images/logo/TZAR-logo-white.png" alt="Tzar Night Club Logo" class="top-logo">
        <button class="menu-btn" id="menuBtn">Menu</button>
    </div>

<div class="sidebar-container">
        
        <ul class="nav-list global-menu">
            <li><a href="/" class="nav-link-item">HOME</a></li>
            <li><a href="/about" class="nav-link-item">ABOUT</a></li>
            <li><a href="/bar-menu" class="nav-link-item">BAR-MENU</a></li>
            <li><a href="/contact" class="nav-link-item">CONTACT</a></li>
            <li><a href="/events" class="nav-link-item">EVENTS</a></li>
            <li><a href="/gift-card" class="nav-link-item">GIFT CARD</a></li>
            <li><a href="/cart" class="nav-link-item">CART</a></li>
        </ul>
    </div>

<div class="mobile-menu-toggle" id="mobileMenuToggle">
        <i class="bi bi-plus"></i>
    </div>

<div class="mobile-global-menu" id="mobileGlobalMenu">
        <button class="mobile-close-menu" id="mobileCloseMenu">
            <i class="bi bi-x-lg"></i>
        </button>
        <ul class="mobile-global-nav-list">
            <li class="mobile-global-nav-item">
                <a href="/" class="mobile-global-nav-link">HOME</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/about" class="mobile-global-nav-link">ABOUT</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/bar-menu" class="mobile-global-nav-link">BAR-MENU</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/contact" class="mobile-global-nav-link">CONTACT</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/events" class="mobile-global-nav-link">EVENTS</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/gift-card" class="mobile-global-nav-link">GIFT CARD</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/cart" class="mobile-global-nav-link">CART</a>
            </li>
        </ul>
    </div>

<a href="https://wa.me/35725260020" target="_blank" class="whatsapp-button" id="whatsappButton">
        <i class="bi bi-whatsapp"></i>
        <span>VIP Reservations</span>
    </a>

<main class="main-wrapper">
        
        <div class="hero-section">
            <div class="container">
                <div class="row align-items-end">
                    <div class="col-lg-7 col-md-12">
                        <h1 class="display-huge mb-0">EXPERIENCE TZAR</h1>
                    </div>
                    <div class="col-lg-5 col-md-12 text-lg-end text-md-start pb-3">
                        <div class="d-flex flex-column align-items-lg-end align-items-md-start">
                            <p class="text-xs text-white opacity-75 w-75 mb-4" style="line-height: 1.8;">
                                Cyprus' Most Exclusive Night Club. Where Luxury Meets Extraordinary Entertainment. Members-Only Access.
                            </p>
                            <a href="#membership" class="btn-arrow">VIP Membership Inquiry ↗</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<section class="pt-5" id="main-floor">
            <div class="container">
                <div class="row mt-5 justify-content-center text-center">
                    <div class="col-lg-10 col-md-12">
                        <h2 class="display-5 mb-5 fw-light">LIMASSOL'S MOST EXCLUSIVE <br> NIGHTCLUB EXPERIENCE</h2>
                        <div style="position: relative; height: 500px; overflow: hidden;">
                            <img src="assets/images/02_View26-scaled.jpg?auto=format&fit=crop&w=1600&q=80" 
                                 class="img-fluid w-100 h-100 scale-in delay-1" 
                                 style="object-fit: cover; opacity: 0.9;" 
                                 alt="Tzar Night Club Interior">
                            <div style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 100px; background: linear-gradient(to top, #000, transparent);"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="vip-lounge">
            <div class="container">
                <div class="row g-5">
                    <div class="col-lg-5 col-md-12">
                        <p class="text-xs mb-4">Apply for exclusive membership access</p>
                        <form>
                            <div class="mb-3"><input type="text" class="form-control-custom w-100" placeholder="Full Name"></div>
                            <div class="mb-3"><input type="email" class="form-control-custom w-100" placeholder="Email Address"></div>
                            <div class="mb-3"><input type="tel" class="form-control-custom w-100" placeholder="Phone Number"></div>
                            <div class="mb-4"><input type="text" class="form-control-custom w-100" placeholder="Special Requests"></div>
                            <div class="d-flex justify-content-end border-bottom border-dark pb-3">
                                <button type="button" class="btn-arrow">Submit Application ↗</button>
                            </div>
                        </form>
                        
                        <div class="mt-5 pt-4">
                            <h3 class="h2 mb-2">VIP MEMBERSHIP</h3>
                            <p class="text-xs">Experience the ultimate in luxury nightlife with exclusive benefits and access.</p>
                        </div>
                    </div>

<section id="dance-floor">
            <div class="container">
                <div class="mb-4">
                    <p class="text-xs mb-1">Find us in the heart of Limassol</p>
                    <h2 class="h3 mb-4">OUR EXCLUSIVE LOCATION</h2>
                </div>
                
                <div class="row">
                    <div class="col-lg-4 col-md-12 d-flex flex-column justify-content-end">
                        <div class="d-flex gap-3 mt-auto">
                            <img src="https://images.unsplash.com/photo-1566417713940-fe7c737a9ef2?auto=format&fit=crop&w=200" style="width: 80px; height: 100px; object-fit: cover;" class="fade-in-left delay-1" alt="Tzar Exterior">
                            <div style="font-size: 13px;">
                                <span class="text-xs d-block mb-1">Tzar Night Club</span>
                                <div class="mb-2">Kolonakiou 29, Limassol 4103</div>
                                <span class="text-xs d-block mb-1">Address</span>
                                <div class="mb-2 text-muted">Limassol Marina District</div>
                                <span class="text-xs d-block mb-1">Phone Number</span>
                                <div class="text-muted">+357 25 260020</div>
                                <div class="mt-3">
                                    <a href="https://maps.app.goo.gl/AnKPdGWs44Ryz2CC7" target="_blank" class="btn-arrow d-inline-block">Get Directions ↗</a>
                                </div>
                            </div>
                        </div>
                    </div>

<section class="text-center" id="music-events">
            <div class="container">
                <p class="text-xs mb-2">Reach out to our VIP concierge for reservations</p>
                <h2 class="h2 mb-5">DIRECT VIP CONTACT</h2>
                
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-3 col-12 text-center">
                        <h3 class="h5 mb-2">RESERVATIONS</h3>
                        <p class="text-xs text-muted mb-3">+357 98 765432</p>
                        <a href="tel:+35798765432" class="btn-arrow">Call For Reservations ↗</a>
                    </div>
                    <div class="col-md-3 col-12">
                        <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=300" style="width: 120px; opacity: 0.8;" class="fade-in delay-2" alt="VIP Service">
                    </div>
                    <div class="col-md-3 col-12 text-center">
                        <h3 class="h5 mb-2">VIP CONCIERGE</h3>
                        <p class="text-xs text-muted mb-3">VIP@TZARNIGHTCLUB.COM</p>
                        <a href="mailto:vip@tzarnightclub.com" class="btn-arrow">Email Our Concierge ↗</a>
                    </div>
                </div>
            </div>
        </section>

<section class="border-top-dark">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 col-md-12">
                        <p class="text-xs mb-2">MEMBERSHIP INFO</p>
                        <h2 class="h2 mb-5">FREQUENTLY <br>ASKED QUESTIONS</h2>
                        <div class="row g-2 w-75">
                            <div class="col-6"><img src="https://images.unsplash.com/photo-1561047029-3000c68339ca?auto=format&fit=crop&w=300" class="w-100 fade-in-left delay-1" style="opacity: 0.6; height: 200px; object-fit: cover;" alt="Cocktails"></div>
                            <div class="col-6 pt-4"><img src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=300" class="w-100 fade-in-right delay-2" style="opacity: 0.6; height: 200px; object-fit: cover;" alt="DJ Booth"></div>
                        </div>
                    </div>
                    
                    <div class="col-lg-7 col-md-12">
                        <div class="accordion" id="faqAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#c1">How Do I Become A Member Of Tzar Night Club?</button>
                                </h2>
                                <div id="c1" class="accordion-collapse collapse show"><div class="accordion-body">Membership is by application only. Submit your details through our membership form, and our concierge will contact you for a private introduction.</div></div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c2">What Are The Membership Benefits?</button>
                                </h2>
                                <div id="c2" class="accordion-collapse collapse"><div class="accordion-body">Members enjoy priority access, reserved tables, exclusive events, personalized service, complimentary coat check, and access to our VIP concierge.</div></div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c3">What Is The Dress Code?</button>
                                </h2>
                                <div id="c3" class="accordion-collapse collapse"><div class="accordion-body">Upscale elegant attire is required. For gentlemen: collared shirts, dress shoes, and tailored trousers. For ladies: cocktail dresses or elegant evening wear. No sportswear or casual footwear.</div></div>
                            </div>
                             <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c4">Can I Book A Private Event At Tzar?</button>
                                </h2>
                                <div id="c4" class="accordion-collapse collapse"><div class="accordion-body">Yes, we offer exclusive venue hire for private events. Contact our events team to discuss your requirements and available dates.</div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section>
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-5 col-md-12 mb-5 mb-lg-0">
                        <div class="d-flex align-items-end gap-3">
                             <img src="./assets/images/tzar-img-7.png?auto=format&fit=crop&w=300" style="width: 140px; height: 140px; border-radius: 50%; object-fit: cover;" class="fade-in-left delay-1" alt="DJ">
                             <img src="./assets/images/tzar-img-3.png?auto=format&fit=crop&w=300" style="width: 180px; height: 240px; object-fit: cover;" class="fade-in-right delay-2" alt="VIP Section">
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-12">
                        <h2 class="display-5 mb-2">JOIN THE <br>EXCLUSIVE LIST</h2>
                        <p class="text-xs mb-4">Be The First To Know About Upcoming Events, Guest DJs, And Special Members-Only Experiences!</p>
                        
                        <div class="d-flex border-bottom border-dark pb-2">
                            <input type="email" class="bg-transparent border-0 text-white w-100" placeholder="Enter Your Email" style="outline: none; box-shadow: none;">
                            <button class="btn-arrow text-nowrap">Subscribe For Updates ↗</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<footer class="main-footer">
            <div class="footer-container">
                <div class="footer-header">
                    <h1>TZAR NIGHT CLUB</h1>
                    <p>Limassol's most exclusive members-only establishment, where luxury meets exceptional experience.</p>
                </div>

<div class="luxury-footer-content">
                    <div class="accent-line"></div>
                    
                    <div class="footer-grid">
                        <div class="footer-main">
                            <h2>Ready for<br>the experience?</h2>
                            <p>Limited memberships available. Join Limassol's most exclusive night club and experience luxury redefined.</p>

<a href="./contact" class="membership-btn">
                                APPLY FOR MEMBERSHIP
                                <i class="fas fa-arrow-right"></i>
                            </a>
                            
                            <div class="social-section">
                                <div class="social-title">FOLLOW US</div>
                                <div class="social-icons">
                                    <a href="https://www.instagram.com/tzarlimassol.cy/" class="social-icon">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                    <a href="https://www.tiktok.com/@tzar.cy" class="social-icon">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://www.facebook.com/tzar.limassol" class="social-icon">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="#" class="social-icon">
                                        <i class="fab fa-youtube"></i>
                                    </a>
                                </div>
                        </div>
                    </div>
                    
                    <div class="quick-links">
                        <h3>QUICK LINKS</h3>
                        <ul class="quick-links-list">
                            <li><a href="#">Book a Private Tour</a></li>
                            <li><a href="#">Membership Inquiry</a></li>
                            <li><a href="#">Private Events</a></li>
                            <li><a href="#">VIP Services</a></li>
                            <li><a href="#">Contact Management</a></li>
                        </ul>
                    </div>
                </div>
                
                
                <div class="footer-bottom">
                    <div class="club-info">
                        <div class="club-tagline">An exclusive members-only establishment</div>
                        <div><i class="fas fa-map-marker-alt"></i>Kolonakiou 29, Limassol 4103</div>
                        <div><i class="fas fa-envelope"></i>info@tzarnightclub.com</div>
                    </div>
                    <div class="contact-info">
                        <div><i class="fas fa-phone"></i> + 357-25260020</div>
                        <div><i class="fas fa-clock"></i>Open Wed-Sat: 5 PM - 10 PM</div>
                        <div><i class="fas fa-user-tie"></i>VIP Reservations: +357-98-765-432</div>
                    </div>
                </div>
                
                
                <div class="footer-copyright">
                    <div class="copyright-text">© 2024 TZAR NIGHT CLUB. ALL RIGHTS RESERVED.</div>
                </div>
            </div>
        </footer>
    </main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        // ===========================================
        // MENU INITIALIZATION FUNCTION
        // ===========================================
        function initializeMenus() {
            if (window.innerWidth >= 993) {
                initializeDesktopMenu();
            } else {
                initializeMobileMenu();
            }
        }

// ===========================================
        // MOBILE MENU FUNCTIONALITY
        // ===========================================
        function initializeMobileMenu() {
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const mobileGlobalMenu = document.getElementById('mobileGlobalMenu');
            const mobileCloseMenu = document.getElementById('mobileCloseMenu');
            const whatsappButton = document.getElementById('whatsappButton');
            
            // Mobile menu toggle functionality
            if (mobileMenuToggle) {
                mobileMenuToggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    this.classList.toggle('active');
                    
                    if (mobileGlobalMenu) {
                        mobileGlobalMenu.classList.toggle('active');
                        
                        if (mobileGlobalMenu.classList.contains('active')) {
                            document.body.style.overflow = 'hidden';
                        } else {
                            document.body.style.overflow = 'auto';
                        }
                    }
                });
            }
            
            // Close mobile global menu
            if (mobileCloseMenu) {
                mobileCloseMenu.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    if (mobileGlobalMenu) mobileGlobalMenu.classList.remove('active');
                    if (mobileMenuToggle) mobileMenuToggle.classList.remove('active');
                    
                    document.body.style.overflow = 'auto';
                });
            }
            
            // Close global menu when clicking outside on mobile
            document.addEventListener('click', function(e) {
                if (mobileGlobalMenu && mobileGlobalMenu.classList.contains('active')) {
                    const isClickInsideMenu = mobileGlobalMenu.contains(e.target);
                    const isClickOnToggle = mobileMenuToggle && mobileMenuToggle.contains(e.target);
                    
                    if (!isClickInsideMenu && !isClickOnToggle) {
                        mobileGlobalMenu.classList.remove('active');
                        if (mobileMenuToggle) mobileMenuToggle.classList.remove('active');
                        document.body.style.overflow = 'auto';
                    }
                }
            });
            
            // Mobile global menu link clicks
            document.querySelectorAll('.mobile-global-nav-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    // e.preventDefault();
                    if (mobileGlobalMenu) mobileGlobalMenu.classList.remove('active');
                    if (mobileMenuToggle) mobileMenuToggle.classList.remove('active');
                    
                    document.body.style.overflow = 'auto';
                    
                });
            });
            
            // WhatsApp button hover effect
            if (whatsappButton) {
                whatsappButton.addEventListener('mouseenter', function() {
                    this.classList.add('expanded');
                });
                
                whatsappButton.addEventListener('mouseleave', function() {
                    this.classList.remove('expanded');
                });
            }
        }

// ===========================================
        // DESKTOP MENU FUNCTIONALITY
        // ===========================================
        function initializeDesktopMenu() {
            const body = document.body;
            const topMenuBtn = document.getElementById('menuBtn');
            const mainWrapper = document.querySelector('.main-wrapper');
            const globalMenu = document.querySelector('.global-menu');

// Menu button click
            if (topMenuBtn) {
                topMenuBtn.addEventListener('click', toggleMenu);
            }

// Close menu when clicking on main content
            if (mainWrapper) {
                mainWrapper.addEventListener('click', () => {
                    if (body.classList.contains('menu-open')) {
                        toggleMenu();
                    }
                });
            }

// Global menu link clicks
            if (globalMenu) {
                document.querySelectorAll('.global-menu .nav-link-item').forEach(link => {
                    link.addEventListener('click', function(e) {
                        // e.preventDefault();
                        toggleMenu();
                        
                      
                    });
                });
            }

// Initialize sidebar visibility
            const sidebarContainer = document.querySelector('.sidebar-container');
            function initSidebarVisibility() {
                if (window.innerWidth < 993) return;
                
                const heroSection = document.querySelector('.hero-section');
                if (!heroSection) return;

const scrollPosition = window.pageYOffset;

if (scrollPosition > 100) {
                    sidebarContainer.classList.add('context-visible');
                } else {
                    sidebarContainer.classList.remove('context-visible');
                }
            }

window.addEventListener('scroll', initSidebarVisibility);
            initSidebarVisibility();
        }

// ===========================================
        // IMAGE SCROLL ANIMATIONS
        // ===========================================
        function initializeImageAnimations() {
            // Select all images in main content (excluding header and footer)
            const images = document.querySelectorAll('main img:not(.top-logo):not(.footer-container img)');
            
            // Add animation classes based on position
            images.forEach((img, index) => {
                // Remove any existing animation classes
                img.classList.remove('fade-in', 'fade-in-left', 'fade-in-right', 'scale-in');
                
                // Determine animation type based on position and context
                const parentSection = img.closest('section');
                if (!parentSection) return;
                
                const sectionId = parentSection.id;
                const imgSrc = img.src || '';
                
                // Hero section image (large main image)
                if (imgSrc.includes('02_View26-scaled') && sectionId === 'main-floor') {
                    img.classList.add('scale-in', 'delay-1');
                }
                // VIP Lounge images
                else if (sectionId === 'vip-lounge') {
                    const imgClasses = Array.from(img.classList);
                    if (imgClasses.includes('grid-img-tall')) {
                        img.classList.add('fade-in-left', 'delay-1');
                    } else if (imgClasses.includes('grid-img-small')) {
                        const smallImages = Array.from(parentSection.querySelectorAll('.grid-img-small'));
                        const imgIndex = smallImages.indexOf(img);
                        img.classList.add('fade-in-right', `delay-${imgIndex + 2}`);
                    }
                }
                // Dance Floor section (location map and small images)
                else if (sectionId === 'dance-floor') {
                    if (img.style.width === '80px' && img.style.height === '100px') {
                        img.classList.add('fade-in-left', 'delay-1');
                    }
                }
                // Music Events section
                else if (sectionId === 'music-events') {
                    if (img.style.width === '120px') {
                        img.classList.add('fade-in', 'delay-2');
                    }
                }
                // FAQ section images
                else if (parentSection.classList.contains('border-top-dark')) {
                    if (img.style.opacity === '0.6') {
                        const faqImages = Array.from(parentSection.querySelectorAll('img[style*="opacity: 0.6"]'));
                        const imgIndex = faqImages.indexOf(img);
                        img.classList.add(imgIndex === 0 ? 'fade-in-left' : 'fade-in-right', `delay-${imgIndex + 1}`);
                    }
                }
                // Newsletter section images
                else if (img.closest('.col-lg-5') && img.src.includes('unsplash')) {
                    const newsletterImages = Array.from(parentSection.querySelectorAll('img[src*="unsplash"]'));
                    const imgIndex = newsletterImages.indexOf(img);
                    img.classList.add(imgIndex === 0 ? 'fade-in-left' : 'fade-in-right', `delay-${imgIndex + 1}`);
                }
                // Default animation for other images
                else {
                    img.classList.add('fade-in', `delay-${(index % 3) + 1}`);
                }
                
                // Add will-change for better performance
                img.style.willChange = 'opacity, transform';
            });
            
            // Intersection Observer for scroll animations
            const observerOptions = {
                root: null,
                rootMargin: '0px 0px -100px 0px',
                threshold: 0.1
            };
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animated');
                        // Stop observing after animation triggers
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);
            
            // Observe all animated images
            images.forEach(img => {
                if (img.classList.contains('fade-in') || 
                    img.classList.contains('fade-in-left') || 
                    img.classList.contains('fade-in-right') || 
                    img.classList.contains('scale-in')) {
                    observer.observe(img);
                }
            });
        }

// ===========================================
        // RESPONSIVE LAYOUT ADJUSTMENTS
        // ===========================================
        function adjustLayoutForMobile() {
            // VIP lounge images - adjust for mobile
            const vipLoungeImages = document.querySelectorAll('#vip-lounge .col-6');
            
            if (window.innerWidth < 768) {
                // Stack VIP lounge images vertically on mobile
                vipLoungeImages.forEach(col => {
                    col.style.flexBasis = '100%';
                    col.style.maxWidth = '100%';
                    col.style.marginBottom = '15px';
                });
                
                // Adjust the flex column gap
                const flexColumn = document.querySelector('#vip-lounge .d-flex.flex-column');
                if (flexColumn) {
                    flexColumn.style.gap = '15px';
                }
                
                // Adjust grid images height on mobile
                const gridImages = document.querySelectorAll('.grid-img-tall, .grid-img-small');
                gridImages.forEach(img => {
                    if (img.classList.contains('grid-img-tall')) {
                        img.style.minHeight = '300px';
                    }
                    if (img.classList.contains('grid-img-small')) {
                        img.style.height = '150px';
                    }
                });
            } else if (window.innerWidth < 992) {
                // Tablet adjustments
                vipLoungeImages.forEach(col => {
                    col.style.flexBasis = '48%';
                    col.style.maxWidth = '48%';
                    col.style.marginBottom = '0';
                });
                
                // Adjust grid images height on tablet
                const gridImages = document.querySelectorAll('.grid-img-tall, .grid-img-small');
                gridImages.forEach(img => {
                    if (img.classList.contains('grid-img-tall')) {
                        img.style.minHeight = '400px';
                    }
                    if (img.classList.contains('grid-img-small')) {
                        img.style.height = '200px';
                    }
                });
            } else {
                // Desktop - reset to original
                vipLoungeImages.forEach(col => {
                    col.style.flexBasis = '';
                    col.style.maxWidth = '';
                    col.style.marginBottom = '';
                });
                
                const flexColumn = document.querySelector('#vip-lounge .d-flex.flex-column');
                if (flexColumn) {
                    flexColumn.style.gap = '';
                }
                
                const gridImages = document.querySelectorAll('.grid-img-tall, .grid-img-small');
                gridImages.forEach(img => {
                    if (img.classList.contains('grid-img-tall')) {
                        img.style.minHeight = '500px';
                    }
                    if (img.classList.contains('grid-img-small')) {
                        img.style.height = '245px';
                    }
                });
            }
        }

// ===========================================
        // INITIALIZE ON LOAD
        // ===========================================
        document.addEventListener('DOMContentLoaded', function() {
            initializeMenus();
            initializeImageAnimations();
            adjustLayoutForMobile();
            
            // Form submission handling
            const submitBtn = document.querySelector('.btn-arrow[type="button"]');
            if (submitBtn) {
                submitBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    alert('Membership application submitted successfully! Our concierge will contact you shortly.');
                });
            }
            
            // Newsletter subscription
            const subscribeBtn = document.querySelector('.btn-arrow.text-nowrap');
            if (subscribeBtn) {
                subscribeBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const emailInput = this.parentElement.querySelector('input[type="email"]');
                    if (emailInput && emailInput.value) {
                        alert('Thank you for subscribing to our exclusive list!');
                        emailInput.value = '';
                    } else {
                        alert('Please enter your email address.');
                    }
                });
            }
            
            // Footer animations
            const membershipBtn = document.querySelector('.membership-btn');
            if (membershipBtn) {
                membershipBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const ripple = document.createElement('span');
                    const rect = this.getBoundingClientRect();
                    const size = Math.max(rect.width, rect.height);
                    const x = e.clientX - rect.left - size / 2;
                    const y = e.clientY - rect.top - size / 2;
                    
                    ripple.style.cssText = `
                        position: absolute;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.3);
                        transform: scale(0);
                        animation: ripple 0.6s linear;
                        width: ${size}px;
                        height: ${size}px;
                        top: ${y}px;
                        left: ${x}px;
                        pointer-events: none;
                    `;
                    
                    this.appendChild(ripple);
                    
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                    
                    setTimeout(() => {
                        alert('VIP Membership application form would open here');
                    }, 300);
                });
            }
            
            // Add ripple animation style
            const style = document.createElement('style');
            style.textContent = `
                @keyframes ripple {
                    to {
                        transform: scale(4);
                        opacity: 0;
                    }
                }
            `;
            document.head.appendChild(style);
        });

// ===========================================
        // WINDOW RESIZE HANDLER
        // ===========================================
        window.addEventListener('resize', () => {
            initializeMenus();
            adjustLayoutForMobile();
        });
    </script>

</body>
</html>