*{margin:0;padding:0;box-sizing:border-box}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  background: #eef1e9;
}

html {
    scroll-behavior: smooth;
}

/* Target sections */
#story,
#beneficiary,
#impact,
#progress {
    scroll-margin-top: 90px; /* header ki height ke according adjust karo */
}

.assam-banner{
  position:relative;
  width:100%;
  height:550px;
  overflow:hidden;
  color:#fff;
  background: radial-gradient(circle at 22% 35%, rgba(81, 148, 66, .35), transparent 32%), radial-gradient(circle at 78% 75%, rgba(239, 197, 72, .13), transparent 30%), linear-gradient(115deg, #519442 0%, #2c7e1a 52%, #519430 100%);
}

/* subtle texture */
.assam-banner:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:18px 18px;
  pointer-events:none;
}

.banner-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1500px;
  height:100%;
  margin:auto;
  display:grid;
  grid-template-columns:48% 52%;
}

/* LEFT */
.banner-copy{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 40px 40px 7%;
}

.banner-copy:after{
  content:"";
  position:absolute;
  left:4%;
  top:15%;
  width:2px;
  height:70%;
  background:linear-gradient(transparent,#123d31,transparent);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  padding:7px 13px;
  margin-bottom:17px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:30px;
  background:rgba(255,255,255,.07);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.7px;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#123d31;
  box-shadow:0 0 13px rgba(239,197,72,.8);
}

.hero-title{
  max-width:650px;
  font-size:clamp(43px,4.5vw,68px);
  line-height:.9;
  letter-spacing:-3.5px;
  font-weight:850;
  margin-bottom:17px;
}

.hero-title .line1{
  display:block;
  color:#fff;
}

.hero-title .line2{
  display:block;
  color:#123d31;
  font-style:italic;
  padding-left:0px;
}

.hero-title .line3{
  display:block;
  color:#fff;
  font-size:.67em;
  letter-spacing:-1.5px;
  padding-left:0px;
  margin-top:5px;
}

.hero-title .line4{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:.30em;
  line-height:1.4;
  letter-spacing:1.8px;
  text-transform:uppercase;
  padding-left:0px;
  margin-top:11px;
  font-style:normal;
}

.description{
  max-width:525px;
  padding-left:0px;
  margin-bottom:17px;
  color:#fff;
  font-size:14px;
  line-height:1.5;
}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-left:0px;
  margin-bottom:19px;
}

.badge{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:4px;
  background:rgba(255,255,255,.08);
  color:#f4f4f4;
  font-size:12px;
  letter-spacing:.45px;
}

.actions{
  display:flex;
  align-items:center;
  gap:17px;
  margin-left:0px;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:15px;
  padding:12px 18px 12px 21px;
  background:#123d31;
  color:#fff;
  text-decoration:none;
  border-radius:5px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.7px;
  transition:.3s ease;
}

.cta span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#519442;
  color:#fff;
}

.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.phase{
  color:rgba(255,255,255,.45);
  font-size:14px;
  line-height:1.5;
  letter-spacing:1.3px;
  text-transform:uppercase;
}

/* RIGHT VISUAL */
.gallery{
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:13px;
  left:23px;
  margin-right:-34px;
}

.column{
  width:45%;
  height:111%;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}

.column.one{transform:rotate(5deg)}
.column.two{transform:rotate(5deg)}

.track{
  display:flex;
  flex-direction:column;
  gap:13px;
  margin-top:-80px;
}

.card{
  height:205px;
  width:100%;
  overflow:hidden;
  flex-shrink:0;
  border-radius:6px;
  position:relative;
  box-shadow:0 13px 28px rgba(0,0,0,.27);
}

.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.03);
  transition:transform .6s ease;
}

.card:hover img{transform:scale(1.08)}

.card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.25));
}

.gallery:before{
  content:"";
  position:absolute;
  z-index:10;
  top:-28px;
  left:0;
  width:100%;
  height:92px;
  background:linear-gradient(to bottom,#0a392f 0%,rgba(10,57,47,.75) 35%,transparent);
  transform:rotate(5deg);
}

.vertical-text{
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:8px;
  color:rgba(255,255,255,.55);
  z-index:20;
}

/* TABLET */
@media(max-width:1000px){
  .banner-inner{grid-template-columns:52% 48%}
  .banner-copy{padding-left:6%}
  .hero-title{font-size:46px}
  .description{font-size:13px}
  .gallery{gap:9px;margin-right:-20px}
  .column{width:44%;height:116%}
  .column.one{transform:rotate(-3deg)}
  .column.two{transform:rotate(3deg)}
  .track{gap:9px;margin-top:-60px}
  .card{height:180px}
  .vertical-text{display:none}
}

/* MOBILE */
@media(max-width:700px){
  .assam-banner{
    height:auto;
    min-height:760px;
  }

  .banner-inner{
    display:flex;
    flex-direction:column;
  }

  .banner-copy{
    min-height:455px;
    padding:35px 22px 23px;
  }

  .banner-copy:after{
    left:13px;
    top:42px;
    height:355px;
  }

  .eyebrow{
    font-size:7.5px;
    padding:6px 10px;
    margin-bottom:16px;
  }

  .hero-title{
    font-size:40px;
    letter-spacing:-2.5px;
    line-height:.91;
  }

  .hero-title .line2{padding-left:18px}
  .hero-title .line3{padding-left:34px;font-size:.66em}
  .hero-title .line4{
    padding-left:36px;
    font-size:7px;
    letter-spacing:1.3px;
  }

  .description{
    padding-left:22px;
    font-size:11.5px;
    line-height:1.5;
    margin-top:2px;
  }

  .badges{
    margin-left:22px;
    gap:5px;
  }

  .badge{
    font-size:7px;
    padding:6px 7px;
  }

  .actions{margin-left:22px}
  .phase{display:none}

  .gallery{
    height:315px;
    width:calc(100% + 35px);
    margin-right:-35px;
    left:0;
    gap:7px;
  }

  .column{
    width:37%;
    height:125%;
  }

  .column.one{
    width:34%;
    transform:rotate(-3deg);
  }

  .column.two{
    width:38%;
    transform:rotate(3deg);
  }

  .track{
    gap:7px;
    margin-top:-52px;
  }

  .card{
    height:143px;
    border-radius:4px;
  }
}

/* SMALL MOBILE */
@media(max-width:420px){
  .assam-banner{min-height:735px}
  .banner-copy{min-height:425px;padding-top:29px}
  .hero-title{font-size:35px}
  .description{font-size:10.5px}
  .gallery{
    height:300px;
    width:calc(100% + 30px);
    margin-right:-30px;
    gap:6px;
  }
  .column.one{width:50%}
  .column.two{width:50%}
  .track{gap:6px;margin-top:-45px}
  .card{height:137px}
}

/* =========================================
   ASSAM CAMPAIGN STORY — MODERN UI
========================================= */

.assam-story-modern{
  width:100%;
  background:#f7f8f3;
  color:#559742;
  padding:50px 5%;
  overflow:hidden;
}

.assam-story-container{
  max-width:1500px;
  margin:auto;
}


/* =========================================
   HEADER
========================================= */

.story-header{
  display:grid;
  grid-template-columns:1fr 330px;
  align-items:end;
  gap:60px;
  padding-bottom:20px;
}

.story-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px;
  color:#7b8982;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
}

.story-eyebrow i{
  color:#183e31;
  font-size:13px;
}

.story-title-wrap h2{
  margin:0;
  font-size:clamp(40px,6vw,40px);
  line-height:50px;
  font-weight:900;
}

.story-title-wrap h2 span{
  color:#123d31;
  font-style:italic;
}


/* =========================================
   STAT
========================================= */

.story-big-stat{
  position:relative;
  padding:10px 0 5px 30px;
  border-left:3px solid #183e31;
}

.story-big-stat strong{
  display:block;
  font-size:50px;
  line-height:.72;
  font-weight:900;
}

.story-big-stat span{
  display:block;
  margin-top:25px;
  color:#123d31;
  font-size:9px;
  font-weight:900;
  letter-spacing:3px;
}

.story-big-stat small{
  display:block;
  margin-top:7px;
  color:#75837c;
  font-size:16px;
}


/* =========================================
   MAIN CONTENT
========================================= */

.story-main{
  display:grid;
  grid-template-columns:1fr;
  gap:55px;
  padding-top:30px;
}

.story-side{
  position:relative;
  min-height:650px;
}

.story-side-line{
  position:absolute;
  left:18px;
  top:0;
  width:1px;
  height:100%;
  background:linear-gradient(
    to bottom,
    #123d31,
    rgba(18,61,49,.1)
  );
}

