:root{--color-primary:#2c2c71;--color-primary-dark:#202052;--color-primary-soft:#eceefa;--color-secondary:#10924f;--color-secondary-dark:#0b6f3c;--color-accent:#f2c66d;--color-ink:#202336;--color-muted:#586273;--color-surface:#fff;--color-sky:#f0f7fb;--color-warm:#fff8ec;--shadow-soft:0 18px 45px #2c2c711a;--page-gutter:clamp(1rem, 4vw, 4.5rem);--content-wide:1760px;--content-main:1600px;--content-readable:1360px;color:var(--color-ink);background:var(--color-surface);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}a{color:inherit}[dir=rtl]{font-family:Noto Sans Arabic,Tahoma,Arial,ui-sans-serif,system-ui,sans-serif}.social-sidebar{z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffeb;border:1px solid #2c2c7124;border-radius:999px;flex-direction:column;gap:.55rem;padding:.55rem;transition:transform .35s,box-shadow .35s;animation:2.8s ease-in-out infinite sidebar-breathe;display:flex;position:fixed;top:50%;right:clamp(.6rem,1vw,1rem);transform:translateY(-50%);box-shadow:0 12px 28px #20233633}.social-sidebar.is-scrolling[data-scroll=down]{transform:translateY(calc(11px - 50%));box-shadow:0 16px 34px #20233638}.social-sidebar.is-scrolling[data-scroll=up]{transform:translateY(calc(-50% - 11px));box-shadow:0 16px 34px #20233638}.social-sidebar__link{color:#fff;letter-spacing:.03em;text-transform:uppercase;border-radius:50%;place-items:center;width:2.35rem;height:2.35rem;font-size:.7rem;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s;animation:2.4s ease-in-out infinite social-float;display:grid}.social-sidebar__link svg{width:1.1rem;height:1.1rem;display:block}.social-sidebar__link:hover,.social-sidebar__link:focus-visible{filter:brightness(1.08);outline:none;transform:translate(-4px)scale(1.07);box-shadow:0 10px 18px #0003}.social-sidebar__link--facebook:hover,.social-sidebar__link--facebook:focus-visible{animation:.55s hover-facebook}.social-sidebar__link--instagram:hover,.social-sidebar__link--instagram:focus-visible{animation:.65s hover-instagram}.social-sidebar__link--linkedin:hover,.social-sidebar__link--linkedin:focus-visible{animation:.5s hover-linkedin}.social-sidebar__link--youtube:hover,.social-sidebar__link--youtube:focus-visible{animation:.5s hover-youtube}.social-sidebar__link--twitter:hover,.social-sidebar__link--twitter:focus-visible{animation:.55s hover-twitter}.social-sidebar__link--whatsapp:hover,.social-sidebar__link--whatsapp:focus-visible{animation:.6s hover-whatsapp}.social-sidebar__link--facebook{background:#1877f2}.social-sidebar__link--instagram{background:linear-gradient(135deg,#fd1d1d 0%,#e1306c 45%,#f77737 100%)}.social-sidebar__link--linkedin{background:#0a66c2}.social-sidebar__link--youtube{background:red}.social-sidebar__link--twitter{background:#000}.social-sidebar__link--whatsapp{background:#25d366}@media (width<=700px){.social-sidebar{display:none}}@keyframes social-float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes sidebar-breathe{0%,to{filter:drop-shadow(0 0 #10924f00)}50%{filter:drop-shadow(0 0 6px #10924f40)}}@keyframes hover-facebook{0%{transform:translate(-4px)scale(1.07)rotate(0)}35%{transform:translate(-7px)scale(1.14)rotate(-6deg)}to{transform:translate(-4px)scale(1.07)rotate(0)}}@keyframes hover-instagram{0%{transform:translate(-4px)scale(1.07)}25%{transform:translate(-4px)scale(1.12)rotate(8deg)}50%{transform:translate(-4px)scale(1.14)rotate(-8deg)}to{transform:translate(-4px)scale(1.07)}}@keyframes hover-linkedin{0%{transform:translate(-4px)scale(1.07)}40%{transform:translate(-10px)scale(1.1)}to{transform:translate(-4px)scale(1.07)}}@keyframes hover-youtube{0%{transform:translate(-4px)scale(1.07)}35%{transform:translate(-4px)scale(1.14)}to{transform:translate(-4px)scale(1.07)}}@keyframes hover-twitter{0%{transform:translate(-4px)scale(1.07)rotate(0)}30%{transform:translate(-8px)scale(1.1)rotate(-10deg)}65%{transform:translate(-6px)scale(1.11)rotate(6deg)}to{transform:translate(-4px)scale(1.07)rotate(0)}}@keyframes hover-whatsapp{0%{transform:translate(-4px)scale(1.07)}20%{transform:translate(-4px)scale(1.15)}45%{transform:translate(-4px)scale(1.08)}70%{transform:translate(-4px)scale(1.13)}to{transform:translate(-4px)scale(1.07)}}.donate-sidebar{z-index:1000;flex-direction:column;align-items:flex-start;transition:transform .35s,box-shadow .35s;display:flex;position:fixed;top:50%;left:clamp(.6rem,1vw,1rem);transform:translateY(-50%)}.donate-sidebar.is-scrolling[data-scroll=down]{transform:translateY(calc(11px - 50%))}.donate-sidebar.is-scrolling[data-scroll=up]{transform:translateY(calc(-50% - 11px))}.donate-sidebar__link{color:#fff;background:linear-gradient(135deg,#078a4f 0%,#13a864 35%,#f2c66d 70%,#078a4f 100%) 0 0/300% 300%;border:1px solid #ffffff40;border-radius:999px;outline:none;align-items:center;min-width:2.8rem;max-width:2.8rem;height:2.8rem;padding:.45rem;text-decoration:none;transition:max-width .45s cubic-bezier(.4,0,.2,1),padding .45s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;animation:4s infinite donate-gradient,4.2s ease-in-out infinite donate-float,2s infinite donate-pulse-glowing;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 24px #10924f59,inset 0 1px #ffffff4d}.donate-sidebar__link:after{content:"";background:linear-gradient(90deg,#0000,#ffffff80,#0000);width:45%;transition:left .5s;position:absolute;top:-50%;bottom:-50%;left:-60%;transform:skew(-20deg)}.donate-sidebar__link:hover,.donate-sidebar__link:focus-visible{outline:none;max-width:13.5rem;padding:.45rem 1.1rem;transform:scale(1.08);box-shadow:0 14px 30px #10924f73,0 0 0 1px #ffffff4d,inset 0 1px #ffffff59}.donate-sidebar__link:hover:after,.donate-sidebar__link:focus-visible:after{left:120%}.donate-sidebar__icon-container{background:#fff3;border-radius:50%;place-items:center;width:1.8rem;min-width:1.8rem;height:1.8rem;min-height:1.8rem;transition:transform .3s;display:grid}.donate-sidebar__link:hover .donate-sidebar__icon-container{background:#ffffff4d;transform:scale(1.1)}.donate-sidebar__icon{transform-origin:50%;width:1.05rem;height:1.05rem;animation:1.4s infinite donate-heartbeat;display:block}.donate-sidebar__label{letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:0;max-width:0;margin-inline-start:0;font-size:.82rem;font-weight:900;transition:opacity .3s,max-width .3s;overflow:hidden}.donate-sidebar__link:hover .donate-sidebar__label{opacity:1;max-width:9.5rem;margin-inline-start:.6rem}@media (width<=700px){.donate-sidebar{top:auto;bottom:1.25rem;left:1.25rem;transform:none!important}.donate-sidebar.is-scrolling[data-scroll=down],.donate-sidebar.is-scrolling[data-scroll=up]{transform:none!important}}@keyframes donate-float{0%,to{transform:translateY(0)rotate(0)}35%{transform:translateY(-6px)rotate(0)}42%{transform:translateY(-6px)rotate(-4deg)}48%{transform:translateY(-6px)rotate(4deg)}54%{transform:translateY(-6px)rotate(-4deg)}60%{transform:translateY(-6px)rotate(0)}}@keyframes donate-pulse-glowing{0%,to{box-shadow:0 0 #10924f99,0 6px 20px #10924f59,inset 0 1px #ffffff4d}50%{box-shadow:0 0 0 10px #f2c66d00,0 10px 28px #10924f80,inset 0 1px #ffffff4d}}@keyframes donate-gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes donate-heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.28)}70%{transform:scale(1)}}

.donate-sidebar ~ .donate-sidebar { display: none !important; }
.social-sidebar ~ .social-sidebar { display: none !important; }

@keyframes sawab-splash-exit {
  0% {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  75% {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  95% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
  }
}
.sawab-splash-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: #0d1b2a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s !important;
  pointer-events: all !important;
}
.sawab-splash-overlay.is-ready {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========================================================
   STANDARDIZED BALANCED SECTION PADDING ACROSS ENTIRE SITE
   ======================================================== */
section[class*="q"],
section[class*="je"],
section[class*="Ie"],
section[class*="lt"],
section[class*="Dt"] {
  padding: clamp(3.5rem, 5vw, 4.8rem) 0 !important;
}

div[class*="X"] {
  margin-top: 1.8rem !important;
}

div[class*="J"] {
  margin-bottom: 2rem !important;
}

@media (max-width: 680px) {
  section[class*="q"],
  section[class*="je"],
  section[class*="Ie"],
  section[class*="lt"],
  section[class*="Dt"] {
    padding: 1.75rem 0 !important;
  }

  div[class*="X"] {
    margin-top: 0.9rem !important;
  }

  div[class*="J"] {
    margin-bottom: 1rem !important;
  }
}

/* Latest Videos Side Cards Floating Animation */
@keyframes yt-floating-card {
  0%, 100% {
    transform: translateY(-3px) scale(1.01);
  }
  50% {
    transform: translateY(-7px) scale(1.015);
  }
}

/* Impact at a glance mobile 2-column grid */
@media (max-width: 768px) {
  .impact-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
  .impact-stat-card {
    min-height: 180px !important;
    padding: 1rem 0.55rem 0.85rem !important;
    gap: 0.45rem !important;
  }
  .impact-stat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 520px) {
  .impact-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .impact-stat-card {
    min-height: 170px !important;
    padding: 0.95rem 0.45rem 0.8rem !important;
    gap: 0.35rem !important;
    border-radius: 12px !important;
  }
  .impact-stat-card > svg {
    width: 24px !important;
    height: 24px !important;
    padding: 0.45rem !important;
  }
  .impact-stat-card strong {
    font-size: 1.4rem !important;
  }
  .impact-stat-card span {
    font-size: 0.68rem !important;
    letter-spacing: 0.03em !important;
  }
  .impact-stat-card p {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }
}

/* Stories of Transformation (Real Lives, Real Change) Carousel */
.story-carousel-track,
div[class*="Xe"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-snap-type: inline mandatory !important;
  scroll-padding-inline: 1px !important;
  padding: 0.2rem 0.05rem 0.6rem !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}
.story-carousel-track::-webkit-scrollbar,
div[class*="Xe"]::-webkit-scrollbar {
  display: none !important;
}
.story-card,
article[class*="Ze"] {
  flex: 0 0 calc((100% - 3rem) / 4) !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid rgba(44, 44, 113, 0.1) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 40px rgba(21, 22, 57, 0.09) !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease !important;
}
.story-card:hover,
article[class*="Ze"]:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(16, 146, 79, 0.32) !important;
  box-shadow: 0 28px 64px rgba(21, 22, 57, 0.16) !important;
}
.story-card:hover img,
article[class*="Ze"]:hover img {
  transform: scale(1.05) !important;
}
.story-card:active,
article[class*="Ze"]:active {
  transform: scale(0.985) !important;
}
@media (max-width: 1080px) {
  .story-card,
  article[class*="Ze"] {
    flex: 0 0 calc((100% - 2rem) / 3) !important;
    min-width: calc((100% - 2rem) / 3) !important;
    max-width: calc((100% - 2rem) / 3) !important;
  }
}
@media (max-width: 860px) {
  .story-card,
  article[class*="Ze"] {
    flex: 0 0 calc((100% - 1rem) / 2) !important;
    min-width: calc((100% - 1rem) / 2) !important;
    max-width: calc((100% - 1rem) / 2) !important;
  }
}
@media (max-width: 680px) {
  .story-card,
  article[class*="Ze"] {
    flex: 0 0 74% !important;
    min-width: 74% !important;
    max-width: 74% !important;
    width: 74% !important;
  }
}


/* ========================================================
   CARDS & CONTENT BLOCKS: PURE WHITE (#FFFFFF) + #E5E7EB BORDER
   ======================================================== */
article[class*="Ge"],
article[class*="Ze"],
article[class*="kt"],
.story-card,
.campaign-card,
.program-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease !important;
}

