@media (max-width: 767px) {
    .footer-newsletter{
        margin-top: 2%;
      }
      .footer-left{
        align-items: center !important;
        text-align: center;
      }
      .footer-heading-sm {
        text-align: center;
      }
      .footer-contact{
        text-align: center;
      }
      .footer-heading {
       text-align: center;
      }
      .footer-links{
       text-align: center;
      }
      .donation-card{ width: 94%; border-radius: 1.4rem; }
  .donation-card__content{ padding: 6% 6%; }
  .donation-card__bg{ display:none; } /* mobile pe clean */
  .steps{ width: 100%; }
  .donation-form{ width: 100%; }

  /* badge center on small screens */
  .donation-badge{
    /* left: 50%;
    transform: translate(-50%, -52%); */
    display: none !important;
  }

  .btn-next{ padding: 2.6% 6%; }
  .intl__btn{ padding: 2.8% 10%; }
   .jdc-hero__rightTop {
    grid-template-columns: 1fr;
  }
  .jdc-hero__avatarWrap {
    width: 84px;
  }
    /* container single column */
  .jdc-hero__container {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  /* divider hide */
  .jdc-hero__divider {
    display: none;
  }

  /* left column: avatar first, center */
  .jdc-hero__col--left {
    align-items: center; /* flex items center */
    padding-top: 0;
  }

  /* avatar center */
  .jdc-hero__avatarWrap--leftRight {
    align-self: center;
    margin: 0 0 14px 0;
  }

  /* left text center */
  .jdc-hero__title,
  .jdc-hero__text {
    text-align: center;
  }

  /* right column center */
  .jdc-hero__col--right,
  .jdc-hero__rightTop,
  .jdc-hero__rightCopy,
  .jdc-hero__eyebrow,
  .jdc-hero__headline,
  .jdc-hero__subline {
    text-align: center;
  }

  /* right top padding remove on mobile */
  .jdc-hero__rightTop {
    padding-top: 0;
  }

  /* optional: better spacing */
  .jdc-hero__subline {
    margin-top: 12px;
  }
    .pay-grid{ grid-template-columns:1fr; }
      .bank-layout{
        grid-template-columns:1fr;
      }
      .bank-hands{
        display:none;
      }
      .bank-menu-btn{
        padding:4% 5%;
      }
        .grid{ grid-template-columns:1fr; }
      .email-half{ grid-column:auto; max-width:none; }
      label{ text-align:left; }
      .banner-content h1 {
    font-size: 1.6rem;
  }
/* Card structure */
  .hero-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 18px;
  }

  /* HIDE LEFT IMAGE */
  .hero-left{
    /* display: none; */
  }

  /* CENTER IMAGE — TRUE CENTER */
  .hero-center{
    position: static;           /* 🔑 absolute reset */
    margin: 0 auto 16px;
    transform: translateY(-16px);
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
    pointer-events: none;
  }

  .hero-center img{
    width: 180px;
    max-width: 60vw;
    display: block;
    margin: 0 auto;
  }

  /* IMAGE COMES FIRST */
  .founder-hero.active .hero-center{
    opacity: 1;
    transform: translateY(0);
  }

  /* CONTENT COMES AFTER IMAGE */
  .hero-right{
    width: 100%;
    padding: 6px 0 18px;
    opacity: 0;
    transform: translateY(24px); /* bottom → up feels better on mobile */
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: .25s;
    background: transparent;
  }

  .founder-hero.active .hero-right{
    opacity: 1;
    transform: translateY(0);
  }

  .hero-social{
    justify-content: center;
  }
   .container-fluid-line{
        display: none;
      }
      .home-new-addition-content{
        text-align: center;
      }
}
/* tablets */
@media (min-width: 768px) and (max-width: 991px) {
  /* tablets */
      .footer-newsletter{
        margin-top: 2%;
      }
      .footer-heading{ text-align:left; }
      .footer-newsletter{ max-width: 100%; }
      .donation-card__bg{ width: 50%; opacity:.14; }
  .steps, .donation-form{ width: 92%; }
  .donation-badge{ left: 8%; }
  .wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
   /* bananer */
    .banner-content h1 {
    font-size: 2rem;
  }

  .banner-content p {
    font-size: 1rem;
  }
  .center-media {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-top: -40px;
    display: flex;
    justify-content: center;
  }
    .pay-grid{ grid-template-columns:1fr; }
      .bank-layout{
        grid-template-columns:1fr;
      }
      .bank-hands{
        display:none;
      }
      .bank-menu-btn{
        padding:4% 5%;
      }
      .container-fluid-line{
        display: none;
      }
      .hero-center{
        display: none;
      }
}
/* laptops */
@media (min-width: 992px) and (max-width: 1199px) {
  /* laptops */
}
 /* desktops */
@media (min-width: 1200px) {
  /* desktops */
}