:root{--gold:#D4AF37;--gold2:#F5D061;--ink:#0B0B0C;--ink2:#18181b;--bg:#0b0b0c;--muted:#a1a1aa;--card:#111113;--line:#2a2a2f}
*{box-sizing:border-box}
html,body,#root{height:100%}
html,body{margin:0;padding:0;background:var(--bg);color:#f8f8f8;font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}

/* Header */
.header{
  position:sticky;top:0;background:#0b0b0ce6;
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--line);z-index:10
}

/* ⬇️ CHANGED: grid with 3 columns so nav is truly centered */
.header-inner{
  max-width:1200px;margin:0 auto;padding:12px 16px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px
}

/* Left = brand, middle = nav, right = socials */
.brand{justify-self:start}
.nav{justify-self:center}
.nav-right{justify-self:end;display:flex;gap:10px;align-items:center}  /* ⬅ remove margin-left:auto */

/* BIGGER LOGO + WHITE GLOW */
.brand img{
  height:150px;width:auto;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 10px rgba(255,255,255,.45));
  border-radius:6px
}
@media (max-width:900px){
  .brand img{height:54px}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:10px 10px;font-weight:600;color:#f3f3f3}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;color:#111}
.btn.ghost{background:transparent;border-color:#3a3a3f}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.card-body{padding:16px}

/* Flash banner */
.flash-banner{background:#0f0f12;color:#e5e5e5;border-bottom:1px solid var(--line)}
.flash-inner{max-width:1100px;margin:0 auto;padding:8px 16px;display:flex;justify-content:center;gap:12px;align-items:center}
.flash-dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold2))}
.flash-link{text-decoration:underline}

/* Hero */
.hero-carousel{
  position:relative;overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('/bg-hero.JPG');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  min-height:520px
}

/* Keep existing styling below 
.hero-slide{display:none;padding:56px 0}
.hero-slide.active{display:block}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}*/

/* Slides */
.hero-slide{
  display:none;
  padding:56px 0;
  text-align:left;              /* keep text left-aligned inside */
}

.hero-slide.active{ display:block; }

.hero-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:18px;

  /* ✅ new centering */
  max-width:1100px;             /* control content width */
  margin:0 auto;                /* center horizontally */
  padding:0 16px;               /* breathing room on edges */
}


