/* ============================================================
   DMLAMS — Custom styles (layered on MDBootstrap)
   ============================================================ */
:root {
  --brand: #6c63ff;
  --brand-primary: #6c63ff;
  --brand-dark: #5549e6;
  --brand-ink: #1f2437;
  --bg-soft: #f5f6fb;
}
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: #333;
  background: #fff;
}
a { text-decoration: none; }

/* --- Top bar --- */
.topbar {
  background: var(--brand-ink);
  color: #dfe1ec;
  font-size: .82rem;
  padding: 7px 0;
}
.topbar a { color: #dfe1ec; }
.topbar i { margin-right: 6px; color: var(--brand-primary); }
.topbar .social a { font-size: .9rem; margin-left: 12px; }

/* --- Nav --- */
.navbar-dml {
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.07);
}
.navbar-dml .navbar-brand { font-weight: 800; color: var(--brand-ink); }
.navbar-dml .navbar-brand i { color: var(--brand-primary); }
.navbar-dml .nav-link { font-weight: 600; color: #333; margin: 0 4px; }
.navbar-dml .nav-link:hover,
.navbar-dml .nav-link.active { color: var(--brand-primary); }

/* --- Buttons --- */
.btn-brand {
  background: var(--brand-primary);
  color: #fff;
  border-radius: 50rem;
  padding: .55rem 1.5rem;
  font-weight: 600;
}
.btn-brand:hover { background: var(--brand-dark); color: #fff; }
.btn-outline-brand {
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  border-radius: 50rem;
  font-weight: 600;
}
.btn-outline-brand:hover { background: var(--brand-primary); color: #fff; }
.chip { font-size: .75rem; font-weight: 700; letter-spacing: .03em; }

/* --- Hero --- */
.hero-slider { position: relative; }
.hero-slide {
  min-height: 560px;
  display: flex;
  align-items: flex-end;      /* text at the bottom */
  justify-content: flex-end;  /* text at the right */
  position: relative;
  /* Fallback image (longhand so it does NOT reset background-size/position) */
  background-image: linear-gradient(135deg, #5549e6 0%, #2f2a6b 55%, #141528 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-slide > .hero-overlay {
  position: absolute; inset: 0;
  /* Scrim is darker on the RIGHT (under the text) and bright on the left. */
  background: linear-gradient(270deg, rgba(14,18,48,.62) 0%, rgba(14,18,48,.28) 48%, rgba(14,18,48,.05) 100%);
}
.hero-content {
  position: relative;
  color: #fff;
  max-width: 640px;
  margin-left: auto;
  margin-right: 6%;
  text-align: right;
  padding-bottom: 70px; /* lift above the bottom edge */
}
.hero-content .badge { background: var(--brand-primary); }
.hero-content .hero-cta { justify-content: flex-end; }
.hero-content h1 { font-size: 3rem; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hero-content h4 { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-content p { color: #eef0ff; font-size: 1.1rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }

/* --- Section headings --- */
.section { padding: 70px 0; }
.section-alt { background: var(--bg-soft); }
.section-head { margin-bottom: 40px; }
.section-head .eyebrow {
  color: var(--brand-primary);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
}
.section-head h2 { font-weight: 800; color: var(--brand-ink); }

/* --- Cards --- */
.media-card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 24px rgba(31,27,103,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.media-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(31,27,103,.16); }
.media-card .card-img {
  height: 210px;
  object-fit: cover;
  width: 100%;
  background: #eef0f9;
}
.media-card .card-body { padding: 18px; }
.media-card .card-title { font-weight: 700; }
.media-tags { font-size: .72rem; color: #7a7f96; }

/* --- Counters --- */
.counter-box { text-align: center; padding: 22px; }
.counter-box i { font-size: 2.2rem; color: var(--brand-primary); }
.counter-box .counter { font-size: 2.3rem; font-weight: 800; color: var(--brand-ink); }
.counter-box .count-title { color: #69718a; font-weight: 600; }

/* --- Counter section styled like the album cards (white media-card) --- */
.counter-section { background: var(--bg-soft); }
.counter-section .media-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(13,27,103,.16); }

.counter-card { text-align: center; overflow: hidden; }
.counter-cover {
  position: relative;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3.6rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.28), transparent 48%),
    linear-gradient(135deg, #6c63ff 0%, #2a9d8f 100%);
}
.counter-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 62%);
  animation: cover-sheen 4s ease-in-out infinite;
}
@keyframes cover-sheen { 0%,100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
.counter-cover i {
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
  transition: transform .25s ease;
}
.counter-card:hover .counter-cover i { transform: scale(1.14); }
.counter-card .card-body { padding: 18px 12px 20px; }
.counter-card .counter {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(135deg, #6c63ff, #2a9d8f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #6c63ff;
}
.counter-card .count-title {
  color: #5a6180;
  font-weight: 700;
  font-size: .8rem;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Album card --- */
.album-cover { height: 230px; object-fit: cover; width: 100%; }
.album-overlay-icon {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(0,0,0,.55); color: #fff;
  border-radius: 10px; padding: 6px 10px; font-size: .8rem;
}

/* --- Testimonials --- */
.testimonial-card {
  background: #fff; border-radius: 16px; padding: 26px;
  box-shadow: 0 6px 22px rgba(30,27,103,.07); height: 100%;
}
.testimonial-card .stars { color: #ffb400; }
.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

/* --- FAQ --- */
.accordion-dml .card-header { background: #fff; border: none; }
.accordion-dml .btn-link { color: var(--brand-ink); font-weight: 700; text-decoration: none; }

/* --- Footer --- */
.footer {
  background: var(--brand-ink); color: #c6c9dd; padding-top: 60px; margin-top: 40px;
}
.footer h6 { color: #fff; font-weight: 700; margin-bottom: 20px; }
.footer a { color: #c6c9dd; }
.footer a:hover { color: #fff; }
.footer .social a {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08); margin-right: 8px;
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: .85rem; }

/* --- Filter bar --- */
.filter-bar { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.05); margin-bottom: 30px; }

/* Media detail lightbox */
.media-detail-img { width: 100%; border-radius: 16px; }

/* ---- Public images: prevent save/move via right-click & drag ---- */
.protected-media,
.protected-media img,
img[data-protected] {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- Utility --- */
.bg-soft { background: var(--bg-soft); }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.text-brand { color: var(--brand-primary); }
.fw-800 { font-weight: 800; }

@media (max-width: 768px) {
  .hero-slide { min-height: 440px; }
  .hero-content h1 { font-size: 2rem; }
  .topbar .d-none-sm { display: none; }
}