/*
Theme Name: The Hindia Child 
Theme URI: https://thehindia.com/
Description: My custom child theme based on generatepress.
Author: Humanav
Author URI: https://thehindia.com/
Template: generatepress
Version: 1.0
*/

/* =========================================================================
   TABLE OF CONTENTS
   01. CSS Variables
   02. Reset & Base
   03. Typography Utilities
   04. Cursor
   05. Progress Bar
   06. Toast
   07. Scroll To Top
   08. HEADER — Nav Bar (sticky desktop)
   09. HEADER — Floating Capsule Nav (fixed overlay)
   10. HEADER — Mobile Overlay Menu
   11. CONTENT PADDING CONTROL (DESKTOP & MOBILE RESETS)
   12. Layout Containers
   13. Chips
   14. Buttons
   15. Card
   16. Section Head
   17. Marquee
   18. Hero
   19. Quote Block
   20. ACADEMY MASTER FOOTER (THE HINDIA - FINAL STABLE BLUEPRINT FRAMEWORK)
   21. Page Header
   22. Filter Bar
   23. Articles Grid
   24. Article Header
   25. Article Meta Bar
   26. Article Body
   27. Content Boxes (pullquote, fact-box, points, warn, info)
   28. Share Box
   29. PREMIUM HINDIA FACT BOX (PREFORMATTED ARCHITECTURE)
   30. Author Box
   31. Author Page Hero
   32. Custom Editorial Page Framework (All Pages Mix)
   33. Contact Page
   34. Pagination
   35. Misc / WordPress Helpers
   36. Responsive Breakpoints
   ========================================================================= */


/* ─── 01. CSS VARIABLES ─── */
:root {
  /* Ink */
  --ink:        #100e09;
  --ink-soft:   #2c2718;
  --ink-muted:  #6b6050;
  --ink-faint:  #a89880;

  /* Paper */
  --paper:      #faf7f2;
  --warm:       #f3ece0;
  --dark-warm:  #ede5d5;

  /* Rules */
  --rule:       #d5c8b3;
  --rule-dk:    #b8a888;

  /* Accent colours */
  --red:        #c0391b;
  --red-h:      #a02d12;
  --red-s:      #f5ddd6;

  --gold:       #a87a18;
  --gold-s:     #f5ead6;

  --green:      #296545;
  --green-s:    #d5eddf;

  --blue:       #1a4878;
  --blue-s:     #d6e5f5;

  --violet:     #5a2888;
  --violet-s:   #ecdff5;
}


/* ─── 02. RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Sans Devanagari', sans-serif;
  overflow-x: hidden;
  padding-top: 0 !important;
}
img { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }


/* ─── 03. TYPOGRAPHY UTILITIES (chip colour aliases) ─── */
.c0 { background: var(--red-s);    color: var(--red);    }
.c1 { background: var(--gold-s);   color: var(--gold);   }
.c2 { background: var(--green-s);  color: var(--green);  }
.c3 { background: var(--blue-s);   color: var(--blue);   }
.c4 { background: var(--violet-s); color: var(--violet); }


/* ─── 04. CURSOR ─── */
.cursor {
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s;
  mix-blend-mode: multiply;
}
.cursor.big { width: 36px; height: 36px; opacity: .3; }
@media (hover: none) { .cursor { display: none; } body { cursor: auto; } }


/* ─── 05. PROGRESS BAR ─── */
.prog {
  position: fixed; top: 0; left: 0;
  height: 3px;
  background: var(--red);
  z-index: 500;
  width: 0;
  transition: width .1s;
}


/* ─── 06. TOAST ─── */
.toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff;
  padding: .7rem 1.5rem;
  border-radius: 2px;
  font-size: .82rem; font-weight: 500;
  z-index: 400;
  transition: transform .35s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.on { transform: translateX(-50%) translateY(0); }


/* ─── 07. SCROLL TO TOP ─── */
.st {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 40px; height: 40px;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 50%;
  font-size: 1rem; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: background .2s;
  z-index: 80;
}
.st:hover { background: var(--red); }
.st.on { display: flex; }


/* =========================================================================
   08–10. HEADER (AUTOMATIC MENU DYNAMICS & IMAGE LOGO SYNC)
   ========================================================================= */

/* ─── 08. NAV BAR — sticky desktop strip (Legacy Theme Fallback) ─── */
.nav {
  position: sticky; top: 0;
  z-index: 200;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.nav-in {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; gap: 1rem;
}
.site-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); flex-shrink: 0;
}
.nav-ul { display: flex; list-style: none; }
.nav-ul > li > a {
  display: block;
  padding: .4rem .9rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2.5px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.nav-ul > li > a:hover,
.nav-ul > li > a.on,
.nav-ul > li.current-menu-item > a,
.nav-ul > li.current_page_item > a {
  color: var(--red);
  border-bottom-color: var(--red);
}
.nav-ul > li > a {
  font-size: .62rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--ink-faint); flex-shrink: 0;
}