.vertical-assam{
  position:absolute;
  left:7px;
  top:35px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#c7cdc8;
  font-size:11px;
  font-weight:900;
  letter-spacing:5px;
}

.story-side > i{
  position:absolute;
  bottom:5px;
  left:11px;
  color:#123d31;
  font-size:14px;
}


/* =========================================
   TEXT
========================================= */


.story-opening{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  margin-bottom:0px;
}

.story-dropcap{
  display:block;
  color:#123d31;
  font-size:92px;
  line-height:.75;
  font-weight:900;
  font-family:Georgia,serif;
}

.story-text p{
  margin:0 0 28px;
  color:#52655d;
  font-size:15px;
  line-height:1.85;
}

.story-text p strong{
  color:#123d31;
  font-weight:800;
}


/* =========================================
   CALLOUT
========================================= */

.story-callout{
  display:flex;
  align-items:center;
  gap:25px;
  margin:38px 0;
  padding:25px 30px;
  border-radius:12px;
  background:#519442;
  box-shadow:0 18px 45px rgba(18,61,49,.13);
}

.callout-icon{
  width:58px;
  height:58px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#123d31;
  color:#519442;
  font-size:21px;
}

.callout-content > span{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.8px;
}

.callout-content > strong{
  display:block;
  color:#fff;
  font-size:20px;
  line-height:1.2;
}

.callout-content p{
  margin:7px 0 0;
  color:rgba(255,255,255,.65);
  font-size:16px;
  line-height:1.5;
}


/* =========================================
   HELP SECTION
========================================= */

.story-help{
  margin-top:45px;
  padding-top:30px;
  border-top:1px solid rgba(18,61,49,.12);
}

.help-heading{
  margin-bottom:18px;
}

.help-heading span{
  color:#7b8982;
  font-size:15px;
  font-weight:900;
  letter-spacing:2px;
}

.help-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.help-item{
  display:flex;
  align-items:center;
  gap:15px;
  min-height:100px;
  padding:18px;
  border:1px solid rgba(18,61,49,.1);
  border-radius:9px;
  background:#fff;
  transition:.3s ease;
}

.help-item:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 30px rgba(18,61,49,.08);
}

.help-icon{
  width:43px;
  height:43px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf0e8;
  color:#123d31;
  font-size:16px;
}

.help-item small{
  display:block;
  margin-bottom:5px;
  color:#b1b9b4;
  font-size:8px;
  font-weight:800;
}

.help-item strong{
  display:block;
  color:#123d31;
  font-size:17px;
  line-height:1.3;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

  .assam-story-modern{
    padding:80px 6%;
  }

  .story-header{
    grid-template-columns:1fr 240px;
    gap:35px;
  }

  .story-title-wrap h2{
    font-size:55px;
    letter-spacing:-3px;
  }

  .story-big-stat strong{
    font-size:75px;
  }

  .story-main{
    grid-template-columns:70px 1fr;
    gap:30px;
  }

  .story-text p{
    font-size:14px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .assam-story-modern{
    padding:60px 20px;
  }

  .story-header{
    display:block;
    padding-bottom:40px;
  }

  .story-eyebrow{
    font-size:8px;
    letter-spacing:1.6px;
    margin-bottom:17px;
  }

  .story-title-wrap h2{
    font-size:41px;
    letter-spacing:-2.5px;
  }

  .story-big-stat{
    margin-top:35px;
    padding:20px 0 0;
    border-left:0;
    border-top:1px solid rgba(18,61,49,.12);
  }

  .story-big-stat strong{
    font-size:70px;
    letter-spacing:-5px;
  }

  .story-big-stat span{
    margin-top:18px;
    font-size:8px;
  }

  .story-main{
    display:block;
    padding-top:45px;
  }

  .story-side{
    min-height:auto;
    height:30px;
    margin-bottom:25px;
  }

  .story-side-line{
    left:0;
    top:5px;
    width:100%;
    height:1px;
    background:linear-gradient(
      to right,
      #123d31,
      rgba(18,61,49,.08)
    );
  }

  .vertical-assam{
    left:0;
    top:-2px;
    padding-right:10px;
    background:#f7f8f3;
    writing-mode:initial;
    transform:none;
    font-size:8px;
    letter-spacing:3px;
  }

  .story-side > i{
    display:none;
  }

  .story-opening{
    grid-template-columns:45px 1fr;
    gap:8px;
  }

  .story-dropcap{
    font-size:65px;
  }

  .story-text p{
    font-size:12px;
    line-height:1.7;
    margin-bottom:22px;
  }

  .story-callout{
    gap:15px;
    padding:20px;
    margin:30px 0;
  }

  .callout-icon{
    width:45px;
    height:45px;
    font-size:17px;
  }

  .callout-content > strong{
    font-size:16px;
  }

  .callout-content p{
    font-size:16px;
  }

  .help-grid{
    grid-template-columns:1fr;
  }

  .help-item{
    min-height:72px;
    padding:13px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:420px){

  .assam-story-modern{
    padding:50px 17px;
  }

  .story-title-wrap h2{
    font-size:35px;
  }

  .story-big-stat strong{
    font-size:62px;
  }

  .story-text p{
    font-size:11.5px;
  }

}

/* =========================================
   BENEFICIARY SNAPSHOT
========================================= */

.beneficiary-snapshot{
  position:relative;
  width:100%;
  padding:50px 5%;
  background:#519442;
  color:#fff;
  overflow:hidden;
}





.snapshot-wrap{
  position:relative;
  z-index:2;
  max-width:1500px;
  margin:auto;
}


/* =========================================
   HEADER
========================================= */

.snapshot-header{
  display:grid;
  grid-template-columns:1fr 300px;
  align-items:end;
  gap:50px;
  padding-bottom:20px;
}

.snapshot-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:2.2px;
}

.snapshot-kicker i{
  color:#fff;
}

.snapshot-header h2{
  margin: 0;
    font-size: clamp(40px, 6vw, 40px);
    line-height: 50px;
    font-weight: 900;
}

.snapshot-header h2 em{
  color:#fff;
  font-style:italic;
}

.snapshot-phase{
  padding:20px 0 5px 25px;
  border-left:2px solid #fff;
}

.snapshot-phase span{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

.snapshot-phase strong{
  display:block;
  color:#fff;
  font-size:34px;
  line-height:1;
  letter-spacing:-1px;
}

.snapshot-phase small{
  display:block;
  margin-top:11px;
  color:#fff;
  font-size:10px;
}


/* =========================================
   MAIN
========================================= */

.snapshot-main{
  display:grid;
  grid-template-columns:38% 62%;
  padding:35px 0;
  /*border-bottom:1px solid rgba(255,255,255,.12);*/
}

.snapshot-students{
  position:relative;
  padding:10px 50px 10px 0;
  border-right:1px solid rgba(255,255,255,.12);
}

.snapshot-students > span{
  display:block;
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:2px;
}

.snapshot-students > strong{
  display:block;
  margin:20px 0 5px;
  color:#fff;
  font-size:clamp(100px,11vw,160px);
  line-height:.75;
  font-weight:900;
}

.student-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  color:#fff;
  font-size:16px;
}

.student-line i{
  color:#fff;
}


/* =========================================
   DETAILS
========================================= */

.snapshot-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding-left:50px;
}

.snapshot-detail{
  display:flex;
  align-items:center;
  gap:15px;
  min-height:105px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.snapshot-detail:nth-last-child(-n+2){
  border-bottom:0;
}

.detail-icon{
  width:50px;
  height:50px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border:1px solid #fff;
  border-radius:50%;
  color:#fff;
  font-size:18px;
}

.snapshot-detail small{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.5px;
}

.snapshot-detail strong{
  display:block;
  color:rgba(255,255,255,.9);
  font-size:16px;
  line-height:1.4;
  font-weight:500;
}


/* =========================================
   PHOTO GALLERY
========================================= */

.snapshot-gallery{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  grid-template-rows:190px 190px;
  gap:10px;
  padding-top:45px;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:7px;
  background:#0c2e25;
}

.gallery-large{
  grid-row:span 2;
}

.gallery-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  cursor:pointer;
  transition:
    transform .7s ease,
    filter .5s ease;
}

.gallery-item:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    transparent 45%,
    rgba(0,0,0,.45)
  );
  pointer-events:none;
}

.gallery-item:hover img{
  transform:scale(1.07);
  filter:saturate(1.1);
}

