html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   ZEN GEM & JEWELLERY — Main Stylesheet
   Theme: Deep Navy Blue + Gold
========================================================= */

:root{
  --zen-navy:#0b1a3d;
  --zen-navy-dark:#071228;
  --zen-navy-light:#13285c;
  --zen-gold:#d4af37;
  --zen-gold-light:#f4dd8c;
  --zen-gold-dark:#a9822a;
  --zen-cream:#fbf8f1;
  --zen-text:#2c2c2c;
  --zen-muted:#6b7280;
  --radius-lg:18px;
  --radius-md:12px;
  --shadow-soft:0 10px 30px rgba(11,26,61,0.10);
  --shadow-gold:0 8px 20px rgba(212,175,55,0.35);
}

*{box-sizing:border-box;}

body{
  font-family:'Poppins', 'Segoe UI', sans-serif;
  color:var(--zen-text);
  background:var(--zen-cream);
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  font-family:'Playfair Display', Georgia, serif;
  color:var(--zen-navy);
  font-weight:700;
}

a{ text-decoration:none; }

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

/* ---------------- Buttons ---------------- */
.btn-gold{
  background:linear-gradient(135deg,var(--zen-gold-light),var(--zen-gold) 55%,var(--zen-gold-dark));
  color:var(--zen-navy-dark);
  font-weight:700;
  border:none;
  padding:0.75rem 1.9rem;
  border-radius:50px;
  box-shadow:var(--shadow-gold);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(212,175,55,0.45);
  color:var(--zen-navy-dark);
}
.btn-outline-gold{
  border:2px solid var(--zen-gold);
  color:var(--zen-gold);
  font-weight:600;
  padding:0.7rem 1.8rem;
  border-radius:50px;
  background:transparent;
  transition:all .25s ease;
}
.btn-outline-gold:hover{
  background:var(--zen-gold);
  color:var(--zen-navy-dark);
}
.btn-navy{
  background:var(--zen-navy);
  color:var(--zen-gold-light);
  font-weight:600;
  border-radius:50px;
  padding:0.75rem 1.9rem;
  border:1px solid var(--zen-navy);
  transition:all .25s ease;
}
.btn-navy:hover{
  background:var(--zen-navy-dark);
  color:var(--zen-gold);
}

/* ---------------- Eyebrow / Badge pill ---------------- */
.eyebrow{
  display:inline-block;
  padding:.4rem 1.1rem;
  border:1.5px solid var(--zen-gold);
  color:var(--zen-navy);
  background:rgba(212,175,55,0.08);
  border-radius:50px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1rem;
}

/* ---------------- Navbar ---------------- */
.zen-navbar{
  background:var(--zen-navy);
  padding:.6rem 0;
  box-shadow:0 2px 18px rgba(0,0,0,.25);
}
.zen-navbar .navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.zen-logo-mark{
  width:46px;height:46px;border-radius:10px;
  background:radial-gradient(circle at 30% 30%, var(--zen-navy-light), var(--zen-navy-dark));
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--zen-gold);
  font-family:'Playfair Display',serif;
  color:var(--zen-gold);
  font-weight:700;
  font-size:1.2rem;
}
.zen-navbar .brand-text{
  line-height:1.05;
}
.zen-navbar .brand-text .top{
  font-family:'Playfair Display',serif;
  color:var(--zen-gold);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.03em;
}
.zen-navbar .brand-text .sub{
  color:#c8d0e6;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.zen-navbar .nav-link{
  color:#e6ebf7 !important;
  font-weight:600;
  font-size:.92rem;
  padding:.5rem 1rem !important;
  border-radius:8px;
  transition:all .2s ease;
}
.zen-navbar .nav-link:hover,
.zen-navbar .nav-link.active{
  color:var(--zen-gold) !important;
  background:rgba(212,175,55,0.09);
}
.zen-navbar .navbar-toggler{
  border-color:var(--zen-gold);
}
.zen-navbar .navbar-toggler-icon{
  filter:invert(80%) sepia(50%) saturate(500%) hue-rotate(360deg);
}
.zen-top-strip{
  background:var(--zen-navy-dark);
  color:#a8b3d1;
  font-size:.8rem;
  padding:.4rem 0;
}
.zen-top-strip a{ color:var(--zen-gold-light); }