/* Forms */
.form{display:grid;gap:10px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* === MOBILE-FRIENDLY FORM CONTROLS === */
input,select,textarea{
  background:#111116;
  color:#f1f1f1;
  border:1px solid #2a2a2f;
  border-radius:12px;           /* was 10px */
  padding:14px 16px;            /* was 10px 12px */
  font-size:16px;               /* prevents iOS zoom */
  line-height:1.35;
  min-height:44px;              /* touch target ~44px */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Keep checkboxes/radios reasonable */
input[type="checkbox"], input[type="radio"]{
  min-height:auto;
  padding:0;
  width:auto;
}

label{font-size:12px;color:#d6d6d6}
.form .note{font-size:12px;color:#bdbdbd}

/* Label beside input */
.field{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center}
.field label{font-size:13px;color:#eaeaea;margin:0}
.field input,.field select,.field textarea{width:100%}

/* Validation + confirmation */
.error{color:#ffb3b3;font-size:12px;margin-top:4px}
.success{color:#b4ffb4}
.confirm-card{margin-top:12px}

/* Social icons */
.icon{display:inline-block;width:20px;height:20px}
.icon svg{width:20px;height:20px;fill:var(--gold)}

/* Navigation */
.nav{
 display: flex;
  justify-content: center; /* keeps nav items centered */
  align-items: center;
  gap: 16px;              /* consistent spacing */
  flex-wrap: wrap;        /* allow wrap on smaller screens */
}
.nav .btn{
  font-weight:500;padding:8px 14px;border-radius:6px;color:var(--gold);text-decoration:none
}
.nav .btn:hover{background:rgba(255,215,0,0.08)}

/* --- Mobile & tablet fixes: keep things centered --- */
@media (max-width:900px){
  /* stack header rows but keep the nav centered */
  .header-inner{ grid-template-columns:1fr; }

  .nav{
    justify-content:center;     /* was flex-start */
    flex-wrap:wrap;
    gap:12px;
    margin-top:8px;
  }

  .nav-right{
    justify-self:center;        /* center socials too (optional) */
    margin-top:8px;
  }

  /* make flash banner message truly centered */
  .flash-inner{
    justify-content:center;     /* flex-center horizontally */
    text-align:center;          /* center text lines */
    width:100%;
  }
}

/* new addition 

.hero-slide .hero-grid{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.hero-slide.active .hero-grid{
  opacity: 1;
  transform: translateY(0);
}

/* polish the dots + hover */
.dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}
.dot{
  width:12px;height:12px;border-radius:999px;
  border:2px solid var(--gold);
  background:transparent;
  cursor:pointer;
  opacity:.7;
  transition:opacity .25s ease, background .25s ease, transform .25s ease;
}
.dot:hover{ opacity:1; transform: scale(1.1); }
.dot.active{ background:var(--gold); opacity:1; }

/* accessibility: reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  .hero-slide .hero-grid{ transition:none; transform:none; opacity:1; }
  .dot{ transition:none }
}

/* tag line */
.brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keeps it left aligned with nav */
}

.brand .tagline {
  font-weight: 700;                 /* bold */
  font-size: 20px;
  color: var(--gold);               /* your gold theme */
  margin-top: 4px;
  text-shadow: 0 0 4px rgba(255,255,255,.3);
}

@media (max-width: 900px) {
  .brand .tagline {
    font-size: 12px;
    text-align: center;
  }
}

.required {
  color: #ff4d4d;  /* bright red */
  margin-left: 4px;
  font-weight: bold;
}

/* Live Chat floating widget */
.chat-launcher{
  position:fixed; right:16px; bottom:16px;
  width:52px; height:52px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111; border:none; box-shadow:0 10px 24px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.chat-launcher:hover{ transform:translateY(-1px); transition:.2s ease transform }

.chat-window{
  position:fixed; right:16px; bottom:80px; width:320px; max-width:92vw;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.45); overflow:hidden;
  opacity:0; transform:translateY(10px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.chat-window.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }

.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  background:#0f0f12; padding:10px 12px; border-bottom:1px solid var(--line)
}
.chat-title{ font-weight:700; color:var(--gold) }
.chat-close{ background:transparent; border:none; color:#f2f2f2; font-size:20px; cursor:pointer }

.chat-body{ padding:12px }
.chat-body textarea{ background:#111116; color:#f1f1f1; border:1px solid #2a2a2f; border-radius:10px; padding:10px 12px; width:100% }

@media (max-width: 480px){
  .chat-window{ right:8px; left:8px; width:auto }
  .chat-launcher{ right:12px; bottom:12px }
}

/*whatsapp */

/* Floating WhatsApp button — bottom-left */
.wa-fab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111; border:none; box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.wa-fab:hover{ transform:translateY(-1px); transition:transform .2s ease }
@media (max-width:480px){
  .wa-fab{ padding:10px }
  .wa-fab .wa-label{ display:none }
}

/*Services */

.services {
  padding: 60px 16px;
  text-align: center;
}
.services .title {
  font-size: 2rem;
  margin-bottom: 36px;
  color: var(--gold);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.service-card .icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.service-card h2 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: #fff;
}
.service-card p {
  color: #ccc;
  font-size: .95rem;
  line-height: 1.4;
}

/* === Extra mobile stacking for forms === */
@media (max-width: 600px) {
  .form .row{ grid-template-columns:1fr; }
  .field{ grid-template-columns:1fr; align-items:stretch; }
  label{ font-size:14px; margin-bottom:4px; }
  input,select,textarea{ width:100%; font-size:18px; padding:16px 18px; min-height:48px; }
}