.gallery-item button{
  position:absolute;
  z-index:3;
  right:13px;
  bottom:13px;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:rgba(18,61,49,.7);
  backdrop-filter:blur(8px);
  color:#fff;
  cursor:pointer;
  transition:.3s ease;
}

.gallery-item button:hover{
  background:#123d31;
  color:#123d31;
  transform:scale(1.08);
}


/* =========================================
   LIGHTBOX
========================================= */

.snapshot-lightbox{
  position:fixed;
  z-index:9999;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:rgba(3,19,15,.94);
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
}

.snapshot-lightbox.active{
  opacity:1;
  visibility:visible;
}

.snapshot-lightbox img{
  max-width:90vw;
  max-height:88vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 25px 80px rgba(0,0,0,.5);
  transform:scale(.94);
  transition:.35s ease;
}

.snapshot-lightbox.active img{
  transform:scale(1);
}

.lightbox-close{
  position:absolute;
  top:25px;
  right:30px;
  width:45px;
  height:45px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:17px;
  cursor:pointer;
}

.lightbox-close:hover{
  background:#123d31;
  color:#123d31;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

  .beneficiary-snapshot{
    padding:80px 6%;
  }

  .snapshot-header{
    grid-template-columns:1fr 230px;
  }

  .snapshot-main{
    grid-template-columns:35% 65%;
  }

  .snapshot-students{
    padding-right:30px;
  }

  .snapshot-students > strong{
    font-size:105px;
  }

  .snapshot-details{
    padding-left:30px;
  }

  .snapshot-detail{
    padding:15px 10px;
  }

  .snapshot-gallery{
    grid-template-rows:160px 160px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .beneficiary-snapshot{
    padding:65px 20px;
  }

  .snapshot-header{
    display:block;
    padding-bottom:40px;
  }

  .snapshot-kicker{
    font-size:8px;
    letter-spacing:1.6px;
  }

  .snapshot-header h2{
    font-size:42px;
    letter-spacing:-2.5px;
  }

  .snapshot-phase{
    margin-top:35px;
    padding:18px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .snapshot-main{
    display:block;
    padding:40px 0;
  }

  .snapshot-students{
    padding:0 0 35px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .snapshot-students > strong{
    margin-top:18px;
    font-size:95px;
    letter-spacing:-7px;
  }

  .snapshot-details{
    grid-template-columns:1fr;
    padding:20px 0 0;
  }

  .snapshot-detail{
    min-height:85px;
    padding:13px 0;
  }

  .snapshot-detail:nth-last-child(-n+2){
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .snapshot-detail:last-child{
    border-bottom:0;
  }

  .snapshot-gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:180px 130px 130px;
    gap:7px;
    padding-top:30px;
  }

  .gallery-large{
    grid-column:span 2;
    grid-row:span 1;
  }

  .gallery-item button{
    width:32px;
    height:32px;
    right:9px;
    bottom:9px;
    font-size:11px;
  }

  .snapshot-lightbox{
    padding:20px;
  }

  .snapshot-lightbox img{
    max-width:96vw;
    max-height:80vh;
  }

  .lightbox-close{
    top:15px;
    right:15px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:420px){

  .beneficiary-snapshot{
    padding:50px 17px;
  }

  .snapshot-header h2{
    font-size:35px;
  }

  .snapshot-students > strong{
    font-size:80px;
  }

  .snapshot-detail strong{
    font-size:11px;
  }

  .snapshot-gallery{
    grid-template-rows:155px 115px 115px;
  }

}

/* =========================================
   DONATION IMPACT V2
========================================= */

.donation-impact-v2{
  width:100%;
  padding:50px 5%;
  background:#f4f6f0;
  color:#519442;
  overflow:hidden;
}

.di-container{
  max-width:1450px;
  margin:auto;
}


/* =========================================
   HEADER
========================================= */

.di-heading{
  margin-bottom:55px;
}

.di-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:#89948e;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
}

.di-eyebrow i{
  color:#123d31;
}

.di-heading h2{
 margin: 0;
    font-size: clamp(40px, 6vw, 40px);
    line-height: 50px;
    font-weight: 900;
}

.di-heading h2 em{
  color:#123d31;
  font-style:italic;
}


/* =========================================
   CARD GRID
========================================= */

.di-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}


/* =========================================
   NORMAL CARD
========================================= */

.di-card{
  position:relative;
  min-height:300px;
  padding:27px;
  border:1px solid rgba(18,61,49,.1);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.di-card:hover{
  transform:translateY(-7px);
  border-color:rgba(18,61,49,.2);
  box-shadow:0 25px 50px rgba(18,61,49,.1);
}


/* subtle background shape */

.di-card:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-75px;
  bottom:-75px;
  border-radius:50%;
  background:#f0f3ec;
  transition:.4s ease;
}

.di-card:hover:after{
  transform:scale(1.35);
}


/* =========================================
   CARD TOP
========================================= */

.di-card-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.di-number{
  color:#a2aaa5;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.5px;
}

.di-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#edf1e9;
  color:#123d31;
  font-size:21px;
  transition:.3s ease;
}

.di-card:hover .di-icon{
  background:#123d31;
  color:#559742;
}


/* =========================================
   AMOUNT
========================================= */

.di-amount{
  position:relative;
  z-index:2;
  margin-top:35px;
  color:#123d31;
  font-size:39px;
  line-height:1;
  font-weight:900;
}


/* =========================================
   DIVIDER
========================================= */

.di-divider{
  position:relative;
  z-index:2;
  width:38px;
  height:2px;
  margin:25px 0 16px;
  background:#123d31;
}


/* =========================================
   IMPACT
========================================= */

.di-impact-label{
  position:relative;
  z-index:2;
  color:#9aa49f;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.7px;
}

.di-card h3{
  position:relative;
  z-index:2;
  margin:8px 0 0;
  color:#123d31;
  font-size:18px;
  line-height:1.35;
  font-weight:700;
}


/* =========================================
   CORNER ICON
========================================= */

.di-corner{
  position:absolute;
  z-index:3;
  right:25px;
  bottom:25px;
  color:#c4cbc6;
  font-size:12px;
  transition:.3s ease;
}

.di-card:hover .di-corner{
  color:#123d31;
  transform:translate(3px,-3px);
}


/* =========================================
   FEATURED ₹697
========================================= */

.di-featured{
  background:#123d31;
  border-color:#123d31;
  color:#fff;
  transform:translateY(-12px);
  box-shadow:0 25px 55px rgba(18,61,49,.18);
}

.di-featured:hover{
  transform:translateY(-18px);
}

.di-featured:after{
  background:rgba(239,197,72,.05);
}

.di-featured .di-number{
  color:rgba(255,255,255,.35);
}

.di-featured .di-icon{
  background: #559742;
    color: #183e31;
}

.di-featured .di-amount{
  color:#519442;
}

.di-featured .di-divider{
  background:#123d31;
}

.di-featured .di-impact-label{
  color:rgba(255,255,255,.4);
}

.di-featured h3{
  color:#fff;
}

.di-feature-tag{
  position:absolute;
  top:20px;
  left:27px;
  padding:5px 9px;
  border-radius:20px;
  background:#519442;
  color:#123d31;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.4px;
}

.di-featured .di-card-top{
  margin-top:25px;
}


/* =========================================
   KIT ICONS
========================================= */

.di-kit-icons{
  position:absolute;
  z-index:2;
  right:27px;
  bottom:27px;
  display:flex;
  gap:7px;
}

.di-kit-icons i{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  color:#519442;
  font-size:11px;
}


/* =========================================
   SCHOOL CARD
========================================= */

.di-school-card{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:75px 1fr 160px;
  align-items:center;
  gap:25px;
  min-height:155px;
  padding:28px 32px;
  border-radius:14px;
  background:#519442;
  color:#fff;
  overflow:hidden;
  position:relative;
}

.di-school-card:before{
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  right:-100px;
  top:-170px;
  border:1px solid rgba(239,197,72,.15);
  border-radius:50%;
}

.di-school-icon{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#123d31;
  color:#559742;
  font-size:23px;
}

.di-school-content{
  position:relative;
  z-index:2;
}

.di-school-content > span{
  display:block;
  margin-bottom:6px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.8px;
}

.di-school-content h3{
  margin:0;
  color:#fff;
  font-size:34px;
  line-height:1;
  letter-spacing:-1px;
}

.di-school-content p{
  max-width:720px;
  margin:8px 0 0;
  color:#fff;
  font-size:15px;
  line-height:1.5;
}

.di-student-count{
  position:relative;
  z-index:2;
  padding-left:25px;
  border-left:1px solid #fff;
  text-align:right;
}

.di-student-count strong{
  display:block;
  color:#fff;
  font-size:43px;
  line-height:.8;
  letter-spacing:-3px;
}

.di-student-count span{
  display:block;
  margin-top:10px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.6px;
}


/* =========================================
   CUSTOM
========================================= */

.di-custom{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:14px;
  padding:18px 22px;
  border:1px dashed rgba(18,61,49,.2);
  border-radius:12px;
}

.di-custom-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:50%;
  background:#e7ece4;
  color:#123d31;
}