/* ---------------- Hero ---------------- */
.zen-hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(212,175,55,0.18), transparent 60%),
    linear-gradient(160deg, var(--zen-navy) 0%, var(--zen-navy-dark) 70%);
  color:#fff;
  padding:6rem 0 5rem;
  overflow:hidden;
}
.zen-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(212,175,55,0.35) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.15;
  pointer-events:none;
}
.zen-hero h1{
  color:#fff;
  font-size:3rem;
}
.zen-hero .accent{ color:var(--zen-gold); }
.zen-hero p.lead{
  color:#c9d1e8;
  max-width:560px;
}
.zen-hero-badge{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(212,175,55,.4);
  border-radius:var(--radius-lg);
  padding:1.2rem 1.4rem;
  backdrop-filter:blur(6px);
}

/* ---------------- Sections ---------------- */
.section{ padding:5rem 0; }
.section-sm{ padding:3rem 0; }
.section-title{ margin-bottom:.75rem; }
.section-sub{ color:var(--zen-muted); max-width:620px; }

/* ---------------- Cards ---------------- */
.zen-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:2rem 1.6rem;
  border:1px solid rgba(11,26,61,0.06);
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.zen-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(11,26,61,0.14);
}
.zen-card .icon-circle{
  width:58px;height:58px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--zen-gold-light),var(--zen-gold));
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  color:var(--zen-navy-dark);
  margin-bottom:1.1rem;
}

/* ---------------- Gold price cards ---------------- */
.price-card{
  background:#fff;
  border:1px solid rgba(212,175,55,0.35);
  border-radius:var(--radius-lg);
  padding:1.8rem 1.4rem;
  text-align:center;
  box-shadow:var(--shadow-soft);
  height:100%;
}
.price-card .karat-pill{
  display:inline-block;
  background:var(--zen-navy);
  color:var(--zen-gold-light);
  padding:.35rem 1.1rem;
  border-radius:50px;
  font-weight:700;
  font-size:.85rem;
  margin-bottom:.9rem;
}
.price-card .price{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1.9rem;
  color:var(--zen-navy);
}
.price-card .price-unit{
  color:var(--zen-muted);
  font-size:.85rem;
}
.price-card .thumb{
  width:100%;
  height:130px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,#f4dd8c,#d4af37 60%,#a9822a);
  margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
  color:rgba(11,26,61,.55);
  font-size:1.7rem;
}

.rate-banner{
  background:linear-gradient(135deg,var(--zen-navy),var(--zen-navy-light));
  color:#fff;
  border-radius:var(--radius-lg);
  padding:1.1rem 1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
  border:1px solid rgba(212,175,55,.4);
}
.rate-banner .dot{
  width:9px;height:9px;border-radius:50%;
  background:#3ddc84;
  display:inline-block;
  margin-right:.4rem;
  box-shadow:0 0 0 4px rgba(61,220,132,.18);
}

/* ---------------- Gold Calculator ---------------- */
.calc-box{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:1.8rem;
  border-top:4px solid var(--zen-gold);
}
.calc-box label{
  font-weight:600;
  font-size:.85rem;
  color:var(--zen-navy);
}
.calc-box .form-control,
.calc-box .form-select{
  border-radius:10px;
  border:1px solid #e3e3ec;
  padding:.6rem .8rem;
}
.calc-box .form-control:focus,
.calc-box .form-select:focus{
  border-color:var(--zen-gold);
  box-shadow:0 0 0 .2rem rgba(212,175,55,.18);
}
.calc-result{
  background:var(--zen-navy);
  color:var(--zen-gold-light);
  border-radius:var(--radius-md);
  padding:1.1rem;
  text-align:center;
  font-size:1.4rem;
  font-weight:700;
  font-family:'Playfair Display',serif;
}

