:root{
    --accent:#f97316; /* orange */
    --accent-dark:#c2410c;
    --muted:#6b7280;
    --bg:#0f172a; /* deep navy */
    --card-bg: rgba(255,255,255,0.04);
    --glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
body{font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#0b1220; margin:0; background:linear-gradient(180deg,#ffffff 0%, #f7fafc 100%)}

/* NAV */
#navbar{position:fixed;left:0;right:0;top:0;z-index:60;background:transparent;transition:all .35s ease;padding:18px 24px}
#navbar.scrolled{backdrop-filter: blur(6px);background: rgb(75 72 72 / 85%);box-shadow:0 6px 18px rgba(15,23,42,0.06)}
#navbar .nav-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
#navbar .logo{font-weight:700;font-size:20px;color:var(--accent);text-decoration:none}
#navbar .nav-links{display:flex;gap:18px;list-style:none;padding:0;margin:0}
#navbar .nav-links a{color:#f9f9f9;text-decoration:none;font-weight:500}

/* HERO */
.hero-slider{height:70vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.03);transition:all .8s ease}
.hero-slider .slide.active{opacity:1;transform:scale(1);}
.hero-slider .slide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,0.35),rgba(15,23,42,0.15))}
.hero-slider .slide-content{position:relative;max-width:1100px;margin:0 auto;padding:48px;color:#fff;text-align:center}
.hero-slider h1{font-family: 'Playfair Display', serif;font-size:48px;margin:0 0 12px}
.hero-slider p{font-size:18px;margin:0 0 20px;opacity:.95}
.hero-slider .btn{background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:#fff;padding:12px 22px;border-radius:8px;text-decoration:none;font-weight:600}

.slider-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:8px}
.slider-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer}
.slider-dots .dot.active{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.25)}

/* SECTIONS */
.section-header{max-width:1100px;margin:40px auto 24px;padding:0 20px}
.section-header h2{font-size:28px;margin:0 0 6px;color:#0b1220}
.section-header p{color:var(--muted);margin:0}

.services-grid{max-width:1100px;margin:18px auto 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:0 20px}
.service-card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(16,24,40,0.04);transition:transform .2s ease}
.service-card:hover{transform:translateY(-6px)}
.service-card img{width:100%;height:220px;object-fit:cover;border-radius:10px;margin-bottom:12px}
.service-card h3{margin:8px 0 6px;font-size:18px}
.service-card p{color:var(--muted);margin:0}

/* GALLERY */
.gallery-grid{max-width:1100px;margin:12px auto 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:0 20px}
.gallery-item{position:relative;overflow:hidden;border-radius:10px;cursor:pointer}
.gallery-item img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.07)}
.gallery-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;opacity:0;background:linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.35));transition:opacity .25s ease}
.gallery-item:hover .gallery-overlay{opacity:1}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.75);z-index:9999}
.lightbox.active{display:flex}
.lightbox-content img{max-width:90vw;max-height:85vh;border-radius:8px}
.lightbox-close{position:absolute;top:20px;right:24px;color:#fff;font-size:34px;cursor:pointer}

/* FOOTER */
footer{padding:32px 20px;background:#0b1220;color:#fff;text-align:center}
footer .socials a{color:#fff;margin:0 8px;opacity:.9}

@media (max-width: 800px){
    .hero-slider h1{font-size:28px}
    .hero-slider p{font-size:15px}
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --gold: #C9A84C;
    --dark: #1a1a2e;
    --glass: rgba(255,255,255,0.1);
    --light: #f5f5f5;
}
body { font-family: 'Poppins', sans-serif; overflow-x: hidden; background: #fff; color: #333; line-height: 1.6; }

/* Navigation */
nav { position: fixed; width: 100%; z-index: 1000; padding: 20px 5%; transition: 0.3s; }
nav.scrolled { background: rgba(26,26,46,0.95); backdrop-filter: blur(10px); box-shadow: 0 5px 30px rgba(0,0,0,0.3); }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
.logo { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: #fff; font-weight: 700; text-decoration: none; background: linear-gradient(145deg, #fff, #e0e0e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.logo span { background: linear-gradient(145deg, var(--gold), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-links { display: flex; gap: 35px; list-style: none; }
.nav-links a { color: #fff; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: 0.3s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--gold); transition: 0.3s; }
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--gold); text-shadow: 0 0 10px rgba(201,168,76,0.5); }
.mobile-menu { display: none; font-size: 1.5rem; color: #fff; cursor: pointer; }

/* Hero Slider */
.hero-slider { position: relative; height: 100vh; overflow: hidden; }
.slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.slide.active { opacity: 1; }
.slide::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.6) 100%); }
.slide-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 0 20px; }
.slide-content::after { content: ''; position: absolute; bottom: -30px; right: -30px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(201,168,76,0.3) 0%, transparent 70%); border-radius: 50%; animation: float 3s ease-in-out infinite; }
.slide-content h1 { font-family: 'Playfair Display', serif; font-size: 4rem; margin-bottom: 20px; opacity: 0; transform: translateY(30px); animation: fadeUp 1s forwards 0.5s; }
.slide-content p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0; transform: translateY(30px); animation: fadeUp 1s forwards 0.8s; color: #ddd; }
.slide-content .btn { display: inline-block; padding: 15px 40px; background: linear-gradient(145deg, var(--gold), #ffd700); color: #1a1a2e; text-decoration: none; font-weight: 600; border-radius: 50px; transition: 0.3s; opacity: 0; transform: translateY(30px); animation: fadeUp 1s forwards 1.1s; box-shadow: 0 10px 30px rgba(201,168,76,0.3); }
.slide-content .btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 40px rgba(201,168,76,0.5); }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.3); } 50% { box-shadow: 0 0 40px rgba(201,168,76,0.6); } }
@keyframes pattern { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } }

