/* /public_html/css/anterah-custom.css */

/* =========================
   TOKENS
========================= */
:root{
  --ink: #1f2b42;
  --ink-2: #2a3854;
  --muted: rgba(31,43,66,.74);

  --bg-soft: #eef2f8;
  --bg-white: #ffffff;

  --soft-border: rgba(31,43,66,.12);
  --hero-overlay: rgba(15,20,30,.42);

  --mobile-nav-space: 115px;
}

/* =========================
   GLOBAL
========================= */
html, body{ width:100%; overflow-x:hidden; }
body{ background: var(--bg-soft); color: var(--ink); }

.section-grey{ background: var(--bg-soft) !important; }
.section-white{ background: var(--bg-white) !important; }

.section-title{ color: var(--ink); }
.section-lead{ color: var(--muted); }

/* =========================
   NAV / LOGO (FIXED TARGETING)
========================= */
.anterah-navbar-logo{
  padding: 10px 12px !important;
  border-radius: 14px;
}
.anterah-navbar-logo img{
  height: 40px;
  width: auto;
  display: block;
}

/* =========================================================
   MOBILE: remove top nav completely, show logo only
========================================================= */
.mobile-logo-only{ display:none; }

@media (max-width: 991.98px){

  header.header-global{ display:none !important; }

  .mobile-logo-only{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 18px 0 14px 0;
    background: var(--bg-soft);
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid rgba(31,43,66,.10);
  }

  .mobile-logo-only img{
    height: 92px;
    width: auto;
    display:block;
  }
}

/* =========================
   HERO+ABOUT “ONE BAND” + WATERMARK (single watermark)
========================= */
.hero-about-band{
  position: relative;
  background: var(--bg-soft);
  overflow: hidden;
}

/* ONE watermark behind the band (hero+about) */
.hero-about-band::before{
  content:"";
  position:absolute;
  left: -7%;
  top: 170px;              /* sits near About title */
  width: 64%;
  height: 140%;
  background: url("/assets/img/brand/anterah-logo-letter-A.png") no-repeat left top;
  background-size: contain;
  opacity: .065;
  pointer-events:none;
  filter: grayscale(100%);
}

/* Hide watermark on mobile */
@media (max-width: 991.98px){
  .hero-about-band::before{ display:none !important; }
}

/* HERO section inside band: no separate background */
.hero-wrap{
  background: transparent !important;
  padding-top: 150px;
  padding-bottom: 16px;
}

@media (max-width: 991.98px){
  .hero-wrap{
    padding-top: 18px !important; /* navbar removed; keep tight */
    padding-bottom: 34px !important; /* ✅ FIX: breathing room after hero */
  }
  #about{
    padding-top: 24px !important; /* ✅ FIX: ensure About isn't glued to hero */
  }
}

/* ABOUT section spacing */
#about{
  background: transparent !important;
  padding-top: 64px !important;   /* ← increase desktop gap */
  padding-bottom: 34px !important;
}

/* Mobile keeps tighter spacing */
@media (max-width: 991.98px){
  #about{
    padding-top: 24px !important;
  }
}

/* =========================
   HERO card
========================= */
.hero-frame{
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 22px 55px rgba(0,0,0,.22), 0 2px 0 rgba(255,255,255,.12) inset;
  padding: 14px;
  max-width: 1300px;
  margin: 0 auto;
}
.hero-screen{
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  min-height: 360px;
  background:
    linear-gradient(var(--hero-overlay), var(--hero-overlay)),
    radial-gradient(900px 500px at 85% 35%, rgba(90,120,255,.35) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 10% 65%, rgba(255,95,95,.28) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #0f1726 0%, #142038 45%, #1b2a4a 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.10) inset;
}
.hero-content{
  position: relative;
  z-index: 2;
  padding: 52px 28px 26px 28px;
  text-align: center;
  color: #fff;
}
.hero-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: 2.35rem;
  margin-bottom: 14px;
  color: #fff;
  text-shadow: 0 10px 25px rgba(0,0,0,.45);
}
@media (min-width: 992px){ .hero-title{ font-size: 3.05rem; } }
@media (max-width: 575.98px){ .hero-title{ font-size: 2.05rem; } }

.hero-sub{
  max-width: 980px;
  margin: 0 auto 18px auto;
  color: rgba(255,255,255,.92);
  font-weight: 600;
}
.hero-sub-2{
  max-width: 980px;
  margin: 0 auto 22px auto;
  color: rgba(255,255,255,.82);
}

