/* =========================================================
   Digital Life — Brand Design System
   Primary Blue + Teal palette derived from the company logo
   ========================================================= */

:root {
  --dl-blue: #163E8C;
  --dl-blue-dark: #0C2A63;
  --dl-blue-light: #2E63C7;
  --dl-teal: #16A08A;
  --dl-teal-dark: #0E7C6B;
  --dl-teal-light: #38C4AC;
  --dl-navy-text: #0F2340;
  --dl-gray-600: #5B6B82;
  --dl-gray-300: #E2E8F1;
  --dl-bg: #F6F9FC;
  --dl-white: #FFFFFF;
  --dl-radius: 16px;
  --dl-shadow: 0 10px 30px rgba(15, 35, 64, 0.08);
  --dl-shadow-hover: 0 16px 40px rgba(15, 35, 64, 0.14);
  --dl-gradient: linear-gradient(120deg, var(--dl-blue-dark) 0%, var(--dl-blue) 55%, var(--dl-teal) 130%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: "Tajawal", "Cairo", "Segoe UI", Tahoma, sans-serif;
  color: var(--dl-navy-text);
  background: var(--dl-bg);
}

a { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--dl-navy-text); }

.text-brand-blue { color: var(--dl-blue) !important; }
.text-brand-teal { color: var(--dl-teal) !important; }
.bg-brand-blue { background: var(--dl-blue) !important; }
.bg-brand-teal { background: var(--dl-teal) !important; }

.btn-brand {
  background: var(--dl-gradient);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.75rem;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: var(--dl-shadow);
}
.btn-brand:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--dl-shadow-hover); opacity: .95; }

.btn-brand-outline {
  background: transparent;
  color: var(--dl-blue);
  border: 2px solid var(--dl-blue);
  border-radius: 999px;
  padding: .6rem 1.7rem;
  font-weight: 700;
  transition: all .2s ease;
}
.btn-brand-outline:hover { background: var(--dl-blue); color: #fff; }

/* ---------- Public Navbar ---------- */
.dl-navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(15,35,64,.06);
  padding: .6rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.dl-navbar .navbar-brand { display: flex; align-items: center; gap: .6rem; }
.dl-navbar .navbar-brand img { height: 44px; }
.dl-navbar .navbar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.dl-navbar .navbar-brand .brand-text strong { color: var(--dl-blue); font-size: 1.05rem; }
.dl-navbar .navbar-brand .brand-text span { color: var(--dl-teal); font-size: .72rem; font-weight: 600; }

.dl-navbar .nav-link {
  color: var(--dl-navy-text);
  font-weight: 600;
  padding: .5rem 1rem !important;
  border-radius: 999px;
  transition: all .2s ease;
}
.dl-navbar .nav-link:hover,
.dl-navbar .nav-link.active { color: var(--dl-white); background: var(--dl-gradient); }

/* ---------- Hero ---------- */
.dl-hero {
  background: var(--dl-gradient);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 7rem;
}
.dl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.12) 0, transparent 40%),
                     radial-gradient(circle at 85% 80%, rgba(255,255,255,.10) 0, transparent 45%);
}
.dl-hero .container { position: relative; z-index: 1; }
.dl-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.3; }
.dl-hero p.lead { color: rgba(255,255,255,.9); font-size: 1.15rem; }

/* ---------- Sections ---------- */
.dl-section { padding: 5rem 0; }
.dl-section-title { text-align: center; margin-bottom: 3rem; }
.dl-section-title .eyebrow {
  display: inline-block;
  color: var(--dl-teal);
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: .5rem;
}
.dl-section-title h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.dl-section-title p { color: var(--dl-gray-600); max-width: 680px; margin: .75rem auto 0; }
.dl-section-alt { background: var(--dl-white); }

/* ---------- Cards ---------- */
.dl-card {
  background: var(--dl-white);
  border-radius: var(--dl-radius);
  box-shadow: var(--dl-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
  height: 100%;
  border: 1px solid var(--dl-gray-300);
}
.dl-card:hover { transform: translateY(-6px); box-shadow: var(--dl-shadow-hover); }

.dl-card-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--dl-blue), var(--dl-teal));
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.dl-product-card img, .dl-news-card img { height: 200px; object-fit: cover; width: 100%; }
.dl-product-card .card-body, .dl-news-card .card-body { padding: 1.5rem; }
.dl-badge-category {
  display: inline-block;
  background: rgba(22,64,140,.08);
  color: var(--dl-blue);
  font-weight: 700;
  font-size: .78rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}

.dl-partner-logo {
  height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: var(--dl-radius);
  box-shadow: var(--dl-shadow);
  padding: 1rem;
  transition: transform .2s ease;
}
.dl-partner-logo:hover { transform: translateY(-4px); }
.dl-partner-logo img { max-height: 55px; max-width: 100%; object-fit: contain; }

/* ---------- Stats strip ---------- */
.dl-stats { background: var(--dl-navy-text); color: #fff; padding: 2.5rem 0; }
.dl-stats .stat-num { font-size: 2.2rem; font-weight: 800; color: var(--dl-teal-light); }
.dl-stats .stat-label { color: rgba(255,255,255,.75); font-weight: 600; }

/* ---------- Footer ---------- */
.dl-footer { background: var(--dl-blue-dark); color: rgba(255,255,255,.85); padding: 3.5rem 0 1.5rem; }
.dl-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.dl-footer a { color: rgba(255,255,255,.75); }
.dl-footer a:hover { color: var(--dl-teal-light); }
.dl-footer .social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  margin-left: .4rem;
}
.dl-footer .social-icons a:hover { background: var(--dl-teal); }
.dl-footer hr { border-color: rgba(255,255,255,.12); }
.dl-footer .copyright { color: rgba(255,255,255,.55); font-size: .88rem; }

/* ---------- Forms ---------- */
.dl-form-card {
  background: var(--dl-white);
  border-radius: var(--dl-radius);
  box-shadow: var(--dl-shadow);
  padding: 2.5rem;
}
.form-label { font-weight: 600; }
.form-control:focus, .form-select:focus {
  border-color: var(--dl-teal);
  box-shadow: 0 0 0 .2rem rgba(22,160,138,.15);
}

/* ---------- WhatsApp float button ---------- */
.dl-whatsapp-float {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 1050;
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.dl-whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* ---------- Breadcrumb / page header ---------- */
.dl-page-header {
  background: var(--dl-gradient);
  color: #fff;
  padding: 3.5rem 0;
}
.dl-page-header h1 { color: #fff; margin-bottom: .3rem; }
.dl-page-header .breadcrumb a { color: rgba(255,255,255,.8); }
.dl-page-header .breadcrumb-item.active { color: #fff; }

@media (max-width: 767px) {
  .dl-section { padding: 3rem 0; }
  .dl-hero { padding: 3.5rem 0 5rem; }
}