/* =========================================================
   DIGITAL MARKETING PAGE — SAFE SCOPING
   This file must NOT override navbar/footer from main.css
   ========================================================= */

/* Never style nav/footer globally here */
.digital-marketing-page :is(nav, header, footer) *{
  font-family: inherit;
}

/* Page-only typography */
.digital-marketing-page{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:#1c1f26;
}

/* Headings only inside the page sections (not navbar/footer) */
.digital-marketing-page main h1,
.digital-marketing-page main h2,
.digital-marketing-page main h3,
.digital-marketing-page main h4{
  font-family: "Montserrat", system-ui, sans-serif;
}


/* ================= HERO BANNER (DIFFERENT LOOK) ================= */
.ct-hero{
  position:relative;
 /* padding:96px 0 54px;*/
  overflow:hidden;
  margin-top:-2em;
}
.ct-hero::before{
  content:"";
  position:absolute;
  inset:-40% -40%;
  background:
    radial-gradient(circle at 18% 25%, rgba(249,166,24,.30), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(51,76,156,.25), transparent 58%);
  filter:blur(18px);
  opacity:.9;
}
.ct-hero::after{
  content:"";
  position:absolute;
  inset:-120% -80%;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
  transform:rotate(12deg) translateX(-30%);
  animation:heroSweep 9s ease-in-out infinite;
  opacity:.55;
}
@keyframes heroSweep{
  0%{transform:rotate(12deg) translateX(-40%)}
  50%{transform:rotate(12deg) translateX(40%)}
  100%{transform:rotate(12deg) translateX(-40%)}
}
.ct-hero .wrap{ position:relative; z-index:2; }
.ct-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.05rem;
  border-radius:999px;
  background:rgba(249,166,24,.12);
  border:1px solid rgba(249,166,24,.28);
  color:var(--p);
  font-weight:900;
  font-size:12px;
  letter-spacing:.26em;
}
.ct-hero h1{
  font-weight:900;
  letter-spacing:-.8px;
}
.ct-hero p{ color:var(--m); max-width:760px; }



/* =========================================================
   DIGITAL MARKETING PAGE – POLISH + TYPOGRAPHY FIX
   Headings: Montserrat | Body: Open Sans
   Fixes:
   - No italic/tilted text
   - Headings visible (blue) on white background
   - Better image vs content balance
   - Button hover animation
   - Keeps layout clean and similar to your reference
   ========================================================= */

.digital-marketing-page{
  --dm-blue:#2f55a4;         /* reference heading blue */
  --dm-text:#1c1f26;         /* charcoal */
  --dm-muted:#4b5565;        /* paragraph gray */
  --dm-border:#2f55a4;       /* border blue */
  --dm-soft:#f3f4f7;         /* light section bg */
  background:#fff;
  color:var(--dm-text);
}