.btn-hero{
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(0,0,0,.25), 0 2px 0 rgba(255,255,255,.12) inset;
  border: 1px solid rgba(255,255,255,.18);
}
.btn-hero-primary{ background: rgba(255,255,255,.92); color: #1b2a4a !important; }
.btn-hero-secondary{ background: rgba(255,255,255,.18); color: rgba(255,255,255,.95) !important; }
.btn-hero-primary:hover{ background: rgba(255,255,255,.98); }
.btn-hero-secondary:hover{ background: rgba(255,255,255,.25); }

.hero-chips{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px 8px 4px;
}
.hero-chip{
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =========================
   ABOUT readability
========================= */
.about-body{ color: rgba(31,43,66,.86) !important; }
#about .text-muted{ color: rgba(31,43,66,.74) !important; }

/* =========================
   WHAT WE DO spacing
========================= */
.container-xl-anterah{ max-width: 1260px; }
.anterah-cards-row{ margin-left: -12px; margin-right: -12px; }
.anterah-cards-row > [class*="col-"]{ padding-left: 12px; padding-right: 12px; }
.anterah-product-card{ border-radius: 18px; }

/* Product logos: consistent + neat */
.product-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 14px auto;
  min-height: 96px; /* keeps cards aligned */
}
.product-logo img{
  height: 92px;      /* desktop baseline */
  width: auto;
  display:block;
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.10))
    drop-shadow(0 2px 0 rgba(255,255,255,.55));
}

/* Round-U: slightly bigger only */
.product-logo img.ru-logo{
  height: 100px;
}

@media (max-width: 575.98px){
  .product-logo img{ height: 84px; }
  .product-logo img.ru-logo{ height: 92px; }
}

.product-title{
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}
.product-subtitle{
  font-size: .93rem;
  color: rgba(31,43,66,.66);
  margin-bottom: 16px;
}

.ru-red-icon{ color: #e03131 !important; }
.ru-callout{ border-left: 4px solid rgba(224,49,49,.55); }

/* Round-U badges: darker, crisp */
.ru-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.ru-badge{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(31,43,66,.16);
  color: rgba(31,43,66,.90);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .01em;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.06),
    -6px -6px 14px rgba(255,255,255,.85);
}
/* Capability strip headings — bold */
.anterah-cap-strip .cap-title{
  font-weight: 900 !important;
}

