:root{
  --dx-bg:#eef8ff;
  --dx-card:#ffffff;
  --dx-text:#0f172a;
  --dx-muted:#64748b;
  --dx-line:rgba(2,6,23,.10);

  --dx-brand:#0EA5A6;    /* teal */
  --dx-brand2:#7C3AED;   /* violet */
  --dx-cta:#F6C86C;      /* warm accent */

  /* Compatibility aliases (because your CSS uses these) */
  --surface: var(--dx-card);
  --primary: var(--dx-brand);
  --primary-600:#0C8C8D;
  --primary-50:#E8F3F3;
  --secondary:#0f172a;
  --muted: var(--dx-muted);
  --accent: var(--dx-cta);
  --shadow: 0 10px 22px rgba(2,6,23,.06);
}


body{ background:var(--dx-bg); color:var(--dx-text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; }

.dx-wrap{ background:linear-gradient(180deg, rgba(14,165,166,.08), rgba(124,58,237,.06)); border:1px solid rgba(14,165,166,.18); border-radius:22px; box-shadow:0 18px 40px rgba(2,6,23,.08); }
.dx-section{ padding:48px 0; }
.dx-h2{ font-weight:900; letter-spacing:-.02em; }
.dx-sub{ color:var(--dx-muted); }

.dx-card{ background:var(--dx-card); border:1px solid var(--dx-line); border-radius:18px; box-shadow:0 10px 22px rgba(2,6,23,.06); overflow:hidden; }
.dx-card .dx-card-body{ padding:16px; }
.dx-pill{ display:inline-flex; gap:.5rem; align-items:center; border:1px solid rgba(2,6,23,.10); padding:.35rem .7rem; border-radius:999px; background:#fff; font-weight:700; font-size:12px; }



/* ===== Navbar ===== */
.navbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface) !important;
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
}
.navbar-brand img{ height: 40px; }
.nav-link{
  color: var(--secondary) !important;
  font-weight: 600;
}
.nav-link:hover{ color: var(--primary) !important; }
.btn-gold {
  background-color: #FFD700;
  border-color: #FFD700;
  color: #111;
  font-weight: 700;
}
.btn-gold:hover { background-color: #FFC107; border-color: #FFC107; color: #000; }
.btn-gold:focus { box-shadow: 0 0 0 .2rem rgba(255,215,0,.35); }

/* ===== Hero ===== */
.hero{
  position: relative;
  min-height: 62vh;
  display:flex;
  align-items:center;
  color:#fff;
}
.hero-gradient{
  background: linear-gradient(135deg, rgba(14,165,166,.85), rgba(99,102,241,.85));
}
.hero .lead{ color: #f8fafc; }
.hero .btn-cta{
  background: var(--accent);
  border: none;
  color:#000;
  font-weight:700;
  padding:.75rem 1.25rem;
  border-radius:.6rem;
  box-shadow: var(--shadow);
}
.hero .btn-cta:hover{ background:#fbbf24; color:#111; }

/* ===== Carousel ===== */
.carousel-caption{
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.carousel-indicators [data-bs-target]{
  background-color:#fff;
}
.carousel-item>img{
  object-fit:cover;
  height:62vh;
  width:100%;
  filter: contrast(1.03) saturate(1.05);
}

/* ===== Sections ===== */
.section{
  padding: 4rem 0;
}
.section-title{
  text-align:center;
  font-weight:800;
  margin-bottom:1.25rem;
}
.section-sub{
  text-align:center;
  color:var(--muted);
  margin-bottom:2rem;
}

/* ===== Cards ===== */
.card{
  border: none;
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(2,6,23,.12);
}
.card-img-top{
  height: 210px;
  object-fit: cover;
}
.card-title{ font-weight: 800; }
.card p{ color: var(--muted); }

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  font-weight:700;
}
.btn-primary:hover{
  background: var(--primary-600);
  border-color: var(--primary-600);
}
.btn-outline-primary{
  color: var(--primary);
  border-color: var(--primary);
  font-weight:700;
}
.btn-outline-primary:hover{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}

/* ===== CTA ===== */
.cta{
  background: linear-gradient(90deg, var(--primary-50), #fff);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.cta .btn{
  padding:.8rem 1.2rem;
  border-radius:.75rem;
}

/* ===== Footer ===== */
.site-footer{
  background: var(--secondary);
  color:#e2e8f0;
}
.site-footer a{ color:#e2e8f0; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }

/* ===== Utilities ===== */
.shadow-sm{ box-shadow: var(--shadow) !important; }

/* ===== Mobile ===== */
@media (max-width: 768px){
  .navbar-brand img{ height: 32px; }
  .carousel-item>img{ height: 46vh; }
}
/* Brand: sharpen the logo and make "Dexios" vibrant */
.brand-logo{
  height:44px; width:auto; display:block;
  /* gentle pop on light navbars */
  filter:
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 6px 14px rgba(2,6,23,.12))
    saturate(1.05) brightness(1.03);
  image-rendering:-webkit-optimize-contrast;
  /* ensures it never gets squashed */
  object-fit: contain;
}

/* Gradient wordmark with subtle motion on hover */
.brand-name{
  font-weight:900;
  font-size:1.35rem;
  letter-spacing:.3px;
  background: linear-gradient(90deg,#0EA5A6 0%, #22D3EE 40%, #6366F1 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 100%;
  transition: background-position .6s ease;
}
.brand-name:hover{ background-position:100% 0; }
/* Icon-only buttons */
.btn-icon{
  width: 2.25rem;   /* 36px */
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: .6rem;
}
.btn-icon .bi{ font-size: 1.15rem; line-height: 1; }

/* Optional: light “Archive” outline if you don’t want solid red/green etc. */
.btn-outline-archive{
  color: #6b7280;              /* slate-500 */
  border-color: #d1d5db;       /* slate-300 */
}
.btn-outline-archive:hover{
  color: #111827;              /* slate-900 */
  background: #e5e7eb;         /* slate-200 */
  border-color: #cbd5e1;
}

/* Make the actions wrap nicely on smaller screens */
.actions-wrap{ display:flex; flex-wrap:wrap; gap:.35rem; }
/* Admin dropdown (from header inline CSS) */
.admin-btn{ background:#fff; border:1px solid rgba(0,0,0,.15); }
.admin-btn:hover{ background:#f8f9fa; }
.admin-menu{
  min-width:280px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:16px;
  overflow:visible;
}
.admin-menu::before{
  content:"";
  position:absolute;
  right:22px; top:-8px;
  width:16px; height:16px;
  transform:rotate(45deg);
  background:#fff;
  border-left:1px solid rgba(0,0,0,.05);
  border-top:1px solid rgba(0,0,0,.05);
}
.admin-menu .dropdown-item{
  border-radius:10px;
  padding:.6rem .75rem;
  font-weight:600;
}
.admin-menu .dropdown-item i{ font-size:1.1rem; opacity:.85; }
.admin-menu .dropdown-item:hover{ background:#f8f9fa; }

/* SINGLE source of truth: Get a Quote button */
.btn-quote{
  background:#E8F3F3;
  color:#0b1220;
  border:1px solid rgba(14,165,166,.22);
  border-radius:999px;
  font-weight:900;
  transition: background-color .18s ease, box-shadow .18s ease, transform .05s ease;
  box-shadow: 0 8px 20px rgba(14,165,166,.18);
}
.btn-quote:hover,
.btn-quote:focus{
  background:#D9ECEC;
  color:#0b1220;
  box-shadow: 0 10px 24px rgba(14,165,166,.22);
}
.btn-quote:active{ transform: translateY(1px); }

/* Mobile navbar polish */
@media (max-width: 991px){
  .navbar-toggler{ padding:.9rem; font-size:1.5rem; }
  .navbar-collapse{
    background:#fff;
    padding:1rem;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(2,6,23,.12);
  }
}
/* Homepage service tiles feel more premium */
.dx-card img{ transform: scale(1.01); transition: transform .25s ease, filter .25s ease; }
.dx-card:hover img{ transform: scale(1.05); filter: saturate(1.05) contrast(1.03); }

.dx-card .dx-card-body h5{ letter-spacing: -0.01em; }
.dx-pill{ font-weight:800; }
.dx-pill i{ color: var(--dx-brand); }
.dx-trustbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--dx-line);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.dx-trustitem{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(14,165,166,.08);
  border:1px solid rgba(14,165,166,.14);
  font-weight:800;
  color:#0b1220;
}

.dx-trustitem i{ color: var(--dx-brand); }

/* Service cards: image hover polish */
.dx-card img{
  transform: scale(1.01);
  transition: transform .25s ease, filter .25s ease;
}
.dx-card:hover img{
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.03);
}