/* -------------------------
   FONT RULES (OVERRIDE MAIN)
-------------------------- */
.digital-marketing-page,
.digital-marketing-page body{
  font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.digital-marketing-page h1,
.digital-marketing-page h2,
.digital-marketing-page h3,
.digital-marketing-page h4,
.digital-marketing-page .dm-h2{
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Stop “tilted/italic” globally on this page */
.digital-marketing-page em,
.digital-marketing-page i{
  font-style: normal !important;
}

/* If any CSS in main.css is forcing italic on paragraphs */
.dm-page p{
  font-style: normal !important;
  color: #1c1f26 !important;
  text-align: justify;
  line-height:1.5;
}

/* -------------------------
   NAV GAP FIX (IF MAIN.CSS HAS EXTRA PADDING-TOP)
   Adjust this value only if your navbar height differs.
-------------------------- */
.digital-marketing-page .dm-page{
  padding-top: 0;
}

.digital-marketing-page body{
  background:#fff;
}

/* -------------------------
   WIDTH + SPACING
-------------------------- */
.digital-marketing-page .dm-max{
  max-width: 1100px;
}

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

@media (max-width: 991.98px){
  .digital-marketing-page .dm-section{
    padding: 46px 0;
  }
}

/* -------------------------
   HEADINGS + TEXT COLORS
-------------------------- */
.digital-marketing-page .dm-h2{
  color:#0b1220 !important;
  font-weight: 800;
   letter-spacing: normal;
  line-height: 1.15;
  margin: 0 0 14px;
  font-size: 34px;
  text-transform: capitalize;
}

.digital-marketing-page .dm-p{
  color:#1c1f26!important;
  line-height: 1.85;
  font-size: 16px !important;
  margin-bottom: 14px;
  text-align: justify;
  letter-spacing:normal;
}

.digital-marketing-page .dm-lead{
  max-width: 900px;
}

/* Section 2 box text should be BLACK (as you asked) */
.digital-marketing-page .dm-box-p{
  color: #000 !important;
  line-height: 1.7;
  margin: 0;
}

/* Section 3 kicker/nums in black */
.digital-marketing-page .dm-kicker,
.digital-marketing-page .dm-num{
  color:#0b1220 !important;
  font-size: 17px !important;
}

/* -------------------------
   MEDIA (IMAGES) – SIZE BALANCE FIX
   Prevent images from overpowering text
-------------------------- */
.digital-marketing-page .dm-media{
  width: 100%;
  display: flex;
}

.digital-marketing-page .dm-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* Right aligned media for desktop */
.digital-marketing-page .dm-media-right{
  justify-content: flex-end;
}

/* Center media for section 5 */
.digital-marketing-page .dm-media-center{
  justify-content: center;
}

/* Default image max size (prevents “too large”) */
.digital-marketing-page .dm-media img{
  max-width: 375px;
}

/* Smaller media in mobile so it feels like your reference */
@media (max-width: 991.98px){
  .digital-marketing-page .dm-media,
  .digital-marketing-page .dm-media-right{
    justify-content: center;
  }
  .digital-marketing-page .dm-media img{
    max-width: 560px;
  }
}

/* -------------------------
   SECTION 2 BOXES (BORDERS)
-------------------------- */
.digital-marketing-page .dm-box{
  border: 1.5px solid var(--dm-border);
  background:#fff;
  padding: 22px;
  min-height: 160px;
}

.digital-marketing-page .dm-icon-circle{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  flex: 0 0 52px;
}

.digital-marketing-page .dm-box-title{
  font-weight: 800;
  color: #1c1f26 !important;
  margin: 4px 0 8px;
  font-size: 18px;
}

/* -------------------------
   SECTION 3 BACKGROUND LOOK
-------------------------- */
.digital-marketing-page .dm-sec3{
  position: relative;
  background: var(--dm-soft);
  overflow: hidden;
}

.digital-marketing-page .dm-sec3::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("../img/image2.png"); /* NOTE: relative to CSS folder */
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events:none;
}

.digital-marketing-page .dm-sec3 > .container{
  position: relative;
  z-index: 1;
}

.digital-marketing-page .dm-line{
  height: 1.5px;
  background:#1c1f26;
  opacity: 0.75;
  margin: 10px 0 14px;
}

.digital-marketing-page .dm-kicker{
  font-weight: 700;
  font-size:20px !important;
  margin-bottom: 8px;
  color:#fb9503 !important;
}

.digital-marketing-page .dm-num{
  font-size: 20px !important;
  margin-bottom: 4px;
  color: #0b1220 !important;
  font-weight: 900;
}

.dm-mini-title .marketing-title{

  font-size: 22px;
  font-weight: 700;
  color: #0b1220;
}

.digital-marketing-page .dm-mini-p{
  font-size: 15px !important;
}

.dm-max .dm-h2{
  font-size:34px !important;
  text-transform: uppercase;
  color: #0b1220 !important;
}

/* -------------------------
   SECTION 4 MINI BOXES
-------------------------- */
.digital-marketing-page .dm-subhead{
  color:#000 !important;
  font-weight: 800;
  margin: 4px 0 8px;
  font-size: 16px;
}

.digital-marketing-page .dm-mini{
  border: 1.5px solid var(--dm-border);
  padding: 14px 16px;
  height: 100%;
  background:#fff;
}

.digital-marketing-page .dm-mini-title{
  font-weight: 800;
  margin-bottom: 6px;
  color:#1c1f26 !important;
  font-size: 14px;
}

.digital-marketing-page .dm-mini-p{
  margin: 0;
  color: var(--dm-muted) !important;
  line-height: 1.65;
  font-size: 13.5px;
}

/* -------------------------
   SECTION 5 CAPTIONS
-------------------------- */
.digital-marketing-page .dm-cap{
  text-align:center;
  font-weight:700;
  margin-top: 14px;
  color:#fb9503 !important;
  font-size:24px !important;
  text-transform: uppercase;
}

.digital-marketing-page .dm-ital{
  font-style: normal !important;
  color: var(--dm-muted) !important;
  line-height: 1.8;
  font-size: 14.5px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.digital-marketing-page .dm-center-text{
  max-width: 980px;
  margin-left:auto;
  margin-right:auto;
}

/* -------------------------
   SECTION 6 FEATURES
-------------------------- */
.digital-marketing-page .dm-feature{
  display:flex;
  gap: 18px;
}

.digital-marketing-page .dm-feature .bi{
  font-size: 44px;
  line-height: 1;
  color:#fb9503;
  opacity:0.85;
}

.digital-marketing-page .dm-feature-title{
  font-weight: 900;
  margin: 2px 0 6px;
  color:#1c1f26 !important;
  font-size: 18px;
}

.digital-marketing-page .dm-feature-p{
  margin:0;
  font-style: normal !important;
  color: var(--dm-muted) !important;
  line-height: 1.85;
  font-size: 14.5px;
}

/* -------------------------
   CTA BUTTONS + ANIMATION
-------------------------- */
.digital-marketing-page .dm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 0;
  font-weight: 700;
  text-decoration:none;
  border: 1.5px solid var(--dm-border);
  background:#fff;
  color:#1c1f26 !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  will-change: transform;
}

.digital-marketing-page .dm-btn.primary{
  background: var(--dm-blue);
  color:#fff !important;
}

/* Hover animation */
.digital-marketing-page .dm-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(47,85,164,0.18);
}