/* =========================
   HOW WE WORK visual polish
========================= */
.how-visual-wrap{
  border-radius: 16px;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid rgba(31,43,66,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.how-visual{ width: 100%; height: auto; display: block; }

/* Desktop vs mobile accordion */
.how-desktop{ display:block; }
.how-mobile{ display:none; }

@media (max-width: 991.98px){
  .how-desktop{ display:none; }
  .how-mobile{ display:block; }
}

/* Desktop: 5 points as 3+2 grid, bigger text */
.how-steps-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 22px 0;
}
.how-step{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(238,242,248,.95);
  border: 1px solid rgba(31,43,66,.12);
  box-shadow:
    10px 10px 22px rgba(0,0,0,.07),
    -10px -10px 22px rgba(255,255,255,.75);
  font-weight: 800;
  color: rgba(31,43,66,.92);
  font-size: 1.02rem;
  line-height: 1.3;
}

/* Last row becomes 2 tiles centred */
.how-steps-grid .how-step:nth-child(4){
  grid-column: 1 / span 2;
}
.how-steps-grid .how-step:nth-child(5){
  grid-column: 3 / span 1;
}
@media (max-width: 1199.98px){
  .how-steps-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .how-steps-grid .how-step:nth-child(4),
  .how-steps-grid .how-step:nth-child(5){
    grid-column: auto;
  }
}

/* Mobile accordion icons */
.how-mobile .accordion-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.how-mobile .acc-left{
  display:inline-flex;
  align-items:center;
  gap: 12px;
}
.how-mobile .acc-ic{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(238,242,248,.95);
  border: 1px solid rgba(31,43,66,.10);
  box-shadow:
    6px 6px 14px rgba(0,0,0,.08),
    -6px -6px 14px rgba(255,255,255,.85);
}
.how-mobile .acc-ic span{
  color: rgba(31,43,66,.82);
  font-size: 1.05rem;
}

/* =========================
   CONTACT spacing + mobile centre
========================= */
.contact-left{ padding-right: 10px; }
.contact-right{ padding-left: 10px; }

@media (max-width: 991.98px){
  .contact-left, .contact-right{ padding-left: 0; padding-right: 0; }
  #contact .card-body{ padding: 28px !important; }
}

/* =========================
   Mobile bottom nav (prevent wrapping + layout)
========================= */
.mobile-bottom-nav{
  display:none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 12px 14px;

  background: rgba(238,242,248,.55);
  backdrop-filter: blur(13px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  border-top: 1px solid rgba(255,255,255,.35);

  box-shadow:
    0 -8px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.mobile-bottom-nav .nav-shell{
  max-width: 560px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 10px;
  background: var(--bg-soft);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  border: 1px solid rgba(31,43,66,.10);
}
.mobile-bottom-nav a{
  flex: 1;
  text-align: center;
  font-size: .74rem;
  font-weight: 900;
  color: rgba(31,43,66,.86);
  text-decoration: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-bottom-nav a .i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 42px;
  height: 42px;
  margin: 0 auto 6px auto;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px solid rgba(31,43,66,.10);
  box-shadow:
    6px 6px 14px rgba(0,0,0,.10),
    -6px -6px 14px rgba(255,255,255,.75);
}
.mobile-bottom-nav a .i span{
  font-size: 1.05rem;
  color: rgba(31,43,66,.80);
}

@media (max-width: 991.98px){
  .mobile-bottom-nav{ display:block; }
  body{
    padding-bottom: calc(var(--mobile-nav-space) + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottom-nav{
    bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Mobile bottom nav: icon LEFT, two-line label RIGHT */
.mobile-bottom-nav .nav-shell a.mnav-item{
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 8px;
  text-align: left;
}
.mobile-bottom-nav .nav-shell a.mnav-item .i{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-bottom-nav .nav-shell a.mnav-item .label{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-size: 11px;
  font-weight: 600;
  margin: 0;
}
.mobile-bottom-nav .nav-shell a.mnav-item .label span{
  display: block;
}
@media (max-width: 360px){
  .mobile-bottom-nav .nav-shell a.mnav-item{
    gap: 8px;
    padding: 10px 6px;
  }
  .mobile-bottom-nav .nav-shell a.mnav-item .label{
    font-size: 10px;
  }
}

/* =========================
   FOOTER typography (smaller)
========================= */
.anterah-footer{
  font-size: 0.92rem;
  line-height: 1.55;
}
.anterah-footer .footer-title{ font-weight: 900; font-size: 1.02rem; }
.anterah-footer .footer-sub{ font-size: 0.90rem; }
.anterah-footer .footer-meta{ font-size: 0.85rem; }
.anterah-footer a{ font-size: 0.88rem; }

.footer-social{ gap: 12px; }
.neo-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration: none !important;
}

/* Footer mobile alignment */
@media (max-width: 991.98px){
  .anterah-footer{ text-align:center; }
  .footer-social{ justify-content:center !important; }
  .footer-subscribe-row{ justify-content:center; }
  .footer-subscribe-row input{ text-align:center; }
}

/* FOOTER: centre column lower + centred (DESKTOP ONLY) */
@media (min-width: 992px){
  .anterah-footer .row{
    align-items: stretch;
  }
  .anterah-footer .footer-center-col{
    text-align: center !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 48px;
    padding-bottom: 0;
  }
}

/* =========================================================
   FOOTER — single authoritative dark style (SCREENSHOT MATCH)
   Replace everything from this comment to the end of file
========================================================= */

/* Base footer look (deep navy) */
footer.anterah-footer{
  background: #1f2b42 !important; /* matches screenshot */
  color: rgba(255,255,255,.92) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

footer.anterah-footer .footer-title{
  color: rgba(255,255,255,.98) !important;
}

footer.anterah-footer .footer-sub{
  color: rgba(255,255,255,.82) !important;
}

footer.anterah-footer .footer-meta{
  color: rgba(255,255,255,.78) !important;
}

/* Links */
footer.anterah-footer a{
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
}
footer.anterah-footer a:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Social icon buttons */
footer.anterah-footer .neo-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.30), 0 2px 0 rgba(255,255,255,.08) inset !important;

  text-decoration: none !important;
}
footer.anterah-footer .neo-icon span{
  color: rgba(255,255,255,.92) !important;
}

/* =========================
   Subscribe row (pill input + square arrow button)
========================= */
footer.anterah-footer .footer-subscribe-row{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Pill input */
footer.anterah-footer .footer-subscribe-row input{
  flex: 1 1 auto !important;
  height: 46px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,.35),
    inset -3px -3px 6px rgba(255,255,255,.05) !important;
}

footer.anterah-footer .footer-subscribe-row input::placeholder{
  color: rgba(255,255,255,.55) !important;
}

footer.anterah-footer .footer-subscribe-row input:focus{
  outline: none !important;
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.45),
    inset -2px -2px 5px rgba(255,255,255,.06),
    0 0 0 2px rgba(255,255,255,.08) !important;
}

/* Square button (raised) */
footer.anterah-footer .footer-subscribe-row button{
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-shadow:
    8px 8px 16px rgba(0,0,0,.35),
    -8px -8px 16px rgba(255,255,255,.05) !important;

  padding: 0 !important;
}

footer.anterah-footer .footer-subscribe-row button:hover{
  transform: translateY(-1px);
}
footer.anterah-footer .footer-subscribe-row button:active{
  transform: translateY(0);
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,.40),
    inset -3px -3px 6px rgba(255,255,255,.05) !important;
}

/* =========================
   Desktop middle column (your screenshot has it centred)
========================= */
@media (min-width: 992px){
  footer.anterah-footer .footer-center-col{
    text-align: center !important;
    margin-top: 14px; /* subtle drop like screenshot */
  }
  footer.anterah-footer .footer-center-col .footer-meta a{
    margin: 0 10px;
    display: inline-block;
  }
}

/* =========================
   Mobile behaviour (keep it clean, NOT broken)
   - keep subscribe row as pill + button (do not stack)
   - give footer enough space above bottom nav
========================= */
@media (max-width: 991.98px){

  footer.anterah-footer{
    text-align: center !important;

    /* ✅ only normal footer padding */
    padding-bottom: 16px !important;
  }

  footer.anterah-footer .footer-social{
    justify-content: center !important;
  }

  footer.anterah-footer .footer-subscribe-row{
    max-width: 520px;
    margin: 0 auto;
  }
}

/* ==================================================
   INSIGHTS (Subscribe section) — Slim version
   Targets: <section id="insights" ...>
================================================== */
/* ==================================================
   INSIGHTS — Background image (bulletproof)
================================================== */

#insights{
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Put the image on its own layer BEHIND content */
#insights::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/brand/anterah-contactusBG.jpg") center/cover no-repeat;
  z-index: 0;
  opacity: 1;                 /* set 0.15–0.35 if you want it subtle */
}

/* Optional: soft white wash so text stays readable */
#insights::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(238,242,248,.82); /* increase/decrease to taste */
  z-index: 1;
}

/* Make sure content sits ABOVE the background layers */
#insights > *{
  position: relative;
  z-index: 2;
}

/* Keep your “slim spacing” */
#insights.anterah-insights-slim{
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

@media (max-width: 991.98px){
  #insights.anterah-insights-slim{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ==========================================================
   BLOG (Latest news) — STAGE BACKGROUND FIX (NO CARD CHANGES)
   Goal: remove the tinted/gradient “panel” BEHIND the carousel
   Keep the existing blog card look exactly as-is.
   Paste at VERY END of anterah-custom.css
========================================================== */

#blog{
  background: var(--bg-soft) !important;
  background-image: none !important;
}

/* Kill section overlays that can create a wash/gradient */
#blog::before,
#blog::after{
  content: none !important;
  display: none !important;
}

