/* ==========================================================
   Strategic Consulting Page — Responsive (Bootstrap 5.3)
   Primary: #0b1220 | Secondary: #fb9503 | Text: #1c1f26
   ========================================================== */

:root{
  --hc-primary: #0b1220;
  --hc-secondary: #fb9503;
  --hc-text: #1c1f26;
  --hc-muted: #6b7280;
  --hc-card: #ffffff;
  --hc-border: rgba(11, 18, 32, 0.12);
  --hc-shadow: 0 18px 45px rgba(11, 18, 32, 0.14);
  --hc-radius: 18px;
}

/* Page base */
body.digital-marketing-page{
  color: var(--hc-text);
  background: #fff;
}

/* Keep typography consistent and premium */
.digital-marketing-page .dm-page{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.digital-marketing-page .dm-h2{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing: -0.2px;
  color:#0b1220 !important;
  line-height: 1.15;
  font-size:34px;
}

.digital-marketing-page .dm-p,
.digital-marketing-page .dm-mini-p,
.digital-marketing-page .dm-box-p,
.digital-marketing-page ul.dm-p{
  color: var(--hc-text);
  line-height: 1.75;
}

.digital-marketing-page .dm-p{
  font-size: 1.05rem;
  color: #1c1f26 !important;
}

.digital-marketing-page ul.dm-p{
  padding-left: 1.15rem;
}

.digital-marketing-page ul.dm-p li{
  margin-bottom: 0.55rem;
  font-size:18px;
  color: #fb9503;
  text-transform:capitalize;
  font-weight: 800;
  text-align: justify;
}

/* ==========================================================
   HERO BANNER FIX — Proper "image in box" + mobile responsive
   ========================================================== */

.ct-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Keep your existing wrapper but make it behave correctly */
.ct-hero .container-fluid.px-0{
  margin-bottom: -67px !important; /* remove -3em issues on mobile */
}

/* Banner box */
.ct-hero__wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--hc-primary);
  border-radius: 0;
  /* responsive height: mobile -> desktop */
  height: clamp(220px, 30vw, 520px);
}

/* Image inside box */
.ct-hero__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* premium full-bleed */
  object-position: center;    /* keep center visible */
  filter: contrast(1.02) saturate(1.02);
}

/* Overlay for premium look */
.ct-hero__overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(11,18,32,0.55) 0%,
      rgba(11,18,32,0.18) 55%,
      rgba(11,18,32,0.05) 100%);
}

/* If your banner has text and you want NO crop, switch to contain by adding this class:
   <div class="ct-hero__wrap ct-hero__wrap--contain"> ... */
.ct-hero__wrap--contain .ct-hero__img{
  object-fit: contain;
  background: var(--hc-primary);
}

/* ==========================================================
   SECTION SPACING (clean + consistent)
   ========================================================== */

.digital-marketing-page .dm-section{
  padding: 70px 0;
}

.digital-marketing-page .dm-max{
  max-width: 1200px; /* keeps content premium width */
}

/* ==========================================================
   STAT BOXES (73%, 2.4x) — premium cards
   ========================================================== */

.digital-marketing-page .dm-box{
  background: var(--hc-card);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  box-shadow: var(--hc-shadow);
  padding: 22px 22px;
}

.digital-marketing-page .dm-box-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--hc-primary);
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.digital-marketing-page .dm-box-title::after{
  content:"";
  display:block;
  height: 4px;
  width: 56px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--hc-secondary);
}

.digital-marketing-page .dm-box-p{
  margin: 12px 0 0;
  color:#1c1f26 !important;
}

/* ==========================================================
   MINI STEPS (01/02/03)
   ========================================================== */

.digital-marketing-page .dm-mini{
  background: #fff;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  padding: 18px 18px;
  box-shadow: 0 12px 28px rgba(11, 18, 32, 0.08);
  height: 100%;
}

.digital-marketing-page .dm-num{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--hc-secondary);
  letter-spacing: 1px;
  font-size: 0.95rem;
}

.digital-marketing-page .dm-mini-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--hc-primary);
  margin-top: 6px;
  margin-bottom: 6px;
  text-align: center;
}

.digital-marketing-page .dm-mini-p{
  color: var(--hc-text);
  opacity: 0.9;
}

/* ==========================================================
   IMAGES IN SECTIONS — Proper "image in box" rules
   Fixes: hardcoded heights, negative border-radius, stretching
   ========================================================== */

.digital-marketing-page .dm-media{
  background: #fff;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  box-shadow: var(--hc-shadow);
  overflow: hidden;
}

/* Ensure images always fit nicely */
.digital-marketing-page .dm-media img{
  width: 100%;
  height: 100%;
  max-height: 520px;
  display: block;
  object-fit: cover;          /* no stretch */
  object-position: center;
  border-radius: 0 !important; /* avoid weird radius issues */
}

/* If you have a dm-media that should not have card styling (your inline style had none) */
.digital-marketing-page .dm-media.no-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Override your inline height:500px (image15) more safely */
.digital-marketing-page .dm-media img[style*="height:500px"]{
  height: 520px !important;
}

/* Fix wrong border-radius:-139px (invalid) */
.digital-marketing-page img[style*="border-radius:-"]{
  border-radius: 0 !important;
}

/* ==========================================================
   CTA BUTTON — secondary color
   ========================================================== */

.digital-marketing-page .dm-btn-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--hc-secondary);
  color: var(--hc-primary);
  border: 2px solid var(--hc-secondary);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 16px 35px rgba(251, 149, 3, 0.28);
}

.digital-marketing-page .dm-btn-pill:hover{
  transform: translateY(-1px);
  background: #ffad2f;
  box-shadow: 0 18px 40px rgba(251, 149, 3, 0.35);
  color: var(--hc-primary);
}

.digital-marketing-page .dm-btn-pill .arrow{
  font-weight: 900;
}

/* ==========================================================
   ACCENT SECTION BACKGROUNDS (optional polish)
   ========================================================== */

.digital-marketing-page .dm-sec3,
.digital-marketing-page .dm-sec5,
.digital-marketing-page .dm-sec6{
  background: linear-gradient(180deg, rgba(11,18,32,0.03) 0%, rgba(11,18,32,0.00) 100%);
}

/* ==========================================================
   RESPONSIVE BREAKPOINTS (Bootstrap 5.3)
   ========================================================== */

/* <= 991.98px (tablet and below) */
@media (max-width: 991.98px){
  .digital-marketing-page .dm-section{
    padding: 56px 0;
  }

  .digital-marketing-page .dm-p{
    font-size: 1rem;
  }

  .digital-marketing-page .dm-media img{
    max-height: 420px;
  }
}

/* <= 575.98px (mobile) */
@media (max-width: 575.98px){
  /* Hero mobile height */
  .ct-hero__wrap{
    height: 220px;
  }

  /* More compact sections */
  .digital-marketing-page .dm-section{
    padding: 44px 0;
  }

  .digital-marketing-page .dm-h2{
    font-size: 22px !important;
    line-height: 1.2;
  }

  /* Cards spacing */
  .digital-marketing-page .dm-box{
    padding: 18px;
  }

  .digital-marketing-page .dm-box-title{
    font-size: 34px;
  }

  /* Images */
  .digital-marketing-page .dm-media img{
    max-height: 320px;
  }
}