.slider-dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 10; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; transition: 0.3s; position: relative; }
.dot::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-radius: 50%; background: var(--gold); transition: 0.3s; }
.dot.active::before { width: 100%; height: 100%; }
.dot.active { border-color: var(--gold); }

/* About Section */
.about { padding: 100px 5%; background: var(--light); }
.about-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--dark); margin-bottom: 20px; background: linear-gradient(145deg, var(--dark), #2c3e50); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.about-text h2 span { background: linear-gradient(145deg, var(--gold), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.about-text p { color: #666; line-height: 1.8; margin-bottom: 20px; }
.about-stats { display: flex; gap: 40px; margin-top: 30px; }
.stat { text-align: center; }
.stat h3 { font-size: 2.5rem; background: linear-gradient(145deg, var(--gold), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; }
.stat p { color: #888; font-size: 0.9rem; }
.about-img { position: relative; }
.about-img img { width: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.about-img::before { content: ''; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%; border: 3px solid var(--gold); border-radius: 10px; z-index: -1; animation: glow 2s ease-in-out infinite; }

/* Services */
.services { padding: 100px 5%; background: var(--dark); color: #fff; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 15px; background: linear-gradient(145deg, #000000, #b17c7c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-header h2 span { background: linear-gradient(145deg, var(--gold), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-header p { color: #aaa; max-width: 600px; margin: 0 auto; }
.services-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.service-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 40px 30px; border-radius: 15px; text-align: center; transition: 0.4s; cursor: pointer; position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, transparent 70%); opacity: 0; transition: 0.4s; }
.service-card:hover::before { opacity: 1; }
.service-card:hover { transform: translateY(-10px); background: rgba(255,255,255,0.1); border-color: var(--gold); box-shadow: 0 20px 40px rgba(201,168,76,0.3); }
.service-card i { font-size: 3rem; background: linear-gradient(145deg, var(--gold), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 20px; display: inline-block; transition: 0.4s; }
.service-card:hover i { transform: scale(1.2) rotate(5deg); }
.service-card h3 { font-size: 1.3rem; margin-bottom: 15px; }
.service-card p { color: #aaa; font-size: 0.95rem; line-height: 1.6; }

/* Gallery */
.gallery { padding: 100px 5%; background: #fff; position: relative; overflow: hidden; }
.gallery::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 50%, rgba(201,168,76,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(201,168,76,0.08) 0%, transparent 50%); animation: pattern 10s linear infinite; }
.gallery-grid { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 15px; height: 300px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: 0.4s; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; }
.gallery-item:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(201,168,76,0.3); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26,26,46,0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; pointer-events: none; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay i { color: #fff; font-size: 2rem; }

/* Testimonials */
.testimonials { padding: 100px 5%; background: var(--light); position: relative; overflow: hidden; }
.testimonials::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(201,168,76,0.04) 35px, rgba(201,168,76,0.04) 70px); animation: pattern 12s linear infinite; }
.testimonial-slider { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; overflow: hidden; }
.testimonial-track { display: flex; transition: 0.5s; }
.testimonial-item { min-width: 100%; padding: 40px; text-align: center; }
.testimonial-item .quote { font-size: 4rem; color: var(--gold); line-height: 0; }
.testimonial-item p { font-size: 1.1rem; color: #555; line-height: 1.8; margin: 20px 0; font-style: italic; }
.testimonial-item h4 { color: var(--dark); font-size: 1.1rem; }
.testimonial-item .stars { color: var(--gold); margin-top: 10px; }
.testimonial-nav { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
.test-nav-btn { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--gold); background: transparent; color: var(--gold); cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.test-nav-btn:hover { background: var(--gold); color: #fff; transform: scale(1.1); }

/* Contact */
.contact { padding: 100px 5%; background: var(--dark); color: #fff; }
.contact-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 30px; background: linear-gradient(145deg, #fff, #e0e0e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.contact-info h2 span { background: linear-gradient(145deg, var(--gold), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.contact-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.contact-item i { font-size: 1.5rem; background: linear-gradient(145deg, var(--gold), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-top: 5px; display: inline-block; }
.contact-item h4 { margin-bottom: 5px; font-size: 1.1rem; }
.contact-item p { color: #aaa; }
.contact-item a { color: var(--gold); text-decoration: none; transition: 0.3s; }
.contact-item a:hover { text-shadow: 0 0 10px rgba(201,168,76,0.5); }
.map-container { background: rgba(255,255,255,0.05); padding: 20px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.1); }
.map-container iframe { border-radius: 10px; }

/* Footer */
footer { background: #0f0f1a; color: #aaa; padding: 40px 5%; text-align: center; }
footer .socials { margin-bottom: 20px; }
footer .socials a { color: #fff; font-size: 1.3rem; margin: 0 15px; transition: 0.3s; display: inline-block; }
footer .socials a:hover { color: var(--gold); transform: translateY(-3px) scale(1.2); }

/* WhatsApp Float */
.whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(145deg, #25D366, #128C7E); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem; box-shadow: 0 5px 20px rgba(37,211,102,0.4); z-index: 999; animation: pulse 2s infinite; text-decoration: none; transition: 0.3s; }
.whatsapp-float:hover { transform: scale(1.1) rotate(10deg); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); } 70% { box-shadow: 0 0 0 20px rgba(37,211,102,0); } }

/* Lightbox Gallery */
.lightbox { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); justify-content: center; align-items: center; }
.lightbox.active { display: flex; }
.lightbox-content { max-width: 90%; max-height: 90%; position: relative; }
.lightbox-content img { max-width: 100%; max-height: 90vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; z-index: 10000; transition: 0.3s; }
.lightbox-close:hover { color: var(--gold); transform: rotate(90deg); }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 40px; cursor: pointer; padding: 20px; user-select: none; transition: 0.3s; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover, .lightbox-next:hover { color: var(--gold); transform: scale(1.2); }

/* Responsive */
@media (max-width: 768px) {
    .nav-links { position: fixed; top: 0; left: -300px; width: 300px; height: 100vh; background: linear-gradient(180deg, rgba(26,26,46,0.99), rgba(15,15,30,0.99)); flex-direction: column; padding: 100px 0 30px; gap: 0; backdrop-filter: blur(15px); transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; display: flex !important; box-shadow: 4px 0 30px rgba(0,0,0,0.4); }
    .nav-links.open { left: 0; }
    .nav-links a { color: rgba(255,255,255,0.85) !important; font-size: 1.05rem; padding: 16px 30px; border-bottom: 1px solid rgba(255,255,255,0.06); display: block; transition: all 0.25s ease; letter-spacing: 0.3px; }
    .nav-links a:hover { color: var(--gold) !important; background: rgba(201,168,76,0.08); padding-left: 36px; }
    .nav-links a::after { display: none; }
    .mobile-menu { display: block; position: relative; z-index: 1000; }
    .logo { font-size: 1.1rem; white-space: nowrap; }
    .slide-content h1 { font-size: 2.5rem; }
    .about-container, .contact-container { grid-template-columns: 1fr; }
    .about-img::before { display: none; }
    .lightbox-close { top: 10px; right: 20px; font-size: 30px; }
    .lightbox-prev, .lightbox-next { font-size: 30px; padding: 10px; }
    .gallery-item { height: 250px; }
}