/* --- IMPORTANT: Remove the PANEL styling from wrapper cards only --- */
/* This targets the common “stage wrapper” classes from Neumorphism UI Kit */
#blog .card.bg-primary.shadow-inset.border-light,
#blog .card.bg-primary.shadow-inset,
#blog .card.shadow-inset,
#blog .card.shadow-soft,
#blog .shadow-inset,
#blog .shadow-soft{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Make the stage containers flat/transparent (cards remain untouched) */
#blog .anterah-blog-carousel,
#blog .blog-track-wrap,
#blog .blog-track,
#blog .container,
#blog .container-xl,
#blog .container-lg,
#blog .container-md,
#blog .container-sm{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Prevent pseudo-elements from creating that “panel” */
#blog .anterah-blog-carousel::before,
#blog .anterah-blog-carousel::after,
#blog .blog-track-wrap::before,
#blog .blog-track-wrap::after,
#blog .blog-track::before,
#blog .blog-track::after{
  content: none !important;
  display: none !important;
}

/* Do NOT style .blog-card-neo here.
   Your card styling stays exactly as your template/earlier CSS defines it. */

/* ===== BLOG: row card layout (image left, text right) ===== */
#blog .blog-card-row{
  display: flex;
  gap: 18px;
  padding: 18px;
  align-items: flex-start;
}