.di-custom-copy span{
  display:block;
  margin-bottom:5px;
  color:#183e31;
  font-size:14px;
  font-weight:800;
  letter-spacing:1.5px;
}

.di-custom-copy strong{
  font-size:16px;
}


/* =========================================
   QUICK SELECT
========================================= */

.di-quick{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.di-quick > span{
  margin-right:10px;
  color:#183e31;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.6px;
}

.di-quick-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.di-quick button{
  padding:9px 16px;
  border:1px solid rgba(18,61,49,.14);
  border-radius:30px;
  background:#fff;
  color:#123d31;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
}

.di-quick button:hover,
.di-quick button.active{
  background: #559742;
    border-color: #559742;
    color: #fff;
}


/* =========================================
   NOTE
========================================= */

.di-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  color:#183e31;
}

.di-note i{
  color:#123d31;
  font-size:15px;
}

.di-note span{
  font-size:15px;
  line-height:1.5;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

  .donation-impact-v2{
    padding:80px 6%;
  }

  .di-cards{
    grid-template-columns:repeat(2,1fr);
  }

  .di-featured{
    transform:none;
  }

  .di-featured:hover{
    transform:translateY(-7px);
  }

  .di-school-card{
    grid-column:1 / -1;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .donation-impact-v2{
    padding:65px 20px;
  }

  .di-heading{
    margin-bottom:40px;
  }

  .di-eyebrow{
    font-size:8px;
  }

  .di-heading h2{
    font-size:42px;
    letter-spacing:-2.5px;
  }

  .di-cards{
    grid-template-columns:1fr;
    gap:10px;
  }

  .di-card{
    min-height:260px;
    padding:23px;
  }

  .di-featured{
    transform:none;
  }

  .di-featured:hover{
    transform:translateY(-5px);
  }

  .di-school-card{
    grid-column:auto;
    display:block;
    padding:23px;
  }

  .di-school-icon{
    margin-bottom:20px;
  }

  .di-school-content h3{
    font-size:29px;
  }

  .di-student-count{
    margin-top:20px;
    padding:15px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:left;
  }

  .di-student-count strong{
    font-size:38px;
  }

  .di-custom-copy strong{
    font-size:10px;
    line-height:1.4;
  }

  .di-quick{
    display:block;
  }

  .di-quick > span{
    display:block;
    margin-bottom:12px;
  }

  .di-note{
    align-items:flex-start;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:420px){

  .donation-impact-v2{
    padding:50px 17px;
  }

  .di-heading h2{
    font-size:35px;
  }

  .di-card{
    min-height:240px;
  }

  .di-amount{
    font-size:35px;
  }

  .di-school-content h3{
    font-size:26px;
  }

  .di-quick button{
    padding:8px 12px;
    font-size:8px;
  }

}

/* =========================================
   CAMPAIGN PROGRESS
========================================= */

.campaign-progress{
  width:100%;
  padding:50px 5%;
  background:#519442;
  color:#fff;
  overflow:hidden;
}

.cp-container{
  max-width:1450px;
  margin:auto;
}


/* =========================================
   HEADER
========================================= */

.cp-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:45px;
  /*border-bottom:1px solid #183e31;*/
}

.cp-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
}

.cp-eyebrow i{
  color:#fff;
}

.cp-header h2{
 margin: 0;
    font-size: clamp(40px, 6vw, 40px);
    line-height: 50px;
    font-weight: 900;
}

.cp-header h2 em{
  color:#fff;
  font-style:italic;
}

.cp-live{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid #fff;
  border-radius:30px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.5px;
}

.live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 5px rgba(239,197,72,.1);
}


/* =========================================
   MAIN
========================================= */

.cp-main{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
  margin-top:25px;
}


/* =========================================
   PROGRESS CARD
========================================= */

.cp-progress-card{
  padding:35px;
  border: 1px solid rgb(24 62 49);
  border-radius:15px;
  background:rgba(255,255,255,.035);
}

.cp-progress-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.cp-progress-top span,
.cp-goal span{
  display:block;
  margin-bottom:8px;
  color:#183e31;
  font-size:15px;
  font-weight:800;
  letter-spacing:1.7px;
}

.cp-progress-top > div:first-child strong{
  display:block;
  color:#123d31;
  font-size:64px;
  line-height:.85;
}

.cp-percent{
  text-align:right;
}

.cp-percent strong{
  display:block;
  color:#183e31;
  font-size:38px;
  line-height:1;
  letter-spacing:-2px;
}

.cp-percent span{
  display:block;
  margin-top:6px;
}


/* =========================================
   BAR
========================================= */

.cp-bar-wrap{
  margin-top:45px;
}

.cp-bar{
  width:100%;
  height:14px;
  padding:3px;
  border-radius:30px;
  background:rgba(255,255,255,.08);
}

.cp-bar-fill{
  width:0%;
  height:100%;
  border-radius:30px;
  background:#123d31;
  transition:width 1.4s ease;
}

.cp-bar-labels{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
}

.cp-bar-labels span{
  color: rgb(24 62 49);
    font-size: 14px;
    font-weight: 700;
    /* letter-spacing: 1px;*/
}


/* =========================================
   GOAL
========================================= */

.cp-goal{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:38px;
  padding-top:25px;
  /*border-top:1px solid rgba(255,255,255,.1);*/
}

.cp-goal-icon{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: rgb(24 62 49);
    color: #5b9b49;
}

.cp-goal strong{
  color:#183e31;
  font-size:19px;
}


/* =========================================
   BENEFICIARY
========================================= */

.cp-beneficiary{
  position:relative;
  min-height:350px;
  padding:32px;
  border-radius:15px;
  background:#123d31;
  color:#fff;
  overflow:hidden;
}

.cp-beneficiary:after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-100px;
  bottom:-100px;
  border:1px solid rgba(18,61,49,.15);
  border-radius:50%;
}

.cp-school-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:40px;
  border-radius:13px;
  background:#fff;
  color:#123d31;
  font-size:20px;
}

.cp-beneficiary > span{
  display:block;
  font-size:15px;
  font-weight:800;
  letter-spacing:1.7px;
  opacity:.55;
}

.cp-beneficiary > strong{
  display:inline-block;
  margin-top:7px;
  font-size:70px;
  line-height:.8;
  letter-spacing:-5px;
}

.cp-beneficiary h3{
  display:inline-block;
  margin:0 0 0 8px;
  font-size:15px;
}

.cp-beneficiary p{
  position:relative;
  z-index:2;
  margin-top:15px;
  font-size:16px;
  line-height:1.55;
}

.cp-arrow{
  position:absolute;
  z-index:3;
  right:30px;
  top:30px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
 background: rgb(85 151 66);
}


/* =========================================
   TIMELINE
========================================= */

.cp-timeline{
  margin-top:14px;
  padding:28px 32px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.cp-date{
  display:flex;
  align-items:center;
  gap:14px;
}

.cp-date-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#fff;
  color:#123d31;
}

.cp-date span{
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.6px;
}

.cp-date strong{
  font-size:20px;
}


/* =========================================
   TIMELINE LINE
========================================= */

.cp-timeline-line{
  display:flex;
  align-items:center;
  margin:35px 80px 25px;
}

.cp-point{
  position:relative;
  width:13px;
  height:13px;
  flex-shrink:0;
  border:2px solid rgba(255,255,255,.25);
  border-radius:50%;
}

.cp-point.active{
  border-color:#fff;
  background:#fff;
}

.cp-point span{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  color:#fff;
  font-size:16px;
  font-weight:800;
  letter-spacing:1px;
}

.cp-line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.15);
}

.cp-line.dotted{
  border-top:1px dashed rgba(239,197,72,.35);
  background:transparent;
}


/* =========================================
   EXTENSION
========================================= */

.cp-extension{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-top:35px;
  color:#fff;
  font-size:16px;
}

.cp-extension i{
  color:#fff;
}