.ham {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px;
  background: none; border: none;
}
.ham span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 1px;
  transition: all .3s;
}

.mob {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2.5rem;
}
.mob.on { display: flex; animation: fadeInNav .25s ease; }
.mob-x {
  position: absolute; top: 1.5rem; right: 2rem;
  font-size: 1.5rem; color: var(--paper);
  background: none; border: none; cursor: pointer;
}
.mob a {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 900;
  color: var(--paper); transition: color .2s;
}
.mob a:hover { color: var(--red); }

@media (max-width: 768px) {
  .nav-ul, .nav-tag { display: none; }
  .ham { display: flex; }
}
@media (max-width: 400px) { .mob a { font-size: 1.6rem; } }


/* ─── 09. FLOATING CAPSULE NAV — fixed overlay ─── */
.academy-master-header-nav {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%;
  z-index: 999999;
  padding: 1.5rem 2rem .5rem 2rem;
  background: transparent;
  box-sizing: border-box;
  transition: transform .3s cubic-bezier(.25, 1, .5, 1);
  will-change: transform;
}

.academy-master-header-nav.dra-hide-nav { transform: translateY(-110%); }

.dra-nav-capsule {
  max-width: 1320px; margin: 0 auto;
  background: rgba(13, 13, 13, .40);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50px;
  padding: .6rem 2.2rem;
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.dra-nav-logo-box   { display: flex; align-items: center; }
.dra-nav-logo-img   { 
  width: 95px; 
  height: auto; 
  display: block; 
  object-fit: contain;
}

.dra-nav-menu-container { display: flex; align-items: center; }

.dra-desktop-ul, 
.dra-nav-menu-container ul {
  display: flex; list-style: none; margin: 0; padding: 0;
  gap: 1.6rem; align-items: center;
}

.dra-desktop-ul li a,
.dra-nav-menu-container ul li a {
  color: #fff;
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  opacity: .85; transition: opacity .2s;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.dra-desktop-ul li a:hover,
.dra-desktop-ul li.current-menu-item a,
.dra-desktop-ul li.current_page_item a,
.dra-nav-menu-container ul li a:hover,
.dra-nav-menu-container ul li.current-menu-item a,
.dra-nav-menu-container ul li.current_page_item a,
.dra-desktop-ul li a.on { 
  opacity: 1 !important; 
}

.dra-nav-menu-container ul li.menu-item-has-children > a::after {
  content: ' ▼';
  font-size: .55rem;
  margin-left: 2px;
  vertical-align: middle;
  opacity: .7;
  display: inline-block;
}

.dra-nav-right-actions { display: flex; align-items: center; gap: 1.2rem; }

/* ─── 🛠️ RECONFIGURED: YOUTUBE SUBSCRIBE PARAMS ENGINE ─── */
.dra-nav-youtube-btn {
  color: #ffffff !important;
  background-color: #e52d27 !important; /* Premium YouTube Brand Red */
  font-size: .76rem !important; 
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  border-radius: 30px !important;
  padding: .45rem 1.4rem !important;
  transition: background-color .2s ease, transform .2s ease !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  box-shadow: 0 4px 12px rgba(229, 45, 39, 0.2) !important;
}
.dra-nav-youtube-btn:hover { 
  background-color: #b31010 !important; /* Darker red hover dynamic scaling */
  transform: translateY(-1px) !important;
}

.dra-mobile-ham-trigger {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.dra-mobile-ham-trigger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 1px; }


/* ─── 10. MOBILE FULL-SCREEN OVERLAY MENU (capsule nav) ─── */
.dra-mobile-overlay-menu {
  position: fixed; inset: 0;
  background-color: #0d0d0d;
  z-index: 9999999;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
}
.dra-mobile-overlay-menu.on { display: flex; animation: fadeInNav .2s ease-out; }
.dra-menu-close-btn {
  position: absolute; top: 1.5rem; right: 1.8rem;
  font-size: 2.5rem; color: #fff;
  background: none; border: none; cursor: pointer;
}

.dra-mobile-menu-links { display: flex; flex-direction: column; gap: 2rem; text-align: center; }
.dra-mobile-menu-links ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  align-items: center !important;
}
.dra-mobile-menu-links a,
.dra-mobile-menu-links ul li a {
  color: #fff;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}

@keyframes fadeInNav {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 1024px) {
  .dra-desktop-ul,
  .dra-nav-menu-container ul { gap: 1rem; }
  .dra-desktop-ul li a,
  .dra-nav-menu-container ul li a { font-size: .7rem; }
}
@media (max-width: 860px) {
  .academy-master-header-nav { padding: 1rem 1rem .5rem 1rem; }
  .dra-nav-capsule { padding: .5rem 1.2rem; }
  .dra-nav-menu-container { display: none; }
  .dra-mobile-ham-trigger { display: flex; }
  .dra-nav-youtube-btn { font-size: .7rem !important; padding: .35rem 1.1rem !important; }
  .dra-nav-logo-img { width: 85px; }  
}


/* ─── 11. CONTENT PADDING CONTROL (DESKTOP & MOBILE RESETS) ─── */
@media (min-width: 861px) {
  .hindia-custom-page-wrapper .hindia-page-content-container {
    padding-top: 2.5rem !important;
     padding-bottom: 0.1rem !important;
  }
  .art-s {
    padding-top: 2.5rem !important; 
  }
  .ah {
    padding-top: 8rem !important; 
  }
  .author-hero {
    padding-top: 6rem !important;
  }
}

/* ─── ONLY ARCHIVE PAGE DESKTOP PADDING CONTROL (min-width: 861px) ─── */
@media (min-width: 861px) {
  .archive .ph-in,
  .blog .ph-in {
    padding-top: 6rem !important;    
    padding-bottom: 2rem !important; 
  }
  .archive .art-s,
  .blog .art-s {
    padding-top: 2rem !important;
    padding-bottom: 0.1rem !important;
  }
}

/* ─── ONLY MOBILE SPECIFIC PADDING OVERRIDES ─── */
@media (max-width: 860px) {
  .hindia-custom-page-wrapper .hindia-page-content-container {
    padding-top: 1.5rem !important;
     padding-bottom: 0.1rem !important;
  }
  .feat-s, .lat-s, .art-s, .ab-c {
    padding-top: 1rem !important;
  }
  .ah {
    padding-top: 7rem !important;
  }
}

/* ─── ONLY ARCHIVE PAGE MOBILE PADDING CONTROL (max-width: 860px) ─── */
@media (max-width: 860px) {
  .archive .ph-in,
  .blog .ph-in {
    padding-top: 5.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .archive .feat-s, .archive .lat-s, .archive .art-s,
  .blog .feat-s, .blog .lat-s, .blog .art-s {
    padding-top: 1.5rem !important;
    padding-bottom: 0.1rem !important;
  }
}


/* =========================================================================
   REST OF THEME
   ========================================================================= */

/* ─── 12. LAYOUT CONTAINERS ─── */
.c  { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.cs { max-width: 780px;  margin: 0 auto; padding: 0 1.5rem; }


/* ─── 13. CHIPS ─── */
.chip {
  display: inline-block;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .2rem .75rem; border-radius: 2px;
}
.cr  { background: var(--red-s);    color: var(--red);    }
.cg  { background: var(--gold-s);   color: var(--gold);   }
.cgr { background: var(--green-s);  color: var(--green);  }
.cb  { background: var(--blue-s);   color: var(--blue);   }
.cv  { background: var(--violet-s); color: var(--violet); }


/* ─── 14. BUTTONS ─── */
.btn {
  display: inline-block;
  padding: .65rem 1.5rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  border: none; border-radius: 2px;
  cursor: pointer; transition: all .2s;
  font-family: inherit;
}
.btn-dk { background: var(--ink);  color: var(--paper); }
.btn-dk:hover { background: var(--red); }
.btn-rd { background: var(--red);  color: #fff; }
.btn-rd:hover { background: var(--red-h); }
.btn-ol { background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85); }
.btn-ol:hover { background: rgba(255,255,255,.1); }


/* ─── 15. CARD ─── */
.card {
  background: #fff; border: 1px solid var(--rule);
  padding: 1.5rem 1.75rem;
  display: block; color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
  margin-bottom: 1rem !important;
}
.card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 3px; background: var(--red); transition: width .3s;
}
.card:hover { border-color: var(--rule-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.card:hover::after { width: 100%; }

.card-cat  { margin-bottom: .6rem; }
.card-t     { font-family: 'Noto Serif Devanagari', serif; font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: .5rem; }
.card-x     { font-size: .82rem; color: var(--ink-muted); line-height: 1.7; margin-bottom: .9rem; }
.card-m     { display: flex; gap: .75rem; align-items: center; font-size: .67rem; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; }
.card-r     { color: var(--red); font-weight: 700; margin-left: auto; font-size: .68rem; letter-spacing: .15em; }

.card-lg .card-t { font-size: 1.3rem; margin-bottom: .7rem; }
.card-lg .card-x { font-size: .9rem; }


/* ─── 16. SECTION HEAD ─── */
.sh {
  display: flex !important; 
  flex-direction: row !important; 
  align-items: flex-end !important; 
  justify-content: space-between !important;
  gap: 1rem !important; 
  margin-bottom: 2rem; 
  padding-bottom: 1rem; 
  border-bottom: 2px solid var(--ink);
}
.sh-k { font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: .25rem; margin-top: 1rem; }
.sh-t { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 4vw, 1.55rem); font-weight: 800; color: var(--ink); line-height: 1.1; }
.sh-a {
  font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 1px solid var(--rule); padding-bottom: 2px;
  transition: color .2s, border-color .2s; flex-shrink: 0 !important; 
  white-space: nowrap !important; 
}
.sh-a:hover { color: var(--red); border-color: var(--red); }


/* ─── 17. MARQUEE ─── */
.mq   { background: var(--red); overflow: hidden; padding: .65rem 0; }
.mq-t { display: flex; animation: mq 30s linear infinite; white-space: nowrap; }
.mq-i { font-size: .65rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.9); padding: 0 2rem; }
.mq-i::after { content: '·'; color: rgba(255,255,255,.5); margin-left: 2rem; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* ─── 18. HERO (MOBILE TOP PADDING OPTIMIZED) ─── */
.hero { background: var(--ink); position: relative; overflow: hidden; padding: 9rem 0 4rem; }
.hero-noise {
  position: absolute; inset: 0; opacity: .7; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.hero-in {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.h-kick {
  font-size: .62rem; font-weight: 700; letter-spacing: .35em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .75rem;
}
.h-kick::before { content: ''; width: 2rem; height: 2px; background: var(--red); }
.h-title { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 900; line-height: 1.08; color: #fff; margin-bottom: 1.5rem; }
.h-title em { color: var(--red); font-style: normal; }
.h-desc { font-size: .95rem; line-height: 1.85; color: rgba(255,255,255,.58); margin-bottom: 2rem; max-width: 460px; }
.h-desc strong { color: rgba(255,255,255,.88); }
.h-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

.h-feat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 2rem; display: block; transition: background .2s; }
.h-feat:hover { background: rgba(255,255,255,.08); }
.hf-k  { font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.hf-t  { font-family: 'Noto Serif Devanagari', serif; font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: .75rem; }
.hf-x  { font-size: .87rem; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: 1.25rem; }
.hf-r  { font-size: .67rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: .5rem; }
.hf-r::after { content: '→'; transition: transform .2s; }
.h-feat:hover .hf-r::after { transform: translateX(4px); }
.hero-div { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 3rem 0 0; }

@media (max-width: 768px) {
  .hero { padding: 7.5rem 0 3rem 0 !important;  }
}


/* ─── 19. QUOTE BLOCK ─── */
.qb   { background: var(--warm); border-top: 0px solid var(--red); border-bottom: 0px solid var(--red); padding: 4rem 1.5rem; text-align: center; }
.qb-m { font-family: 'Playfair Display', serif; font-size: 5rem; font-weight: 900; color: var(--red-s); line-height: .5; display: block; margin-bottom: 1.25rem; }
.qb-t { font-family: 'Noto Serif Devanagari', serif; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; color: var(--ink); line-height: 1.45; max-width: 680px; margin: 0 auto 1rem; }
.qb-a { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }


/* ─── 20. ACADEMY MASTER FOOTER (THE HINDIA - FINAL STABLE BLUEPRINT FRAMEWORK) ─── */
.academy-master-footer {
  background-color: #141414 !important; 
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.04) 1.2px, transparent 1.2px),
    radial-gradient(rgba(255, 255, 255, 0.04) 1.2px, transparent 1.2px) !important;
  background-size: 26px 26px !important;
  background-position: 0 0, 13px 13px !important;
  padding: 4rem 2rem 0rem 2rem !important; 
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  clear: both !important;
}

.dra-capsule-card {
  max-width: 1200px;
  margin: 0 auto !important;
  background-color: #0d0d0d !important;
  border-radius: 24px 24px 0px 0px !important;
  padding: 3.5rem 4rem 1rem 4rem !important;
  box-sizing: border-box !important;
}

.dra-main-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 3rem !important;
  width: 100% !important;
}

.dra-brand-block {
  flex: 1 !important;
}

.dra-logo-slogan-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.dra-footer-logo {
  width: 145px !important;
  height: auto !important;
  display: block !important;
  filter: brightness(0) invert(0.95) !important; 
  transform: translate(40px, 40px) !important;
}

.dra-interactive-links-wrapper {
  flex: 1.8 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 2rem !important;
}

.dra-nav-column-item {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.dra-column-heading-text {
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 1.6rem 0 !important;
  text-transform: uppercase !important;
}

.dra-vertical-links-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
}

.dra-vertical-links-stack a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  transition: opacity 0.2s ease !important;
  white-space: nowrap !important;
}

.dra-vertical-links-stack a:hover {
  opacity: 0.7 !important;
}

/* VERTICAL SOCIAL ICONS STACK */
.dra-social-vertical-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
  align-items: center !important;
  padding-top: 0.1rem !important;
}

.dra-social-vertical-bar a {
  color: #ffffff !important;
  transition: opacity 0.2s ease !important;
  opacity: 0.9 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

.dra-social-vertical-bar a svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.dra-social-vertical-bar a:hover {
  opacity: 0.6 !important;
}

/* HORIZONTAL DIVIDER LINE */
.dra-horizontal-mid-divider {
  width: 100% !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  margin: 3rem 0 1.5rem 0 !important; 
}

/* BOTTOM TEXT AREA */
.dra-bottom-text-block {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.dra-copyright-text {
  color: #555555 !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
}


/* ─── 21. PAGE HEADER ─── */
.ph     { background: var(--ink); padding: 2rem 0 0.1rem; }
.ph-in { max-width: 1200px; margin: 0 auto;  padding: 8rem 2rem 6rem 2rem !important; }
.ph-k  { font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: .75rem; }
.ph-t  { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 900; color: #fff; }
.ph-x  { font-size: .88rem; color: rgba(255,255,255,.47); margin-top: .5rem; max-width: 480px; }


/* ─── 22. FILTER BAR ─── */
.fb-bar { border-bottom: 1px solid var(--rule); background: var(--paper); position: static; top: 56px; z-index: 100; }
.fb-in  { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fb-in::-webkit-scrollbar { display: none; }
.fb {
  padding: .8rem 1rem;
  font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted); background: none; border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color .2s, border-color .2s;
  margin-bottom: -1px; font-family: inherit;
}
.fb:hover  { color: var(--ink); }
.fb.on     { color: var(--red); border-bottom-color: var(--red); }


/* ─── 23. ARTICLES GRID ─── */
.art-s { padding: 5.5rem 0 5rem !important; }
.art-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }


/* ─── 24. ARTICLE HEADER ─── */
.ah     { background: var(--ink); padding: 4.5rem 0 3.5rem; }
.ah-in { max-width: 780px; margin: 0 auto; padding: 0 1.5rem; }
.ah-t  { font-family: 'Noto Serif Devanagari', serif; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: #fff; line-height: 1.2; margin: 1rem 0 1.25rem; }
.ah-d  { font-size: 1rem; color: rgba(255,255,255,.58); line-height: 1.75; margin-bottom: 2rem; border-left: 3px solid var(--red); padding-left: 1.1rem; }
.ah-m  { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.ah-m strong { color: rgba(255,255,255,.68); }
.ah-m a { color: rgba(255,255,255,.6); transition: color .2s; }
.ah-m a:hover { color: var(--red); }


/* ─── 25. ARTICLE META BAR ─── */
.art-meta-bar {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: 1rem 1.5rem;
  background: var(--warm); border-left: 4px solid var(--red); margin-bottom: 2.5rem;
}
.meta-item { display: flex; align-items: center; gap: .4rem; font-size: .67rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); }
.meta-item strong { color: var(--ink); }
.meta-item a { color: var(--red); }
.read-time-badge { margin-left: auto; background: var(--red); color: #fff; padding: .25rem .75rem; border-radius: 2px; font-size: .65rem; font-weight: 700; letter-spacing: .15em; white-space: nowrap; }


/* ─── 26. ARTICLE BODY ─── */
.art-body { padding: 4rem 0; }
.art-body p { font-family: 'Noto Serif Devanagari', serif; font-size: 1.05rem; line-height: 2; color: var(--ink-soft); margin-bottom: 1.75rem; }
.drop-cap::first-letter { font-family: 'Playfair Display', serif; font-size: 4.5rem; font-weight: 900; float: left; line-height: .82; margin: .05rem .12rem -.05rem 0; color: var(--red); }
.art-body h2 { font-family: 'Noto Serif Devanagari', serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.art-body h3 { font-family: 'Noto Serif Devanagari', serif; font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 2rem 0 .75rem; }
.art-body ul,
.art-body ol { font-family: 'Noto Serif Devanagari', serif; font-size: 1rem; line-height: 1.85; color: var(--ink-soft); margin: 0 0 1.75rem 1.5rem; }
.art-body li { margin-bottom: .4rem; }


/* ─── 27. CONTENT BOXES ─── */

/* Pull-quote */
.pq {
  margin: 2.5rem 0; padding: 1.75rem 2rem;
  background: var(--warm); border-left: 4px solid var(--red);
  font-family: 'Noto Serif Devanagari', serif; font-size: 1.2rem; font-weight: 700; color: var(--ink); line-height: 1.6;
  position: relative;
}
.pq::before { content: '"'; font-family: 'Playfair Display', serif; font-size: 5rem; color: var(--red); opacity: .12; position: absolute; top: -.8rem; left: 1rem; line-height: 1; pointer-events: none; }

/* Fact box */
.fb-box { border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: 1.5rem 1.75rem; margin: 2.5rem 0; background: #fffdf8; }
.fb-l   { font-size: .6rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.fb-box p { font-size: .9rem !important; line-height: 1.75 !important; color: var(--ink-soft) !important; margin: 0 !important; }

/* Key points */
.hindia-points { border: 1px solid var(--rule); border-top: 3px solid var(--green); padding: 1.5rem 1.75rem; margin: 2.5rem 0; background: var(--green-s); }
.hindia-points .box-label { font-size: .6rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; }
.hindia-points ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.hindia-points ul li { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; padding-left: 1.5rem; position: relative; }
.hindia-points ul li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }

/* Warning box */
.hindia-warn { border: 1px solid var(--rule); border-top: 3px solid var(--red); padding: 1.5rem 1.75rem; margin: 2.5rem 0; background: var(--red-s); }
.hindia-warn .box-label { font-size: .6rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--red); margin-bottom: .6rem; }
.hindia-warn p { font-size: .9rem; color: var(--ink-soft); margin: 0; line-height: 1.7; }

/* Info box */
.hindia-info { border: 1px solid var(--rule); border-top: 3px solid var(--blue); padding: 1.5rem 1.75rem; margin: 2.5rem 0; background: var(--blue-s); }
.hindia-info .box-label { font-size: .6rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--blue); margin-bottom: .6rem; }
.hindia-info p { font-size: .9rem; color: var(--ink-soft); margin: 0; line-height: 1.7; }


/* ─── 28. SHARE BOX ─── */
.share-box { background: var(--warm); border: 1px solid var(--rule); padding: 1.75rem; text-align: center; margin: 2rem 0; }
.share-box .sh-label { font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: .75rem; }
.share-box .sh-title { font-family: 'Noto Serif Devanagari', serif; font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.share-box .sh-sub  { font-size: .8rem; color: var(--ink-muted); margin-bottom: 1rem; }
.share-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .75rem; }


/* ─── 29. PREMIUM HINDIA FACT BOX (PREFORMATTED ARCHITECTURE) ─── */
.hindia-fact-box {
  background-color: #fffcf5 !important; 
  border-top: 3px solid #a07418 !important; 
  border-bottom: 1px solid #dfd6c8 !important; 
  border-left: 1px solid #dfd6c8 !important;
  border-right: 1px solid #dfd6c8 !important;
  padding: 2rem 2.5rem 2rem 2.5rem !important; 
  margin: 2.5rem 0 !important; 
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}

.fact-kicker {
  font-family: 'Noto Sans Devanagari', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  color: #a4782b !important; 
  margin-bottom: 0.5rem !important;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fact-kicker span {
  font-size: 1rem !important; 
}

.fact-content {
  font-family: 'Noto Serif Devanagari', 'Playfair Display', serif !important;
  font-size: 0.90rem !important; 
  line-height: 1.8 !important; 
  color: #1a1a1a !important; 
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

.fact-content em {
  font-style: italic !important;
  font-family: 'Playfair Display', serif !important;
}

.fact-divider {
  border: 0 !important;
  border-top: 1px solid #dcd5cc !important; 
  margin: 0.7rem 0 1rem 0 !important;
  width: 100%;
}

.fact-source {
  font-family: 'Courier New', Courier, monospace !important; 
  font-size: 0.55rem !important;
  color: #a99b89 !important; 
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
}

@media (max-width: 768px) {
  .hindia-fact-box {
    padding: 1rem 2rem !important; 
    margin: 1.5rem 0 !important;
  }
  .fact-content {
    font-size: 0.9rem !important; 
    line-height: 1.75 !important;
  }
  .fact-source {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
  }
}

.fact-source a.fact-link {
  color: #a99b89 !important; 
  transition: color 0.2s ease;
}

.fact-source a.fact-link:hover {
  color: #c0391b !important; 
  text-decoration: underline !important; 
}


/* ─── 30. AUTHOR BOX ─── */
.author-box { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--ink); margin: 2.5rem 0 1rem; }
.author-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.author-label  { font-size: .6rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .3rem; }
.author-name   { font-family: 'Noto Serif Devanagari', serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.author-name a { color: inherit; transition: color .2s; }
.author-name a:hover { color: var(--red); }
.author-bio     { font-size: .85rem; color: var(--ink-muted); line-height: 1.7; margin-bottom: .75rem; }
.author-social { display: flex; gap: .5rem; flex-wrap: wrap; }
.author-social a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; background: var(--warm); border: 1px solid var(--rule); border-radius: 2px; font-size: .67rem; font-weight: 600; color: var(--ink-muted); transition: all .2s; }
.author-social a:hover { background: var(--red-s); color: var(--red); border-color: var(--red); }


/* ─── 31. AUTHOR PAGE HERO ─── */
.author-hero     { background: var(--ink); padding: 4rem 0 3rem; }
.author-hero-in { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; display: flex; gap: 2.5rem; align-items: center; }
.author-hero-avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; border: 3px solid rgba(255,255,255,.15); }
.author-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.author-hero-label { font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: .5rem; }
.author-hero-name  { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: #fff; margin-bottom: .75rem; }
.author-hero-bio   { font-size: .9rem; color: rgba(255,255,255,.55); line-height: 1.8; max-width: 520px; margin-bottom: 1.25rem; }
.author-hero-social { display: flex; gap: .6rem; flex-wrap: wrap; }
.author-hero-social a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; font-size: .67rem; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.7); transition: all .2s; }
.author-hero-social a:hover { background: var(--red); border-color: var(--red); color: #fff; }


/* ─── 32. CUSTOM EDITORIAL PAGE FRAMEWORK (ALL PAGES MIX CSS) ─── */
.hindia-custom-page-wrapper {
  width: 100%;
  background-color: #fcfbfa; 
}

/* Master Black Hero Header */
.hindia-page-hero {
  background-color: #0d0d0d !important; 
  color: #ffffff !important;
  padding: 8rem 1.5rem 4.5rem 1.5rem !important;
  width: 100%;
  text-align: center;
}

.hindia-page-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.hindia-page-sub-brand {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #ff4a4a; 
  font-weight: 700;
  display: block;
  margin-bottom: 0.8rem;
}

.hindia-page-main-title {
  font-family: 'Noto Serif Devanagari', 'Playfair Display', serif !important;
  font-size: 3.2rem !important;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* Content Container Design Layout */
.hindia-page-content-container {
  max-width: 800px; 
  margin: 0 auto;
  padding: 4rem 2rem 6rem 2rem;
}

/* Master Typography Inside Content Area */
.hindia-page-article-body {
  font-family: 'Noto Serif Devanagari', serif !important;
  font-size: 1.25rem !important;
  line-height: 1.85 !important;
  color: #1a1a1a;
}

/* General Headings Customization */
.hindia-page-article-body h2, 
.hindia-page-article-body h3 {
  font-family: 'Noto Serif Devanagari', serif !important;
  font-size: 1.8rem !important;
  font-weight: 700;
  color: #111111;
  margin-top: 3rem !important;
  margin-bottom: 1.2rem !important;
  border-top: 1px solid #e8e6e3;
  padding-top: 2rem;
}

/* Form Styling (Contact us compatibility setup) */
.hindia-page-article-body input[type="text"],
.hindia-page-article-body input[type="email"],
.hindia-page-article-body textarea {
  width: 100% !important;
  padding: 0.8rem 1rem !important;
  background-color: #ffffff !important;
  border: 1.5px solid #1a1a1a !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  margin-bottom: 1.2rem !important;
  border-radius: 0px !important;
  outline: none !important;
}

.hindia-page-article-body input[type="submit"],
.hindia-page-article-body button {
  background-color: #0d0d0d !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.9rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}
.hindia-page-article-body input[type="submit"]:hover,
.hindia-page-article-body button:hover {
  background-color: #ff4a4a !important;
}

/* Mobile Screens Adaptation */
@media (max-width: 768px) {
  .hindia-page-main-title { font-size: 2.2rem !important; }
  .hindia-page-hero { padding: 7rem 1.2rem 3.5rem 1.2rem !important; }
  .hindia-page-content-container { padding: 2.5rem 1.2rem 4rem 1.2rem; }
  .hindia-page-article-body { font-size: 1.15rem !important; line-height: 1.75 !important; }
}


/* ─── 33. CONTACT PAGE ─── */
.ct-l { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 5rem 0; }
.ci-t { font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 900; color: var(--ink); margin-bottom: 1rem; line-height: 1.15; }
.ci-b { font-family: 'Noto Serif Devanagari', serif; font-size: .93rem; color: var(--ink-soft); line-height: 1.8; margin-bottom: 2rem; }
.cd    { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.cd-ic { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.cd-k  { font-size: .63rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .18rem; }
.cd-v  { font-size: .88rem; color: var(--ink-soft); font-weight: 500; }

.fg  { margin-bottom: 1.2rem; }
.fl  { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .45rem; }
.fi, .fs, .fta { width: 100%; padding: .78rem 1rem; background: #fff; border: 1px solid var(--rule); font-family: 'Noto Sans Devanagari', sans-serif; font-size: .88rem; color: var(--ink); border-radius: 2px; outline: none; transition: border-color .2s; }
.fi:focus, .fs:focus, .fta:focus { border-color: var(--red); }
.fta { height: 130px; resize: vertical; }

.contact-success { background: var(--green-s); color: var(--green); padding: 1rem 1.25rem; border-left: 3px solid var(--green); font-size: .9rem; margin-bottom: 1.5rem; font-weight: 600; }
.contact-error   { background: var(--red-s);   color: var(--red);   padding: 1rem 1.25rem; border-left: 3px solid var(--red);   font-size: .9rem; margin-bottom: 1.5rem; }


/* ─── 34. PAGINATION ─── */
.nav-links { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap; }
.nav-links a,
.nav-links span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--rule); font-size: .8rem; font-weight: 700; color: var(--ink-muted); border-radius: 2px; transition: all .2s; }
.nav-links .current,
.nav-links a:hover { background: var(--red); color: #fff; border-color: var(--red); }
.nav-links .dots { border: none; }


/* ─── 35. MISC / WORDPRESS HELPERS ─── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.aligncenter  { display: block; margin: 0 auto; }
.alignleft    { float: left;  margin: 0 1rem 1rem 0; }
.alignright   { float: right; margin: 0 0 1rem 1rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.wp-caption-text     { font-size: .78rem; color: var(--ink-muted); text-align: center; margin-top: .4rem; }


/* ─── 36. RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 1024px) {
  .feat-g   { grid-template-columns: 3fr 2fr; }
}

@media (max-width: 860px) {
  .hero-in  { grid-template-columns: 1fr; gap: 2rem; }
  .feat-g   { grid-template-columns: 1fr; }
  .side-s   { flex-direction: row; }
  .lat-g     { grid-template-columns: repeat(2, 1fr); }
  .art-g     { grid-template-columns: repeat(2, 1fr); }
  .author-hero-in { gap: 1.75rem; }
}

@media (max-width: 640px) {
  .hero     { padding: 3rem 0 2.5rem; }
  .feat-s, .lat-s, .art-s, .ab-c { padding: 2.5rem 0; }
  .feat-g, .side-s { flex-direction: column; }
  .lat-g, .art-g   { grid-template-columns: 1fr; }
  .ct-l     { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 0; }
  .nl-f     { flex-direction: column; }
  .qb       { padding: 2.5rem 1.5rem; }
  .ah       { padding: 3rem 0 2.5rem; }
  .art-body { padding: 2.5rem 0; }
  .art-meta-bar { gap: .75rem; }
  .read-time-badge { margin-left: 0; }
  .author-box { flex-direction: column; gap: 1rem; }
  .author-hero-in { flex-direction: column; gap: 1.25rem; }
  .share-btns { flex-direction: column; align-items: center; }
  .sh { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

@media (max-width: 480px) {
  .c, .cs, .nav-in, .hero-in, .ph-in, .ab-in { padding: 0 1rem; }
  .card  { padding: 1.25rem; }
  .pq    { padding: 1.25rem 1.25rem 1.25rem 1.5rem; font-size: 1rem; }
  .h-btns .btn { width: 100%; text-align: center; }
}


/* ==========================================================================
   THE SUNDAR COMPACT MOBILE FOOTER ADAPTATION SECTOR
   ========================================================================= */
@media (max-width: 768px) {
  .academy-master-footer {
    padding: 1.2rem 0.8rem 0rem 0.8rem !important;
  }

  .dra-capsule-card {
    border-radius: 20px 20px 0px 0px !important;
    padding: 0.2rem 1.2rem 0.9rem 1.2rem !important;
  }

  .dra-main-grid {
    flex-direction: column !important;
    gap: 0.2rem !important;
    align-items: stretch !important;
  }

  .dra-brand-block {
    text-align: center !important;
    width: 100% !important;
  }

  .dra-logo-slogan-row {
    justify-content: center !important; 
    align-items: center !important;
    width: 100% !important;
  }

  .dra-footer-logo {
    width: 135px !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    transform: none !important;
  }

  .dra-interactive-links-wrapper {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }

  .dra-column-heading-text {
    font-size: 0.75rem !important;
    margin-bottom: 0.8rem !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
  }

  .dra-vertical-links-stack {
    gap: 0.7rem !important;
    align-items: center !important;
  }

  .dra-vertical-links-stack a {
    font-size: 0.78rem !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .dra-social-vertical-bar {
    grid-column: span 3 !important; 
    flex-direction: row !important;
    justify-content: center !important;
    gap: 2rem !important;
    order: -1 !important; 
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  }

  .dra-social-vertical-bar a {
    width: 20px !important;
    height: 15px !important;
  }

  .dra-horizontal-mid-divider {
    margin: 1rem 0 1rem 0 !important;
  }
}