#blog .blog-card-media{
  flex: 0 0 120px;           /* image box width */
  height: 90px;              /* image box height */
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(31,43,66,.10);
  box-shadow: inset 3px 3px 7px rgba(0,0,0,.08), inset -3px -3px 7px rgba(255,255,255,.80);
}

#blog .blog-card-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* keeps transparent PNG nice */
  display: block;
}

/* Keep text tidy */
#blog .blog-card-title{ margin-bottom: 6px; }
#blog .blog-card-text{ margin-bottom: 12px; }

/* Mobile: stack image above */
@media (max-width: 575.98px){
  #blog .blog-card-row{
    flex-direction: column;
  }
  #blog .blog-card-media{
    width: 100%;
    flex: 0 0 auto;
    height: 140px;
  }
}

/* ===== MODAL: blur the site behind it ===== */
body.modal-open main,
body.modal-open header,
body.modal-open footer,
body.modal-open .mobile-bottom-nav{
  filter: blur(8px);
}

.modal-backdrop.show{
  opacity: .35; /* keeps neumorphic feel */
}

/* ==========================================================
   ✅ ONLY AMENDMENT ADDED: BLOG MODAL fixed size + internal scroll
========================================================== */
#blogModal .modal-dialog{
  max-width: 980px;
}
#blogModal .modal-content{
  max-height: 86vh;
  overflow: hidden;
  border-radius: 18px;
}
#blogModal .modal-header{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef2f8;
}
#blogModal .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
#blogModalImg{
  max-height: 42vh;
  width: 100%;
  object-fit: cover;
}
/* =========================================
   BLOG MODAL - spacing + image fit
   Fix: top shadow clipped + image cropping
========================================= */

#blogModal .modal-content{
  overflow: visible; /* allow shadow to show cleanly */
}

#blogModal .modal-header{
  padding-bottom: 14px; /* creates air between header and body */
}

#blogModal .modal-body{
  padding-top: 16px !important; /* body was too tight (pt-0 in HTML) */
}

#blogModal .modal-body .mb-3{
  margin-top: 10px; /* pushes the image/card down so top shadow is visible */
}

/* Ensure the blog image is not cropped and fits nicely */
#blogModalImg{
  width: 100% !important;
  height: auto !important;
  max-height: 520px;        /* safe for desktop */
  object-fit: contain;      /* prevents cropping */
  display: block;
}
/* =========================================
   BLOG CAROUSEL - centre snap
========================================= */
.blog-track{
  scroll-snap-type: x mandatory;
}

.blog-card-neo{
  scroll-snap-align: center; /* centres each card when snapping */
}
/* =========================
   BLOG MODAL: force centred on mobile
========================= */
#blogModal .modal-dialog{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 576px){
  #blogModal .modal-dialog{
    width: calc(100% - 24px) !important;   /* small side gutters */
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
  }

  #blogModal .modal-content{
    width: 100% !important;
  }
}
/* =========================
   BLOG MODAL: force centred on mobile
========================= */
#blogModal .modal-dialog{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 576px){
  #blogModal .modal-dialog{
    width: calc(100% - 24px) !important;   /* small side gutters */
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
  }

  #blogModal .modal-content{
    width: 100% !important;
  }
}
/* ==========================================================
   BLOG MODAL — FINAL OVERRIDE (MOBILE CENTRED + NO CLIPPING)
   Paste at the VERY END of anterah-custom.css
========================================================== */

/* Make sure the modal itself is centred and not offset */
#blogModal{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#blogModal .modal-dialog{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile: force proper centred “card” with gutters */
@media (max-width: 576px){
  #blogModal .modal-dialog{
    width: calc(100% - 24px) !important;     /* left/right gutters */
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;            /* centres it */
  }

  #blogModal .modal-content{
    width: 100% !important;
  }
}

/* Keep the neumorphic shadow visible (don’t clip the top) */
#blogModal .modal-content{
  border-radius: 18px !important;
  overflow: visible !important;              /* allow top shadow */
}

/* Add breathing room between header line and the card/image */
#blogModal .modal-header{
  padding-bottom: 14px !important;
}

#blogModal .modal-body{
  padding-top: 16px !important;
}

/* Image should FIT, not crop */
#blogModalImg{
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  display: block !important;
}