/* Active / click */
.digital-marketing-page .dm-btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(47,85,164,0.14);
}

/* Keyboard focus */
.digital-marketing-page .dm-btn:focus-visible{
  outline: 3px solid rgba(47,85,164,0.25);
  outline-offset: 3px;
}

/* -------------------------
   RESPONSIVE TYPE
-------------------------- */
@media (max-width: 991.98px){
  .digital-marketing-page .dm-h2{ font-size: 30px; }
}
@media (max-width: 575.98px){
  .digital-marketing-page .dm-h2{ font-size: 26px; }
  .digital-marketing-page .dm-box{ min-height: auto; }
}

/* =========================
   CTA STYLES (FINAL)
   ========================= */

/* Text-only link */
.dm-text-link{
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight:700;
  color:#0b1220 !important;
  text-decoration: none;
  text-transform: capitalize;
}

.dm-text-link:hover{

  text-decoration: underline;
  color: #fb9503 !important;
  font-size:16px;
  font-weight:700;
  text-transform: capitalize;
}

/* Pill button like reference image */
.dm-btn-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color:#0b1220 !important;
  background-color: #fb9503 !important;
  text-decoration: none;
  transition: all 0.25s ease;
}

/* Arrow styling */
.dm-btn-pill .arrow{
  font-size: 18px;
  transition: transform 0.25s ease;
  color:#0b1220 !important;
  font-size: x-large;
  font-weight: 900;
}

/* Hover animation (premium feel) */
.dm-btn-pill:hover{
  transform: translateY(-2px);
  border: 2px solid #fb9503 !important;
  background-color: #fff !important;
  color: #0b1220 !important;
}

.dm-btn-pill:hover .arrow{
  transform: translateX(4px);
}

/* Mobile */
@media (max-width: 575px){
  .dm-btn-pill{
    padding: 12px 22px;
    font-size: 14px;
  }
}

/* =========================================================
   BRAND / DIGITAL — BOX UPGRADE (PREMIUM, NOT FLAT)
   Applies to: .dm-box and .dm-mini
   Safe: scoped to page class only
   ========================================================= */

.digital-marketing-page{
  --dm-card-bg:#ffffff;
  --dm-card-border: rgba(47,85,164,.28);
  --dm-card-shadow: 0 18px 44px rgba(16,24,40,.10);
  --dm-card-shadow-hover: 0 26px 64px rgba(16,24,40,.14);
}

/* Main boxes (cards) */
.digital-marketing-page .dm-box{
  position: relative;
  background: var(--dm-card-bg) !important;
  border: 1.5px solid var(--dm-card-border) !important;
  border-radius: 16px;
  padding: 22px 22px 20px !important;
  box-shadow: var(--dm-card-shadow);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Subtle top accent line */
.digital-marketing-page .dm-box::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,176,32,.85), rgba(47,85,164,.75));
  opacity: .55;
}

/* Hover */
@media (hover:hover){
  .digital-marketing-page .dm-box:hover{
    transform: translateY(-4px);
    box-shadow: var(--dm-card-shadow-hover);
    border-color: rgba(47,85,164,.45) !important;
  }
}

/* Titles + copy spacing */
.digital-marketing-page .dm-box-title{
  margin-top: 6px;
  margin-bottom: 10px;
  line-height: 1.25;
}

.digital-marketing-page .dm-box-p{
  margin: 0;
  line-height: 1.7;
}