/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

  .campaign-progress{
    padding:80px 6%;
  }

  .cp-main{
    grid-template-columns:1fr;
  }

  .cp-beneficiary{
    min-height:280px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .campaign-progress{
    padding:65px 20px;
  }

  .cp-header{
    display:block;
    padding-bottom:35px;
  }

  .cp-eyebrow{
    font-size:8px;
  }

  .cp-header h2{
    font-size:42px;
    letter-spacing:-2.5px;
  }

  .cp-live{
    width:max-content;
    margin-top:20px;
  }

  .cp-progress-card{
    padding:23px;
  }

  .cp-progress-top > div:first-child strong{
    font-size:48px;
  }

  .cp-percent strong{
    font-size:30px;
  }

  .cp-beneficiary{
    min-height:270px;
    padding:25px;
  }

  .cp-school-icon{
    margin-bottom:25px;
  }

  .cp-beneficiary > strong{
    font-size:60px;
  }

  .cp-timeline{
    padding:23px;
  }

  .cp-timeline-line{
    margin:35px 15px 25px;
  }

 
  .cp-status-note{
    display:none;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:420px){

  .campaign-progress{
    padding:50px 17px;
  }

  .cp-header h2{
    font-size:35px;
  }

  .cp-progress-top{
    display:block;
  }

  .cp-percent{
    margin-top:20px;
    text-align:left;
  }

  .cp-bar-wrap{
    margin-top:30px;
  }

  .cp-beneficiary > strong{
    font-size:52px;
  }

  .cp-date strong{
    font-size:12px;
  }

}


/* =========================================
   STICKY CAMPAIGN FOOTER
========================================= */

.campaign-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;

  z-index:9999;

  width:100%;

  padding:13px 5%;

 background: rgba(81, 148, 66, 1);

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

  box-shadow:
    0 -8px 30px rgba(0,0,0,.12);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}


/* INNER */

.campaign-footer-inner{
  width:100%;
  max-width:1250px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;
}


/* =========================================
   BRAND
========================================= */

.campaign-footer-brand{
  display:flex;
  align-items:center;
  gap:11px;

  min-width:230px;
}

.campaign-footer-logo{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:10px;

  background:#fff;
  color:#559742;

  font-size:16px;
}

.campaign-footer-brand strong{
  display:block;

  color:#fff;

  font-size:17px;
  line-height:1.2;
}

.campaign-footer-brand span{
  display:block;

  margin-top:8px;

  color:#fff;

  font-size:13px;
}


/* =========================================
   CENTER DETAILS
========================================= */

.campaign-footer-center{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:25px;

  flex:1;
}

.campaign-footer-center span{
  display:flex;
  align-items:center;
  gap:6px;

  color:#fff;

  font-size:16px;
  font-weight:700;
}

.campaign-footer-center i{
  color:#fff;
  font-size:13px;
}


/* =========================================
   DONATE BUTTON
========================================= */

.campaign-footer-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:13px;

  min-width:135px;

  padding:8px 9px 8px 15px;

  border-radius:10px;

  background:#fff;
  color:#559742;

  text-decoration:none;

  font-size:16px;
  font-weight:700;

  transition:.3s ease;
}

.campaign-footer-btn i{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#559742;
  color:#fff;

  transition:.3s ease;
}

.campaign-footer-btn:hover{
  background:#fff;
}

.campaign-footer-btn:hover i{
  transform:translateX(3px);
}


/* =========================================
   TABLET
========================================= */

