:root {
  --navy: #0a0a0a;
  --navy-light: #161616;
  --charcoal: #e8e8e8;
  --card-bg: #17181c;
  --card-border: rgba(255,255,255,0.08);
  --gold: #c99a3e;
  --gold-light: #e0b968;
  --gray: #9aa0aa;
  --light-gray: #121315;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--charcoal);
  background-color: var(--navy);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-heading {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

a { text-decoration: none; }

.text-gold { color: var(--gold) !important; }
.bg-navy { background-color: var(--navy) !important; }
.bg-navy-light { background-color: var(--navy-light) !important; }
.bg-gold { background-color: var(--gold) !important; }
.bg-light-gray { background-color: var(--light-gray) !important; }

.btn-gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  transition: all 0.25s ease;
}
.btn-gold:hover {
  background-color: var(--gold-light);
  border-color: var(--gold-light);
  color: #0a0a0a;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(201, 154, 62, 0.35);
}

.btn-outline-light-custom {
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
  font-weight: 600;
  padding: 0.7rem 1.7rem;
  border-radius: 4px;
  transition: all 0.25s ease;
  background: transparent;
}
.btn-outline-light-custom:hover {
  background: #fff;
  color: var(--navy);
}

.btn-navy {
  background-color: var(--gold);
  color: #0a0a0a;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  border: 2px solid var(--gold);
  transition: all 0.25s ease;
}
.btn-navy:hover {
  background: transparent;
  color: var(--gold);
  transform: translateY(-2px);
}

.section-pad { padding: 6rem 0; }
@media (max-width: 768px) { .section-pad { padding: 3.5rem 0; } }

.section-label {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Header */
#mainHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: all 0.35s ease;
  padding: 1.25rem 0;
}
#mainHeader.scrolled {
  background: var(--navy);
  padding: 0.75rem 0;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
#mainHeader .nav-link {
  color: #fff;
  font-weight: 500;
  margin: 0 0.65rem;
  position: relative;
}
#mainHeader .nav-link.active,
#mainHeader .nav-link:hover { color: var(--gold-light); }
#mainHeader .navbar-brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
}
#mainHeader .navbar-brand span { color: var(--gold); }

/* Hero */
.hero-section {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.78) 60%, rgba(10,10,10,0.6) 100%);
}
.hero-content { position: relative; z-index: 2; animation: fadeUp 1s ease; }
.hero-content h1 { font-size: clamp(2.2rem, 5vw, 4rem); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.8s ease both; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Cards */
.service-card, .project-card, .value-card {
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.35s ease;
  box-shadow: 0 5px 20px rgba(0,0,0,0.35);
  border: 1px solid var(--card-border);
}
.service-card:hover, .project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.service-card .icon-wrap, .value-card .icon-wrap {
  width: 62px; height: 62px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 1.5rem;
  border: 1px solid var(--card-border);
}
.project-card .img-wrap { overflow: hidden; height: 260px; }
.project-card img { transition: transform 0.5s ease; height: 100%; width: 100%; object-fit: cover; }
.project-card:hover img { transform: scale(1.08); }
.project-cat-badge {
  background: var(--gold);
  color: #0a0a0a;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stats */
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--gold);
  font-family: 'Poppins', sans-serif;
}

/* Testimonials */
.testimonial-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 2.25rem;
  box-shadow: 0 5px 25px rgba(0,0,0,0.4);
  border: 1px solid var(--card-border);
  height: 100%;
}
.testimonial-card .stars { color: var(--gold); }

/* CTA */
.cta-section {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

/* Footer */
footer.site-footer {
  background: #050505;
  color: rgba(255,255,255,0.75);
  border-top: 1px solid var(--card-border);
}
footer.site-footer h5 { color: #fff; margin-bottom: 1.25rem; }
footer.site-footer a { color: rgba(255,255,255,0.65); }
footer.site-footer a:hover { color: var(--gold); }
.social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; margin-right: 0.5rem;
  transition: all 0.25s ease;
}
.social-icon:hover { background: var(--gold); color: #0a0a0a; }
footer.site-footer a.social-icon:hover { color: #0a0a0a; }

.social-icon:has(i.fa-facebook-f):hover { background: #1877F2; color: #fff; }
footer.site-footer a.social-icon:has(i.fa-facebook-f):hover { color: #fff; }

.social-icon:has(i.fa-instagram):hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
footer.site-footer a.social-icon:has(i.fa-instagram):hover { color: #fff; }

.social-icon:has(i.fa-linkedin-in):hover { background: #0A66C2; color: #fff; }
footer.site-footer a.social-icon:has(i.fa-linkedin-in):hover { color: #fff; }

.social-icon:has(i.fa-youtube):hover { background: #FF0000; color: #fff; }
footer.site-footer a.social-icon:has(i.fa-youtube):hover { color: #fff; }

.social-icon:has(i.fa-whatsapp):hover { background: #25D366; color: #fff; }
footer.site-footer a.social-icon:has(i.fa-whatsapp):hover { color: #fff; }

/* Page header */
.page-header {
  background: linear-gradient(120deg, rgba(10,10,10,0.95), rgba(10,10,10,0.85)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=1600') center/cover;
  color: #fff;
  padding: 9rem 0 4rem;
}

/* Gallery lightbox */
.gallery-item { border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; border: 1px solid var(--card-border); }
.gallery-item img { transition: transform 0.4s ease; width: 100%; height: 260px; object-fit: cover; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.75);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
  color: #fff;
}
.gallery-item:hover .overlay { opacity: 1; }

.filter-btn {
  border: none; background: transparent;
  padding: 0.5rem 1.25rem; border-radius: 20px;
  font-weight: 600; color: var(--gray);
  transition: all 0.2s ease;
}
.filter-btn.active, .filter-btn:hover { background: var(--gold); color: #0a0a0a; }

.form-control-custom {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background-color: var(--card-bg);
  color: #fff;
}
.form-control-custom::placeholder { color: rgba(255,255,255,0.4); }
.form-control-custom:focus { border-color: var(--gold); box-shadow: 0 0 0 0.2rem rgba(201,154,62,0.15); background-color: var(--card-bg); color: #fff; }

/* Pagination — matched to black + gold theme */
.pagination { gap: 0.35rem; }
.pagination .page-link {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--gray);
  border-radius: 6px;
  padding: 0.55rem 1rem;
  transition: all 0.2s ease;
}
.pagination .page-link:hover {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
}
.pagination .page-item.active .page-link {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
  font-weight: 600;
}
.pagination .page-item.disabled .page-link {
  background-color: var(--navy-light);
  border-color: var(--card-border);
  color: rgba(255,255,255,0.25);
}
.pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(201,154,62,0.25);
}