/* ==========================================================================
   Dream Nest Renew — Custom Theme
   Built on Bootstrap 5.3 grid. Warm, trustworthy, home-renovation brand.
   ========================================================================== */

:root {
  --brand: #0e6e66;          /* primary emerald teal */
  --brand-dark: #0a514b;
  --brand-deeper: #083c38;
  --accent: #e8a33d;         /* warm amber */
  --accent-dark: #d18a1f;
  --cream: #faf6ef;
  --sand: #f2ebe0;
  --ink: #22312c;
  --muted: #5f6f68;
  --line: #e6ddd0;
  --white: #ffffff;

  --shadow-sm: 0 4px 14px rgba(20, 52, 44, 0.08);
  --shadow-md: 0 12px 30px rgba(20, 52, 44, 0.12);
  --shadow-lg: 0 24px 50px rgba(20, 52, 44, 0.18);
  --radius: 18px;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
}

h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

p { color: var(--muted); }

a { text-decoration: none; }

img { max-width: 100%; }

.text-brand { color: var(--brand) !important; }
.text-accent { color: var(--accent) !important; }

.bg-brand { background-color: var(--brand) !important; }
.bg-cream { background-color: var(--cream) !important; }
.bg-sand { background-color: var(--sand) !important; }
.bg-ink { background-color: var(--brand-deeper) !important; }

.btn { border-radius: 999px; padding: 0.7rem 1.6rem; font-weight: 600; }
.btn-brand {
  background: var(--brand); color: #fff; border: none;
  box-shadow: var(--shadow-sm);
}
.btn-brand:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--accent); color: #22312c; border: none; box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline-brand { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