@media(max-width:850px){

  .campaign-footer{
    padding:11px 20px;
  }

  .campaign-footer-inner{
    gap:15px;
  }

  .campaign-footer-brand{
    min-width:auto;
  }

  .campaign-footer-center{
    gap:12px;
  }

  .campaign-footer-center span{
    font-size:6px;
  }

  .campaign-footer-btn{
    min-width:120px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

  .campaign-footer{
    padding:9px 12px;

    box-shadow:
      0 -5px 25px rgba(0,0,0,.18);
  }


  .campaign-footer-inner{
    display:flex;

    gap:10px;
  }


  /* Hide secondary details */

  .campaign-footer-center{
    display:none;
  }


  /* Brand */

  .campaign-footer-brand{
    flex:1;

    min-width:0;

    gap:8px;
  }

  .campaign-footer-logo{
    width:36px;
    height:36px;

    border-radius:9px;

    font-size:14px;
  }

  .campaign-footer-brand strong{
    font-size:12px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .campaign-footer-brand span{
    font-size:12px;

    white-space:nowrap;
  }


  /* Donate */

  .campaign-footer-btn{
    min-width:auto;

    padding:7px 7px 7px 12px;

    gap:8px;

    border-radius:9px;

    font-size:8px;
  }

  .campaign-footer-btn i{
    width:25px;
    height:25px;

    font-size:9px;
  }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media(max-width:360px){

  .campaign-footer-brand span{
    display:none;
  }

  .campaign-footer-brand strong{
    font-size:8px;
  }

  .campaign-footer-logo{
    width:33px;
    height:33px;
  }

  .campaign-footer-btn{
    padding-left:10px;
    gap:6px;
  }

}


.assam-banner [data-aos] {
  will-change: transform, opacity;
}

.assam-banner .card img {
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.assam-banner .card:hover img {
  transform: scale(1.08);
}

.assam-story-modern [data-aos] {
  will-change: transform, opacity;
}

.assam-story-modern .help-item {
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.assam-story-modern .help-item:hover {
  transform:translateY(-6px);
}

.assam-story-modern .callout-icon {
  transition:
    transform .5s ease;
}

.assam-story-modern .story-callout:hover .callout-icon {
  transform:rotate(-8deg) scale(1.08);
}

.beneficiary-snapshot [data-aos] {
  will-change: transform, opacity;
}

.snapshot-gallery .gallery-item {
  overflow:hidden;
}

.snapshot-gallery .gallery-item img {
  transition:
    transform .7s cubic-bezier(.22,1,.36,1),
    filter .5s ease;
}

.snapshot-gallery .gallery-item:hover img {
  transform:scale(1.06);
  filter:saturate(1.08);
}

.snapshot-gallery .gallery-item button {
  transition:
    transform .3s ease,
    opacity .3s ease;
}

.snapshot-gallery .gallery-item:hover button {
  transform:scale(1.08);
}

.donation-impact-v2 [data-aos] {
  will-change: transform, opacity;
}

.di-card {
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;
}

.di-card:hover {
  transform:translateY(-8px);
}

.di-featured {
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease;
}

.di-featured:hover {
  transform:translateY(-10px) scale(1.015);
}

.di-icon {
  transition:
    transform .4s ease;
}

.di-card:hover .di-icon {
  transform:scale(1.1) rotate(-5deg);
}

.di-kit-icons i {
  transition:
    transform .3s ease;
}

.di-featured:hover .di-kit-icons i:nth-child(1) {
  transform:translateY(-4px);
}

.di-featured:hover .di-kit-icons i:nth-child(2) {
  transform:translateY(-6px);
}

.di-featured:hover .di-kit-icons i:nth-child(3) {
  transform:translateY(-4px);
}

.di-quick-buttons button {
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.di-quick-buttons button:hover {
  transform:translateY(-3px);
}

.campaign-progress [data-aos] {
  will-change: transform, opacity;
}

/* Live indicator */
.cp-live {
  transition: transform .3s ease;
}

.cp-live:hover {
  transform: translateY(-3px);
}

.live-dot {
  animation: cpLivePulse 1.8s infinite;
}

@keyframes cpLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,0,.25);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(0,0,0,0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
}

/* Progress card */
.cp-progress-card,
.cp-beneficiary {
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;
}

.cp-progress-card:hover {
  transform: translateY(-6px);
}

.cp-beneficiary:hover {
  transform: translateY(-6px);
}

/* Goal icon */
.cp-goal-icon,
.cp-school-icon {
  transition:
    transform .45s ease;
}

.cp-progress-card:hover .cp-goal-icon {
  transform: rotate(8deg) scale(1.08);
}

.cp-beneficiary:hover .cp-school-icon {
  transform: scale(1.1);
}

/* Beneficiary arrow */
.cp-arrow {
  transition: transform .35s ease;
}

.cp-beneficiary:hover .cp-arrow {
  transform: translateX(7px);
}

/* Timeline */
.cp-point {
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.cp-point:hover {
  transform: scale(1.12);
}


/* =========================
   HEADER
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.header-inner {
  width: min(1400px, 98%);
  min-height: 65px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}


/* LOGO */

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo img {
  display: block;
  width: auto;
  max-width: 170px;
  max-height: 52px;
  object-fit: contain;
}


/* NAV */

.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-left: auto;
}

.header-nav a {
  position: relative;

  color: #222;
  text-decoration: none;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;

  transition: color .3s ease;
}

.header-nav a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -7px;

  width: 0;
  height: 2px;

  background: #123d31;

  transition: width .3s ease;
}

.header-nav a:hover {
  color: #123d31;
}

.header-nav a:hover::after {
  width: 100%;
}


/* DONATE BUTTON */

.header-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 13px 20px;

  color: #fff;
  background: #519442;

  border-radius: 10px;
  text-decoration: none;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;

  box-shadow: 0 8px 22px rgba(22,132,71,.20);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.header-donate i:first-child {
  font-size: 12px;
}

.header-donate i:last-child {
  font-size: 11px;

  transition: transform .3s ease;
}

.header-donate:hover {
  color: #fff;
  background: #116b39;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(22,132,71,.28);
}

.header-donate:hover i:last-child {
  transform: translateX(4px);
}


/* MOBILE MENU BUTTON */

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  border: 0;
  border-radius: 50%;

  background: #f1f5f2;
  color: #123d31;

  font-size: 18px;

  cursor: pointer;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

  .header-inner {
    min-height: 70px;
  }

  .header-nav {
    gap: 18px;
  }

  .header-nav a {
    font-size: 11px;
  }

  .site-logo img {
    max-width: 145px;
  }

  .header-donate {
    padding: 11px 16px;
    font-size: 11px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .header-inner {
    width: 90%;
    min-height: 66px;
    gap: 12px;
  }

  .site-logo img {
    max-width: 135px;
    max-height: 44px;
  }

  /* Hide desktop navigation */
  .header-nav {
    display: none;
  }

  /* Keep Donate visible */
  .header-donate {
    margin-left: auto;
    padding: 10px 15px;

    font-size: 11px;
    gap: 7px;
  }

  .header-donate i:last-child {
    display: none;
  }

  /* Mobile menu */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

}


/* SMALL MOBILE */

@media (max-width: 430px) {

  .header-inner {
    width: 92%;
  }

  .site-logo img {
    max-width: 115px;
  }

  .header-donate {
    padding: 9px 13px;
  }

  .header-donate i:first-child {
    display: none;
  }

  .header-donate span {
    font-size: 10px;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }

}

@media (max-width: 768px) {

  .header-nav.mobile-open {
    display: flex;

    position: absolute;
    top: 66px;
    left: 5%;
    right: 5%;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    padding: 12px;

    background: rgba(255,255,255,.98);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;

    box-shadow: 0 15px 40px rgba(0,0,0,.12);

    animation: headerMenu .3s ease;
  }

  .header-nav.mobile-open a {
    padding: 14px 12px;
    font-size: 12px;
    border-bottom: 1px solid #eee;
  }

  .header-nav.mobile-open a:last-child {
    border-bottom: 0;
  }

  .header-nav.mobile-open a::after {
    display: none;
  }

}

@keyframes headerMenu {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   MAIN SECTION
========================= */

.gallery-section-greensole {
    width: 100%;
    height: 590px;
    margin: auto;
    position: relative;
    overflow: hidden;
}

/* =========================
   CENTER CONTENT
========================= */

.gallery-content {
    position: absolute;
    width: 500px;
    max-width: 42%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.gallery-content h2 {
    font-size: 27px;
    line-height: 1.32;
    font-weight: 700;
    color: #292929;
}

.gallery-content .number {
    color: #e52b2b;
    font-weight: 800;
}

.gallery-content .green {
    color: #159447;
}

.gallery-content p {
    margin-top: 14px;
    color: #777;
    font-size: 14px;
}


/* =========================
   IMAGES
========================= */

.gallery-item {
    position: absolute;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;

    box-shadow:
        0 7px 22px rgba(0,0,0,.12);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;

    will-change: transform;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition:
        transform .6s ease;
}


/* =========================
   HOVER
========================= */

.gallery-item:hover {
    z-index: 30;

    box-shadow:
        0 16px 35px rgba(0,0,0,.20);

    transform:
        translate3d(var(--mx), var(--my), 0)
        scale(1.06)
        rotate(1deg);
}

.gallery-item:hover img {
    transform: scale(1.08);
}


/* =========================
   8 IMAGE POSITIONS
========================= */

/* Top Left */

.item-1 {
    width: 135px;
    height: 135px;
    left: 7%;
    top: 10%;
}

/* Top Middle Left */

.item-2 {
    width: 180px;
    height: 180px;
    left: 36%;
    top: 1%;
}

/* Top Right */

.item-3 {
    width: 180px;
    height: 180px;
    right: 21%;
    top: 8%;
}

/* Middle Left */

.item-4 {
    width: 180px;
    height: 180px;
    left: 12%;
    bottom: 19%;
}

/* Bottom Middle */

.item-5 {
    width: 180px;
    height: 180px;
    left: 39%;
    bottom: 4%;
}

/* Middle Right */

.item-6 {
    width: 180px;
    height: 180px;
    right: 11%;
    bottom: 20%;
}

/* Small Floating Left */

.item-7 {
    width: 180px;
    height: 180px;
    left: 3%;
    bottom: 3%;
}

/* Small Floating Right */

.item-8 {
    width: 150px;
    height: 150px;
    right: 2%;
    bottom: 5%;
}


/* =========================
   LIGHTBOX
========================= */

.lightbox {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,.90);

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 9999;
    padding: 25px;
}

.lightbox.active {
    display: flex;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 85vh;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 15px 50px rgba(0,0,0,.5);
}


/* CLOSE */

.close {
    position: absolute;
    top: 20px;
    right: 25px;

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: #159447;
    color: #fff;

    font-size: 29px;
    cursor: pointer;
}


/* ARROWS */

.prev,
.next {
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: #159447;
    color: #fff;

    font-size: 28px;
    cursor: pointer;

    transition: .25s;
}

.prev {
    left: 25px;
}

.next {
    right: 25px;
}

.prev:hover,
.next:hover,
.close:hover {
    background: #0c7135;
}


/* =========================
   TABLET
========================= */

@media(max-width: 900px) {

    .gallery-section-greensole {
        height: 520px;
    }

    .gallery-content {
        max-width: 45%;
    }

    .gallery-content h2 {
        font-size: 22px;
    }

    .gallery-item {
        transform: scale(.85);
    }

    .item-1 {
        left: 3%;
    }

    .item-3 {
        right: 3%;
    }

    .item-4 {
        left: 4%;
    }

    .item-6 {
        right: 4%;
    }
}


/* =========================
   MOBILE
========================= */

@media(max-width: 600px) {

    .gallery-section-greensole {
        height: auto;
        padding: 35px 18px 45px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 14px;
    }

    .gallery-content {
        position: relative;

        width: 100%;
        max-width: 100%;

        left: auto;
        top: auto;

        transform: none;

        grid-column: 1 / -1;

        margin-bottom: 12px;
    }

    .gallery-content h2 {
        font-size: 21px;
        line-height: 1.3;
    }

    .gallery-content p {
        font-size: 13px;
    }

    .gallery-item,
    .item-1,
    .item-2,
    .item-3,
    .item-4,
    .item-5,
    .item-6,
    .item-7,
    .item-8 {

        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;
        height: 145px;

        transform: none !important;
    }

    .gallery-item:hover {
        transform: scale(1.03) !important;
    }

    .prev,
    .next {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }

    .close {
        right: 15px;
        top: 15px;
    }
}

/* ==============================
   CAMPAIGN GALLERY
================================ */

.campaign-gallery {
  overflow: hidden;
}

.cg-container {
  width: min(1380px, 99%);
  margin: auto;
}


/* HEADER */

.cg-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 45px;
}

.cg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #123d31;
}

.cg-kicker i {
  font-size: 13px;
}

.cg-header h2 {
  margin: 12px 0 0;

  font-size: clamp(38px, 5vw, 68px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 700;
  color: #17221b;
}

.cg-header h2 em {
  font-style: normal;
  color: #123d31;
}

.cg-count {
  padding: 10px 16px;

  border: 1px solid rgba(22,132,71,.25);
  border-radius: 50px;

  color: #123d31;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}


/* ==============================
   GALLERY GRID
================================ */

.cg-grid {
  display: grid;

  grid-template-columns: 1.45fr 1fr 1fr;
  grid-template-rows: 260px 260px;

  gap: 14px;
}


/* IMAGE */

.cg-item {
  position: relative;
  overflow: hidden;

  border-radius: 20px;

  background: #ddd;

  cursor: pointer;
}

.cg-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .8s cubic-bezier(.22,1,.36,1),
    filter .5s ease;
}


/* FEATURED */

.cg-featured {
  grid-row: span 2;
}


/* HOVER */

.cg-item::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0,0,0,.55)
    );

  opacity: 0;

  transition: opacity .4s ease;

  pointer-events: none;
}

.cg-item:hover::after {
  opacity: 1;
}

.cg-item:hover img {
  transform: scale(1.07);
}


/* OVERLAY */

.cg-overlay {
  position: absolute;

  left: 18px;
  right: 18px;
  bottom: 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 2;

  color: white;

  opacity: 0;
  transform: translateY(8px);

  transition:
    opacity .4s ease,
    transform .4s ease;
}

.cg-item:hover .cg-overlay {
  opacity: 1;
  transform: translateY(0);
}

.cg-overlay span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.cg-overlay i {
  width: 38px;
  height: 38px;

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

  border-radius: 50%;

  background: rgba(255,255,255,.95);
  color: #123d31;

  font-size: 12px;
}


/* ==============================
   LIGHTBOX
================================ */

.cg-lightbox {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(10,15,12,.94);

  backdrop-filter: blur(12px);
}

.cg-lightbox.active {
  display: flex;

  animation: galleryFade .3s ease;
}

.cg-lightbox-content {
  position: relative;

  max-width: 1100px;
  max-height: 85vh;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-lightbox-content img {
  max-width: 100%;
  max-height: 82vh;

  object-fit: contain;

  border-radius: 12px;

  box-shadow: 0 30px 80px rgba(0,0,0,.4);

  animation: galleryImage .4s ease;
}

.cg-close,
.cg-prev,
.cg-next {
  position: absolute;

  width: 48px;
  height: 48px;

  border: 0;
  border-radius: 50%;

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

  background: rgba(255,255,255,.12);
  color: white;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.cg-close:hover,
.cg-prev:hover,
.cg-next:hover {
  background: #123d31;
  transform: scale(1.08);
}

.cg-close {
  top: 25px;
  right: 30px;
}

.cg-prev {
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.cg-next {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.cg-prev:hover,
.cg-next:hover {
  transform: translateY(-50%) scale(1.08);
}


/* COUNTER */

.cg-lightbox-counter {
  position: absolute;

  left: 50%;
  bottom: -38px;

  transform: translateX(-50%);

  display: flex;
  gap: 8px;

  color: rgba(255,255,255,.7);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}


/* ANIMATION */

@keyframes galleryFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

@keyframes galleryImage {

  from {
    opacity: 0;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


/* ==============================
   TABLET
================================ */

@media (max-width: 900px) {

  .campaign-gallery {
    padding: 75px 0;
  }

  .cg-grid {
    grid-template-columns: 1fr 1fr;

    grid-template-rows:
      300px
      220px
      220px;
  }

  .cg-featured {
    grid-column: span 2;
    grid-row: auto;
  }

}


/* ==============================
   MOBILE
================================ */

@media (max-width: 600px) {

  .campaign-gallery {
    padding: 60px 0;
  }

  .cg-container {
    width: 92%;
  }

  .cg-header {
    align-items: flex-start;
    flex-direction: column;

    margin-bottom: 28px;
    gap: 18px;
  }

  .cg-header h2 {
    font-size: 40px;
  }

  .cg-grid {
    grid-template-columns: 1fr 1fr;

    grid-template-rows:
      240px
      180px
      180px;

    gap: 9px;
  }

  .cg-featured {
    grid-column: span 2;
  }

  .cg-item {
    border-radius: 13px;
  }

  /* Always show expand icon on mobile */

  .cg-item::after {
    opacity: 1;

    background:
      linear-gradient(
        180deg,
        transparent 50%,
        rgba(0,0,0,.4)
      );
  }

  .cg-overlay {
    opacity: 1;
    transform: none;

    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .cg-overlay i {
    width: 32px;
    height: 32px;
  }

  .cg-overlay span {
    font-size: 10px;
  }

  /* LIGHTBOX */

  .cg-lightbox {
    padding: 15px;
  }

  .cg-lightbox-content {
    width: 100%;
  }

  .cg-lightbox-content img {
    width: 100%;
    max-height: 75vh;

    border-radius: 8px;
  }

  .cg-close {
    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;
  }

  .cg-prev,
  .cg-next {
    top: auto;
    bottom: 25px;

    width: 42px;
    height: 42px;
  }

  .cg-prev {
    left: 25px;
  }

  .cg-next {
    right: 25px;
  }

  .cg-lightbox-counter {
    bottom: 39px;
  }

}



button,
input,
select {
  font-family: inherit;
}


/* =====================================================
   MAIN
===================================================== */

.donation-page {
  width: 100%;
  padding: 22px 0 40px;
}

.donation-wrap {
  width: min(1240px, 94%);
  margin: auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;

  align-items: start;
}


/* =====================================================
   LEFT SIDE
===================================================== */

.donation-left {
  width: 100%;
}


/* =====================================================
   FORM BOX
===================================================== */

.donation-box {
  width: 100%;

  background: #fff;

  border-radius: 30px;

  padding: 25px 25px;

  margin-bottom: 20px;

  border: 1px solid #183e317d;
}

.donation-box-title {
  font-size: 16px;
  font-weight: 600;

  color: #101010;

  margin-bottom: 19px;
}


/* =====================================================
   AMOUNT PRESETS
===================================================== */
.amount-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  margin-bottom: 12px;
}

.amount-option {
  position: relative;

  min-height: 72px;

  padding: 12px 8px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 6px;

  background: #fff;

  border: 1px solid #183e318f;
  border-radius: 10px;

  color: #222;

  cursor: pointer;

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.amount-option:hover {
  border-color: #123d31;

  transform: translateY(-2px);

  box-shadow:
    0 5px 15px rgba(0,0,0,.06);
}

.amount-option strong {
  font-size: 21px;
    font-weight: 700;
    color: #183e31;
}

.amount-option > span:not(.popular) {
  font-size: 12px;
  line-height: 1.35;

  text-align: center;

  color: #666;
}


/* ACTIVE */

.amount-option.active {
  border: 1.5px solid #123d31;

  background: #183e3103;
    box-shadow: 0 4px 14px rgb(24 62 49 / 0%);
}

.amount-option.active strong {
  color: #123d31;
}

.amount-option.active > span:not(.popular) {
  color: #555;
}


/* POPULAR */

.amount-option .popular {
  position: absolute;

  top: -9px;
  left: 50%;

  transform: translateX(-50%);

  padding: 2px 7px;

  border-radius: 20px;

  background: #123d31;

  color: #fff;

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;

  letter-spacing: .4px;
}


/* FULL SCHOOL */

.amount-school {
  grid-column: 1 / -1;

  min-height: 65px;

  flex-direction: row;

  justify-content: flex-start;

  gap: 18px;

  padding: 12px 18px;

  background:
    linear-gradient(
      90deg,
      #fff7f8,
      #fff
    );
}

.amount-school strong {
  min-width: 105px;

  font-size: 16px;
}

.amount-school > span:not(.popular) {
  text-align: left;

  font-size: 13px;
}


/* MOBILE */

@media (max-width: 600px) {

  .amount-options {
    grid-template-columns: repeat(2, 1fr);

    gap: 8px;
  }

  .amount-option {
    min-height: 78px;

    padding: 10px 6px;
  }

  .amount-option strong {
    font-size: 13px;
  }

  .amount-option > span:not(.popular) {
    font-size: 7.5px;
  }

  .amount-school {
    grid-column: 1 / -1;

    min-height: 70px;

    padding: 10px 12px;

    gap: 12px;
  }

  .amount-school strong {
    min-width: auto;

    font-size: 14px;
  }

  .amount-school > span:not(.popular) {
    font-size: 7.5px;
  }

}


/* SMALL MOBILE */

@media (max-width: 380px) {

  .amount-options {
    gap: 6px;
  }

  .amount-option {
    min-height: 74px;
  }

  .amount-option strong {
    font-size: 12px;
  }

  .amount-option > span:not(.popular) {
    font-size: 7px;
  }

  .amount-school {
    flex-direction: column;

    gap: 4px;

    text-align: center;
  }

  .amount-school > span:not(.popular) {
    text-align: center;
  }

}

/* =====================================================
   CUSTOM AMOUNT
===================================================== */

.custom-amount {
  height: 40px;

  display: flex;
  align-items: center;

  background: #fff;

  border: 1px solid #183e318f;
  border-radius: 10px;

  overflow: hidden;
}

.custom-amount span {
  padding-left: 10px;

  font-size: 18px;
  color: #555;
}

.custom-amount input {
  flex: 1;

  height: 100%;

  border: 0;
  outline: 0;

  padding: 0 8px;

  font-size: 16px;

  background: transparent;
}

.custom-amount input::placeholder {
  color: #aaa;
}


/* =====================================================
   TIP
===================================================== */

.custom-tip-box {
  display: none;

  align-items: center;
      width: 350px;
    height: 36px;
    border: 1px solid #183e319e;
    border-radius: 10px;

  background: #fff;
  overflow: hidden;
}

.custom-tip-box span {
  padding-left: 7px;
  font-size: 13px;
  color: #555;
}

.custom-tip-box input {
  width: 100%;
  height: 100%;

  border: 0;
  outline: 0;

  padding: 0 5px;

  font-size: 13px;
  background: transparent;
}

/* Remove number arrows */
.custom-tip-box input::-webkit-inner-spin-button,
.custom-tip-box input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-tip-box input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}



.tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 11px;

  font-size: 13px;

  font-weight: 600;
    color: #f85c5c;
}

.tip-left {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tip-select {
  border: 0;
  outline: 0;

  background: transparent;

  color: #123d31;

  font-size: 16px;

  cursor: pointer;
}

.tip-value {
  color: #444;
}


/* =====================================================
   CHECKBOX
===================================================== */

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 13px;
  
    margin-bottom: 13px;


  font-size: 15px;
  font-weight: 500;

  color: #333;

  cursor: pointer;
}

.checkbox-row input {
  appearance: none;

  width: 16px;
  height: 16px;

  border-radius: 2px;

  border: 1px solid #cfcfcf;

  background: #fff;

  position: relative;

  cursor: pointer;

  flex-shrink: 0;
}

.checkbox-row input:checked {
  background: #123d31;
  border-color: #123d31;
}

.checkbox-row input:checked::after {
  content: "✓";

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -52%);

  color: #fff;

  font-size: 10px;
  font-weight: bold;
}


/* =====================================================
   DETAILS
===================================================== */

.details-box {
  padding-top: 18px;
  padding-bottom: 17px;
}

.details-box .donation-box-title {
  margin-bottom: 18px;
}


/* =====================================================
   FIELD
===================================================== */

.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: block;

  margin-bottom: 11px;

  font-size: 14px;
  font-weight: 500;

  color: #272727;
}

.form-field label span {
  color: #123d31;
}

.form-input {
  width: 100%;
  height: 40px;

  border: 1px solid #183e318f;
  border-radius: 10px;

  outline: none;

  background: #fff;

  padding: 0 9px;

  font-size: 13px;

  color: #333;

  transition: .2s ease;
}

.form-input:focus {
  border-color: #123d31;

  box-shadow:
    0 0 0 2px rgba(237,57,76,.06);
}

.form-input::placeholder {
  color: #b9b9b9;
}


/* =====================================================
   PHONE
===================================================== */

.phone-box {
  width: 100%;
  height: 40px;

  display: flex;
  align-items: center;

  border: 1px solid #d7d7d7;
  border: 1px solid #183e318f;
    border-radius: 10px;

  background: #fff;

  overflow: hidden;
}

.phone-country {
  height: 100%;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 0 8px;

  border-right: 1px solid #eee;

  font-size: 14px;
}

.phone-box input {
  flex: 1;

  height: 100%;

  border: 0;
  outline: 0;

  padding: 0 8px;

  font-size: 13px;
}

.field-help {
  display: block;

  margin-top: 8px;

  font-size: 12px;

  color: #8d8d8d;
}

.field-help i {
  margin-right: 3px;
}


/* =====================================================
   DIVIDER
===================================================== */

.form-divider {
  width: 100%;
  height: 1px;

  background: #dedede;

  margin: 7px 0 8px;
}


/* =====================================================
   RIGHT SUMMARY
===================================================== */

.donation-summary {
  position: sticky;
  top: 18px;
}

.summary-card {
  background: #fff;

  border-radius: 30px;

  border: 1px solid #183e317d;

  overflow: hidden;

  box-shadow:
    0 5px 14px rgba(0,0,0,.10);
}

.summary-image {
  padding: 15px 15px 0;
}

.summary-image img {
  display: block;

  width: 100%;

  object-fit: cover;

  border-radius: 25px;
}

.summary-content {
  padding: 9px 25px 21px;
}


/* =====================================================
   CAMPAIGN TITLE
===================================================== */

.summary-campaign {
  font-size: 16px;
    font-weight: 600;
    margin-top: 14px;
    margin-bottom: 7px;
    color: #222;
}


/* =====================================================
   SUMMARY LINE
===================================================== */

.summary-row {
  display: flex;
  justify-content: space-between;

  padding: 7px 0;

  font-size: 14px;

  color: #555;
}

.summary-row strong {
  color: #333;
  font-weight: 600;
}


/* =====================================================
   SUMMARY DIVIDER
===================================================== */

.summary-divider {
  height: 1px;

  background: #dedede;

  margin: 2px 0 7px;
}


/* =====================================================
   TOTAL
===================================================== */

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 6px 0 14px;

  font-size: 14px;
  font-weight: 700;
}

.summary-total strong {
  font-size: 15px;
}


/* =====================================================
   TAX CHECKBOX
===================================================== */

.tax-check {
  display: flex;
  align-items: flex-start;
  gap: 5px;

  margin-bottom: 8px;

  font-size: 10px;
  color: #777;

  line-height: 1.3;
}

.tax-check input {
  margin-top: 1px;

  width: 9px;
  height: 9px;

  accent-color: #123d31;
}


/* =====================================================
   PAY BUTTON
===================================================== */

.pay-button {
  width: 100%;
  height: 37px;

  border: 0;
  border-radius: 30px;

  background: #123d31;
  color: #fff;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.pay-button:hover {
  background: #d92f42;

  transform: translateY(-1px);

  box-shadow:
    0 5px 12px rgba(237,57,76,.2);
}

.pay-button i {
  margin-left: 5px;

  font-size: 14px;
}


/* =====================================================
   SECURE
===================================================== */

.secure-payment {
  display: block;

  margin-top: 8px;

  font-size: 12px;

  color: #888;
}


/* =====================================================
   BOTTOM CTA
===================================================== */

.bottom-pay {
  width: 170px;

  margin-top: 2px;
}

.bottom-pay .pay-button {
  height: 40px;
}

.bottom-pay small {
  display: block;

  margin-top: 7px;

  font-size: 10px;

  color: #888;
}

.bottom-pay small i {
  margin-right: 4px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 760px) {

  .donation-page {
    padding: 15px 0 35px;
  }

  .donation-wrap {
    width: 94%;

    display: flex;
    flex-direction: column;

    gap: 0;
  }

  /* Summary first */

  .donation-summary {
    order: -1;

    position: static;

    width: 100%;

    margin-bottom: 13px;
  }

  .summary-card {
    display: flex;

    padding: 9px;

    gap: 10px;
  }

  .summary-image {
    width: 110px;

    flex-shrink: 0;

    padding: 0;
  }

  .summary-image img {
    width: 100%;
    height: 100%;
  }

  .summary-content {
    flex: 1;

    padding: 1px 2px;
  }

  .summary-campaign {
    margin-bottom: 7px;
  }

  .summary-row {
    padding: 4px 0;

    font-size: 7px;
  }

  .summary-total {
    padding: 4px 0 8px;
  }

  .tax-check {
    margin-bottom: 6px;
  }

  .pay-button {
    height: 30px;
  }

  .bottom-pay {
    width: 100%;

    margin-top: 0;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  .donation-box {
    padding: 17px 12px;
  }

  .donation-box-title {
    font-size: 12px;
  }

  .amount-options {
    gap: 5px;
  }

  .amount-option {
    height: 31px;
  }

  .custom-amount {
    height: 31px;
  }

  .summary-image,
  .summary-image img {
    width: 92px;
    height: 92px;
  }

  .summary-card {
    gap: 8px;
  }

  .summary-row {
    font-size: 7px;
  }

  .summary-total {
    font-size: 8px;
  }

  .summary-total strong {
    font-size: 9px;
  }

  .summary-campaign {
    font-size: 7px;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 350px) {

  .summary-image,
  .summary-image img {
    width: 80px;
    height: 90px;
  }

  .summary-row {
    font-size: 6.5px;
  }

  .summary-total strong {
    font-size: 8px;
  }

}

.custom-amount input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.custom-amount input[type="number"]::-webkit-inner-spin-button,
.custom-amount input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}