/* Number inside boxes (01/02/03/04) */
.digital-marketing-page .dm-box .dm-num{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .10em;
  color: rgba(28,31,38,.70) !important;
  margin-bottom: 10px;
}

/* Mini boxes (used in lists / small feature boxes) */
.digital-marketing-page .dm-mini{
  position: relative;
  border-radius: 14px;
  background: #fff !important;
  border: 1.5px solid var(--dm-card-border) !important;
  box-shadow: 0 14px 34px rgba(16,24,40,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

@media (hover:hover){
  .digital-marketing-page .dm-mini:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 54px rgba(16,24,40,.12);
    border-color: rgba(47,85,164,.45) !important;
  }
}

/* Better grid spacing between cards */
.digital-marketing-page .dm-sec2 .row.g-4{
  --bs-gutter-y: 1.25rem;
}

/* Mobile polish: reduce padding so cards don't feel huge */
@media (max-width: 575.98px){
  .digital-marketing-page .dm-box{
    padding: 18px 16px 16px !important;
    border-radius: 14px;
  }
  .digital-marketing-page .dm-box::before{
    left: 12px; right: 12px;
  }
}


/* =========================
   FULL-WIDTH STRETCH FIX
   ========================= */

/* Stretch row across available width */
.digital-marketing-page .dm-stretch {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Force equal width columns on desktop */
@media (min-width: 1200px) {
  .digital-marketing-page .dm-stretch > [class*="col-"] {
    flex: 1 1 0;
    max-width: none;
  }
}

/* Box fills full column width */
.digital-marketing-page .dm-stretch .dm-box {
  width: 100%;
}


/* =========================================================
   STRETCH ONLY image12.png (and nothing else)
   ========================================================= */

/* Reset: keep your global cap for all images */
.digital-marketing-page .dm-media img{
  max-width:520px;
}

/* Override ONLY the specific image file */
.digital-marketing-page .dm-sec4 .dm-media img[src*="image12.png"]{
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* Desktop control (optional) — comment out if you want full column width */
@media (min-width: 992px){
  .digital-marketing-page .dm-sec4 .dm-media img[src*="image12.png"]{
    max-width: 475px !important;   /* change 560 -> 520/600 as you prefer */
  }
}

/* =====================================
   COMPACT KPI / STAT BOXES HEIGHT FIX
   ===================================== */

/* Reduce overall box height */
.digital-marketing-page .dm-mini,
.digital-marketing-page .dm-box{
  padding: 16px 18px;          /* was too tall */
  min-height: unset !important;
}

/* Tighten title spacing */
.digital-marketing-page .dm-mini-title,
.digital-marketing-page .dm-box-title{
  margin-bottom: 6px;
  line-height: 1.5;
  color:#fb9503 !important;
  text-transform: capitalize;
  font-size: 24px;
  font-weight:700;
}

/* Reduce paragraph spacing inside boxes */
.digital-marketing-page .dm-mini-p,
.digital-marketing-page .dm-box-p{
  margin-top: 0;
  line-height: 1.65;
  color: #1c1f26 !important;
  font-size: 18px;
  text-align: justify;
}

/* KPI-style boxes (like 99.9%, 3x Faster, etc.) */
.digital-marketing-page .dm-stat{
  padding: 18px 20px;
  min-height: auto;
}

/* Optional: tighter mobile spacing */
@media (max-width: 768px){
  .digital-marketing-page .dm-mini,
  .digital-marketing-page .dm-box{
    padding: 14px 16px;
  }
}

/* =========================================================
   FIX: dm-sec8 should use full width properly
   - remove narrow max-width on paragraphs
   - remove justify + letter spacing issue
   ========================================================= */

.digital-marketing-page .dm-sec8 .dm-wide{
  max-width: 1480px;      /* wide like screenshot */
  margin: 0 auto;
  padding-left: 170px;
  padding-right: 140px;
}

/* Allow text to occupy the available width */
.digital-marketing-page .dm-sec8 .dm-p{
  max-width: 100% !important;
  text-align: left !important;       /* removes weird spacing */
  letter-spacing: normal !important; /* fixes “spread out” letters */
}

/* Optional: keep paragraphs readable but still wide */
.digital-marketing-page .dm-sec8 .dm-p{
  line-height: 1.85;
}

/* Keep CTA row aligned left */
.digital-marketing-page .dm-sec8 .dm-cta-row{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mobile padding */
@media (max-width: 575.98px){
  .digital-marketing-page .dm-sec8 .dm-wide{
    padding-left: 16px;
    padding-right: 16px;
  }
}