/* ═══════════════ CUSTOM CORE PROPERTIES ═══════════════ */
:root {
    --bg-main: #0b0c10;
    --bg-card: #111317;
    --gold: #cca43b;
    --gold-hover: #e5ba45;
    --text-main: #ffffff;
    --text-muted: #8c92a0;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.text-center { text-align: center; }
.gold-text { color: var(--gold); }
.subtitle { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; display: block; margin-bottom: 10px; }
.title-bar { width: 60px; height: 3px; background-color: var(--gold); margin: 15px 0 25px 0; }
.section-header .title-bar { margin: 15px auto 40px auto; }
.section { padding: 90px 0; }

/* Grid Utilities */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 40px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; }

/* Buttons */
.btn { display: inline-block; padding: 14px 32px; font-weight: 600; font-size: 14px; text-decoration: none; border-radius: 4px; transition: var(--transition-smooth); cursor: pointer; }
.btn-primary { background-color: var(--gold); color: #000; }
.btn-primary:hover { background-color: var(--gold-hover); transform: translateY(-3px); }
.btn-secondary { background-color: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); margin-left: 15px; }
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }

/* ═══════════════ PRELOADER ═══════════════ */
.preloader { position: fixed; top:0; left:0; width:100%; height:100%; background-color: var(--bg-main); z-index:9999; display:flex; align-items:center; justify-content:center; transition: opacity 0.5s ease; }
.loader { width: 45px; height: 45px; border: 3px solid rgba(204,164,59,0.1); border-radius: 50%; border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════ NAVBAR ═══════════════ */
.navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 1000; transition: var(--transition-smooth); }
.navbar.sticky { background-color: rgba(11, 12, 16, 0.95); backdrop-filter: blur(10px); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.nav-container { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { color: var(--gold); font-size: 24px; }
.logo-text h1 { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.2; }
.logo-text p { font-size: 9px; color: var(--text-muted); letter-spacing: 2px; }
.nav-links { display: flex; list-style: none; gap: 30px; }
.nav-link { text-decoration: none; color: #fff; font-size: 14px; font-weight: 500; opacity: 0.75; transition: var(--transition-smooth); }
.nav-link:hover, .nav-link.active { opacity: 1; color: var(--gold); }
.btn-quote { text-decoration: none; background-color: rgba(204,164,59,0.1); border: 1px solid var(--gold); color: var(--gold); padding: 8px 18px; font-size: 13px; font-weight: 600; border-radius: 4px; transition: var(--transition-smooth); display: flex; align-items: center; gap: 8px; }
.btn-quote:hover { background-color: var(--gold); color: #000; }
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 6px; }
.hamburger span { width: 25px; height: 2px; background-color: #fff; transition: var(--transition-smooth); }

/* ═══════════════ HERO ═══════════════ */
.hero { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(rgba(11,12,16,0.85), rgba(11,12,16,0.95)), url('https://images.unsplash.com/photo-1504297050568-910d24c426d3?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover; padding-top: 100px; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(204,164,59,0.06); border: 1px solid rgba(204,164,59,0.2); padding: 6px 16px; border-radius: 50px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 1px; margin-bottom: 25px; }
.hero h1 { font-size: 56px; font-weight: 700; line-height: 1.15; margin-bottom: 20px; }
.hero p { max-width: 650px; color: var(--text-muted); font-size: 16px; margin-bottom: 35px; }

/* ═══════════════ ABOUT ═══════════════ */
.about-img-box { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid rgba(204,164,59,0.15); height: 425px; }
.about-img-box img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════ PORTFOLIO & FILTERS ═══════════════ */
.portfolio-filters { display: flex; justify-content: center; gap: 12px; margin-bottom: 45px; flex-wrap: wrap; }
.filter-btn { background: transparent; border: 1px solid rgba(255,255,255,0.08); color: var(--text-muted); padding: 10px 22px; font-size: 13px; font-weight: 500; border-radius: 4px; cursor: pointer; transition: var(--transition-smooth); }
.filter-btn:hover, .filter-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(204,164,59,0.03); }
.gallery-card { position: relative; border-radius: 6px; overflow: hidden; height: 280px; border: 1px solid rgba(255,255,255,0.02); cursor: pointer; }
.gallery-img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.gallery-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transform: translateY(10px); transition: var(--transition-smooth); }
.gallery-card:hover .gallery-img { transform: scale(1.06); }
.gallery-card:hover .gallery-overlay { opacity: 1; transform: translateY(0); }
.gallery-overlay h3 { font-size: 17px; margin-bottom: 4px; font-weight: 600; }
.gallery-overlay p { font-size: 12px; color: var(--text-muted); }
.gallery-item.hide { display: none; }

/* ═══════════════ STATS COUNTER ═══════════════ */
.stats { background-color: var(--bg-card); border-top: 1px solid rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.02); }
.stat-box { text-align: center; padding: 20px; }
.stat-num { font-size: 42px; color: var(--gold); font-weight: 700; margin-bottom: 5px; }
.stat-box p { color: var(--text-muted); font-size: 14px; font-weight: 500; }

/* ═══════════════ TESTIMONIAL SLIDER ═══════════════ */
.testimonials { background-color: var(--bg-main); }
.slider-wrapper { max-width: 750px; margin: 0 auto; position: relative; overflow: hidden; }
.testimonial-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.testimonial-card { min-width: 100%; text-align: center; padding: 10px 40px; }
.testimonial-card .quote { font-size: 18px; font-style: italic; opacity: 0.9; margin-bottom: 20px; line-height: 1.7; position: relative; }
.testimonial-card h4 { color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 35px; }
.ctrl-btn { background: transparent; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; transition: var(--transition-smooth); }
.ctrl-btn:hover { color: var(--gold); }
.testi-dots { display: flex; gap: 8px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background-color: rgba(255,255,255,0.15); cursor: pointer; transition: var(--transition-smooth); }
.dot.active { background-color: var(--gold); width: 18px; border-radius: 4px; }

/* ═══════════════ CONTACT ARCHITECTURE (IMAGE_D4B983.JPG REPLICA) ═══════════════ */
.grid-2-unequal { display: grid; grid-template-columns: 1fr 1.3fr; gap: 35px; align-items: start; }
.contact-info-panel { display: flex; flex-direction: column; gap: 15px; }
.info-card { background-color: #111317; border-radius: 8px; padding: 22px 25px; display: flex; align-items: center; gap: 20px; border: 1px solid rgba(255, 255, 255, 0.02); }
.info-icon-wrapper { width: 42px; height: 42px; background-color: rgba(204, 164, 59, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-icon-wrapper i { color: var(--gold); font-size: 18px; }
.info-details { display: flex; flex-direction: column; }
.info-label { font-size: 11px; letter-spacing: 1.5px; color: #6c727f; font-weight: 600; margin-bottom: 6px; }
.info-value { font-size: 15px; font-weight: 500; text-decoration: none; }
.text-white { color: var(--text-main); }
.phone-highlight { color: #12d06e; font-weight: 600; font-size: 16px; transition: var(--transition-smooth); }
.phone-highlight:hover { color: #25D366; }
.info-sublink { color: var(--gold); text-decoration: none; font-size: 12px; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-smooth); }
.info-sublink:hover { color: var(--gold-hover); }

/* Green Accent CTA button */
.btn-whatsapp-full { background-color: #12d06e; color: #ffffff; width: 100%; padding: 16px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 15px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 5px; transition: background-color 0.3s ease, transform 0.2s ease; }
.btn-whatsapp-full:hover { background-color: #0fa657; transform: translateY(-2px); }

/* Map Framework Panel */
.contact-map-panel { display: flex; flex-direction: column; height: 100%; }
.map-frame-box { border-radius: 8px; overflow: hidden; border: 1px solid rgba(204, 164, 59, 0.25); background-color: var(--bg-card); height: 420px; width: 100%; line-height: 0; }
.map-sub-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-size: 12px; padding: 0 4px; }
.meta-location { color: #8c92a0; display: inline-flex; align-items: center; gap: 8px; }
.meta-link { color: var(--gold); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-smooth); }
.meta-link:hover { color: var(--gold-hover); }

/* ═══════════════ GLOBAL FLOATING WIDGETS ═══════════════ */
.back-top { position: fixed; bottom: 30px; right: 95px; width: 44px; height: 44px; background-color: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; z-index: 999; transition: var(--transition-smooth); }
.back-top.active { opacity: 1; visibility: visible; }
.back-top:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }

/* Persistent Sticky Floating WhatsApp (Bottom Right Corner) */
.floating-whatsapp { position: fixed; bottom: 25px; right: 30px; width: 52px; height: 52px; background-color: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); z-index: 1000; text-decoration: none; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.floating-whatsapp:hover { transform: scale(1.1); background-color: #20ba5a; }

/* ═══════════════ SCROLL REVEAL INITIAL STATES ═══════════════ */
.reveal-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-visible { opacity: 1; transform: translate(0); }

/* ═══════════════ RESPONSIVE RENDER ADAPTATIONS ═══════════════ */
@media (max-width: 991px) {
    .hero h1 { font-size: 42px; }
    .grid-2, .grid-2-unequal { grid-template-columns: 1fr; gap: 40px; }
    .about-img-box { height: 350px; }
    .map-frame-box { height: 350px; }
    .map-sub-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hamburger { display: flex; }
    .nav-links { position: absolute; top: 100%; left: -100%; width: 100%; background-color: var(--bg-main); flex-direction: column; padding: 40px; text-align: center; gap: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); transition: var(--transition-smooth); }
    .nav-links.active { left: 0; }
    .navbar .btn-quote { display: none; }
}
/* ═══════════════ SERVICES SECTION ═══════════════ */
.services { background-color: var(--bg-card); }
.section-desc { color: var(--text-muted); font-size: 15px; max-width: 650px; margin: 0 auto 45px; }
.service-card { background-color: var(--bg-main); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: 30px 25px; transition: var(--transition-smooth); }
.service-card:hover { border-color: rgba(204,164,59,0.3); transform: translateY(-5px); }
.service-icon { width: 50px; height: 50px; background: rgba(204,164,59,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.service-icon i { color: var(--gold); font-size: 20px; }
.service-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.service-card p { color: var(--text-muted); font-size: 13.5px; line-height: 1.65; }

/* ═══════════════ PADEL COURT SECTION ═══════════════ */
.padel-section { position: relative; background: linear-gradient(rgba(11,12,16,0.88), rgba(11,12,16,0.96)), url('https://images.unsplash.com/photo-1554068865-24cecd4e34b8?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover; }
.padel-bg-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center bottom, rgba(204,164,59,0.06) 0%, transparent 70%); pointer-events: none; }
.padel-features-grid { gap: 28px; margin-bottom: 50px; }
.padel-feat-card { background: var(--bg-card); border: 1px solid rgba(204,164,59,0.12); border-radius: 10px; overflow: hidden; transition: var(--transition-smooth); }
.padel-feat-card:hover { border-color: rgba(204,164,59,0.35); transform: translateY(-6px); box-shadow: 0 12px 35px rgba(0,0,0,0.35); }
.padel-feat-img { position: relative; height: 220px; overflow: hidden; }
.padel-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.padel-feat-card:hover .padel-feat-img img { transform: scale(1.06); }
.padel-feat-badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: #000; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 12px; border-radius: 50px; }
.padel-feat-body { padding: 22px 24px 26px; }
.padel-feat-body h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.padel-feat-body p { color: var(--text-muted); font-size: 13.5px; line-height: 1.65; }

/* Padel Specs Bar */
.padel-specs-bar { display: flex; align-items: center; justify-content: center; gap: 0; background: var(--bg-card); border: 1px solid rgba(204,164,59,0.15); border-radius: 10px; padding: 28px 20px; margin-bottom: 45px; flex-wrap: wrap; }
.padel-spec { text-align: center; padding: 10px 30px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.padel-spec i { color: var(--gold); font-size: 20px; margin-bottom: 5px; }
.spec-val { font-size: 20px; font-weight: 700; color: var(--text-main); }
.spec-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
.padel-spec-divider { width: 1px; height: 55px; background: rgba(255,255,255,0.06); flex-shrink: 0; }

/* Padel CTA */
.padel-cta { text-align: center; }
.padel-cta p { color: var(--text-muted); font-size: 15px; margin-bottom: 20px; }
.padel-cta .btn { font-size: 15px; padding: 15px 36px; }

/* ═══════════════ FOOTER SEO KEYWORDS BAR ═══════════════ */
footer strong { color: var(--gold); }

/* ═══════════════ NAVBAR PADEL LINK ═══════════════ */
@media (max-width: 991px) {
    .padel-specs-bar { gap: 10px; }
    .padel-spec-divider { display: none; }
    .padel-spec { padding: 10px 15px; }
}

/* ═══════════════ GRID-5 FOR STATS ═══════════════ */
.grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 25px; }

/* Export stat special styling */
.stat-export-icon { font-size: 28px; color: var(--gold); margin-bottom: 6px; }
.stat-export-text { font-size: 32px; color: var(--gold); font-weight: 700; margin-bottom: 5px; }

@media (max-width: 768px) {
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
}