article[class*="Ge"]:hover,
article[class*="Ze"]:hover,
article[class*="kt"]:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(16, 146, 79, 0.35) !important;
  box-shadow: 0 14px 32px rgba(21, 22, 57, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

div[class*="qe"],
div[class*="$e"],
div[class*="jt"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}


/* ========================================================
   COMPACT, SMART & SLEEK MOBILE VIEW FOR CAROUSEL CARDS (< 680px)
   Sections: SAWAB Campaign, Major Program, Real Lives Real Change
   ======================================================== */
@media (max-width: 680px) {
  /* 1. Track & Carousel Spacing */
  div[class*="Xe"],
  div[class*="We"],
  .story-carousel-track,
  .campaign-carousel-track {
    gap: 0.65rem !important;
    padding: 0.2rem 0.1rem 0.5rem !important;
    scroll-padding-inline: 4px !important;
  }

  /* 2. Card Container: 74% width gives a crisp preview of next card */
  article[class*="Ge"],
  article[class*="Ze"],
  article[class*="kt"],
  .story-card,
  .program-card {
    flex: 0 0 74% !important;
    min-width: 74% !important;
    max-width: 74% !important;
    width: 74% !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 3. Card Image Aspect Ratio & Height */
  a[class*="Ke"],
  a[class*="Qe"] {
    min-height: 135px !important;
    height: 135px !important;
    max-height: 135px !important;
    width: 100% !important;
  }

  /* 4. Content Block inside Cards (Compact padding & auto height) */
  div[class*="qe"],
  div[class*="$e"],
  div[class*="jt"] {
    padding: 0.65rem 0.75rem 0.75rem !important;
    gap: 0.35rem !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
  }

  /* 5. Category / Eyebrow Badges on Mobile */
  /* Campaign Card Badge */
  div[class*="qe"] > span {
    font-size: 0.64rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.05em !important;
    color: var(--color-secondary) !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }

  /* Stories Category Pill & Location Row */
  span[class*="Mt"],
  div[class*="$e"] span[class*="Mt"] {
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 5px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
  }

  /* Stories Location text */
  div[class*="$e"] div:first-child span:not([class*="Mt"]) {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
  }

  /* 6. Card Headings (Smart 2-line clamped title with tight line-height) */
  div[class*="qe"] h3,
  div[class*="$e"] h3,
  div[class*="jt"] h3 {
    font-size: 0.86rem !important;
    font-weight: 750 !important;
    line-height: 1.28 !important;
    color: var(--color-primary) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.2rem !important;
    max-height: 2.2rem !important;
  }

  /* 7. Card Descriptions (Crisp 2-line preview) */
  div[class*="qe"] p,
  div[class*="$e"] p,
  div[class*="jt"] p {
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
    color: #64748b !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 8. Major Program: Metric / Focus & Progress Bar */
  article div[class*="et"],
  .program-card div[class*="et"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.70rem !important;
    font-weight: 750 !important;
    color: #475569 !important;
    gap: 0.35rem !important;
    margin: 0.1rem 0 !important;
  }

  article div[class*="tt"],
  .program-card div[class*="tt"] {
    height: 4.5px !important;
    margin: 0.1rem 0 0.2rem !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
  }

  /* 9. Action Buttons (Read More / Donate / Support / Share) */
  article   article   .program-card   .campaign-card div[class*="Je"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    margin-top: 0.35rem !important;
    padding-top: 0.1rem !important;
  }

  article   article   article   .program-card   .campaign-card div[class*="Je"] a {
    min-height: 31px !important;
    height: 31px !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 999px !important;
    letter-spacing: 0.01em !important;
  }
}

/* Extra Compact for smaller mobile screens (< 480px) */
@media (max-width: 480px) {
  article[class*="Ge"],
  article[class*="Ze"],
  article[class*="kt"],
  .story-card,
  .program-card {
    flex: 0 0 76% !important;
    min-width: 76% !important;
    max-width: 76% !important;
    width: 76% !important;
  }

  a[class*="Ke"],
  a[class*="Qe"] {
    min-height: 125px !important;
    height: 125px !important;
    max-height: 125px !important;
  }

  div[class*="qe"],
  div[class*="$e"],
  div[class*="jt"] {
    padding: 0.6rem 0.65rem 0.7rem !important;
    gap: 0.3rem !important;
  }

  div[class*="qe"] h3,
  div[class*="$e"] h3,
  div[class*="jt"] h3 {
    font-size: 0.83rem !important;
    line-height: 1.25 !important;
    min-height: 2.1rem !important;
    max-height: 2.1rem !important;
  }

  div[class*="qe"] p,
  div[class*="$e"] p,
  div[class*="jt"] p {
    font-size: 0.71rem !important;
    line-height: 1.35 !important;
  }

      div[class*="Je"] a {
    min-height: 29px !important;
    height: 29px !important;
    font-size: 0.69rem !important;
    padding: 0.15rem 0.35rem !important;
  }
}


/* ========================================================
   EDITORIAL UPDATES / NEWS & ARTICLES: MODERN MAGAZINE MOBILE
   ======================================================== */
@media (max-width: 768px) {
  /* Featured Main News Card */
  a[class*="Re"] {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    text-decoration: none !important;
  }

  /* Featured Image */
  a[class*="Re"] img,
  img[class*="ze"] {
    width: 100% !important;
    height: 190px !important;
    max-height: 190px !important;
    min-height: 190px !important;
    object-fit: cover !important;
    border-radius: 14px 14px 0 0 !important;
  }

  /* Featured Text Content */
  div[class*="Be"] {
    padding: 1rem 1.1rem 1.15rem !important;
    background: #ffffff !important;
  }

  div[class*="Be"] h3 {
    font-size: 1.06rem !important;
    line-height: 1.35 !important;
    color: #2c2c71 !important;
    margin: 0 0 0.4rem 0 !important;
    font-weight: 800 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  div[class*="Be"] p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Side News List Container */
  div[class*="Ve"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Individual Side News Item (82px square rounded thumbnail + clean magazine feed) */
  a[class*="He"] {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.6rem !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
  }

  a[class*="He"]::after {
    content: "›" !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    padding-right: 0.4rem !important;
    display: block !important;
  }

  a[class*="He"]:active {
    transform: scale(0.985) !important;
    background: #f8fafc !important;
  }

  /* 82px Rounded Thumbnail */
  a[class*="He"] img {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }

  /* Text Container */
  a[class*="He"] div {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    overflow: hidden !important;
  }

  /* News Item Heading */
  a[class*="He"] h4 {
    margin: 0 !important;
    color: #1e293b !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* News Item Subtitle/Snippet */
  a[class*="He"] p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}


/* ========================================================
   FEATURED HERO + HORIZONTAL SWIPE MINI-CARDS FOR NEWS MOBILE (< 768px)
   ======================================================== */
@media (max-width: 768px) {
  /* Featured Main News Card */
  a[class*="Re"] {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 1.1rem !important;
    text-decoration: none !important;
  }

  /* Featured Image */
  a[class*="Re"] img,
  img[class*="ze"] {
    width: 100% !important;
    height: 195px !important;
    max-height: 195px !important;
    min-height: 195px !important;
    object-fit: cover !important;
    border-radius: 13px 13px 0 0 !important;
  }

  /* Featured Text Content */
  div[class*="Be"] {
    padding: 0.95rem 1.05rem 1.15rem !important;
    background: #ffffff !important;
  }

  div[class*="Be"] h3 {
    font-size: 1.06rem !important;
    line-height: 1.35 !important;
    color: #2c2c71 !important;
    margin: 0 0 0.35rem 0 !important;
    font-weight: 800 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  div[class*="Be"] p {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Side News Track: Horizontal Swipe Carousel */
  div[class*="Ve"] {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: inline mandatory !important;
    scroll-padding-inline: 4px !important;
    gap: 0.85rem !important;
    padding: 0.2rem 0.15rem 0.85rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  div[class*="Ve"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual Swipeable Mini News Card */
  a[class*="He"] {
    flex: 0 0 74% !important;
    min-width: 74% !important;
    max-width: 74% !important;
    width: 74% !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  a[class*="He"]::after {
    display: none !important;
  }

  a[class*="He"]:active {
    transform: scale(0.985) !important;
  }

  /* Mini News Card Image */
  a[class*="He"] img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 125px !important;
    min-height: 125px !important;
    max-height: 125px !important;
    border-radius: 11px 11px 0 0 !important;
    object-fit: cover !important;
  }

  /* Text Container inside Mini Card */
  a[class*="He"] div {
    padding: 0.75rem 0.85rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
  }

  /* Mini News Heading */
  a[class*="He"] h4 {
    margin: 0 !important;
    color: #1e293b !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Mini News Snippet */
  a[class*="He"] p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ========================================================
   ULTRA-PREMIUM STAY CONNECTED & FOOTER UI
   ======================================================== */
.footer-col-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}

.footer-stay-connected-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 1.5rem 1.35rem 1.4rem !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2) !important;
}

.footer-stay-desc {
  color: #cbd5e1 !important;
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
  margin: 0 0 1.1rem 0 !important;
}

.footer-newsletter-form {
  margin: 0 0 1.25rem 0 !important;
  width: 100% !important;
}

.footer-newsletter-input-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  padding: 4px 5px 4px 12px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

.footer-newsletter-input-wrap:focus-within {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25), inset 0 2px 4px rgba(0,0,0,0.2) !important;
  background: rgba(15, 23, 42, 0.85) !important;
}

.footer-newsletter-icon {
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
}

.footer-newsletter-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  padding: 0 0.4rem 0 0 !important;
  height: 38px !important;
  box-shadow: none !important;
}

.footer-newsletter-input::placeholder {
  color: #94a3b8 !important;
}

.footer-newsletter-submit-btn {
  background: linear-gradient(135deg, #008037 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0 1.2rem !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-shadow: 0 4px 12px rgba(0, 128, 55, 0.35) !important;
  transition: all 0.2s ease !important;
}

.footer-newsletter-submit-btn:hover {
  background: linear-gradient(135deg, #029b44 0%, #059669 100%) !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(0, 128, 55, 0.5) !important;
}

.footer-join-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  margin-bottom: 1.25rem !important;
}

.footer-section-subtitle {
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  letter-spacing: 0.02em !important;
}

.footer-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
  display: inline-block !important;
}

.footer-join-pills-row {
  display: flex !important;
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
}

.footer-join-pill-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 0.42rem 1rem !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  transition: all 0.2s ease !important;
}

.footer-join-pill-btn:hover {
  background: #008037 !important;
  color: #ffffff !important;
  border-color: #22c55e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 128, 55, 0.35) !important;
}

.footer-social-section {
  display: flex !important;
  gap: 0.6rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.footer-social-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-social-btn:hover {
  transform: translateY(-3px) scale(1.1) !important;
}

.footer-social-btn--fb:hover { background: #1877f2 !important; border-color: #1877f2 !important; box-shadow: 0 6px 16px rgba(24, 119, 242, 0.4) !important; }
.footer-social-btn--insta:hover { background: linear-gradient(135deg, #fd1d1d, #e1306c, #f77737) !important; border-color: #e1306c !important; box-shadow: 0 6px 16px rgba(225, 48, 108, 0.4) !important; }
.footer-social-btn--li:hover { background: #0a66c2 !important; border-color: #0a66c2 !important; box-shadow: 0 6px 16px rgba(10, 102, 194, 0.4) !important; }
.footer-social-btn--yt:hover { background: #ff0000 !important; border-color: #ff0000 !important; box-shadow: 0 6px 16px rgba(255, 0, 0, 0.4) !important; }
.footer-social-btn--wa:hover { background: #25d366 !important; border-color: #25d366 !important; box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4) !important; }

@media (max-width: 900px) {
  .footer-grid-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem !important;
  }
}

@media (max-width: 640px) {
  .footer-grid-container {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .footer-col-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    padding: 1.25rem 1.15rem !important;
    backdrop-filter: blur(10px) !important;
  }

  .footer-col-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.85rem !important;
    border-bottom: 2.5px solid #008037 !important;
    padding-bottom: 0.35rem !important;
    display: inline-block !important;
  }

  .footer-stay-connected-card {
    padding: 1.25rem 1.15rem !important;
  }

  .footer-newsletter-input-wrap {
    padding: 3px 4px 3px 10px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .footer-newsletter-submit-btn {
    padding: 0 1rem !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0.8rem !important;
  }

  .footer-bottom-bar {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.85rem !important;
    padding-top: 1.25rem !important;
    padding-bottom: 4.5rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
  }

  .footer-bottom-bar > div {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
    font-size: 0.82rem !important;
    width: 100% !important;
    text-align: center !important;
  }

  .footer-bottom-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 1.25rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .footer-bottom-links a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 0.82rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}




/* ========================================================
   GLOBAL MOBILE HORIZONTAL OVERFLOW PREVENTION
   ======================================================== */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  overscroll-behavior-x: none !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overscroll-behavior-x: none !important;
}

#root {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
}

main,
section,
header,
footer,
.site-header,
.site-footer,
.sawab-hero,
.quick-donate-card,
.footer-bottom-bar {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.story-carousel-track,
.campaign-carousel-track,
div[class*="Xe"],
div[class*="We"],
div[class*="Ye"],
div[class*="Ue"],
div[class*="gt"],
div[class*="Ve"] {
  max-width: 100% !important;
  overscroll-behavior-inline: contain !important;
}

/* ========================================================
   STANDARD CARD & BUTTON STYLING (ALL VIEWPORTS)
   Sections: Major Program, Real Lives Real Change, Urgent Appeals
   ======================================================== */

/* Card Containers */
article[class*="Ge"],
article[class*="Ze"],
article[class*="kt"],
.story-card,
.campaign-card,
.program-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Action Button 2-Column Grid Container */
article article .program-card .story-card .campaign-card div[class*="Je"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.65rem !important;
  margin-top: auto !important;
  padding: 0.5rem 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Action Buttons Base Style */
article article article article .program-card .story-card .campaign-card div[class*="Je"] a {
  min-height: 42px !important;
  height: 42px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  padding: 0 0.65rem !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 1. "Read more" Button (Secondary Standard Style) */
article article article .program-card .story-card .campaign-card div[class*="Je"] a:first-child {
  background: #ffffff !important;
  color: #2c2c71 !important;
  border: 1.5px solid #2c2c71 !important;
  box-shadow: 0 2px 6px rgba(44, 44, 113, 0.08) !important;
}

article article article div[class*="Je"] a:first-child:hover {
  background: #f0f2fb !important;
  color: #1c1c54 !important;
  border-color: #1c1c54 !important;
  box-shadow: 0 4px 10px rgba(44, 44, 113, 0.14) !important;
}

/* 2. "Donate Now" Button (Primary High-Conversion Green Style) */
article article article .program-card .story-card .campaign-card div[class*="Je"] a:last-child:not(:first-child) {
  background: linear-gradient(135deg, #10924f 0%, #0a703d 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 4px 14px rgba(16, 146, 79, 0.32) !important;
}

article article article div[class*="Je"] a:last-child:not(:first-child):hover {
  background: linear-gradient(135deg, #0d7e43 0%, #085a31 100%) !important;
  box-shadow: 0 6px 18px rgba(16, 146, 79, 0.42) !important;
}

/* Tap micro-interaction */
article article article div[class*="Je"] a:active {
  transform: scale(0.96) !important;
  filter: brightness(0.95) !important;
}

/* ========================================================
   MOBILE VIEWPORT (< 768px) OPTIMIZATION
   ======================================================== */
@media (max-width: 768px) {
  div[class*="Xe"],
  div[class*="We"],
  .story-carousel-track,
  .campaign-carousel-track {
    gap: 0.85rem !important;
    padding: 0.35rem 0.15rem 0.85rem !important;
    scroll-padding-inline: 8px !important;
  }

  /* 84% width gives ample breathing space and peek of next card */
  article[class*="Ge"],
  article[class*="Ze"],
  article[class*="kt"],
  .story-card,
  .program-card {
    flex: 0 0 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    width: 84% !important;
  }

  a[class*="Ke"],
  a[class*="Qe"] {
    min-height: 155px !important;
    height: 155px !important;
    max-height: 155px !important;
    width: 100% !important;
    display: block !important;
  }

  div[class*="qe"],
  div[class*="$e"],
  div[class*="jt"] {
    padding: 1rem 1.05rem 1.15rem !important;
    gap: 0.45rem !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  div[class*="qe"] > span {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    color: var(--color-secondary) !important;
    line-height: 1.2 !important;
  }

  span[class*="Mt"],
  div[class*="$e"] span[class*="Mt"] {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
  }

  div[class*="$e"] div:first-child span:not([class*="Mt"]) {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    white-space: nowrap !important;
  }

  div[class*="qe"] h3,
  div[class*="$e"] h3,
  div[class*="jt"] h3 {
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    margin: 0.15rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: auto !important;
    max-height: none !important;
  }

  div[class*="qe"] p,
  div[class*="$e"] p,
  div[class*="jt"] p {
    font-size: 0.81rem !important;
    line-height: 1.45 !important;
    color: #64748b !important;
    margin: 0 0 0.45rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  article div[class*="et"],
  .program-card div[class*="et"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    color: #475569 !important;
    gap: 0.4rem !important;
    margin: 0.1rem 0 !important;
  }

  article div[class*="tt"],
  .program-card div[class*="tt"] {
    height: 5px !important;
    margin: 0.15rem 0 0.35rem !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
  }

  article   article   article         .program-card   .story-card   .campaign-card div[class*="Je"] a {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 0.83rem !important;
    font-weight: 800 !important;
    padding: 0 0.55rem !important;
  }
}

/* ========================================================
   Quick Amount - Super Clean, Minimal & Smart
   Center Aligned, Pure Crisp Buttons, 100% Responsive
   ======================================================== */
.quick-donate-card .quick-amount-ribbon,
.quick-donate-card [class*="Ee"],
form.quick-donate-card [class*="Ee"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.65rem !important;
  margin: 0.9rem auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 900px !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.quick-donate-card .quick-amount-ribbon .pills-label,
.quick-donate-card .pills-label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  white-space: nowrap !important;
  margin-right: 0.4rem !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Quick Amount Pill Buttons (Desktop: Clean Center Group) */
.quick-donate-card .quick-amount-pill,
.quick-donate-card button[class*="De"] {
  flex: 0 0 auto !important;
  min-width: 92px !important;
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  background: #ffffff !important;
  color: #112f4d !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  padding: 0 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transform: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.quick-donate-card .quick-amount-pill:hover,
.quick-donate-card button[class*="De"]:hover {
  background: #ffffff !important;
  color: #00875a !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18) !important;
}

.quick-donate-card .quick-amount-pill:active,
.quick-donate-card button[class*="De"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.quick-donate-card .quick-amount-pill.is-selected,
.quick-donate-card button[class*="De"][data-selected="true"],
.quick-donate-card button[class*="De"][selected],
.quick-donate-card button[class*="De"].is-selected {
  background: #112f4d !important;
  color: #ffffff !important;
  border-color: #112f4d !important;
  box-shadow: 0 4px 12px rgba(17, 47, 77, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.65) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* Tablet Layout (641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  .quick-donate-card .quick-amount-ribbon,
  .quick-donate-card [class*="Ee"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .quick-donate-card .quick-amount-ribbon .pills-label,
  .quick-donate-card .pills-label {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 0.25rem !important;
    margin-right: 0 !important;
    font-size: 0.86rem !important;
  }

  .quick-donate-card .quick-amount-pill,
  .quick-donate-card button[class*="De"] {
    flex: 1 1 calc(20% - 0.6rem) !important;
    min-width: unset !important;
    max-width: 130px !important;
    height: 40px !important;
    font-size: 0.94rem !important;
  }
}

/* Mobile Layout (<= 640px) */
@media (max-width: 640px) {
  .quick-donate-card .quick-amount-ribbon,
  .quick-donate-card [class*="Ee"] {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .quick-donate-card .quick-amount-ribbon .pills-label,
  .quick-donate-card .pills-label {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    margin-bottom: 0.15rem !important;
    margin-right: 0 !important;
    display: flex !important;
  }

  /* 3 buttons on row 1 (each spans 2 of 6 columns) */
  .quick-donate-card .quick-amount-pill:nth-of-type(1),
  .quick-donate-card .quick-amount-pill:nth-of-type(2),
  .quick-donate-card .quick-amount-pill:nth-of-type(3),
  .quick-donate-card button[class*="De"]:nth-of-type(1),
  .quick-donate-card button[class*="De"]:nth-of-type(2),
  .quick-donate-card button[class*="De"]:nth-of-type(3) {
    grid-column: span 2 !important;
  }

  /* 2 buttons on row 2 (each spans 3 of 6 columns) */
  .quick-donate-card .quick-amount-pill:nth-of-type(4),
  .quick-donate-card .quick-amount-pill:nth-of-type(5),
  .quick-donate-card button[class*="De"]:nth-of-type(4),
  .quick-donate-card button[class*="De"]:nth-of-type(5) {
    grid-column: span 3 !important;
  }

  .quick-donate-card .quick-amount-pill,
  .quick-donate-card button[class*="De"] {
    width: 100% !important;
    min-width: unset !important;
    max-width: none !important;
    min-height: 42px !important;
    height: 42px !important;
    font-size: 0.96rem !important;
    padding: 0 0.4rem !important;
    border-radius: 9px !important;
  }
}

/* =========================================================
   CAMPAIGN PAGE: COMPREHENSIVE MOBILE (2-COL) & TABLET RESPONSIVE PERFECTION
   ========================================================= */

/* 1. Prevent floating sidebar collisions on mobile & tablet */
@media (max-width: 1100px) {
  .social-sidebar {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .donate-sidebar {
    display: none !important;
  }
}

/* 2. Main Campaign Container */
.campaigns-container,
div[class*="Ds"] {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 0.5rem 3rem 0.5rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

@media (min-width: 641px) {
  .campaigns-container,
  div[class*="Ds"] {
    padding: 0 1.5rem 3.5rem 1.5rem !important;
    gap: 1.5rem !important;
  }
}

@media (min-width: 1025px) {
  .campaigns-container,
  div[class*="Ds"] {
    padding: 0 1.75rem 4rem 1.75rem !important;
    gap: 2rem !important;
  }
}

/* 3. Horizontal Scrollable Category Chips */
.campaign-categories-bar,
div[class*="js"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 0.25rem 0.15rem 0.5rem 0.15rem !important;
  margin-top: 0.15rem !important;
  margin-bottom: -0.15rem !important;
}

.campaign-categories-bar::-webkit-scrollbar,
div[class*="js"]::-webkit-scrollbar {
  display: none !important;
}

.campaign-category-chip,
.campaign-categories-bar button,
div[class*="js"] button,
button[class*="Ms"] {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 1.15rem !important;
  border-radius: 999px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  border: 1.5px solid rgba(44, 44, 113, 0.12) !important;
  background: #ffffff !important;
  color: #2c2c71 !important;
  box-shadow: 0 2px 6px rgba(44, 44, 113, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 640px) {
  .campaign-category-chip,
  .campaign-categories-bar button,
  div[class*="js"] button,
  button[class*="Ms"] {
    height: 34px !important;
    padding: 0 0.85rem !important;
    font-size: 0.78rem !important;
  }
}

.campaign-categories-bar button:hover,
div[class*="js"] button:hover {
  background: #f4f6fb !important;
  color: #1a1a52 !important;
  border-color: rgba(44, 44, 113, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* 4. Search and Sort Filter Card */
.campaign-filter-card,
.campaign-search-sort-card,
div[class*="Os"] {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.85rem 1.25rem !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(44, 44, 113, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(44, 44, 113, 0.04) !important;
  box-sizing: border-box !important;
}

.campaign-search-box,
div[class*="ks"] {
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
}

.campaign-search-box svg,
div[class*="ks"] svg {
  position: absolute !important;
  left: 0.95rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  color: #586273 !important;
  pointer-events: none !important;
}

.campaign-search-box input,
div[class*="ks"] input {
  width: 100% !important;
  height: 44px !important;
  box-sizing: border-box !important;
  padding: 0 1rem 0 2.65rem !important;
  border: 1.5px solid rgba(44, 44, 113, 0.14) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #112f4d !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.campaign-search-box input:focus,
div[class*="ks"] input:focus {
  border-color: #10924f !important;
  box-shadow: 0 0 0 3px rgba(16, 146, 79, 0.15) !important;
}

.campaign-sort-box,
div[class*="As"] {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.campaign-sort-box label,
div[class*="As"] label {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #2c2c71 !important;
}

.campaign-sort-box select,
div[class*="As"] select {
  height: 44px !important;
  padding: 0 2rem 0 0.9rem !important;
  border: 1.5px solid rgba(44, 44, 113, 0.14) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #2c2c71 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.campaign-sort-box select:focus,
div[class*="As"] select:focus {
  border-color: #10924f !important;
  box-shadow: 0 0 0 3px rgba(16, 146, 79, 0.15) !important;
}

@media (max-width: 640px) {
  .campaign-filter-card,
  .campaign-search-sort-card,
  div[class*="Os"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 14px !important;
  }

  .campaign-search-box input,
  div[class*="ks"] input {
    height: 40px !important;
    font-size: 0.84rem !important;
    padding-left: 2.4rem !important;
  }

  .campaign-search-box svg,
  div[class*="ks"] svg {
    left: 0.85rem !important;
    width: 16px !important;
    height: 16px !important;
  }

  .campaign-sort-box,
  div[class*="As"] {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }

  .campaign-sort-box label,
  div[class*="As"] label {
    font-size: 0.8rem !important;
  }

  .campaign-sort-box select,
  div[class*="As"] select {
    height: 38px !important;
    font-size: 0.82rem !important;
    width: 100% !important;
  }
}

/* 5. Campaign Cards Grid Layout */
.campaign-cards-grid,
div[class*="Ns"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: start !important; /* Cards take natural height, no ugly gaps */
}

/* Tablet (641px - 850px): Crisp 2-Column Grid */
@media (min-width: 641px) and (max-width: 850px) {
  .campaign-cards-grid,
  div[class*="Ns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
  }
}

/* Tablet Wide (851px - 1024px): Crisp 3-Column Grid */
@media (min-width: 851px) and (max-width: 1024px) {
  .campaign-cards-grid,
  div[class*="Ns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }
}

/* MOBILE VIEW (<= 640px): 2-COLUMN SMART & BEAUTIFUL GRID */
@media (max-width: 640px) {
  .campaign-cards-grid,
  div[class*="Ns"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem 0.55rem !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 6. Campaign Card Base Styling */
.campaign-card,
div[class*="Ps"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
}

.campaign-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px -4px rgba(44, 44, 113, 0.12) !important;
}

/* Card Image Heights */
.campaign-image-box,
.campaign-card > a:first-child > div,
.campaign-card div[class*="Fs"] {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
}

.campaign-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.campaign-card:hover img {
  transform: scale(1.04) !important;
}

/* Card Badges Container (Desktop & Tablet) */
.campaign-badges,
.campaign-card div[class*="Is"] {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 2 !important;
}

.campaign-badge-category,
.campaign-badge-urgent,
.campaign-card div[class*="Is"] span,
.campaign-card span[class*="Ls"],
.campaign-card span[class*="Rs"] {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16) !important;
}

/* Card Body Content */
.campaign-body,
.campaign-card div[class*="zs"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 1.05rem 1.15rem 1.15rem 1.15rem !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.campaign-title,
.campaign-card h3,
.campaign-card div[class*="Bs"] {
  font-size: 1.1rem !important;
  line-height: 1.32 !important;
  font-weight: 850 !important;
  color: #112f4d !important;
  margin: 0 0 0.4rem 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.65em !important;
  max-height: 2.65em !important;
}

.campaign-summary,
.campaign-card p,
.campaign-card div[class*="Vs"] {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  color: #586273 !important;
  margin: 0 0 0.5rem 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.9em !important;
  max-height: 2.9em !important;
}

/* Progress & Stats - Removed across all viewports */
.campaign-metrics,
.campaign-card div[class*="Hs"],
.campaign-raised-row,
.campaign-progress-bar,
.campaign-goal-row,
.campaign-card div[class*="Ws"],
.campaign-card div[class*="Us"],
.campaign-funded-badge,
.campaign-card div[class*="Ks"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Actions Buttons Grid (Donate Now + Share) on Desktop/Tablet */
.campaign-actions,
.campaign-card .campaign-actions,
.campaign-card div[class*="qs"] {
  display: grid !important;
  grid-template-columns: 1.25fr 0.95fr !important;
  gap: 0.55rem !important;
  margin-top: 0.35rem !important;
  padding-top: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.campaign-donate-btn,
.campaign-card .campaign-donate-btn,
.campaign-card a.campaign-donate-btn,
.campaign-card div[class*="qs"] a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 0.9rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #10924f 0%, #0a703d 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(16, 146, 79, 0.28) !important;
  border: 1.5px solid transparent !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.campaign-donate-btn:hover,
.campaign-card .campaign-donate-btn:hover,
.campaign-card div[class*="qs"] a:hover {
  background: linear-gradient(135deg, #0d7e43 0%, #085a31 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(16, 146, 79, 0.38) !important;
}

.campaign-share-btn,
.campaign-card .campaign-share-btn,
.campaign-card button.campaign-share-btn,
.campaign-card div[class*="qs"] button,
.campaign-card button.campaign-card-share-btn,
.campaign-card button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 0.85rem !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2c2c71 !important;
  border: 1.5px solid #2c2c71 !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  box-shadow: 0 2px 8px rgba(44, 44, 113, 0.08) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

.campaign-share-btn:hover,
.campaign-card button:hover {
  background: rgba(44, 44, 113, 0.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(44, 44, 113, 0.15) !important;
}

/* =========================================================
   TABLET OPTIMIZATIONS (641px - 1024px)
   ========================================================= */
@media (min-width: 641px) and (max-width: 1024px) {
  .campaign-image-box,
  .campaign-card > a:first-child > div,
  .campaign-card div[class*="Fs"] {
    height: 205px !important;
  }

  .campaign-body,
  .campaign-card div[class*="zs"] {
    padding: 1rem 1.15rem 1.15rem 1.15rem !important;
    gap: 0 !important;
    justify-content: flex-start !important;
  }

  .campaign-title,
  .campaign-card h3,
  .campaign-card div[class*="Bs"] {
    font-size: 1.05rem !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .campaign-donate-btn,
  .campaign-card .campaign-donate-btn,
  .campaign-card a.campaign-donate-btn,
  .campaign-card div[class*="qs"] a {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 0.84rem !important;
  }

  .campaign-share-btn,
  .campaign-card .campaign-share-btn,
  .campaign-card button.campaign-share-btn,
  .campaign-card div[class*="qs"] button,
  .campaign-card button {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 0.82rem !important;
    padding: 0 0.65rem !important;
  }
}

/* =========================================================
   SPECIAL MOBILE (2-COL) CARD OPTIMIZATIONS (<= 640px)
   SMART, PRETTY & PIXEL-PERFECT TWO-COLUMN APPEALS
   ========================================================= */
@media (max-width: 640px) {
  /* 1. Page Container & Spacing */
  .campaigns-container,
  div[class*="Ds"] {
    gap: 1.25rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  /* 2. Filter & Sort Bar Compactness */
  .campaign-filter-card,
  div[class*="Os"] {
    padding: 0.75rem 0.85rem !important;
    gap: 0.65rem !important;
    border-radius: 14px !important;
  }

  .campaign-search-box input,
  div[class*="ks"] input {
    padding: 0.65rem 0.85rem 0.65rem 2.4rem !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
  }

  .campaign-search-box svg,
  div[class*="ks"] svg {
    left: 0.75rem !important;
    width: 16px !important;
    height: 16px !important;
  }

  .campaign-sort-box select,
  div[class*="As"] select {
    padding: 0.6rem 2rem 0.6rem 0.75rem !important;
    font-size: 0.8rem !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  /* 3. 2-Column Grid */
  .campaign-cards-grid,
  div[class*="Ns"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem 0.55rem !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Card Container */
  .campaign-card,
  article.campaign-card,
  div[class*="Ps"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* 5. Image Box (Proportionate 108px Height) */
  .campaign-image-box,
  .campaign-card > a:first-child > div,
  .campaign-card div[class*="Fs"],
  .campaign-card [class*="Fs"] {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .campaign-image-box img,
  .campaign-card > a:first-child > div img,
  .campaign-card div[class*="Fs"] img,
  .campaign-card [class*="Fs"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    display: block !important;
  }

  /* 6. Corner Badges: Category on Left, Urgent on Right */
  .campaign-badges,
  .campaign-card div[class*="Is"],
  .campaign-card [class*="Is"] {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    right: 5px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 3px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .campaign-badge-category,
  .campaign-card div[class*="Is"] span:first-child,
  .campaign-card span[class*="Ls"],
  .campaign-card [class*="Ls"] {
    font-size: 0.5rem !important;
    font-weight: 850 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    max-width: calc(100% - 48px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  }

  .campaign-badge-urgent,
  .campaign-card div[class*="Is"] span:nth-child(2),
  .campaign-card span[class*="Rs"],
  .campaign-card [class*="Rs"] {
    font-size: 0.5rem !important;
    font-weight: 900 !important;
    padding: 2px 4.5px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    background: linear-gradient(135deg, #e53e3e, #dd6b20) !important;
    box-shadow: 0 2px 5px rgba(229, 62, 62, 0.35) !important;
    margin-left: auto !important;
  }

  /* 7. Card Body */
  .campaign-body,
  .campaign-card div[class*="zs"] {
    padding: 0.35rem 0.45rem 0.45rem 0.45rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* 8. Title (Clamped to 2 lines with tight uniform min-height) */
  .campaign-title,
  .campaign-card h3,
  .campaign-card div[class*="Bs"] {
    font-size: 0.76rem !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.2em !important;
    max-height: 2.2em !important;
  }

  /* Summary: Hidden on mobile 2-col to keep card punchy */
  .campaign-summary,
  .campaign-card p,
  .campaign-card div[class*="Vs"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  /* 9. Metrics Block - Removed across all viewports */
  .campaign-metrics,
  .campaign-card div[class*="Hs"],
  .campaign-raised-row,
  .campaign-progress-bar,
  .campaign-goal-row,
  .campaign-card div[class*="Ws"],
  .campaign-card div[class*="Us"],
  .campaign-funded-badge,
  .campaign-card div[class*="Ks"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  /* 10. Action Buttons (Donate Now + Share) */
  .campaign-actions,
  .campaign-card .campaign-actions,
  .campaign-card div[class*="qs"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin-top: 0.22rem !important;
    padding-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .campaign-donate-btn,
  .campaign-card .campaign-donate-btn,
  .campaign-card a.campaign-donate-btn,
  .campaign-card div[class*="qs"] a {
    flex: 1.15 1 0 !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #10924f 0%, #0a703d 100%) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(16, 146, 79, 0.22) !important;
    padding: 0 0.35rem !important;
    border: none !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  }

  .campaign-donate-btn:active,
  .campaign-card div[class*="qs"] a:active {
    transform: scale(0.97) !important;
    box-shadow: 0 1px 3px rgba(16, 146, 79, 0.3) !important;
  }

  .campaign-share-btn,
  .campaign-card .campaign-share-btn,
  .campaign-card button.campaign-share-btn,
  .campaign-card div[class*="qs"] button,
  .campaign-card button.campaign-card-share-btn,
  .campaign-card button {
    flex: 0.85 1 0 !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1.5px solid #2c2c71 !important;
    color: #2c2c71 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    padding: 0 0.35rem !important;
    box-shadow: 0 2px 6px rgba(44, 44, 113, 0.08) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .campaign-share-btn svg,
  .campaign-card button svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  .campaign-share-btn .campaign-share-text,
  .campaign-card button span {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
  }

  /* Ultra-compact micro-screen adjustments (<= 380px, e.g. Samsung Galaxy S / Small Androids) */
  @media (max-width: 380px) {
    .campaign-card div[class*="Ds"],
    .campaign-card-content {
      padding: 7px 5px !important;
    }

    .campaign-raised-row span:first-child,
    .campaign-card div[class*="Hs"] div[class*="Us"]:first-child span:first-child {
      font-size: 0.52rem !important;
    }

    .campaign-raised-row span:first-child strong,
    .campaign-card div[class*="Hs"] div[class*="Us"]:first-child span:first-child strong {
      font-size: 0.62rem !important;
    }

    .campaign-funded-badge,
    .campaign-card div[class*="Hs"] span[class*="Ks"],
    .campaign-card div[class*="Ks"] {
      font-size: 0.42rem !important;
      padding: 1px 2.5px !important;
      letter-spacing: -0.02em !important;
    }

    .campaign-badge-category,
    .campaign-card div[class*="Is"] span:first-child,
    .campaign-card span[class*="Ls"],
    .campaign-card [class*="Ls"] {
      font-size: 0.46rem !important;
      padding: 1.5px 3.5px !important;
    }

    .campaign-badge-urgent,
    .campaign-card div[class*="Is"] span:nth-child(2),
    .campaign-card span[class*="Rs"],
    .campaign-card [class*="Rs"] {
      font-size: 0.46rem !important;
      padding: 1.5px 3.5px !important;
    }

    .campaign-donate-btn,
    .campaign-card .campaign-donate-btn,
    .campaign-card a.campaign-donate-btn,
    .campaign-card div[class*="qs"] a {
      height: 31px !important;
      min-height: 31px !important;
      max-height: 31px !important;
      font-size: 0.66rem !important;
      padding: 0 0.25rem !important;
    }

    .campaign-share-btn,
    .campaign-card .campaign-share-btn,
    .campaign-card button.campaign-share-btn,
    .campaign-card div[class*="qs"] button,
    .campaign-card button {
      height: 31px !important;
      min-height: 31px !important;
      max-height: 31px !important;
      padding: 0 0.2rem !important;
    }

    .campaign-share-btn .campaign-share-text,
    .campaign-card button span {
      font-size: 0.62rem !important;
    }
  }
}

/* === HERO COMPACT FIX (TABLET) === */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Make hero banner moderately smaller */
  main > section:first-of-type {
    min-height: auto !important;
    padding-top: 7.5rem !important;
    padding-bottom: 2.5rem !important;
    justify-content: center !important;
  }
  
  main > section:nth-of-type(2) {
    padding-top: 2rem !important;
  }
  
  /* Hide paragraphs and controls to keep it clean */
  main > section:first-of-type p,
  main > section:first-of-type div[aria-label] {
    display: none !important;
  }
  
  /* Title font size appropriate for tablet */
  main > section:first-of-type h1 {
    font-size: clamp(2rem, 5vw, 3rem) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* === HERO COMPACT FIX (MOBILE) === */
@media (max-width: 640px) {
  /* Make hero banner much smaller */
  main > section:first-of-type {
    min-height: auto !important;
    padding-top: 5.5rem !important;
    padding-bottom: 0.5rem !important;
    justify-content: center !important;
  }
  
  /* Reduce space above campaigns section */
  main > section:nth-of-type(2) {
    padding-top: 1rem !important;
  }
  
  /* Hide paragraphs (eyebrow, subtitle) and controls */
  main > section:first-of-type p,
  main > section:first-of-type div[aria-label] {
    display: none !important;
  }
  
  /* Make the title smaller to fit nicely */
  main > section:first-of-type h1 {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}



/* Footer Mobile Fixes */
@media (max-width: 768px) {
  footer, .footer, [class*="footer"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  footer > div {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
  }
  footer .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}

/* Fix for mobile/tablet footer layout on Jobs page and globally */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}
.footer-grid-container,
.footer-col-card,
footer {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.css-1mwngha, .css-11qvaqf {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}




/* === JOBS PAGE & FOOTER MOBILE OVERFLOW FIX === */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

main {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

footer, 
.footer-grid-container, 
.footer-col-card {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Ensure no inner content of the footer pushes it outwards */
.footer-stay-connected-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}

/* Fix any absolutely positioned decorative backgrounds that cause overflow */
div[dir="ltr"] {
  max-width: 100vw !important;
}