.section { padding: 5rem 0; }
.section-sm { padding: 3.5rem 0; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--brand-deeper);
  color: #d9efe9;
  font-size: 0.85rem;
}
.topbar a { color: #d9efe9; }
.topbar a:hover { color: var(--accent); }
.topbar .bi { color: var(--accent); margin-right: 0.3rem; }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(20,52,44,0.08);
  padding: 0.9rem 0;
}
.navbar-brand { font-weight: 800; font-size: 1.45rem; color: var(--brand) !important; letter-spacing: -0.02em; }
.navbar-brand span { color: var(--accent); }
.navbar-brand .tag { display:block; font-size: 0.68rem; font-weight:600; color: var(--muted); letter-spacing: 0.28em; text-transform: uppercase; }
.navbar .nav-link { font-weight: 600; color: var(--ink); margin: 0 0.25rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--brand); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background: linear-gradient(120deg, rgba(8,60,56,0.92), rgba(14,110,102,0.78)), url("../assets/images/hero-home.jpg") center/cover no-repeat;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 6rem 0;
}
.hero h1 { color:#fff; font-weight:800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.15; }
.hero p.lead { color:#d9efe9; }
.hero .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing:0.25em; font-weight:700; font-size:0.82rem; }
.hero-badge {
  background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  color:#fff; border-radius:999px; padding:0.35rem 1rem; font-size:0.85rem;
}
.hero-badge .bi { color: var(--accent); }

/* floating stat cards */
.stat-card {
  background:#fff; color:var(--ink); border-radius:var(--radius);
  box-shadow: var(--shadow-lg); padding:1.4rem;
}
.stat-card .num { font-size:1.9rem; font-weight:800; color:var(--brand); }
.stat-card .lbl { font-size:0.85rem; color:var(--muted); font-weight:600; }

/* ---------- Section headings ---------- */
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing:0.24em; font-weight:700; font-size:0.8rem; }
.section-title { font-weight:800; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-sub { color: var(--muted); }

/* ---------- Cards ---------- */
.service-card {
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:#fff; transition: transform .25s ease, box-shadow .25s ease; height:100%;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card img { height: 200px; width:100%; object-fit:cover; }
.service-card .card-body { padding:1.5rem; }
.service-card .icon { width:52px; height:52px; border-radius:14px; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--brand); }
.service-card h5 { font-weight:700; }
.service-card p { font-size:0.95rem; }
.service-card .link { color: var(--brand); font-weight:700; }
.service-card .link:hover { color: var(--accent-dark); }

.feature-item { display:flex; gap:1rem; }
.feature-item .ico { flex:0 0 auto; width:52px; height:52px; border-radius:14px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.feature-item h5 { font-size:1.05rem; font-weight:700; }

/* ---------- Numbered steps ---------- */
.step { position: relative; }
.step .badge-num {
  width:46px; height:46px; border-radius:50%; background:var(--accent); color:#22312c;
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}

/* ---------- Testimonial ---------- */
.testimonial {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; box-shadow:var(--shadow-sm); height:100%;
}
.testimonial .stars { color: var(--accent); }
.testimonial .quote { color: var(--ink); font-style: italic; }
.testimonial .avatar { width:48px; height:48px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.testimonial .name { font-weight:700; color: var(--ink); }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(120deg, var(--brand-deeper), var(--brand)); color:#fff; border-radius:var(--radius); padding:3rem; position:relative; overflow:hidden; }
.cta-banner h2 { color:#fff; }
.cta-banner p { color:#d9efe9; }

/* ---------- Blog cards ---------- */
.blog-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition: transform .25s ease, box-shadow .25s ease; height:100%; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-card img { height:200px; width:100%; object-fit:cover; }
.blog-card .cat { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-dark); }
.blog-card h5 { font-weight:700; }
.blog-card h5 a { color: var(--ink); }
.blog-card h5 a:hover { color: var(--brand); }

/* ---------- Footer ---------- */
.footer { background: var(--brand-deeper); color:#cfe6df; }
.footer h6 { color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; font-size:0.85rem; }
.footer a { color:#cfe6df; }
.footer a:hover { color: var(--accent); }
.footer .brand-foot { color:#fff; font-weight:800; font-size:1.4rem; }
.footer .brand-foot span { color: var(--accent); }
.footer .contact i { color: var(--accent); margin-right:0.5rem; }
.footer .bottom { border-top:1px solid rgba(255,255,255,0.12); }

.social a {
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.1);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:0.4rem;
}
.social a:hover { background: var(--accent); color:#22312c; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius:12px; padding:0.75rem 1rem; border:1px solid var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 0.2rem rgba(14,110,102,0.15); }
.form-label { font-weight:600; color: var(--ink); }
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.alert-success { border-radius:12px; background:#e6f6ef; border-color:#b9e6d2; color:#0a514b; }
.alert-danger { border-radius:12px; }

/* ---------- Page hero (inner) ---------- */
.page-hero { background: linear-gradient(120deg, var(--brand-deeper), var(--brand)); color:#fff; padding:4.5rem 0 3.5rem; }
.page-hero h1 { color:#fff; font-weight:800; }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,0.5); --bs-breadcrumb-item-active-color: #d9efe9; margin:0; }
.page-hero .breadcrumb a { color: var(--accent); }
.page-hero p { color:#d9efe9; }

/* ---------- Accordion ---------- */
.accordion-item { border:1px solid var(--line); border-radius:12px !important; overflow:hidden; margin-bottom:0.75rem; }
.accordion-button:not(.collapsed) { background:var(--cream); color:var(--brand); font-weight:700; box-shadow:none; }
.accordion-button:focus { box-shadow:none; border-color:var(--line); }

/* ---------- Lists ---------- */
.check-list { list-style:none; padding-left:0; }
.check-list li { padding:0.35rem 0; padding-left:2rem; position:relative; color:var(--muted); }
.check-list li::before {
  content:""; position:absolute; left:0; top:0.7rem; width:1.1rem; height:1.1rem;
  background:var(--brand); border-radius:50%; 
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M12.7 5.3a1 1 0 0 0-1.4-1.4L6.5 8.6 4.7 6.9a1 1 0 1 0-1.4 1.4l2.5 2.5a1 1 0 0 0 1.4 0z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M12.7 5.3a1 1 0 0 0-1.4-1.4L6.5 8.6 4.7 6.9a1 1 0 1 0-1.4 1.4l2.5 2.5a1 1 0 0 0 1.4 0z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  background:var(--brand);
}

/* ---------- Back to top ---------- */
#backTop {
  position:fixed; right:22px; bottom:22px; z-index:1040; width:46px; height:46px;
  border-radius:50%; background:var(--brand); color:#fff; border:none; font-size:1.3rem;
  display:none; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); cursor:pointer;
}
#backTop:hover { background: var(--accent); color:#22312c; }

@media (max-width: 991px) {
  .hero { min-height: 70vh; }
}