/* ---------------- Notice Card ---------------- */
.notice-card{
  background:linear-gradient(155deg,var(--zen-navy) 0%,var(--zen-navy-dark) 100%);
  border:1.5px solid var(--zen-gold);
  border-radius:var(--radius-lg);
  color:#fff;
  padding:3rem 2.4rem;
  position:relative;
  overflow:hidden;
}
.notice-card::before,
.notice-card::after{
  content:"";
  position:absolute;
  width:34px;height:34px;
  border:2px solid var(--zen-gold);
}
.notice-card::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.notice-card::after{ bottom:14px; right:14px; border-left:none; border-top:none; }
.notice-card h3{ color:var(--zen-gold); }
.notice-card p{ color:#d6dcef; }

/* ---------------- Timeline / process ---------------- */
.zen-step{
  text-align:center;
  padding:1.2rem;
}
.zen-step .num{
  width:52px;height:52px;
  border-radius:50%;
  border:2px solid var(--zen-gold);
  color:var(--zen-gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  margin:0 auto 1rem;
  font-family:'Playfair Display',serif;
}

/* ---------------- Branch / location cards ---------------- */
.branch-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  height:100%;
}
.branch-card .map-block{
  height:180px;
  background:linear-gradient(135deg,var(--zen-navy),var(--zen-navy-light));
  display:flex;align-items:center;justify-content:center;
  color:var(--zen-gold-light);
  font-size:2rem;
}
.branch-card .body{ padding:1.4rem 1.5rem; }
.branch-card h5{ margin-bottom:.4rem; }
.branch-card .meta{ color:var(--zen-muted); font-size:.9rem; }

/* ---------------- Testimonials ---------------- */
.quote-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:1.8rem;
  height:100%;
}
.quote-card .stars{ color:var(--zen-gold); letter-spacing:2px; }
.quote-card .avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--zen-navy);
  color:var(--zen-gold-light);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}

/* ---------------- Contact ---------------- */
.contact-form{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:2rem;
}
.contact-form .form-control{
  border-radius:10px;
  padding:.7rem .9rem;
  border:1px solid #e3e3ec;
}
.contact-form .form-control:focus{
  border-color:var(--zen-gold);
  box-shadow:0 0 0 .2rem rgba(212,175,55,.18);
}
.contact-info-item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1.5rem;
}
.contact-info-item .ic{
  width:46px;height:46px;flex:0 0 46px;
  border-radius:50%;
  background:rgba(212,175,55,.12);
  color:var(--zen-gold-dark);
  display:flex;align-items:center;justify-content:center;
}

/* ---------------- CTA strip ---------------- */
.cta-strip{
  background:linear-gradient(135deg,var(--zen-navy),var(--zen-navy-dark));
  border-radius:var(--radius-lg);
  padding:3rem 2.5rem;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-strip::after{
  content:"";
  position:absolute;
  right:-60px;top:-60px;
  width:220px;height:220px;
  border-radius:50%;
  background:rgba(212,175,55,.15);
}

/* ---------------- Footer ---------------- */
.zen-footer{
  background:var(--zen-navy-dark);
  color:#a8b3d1;
  padding:3.5rem 0 1.2rem;
}
.zen-footer h6{
  color:var(--zen-gold);
  font-family:'Playfair Display',serif;
  letter-spacing:.05em;
  margin-bottom:1.1rem;
}
.zen-footer a{ color:#a8b3d1; }
.zen-footer a:hover{ color:var(--zen-gold-light); }
.zen-footer ul{ list-style:none; padding:0; margin:0; }
.zen-footer ul li{ margin-bottom:.55rem; }
.zen-footer .bottom-bar{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:2.4rem;
  padding-top:1.2rem;
  font-size:.85rem;
  color:#7c88ab;
}
.social-ic{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.5);
  display:flex;align-items:center;justify-content:center;
  color:var(--zen-gold);
  transition:all .2s ease;
}
.social-ic:hover{ background:var(--zen-gold); color:var(--zen-navy-dark); }

/* ---------------- Floating buttons ---------------- */
.zen-floating{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1050;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.zen-floating a{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:1.3rem;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.zen-floating .wa{ background:#25D366; }
.zen-floating .call{ background:var(--zen-navy); border:2px solid var(--zen-gold); }

/* ---------------- Breadcrumb / page header ---------------- */
.page-header{
  background:linear-gradient(135deg,var(--zen-navy),var(--zen-navy-light));
  color:#fff;
  padding:3.4rem 0;
  text-align:center;
}
.page-header h1{ color:#fff; }
.page-header .crumb{ color:#c9d1e8; font-size:.9rem; }
.page-header .crumb a{ color:var(--zen-gold-light); }

@media (max-width: 767px){
  .zen-hero h1{ font-size:2.1rem; }
  .section{ padding:3.2rem 0; }
}