:root{
  --navy:#1b2f5a;
  --yellow:#f5c84b;
  --blue:#2f5fd7;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:'Outfit',sans-serif;
}

.subtitle{
  font-size: 24px;
  color: #000;
}
.title{
    font-size: 46px;
    color: #243c7c;
    margin: 5px 0;
    font-weight: 700;
  word-spacing: 2px;
  letter-spacing: 1px;
}
.intro{
    max-width: 1000px;
    margin: auto;
    font-size: 20px;
    margin-bottom: 50px;
    color: #000;
}

@media (max-width: 992px){
    .subtitle{
        font-size: 23px;
    }
    .title{
        font-size: 42px;
        word-spacing: 1px;
        letter-spacing: 0px;
    }
    .intro{
        font-size: 20px;
    }
}

@media (max-width: 768px){
    .subtitle{
        font-size: 23px;
    }
    .title{
        font-size: 40px;
        word-spacing: 1px;
        letter-spacing: 0px;
    }
    .intro{
        font-size: 20px;
    }
}

@media (max-width: 576px){
    .subtitle{
        font-size: 22px;
    }
    .title{
        font-size: 38px;
        word-spacing: 1px;
        letter-spacing: 0px;
    }
    .intro{
        font-size: 18px;
    }
}

@media (max-width: 400px){
    .subtitle{
        font-size: 16px;
    }
    .title{
        font-size: 23px;
        word-spacing: 1px;
        letter-spacing: 0px;
    }
    .intro{
        font-size: 16px;
    }
}



/*********************************************************************** TOPBAR *********************************************************************************************/
.topbar{
  min-height:42px;
  background:var(--navy);
  font-size:14px;
  color:white;
}

.topbar-inner{
  max-width:90%;
  margin:auto;
  min-height:42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.topbar a{
  color:var(--yellow);
  margin-left:10px;
  font-weight:700;
  text-decoration:none;
}


@media (max-width:1024px){

.topbar-inner{
  max-width:95%;
  font-size:13px;
}

.topbar-inner div{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

}

@media (max-width:768px){

.topbar{
  padding:8px 0;
  height:auto;
}

.topbar-inner{
  flex-direction:column;
  text-align:center;
  gap:6px;
}

.topbar-inner div{
  justify-content:center;
  flex-wrap:wrap;
}

.topbar a{
  display:inline-block;
  margin-left:6px;
}

}


@media (max-width:480px){

.topbar{
  font-size:12px;
}

.topbar-inner{
  gap:4px;
}

.topbar img{
  height:12px;
  width:12px;
}

.topbar a{
  margin-left:4px;
}

}

/******************************************************************** HEADER (TRANSPARENT) ***********************************************************************************/
/* ================= HEADER ================= */


/* ── Background image fade-in when ready ── */
.hero-slide {
  background-color: #1a1a1a; /* placeholder color while loading */
  background-size: cover;
  background-position: center;
}

/* Image not yet loaded = invisible bg */
.hero-slide:not(.bg-ready) {
  background-image: none !important;
}

/* Slide bg fades in once image is loaded */
.hero-slide.bg-ready {
  animation: bgFadeIn 0.6s ease forwards;
}

@keyframes bgFadeIn {
  from { opacity: 0.4; }
  to   { opacity: 1;   }
}

/* ── REMOVE any transform/opacity from hero-content ── */
/* Content stays exactly where it is — no shift, no hide */
.hero-slide .hero-content {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Content appears after image loads */
.hero-slide.content-ready .hero-content {
  opacity: 1;
  transform: translateY(0);
}



.site-header{
  position:absolute;
  top:42px;
  left:0;
  right:0;
  z-index:10;
  background:#00000045;
  transition:background .25s ease, box-shadow .25s ease, top .25s ease;
}

/* STICKY HEADER ONLY */
.site-header.sticky{
  position:fixed;
  top:0;
  background:rgba(27,47,90,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.header-inner{
  max-width:90%;
  margin:auto;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  height:55px;
}

/* ================= NAVIGATION ================= */

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

/* KEEPING YOUR ORIGINAL NAV STYLE */
.nav > a,
.nav > .dropdown > a{
  margin:0 14px;
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:500;
  cursor:pointer;
}

.header-donate-btn{
  background:var(--blue);
  padding:10px 18px;
  border-radius:30px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

/* ================= DROPDOWN BASE ================= */

.dropdown{
  position:relative;
  display:inline-block;
}

/* ABOUT US DROPDOWN */
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  min-width:200px;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  border-radius:8px;
  padding:10px 0;
  z-index:999;

  margin-top:35px;
}

.dropdown-menu a{
  display:block;
  padding:10px 18px;
  color:#333;
  text-decoration:none;
    font-size: 17px;
  transition:background .2s ease;
   font-weight: 600;
    font-size: 16px;
}

.dropdown-menu a:hover{
  background:#f3f3f3;
}

.dropdown:hover .dropdown-menu{
  display:block;
}

/* ================= MEGA MENU (4E’s) ================= */

.mega{
  position:relative;
}

.mega-menu{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  padding:20px 35px;
  box-shadow:0 15px 35px rgba(0,0,0,0.2);
  z-index:999;
  gap:40px;
  width:1150px;
  background:transparent;
  border-radius:25px;

  top:calc(100% + 35px); /* space */
}

/* Show mega menu on hover */
.mega:hover .mega-menu{
  display:flex;
}

/* Columns inside mega */
.mega-column{
  flex:1;
  min-width:200px;
  padding-top:10px;
}

.mega-column h4{
  margin-bottom:15px;
  font-weight:700;
  font-size:18px;
  color:#1b2f5a;
}

.mega-column a{
  display:block;
  margin-bottom:10px;
  color:#333;
  text-decoration:none;
  font-size:17px;
  transition:color .2s ease;
}

.mega-column a:hover{
  color:#1b2f5a;
}

/* ================= SMOOTH ANIMATION ================= */

.dropdown-menu,
.mega-menu{
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, transform .25s ease;
      border: 2px solid #1b2f5a;
}

.dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
}

.mega:hover .mega-menu{
  opacity:1;
  visibility:visible;
}



/* =========================================
   4E’s MEGA MENU ENHANCEMENTS
========================================= */

/* 1️⃣ Horizontal line below each title */
.mega-column h4{
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
      font-size: 21px;
}

.mega-column h4::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
 width: 100%;
  height: 2px;
  background: #e0e0e0; /* thin subtle line */
}


/* 2️⃣ Vertical divider after each column */
.mega-column{
  position: relative;
  padding-right: 25px;
}

/* Add vertical line except last column */
.mega-column:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #e6e6e6;
}


/* =========================================
   3️⃣ CATEGORY BASED HOVER COLORS
========================================= */

/* ENVIRONMENT */
.mega-column:nth-child(1) a:hover{
  color: #4f8b41;
}

/* EMPOWERMENT */
.mega-column:nth-child(2) a:hover{
  color: #6a2d91;
}

/* EDUCATION */
.mega-column:nth-child(3) a:hover{
  color: #3a77b9;
}

/* EMPLOYMENT */
.mega-column:nth-child(4) a:hover{
  color: #f07a28;
}



/* Hover bridge to prevent dropdown closing */
.mega::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:35px; /* SAME as gap */
}
/* =========================================
   MEGA MENU CARD STYLE (LIKE SCREENSHOT)
========================================= */
/* ================================
   UPDATED MEGA MENU STYLE
================================ */

.mega-menu{
  width:1150px;
  background:#f3f3f3;
  border-radius:25px;
  top:calc(100% + 35px);
}

/* Cards */

.mega-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:10px;
  background:transparent;   /* no background */
  border:2px solid transparent; /* hidden border */
  transition:all .25s ease;
  cursor:pointer;
    width: 227px;
}

/* Icons */

.mega-card i{
  font-size:18px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

/* Text */

.mega-card span{
  font-weight:600;
  font-size:16px;
  display:block;
}

.mega-card small{
  font-size:12px;
  color:#555;
}

/* Hover Colors */

/* Environment */

.env:hover{
  border-color:#4f8b41;
}

.env i{
  color:#4f8b41;
}

/* Empowerment */

.emp:hover{
  border-color:#6a2d91;
}

.emp i{
  color:#6a2d91;
}

/* Education */

.edu:hover{
  border-color:#3a77b9;
}

.edu i{
  color:#3a77b9;
}

/* Employment */

.emp3:hover{
  border-color:#f07a28;
}

.emp3 i{
  color:#f07a28;
}

/* Upcoming */

.upcoming{
  justify-content:center;
  font-weight:600;
  color:#555;
}

/* Hover */

.mega-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 15px rgba(0,0,0,0.12);
}


.dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:35px; /* same as gap */
}

@media (max-width:1024px){
  .dropdown::after{
    display:none;
  }
}

/*.dropdown::after{*/
/*  pointer-events: none;*/
/*}*/

@media (max-width:1024px){

.header-inner{
  max-width:95%;
}

.logo{
  height:50px;
}

/* Navigation spacing */

.nav > a,
.nav > .dropdown > a{
  margin:0 10px;
  font-size:16px;
}

/* Donate button */

.header-donate-btn{
  padding:8px 14px;
  font-size:14px;
}

/* Mega menu width */

.mega-menu{
  width:900px;
  padding:25px;
}

/* Mega cards */

.mega-card{
  width:auto;
}

.mega:hover .mega-menu{
  display:block;
}

}



@media (max-width:900px){

.header-inner{
  flex-wrap:wrap;
  height:auto;
  padding:10px 0;
}

.logo{
  height:45px;
}

/* Reduce nav font */

.nav > a,
.nav > .dropdown > a{
  font-size:15px;
}

.mega-menu{
  width:95%;
}

}


@media (max-width:768px){

.site-header{
  top:55px;
}

.header-inner{
  /*flex-direction:column;*/
  align-items:flex-start;
  height:auto;
  padding:12px 0;
}

/* NAVIGATION STACK */

.nav{
  flex-direction:column;
  width:100%;
  margin-top:10px;
}

.nav > a,
.nav > .dropdown > a{
  width:100%;
  padding:10px 0;
  margin:0;
  border-bottom:none;
}




/* Donate button */

.header-donate-btn{
  margin-top:10px;
  align-self:flex-start;
}

/* Disable mega hover layout */

.mega-menu{
  position:static;
  transform:none;
  width:100%;
  flex-direction:column;
  padding:15px;
  box-shadow:none;
}

/* Remove vertical lines */

.mega-column:not(:last-child)::after{
  display:none;
}

.mega-column{
  padding-right:0;
}

}



/* ===============================
HAMBURGER
=============================== */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
      margin-top: 11px;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: #fff;
  display: block;
  transition: 0.3s ease;
}

@media (max-width: 1024px) {
  .menu-toggle {
    display: flex;
  }

  .header-inner {
    max-width: 95%;
    height: auto;
    position: relative;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85%;
    height: 100vh;
    background: #1b2f5a;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 20px 30px;
    overflow-y: auto;
    transition: right 0.35s ease;
    z-index: 1000;
  }

  .nav.active {
    right: 0;
  }

  .nav > a,
  .nav > .dropdown > a {
    width: 100%;
    margin: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.15);*/
  }

  .dropdown {
    width: 100%;
    padding: 15px 0 15px;
  }

  .dropdown-menu,
  .mega-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    width: 100%;
    margin-top: 0;
    padding: 10px 0 10px 12px;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
  }

  .dropdown-menu.open,
  .mega-menu.open {
    display: block;
  }

  .dropdown-menu a,
  .mega-column a {
    color: #fff;
  }

  .mega-column {
    min-width: 100%;
    padding-right: 0;
    margin-bottom: 20px;
  }

  .mega-column:not(:last-child)::after {
    display: none;
  }

  .mega-column h4 {
    color: #fff;
    font-size: 18px;
  }

  .mega-column h4::after {
    background: rgba(255, 255, 255, 0.2);
  }

  .mega-card {
    width: 100%;
    padding: 10px;
  }

  .mega-card small {
    color: #ddd;
  }

  .header-donate-btn {
    display: none;
  }
}



@media (max-width:768px){

.nav{
  display:none;
  width:100%;
}

.nav.active{
  display:flex;
}

}


@media (max-width:768px){

.nav .mega{
  /*margin-top:15px;*/
  padding-top:15px;
  padding-bottom: 15px;
  /*border-top:1px solid rgba(255,255,255,0.2);*/
}

}

@media (max-width:768px){

/* Dropdown container padding */
.dropdown-menu{
  padding:10px;
}

/* Each dropdown item as a box */
.dropdown-menu a{
  display:block;
  margin:8px 0;
  padding:12px 16px;
  background:#ffffff;
  border-radius:8px;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
  color:#1b2f5a;
  border-bottom:none; /* remove old line */
}

/* Hover effect */
.dropdown-menu a:hover{
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

}

@media (max-width:768px){

/* ABOUT US dropdown boxes */

.dropdown-menu{
  padding:10px 0;
}

.dropdown-menu a{
  display:block;
  margin:8px 0;
  padding:12px 16px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  color:#1b2f5a;
  font-weight:600;
  border-bottom:none;
}


/* 4E's MEGA MENU CARDS */

.mega-card{
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  margin:8px 0;
  padding:14px;
}

.mega-card span{
  color:#1b2f5a;
  font-weight:600;
}

.mega-card small{
  color:#666;
}

}


/****************************************************************************
HERO SECTION
****************************************************************************/

.hero{
  height:100vh;
  position:relative;

  --yellow:#ffcc00;
  --blue:#1e66ff;
}

.hero-slider{
  height:100%;
  position:relative;
  overflow:hidden;
}

/* Slides */

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  visibility:hidden;
  transition:opacity .9s ease;
}

.hero-slide.active{
  opacity:1;
  visibility:visible;
  z-index:1;
}


/****************************************************************************
HERO CONTENT
****************************************************************************/

.hero-content{
  position:absolute;
  top:21%;
  left:90px;
  transform:translateY(-50%);
  max-width:620px;
  z-index:2;
}

/* text colors */

.hero .white{
  color:#fff;
}

.hero .yellow{
  color:var(--yellow);
}

.hero .tagline{
  display:inline-block;
  color:var(--yellow);
  font-weight:600;
}

.hero .hero-content,
.hero h1, .hero h2,
.hero p{
  color:#fff;
}


/****************************************************************************
TEXT SPACING
****************************************************************************/

.hero .kicker{
  margin-bottom:16px;
}

.hero .kicker .white{
  font-size:15px;
  letter-spacing:2px;
}

.hero .tagline{
  font-size:15px;
}

.hero h1{
  font-size:58px;
  line-height:1.1;
  margin-bottom:18px;
}

.hero h2{
  font-size:58px;
  line-height:1.1;
  margin-bottom:18px;
}


.hero p{
  font-size:19px;
  margin-bottom:28px;
}


/****************************************************************************
BUTTON
****************************************************************************/

.hero .hero-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.18);
  padding:12px 14px 12px 22px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  border:1px solid rgba(255,255,255,.18);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.hero .hero-btn span{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:16px;
  color:#fff;
  transition:background .25s ease,color .25s ease;
}

.hero .hero-btn:hover{
  background:#1B2F5A;
  border-color:#1B2F5A;
}

.hero .hero-btn:hover span{
  background:#fff;
  color:#1B2F5A;
}


/****************************************************************************
SLIDE TEXT ANIMATION
****************************************************************************/

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:0.7s ease;
}

.hero-slide.active .reveal{
  opacity:1;
  transform:none;
}


/****************************************************************************
DOTS NAVIGATION
****************************************************************************/

.hero-dots{
  position:absolute;
  bottom:28px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:12px;
  z-index:3;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  opacity:.4;
  border:0;
  cursor:pointer;
}

.dot.active{
  opacity:1;
}


/****************************************************************************
TABLET
****************************************************************************/

@media(max-width:1024px){

.hero{
  height:90vh;
}

.hero-content{
 left: 14%;
top: 16%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:85%;
  max-width:750px;
}

.hero h1{
  font-size:48px;
}

.hero h2{
  font-size:48px;
}

.hero p{
  font-size:20px;
  width:90%;
  margin:auto;
}

.hero .hero-btn{
  justify-content:center;
}

}


/****************************************************************************
MOBILE
****************************************************************************/

@media(max-width:768px){

.hero{
  height:95vh;
  margin-bottom: -40px;
}

.hero-slider{
  height:95%;
}

.hero-content{
         left: 3%;
        top: 15%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:95%;
  max-width:95%;
}

.hero h1{
  font-size:40px;
  line-height:1.2;
}

.hero h2{
  font-size:40px;
  line-height:1.2;
}

.hero p{
  font-size:16px;
  width:98%;
  margin:auto;
}

.hero .hero-btn{
  margin-top: 20px;
  font-size:16px;
  padding: 10px 20px;
  justify-content:center;
}

.hero .hero-btn span{
  width:36px;
  height:36px;
}

}

@media (max-width: 576px) {
    .hero-content{
             left: 3%;
        top: 13%;
      transform:translate(-50%,-50%);
      text-align:center;
      width:95%;
      max-width:95%;
    }
    .hero h1{
      font-size:36px;
      line-height:1;
      margin-bottom: 10px;
    }
    
    .hero h2{
      font-size:36px;
      line-height:1;
      margin-bottom: 10px;
    }
    .hero p {
      font-size: 15px;
    }
    .hero .kicker {
        margin-bottom: 10px;
    }
}



/************************************************************************ TEXT SLIDER ******************************************************************************************/

.text-slider {
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 30px 0;
}

.slider-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
}

.slider-trackss {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
}
.slider-track span {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 700;
  color: #111;
  margin: 0 13px;
}

.slider-trackss span {
  font-size: clamp(22px, 4vw, 46px);
  font-weight: 700;
  color: #111;
  margin: 0 13px;
}

.slider-track .dot {
 display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(30px, 5vw, 52px); /* BIG dot */
  line-height: 1;                    /* prevents vertical misalignment */
  color: #f5a623;

  margin: 0 25px;                    /* spacing */
  transform: translateY(-1px);        /* tiny nudge to center perfectly */
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Mobile fine-tuning */
@media (max-width: 768px) {
  .slider-track span {
    margin: 0 8px;
  }
}


/************************************************************ABOUT US****************************************************************************/
.ngo-about-section {
      position: relative;
    background: #eef4fb;
    padding: 53px;
    overflow: visible;
   
}

/* Left content */
.content-wrap {
  max-width: 560px;
  z-index: 2;
  position: relative;
      margin-left: 29px;
}

.read-more-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 35px;
    background: #1c3d7a;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Hover Effect */
.read-more-btn:hover {
  background:#2552a3;                 /* brighter highlight */
  transform: translateY(-2px);        /* small lift */
  box-shadow: 0 10px 22px rgba(28,61,122,.35); /* glow/shadow */
}

.yimage{
  position: absolute;
    right: 0;
    top: 2px;
    width: 47%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}


/* ONLY this section: left-to-right on load */
.ngo-about-section .content-wrap{
  animation: ngoAboutSlideIn 0.9s ease both;
}

@keyframes ngoAboutSlideIn{
  from{ opacity: 0; transform: translateX(-60px); }
  to{ opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .ngo-about-section .content-wrap{ animation: none; opacity: 1; transform: none; }
}






/* Initial hidden state */
.ngo-about-section .content-wrap,
.ngo-about-section .yimage {
  opacity: 1;
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Text from left */
.ngo-about-section .content-wrap {
  transform: translateX(-120px);
}


/* When section becomes visible */
.ngo-about-section.show .content-wrap,
.ngo-about-section.show .yimage {
  opacity: 1;
  transform: translateX(0);
}



/* Tablet */
@media (max-width: 1024px) {

  .ngo-about-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
  }

  /* Image first */
  .yimage{
    position: relative;
    width: 100%;
    max-width: 500px;
    order: 1;
    margin-bottom: 20px;
    pointer-events: auto;
  }

  /* Content below image */
  .content-wrap{
    order: 2;
    max-width: 100%;
    margin-left: 0;
  }

}


/* Mobile */
@media (max-width: 768px) {

  .ngo-about-section{
    display: flex;
    flex-direction: column;
    padding: 1px 18px;
    padding-bottom: 21px;
  }

  .yimage{
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 18px;
  }

  .content-wrap{
    max-width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .title{
    /*font-size: 26px;*/
    line-height: 1.3;
  }

  .read-more-btn{
    font-size: 16px;
    padding: 10px 28px;
  }

}


/* Small Mobile */
@media (max-width: 480px){
  .content-wrap p{
    font-size: 15px;
  }

}


/***************************************************YOUTH LED NGO WHAT MAKES youth-led DIFFERENT ******************************************************************************/
.youth-led-different{
  padding:80px 20px;
  background:#ffffff;
  text-align:center;
}
.youth-led-container{
  max-width:1200px;
  margin:auto;
}

/* Cards layout */
.youth-led-cards{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 50px;
}
/* Card */
.youth-led-card{
  position: relative;
  width: 370px;
  padding: 25px 20px 20px;
  border: 3px solid #607ec2;
  border-radius: 20px;
  background: #fff;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}
.youth-led-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}
/* Icon bubble */
.youth-led-icon{
  position: absolute;
  top: -20px;
  right: -20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}
.youth-led-icon.black{background:#ffffff;}
.youth-led-img {
  border-radius: 50%;
  width: 70px;
  height: 70px;
}
.youth-led-card h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
  color:#000;
}
.youth-led-card p{
  font-size:15px;
  color:#444;
  line-height:1;
}
/* Responsive */
@media(max-width:900px){
  .youth-led-title{font-size:34px;}
  .youth-led-card{width:100%;}
}
 
 

/*****************************************************************Our 4Es************************************************************************************************/
.Home-Page-Our-FourEs-Section {
  padding: 80px 20px;
  /*font-family: 'Poppins', sans-serif;*/
  text-align: center;
  max-width: 1300px;
  margin: 0 auto;
}
 
/* GRID */
.Home-Page-Our-FourEs-Section-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
  margin-top: 175px;
}

/* WRAPPER */
.Home-Page-Our-FourEs-Section-item {
  position: relative;
}

/* CARD */
.Home-Page-Our-FourEs-Section-card {
  position: relative;
  border-radius: 22px;
  padding: 120px 17px 40px;
}

/* COLORS */
.env-card { background:#d3ebe5; }
.emp-card { background:#cfbfdb; }
.edu-card { background:#b1daf3; }
.job-card { background:#fde3cf; }

/* TOP BUTTON */
.Home-Page-Our-FourEs-Section-topbtn {
  position: absolute;
  top: -130px;
  left: 50%;
  width: 180px;
  font-size: 20px;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
  z-index: 5;
  white-space: nowrap;
}

.env-btn { background:#4c8c4a; }
.emp-btn { background:#6a3a91; }
.edu-btn { background:#3f74b5; }
.job-btn { background:#e26c24; }

/* CIRCLE */
.Home-Page-Our-FourEs-Section-circle {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 125px;
  height: 125px;
  perspective: 1000px;
  z-index: 3;
}

/* INNER FLIP */
.Home-Page-Our-FourEs-Section-circle-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}


  /* HOVER ONLY ON CIRCLE */
.Home-Page-Our-FourEs-Section-circle:hover 
.Home-Page-Our-FourEs-Section-circle-inner {
  transform: rotateY(180deg);
}

/* FRONT & BACK */
.Home-Page-Our-FourEs-Section-circle-front,
.Home-Page-Our-FourEs-Section-circle-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;

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

/* FRONT */
.Home-Page-Our-FourEs-Section-circle-front {
  background: #dff1fb;
}

.Home-Page-Our-FourEs-Section-circle-front h3 {
  font-size: 35px;
  font-weight: 800;
  margin: 0;
}

.Home-Page-Our-FourEs-Section-circle-front p {
  font-size: 15px;
  margin: 0;
}

/* BACK */
.Home-Page-Our-FourEs-Section-circle-back {
  transform: rotateY(180deg);
  overflow: visible;
}

.Home-Page-Our-FourEs-Section-circle-back img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
}

/* Y IMAGE */
.Home-Page-Our-FourEs-Section-y {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  z-index: 1;
}

/* CONTENT */
.Home-Page-Our-FourEs-Section-content h4 {
  font-size: 18px;
  font-weight: 800;
  margin: 60px 0 15px;
}

.Home-Page-Our-FourEs-Section-content p {
  font-size: 15px;
  color: #2f3237;
  line-height: 1.6;
  margin: 0;
}

/* BUTTON */
.Home-Page-Our-FourEs-Section-btn {
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px 15px;
  background: #2c3e70;
  color: #fff;
  border-radius: 10px;
  border: none;
  width: 230px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0px 3px 0px #1d2a50;
  cursor: pointer;
}

/* ================= FIXED CARD SIZE ================= */
.Home-Page-Our-FourEs-Section-item {
  display: flex;
  justify-content: center;
}

.Home-Page-Our-FourEs-Section-card {
  width: 100%;
  max-width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.Home-Page-Our-FourEs-Section-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.Home-Page-Our-FourEs-Section-content p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}



/* ================= RESPONSIVE ================= */

/* Tablet → 2 cards */
@media (max-width: 1024px) {
  .Home-Page-Our-FourEs-Section {
    padding: 70px 30px;
  }

  .Home-Page-Our-FourEs-Section-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 175px 40px;
    margin: 175px 50px 0 ;
  }
}

@media (max-width: 768px) {
  .Home-Page-Our-FourEs-Section-grid {
    gap: 175px 40px;
    margin: 0;
    margin-top: 175px;
  }
}

@media (max-width: 600px) {
  .Home-Page-Our-FourEs-Section-grid {
    gap: 175px 10px;
    margin: 0;
    margin-top: 175px;
  }
  .Home-Page-Our-FourEs-Section-btn {
      margin-top: 20px;
  }
}

/* Mobile → 1 card */
@media (max-width: 576px) {
  .Home-Page-Our-FourEs-Section {
    padding: 50px 15px;
  }

  .Home-Page-Our-FourEs-Section-title {
    font-size: 28px;
  }

  .Home-Page-Our-FourEs-Section-grid {
    grid-template-columns: 1fr;
    gap: 175px;
  }

  .Home-Page-Our-FourEs-Section-card {
    max-width: 300px;
    height: 400px;
    padding: 120px 15px 40px;
  }
}
  

/***************************************************************CASE STUDY*************************************************************************************/
/* ============================= */
/* SECTION */
/* ============================= */
 
.completed-projects {
  padding: 80px 0 204px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-top: 105px;
}
 
.cp-container {
  max-width: 100%;
  margin: auto;
  padding: 0 20px;
}
 
.cp-slider-wrapper {
  position: relative;
  margin-top: 40px;
}
 
.cp-viewport {
  margin: 0 auto;
}
 
/* ============================= */
/* TRACK */
/* ============================= */
 
.cp-track {
  display: flex;
  gap: 30px;
  transition: transform 0.6s ease;
  will-change: transform;
  transform: translateZ(0);
}
 
/* ============================= */
/* CARD */
/* ============================= */
 
.cp-card {
  position: relative;
  flex: 0 0 60%;  /* ✅ was 50% → now bigger */
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
 
  transform: scale(0.98);  /* ✅ side cards almost full size */
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  z-index: 1;
 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
 
/* CENTER ACTIVE CARD */
.cp-card.cp-active {
  transform: scale(1.09);   /* slightly increased */
  z-index: 5;
  box-shadow: 0 28px 65px rgba(0,0,0,0.25);
}
 
/* ============================= */
/* IMAGE */
/* ============================= */
 
.cp-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
 
/* ============================= */
/* ARROWS */
/* ============================= */
 
.cp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
}
 
.cp-prev { left: 0; z-index: 1;}
.cp-next { right: 0;z-index: 1; }
 
/* ============================= */
/* CONTENT CARD */
/* ============================= */
 
.cp-content {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 4px 16px;
  background: #ffffff;
  border-radius: 16px;
  color: #0b2a4a;
}
 
.cp-content h3 {
  font-size: 20px;
  color: #0b2a4a;
}
 
.cp-content p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 5px;
  color: #444;
}
 
/* ============================= */
/* BOTTOM BAR */
/* ============================= */
 
.cp-bottombar {
  display: flex;
  align-items: center;
  gap: 20px;
}
 
.cp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  background: #0b2a4a;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s ease;
}
 
.cp-cta:hover {
  background: #14518c;
}
 
.cp-meta {
  flex: 1;
  display: flex;
  align-items: center;
}
 
.cp-details {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
 
.cp-date,
.cp-location {
  font-size: 14px;
  font-weight: 600;
  color: #1f2d3d;
  white-space: nowrap;
}
 
 
/* ============================= */
/* TITLES */
/* ============================= */
 
.subtitle-dark {
  font-size: 25px;
  color: white;
  margin-bottom: 5px;
}
 
.title-dark {
  font-size: 45px;
  color: white;
  font-weight: 700;
  margin-bottom: 30px;
  word-spacing: 5px;
  letter-spacing: 1px;
}
 
/* ============================= */
/* MOBILE */
/* ============================= */
 
@media (max-width: 900px) {
  .cp-card {
    flex: 0 0 88%;
  }
 
  .cp-content {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}
 
 
/* =========================
LARGE TABLET
========================= */
@media (max-width:1024px){
 
.completed-projects{
padding:70px 0 150px;
margin-top:80px;
}
 
.cp-card{
flex:0 0 75%;
}
 
.cp-track{
gap:20px;
}
 
.cp-content{
padding:12px;
}
 
.cp-logo{
width:60px !important;
height:auto !important;
}
 
.cp-nav{
width:40px;
height:40px;
font-size:20px;
}
 
}
 
 
/* =========================
TABLET
========================= */
@media (max-width:768px){
 
.completed-projects{
padding:60px 0 120px;
margin-top:60px;
}
 
.cp-card{
flex:0 0 88%;
}
 
.cp-track{
gap:18px;
}
 
.cp-content{
padding:10px;
}
 
.cp-bottombar{
flex-wrap:wrap;
gap:10px;
}
 
.cp-cta{
font-size:13px;
padding:8px 14px;
}
 
.cp-date{
font-size:12px;
}
 
.cp-logo{
width:50px !important;
height:auto !important;
}
 
.cp-nav{
width:36px;
height:36px;
font-size:18px;
}
 
}
 
 
/* =========================
MOBILE
========================= */

@media (max-width:576px){
 
.cp-card{
flex:0 0 100%;
transform:scale(1)!important;
}
 
.cp-card img{
width:100%;
height:220px;
object-fit:cover;
}
 
.cp-content{
position:relative;
left:auto;
right:auto;
bottom:auto;
margin-top:-10px;
padding:28px 15px;
}
 
.cp-bottombar{
flex-direction:column;
align-items:flex-start;
gap:10px;
}
 
.cp-meta{
width:100%;
}
 
.cp-details{
gap:8px;
}
 
.cp-date{
font-size:11px;
}
 
.cp-cta{
font-size:12px;
padding:6px 12px;
border-radius:8px;
}
 
.cp-logo{
align-self:flex-end;
width:40px !important;
height:auto !important;
}
 
.cp-nav{
width:30px;
height:30px;
font-size:15px;
}
 
}
 
 
/* =========================
SMALL MOBILE
========================= */
@media (max-width:400px){
 
.cp-card img{
height:200px;
}
 
.cp-content h3{
font-size:14px;
}
 
.cp-content p{
font-size:11px;
}
 
.cp-date{
font-size:10px;
}
 
.cp-logo{
width:71px !important;
}
 
.cp-nav{
width:26px;
height:26px;
font-size:14px;
margin-top: -62px;
}
 
}





/*************************************** Case Study Section ****************************************************************************************/

.case-study-section-home-page-classname-wrapper {
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
  padding: 80px 20px;
  position: relative; /* ADD THIS */
}

.case-study-section-home-page-classname-container {
  max-width: 1240px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

/* TRACK */
.case-study-section-home-page-classname-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s ease;
}

/*Blood-Donation-Page*/
.case-study-section-home-page-classname-track-1 {
  display: flex;
  gap: 24px;
}

/* CARD */
.case-study-section-home-page-classname-card {
  min-width: calc(33.333% - 16px);
  background: white;
  border-radius: 18px;
  overflow: hidden;
}

/* IMAGE */
.case-study-section-home-page-classname-image {
  position: relative;
  height: 220px;
}

.case-study-section-home-page-classname-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */
.case-study-section-home-page-classname-overlay {
  position: absolute;
  bottom: 0;
  padding: 18px;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.3), transparent);
}

.case-study-section-home-page-classname-overlay h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

/* CONTENT */
.case-study-section-home-page-classname-content {
  padding: 15px;
}

/* NEW: TOP ROW (TEXT + LOGO) */
.case-study-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.case-study-top-row p {
  font-size: 14px;
  color: #222;
  margin-bottom: 0; /* changed */
  flex: 1;
}

/* BOTTOM */
.case-study-section-home-page-classname-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px; /* moved spacing here */
}

.case-study-section-home-page-classname-logo img {
  width: 110px;
}

.case-study-section-home-page-classname-meta {
  font-size: 15px;
  color: #555;
}

/* BUTTON */
.case-study-section-home-page-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: #28306b;
  color: #fff;
  text-decoration: none;
  padding: 1px 15px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  gap: 10px;
  margin-top: 0px;
  transition: all 0.3s ease;
}

.case-study-section-home-page-join-btn:hover {
  background-color: #1f2555;
}

.case-study-section-home-page-btn-text {
  flex: 1;
}

.case-study-section-home-page-btn-icon img {
  width: 27px;
  height: auto;
  border-radius: 50%;
  margin-top: 3px;
  margin-bottom: -3px;
}

/* ARROWS */
.case-study-section-home-page-classname-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: white;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 1;
  font-size: larger;
}

/* Position relative to wrapper */
.case-study-section-home-page-classname-arrow.prev {
  color: #28306b;
  left: 20px;
}

.case-study-section-home-page-classname-arrow.next {
  color: #28306b;
  right: 20px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .case-study-section-home-page-classname-wrapper {
        padding: 60px 20px 150px;
        background-position: -450px;
    }
  .case-study-section-home-page-classname-card {
    min-width: calc(50% - 12px);
  }
  .case-study-section-home-page-classname-arrow {
      top: 45%;
      width: 45px;
      height: 45px;
  }
}

@media (max-width: 992px) {
    .case-study-section-home-page-classname-wrapper {
        padding: 60px 20px 90px;
    }
}

@media (max-width: 768px) {
    .case-study-section-home-page-classname-wrapper {
        padding: 50px 20px 90px;
        background-position: -600px;
    }
    .case-study-top-row p {
       font-size: 12px;
    }
    .case-study-section-home-page-classname-arrow {
      top: 40%;
      width: 40px;
      height: 40px;
    }
}

@media (max-width: 600px) {
    .case-study-section-home-page-classname-container {
       max-width: 450px;
    }
  .case-study-section-home-page-classname-card {
    min-width: 100%;
  }
}

@media (max-width: 550px) {
    .case-study-section-home-page-classname-container {
       max-width: 400px;
    }
}

@media (max-width: 400px) {
    .case-study-section-home-page-classname-container {
       max-width: 300px;
    }
    .case-study-top-row{
        flex-flow: column-reverse;
    }
    .case-study-section-home-page-classname-bottom {
        flex-flow: column-reverse;
        gap: 5px;
    }
  .case-study-section-home-page-classname-arrow {
        top: 35%;
        width: 35px;
        height: 35px;
    } 
}


/*****************************************************
  Lead Change With Us (Namespaced)
*****************************************************/

* {
  box-sizing: border-box;
}

.home-page-lead-change-with-us-section {
  padding: 80px 20px;
  background: #fff;
}

.home-page-lead-change-with-us-section-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.home-page-lead-change-with-us-section-content,
.home-page-lead-change-with-us-section-image {
  flex: 1;
}

/* TEXT */
.home-page-lead-change-with-us-section-subtitle {
  font-size: 24px;
  color: #000;
  margin-bottom: 8px;
}

.home-page-lead-change-with-us-section-title {
  font-size: 42px;
  line-height: 1.2;
  color: #243c7c;
  font-weight: 700;
  margin-bottom: 20px;
}

.home-page-lead-change-with-us-section-intro {
  font-size: 18px;
  color: #000;
  margin-bottom: 30px;
}

/* LIST */
.home-page-lead-change-with-us-section-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 620px;
}

/* ITEM */
.home-page-lead-change-with-us-section-item {
  display: grid;
  grid-template-columns: 50px 180px 1fr 40px;
  align-items: center;
  gap: 15px;
  background: #E9F1FA;
  padding: 15px;
  border-radius: 10px;
}

.home-page-lead-change-with-us-section-item-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #1f2c5c;
}

.home-page-lead-change-with-us-section-item-text p {
  margin: 0;
  font-size: 15px;
  color: #000;
}

.home-page-lead-change-with-us-section-item-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.home-page-lead-change-with-us-section-item-arrow img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* BUTTON */
.home-page-lead-change-with-us-section-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #28306b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  transition: 0.3s ease;
}

.home-page-lead-change-with-us-section-btn:hover {
  background: #1f2555;
}

.home-page-lead-change-with-us-section-btn img {
  width: 30px;
  height: 30px;
}

/* IMAGE (UPDATED RESPONSIVE FIX) */
.home-page-lead-change-with-us-section-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;  /* align right */
  border-radius: 16px;
  object-fit: cover;
}

/* =========================
   TABLET
========================= */
@media (max-width: 991px) {

  .home-page-lead-change-with-us-section {
    padding: 60px 20px;
  }

  .home-page-lead-change-with-us-section-container {
    flex-direction: column;
    gap: 40px;
    justify-self: center;
    text-align: center;
  }

  .home-page-lead-change-with-us-section-content,
  .home-page-lead-change-with-us-section-image {
    width: 100%;
  }

  .home-page-lead-change-with-us-section-title {
    font-size: 34px;
  }

  .home-page-lead-change-with-us-section-subtitle {
    font-size: 22px;
  }

  .home-page-lead-change-with-us-section-intro {
    font-size: 17px;
  }

  .home-page-lead-change-with-us-section-item {
    grid-template-columns: 50px 150px 1fr 35px;
    text-align: left;
  }

  /* IMAGE FIX */
  .home-page-lead-change-with-us-section-image img {
    margin: 0 auto; /* center */
    width: 100%;
    max-width: 600px;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 767px) {

  .home-page-lead-change-with-us-section {
    padding: 50px 15px;
  }

  .home-page-lead-change-with-us-section-title {
    font-size: 28px;
  }

  .home-page-lead-change-with-us-section-subtitle {
    font-size: 20px;
  }

  .home-page-lead-change-with-us-section-intro {
    font-size: 16px;
  }

  .home-page-lead-change-with-us-section-item {
    grid-template-columns: 1fr 1fr 3fr 1fr;
    text-align: center;
    padding: 18px 15px;
  }

  .home-page-lead-change-with-us-section-item-arrow {
    display: flex;
    justify-content: center;
  }

  .home-page-lead-change-with-us-section-btn {
    width: 100%;
    max-width: 220px;
    justify-content: center;
  }

  /* IMAGE FIX */
  .home-page-lead-change-with-us-section-image {
    margin-top: 20px;
  }

  .home-page-lead-change-with-us-section-image img {
    max-width: 100%;
  }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px) {

  .home-page-lead-change-with-us-section-title {
    font-size: 24px;
  }

  .home-page-lead-change-with-us-section-subtitle {
    font-size: 18px;
  }

  .home-page-lead-change-with-us-section-intro {
    font-size: 15px;
  }

  .home-page-lead-change-with-us-section-item-title h3 {
    font-size: 16px;
  }

  .home-page-lead-change-with-us-section-item-text p {
    font-size: 14px;
  }
  
  .home-page-lead-change-with-us-section-item {
    grid-template-columns: 1fr;
  }

  .home-page-lead-change-with-us-section-btn {
    font-size: 16px;
    padding: 10px 16px;
  }

  .home-page-lead-change-with-us-section-btn img {
    width: 26px;
    height: 26px;
  }
}


/*********************************************************** fund allocation ***************************************************************************************/
 /* Section Header */
    .section-header {
      text-align: center;
      max-width: 800px;
      margin: auto;
      margin-top: 126px;
    }

    .section-header h5 {
      letter-spacing: 1px;
      font-weight: 600;
      color: #111;
    }

    /* Layout */
    .wrapper-home {
      display: flex;
      gap: 50px;
      max-width: 1200px;
      margin: 60px auto;
      align-items: flex-start;
    }

    .left-box {
      background: #eef5fb;
      padding: 23px;
      border-radius: 20px;
      width: 45%;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }

    .left-box h3 {
      text-align: center;
      
      color: #253b6e;
    }

   .legend {
  /*margin-top: 30px;*/
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.legend div {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 8px;
  width: 50%;
  color: #253b6e;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.green { background: #d7f0e7; }
.blue { background: #b9dff6; }
.purple { background: #cfcbe3; }
.orange { background: #ffcfa8; }

    /* Right Section */
    .right-box {
      width: 55%;
    }

    .right-box h3 {
      color: #253b6e;
      font-size: 30px;
    }

    .right-box p {
      color: #555;
      margin-bottom: 25px;
    }

    .impact-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 25px;
      border-radius: 14px;
      margin-bottom: 15px;
      font-weight: 600;
      box-shadow: 0 6px 15px rgba(0,0,0,0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease;
      cursor: pointer;
    }

    .impact-card:hover {
      transform: translateY(-2px);
    }

    .green-bg { background: #d9f0ea; }
    .purple-bg { background: #d7cfe5; }
    .blue-bg { background: #dff0fb; }
    .orange-bg { background: #fde6cf; }

    .amount {
      font-size: 18px;
    }

    .download-btn {
      margin-top: 20px;
      display: inline-block;
      background: #253b6e;
      color: #fff;
      padding: 12px 20px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 600;
    }

.pie-wrap {
  width: 380px;
  height: 380px;
  margin: auto;
  position: relative;
}

.donut-chart {
  width: 380px;
  height: 380px;
  margin: auto;
  position: relative;
}

.donut-svg {
  width: 380px;
  height: 380px;
  display: block;
  overflow: visible;
}

/* apply transform on group */
.slice-group {
  cursor: pointer;
  transform-origin: 190px 190px;
  transition: transform 0.25s ease;
}

.slice {
  transition: filter 0.25s ease;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.18));
}

/* zoom + highlight */
.slice-group.preview,
.slice-group.active {
  transform: scale(1.08);
}

.slice-group.preview .slice,
.slice-group.active .slice {
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.28));
}

.percent-text {
  font-size: 18px;
  font-weight: 700;
  fill: #253b6e;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.slice-group.preview .percent-text,
.slice-group.active .percent-text {
  opacity: 1;
}

.percent-text {
  font-size: 14px;
  font-weight: 700;
  fill: #253b6e;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.slice-group.preview .percent-text,
.slice-group.active .percent-text {
  opacity: 1;
}

.impact-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  border-radius: 14px;
  margin-bottom: 15px;
  font-weight: 600;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease;
  cursor: pointer;
}

.impact-card:hover {
  transform: translateY(-2px);
}

    /* Tablet View */
    @media (max-width: 1024px) {
      .section-header {
        margin-top: 80px;
        padding: 0 20px;
      }

      .wrapper-home {
        gap: 30px;
        max-width: 95%;
      }

      .left-box {
        width: 48%;
        padding: 30px;
      }

      .right-box {
        width: 52%;
      }

      .right-box h3 {
        font-size: 26px;
      }

      .pie-wrap,
      .donut-chart,
      .donut-svg {
        width: 250px;
        height: 250px;
      }

      .impact-card {
        padding: 15px 18px;
      }
    }

    /* Mobile View */
    @media (max-width: 768px) {
      .section-header {
        margin-top: 60px;
        padding: 0 20px;
      }

      .section-header h2 {
        font-size: 26px;
      }

      .section-header p {
        font-size: 15px;
      }

      .wrapper-home {
        flex-direction: column;
        gap: 35px;
        margin: 40px auto;
        padding: 0 15px;
      }

      .left-box,
      .right-box {
        width: 100%;
      }

      .left-box {
        padding: 25px;
      }

      .right-box h3 {
        font-size: 24px;
      }

      .pie-wrap,
      .donut-chart,
      .donut-svg {
        width: 220px;
        height: 220px;
      }

      .legend {
        font-size: 13px;
      }

      .impact-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 14px 16px;
      }

      .amount {
        font-size: 16px;
      }

      .download-btn {
        width: 100%;
        text-align: center;
      }
    }

    @media (max-width: 480px) {
      .section-header h2 {
        font-size: 22px;
      }

      .pie-wrap,
      .donut-chart,
      .donut-svg {
        width: 190px;
        height: 190px;
      }

      .legend div {
        font-size: 12px;
      }
    }
    
    @media (max-width: 1024px) {
  .pie-wrap,
  .donut-chart,
  .donut-svg {
    width: 320px;
    height: 320px;
  }

  .slice-group {
    transform-origin: 190px 190px;
  }
}

@media (max-width: 768px) {
  .pie-wrap,
  .donut-chart,
  .donut-svg {
    width: 260px;
    height: 260px;
  }
}

@media (max-width: 480px) {
  .pie-wrap,
  .donut-chart,
  .donut-svg {
    width: 220px;
    height: 220px;
  }
}

/********************************************** home page - donation slider section ***********************************************************************************/

/* HEADER */
.Begin-Giving-To-Them-Section-Classname-header {
    text-align: center;
    margin-bottom: 60px;
}


.home-page-donation-slider-section-wrapper {
     padding: 80px 20px;
    }

    .home-page-donation-slider-section-container {
      width: 100%;
      max-width: 1300px;
      margin: 0 auto;
      overflow: visible;
      position: relative;
      --home-page-donation-slider-section-gap: 25px;
    }

    .home-page-donation-slider-section-viewport {
      overflow: hidden;
      width: 100%;
      margin: 0 auto;
    }

    .home-page-donation-slider-section-dots {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .home-page-donation-slider-section-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      border: 0;
      background: #9ca8b5;
      opacity: 0.6;
      cursor: pointer;
      transition: transform 220ms ease, opacity 220ms ease, background-color 220ms ease;
    }

    .home-page-donation-slider-section-dot:hover {
      opacity: 0.9;
    }

    .home-page-donation-slider-section-dot:focus-visible {
      outline: 2px solid #2563eb;
      outline-offset: 2px;
    }

    .home-page-donation-slider-section-dot.is-active {
      background: #1e3a8a;
      opacity: 1;
      transform: scale(1.2);
    }

    .home-page-donation-slider-section-track {
      display: flex;
      gap: var(--home-page-donation-slider-section-gap);
      will-change: transform;
    }

    .home-page-donation-slider-section-card {
      flex: 0 0 calc((100% - (2 * var(--home-page-donation-slider-section-gap))) / 3);
      min-width: min(33.33%, calc((100% - (2 * var(--home-page-donation-slider-section-gap))) / 3));
      border-radius: 20px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .home-page-donation-slider-section-card-top {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin-bottom: 15px;
    }

    .home-page-donation-slider-section-icon {
      width: 55px;
      height: 55px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .home-page-donation-slider-section-icon img {
      width: 50px;
      height: 50px;
      display: block;
    }

    .home-page-donation-slider-section-badge {
      font-size: 15px;
      font-weight: 700;
      border-radius: 5px;
      padding: 5px 10px;
      line-height: 1;
    }

    .home-page-donation-slider-section-title {
      font-size: 27px;
      line-height: 1.1;
      letter-spacing: 0;
      margin: 0 0 10px;
      font-weight: 900;
      color: #213164;
    }

    .home-page-donation-slider-section-description {
      font-size: 17px;
      color: #000000;
      margin: 10px 0 25px;
      line-height: 1.3;
      height: 45px;
    }

    .home-page-donation-slider-section-stats {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      font-weight: 700;
      color: #000000;
    }

    .home-page-donation-slider-section-progress {
      width: 100%;
      height: 7px;
      border-radius: 999px;
      margin-top: 7px;
      background: rgba(22, 32, 46, 0.14);
      overflow: hidden;
    }

    .home-page-donation-slider-section-progress-fill {
      height: 100%;
      border-radius: 999px;
      background: #213164;
    }

    .home-page-donation-slider-section-button {
      margin-top: 20px;
      width: 100%;
      border: 0;
      border-radius: 999px;
      color: #ffffff;
      font-size: 17px;
      font-weight: 700;
      padding: 7px 15px;
      cursor: pointer;
      background: var(--home-page-donation-slider-section-accent);
    }

    .home-page-donation-slider-section-theme-green {
      --home-page-donation-slider-section-accent: #2a8239;
      background: #d1eae3;
    }

    .home-page-donation-slider-section-theme-purple {
      --home-page-donation-slider-section-accent: #6f2ba7;
      background: #ddd2ea;
    }

    .home-page-donation-slider-section-theme-red {
      --home-page-donation-slider-section-accent: #ef3136;
      background: #f6d6da;
    }

    .home-page-donation-slider-section-theme-blue {
      --home-page-donation-slider-section-accent: #2f6db6;
      background: #d7e4f4;
    }

    .home-page-donation-slider-section-theme-orange {
      --home-page-donation-slider-section-accent: #df6b1d;
      background: #f3decd;
    }

    .home-page-donation-slider-section-theme-green .home-page-donation-slider-section-icon,
    .home-page-donation-slider-section-theme-green .home-page-donation-slider-section-badge {
      background: #478341;
      color: #fff;
    }

    .home-page-donation-slider-section-theme-purple .home-page-donation-slider-section-icon,
    .home-page-donation-slider-section-theme-purple .home-page-donation-slider-section-badge {
      background: #632c87;
      color: #fff;
    }

    .home-page-donation-slider-section-theme-red .home-page-donation-slider-section-icon,
    .home-page-donation-slider-section-theme-red .home-page-donation-slider-section-badge {
      background: #ef2b2b;
      color: #fff;
    }

    .home-page-donation-slider-section-theme-blue .home-page-donation-slider-section-icon,
    .home-page-donation-slider-section-theme-blue .home-page-donation-slider-section-badge {
      background: #3876bb;
      color: #fff;
    }

    .home-page-donation-slider-section-theme-orange .home-page-donation-slider-section-icon,
    .home-page-donation-slider-section-theme-orange .home-page-donation-slider-section-badge {
      background: #e66f25;
      color: #fff;
    }

    @media (max-width: 1024px) {
      .home-page-donation-slider-section-card {
        flex-basis: calc((100% - var(--home-page-donation-slider-section-gap)) / 2);
        min-width: calc((100% - var(--home-page-donation-slider-section-gap)) / 2);
      }

      .home-page-donation-slider-section-dots {
        gap: 7px;
      }
    }

    @media (max-width: 560px) {
      .home-page-donation-slider-section-card {
        flex-basis: 100%;
        min-width: 100%;
      }

      .home-page-donation-slider-section-wrapper {
        padding: 1rem 0.75rem;
      }

      .home-page-donation-slider-section-dots {
        gap: 6px;
      }

      .home-page-donation-slider-section-title {
        font-size: 20px;
      }
    }
    
    
    


/************************************************ blog *********************************************************************************************/

.latest-blogs {
  padding: 80px 0;
  background: #ffffff;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.section-subtitle {
  font-size: 18px;
  color: #000;
  margin-bottom: 10px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: #1f3c88;
  margin-bottom: 50px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.blog-card {
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  text-align: left;
  background: #fff;
}

.blog-card.green {
  background: #eef7f1;
}

.blog-card.purple {
    background: #f9f1ff;
}

.blog-card.blue {
  background: #eef4ff;
}

.blog-card.orange {
  background: #fdeee5;
}

.blog-image {
  position: relative;
}

.blog-image img {
  width: 100%;
  height: auto;
  /*object-fit: cover;*/
  border-radius: 25px 25px 0 0;
}

.blog-date {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: #1f3c88;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 20px;
}

.blog-content {
  padding: 20px 15px;
}

.blog-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1f3c88;
  margin-bottom: 12px;
}

.blog-content p {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 20px;
}

.blog-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.read-more {
  background: #1f3c88;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
}

.cont{
  max-width: 1400px;
    margin: auto;
    padding: 0 20px;
    display: block;
    gap: 50px;
    align-items: center;
}



/* =========================
TABLET VIEW
=========================*/
@media (max-width:1024px){

.latest-blogs{
  padding:70px 0;
}

.blog-grid{
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}

.section-title{
  font-size:32px;
}

.blog-content{
  padding:22px;
}

.blog-content h3{
  font-size:17px;
}

}


/* =========================
MOBILE VIEW
=========================*/
@media (max-width:768px){

.latest-blogs{
  padding:60px 0;
}

.blog-grid{
  grid-template-columns: 1fr;
  gap:25px;
}

.section-title{
  font-size:28px;
}

.section-subtitle{
  font-size:16px;
}

.blog-image img{
  height:280px;
}

.blog-content{
  padding:20px;
}

.blog-content h3{
  font-size:18px;
}

.blog-content p{
  font-size:14px;
}

.blog-footer{
  flex-wrap:wrap;
  gap:8px;
}

}


/* =========================
SMALL MOBILE
=========================*/
@media (max-width:480px){

.section-title{
  font-size:24px;
}

.blog-image img{
  height:180px;
}

.blog-content{
  padding:18px;
}

.read-more{
  padding:7px 14px;
  font-size:12px;
}

.blog-footer{
  font-size:12px;
}

}

/************************************************* FAQ's ******************************************************************************************************/
.faq-section {
  padding: 80px 20px;
  background: #fff;
}


.faq-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}


.faq-para {
  color: #555;
  font-size: 18px;
  line-height: 1.6;
}

.faq-help {
  display: flex;
  align-items: center;
  background: #eef4ff;
  padding: 10px 20px;
  border-radius: 12px;
  margin: 25px 0;
  width: 400px;
}

.faq-icon {
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 18px;
}



.accordion-item{
  background: #eef4ff;
  border-radius: 18px;
  margin-bottom: 30px;
  overflow: hidden;

  /* subtle border (helps the shadow look cleaner) */
  border: 1px solid rgba(15, 23, 42, 0.06);

  /* shadow like your image */
  box-shadow:
    0 18px 35px rgba(15, 23, 42, 0.10),
    0 3px 10px rgba(15, 23, 42, 0.06);
}

.accordion-header {
    width: 100%;
    background: none;
    color: black; /*--#243c7c--*/
    border: none;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.accordion-body {
  display: none;
  padding: 0 20px 20px;
  color: #555;
}

.arrow {
  margin-top: 10px;
  transition: transform 0.3s ease;
}

/* ACTIVE */
.accordion-item.active .accordion-body {
  display: block;
}

.accordion-item.active .arrow {
  transform: rotate(180deg);
}

.join-btn {
    width: 220px;
    color: white;
    display: flex;
    background: #232e64;
    text-align: center;
    padding: 1px 20px;
    font-size: 20px;
    text-decoration: none;
    align-items: center;
    border-radius: 10px;
    gap: 10px;
    justify-content: center;
}
.btn-icon{
    display: block;
}

.btn-icon img{
    width: 40px;
    height: 40px;
    margin-top: 5px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .faq-container {
    grid-template-columns: 1fr;
  }
}



/* =========================
TABLET VIEW
=========================*/
@media (max-width:1024px){

.faq-container{
  grid-template-columns: 1fr 1fr;
  gap:40px;
  padding:0 20px;
}

.faq-help{
  width:100%;
}

.faq-para{
  font-size:15px;
}

.accordion-header{
  font-size:16px;
  padding:14px 18px;
}

.accordion-body{
  font-size:14px;
}

}



/* =========================
MOBILE VIEW
=========================*/
@media (max-width:768px){

.faq-container{
  grid-template-columns:1fr;
  gap:30px;
}

.faq-section{
  padding:50px 15px;
}

.faq-left{
  text-align:left;
}

.faq-help{
  width:100%;
  padding:12px 16px;
}

.faq-help h3{
  font-size:16px;
}

.faq-help p{
  font-size:14px;
}

.accordion-header{
  font-size:15px;
  padding:14px 16px;
}

.accordion-body{
  padding:0 16px 16px;
  font-size:14px;
}

.arrow{
  font-size:14px;
}

.join-btn{
  margin-top:10px;
}

}


/* =========================
SMALL MOBILE
=========================*/
@media (max-width:480px){

.faq-para{
  font-size:14px;
}

.faq-help{
  flex-direction:row;
  align-items:flex-start;
}

.faq-icon img{
  width:32px;
}

.accordion-header{
  font-size:14px;
}

.accordion-body{
  font-size:13px;
}

}

/****************************************************testimonial*************************************************************/
.testimonial-home{
  padding: 80px 0 76px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Heading */
.testimonial-home-heading{
  text-align: center;
  /*margin-bottom: 27px;*/
  /*margin-top: -29px;*/
}

.testimonial-home-title{
  font-size:36px;
  font-weight:700;
  margin:10px 0;
}

.testimonial-home-para{
  max-width:700px;
  margin:auto;
}

/* Slider Container */
.testimonial-slider-container{
  max-width:1200px;
  margin:auto;
  overflow:hidden;
}

/* Slider */
.testimonial-slider{
  display:flex;
  transition:transform 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Slide */
.testimonial-slide{
  min-width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding:0px;
}

/* Video */
.testimonial-slide iframe{
  width:100%;
  height:350px;
  border-radius:12px;
  border:none;
}

/* Text Card */
.testimonial-card{
  padding:25px;
  opacity:0;
  transform:scale(0.7) translateY(40px);
}

/* Strong Pop Animation */
.testimonial-card.active{
  animation:strongPop 1s cubic-bezier(0.18, 1.25, 0.4, 1);
  opacity:1;
  transform:scale(1) translateY(0);
}

/* Keyframes */
@keyframes strongPop {
  0% {
    opacity:0;
    transform:scale(0.6) translateY(60px);
  }
  50% {
    opacity:1;
    transform:scale(1.15) translateY(-10px);
  }
  75% {
    transform:scale(0.95) translateY(5px);
  }
  100% {
    transform:scale(1) translateY(0);
  }
}

/* Mobile */
@media(max-width:900px){
  .testimonial-slide{
    grid-template-columns:1fr;
  }
}

/* ============================= */
/* RIGHT SIDE LAYOUT (NAME+LOGO) */
/* ============================= */
.testimonial-header-box{
  background:white;
  border-radius:20px;
  padding:20px 25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.testimonial-header-left h3{
  margin:0;
  font-size:26px;
  font-weight:600;
}

.testimonial-header-left p{
  margin:5px 0 0;
  font-size:14px;
  color:#444;
}



/* Quote */
.testimonial-review-text{
  font-size:20px;
  margin-top:30px;
  line-height:1.6;
  font-style:italic;
}

/* ============================= */
/* "WRITE YOUR HONEST REVIEW" BAR */
/* (Added below quote)           */
/* ============================= */
.review-banner{
       margin-top: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 88px;
}

/* Left white pill */
.review-left{
     display: flex;
    align-items: center;
    gap: 12px;
    background: #243c7c;
    padding: 10px 15px;
    border-radius: 10px;
    flex: 1;
}

.review-left img{
  height:35px;                 /* adjust if your icon bigger/smaller */
  width:auto;
}

.review-left p{
     margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.05;
    /*font-family: serif;*/
    color: white;
}

/* Right icons */
.review-right{
  display:flex;
  align-items:center;
  gap:6px;
}

.review-red-box{
  width:44px;
  height:44px;
  background:#c40000;
  border-radius:6px;
}

.review-right img{
  height:27px;
  width:auto;
  cursor:pointer;
}


/* Arrow Buttons */
.testimonial-slider-container{
  position:relative;
}

.testimonial-arrow{
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #2c3e67;
    border: none;
    font-size: 16px;
    width: 15px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.testimonial-arrow.left{
  left:2px;
}

.testimonial-arrow.right{
  right:1px;
}

.testimonial-arrow:hover{
  background:#f0f0f0;
}




/* Base logo rules */
.testimonial-header-logo img.brand-logo{
  width: auto;
  object-fit: contain;
  display: block;
}

/* Different heights */
.logo-h-35{ height: 63px; }
.logo-h-40{ height: 29px; }
.logo-h-45{ height: 35px; }
.logo-h-50{ height: 55px; }
.logo-h-55{ height: 47px; }



/* Brand logo on top */
.testimonial-brand{
  margin-bottom:15px;
}

.testimonial-brand img{
  height:45px;
  width:auto;
}

/* Person name */
.testimonial-person h3{
  font-size:26px;
  margin:0;
  font-weight:600;
}

.testimonial-person p{
  margin:5px 0 18px;
  font-size:14px;
  color:#555;
}

/* Quote styling */
.testimonial-review-text{
 font-size: 17px;
    line-height: 1.7;
    color: #333;
    margin-bottom: -15px;
        margin-top: -2px;

    font-style: italic;
}

/* Social icons */
.testimonial-social{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.testimonial-social img{
  height:26px;
  width:auto;
  cursor:pointer;
}




/* =========================
TABLET (1024px)
========================= */
@media (max-width:1024px){

.testimonial-home{
padding:70px 20px 60px;
}

.testimonial-home-title{
font-size:32px;
}

.testimonial-home-para{
max-width:90%;
font-size:15px;
}

.testimonial-slide{
/*grid-template-columns:1fr;*/
gap:40px;
padding:30px 0;
}

.testimonial-slide iframe{
height:300px;
}

.testimonial-card{
padding:20px;
}

.testimonial-person h3{
font-size:24px;
}

.testimonial-review-text{
font-size:16px;
}

.review-banner{
gap:25px;
padding:14px 16px;
}

.review-left h2{
font-size:16px;
}

.testimonial-arrow{
width:38px;
height:38px;
font-size:24px;
}

.logo-h-35{height:55px;}
.logo-h-40{height:26px;}
.logo-h-45{height:30px;}
.logo-h-50{height:45px;}
.logo-h-55{height:40px;}

}


/* =========================
TABLET PORTRAIT (768px)
========================= */
@media (max-width:768px){

.testimonial-home{
padding:60px 15px 50px;
}

.testimonial-home-title{
font-size:28px;
}

.testimonial-home-para{
font-size:14px;
}

.testimonial-slide{
gap:30px;
}

.testimonial-slide iframe{
height:260px;
border-radius:10px;
}

.testimonial-card{
text-align:center;
padding:18px;
}

.testimonial-brand img{
margin:auto;
}

.testimonial-person h3{
font-size:22px;
}

.testimonial-person p{
font-size:13px;
}

.testimonial-review-text{
font-size:15px;
}

.review-banner{
flex-direction:column-reverse;
align-items:center;
gap:15px;
}

.review-left{
justify-content:center;
width:100%;
padding:10px 12px;
}

.review-right{
justify-content:center;
flex-wrap:wrap;
}

.review-right img{
height:24px;
}

.testimonial-arrow{
width:34px;
height:34px;
font-size:20px;
}

}


/* =========================
MOBILE (576px)
========================= */
@media (max-width:576px){

.testimonial-home{
padding:50px 12px 40px;
}

.testimonial-home-title{
font-size:24px;
}

.testimonial-home-para{
font-size:13px;
line-height:1.7;
}

.testimonial-slide iframe{
height:210px;
}

.testimonial-person h3{
font-size:20px;
}

.testimonial-person p{
font-size:12px;
}

.testimonial-review-text{
font-size:14px;
}

.review-left img{
height:24px;
}

.review-left h2{
font-size:14px;
}

.review-right img{
height:22px;
}

.testimonial-arrow{
width:30px;
height:30px;
font-size:18px;
}

.logo-h-35{height:42px;}
.logo-h-40{height:22px;}
.logo-h-45{height:26px;}
.logo-h-50{height:34px;}
.logo-h-55{height:30px;}

}


/* =========================
SMALL MOBILE (400px)
========================= */
@media (max-width:400px){

.testimonial-slide iframe{
height:190px;
}

.testimonial-home-title{
font-size:22px;
}

.testimonial-review-text{
font-size:13px;
}

.review-left h2{
font-size:13px;
}

.review-right img{
height:20px;
}

.testimonial-arrow{
width:28px;
height:28px;
font-size:16px;
}

}


/* Dots container */
.testimonial-dots {
  text-align: center;
  /*margin-top: 20px;*/
}

/* Default dot */
.testimonial-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 6px;
  background: #000;   /* 🔥 BLACK color */
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.4;       /* faded inactive */
  transition: all 0.3s ease;
}

/* Active dot */
.testimonial-dot.active {
  opacity: 1;
  transform: scale(1.3);
}

/*********************************************************Trusted & Recognized**************************************************************/

.ob2b-recogX-sec {
  padding: 80px 0;
  background: #eef5fb;
  overflow: hidden;
}
 
.ob2b-recogX-wrap {
  max-width: 1250px;
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
}
 
/* LEFT BLUE BLOCK */
.ob2b-recogX-left {
 
 
  width: 52%;
  /*background: url("https://ytds.org/ytds_2/asset/images/BG Trusted & Recognized-30.png") center/cover no-repeat;*/
  background-color: #0f2e54;
  border-radius: 18px;
  padding: 70px 60px;
  color: #fff;
  z-index: 1;
}
 
.ob2b-recogX-tag {
  font-size: 16px;
  opacity: 0.9;
}
 
.ob2b-recogX-title {
  font-size: 42px;
  line-height: 1.15;
  margin: 15px 0 30px;
}
 
.ob2b-recogX-sub {
  font-size: 22px;
  margin-bottom: 10px;
}
 
.ob2b-recogX-desc {
  font-size: 17px;
  line-height: 1.6;
  max-width: 475px;
}
 
/* SLIDER OVERLAP */
.ob2b-recogX-sliderWrap {
  width: 55%;
  margin-left: -120px;
  /* overlap magic */
  position: relative;
  z-index: 2;
  margin-top: -16px;
}
 
.ob2b-recogX-slider {
  position: relative;
  overflow: hidden;
}
 
.ob2b-recogX-track {
  display: flex;
  transition: transform 0.6s ease;
}
 
/* TWO CARDS */
.ob2b-recogX-card {
  min-width: 50%;
  padding: 20px;
  box-sizing: border-box;
}
 
.ob2b-recogX-card img {
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 18px 18px 0 0;
  /* top only */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  display: block;
}
 
/* SINGLE ARROW */
.ob2b-recogX-next {
  position: absolute;
  right: -61px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0f2e54;
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
 
/* MOBILE */
@media (max-width: 900px) {
  .ob2b-recogX-wrap {
    flex-direction: column;
  }
 
  .ob2b-recogX-left,
  .ob2b-recogX-sliderWrap {
    width: 100%;
    margin-left: 0;
  }
 
  .ob2b-recogX-card {
    min-width: 100%;
  }
}
 
 
 
.ob2b-recogX-cap {
  background: #fff;
  color: #0f2e54;
  border-radius: 0 0 18px 18px;
  padding: 14px 16px 16px;
  margin-top: -10px;
  /* makes it visually connected to the image card */
  text-align: center;
}
 
.ob2b-recogX-capTitle {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #0f2e54;
}
 
.ob2b-recogX-capSub {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #0f2e54;
  opacity: 0.9;
}




/* =========================
TABLET VIEW
=========================*/
@media (max-width:1024px){

.ob2b-recogX-wrap{
  padding:0 20px;
}

.ob2b-recogX-left{
  width:55%;
  padding:50px 40px;
}

.ob2b-recogX-title{
  font-size:34px;
}

.ob2b-recogX-sub{
  font-size:20px;
}

.ob2b-recogX-desc{
  font-size:16px;
}

.ob2b-recogX-sliderWrap{
  width:55%;
  margin-left:-70px; /* reduced overlap */
}

.ob2b-recogX-card{
  min-width:100%; /* only 1 card on tablet */
}

.ob2b-recogX-next{
  right:-25px;
}

}


/* =========================
MOBILE VIEW
=========================*/
@media (max-width:768px){

.ob2b-recogX-wrap{
  flex-direction:column;
  padding:0 15px;
}

.ob2b-recogX-left{
  width:100%;
  padding:40px 25px;
  border-radius:16px;
}

.ob2b-recogX-sliderWrap{
  width:100%;
  margin-left:0;
  margin-top:30px;
}

.ob2b-recogX-title{
  font-size:28px;
}

.ob2b-recogX-sub{
  font-size:18px;
}

.ob2b-recogX-desc{
  font-size:15px;
}

.ob2b-recogX-card{
  min-width:100%; /* ensure 1 card */
  padding:15px;
}

.ob2b-recogX-next{
  right:10px;
  width:40px;
  height:40px;
}

}


/* =========================
SMALL MOBILE
=========================*/
@media (max-width:480px){

.ob2b-recogX-sec{
  padding:50px 0;
}

.ob2b-recogX-title{
  font-size:24px;
}

.ob2b-recogX-capTitle{
  font-size:16px;
}

.ob2b-recogX-capSub{
  font-size:13px;
}

.ob2b-recogX-left{
  padding:35px 20px;
}

}
/****************** ********************************************************Make a Difference **************************************************************/
.make-a-diff-donation{
    text-align:center;
}
.impact-section{
  background:#122d51;
  padding:50px 20px;
  text-align:center;
}

.impact-section h2{
  color:#fff;
  font-size:40px;
  font-weight:700;
  margin-bottom:6px;
}

.impact-grid-donation {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 30px;
}

/* Card */
.impact-card-donation {
  position: relative;
  display: block;
  height: 260px;
  border-radius: 30px;
  overflow: hidden;
  text-decoration: none;
    margin-top: -30px;
}

/* Full PNG = card */
.card-img{
  width:100%;
  height:100%;
  object-fit:contain;  /*critical*/ 
  display:block;
} 

/* Text overlay */
 .card-text-donation{
  position: absolute;
  top: 75px;
  text-align: left;
  left: 45px;
}


    /* Ensure the card is the reference point for the image */
.selectable {
    position: relative;
    overflow: hidden; /* Keeps the image within rounded corners if you have them */
}

/* Style for the logo icon */
.card-icon-top-right {
       position: absolute;
    top: 10px;
    right: 44px;
    width: 61px;
    height: auto;
    z-index: 1;
}

/* Adjust the text container so it doesn't overlap the icon */
.card-text-donation {
    padding-right: 45px; 
}

.card-text-donation h4{
  font-size:26px;
  font-weight:700;
  margin-bottom:10px;
}

.card-text-donation p{
  font-size: 17px;
  line-height: 1.4;
  color: #000000;
}

.card-text-donation span{
  display: block;
  margin-top: 23px;
  font-size: 16px;
  color: #000000;
  background-color: #C5C5D9;
  padding: 5px 250px 5px 10px;
  border-radius: 10px;
}

/* Title colors */
.env1 {color:#4f8a3b;}
.emp1 {color:#6b3a8f;}
.edu1 {color:#2f6fb3;}
.job1 {color:#f07b28;} 

/* Hover */
.impact-card-donation:hover{
  transform:translateY(-2px);
  transition:.2s ease;
} 

.impact-card-donation {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
}

/* Background Image */
.card-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text Area */
.card-text-donation {
  position: absolute;
  top: 50px;
  left: 30px;
  max-width: 55%;
  color: #000;
}

.card-text-donation h3 {
  font-size: 30px;
  margin-bottom: 10px;
}

.card-text-donation p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* ✅ DONATE BUTTON (ON CURVE IMAGE) */
/* donate button */
.don-btn {
  position: absolute;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

/* color variants */
.environ { background: #4c8c3f; }
.empower { background: #6a2c91; }
.education { background: #2f6fb5; }
.employment { background: #e26a1a; }


/* =========================
LARGE TABLET (1024px)
========================= */
@media (max-width:1024px){

.impact-section{
padding:45px 20px;
}

.impact-section h2{
font-size:34px;
margin-bottom:40px;
}

.impact-grid-donation{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.impact-card-donation{
height:240px;
}

.card-text-donation{
top: 35px;
left: 25px;
max-width: 65%;
}

.card-text-donation h3{
font-size:26px;
}

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

.don-btn{
padding:9px 18px;
font-size:14px;
}

}


/* =========================
TABLET (768px)
========================= */
@media (max-width:768px){

.impact-section{
padding:40px 15px;
}

.impact-section h2{
font-size:30px;
margin-bottom:35px;
}

.impact-grid-donation{
grid-template-columns:1fr;
gap:22px;
}

.impact-card-donation{
height:230px;
}

.card-text-donation{
top:40px;
left:22px;
max-width:70%;
}

.card-text-donation h3{
font-size:24px;
}

.card-text-donation p{
font-size:14px;
line-height:1.5;
}

.don-btn{
padding:8px 18px;
font-size:14px;
}

}


/* =========================
MOBILE (576px)
========================= */
@media (max-width:576px){

.impact-section{
padding:35px 15px;
}

.impact-section h2{
font-size:26px;
margin-bottom:30px;
}

.make-a-diff-donation .title{
font-size:26px;
}

.impact-card-donation{
height:210px;
border-radius:20px;
}

.card-text-donation{
top:32px;
left:18px;
max-width:75%;
}

.card-text-donation h3{
font-size:22px;
}

.card-text-donation p{
font-size:13px;
}

.don-btn{
padding:7px 16px;
font-size:13px;
}

}


/* =========================
SMALL MOBILE (400px)
========================= */
@media (max-width:400px){

.impact-section h2{
font-size:22px;
}

.impact-card-donation{
height:200px;
}

.card-text-donation{
top:28px;
left:16px;
max-width:80%;
}

.card-text-donation h3{
font-size:20px;
}

.card-text-donation p{
font-size:12px;
}

.don-btn{
padding:6px 14px;
font-size:12px;
}

}

/**********************************************************************clients logo**********************************************************************/

.ob2b-brand-slider{
  width:100%;
  overflow:hidden;
  background:#fff;
  padding:25px 0px 70px;
}

.ob2b-brand-track{
  display:flex;
  align-items:center;
  gap:36px;
 animation: ob2b-scroll 55s linear infinite;

  width:max-content;
}

.ob2b-brand-item{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px; /* keeps spacing consistent */
}

.ob2b-brand-item img{

  max-width: 145px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* vertical divider */
.ob2b-divider{
  width:1px;
  height:120px;
  background:#e5e7eb;
  margin: 0 10px;
}


/* animation */
@keyframes ob2b-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}


@media(max-width:768px){
  .ob2b-brand-item img{
   max-height: 104px;
        max-width: 180px;
  }

  .ob2b-divider{
    height: 36px;
  }
}




/*************************** Gallery **********************************************/
.slider-wrap-gallery{
  width:100%;
  overflow:hidden;
  background:#fff;
  padding:10px 0;
  margin-bottom: 107px;
}

.slider-track-gallery{
  display:flex;
  width:max-content;
  animation: scroll 40s linear infinite;
}

.slide-gallery{
  flex:0 0 auto;
  width:240px;        /* adjust size */
  margin-right:18px;  /* spacing */
}

.slide-gallery img{
  width:100%;
  height:auto;       /* adjust height */
  object-fit:cover;
  border-radius:0px;  /* change if you want rounded */
  display:block;
}

/* Smooth continuous scroll */
@keyframes scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Pause on hover (optional) */
.slider-wrap-gallery:hover .slider-track{
  animation-play-state: paused;
}

/* Responsive */
@media(max-width:768px){
  .slide-gallery { width:180px; }
  .slide-gallery img{ height:110px; }
}


/*******************************************************************Become a Volunteer****************************************************************************************/
.volunteer-section{ 
    padding: 80px 20px; 
    /*width: 1300px;*/
    margin: 0 auto;
    margin-bottom:50px;
}

.volunteer-overlay{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.volunteer-container{
    max-width: 100%;
    margin: 0px 60px;
    padding: 35px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.volunteer-content{ flex: 1 1 600px; color:#fff; }
.volunteer-tag{ display:inline-block; font-size:20px; margin-bottom:5px; opacity:.9; }

.volunteer-title{
  font-size: 42px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.volunteer-text{ font-size:18px; opacity:.9; max-width:700px; margin:0; }

.volunteer-buttons{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }   /* margin-top: 78px; */

.volunteer-btn{
  padding: 10px 28px;
  font-size: 19px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: .25s ease;
  display: inline-block;
}

.volunteer-btn-light{ background:#fff; color:#000; }
.volunteer-btn-light:hover{ background:#f1f1f1; }

.volunteer-btn-green{ background:#4CAF50; color:#fff; }
.volunteer-btn-green:hover{ background:#43a047; }

/*@media (max-width: 992px){*/
/*  .volunteer-container{ flex-direction:column; text-align:center; padding:50px 25px; }*/
/*  .volunteer-title{ font-size:32px; }*/
/*  .volunteer-buttons{ justify-content:center; }*/
/*}*/

/*@media (max-width: 576px){*/
/*  .volunteer-container{ padding:40px 20px; }*/
/*  .volunteer-title{ font-size:26px; }*/
/*  .volunteer-text{ font-size:16px; }*/
/*  .volunteer-btn{ width:100%; text-align:center; }*/
/*}*/



/* =========================
TABLET VIEW
=========================*/
@media (max-width:1024px){

.volunteer-section{
  padding:35px 25px;
}

.volunteer-container{
  margin:0 20px;
  gap:0px;
  text-align: center;
  justify-content: center;
}

.volunteer-title{
  font-size:34px;
}

.volunteer-text{
  font-size:17px;
  max-width:none;
}

.volunteer-buttons{
  margin-top:40px;
}

}


/* =========================
SMALL TABLET
=========================*/
@media (max-width:768px){

.volunteer-container{
  flex-direction:column;
  text-align:center;
  padding:45px 20px;
  margin:0;
}

.volunteer-content{
  flex:unset;
}

.volunteer-title{
  font-size:30px;
}

.volunteer-text{
  font-size:16px;
}

.volunteer-buttons{
  justify-content:center;
  margin-top:30px;
}

}


/* =========================
MOBILE VIEW
=========================*/
@media (max-width:576px){

.volunteer-section{
  padding:25px 15px;
}

.volunteer-overlay{
  border-radius:14px;
}

.volunteer-title{
  font-size:24px;
}

.volunteer-text{
  font-size:15px;
}

.volunteer-buttons{
  flex-direction:column;
  gap:12px;
  width:100%;
}

.volunteer-btn{
  width:100%;
  text-align:center;
  padding:12px 18px;
}

}

@media (max-width:400px){
.volunteer-title{
  font-size:22px;
}

.volunteer-text{
  font-size:14px;
}

.volunteer-tag{
  font-size:16px;
}
.volunteer-container {
    padding: 25px 20px;
}
}


/**********************************************************footer******************************************************************************************/


.site-footer{
 background-image: url("https://ytds.org/ytds_2/asset/images/Website Footer-62 (1) (1).webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color:#fff;
  /*font-family:system-ui, sans-serif;*/
}

/* CTA STRIP */
.footer-cta{
  padding:18px;
  display:flex;
  justify-content:center;
}

.footer-cta-inner{
    margin-top: -67px;
  background:#fff;
  color:#1e3a5f;
  border-radius:14px;
  padding:14px 22px;
  max-width:1100px;
  width:100%;
  display:flex;
  align-items:center;
  gap:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.footer-logo img{     width: 67%;}

.footer-cta-text{
     flex: 1;
    font-size: 22px;
    font-weight: 600;
    margin-left: 168px;
}

.footer-cta-btn{
  background:#143d66;
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

/* MAIN FOOTER */
.footer-main{
  /*padding:40px 6%;*/
  /*display:grid;*/
  /*grid-template-columns:1fr 1fr 2fr;*/
  /*gap:88px;*/
    padding: 40px 5% 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 75px;
}

.footer-col h4{
        font-size: 25px;
  color:#ffcc33;
  margin-bottom:12px;
}

.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-col li{
     margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.5;
}

.footer-col a{
  color:#fff;
  text-decoration:none;
}

.footer-map img{
  width:100%;
  border-radius:8px;
}

/* BOTTOM INFO */
.footer-bottom{
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 0.7fr 0.6fr;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 5%;
    gap: 28px;
    align-items: start;
}

.footer-address h5,
.footer-contact h5{
  color:#ffcc33;
  margin-bottom:8px;
}

.footer-address p,
.footer-contact p{
  font-size:17px;
  line-height:1.6;
}

/* Reduce footer button width */
.footer-btn{
  display:inline-block;      /* prevents full-width */
  width:auto;                /* important */
  min-width:unset;           /* remove any forced width */
  padding:8px 12px;          /* ↓ reduced left/right padding */
  font-size:13px;            /* slightly smaller text */
  border-radius:8px;
  text-align:center;
}

/* Optional: even tighter */
.footer-btn.footer-btn-white,
.footer-btn.footer-btn-green{
  padding:8px 10px;
}

.footer-btn-white{
  background:#fff;
  color:#0f2f55;
}

.footer-btn-green{
  background:#2f6e2f;
  color:#fff;
}

/* COPYRIGHT */
.footer-copy{
  text-align: center;
    padding: 14px;
    background: white;
    font-size: 14px;
    color: black;
    font-weight: 500;
}

/* RESPONSIVE */
@media(max-width:900px){
  .footer-main,
  .footer-bottom{
    grid-template-columns:1fr 1fr;
  }
  .footer-cta-inner{
    flex-direction:column;
    text-align:center;
  }
}

/* Newsletter block */
.footer-newsletter-block{ margin-top: 26px; }
.footer-title{
  color:#ffffff;
  font-size:18px;
  font-weight:700;
  margin: 0 0 12px 0;
}

/* Form */
.footer-newsletter-form{
  display:flex;
  width:100%;
  max-width: 320px;
  background: rgba(255,255,255,.12);
  border-radius: 8px;
  overflow:hidden;
  
}
.footer-newsletter-form input{
  flex:1;
  border:0;
  outline:0;
   min-width: 0;         /* IMPORTANT: prevents overflow in flex */
  padding: 12px 10px;
  background: #ffffff;
  color: #0f2f55;
  font-size: 15px;
 
}
.footer-newsletter-form button{
  border:0;
 padding:8px 12px;     /* smaller button */
  background:#2f5fd7;
  color:#ffffff;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  line-height:1;
  white-space:nowrap;
}

@media (max-width:520px){
  .footer-newsletter-form{ max-width: 100%; }
  .footer-newsletter-form button{ padding:8px 10px; font-size:12px; }
}

.footer-social{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.social-link{
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: rgb(255 255 255 / 0%);
    display: flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  overflow:hidden;
}

.social-img{
     width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.add{
    font-size: 25px;
    color: #ffcc33;
    margin-bottom: 12px;
}


/* Optional: simple letter icons without any library (keeps code minimal) */
.social-ico::after{
  content: attr(aria-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#fff;
  letter-spacing:.2px;
}

/* Short labels to look cleaner */
/*.social-ico.fb::after{ content:"f"; }*/
/*.social-ico.x::after{ content:"x"; }*/
/*.social-ico.ig::after{ content:"ig"; }*/
/*.social-ico.wa::after{ content:"wa"; }*/
/*.social-ico.yt::after{ content:"yt"; }*/


.footer-contact .footer-btn{
 
  
  display:inline-block;
  width:auto;
  margin-top:10px;      /* space between rows */
  padding:8px 12px;
  font-size:13px;
}


/* Force 2 CTAs in one row */
.footer-cta-row{
 display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-cta-row .footer-btn{
  display:inline-block;
  width:fit-content;
  padding:8px 12px;
  font-size:13px;
  white-space:nowrap;
  text-decoration: none;
}

@media (max-width: 900px){
  .footer-bottom{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px){
  .footer-bottom{
    grid-template-columns: 1fr;
  }
}


.footer-cta-row .footer-btn{
  display:inline-flex;          /* icon + text in one row */
  align-items:center;
  gap:8px;                      /* space between icon & text */
  padding:8px 12px;
  font-size:13px;
  white-space:nowrap;
}

/* Icon sizing */
.footer-cta-row .btn-icon{
 width: 26px;
    height: 27px;
  display:block;
  object-fit:contain;
}

.footor-buttn{
    font-size: 17px;
    font-weight: 500;
}
    .footer-copy .heart{
  color: rgba(27,47,90,.92);
  margin: 0 4px;
}


.address-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.address-icon{
 width: 21px;
    height: 24px;
    object-fit: contain;
    display: block;
    margin-left: -28px;
}

.add{
  margin:0; /* remove default h4 margin */
}




/* =========================
TABLET VIEW
========================= */
@media (max-width: 1024px){

  .footer-cta-inner{
    margin-top: -40px;
    padding: 18px 20px;
    gap: 14px;
  }

  .footer-logo img{
    width: 110px;
  }

  .footer-cta-text{
    margin-left: 0;
    font-size: 18px;
    text-align: center;
  }

  .footer-main{
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 40px 4% 20px;
  }

  .footer-map{
    grid-column: 1 / -1;
  }

  .footer-map iframe{
    width: 100% !important;
    height: 300px !important;
  }

  .footer-bottom{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 25px 4%;
  }

  .footer-address,
  .footer-contact{
    margin-left: 0 !important;
  }

  .footer-col h4,
  .add{
    font-size: 22px;
  }

  .footer-col li,
  .footer-address p,
  .footer-contact p{
    font-size: 16px;
  }

  .footer-newsletter-form{
    max-width: 100%;
  }

  .footer-cta-row{
    align-items: flex-start;
  }
}



/* =========================
MOBILE VIEW
========================= */
@media (max-width: 768px){

  .footer-cta{
    padding: 14px;
  }

  .footer-cta-inner{
    margin-top: -25px;
    flex-direction: column;
    text-align: center;
    padding: 18px 16px;
    gap: 12px;
    border-radius: 12px;
  }

  .footer-logo img{
    width: 95px;
    margin: 0 auto;
    display: block;
  }

  .footer-cta-text{
    margin-left: 0;
    font-size: 17px;
    line-height: 1.5;
  }

  .footer-cta-btn{
    width: 100%;
    text-align: center;
  }

  .footer-main{
    /*grid-template-columns: 1fr;*/
    gap: 30px;
    padding: 35px 20px 15px;
  }

  .footer-col h4,
  .add{
    font-size: 20px;
  }

  .footer-col li{
    font-size: 15px;
    margin-bottom: 6px;
  }

  .footer-map iframe{
    width: 100% !important;
    height: 250px !important;
    border-radius: 16px !important;
  }

  .footer-bottom{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .footer-address,
  .footer-contact{
    margin-left: 0 !important;
  }

  .footer-address p,
  .footer-contact p{
    font-size: 15px;
    line-height: 1.6;
  }

  .footer-newsletter-form{
    max-width: 100%;
  }

  .footer-newsletter-form input{
    font-size: 14px;
    padding: 11px 10px;
  }

  .footer-newsletter-form button{
    font-size: 12px;
    padding: 8px 10px;
  }

  .footer-social{
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-cta-row{
    width: 100%;
    align-items: stretch;
    flex-direction: row;
  }

  .footer-cta-row .footer-btn{
    width: 100%;
    justify-content: center;
  }

  .footor-buttn{
    font-size: 15px;
  }

  .address-head{
    gap: 10px;
  }

  .address-icon{
    margin-left: 0;
    width: 18px;
    height: 20px;
  }

  .footer-copy{
    font-size: 13px;
    line-height: 1.6;
    padding: 12px 15px;
  }
}



/* =========================
SMALL MOBILE
========================= */
@media (max-width: 480px){

  .site-footer{
    background-position: center;
  }

  .footer-cta-inner{
    margin-top: -70px;
    padding: 16px 14px;
  }

  .footer-cta-text{
    font-size: 15px;
  }

  .footer-main{
    padding: 30px 15px 10px;
    text-align: center;
    grid-template-columns: 1fr;
  }

  .footer-col h4,
  .add{
    font-size: 18px;
  }

  .footer-col li,
  .footer-address p,
  .footer-contact p{
    font-size: 14px;
    padding: 0 5px;
  }

  .footer-map iframe{
    height: 220px !important;
  }

  .footer-newsletter-form{
    flex-direction: row;
  }

  .footer-newsletter-form input{
    font-size: 13px;
  }

  .footer-newsletter-form button{
    font-size: 11px;
    padding: 8px 9px;
  }

  .social-link{
    width: 32px;
    height: 32px;
  }

  .footer-cta-row .btn-icon{
    width: 22px;
    height: 22px;
  }

  .footor-buttn{
    font-size: 14px;
  }
}



/*********************************************************************************************************************************************************************************/
/********************************************************************************* About Page ************************************************************************************/
/*********************************************************************************************************************************************************************************/



/**************************************************************************** Hero ***********************************************************************************/
.abt-hero *,
.abt-hero *::before,
.abt-hero *::after { box-sizing: border-box; }

.abt-hero{
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 95px 20px 50px;
  color:#fff;
  text-align:center;
  overflow:hidden;
}

/* overlay */
.abt-overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

.abt-wrap{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
}

.abt-badge{
    display: inline-block;
    background: rgba(0, 0, 0, 0.35);
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.abt-heading{
  font-size:54px;
  font-weight:700;
  line-height:1.15;
  margin:0 0 10px;
}

.abt-heading span{ color:#ffd84d; }

.abt-text{
  max-width: 1000px;
  margin: 0 auto 15px;
  font-size: 22px;
  line-height: 1.5;
  opacity: 0.95;
}

.abt-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:40px;
  margin-bottom: 20px;
  width: 650px;
  margin-right: auto;
  margin-left: auto;
}

.abt-stat h2{
  font-size:60px;
  color:#ffd84d;
  margin:0 0 4px;
}

.abt-stat p{
  font-size:17px;
  line-height:1.4;
  margin:0;
}

.abt-btn{
  display:inline-block;
  background:#fff;
  color:#0b4d63;
  padding: 10px 60px;
  border-radius: 12px;
  font-size: 20px;
  font-weight:600;
  text-decoration:none;
  transition:0.3s ease;
}

.abt-btn:hover{
  background:#ffd84d;
  color:#000;
}

/* Responsive */
@media (max-width: 992px){
  .abt-heading{ font-size:42px; }
  .abt-stats{ grid-template-columns: repeat(2, 1fr); gap:36px; }
}

@media (max-width: 576px){
  .abt-hero{ padding:80px 15px 70px; }
  .abt-heading{ font-size:30px; }
  .abt-text{ font-size:16px; margin-bottom:36px; }
  .abt-stats {grid-template-columns: 1fr 1fr;
        gap: 36px; width: 100%;}
  .abt-stat h3{ font-size:34px; }
  .abt-stat p{ font-size:15px; }
}





/****************************** About (Our Story) *****************************************************/
.abt-story-section {
  padding: 80px 20px;
  background: #ffffff;
}

.abt-story-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
  align-items: center;
}

.abt-story-content{
    max-width: 606px;
}

/* LEFT CONTENT */
.abt-story-content p {
  height: auto;
}

.abt-story-content p {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 18px;
}

.abt-highlight {
  font-size: 18px;
  margin: 22px 0;
}

/* BUTTON */
.abt-story-btn {
    display: inline-block;
    /* margin-top: 20px; */
    background: #243a7c;
    color: #ffffff;
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.abt-story-btn:hover {
  background: #1b2f66;
}

/* RIGHT IMAGE */
.abt-story-visual {
  text-align: center;
}

.abt-story-image {
  max-width: 100%;
  height: auto;
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 992px) {
  .abt-story-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .abt-story-title {
    font-size: 34px;
  }
  
  .abt-story-content{
      max-width: none;
  }

  .abt-story-section {
    padding: 80px 15px;
  }
}

@media (max-width: 576px) {
  .abt-story-title {
    font-size: 28px;
  }

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

  .abt-story-btn {
    padding: 12px 24px;
    font-size: 15px;
  }
}


/*********************************** Our Purpose ****************************************************/
/* ===========================
   OUR PURPOSE SECTION
=========================== */
.abt-purpose-section {
  padding: 80px 20px;
  background: #ffffff;
}

.abt-purpose-wrap {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.abt-purpose-header {
  text-align: center;
  margin-bottom: 50px;
}

/* CARDS LAYOUT */
.abt-purpose-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* CARD */
.abt-purpose-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 420px;
}

/* BACKGROUND IMAGE */
.abt-purpose-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT */
.abt-purpose-content {
  position: relative;
  z-index: 2;
  padding: 115px 50px 0px 50px;
}

.abt-purpose-icon {
  width: 48px;
  margin-bottom: 20px;
}

.abt-purpose-content h3 {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

/* Vision text */
.abt-vision-card h3{
    color: #0b1d3a;
    font-size:18px;
}
.abt-vision-card h4,
.abt-vision-card p {
  color: #0b1d3a;
}

/* Mission text */
.abt-mission-card h3{
    color: #ffffff;
    font-size:18px;
}
.abt-mission-card h4,
.abt-mission-card p {
  color: #ffffff;
}

.abt-purpose-content h4 {
  font-size: 30px;
  line-height: 1.35;
  margin-bottom: 20px;
}

.abt-purpose-content p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 490px;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
    .abt-purpose-section {
        padding: 60px 50px;
    }
    .abt-purpose-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }
.abt-purpose-content {
        padding:180px 90px 0px;
  }
  .abt-mission-card h3 {
      font-size: 22px;
  }
  .abt-vision-card h3 {
      font-size: 22px;
  }
  .abt-purpose-content h4{
        margin-bottom: 20px;
        font-size: 42px;
    }
    .abt-purpose-content p{
        font-size:20px;
        max-width: none;
    }
    .abt-purpose-card {
    min-height: 500px;
}
}
@media (max-width: 992px) {
    .abt-purpose-section {
       padding: 60px 30px;
    }
  .abt-purpose-title {
    font-size: 32px;
  }
  .abt-purpose-content {
        padding:130px 40px 0px;
  }
  .abt-purpose-bg {
      width: 100%;
      height: auto;
    }
    .abt-purpose-card {
        min-height: 350px;
    }
    .abt-mission-card h3 {
      font-size: 18px;
    }
    .abt-vision-card h3 {
        font-size: 18px;
    }
    .abt-purpose-content h4{
        margin-bottom: 15px;
        font-size: 30px;
    }
    .abt-purpose-content p{
        font-size:18px;
    }
}
@media (max-width: 768px) {
    .abt-purpose-card {
        min-height: 430px;
    }
    .abt-purpose-content{
        padding: 130px 40px 0px;
    }
    .abt-purpose-content h4{
        font-size: 28px;
    }
}
@media (max-width: 576px) {
  .abt-purpose-section {
    padding: 70px 15px;
  }

  .abt-purpose-title {
    font-size: 26px;
  }

  .abt-purpose-content {
    padding: 100px 30px 30px;
  }

  .abt-purpose-content h4 {
    font-size: 22px;
  }
}
@media (max-width: 420px){
    .abt-purpose-content {
        padding: 70px 30px 30px;
    }
    .abt-purpose-card {
        min-height: auto;
    }
    .abt-purpose-content p{
        font-size:12px;
    }
    .abt-mission-card h3 {
        font-size: 13px;
        margin-bottom:5px;
    }
    .abt-vision-card h3 {
        font-size: 13px;
        margin-bottom:5px;
    }
    .abt-purpose-content h4 {
        font-size: 20px;
        margin-bottom: 5px;
    }
}



/********************************* Guiding Principle **********************************************/
.abt-guiding-section {
  background: #ffffff;
  padding: 60px 0px 40px;
  overflow: hidden;
}

.abt-guiding-container {
  max-width: 90%;
  margin: auto;
  padding: 20px 20px;
  text-align: center;
}

/* GRID */
.abt-guiding-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 20px;
}

/* ITEM */
.abt-guiding-item img {
  width: 90px;
  margin-bottom: 10px;
}

.abt-guiding-item h3 {
  font-size: 25px;
  font-weight: 600;
  color: #162c55;
  margin-bottom: 6px;
}

.abt-guiding-item p {
  font-size: 20px;
  color: #444;
}

/* FOOTER IMAGE */
.abt-guiding-footer img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .abt-guiding-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }

  .abt-guiding-title {
    font-size: 34px;
    margin-bottom: 50px;
  }
}

@media (max-width: 576px) {
  .abt-guiding-section {
    padding-top: 60px;
  }

  .abt-guiding-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .abt-guiding-title {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .abt-guiding-item img {
    width: 56px;
  }

  .abt-guiding-item h4 {
    font-size: 18px;
  }

  .abt-guiding-item p {
    font-size: 15px;
  }
}



/**************************************** Our Framework **********************************************/
/* ==========================
   OUR FRAMEWORK
========================== */
.abt-framework-section {
  padding: 100px 20px;
  background: #ffffff;
}

.abt-framework-header {
  text-align: center;
}

/* GRID */
.abt-framework-grid {
  max-width: 85%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 45px;
  margin-top: 50px;
}

/* CARD */
.abt-framework-card {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.abt-framework-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* CONTENT */
.abt-framework-content {
  position: relative;
  z-index: 2;
  padding: 40px 45px 20px;
}

.abt-framework-content small {
  font-size: 20px;
}

.abt-framework-content h3 {
  font-size: 40px;
  margin: 0px 0 5px;
  font-weight: 800;
}

.abt-env {color:#4f8a3b;}
.abt-emp {color:#6b3a8f;}
.abt-edu {color:#2f6fb3;}
.abt-job {color:#f07b28;} 

.abt-framework-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* STATS */
.abt-framework-stats {
  display: flex;
  gap: 50px;
  margin: 15px 0;
  color: #243a7c;
}

.abt-framework-stats strong {
  font-size: 45px;
  display: block;
}

.abt-framework-stats span {
  font-size: 18px;
}

/* BUTTON */
.abt-framework-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 13px 35px;
  font-size: 16px;  
  background: #243a7c;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
}

.abt-framework-content{
  display:flex;
  flex-direction:column;
  height:100%
}
.abt-framework-btn{
  margin-top:10px;
  margin-left:auto
}

/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 992px) {
  .abt-framework-grid {
    grid-template-columns: 1fr;
  }

  .abt-framework-title {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .abt-framework-section {
    padding: 70px 15px;
  }

  .abt-framework-content {
    padding: 30px;
  }

  .abt-framework-content h3 {
    font-size: 22px;
  }
}



/* =========================
TABLET VIEW
========================= */
@media (max-width:1024px){

.abt-framework-section{
  padding:80px 20px;
}

.abt-framework-grid{
  max-width:100%;
  /*grid-template-columns:1fr 1fr;*/
  gap:25px 25px;
}

.abt-framework-card{
  min-height:360px;
}

.abt-framework-content{
  padding:40px 30px 20px;
}

.abt-framework-content small{
  font-size:18px;
}

.abt-framework-content h3{
  font-size:32px;
}

.abt-framework-content p{
  font-size:15px;
}

.abt-framework-stats{
  gap:35px;
}

.abt-framework-stats strong{
  font-size:36px;
}

.abt-framework-stats span{
  font-size:18px;
}

.abt-framework-btn{
  padding:12px 28px;
  font-size:15px;
  margin-top: 0px;
}

}

/* =========================
MOBILE VIEW
========================= */
@media (max-width:992px){

.abt-framework-section{
  padding:70px 15px;
}

.abt-framework-grid{
  grid-template-columns:1fr;
  max-width:100%;
  gap:25px;
}

.abt-framework-card{
  min-height:auto;
}

.abt-framework-content{
  padding:30px 22px 20px;
}

.abt-framework-content small{
  font-size:16px;
}

.abt-framework-content h3{
  font-size:26px;
}

.abt-framework-content p{
  font-size:15px;
}

.abt-framework-stats{
  gap:25px;
  flex-wrap:wrap;
}

.abt-framework-stats strong{
  font-size:30px;
}

.abt-framework-stats span{
  font-size:16px;
}

.abt-framework-btn{
  margin-left:0;
  margin-top:12px;
}

}



/* =========================
SMALL MOBILE
========================= */
@media (max-width:480px){

.abt-framework-content{
  padding:25px 18px 18px;
}

.abt-framework-content h3{
  font-size:22px;
}

.abt-framework-content small{
  font-size:14px;
}

.abt-framework-content p{
  font-size:14px;
}

.abt-framework-stats{
  flex-direction:row;
  gap:12px;
}

.abt-framework-stats strong{
  font-size:26px;
}

.abt-framework-stats span{
  font-size:14px;
}

.abt-framework-btn{
  padding:10px 22px;
  font-size:14px;
}

}

/********************************** Youth Led Identity ******************************************************/
/* ==========================
   YOUTH LED SECTION
========================== */
.abt-youth-section{
  background:#132f55;
  padding:80px 20px;
  color:#fff;
}

.abt-youth-container{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:80px;
}

/* LEFT */
.abt-youth-left{ padding-top:40px; }

.abt-youth-kicker{
  font-size:24px;
  opacity: 0.9;
}

.abt-youth-heading{
  font-size:46px;
  font-weight:700;
  line-height:1.25;
  margin:10px 0 20px;
  text-align:left;
}

.abt-youth-desc{
  font-size:18px;
  line-height:1.7;
  max-width:610px;
  margin-bottom:30px;
}

.abt-youth-metrics{
  display:flex;
  gap:54px;
  margin-bottom:40px;
}

.abt-youth-metrics strong{
  font-size:60px;
  color:#ffd84d;
  display:block;
}

.abt-youth-metrics span{
  font-size:20px;
}

.abt-youth-cta{
  display:inline-block;
  background:#fff;
  color:#132f55;
  padding:10px 25px;
  font-size: 20px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
}

/* RIGHT GRID */
.abt-youth-right{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
  margin-left: -70px;
}

/* 🔑 RECTANGULAR CARDS (REFERENCE MATCH) */
.abt-youth-card{
  background: #0e223d;
  padding: 14px 15px;
  height: 185px;              /* <<< THIS IS THE KEY */
}

.abt-youth-card img{
  width:38px;
  margin-bottom:12px;
}

.abt-youth-card h3{
  color:#ffd84d;
  font-size:18px;
  margin:0 0 8px;
}

.abt-youth-card p{
  font-size:15px;
  line-height:1.5;
  margin:0;
}


/* =========================
TABLET VIEW
========================= */
@media (max-width:1024px){

.abt-youth-section{
  padding:90px 25px;
}

.abt-youth-container{
  /*grid-template-columns:1fr;*/
  gap:30px;
}

.abt-youth-left{
  padding-top:0;
  text-align:left;
}

.abt-youth-heading{
  font-size:40px;
}

.abt-youth-desc{
  font-size:16px;
}

.abt-youth-metrics{
  gap:40px;
}

.abt-youth-metrics strong{
  font-size:42px;
}

.abt-youth-metrics span{
  font-size:18px;
}

.abt-youth-right{
  grid-template-columns:repeat(2,1fr);
  margin-left:0;
}

.abt-youth-card{
  height:170px;
}

}

@media (max-width: 992px){
    .abt-youth-container{
      grid-template-columns:1fr;
      gap:40px;
    }
}

/* =========================
MOBILE VIEW
========================= */
@media (max-width:768px){

.abt-youth-section{
  padding:70px 20px;
}

.abt-youth-heading{
  font-size:32px;
}

.abt-youth-desc{
  font-size:15px;
}

.abt-youth-container{
  gap:45px;
}

.abt-youth-metrics{
  gap:25px;
  flex-wrap:wrap;
}

.abt-youth-metrics strong{
  font-size:34px;
}

.abt-youth-metrics span{
  font-size:16px;
}

.abt-youth-right{
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.abt-youth-card{
  height:auto;
  padding:16px;
}

.abt-youth-card h4{
  font-size:16px;
}

.abt-youth-card p{
  font-size:14px;
}

}


/* =========================
SMALL MOBILE
========================= */
@media (max-width:480px){

.abt-youth-heading{
  font-size:26px;
}

.abt-youth-kicker{
  font-size:15px;
}

.abt-youth-desc{
  font-size:14px;
}

.abt-youth-metrics{
  flex-direction:row;
  gap:12px;
 text-align: center;
}

.abt-youth-metrics strong{
  font-size:30px;
}

.abt-youth-metrics span{
  font-size:14px;
}
.abt-youth-right{
  grid-template-columns:1fr;
  gap:16px;
}
.abt-youth-cta{
  width:100%;
  text-align:center;
}

}

/* *********************************************************TESTIMONIAL ************************************************************/
.abt-youth-testimonial{
  grid-column: 1 / -1;
  background: #0e223d;
  padding: 20px 0px 20px 30px;
}

.abt-youth-testimonial p{
  font-size:15px;
  line-height:1.6;
  margin:0 0 16px;
}

.abt-youth-testimonial strong{
  display:block;
}

.abt-youth-testimonial span{
  font-size:14px;
  opacity:.85;
}

/* ==========================
   RESPONSIVE
========================== */
@media(max-width:992px){
  .abt-youth-container{
    grid-template-columns:1fr;
    gap:60px;
  }
  .abt-youth-left{ padding-top:0; }
  .abt-youth-heading{ font-size:36px; }
}

@media(max-width:576px){
  .abt-youth-right{ grid-template-columns:1fr; }
  .abt-youth-card{ height:auto; }
  .abt-youth-heading{ font-size:30px; }
}







/************************************** Verfied & Complaint ************************************************************/
/* ==========================
   VERIFIED & COMPLIANT
========================== */
.abt-trust-section{
  background:#ffffff;
  padding:80px 20px;
}

.abt-trust-container{
  max-width:1280px;
  margin:0 auto;
  text-align:center;
}

/* Heading */
.abt-trust-kicker{
  display:block;
  font-size:18px;
  margin-bottom:10px;
}

.abt-trust-title{
  font-size:42px;
  font-weight:700;
  color:#243a7c;
  margin-bottom:50px;
}

/* Grid */
.abt-trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top: 25px;
}

/* Cards */
.abt-trust-card{
  background:#eef5fb;
  border-radius:14px;
  padding:56px 26px 30px;
  text-align:left;
  position:relative;
  min-height:230px;
}

/* Badge */
.abt-trust-badge{
  position:absolute;
  top:20px;
  left:16px;
  background:#6f9a63;
  color:#fff;
  font-size:13px;
  padding:4px 10px;
  border-radius:4px;
  font-weight:600;
}

/* Icon */
.abt-trust-icon{
  position:absolute;
  top: 5px;
  right: 16px;
  width: 65px;
}

/* Text */
.abt-trust-card h3{
  font-size:20px;
  margin-top: 30px;
  margin-bottom:10px;
  color:#1f1f1f;
}

.abt-trust-card p{
  font-size:15px;
  line-height:1.55;
  color:#333;
}

/* ==========================
   RESPONSIVE
========================== */
@media(max-width:1024px){
  .abt-trust-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:576px){
  .abt-trust-title{
    font-size:32px;
  }

  .abt-trust-grid{
    grid-template-columns:1fr;
  }
}




/*************************************** Our Footprints ***************************************************/
/* ==========================
   OUR FOOTPRINT
========================== */
.abt-footprint-section{
  background:#ffffff;
  padding:80px 20px 80px;
}
 
.abt-footprint-container{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
 
/* Stats row */
.abt-footprint-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}
 
/* Each stat */
.abt-footprint-item{
  text-align:center;
}
 
/* Number */
.abt-footprint-number{
  font-size: 85px;
  font-weight:700;
  color:#1f2a63;
}
 
/* Label */
.abt-footprint-label{
  font-size:25px;
  color:#000;
}
 
/* ==========================
   RESPONSIVE
========================== */
@media(max-width:1024px){
  .abt-footprint-title{
    font-size:36px;
  }
}
@media(max-width: 992px){
    .abt-footprint-number {
        font-size: 70px;
    }
    .abt-footprint-label {
        font-size: 22px;
    }
}
@media(max-width: 768px){
    .abt-footprint-stats{
        grid-template-columns:repeat(2,1fr);
        row-gap:50px;
    }
}
@media(max-width:576px){
  .abt-footprint-title{
    font-size:30px;
  }
 
  .abt-footprint-desc{
    font-size:16px;
    margin-bottom:50px;
  }
 
  .abt-footprint-number{
    font-size:48px;
  }
 
  .abt-footprint-label{
    font-size:18px;
  }
 
  .abt-footprint-stats{
    grid-template-columns:1fr;
  }
}
 
 
 
/*============================================================map==========================================================*/
 

/**********************************************************************Corporates & Institutions******************************************************************/


.csr-section {
  background: linear-gradient(135deg, #0b2a4a, #0e3a66);
  padding: 80px 20px;
  color: #fff;
}

.csr-container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.csr-top-text {
  color:white;
}

.csr-container h2 {
  color:white;
}

.csr-subtext {
  max-width: 1000px;
  margin: 0px auto 50px;
  font-size: 20px;
  opacity: 0.9;
}

/* CARDS */
.csr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.csr-card {
  background: #eef4fb;
  color: #111;
  padding: 30px;
  border-radius: 20px;
  text-align: left;
}

.csr-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.csr-icon.orange { background: #ffe3cf; color: #f97316; }
.csr-icon.purple { background: #efe4ff; color: #7c3aed; }
.csr-icon.blue { background: #e0efff; color: #2563eb; }

.csr-card h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.csr-desc {
  font-size: 15px;
  margin-bottom: 20px;
}

/* LIST */
.csr-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.csr-card li {
  margin-bottom: 10px;
  padding-left: 26px;
  position: relative;
  font-size: 14px;
}

.csr-card li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #16a34a;
}

/* FOOTER */
.csr-footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
}

.csr-footer strong {
  font-size: 20px;
}

/* BUTTON */
.csr-btn {
  display: block;
  text-align: center;
  padding: 12px;
  background: #1e2a5a;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

.csr-btn:hover {
  background: #111c3f;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .csr-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .csr-container h2 {
    font-size: 32px;
  }
}
@media (max-width: 750px) {
  .csr-cards {
    grid-template-columns: 1fr;
  }
}

 
  


/********************************** Partner Section ***********************************************/
/* =========================
   PARTNERS SECTION
========================= */
.abt-partners{
  background:#fff;
  padding: 80px 20px;
}

.abt-partners-container{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

/*.abt-partners-subtitle{*/
/*  display:block;*/
/*  font-size:18px;*/
/*  margin-bottom:6px;*/
/*  color:#000;*/
/*}*/

/*.abt-partners-title{*/
/*  font-size:42px;*/
/*  font-weight:700;*/
/*  color:#243a7c;*/
/*  margin-bottom:60px;*/
/*}*/
/*.abt-partners-container p{*/
/*    font-size:20px;*/
/*    margin-bottom: 40px;*/
/*}*/

/* Grid with thin lines */
.abt-partners-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid #e3e6f2;
  border-left:1px solid #e3e6f2;
}

/* Cell */
.abt-partners-item{
  height:140px; /* rectangular like reference */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border-right:1px solid #e3e6f2;
  border-bottom:1px solid #e3e6f2;
}

/* Logo */
.abt-partners-item img{
  max-height: 130px;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* =========================
   RESPONSIVE
========================= */

/* Large Tablets */
@media (max-width:1024px){
  
  .abt-partners{
    padding:70px 20px 90px;
  }

  .abt-partners-title{
    font-size:36px;
  }

  .abt-partners-container p{
    font-size:18px;
  }

  .abt-partners-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .abt-partners-item{
    height:130px;
  }

}


/* Tablets & Small Tablets */
@media (max-width:768px){

  .abt-partners{
    padding:60px 18px 80px;
  }

  .abt-partners-title{
    font-size:30px;
  }

  .abt-partners-subtitle{
    font-size:16px;
  }

  .abt-partners-container p{
    font-size:17px;
  }

  .abt-partners-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .abt-partners-item{
    height:120px;
    padding:16px;
  }

}


/* Mobile */
@media (max-width:576px){

  .abt-partners{
    padding:50px 16px 70px;
  }

  .abt-partners-title{
    font-size:26px;
    margin-bottom:40px;
  }

  .abt-partners-container p{
    font-size:16px;
  }

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

  .abt-partners-item{
    height:110px;
  }

  .abt-partners-item img{
    max-height:90px;
  }

}


/* Small Mobile */
@media (max-width:380px){

  .abt-partners-title{
    font-size:24px;
  }

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

  .abt-partners-item{
    height:100px;
  }

}



/*********************************************************************************************************************************************************************************/
/********************************************************************** Team Page (About Page) ***********************************************************************************/
/*********************************************************************************************************************************************************************************/
.about-teams-page-hero {
  position: relative;
  width: 100%;
  min-height: auto;
  background-image: url('https://ytds.org/ytds_2/asset/images/Team Page-02 1 (1).webp');
  /* background comes from HTML */
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
  padding: 110px 20px 320px;
  /*overflow: hidden;*/
}

.about-teams-page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.about-teams-page-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  color: #fff;
}

.about-teams-page-hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.about-teams-page-hero h2 {
  font-size: 28px;
  font-weight: 600;
  color: #f6c851;
  margin-bottom: 25px;
}

.about-teams-page-hero p {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 25px;
  opacity: 0.95;
}

.about-teams-page-hero p span {
  color: #f6c851;
  font-weight: 600;
}

.about-teams-page-hero__btn {
  display: inline-block;
  background: #f6c851;
  color: #1f3c64;
  padding: 10px 35px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-teams-page-hero__btn:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
   .about-teams-page-hero {
    /*background-image: url('https://ytds.org/ytds_2/asset/images/Team%20Page-02%201.webp'); */
    /* replace with tablet image if needed */
    padding: 120px 20px 290px;
    background-position: center;
  }
  .about-teams-page-hero h1 { font-size: 38px; }
  .about-teams-page-hero h2 { font-size: 22px; }
}

@media (max-width: 768px) {
  /*.about-teams-page-hero { padding: 100px 20px 150px; }*/
    .about-teams-page-hero {
    /*background-image: url('https://ytds.org/ytds_2/asset/images/Team%20Page-02%201.webp'); */
    /* replace with mobile-optimized image */
    padding: 110px 15px 280px;
    background-position: center;
  }
  .about-teams-page-hero h1 { font-size: 30px; }
  .about-teams-page-hero h2 { font-size: 20px; }
  .about-teams-page-hero p { font-size: 16px; }
  .about-teams-page-hero__btn { padding: 12px 30px; font-size: 16px; }
}

@media (max-width: 480px) {
  .about-teams-page-hero {
    background-image: url('https://ytds.org/ytds_2/asset/images/V8 2.jpg'); /* replace with mobile-optimized image */
    padding: 100px 15px 200px;
    background-position: center;
  }
  .about-teams-page-hero h1 { font-size: 24px; }
  .about-teams-page-hero h2 { font-size: 18px; }
  .about-teams-page-hero p { font-size: 15px; }
}




/******************************************************************* Team - Page - Our Team Section **************************************************************************************/
/******************************************************************* 
Team - Page - Our Team Section 
**********************************************************************/

.about-teams-page-our-team {
  padding: 20px 40px 100px;
}

.about-teams-page-our-team__container {
  max-width: 1250px;
  margin: 0 auto;
}

/* Heading */
.about-teams-page-our-team__heading {
  text-align: center;
  margin-bottom: 60px;
}

.about-teams-page-our-team__heading span {
  display: block;
  font-size: 24px;
  margin-bottom: 5px;
  color: #000;
}

.about-teams-page-our-team__heading h2 {
  font-size: 46px;
  color: #243c7c;
  font-weight: 700;
  margin-bottom: 30px;
  word-spacing: 2px;
  letter-spacing: 0.7px;
}

/* Card */
.about-teams-page-our-team__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e9f0f9;
  width: 100%;
  min-height: auto;
  /* background comes from HTML */
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  border-radius: 25px;
  padding: 20px 100px;
  margin-bottom: 60px;
  overflow: hidden;
  /*gap: 30px;  better spacing */
}

/* Reverse Layout (Desktop only) */
.about-teams-page-our-team__card--reverse {
  flex-direction: row-reverse;
}

/* Content */
.about-teams-page-our-team__content {
  max-width: 750px;
}

.about-teams-page-our-team__content h3 {
  font-size: 32px;
  color: #2e4374;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 1px;
}

.about-teams-page-our-team__content h4 {
  font-size: 25px;
  margin-bottom: 15px;
  color: #000;
  font-weight: 500;
  letter-spacing: 1px;
}

.about-teams-page-our-team__content p {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 25px;
  color: #333;
}

.about-teams-page-our-team__contact {
  display: flex;
  gap: 30px;
  font-weight: 500;
  color: #2e4374;
}

/* Image Wrapper */
.about-teams-page-our-team__image-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  flex-shrink: 0;
}

.about-teams-page-our-team__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ================= Responsive ================= */

/* Tablet & Mobile */
@media (max-width: 992px) {
  
  .about-teams-page-our-team__card {
    flex-direction: column;
    text-align: center;
    padding: 40px 30px;
  }

  /* Remove reverse effect */
  .about-teams-page-our-team__card--reverse {
    flex-direction: column;
  }

  /* ✅ FORCE IMAGE ON TOP FOR ALL CARDS */
  .about-teams-page-our-team__image-wrapper {
    order: -1;
    margin-bottom: 20px;
  }

  .about-teams-page-our-team__content {
    max-width: 100%;
  }

  .about-teams-page-our-team__contact {
    justify-content: center;
    flex-wrap: wrap;
  }

  .about-teams-page-our-team__image-wrapper {
    width: 220px;
    height: 220px;
  }
}

/* Mobile */
@media (max-width: 576px) {

  .about-teams-page-our-team {
    padding: 20px 25px 60px;
  }

  .about-teams-page-our-team__heading h2 {
    font-size: 26px;
  }

  .about-teams-page-our-team__heading span {
    font-size: 20px;
  }

  .about-teams-page-our-team__content h3 {
    font-size: 22px;
  }

  .about-teams-page-our-team__content h4 {
    font-size: 18px;
  }

  .about-teams-page-our-team__content p {
    font-size: 15px;
  }

  .about-teams-page-our-team__card {
    padding: 30px 20px;
  }

  .about-teams-page-our-team__image-wrapper {
    width: 180px;
    height: 180px;
  }
}





/*********************************************************************************************************************************************************************************/
/*************************************************************************** Environment Page ************************************************************************************/
/*********************************************************************************************************************************************************************************/




/**************************************** Hero *******************************************************/
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Outfit:wght@400;600;700;800;900&display=swap');*/

.environment-section {
  --environment-left-width: 620px;   /* ✅ left content width */
  --environment-right-width: 520px;  /* ✅ right image width */
  --environment-gap: 20px;

  padding: 90px 20px;
  background: #f4f4f6;
}

/* Layout */
.environment-container {
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--environment-gap);
}

/* LEFT + RIGHT widths controlled from CSS variables */
/* .environment-left {
  width: min(100%, var(--environment-left-width));
}  */

.environment-right {
  width: min(100%, var(--environment-right-width));
  flex-shrink: 0;
}

/* ✅ ENVIRONMENT word uses Montserrat only */
.environment-tag {
  font-family: Impact, sans-serif;
  font-size: 75px;
  color: #4f8a3f;
  margin: 15px 0;
  line-height: 1;
  text-transform: uppercase;
}

/* Rest of text (kept as Outfit for closer match; change to Montserrat if you want) */
.environment-title,
.environment-description,
.environment-stats,
.environment-btn {
  /*font-family: "Outfit", system-ui, sans-serif;*/
}

.environment-title {
  font-size: 35px;
  font-weight: 800;
  line-height: 1.18;
  color: #1f2a55;
  margin: 0 0 20px;
}

/* Description */
.environment-description {
  font-size: 20px;
  font-weight: 400;
  color: #444;
  line-height: 1.2;
  margin: 0 0 30px;
}

.environment-description span {
  display: inline-block;
  margin-top: 6px;
  font-size: 30px;
  font-weight: 800;
  color: #1f2a55;
}

/* Stats */
.environment-stats {
  display: flex;
  gap: 70px;
  margin: 0 0 35px;
  flex-wrap: wrap;
}

.environment-stat h3 {
  font-size: 60px;
  font-weight: 900;
  color: #4f8a3f;
  margin: 0 0 5px;
  line-height: 1;
}

.environment-stat p {
    /*font-family: "Outfit", sans-serif;*/
    font-size: 18px;
    font-weight: 600;
    color: #1f2a55;
    margin: 0;
}

/* Button */
.environment-btn {
  display: inline-block;
  padding: 15px 35px;
  background: #4f8a3f;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}

.environment-btn:hover {
  background: #3b6d30;
  transform: translateY(-1px);
}

/* Image */
.environment-image {
  width: 90%;
  height: auto;
  display: block;
  margin: auto;
}

/* ================================
   RESPONSIVE
================================== */
@media (max-width: 1024px) {
  .environment-section {
    padding: 90px 18px;
  }

  .environment-container {
    flex-direction: column;
    text-align: center;
  }

  .environment-stats {
    justify-content: center;
    gap: 32px;
  }

  .environment-title {
    font-size: 44px;
  }

  .environment-tag {
    font-size: 58px;
  }
  .environment-stat h3 {
      font-size: 60px;
  }
  .environment-description{
      font-size: 22px;
  }
}

@media (max-width: 768px) {
  .environment-section {
    padding: 90px 18px;
  }

  .environment-container {
    flex-direction: column;
    text-align: center;
  }

  .environment-stats {
    justify-content: center;
    gap: 32px;
  }

  .environment-title {
    font-size: 35px;
  }

  .environment-tag {
    font-size: 58px;
  }
  .environment-stat h3 {
      font-size: 50px;
  }
  .environment-description{
      font-size: 18px;
  }
}

@media (max-width: 576px) {
  .environment-section {
    padding: 80px 15px;
    --environment-right-width: 92vw;
  }

  .environment-tag {
    font-size: 44px;
    font-weight: 900;
  }

  .environment-title {
    font-size: 34px;
    line-height: 1.2;
  }

  .environment-stats {
    /*flex-direction: column;*/
    align-items: center;
    gap: 22px;
  }

  .environment-btn {
    /*width: 100%;*/
    /*max-width: 270px;*/
    text-align: center;
  }
}



/********************************************* Strip ************************************************/
/* ================================
   ENVIRONMENT LOOP STRIP (WITH IMAGE ICON)
================================ */

.environment-text-strip {
  background-color: #ddeedd;
  padding: 30px 0;
  overflow: hidden;
}

.environment-text-slider {
  width: 100%;
  overflow: hidden;
}

/* track */
.environment-slider-track {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  white-space: nowrap;
  animation: environment-scroll 35s linear infinite;
  will-change: transform;
}

/* text */
.environment-tagtext {
  font-size: 35px;
  font-weight: 700;
  color: #1f3a2d;
  line-height: 1;
}

/* icon image */
.environment-dot {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: inline-block;
  flex: 0 0 auto;
}

/* infinite scroll */
@keyframes environment-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .environment-tagtext {
    font-size: 18px;
  }
  .environment-dot {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .environment-tagtext {
    font-size: 16px;
  }
  .environment-dot {
    width: 14px;
    height: 14px;
  }
}



/*********************************** Why Environment Matters ***************************************************/
.environment-urgency-section{
  position: relative;
  color: #fff;
  padding: 80px 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* watermark on right */
.environment-urgency-section::after{
  content:"";
  position:absolute;
  top:-40px;
  right:-40px;
  width:100%;
  height:auto;
  background:url("assets/img/Environment (The Urgency is Now).png") no-repeat;
  background-size:contain;
  opacity:0.12;
  pointer-events:none;
}

.environment-urgency-container{
  max-width:100%;
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* header */
.environment-urgency-header{
  text-align:center;
  margin-bottom:35px;
}

.environment-urgency-subtitle{
  color: white;
  opacity:.9;
}

.environment-urgency-title{
  color:#ffd86b;
}

.environment-urgency-desc{
  /*max-width:820px;*/
  color: white;
  opacity:.95;
}

/* ✅ FIX: 4 columns always on desktop */
.environment-urgency-cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0; /* dividers will handle spacing */
  margin:0 0 40px;
}

/* Card padding + divider using pseudo element */
.environment-urgency-card{
  padding:0 36px;
  position:relative;
}

/* ✅ Divider line between cards (not extra HTML) */
.environment-urgency-card:not(:last-child)::after{
  content:"";
  position:absolute;
  top:0px;
  right:0;
  width:1px;
  height:260px;
  background:rgba(255,255,255,0.25);
}

/* icon box */
.environment-urgency-icon{
  width:72px;
  height:72px;
  border-radius:14px;
  background:rgba(255,255,255,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 18px;
}

.environment-urgency-icon img{
  width:60px;
  height:auto;
  display:block;
}

.environment-urgency-card h3{
  margin:0 0 12px;
  font-size:28px;
  font-weight:800;
  color:#ffd86b;
}

.environment-urgency-card p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  opacity:.95;
}

/* footer */
.environment-urgency-footer{
  text-align:center;
  font-size:28px;
  font-weight:800;
}

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

/* Tablet */
@media(max-width:1100px){
  .environment-urgency-cards{
    grid-template-columns:repeat(2, 1fr);
    gap:50px 20px;
  }

  .environment-urgency-card{
    padding:0 20px;
  }

  .environment-urgency-card::after{
    display:none;
  }
  
}

/* Mobile */
@media(max-width:576px){
  .environment-urgency-section{
    padding:70px 16px 50px;
  }

  .environment-urgency-title{
    font-size:34px;
  }

  .environment-urgency-desc{
    font-size:16px;
  }

  .environment-urgency-cards{
    grid-template-columns:1fr;
    gap:40px;
  }

  .environment-urgency-footer{
    font-size:20px;
  }
  
  .environment-urgency-card{
    padding:0 20px;
    text-align: center;
  }

  .environment-urgency-card::after{
    display:none;
  }
  
  .environment-urgency-icon{
    margin: 0 auto 15px;
  }
}




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

.environment-methodology-section {
  padding: 80px 20px;
  background: #fff;
}

.environment-methodology-container {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.environment-methodology-header {
  text-align: center;
}

/*.environment-methodology-subtitle {*/
/*    color: #6a6a6a;*/
/*}*/

/* ICON ROW */
.environment-methodology-icons {
  display: grid;
    grid-template-columns: 0fr 0fr 0.4fr 0fr 0fr;
    align-items: center;
    /* column-gap: 36px; */
    margin-bottom: 24px;
    margin: auto;
    justify-content: center;
}

.environment-methodology-icon-wrap {
  display: flex;
  justify-content: center;
}

.environment-methodology-icon {
  width: 95px;
  height: 95px;
  background: #e9f5ef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.environment-methodology-icon img {
  width: 80px;
}

/* ICON ROW Strip Bwlow */
.environment-methodology-icons-1 {
  display: grid;
    grid-template-columns: 0fr 0fr 0.4fr 0fr 0fr;
    align-items: center;
    /* column-gap: 36px; */
    margin-bottom: 24px;
    margin: auto;
    justify-content: center;
}

.environment-methodology-icon-wrap-1 {
  display: none;
  justify-content: center;
}

.environment-methodology-icon-1 {
  width: 95px;
  height: 95px;
  background: #e9f5ef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.environment-methodology-icon-1 img {
  width: 80px;
}

.environment-methodology-connector-1 {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 35px;
}

.environment-methodology-connector-1 img {
  width: 265px;
}

.environment-methodology-connector-2 {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 35px 0 0;
}

.environment-methodology-connector-2 img {
  width: 265px;
}

/* TEXT ROW */
.environment-methodology-texts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
    column-gap: 90px;
    margin-top: 15px;
}

.environment-methodology-text h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
}

.environment-methodology-text p {
  font-size: 17px;
  line-height: 1.7;
  color: #6a6a6a;
  /*max-width: 300px; */
  margin: 0 20px;
}

/* HIGHLIGHT */
.environment-methodology-highlight {
  background: #e6f6ef;
  padding: 26px 30px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
}

.environment-methodology-highlight-icon {
  width: 90px;
  height: 90px;
  background: #478241;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.environment-methodology-highlight-icon img {
  width: 90px;
}

.environment-methodology-highlight-text h4 {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 6px;
}

.environment-methodology-highlight-text p {
  font-size: 17px;
  line-height: 1.7;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .environment-methodology-icons{
    display: none;
  }
  
  .environment-methodology-texts {
    /*grid-template-columns: 1fr;*/
    row-gap: 40px;
    column-gap: 0px;
  }
  
  .environment-methodology-icon-wrap-1{
      display:flex;
  }

  .environment-methodology-connector-1 .environment-methodology-connector-2 {
    display: none;
  }
  
  .environment-methodology-connector-1 img{
      width: 120px;
  }
  
  .environment-methodology-connector-1 {
      margin: 0 0 0 15px;
  }
  
  .environment-methodology-connector-2 img{
      width: 120px;
  }
  
  .environment-methodology-connector-2 {
      margin: 0 15px 0 0;
  }
  
}

@media (max-width: 576px) {

  .environment-methodology-icon-wrap-1{
      display:flex;
  }
  
  .environment-methodology-icons,
  .environment-methodology-texts {
    grid-template-columns: 1fr;
    row-gap: 40px;
    column-gap: 0px;
  }

  .environment-methodology-highlight {
    flex-direction: column;
    text-align: center;
    margin-top: 30px;
  }
  
  .environment-methodology-text p{
      max-width: auto;
  }
}




/**************************************************************** Environment - #PlantAMillionTree / #CleanTheHills / #SeedTheFuture******************************************************************************************/
.environment-flagship-section {
  padding: 80px 20px;
  background: #f5f7f6;
}

.environment-flagship-container {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.environment-flagship-header {
  text-align: center;
  margin-bottom: 40px;
}

.environment-flagship-subtitle {
    color: #666;
    line-height: 1.6;
}

/* LAYOUT */
.environment-flagship-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* LEFT SIDE */
.environment-flagship-small-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
/* RIGHT SIDE */
.environment-flagship-small-title-1 {
 font-size: 22px;
 font-weight: 700;
 margin-bottom: 15px;
 display: flex;
 align-items: center;
 text-align: right;
}
.environment-flagship-small-title span {
  width: 40px;
  height: 4px;
  background: #478241;
  margin-right: 12px;
}
.environment-flagship-small-title-1 span {
  width: 40px;
  height: 4px;
  background: #478241;
  margin-right: 12px;
}
.environment-flagship-small-title-div{   
    justify-items: right;
}

.environment-flagship-image-box {
  border-radius: 30px;
  overflow: hidden;
  border: 6px solid #d6e7df;
}

.environment-flagship-image-box img {
  width: 100%;
  display: block;
}

.environment-flagship-caption {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: #666;
}

/* STATS */
.environment-flagship-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.environment-flagship-stat {
  flex: 1;
  border: 5px solid #d6e7df;
  border-radius: 20px;
  padding: 15px;
  text-align: center;
  background: #fff;
}

.environment-flagship-stat img {
  height: 45px;
}

.environment-flagship-stat h4 {
  font-size: 35px;
  font-weight: 800;
  color: #1f2a55;
}

.environment-flagship-stat span {
  font-size: 17px;
  color: #666;
}

/* TEXT */
.environment-flagship-text {
  font-size: 17px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* DRIVE CARD */
.environment-flagship-drive {
  background: #dbeee6;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

.environment-flagship-drive-icon img {
  height: 70px;
}

.environment-flagship-drive small {
  font-size: 17px;
  color: #478241;
  display: block;
}

.environment-flagship-drive h5 {
  font-size: 23px;
  margin: 4px 0;
  font-weight: 700;
  color: #478241;
}

.environment-flagship-drive span {
  font-size: 14px;
  color: #444;
}

/* BUTTONS */
.environment-flagship-buttons {
  display: flex;
  align-items: center;
  gap: 25px;
}

.environment-flagship-btn-primary {
  background: #478241;
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 17px;
  text-decoration: none;
  font-weight: 600;
}

.environment-flagship-btn-secondary {
  color: #478241;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 2px solid #478241;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .environment-flagship-content {
    grid-template-columns: 1fr;
  }
  
  .environment-flagship-buttons{
      justify-content: center;
  }
  /*.environment-flagship-stats {*/
  /*  flex-direction: column;*/
  /*}*/
}

@media (max-width: 600px) {
  .environment-flagship-title {
    font-size: 32px;
  }
  
  .environment-flagship-stats {
    flex-direction: column;
    justify-content: center;
    margin: 20px 0;
    gap: 10px;
  }
  
  .environment-flagship-stat {
      width: 200px;
      margin: 0 auto;
  }
}

@media (max-width: 450px) {
    .environment-flagship-buttons{
        flex-wrap: wrap;
    }
}


/* ======================================================
   PROFESSIONAL NGO ANIMATION PACKAGE (CSS ONLY)
   Add this at the bottom of your CSS
====================================================== */

/* ========================
   KEYFRAMES
======================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


/* ========================
   SECTION LOAD ANIMATION
======================== */

.environment-flagship-section {
  animation: fadeIn 0.8s ease both;
}

.environment-flagship-header {
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.05s;
}

.environment-flagship-small-title,
.environment-flagship-small-title-div {
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.12s;
}

.environment-flagship-content {
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.18s;
}


/* ========================
   STAGGERED STATS ANIMATION
======================== */

.environment-flagship-stat {
  animation: fadeUp 0.85s ease both;
  transform-origin: center;
}

.environment-flagship-stat:nth-child(1) {
  animation-delay: 0.25s;
}

.environment-flagship-stat:nth-child(2) {
  animation-delay: 0.35s;
}

.environment-flagship-stat:nth-child(3) {
  animation-delay: 0.45s;
}


/* ========================
   CARD HOVER LIFT EFFECT
======================== */

.environment-flagship-stat,
.environment-flagship-drive {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.environment-flagship-stat:hover,
.environment-flagship-drive:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}


/* ========================
   IMAGE HOVER ZOOM
======================== */

.environment-flagship-image-box {
  transition: box-shadow 0.3s ease;
}

.environment-flagship-image-box img {
  transition: transform 0.6s ease;
}

.environment-flagship-image-box:hover img {
  transform: scale(1.05);
}

.environment-flagship-image-box:hover {
  box-shadow: 0 14px 28px rgba(47, 143, 91, 0.18);
}


/* ========================
   BUTTON HOVER EFFECT
======================== */

.environment-flagship-btn-primary,
.environment-flagship-btn-secondary {
  transition: transform 0.25s ease, box-shadow 0.25s ease, letter-spacing 0.25s ease;
}

.environment-flagship-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(47, 143, 91, 0.25);
}

.environment-flagship-btn-secondary:hover {
  letter-spacing: 0.5px;
}

/* ========================
   ACCESSIBILITY SUPPORT
======================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 992px) {
    .environment-flagship-drive{
            justify-content: center;
    }
}

@media (max-width: 460px) {
    .environment-flagship-drive {
        flex-wrap: wrap;
        text-align: center;
    }
}

@media (max-width: 360px) {
    .environment-flagship-content{
        display: block;
    }
        .environment-flagship-title {
        font-size: 30px;
    }
}


/* ========================
   ACCESSIBILITY SUPPORT
======================== */
/* ======================================================
   SPLIT BEFORE / AFTER PAN SLIDER (ADDED CSS)
   Reveals 1% → 100% of image smoothly
====================================================== */

/* Make image box relative */
.environment-flagship-image-box {
  position: relative;
}

/* Split wrapper */
.env-split {
  display: flex;
  position: relative;
  height: 420px;
  width: 100%;
}

/* Each half */
.env-half {
  width: 50%;
  overflow: hidden;
  position: relative;
}

/* IMPORTANT: Override old width:100% rule */
.env-half img {
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100% !important;
  width: auto !important;     /* keep natural width */
  object-fit: cover;

  transform: translateX(0);
  transition: transform 6s ease-in-out;
}

/* Center white divider */
.env-divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: #ffffff;
  transform: translateX(-50%);
  z-index: 5;
}

/* Before / After Labels */
.env-tag {
  position: absolute;
  top: 18px;
  padding: 6px 14px;
  background: #478241;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  font-size: 14px;
  z-index: 10;
}

.env-tag.before {
  left: 15px;
}

.env-tag.after {
  right: 15px;
}

/* Disable hover zoom for slider images only */
.environment-flagship-image-box:hover .env-half img {
  transform: none;
}

/* Responsive height */
@media (max-width: 992px) {
  .env-split {
    height: 300px;
  }
}

@media (max-width: 576px) {
  .env-split {
    height: 250px;
  }
}



/* ========================
   LOCATION LABEL (ENV)
======================== */

.env-location {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
    z-index: 20;
    background: white;
    color: black;
    padding: 8px 50px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease;
}

@media (max-width: 576px) {
  .env-location {
    font-size: 12px;
    padding: 6px 16px;
  }
}




/********************************************************************** Environment - #CleanTheHills / #SeedTheFuture ****************************************************************/
.environment-flagship-image-boxx {
  border-radius: 30px;
  overflow: hidden;
  border: 6px solid #d6e7df;
}

.environment-flagship-image-boxx img {
  width: 100%;
  display: block;
}

/* ========================
   IMAGE HOVER ZOOM
======================== */
.environment-flagship-image-boxx {
  transition: box-shadow 0.3s ease;
}

.environment-flagship-image-boxx img {
  transition: transform 0.6s ease;
}

.environment-flagship-image-boxx:hover img {
  transform: scale(1.05);
}

.environment-flagship-image-boxx:hover {
  box-shadow: 0 14px 28px rgba(47, 143, 91, 0.18);
}


@media (max-width: 576px){
    .environment-flagship-image-boxx {
        margin-top:20px;
    }
}





/************************************************************************ Environment Drive Volunteer Strip ***************************************************************************/
.environment-strip-volunteer-class-name {
  padding: 60px 20px;
  background: #f4f6f5;
}

.environment-strip-volunteer-container {
  max-width: 1200px;
  margin: auto;
}

.environment-strip-volunteer-content {
  background: linear-gradient(
    90deg,
    #0f8a3c 0%,
    #0e6d3b 40%,
    #0d4d35 100%
  );
  border-radius: 28px;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* LEFT CONTENT */
.environment-strip-volunteer-left h3 {
  font-size: 40px;
  font-weight: 800;
  color: #f4d46c; /* golden yellow */
  margin-bottom: 5px;
}

.environment-strip-volunteer-left p {
  font-size: 17px;
  color: #ffffff;
  line-height: 1.6;
  opacity: 0.95;
}

/* RIGHT BUTTONS */
.environment-strip-volunteer-right {
  display: flex;
  gap: 18px;
  align-items: center;
}

/* PRIMARY BUTTON */
.environment-strip-btn-primary {
  background: #4f8f4b;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.environment-strip-btn-primary:hover {
  background: #3f7c3c;
}

/* SECONDARY BUTTON */
.environment-strip-btn-secondary {
  background: #ffffff;
  color: #1f2a55;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.environment-strip-btn-secondary:hover {
  background: #f1f1f1;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .environment-strip-volunteer-content {
    flex-direction: column;
    text-align: center;
    padding: 40px 30px;
  }

  .environment-strip-volunteer-right {
    width: 75%;
  }

  .environment-strip-btn-primary,
  .environment-strip-btn-secondary {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 576px) {
    .environment-strip-volunteer-right {
        flex-direction: column;
        width: 100%;
      }
  .environment-strip-volunteer-left h2 {
    font-size: 28px;
  }

  .environment-strip-volunteer-left p {
    font-size: 16px;
  }
}




/********************************* Our environmental impact ************************************************/
/* =========================
   Our Environmental Impact
   Class Prefix: environment-impact-class-name
   Background image in HTML
========================= */

.environment-impact-class-name{
  position: relative;
  overflow: hidden;
  padding: 80px 20px;
  color: #fff;
}

/* Background layer (image is inside HTML) */
.environment-impact-class-name__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.environment-impact-class-name__bg-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Light overlay so text stays readable, matches reference */
.environment-impact-class-name__bg-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
}

.environment-impact-class-name__container{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* HEADER */
.environment-impact-class-name__header{
  text-align: center;
  margin-bottom: 48px;
}

.environment-impact-class-name__eyebrow{
    color: white;
  opacity: 0.9;
  margin-bottom: 10px;
}

.environment-impact-class-name__title{
  color: #f4d46c;
}

.environment-impact-class-name__subtitle{
    color: white;
  opacity: 0.92;
  max-width: none;
}

/* STATS ROW */
.environment-impact-class-name__stats{
  display: flex;
  justify-content: space-between;
  gap: 0px;
  flex-wrap: wrap;
  margin: 36px 0 64px;
}

.environment-impact-class-name__stat{
  flex: 1;
  min-width: 170px;
  text-align: center;
}

.environment-impact-class-name__stat img{
  height: 60px;
  filter: brightness(0) invert(1); /* makes icon white like reference */
  opacity: 0.95;
}

.environment-impact-class-name__stat h3{
  font-size: 45px;
  font-weight: 800;
  margin: 0px;
  color: #f4d46c;
}

.environment-impact-class-name__stat span{
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.environment-impact-class-name__stat small{
  display: block;
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.3;
}

/* BANNER */
/*.environment-impact-class-name__banner{*/
/*  position: relative;*/
/*  border-radius: 26px;*/
/*  overflow: hidden;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: space-between;*/
/*  padding: 44px 46px;*/
/*  gap: 36px;*/
/*}*/

/*.environment-impact-class-name__banner-bg{*/
/*  position: absolute;*/
/*  inset: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: cover;*/
/*  object-position: center;*/
/*  z-index: 0;*/
/*}*/

/*.environment-impact-class-name__banner-overlay{*/
/*  position: absolute;*/
/*  inset: 0;*/
/*  z-index: 1;*/
/*}*/

/*.environment-impact-class-name__banner-left{*/
/*  position: relative;*/
/*  z-index: 2;*/
/*  margin-left: 50px;*/
/*}*/

/*.environment-impact-class-name__banner-right{*/
/*  position: relative;*/
/*  z-index: 2;*/
/*  margin-right: 50px;*/
/*}*/

/*.environment-impact-class-name__banner-title{*/
/*  margin: 0 0 20px;*/
/*  font-size: 40px;*/
/*  line-height: 1.06;*/
/*  font-weight: 800;*/
/*}*/

/*.environment-impact-class-name__banner-title strong{*/
/*  color: #fff;*/
/*}*/

/*.environment-impact-class-name__banner-title span{*/
/*  color: #f4d46c;*/
/*}*/

/*.environment-impact-class-name__banner-text{*/
/*  margin: 0 0 20px;*/
/*  font-size: 16px;*/
/*  line-height: 1.4;*/
/*  opacity: 0.95;*/
/*}*/

/*.environment-impact-class-name__btn{*/
/*  display: inline-block;*/
/*  background: #478241;*/
/*  color: #fff;*/
/*  padding: 13px 26px;*/
/*  border-radius: 10px;*/
/*  text-decoration: none;*/
/*  font-weight: 700;*/
/*  font-size: 18px;*/
/*}*/

/* Right equivalents */
/*.environment-impact-class-name__banner-right{*/
/*  text-align: right;*/
/*  min-width: 220px;*/
/*}*/

/*.environment-impact-class-name__eq{*/
/*  margin-bottom: 18px;*/
/*}*/

/*.environment-impact-class-name__eq:last-child{*/
/*  margin-bottom: 0;*/
/*}*/

/*.environment-impact-class-name__eq h4{*/
/*  margin: 0 0 4px;*/
/*  font-size: 34px;*/
/*  font-weight: 800;*/
/*  color: #f4d46c;*/
/*}*/

/*.environment-impact-class-name__eq span{*/
/*  font-size: 13px;*/
/*  line-height: 1.25;*/
/*  opacity: 0.95;*/
/*  display: inline-block;*/
/*}*/




/* BANNER */
.environment-impact-class-name__banner{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 46px;
  gap: 36px;
}

/* Background image */
.environment-impact-class-name__banner-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Overlay */
.environment-impact-class-name__banner-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* LEFT */
.environment-impact-class-name__banner-left{
  position: relative;
  z-index: 2;
  margin-left: 50px;
}

/* RIGHT */
.environment-impact-class-name__banner-right{
  position: relative;
  z-index: 2;
  margin-right: 50px;
  text-align: right;
  min-width: 220px;
}

/* TITLE */
.environment-impact-class-name__banner-title{
  margin: 0 0 20px;
  font-size: 40px;
  line-height: 1.06;
  font-weight: 800;
}

.environment-impact-class-name__banner-title strong{
  color: #fff;
}

.environment-impact-class-name__banner-title span{
  color: #f4d46c;
}

/* TEXT */
.environment-impact-class-name__banner-text{
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.95;
}

/* BUTTON */
.environment-impact-class-name__btn{
  display: inline-block;
  background: #478241;
  color: #fff;
  padding: 13px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
}

/* STATS */
.environment-impact-class-name__eq{
  margin-bottom: 18px;
}

.environment-impact-class-name__eq:last-child{
  margin-bottom: 0;
}

.environment-impact-class-name__eq h4{
  margin: 0 0 4px;
  font-size: 34px;
  font-weight: 800;
  color: #f4d46c;
}

.environment-impact-class-name__eq span{
  font-size: 13px;
  line-height: 1.25;
  opacity: 0.95;
  display: inline-block;
}






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

@media (max-width: 567px){

  .environment-impact-class-name__banner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    gap: 20px;
  }

  .environment-impact-class-name__banner-left{
    margin: 0;
  }

  .environment-impact-class-name__banner-right{
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .environment-impact-class-name__banner-title{
    font-size: 26px;
    line-height: 1.2;
  }

  .environment-impact-class-name__banner-text{
    font-size: 14px;
  }

  .environment-impact-class-name__btn{
    font-size: 16px;
    padding: 12px 20px;
  }

  .environment-impact-class-name__eq h4{
    font-size: 24px;
  }

  .environment-impact-class-name__eq span{
    font-size: 12px;
  }

  /* ✅ MOBILE IMAGE */
  .environment-impact-class-name__banner-bg{
    content: url("../images/Environment-(Measurable-Outcomes)-Mobile-View.webp");
  }

}






/* ================= EXTRA RESPONSIVE IMPROVEMENTS ================= */

/* Tablet Improvements */
@media (max-width: 992px){

  /* Better spacing for stats */
  .environment-impact-class-name__stats{
    gap: 25px;
  }

  .environment-impact-class-name__stat{
    flex: 0 0 45%; /* 2 per row */
  }

  /* Better spacing */
  .environment-impact-class-name__subtitle{
    max-width: 90%;
  }

  /* Banner spacing */
  .environment-impact-class-name__banner{
    gap: 25px;
  }

}

@media (max-width: 1024px) {
    .environment-impact-class-name__banner-left{
        margin-left: 0px;
    }
    .environment-impact-class-name__banner-right{
        margin-right: 0px;
    }
}
@media (max-width: 576px){

  /* HEADER spacing */
  .environment-impact-class-name__header{
    margin-bottom: 30px;
  }

  /* STACK ALL STATS IN ONE COLUMN */
  .environment-impact-class-name__stats{
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .environment-impact-class-name__stat{
    width: 100%;
    max-width: 260px;
  }

  /* BANNER FULL STACK */
  .environment-impact-class-name__banner{
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 28px 18px;
  }

  /* LEFT CONTENT CENTER */
  .environment-impact-class-name__banner-left{
    margin-left: 0;
  }

  /* RIGHT CONTENT STACK */
  .environment-impact-class-name__banner-right{
    margin-right: 0;
    display: flex;
    flex-direction: column; /* 👈 IMPORTANT */
    align-items: center;
    gap: 15px;
  }

  .environment-impact-class-name__eq{
    text-align: center;
  }

}






/***************************************************************** Environment - How can you help *********************************************/
/* SECTION */
.environment-how-can-you-help-classname {
  background: #f4f4f4;
  padding: 80px 20px;
}

.environment-how-can-you-help-container {
  width: 1200px;
  max-width: 90%;
  margin: auto;
}

/* HEADER */
.environment-how-can-you-help-header {
  text-align: center;
  margin-bottom: 70px;
}


/* CARDS GRID */
.environment-how-can-you-help-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* CARD DEFAULT */
.environment-how-can-you-help-card {
  background: #cfe1db;
  border-radius: 20px;
  padding: 20px 25px;
  position: relative;
  transition: 0.4s ease;
  border: 2px solid #478241;
}

/* ICON */
.environment-how-can-you-help-icon {
  position: absolute;
  top: -40px;
  right: -30px;
  background: #ffffff;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.environment-how-can-you-help-icon img {
  height: 60px;
}

/* TEXT */
.environment-how-can-you-help-card h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 1.2px;
  /*color: #1f2a55;*/
}

.environment-how-can-you-help-card small {
    font-size: 18px;
    color: #333;
    display: block;
    margin-bottom: 20px;
}

.environment-how-can-you-help-card p {
  font-size: 16px;
  color: #444;
  margin-bottom: 15px;
  font-weight: 700;
}

.environment-how-can-you-help-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.environment-how-can-you-help-card ul li {
  font-size: 15x;
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}

.environment-how-can-you-help-card ul li:before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #478241;
}

/* BUTTON */
.environment-how-can-you-help-card a {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  background: #478241;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

/* HOVER EFFECT = THIRD CARD STYLE */
.environment-how-can-you-help-card:hover {
  background: #4b8c4a;
  border-color: #4b8c4a;
  transform: translateY(-8px);
}

.environment-how-can-you-help-card:hover h3 {
  color: #ffd86b;
}

.environment-how-can-you-help-card:hover small,
.environment-how-can-you-help-card:hover p,
.environment-how-can-you-help-card:hover ul li {
  color: #fff;
}

.environment-how-can-you-help-card:hover ul li:before {
  color: #ffd86b;
}

.environment-how-can-you-help-card:hover a {
  background: #ffd86b;
  color: #1f2a55;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .environment-how-can-you-help-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .environment-how-can-you-help-cards {
    grid-template-columns: 1fr 1fr;
  }

  .environment-how-can-you-help-card {
    padding: 50px 25px 20px;
  }
}


@media (max-width: 600px) {
  .environment-how-can-you-help-cards {
    grid-template-columns: 1fr ;
    margin: 0 30px 0px 20px;
    gap: 60px;
  }

  .environment-how-can-you-help-card {
    padding: 50px 25px 20px;
  }
}




/******************************************************************************************************************************************************************************/
/*************************************************************** #PlantAmillionTrees Page *************************************************************************************/
/******************************************************************************************************************************************************************************/
 
 
/********************************** PlantAMillionTrees - Page - Hero *************************************************/
.plantamilliontrees-page-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px 30px;
  overflow: hidden;
}

/* Background image behaves like CSS background-cover */
.plantamilliontrees-page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Overlay */
.plantamilliontrees-page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content */
.plantamilliontrees-page-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
}

/* Eyebrow */
.plantamilliontrees-page-hero__eyebrow {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
  opacity: 0.9;
}

/* Title */
.plantamilliontrees-page-hero__title {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 25px;
  letter-spacing: -1px;
}

/* Description */
.plantamilliontrees-page-hero__description {
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 70px;
  opacity: 0.95;
}

/* Button */
.plantamilliontrees-page-hero__btn {
  display: inline-block;
  background: #f2c94c;
  color: #000;
  font-size: 20px;
  font-weight: 600;
  padding: 16px 40px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.plantamilliontrees-page-hero__btn:hover {
  background: #e0b63f;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 992px) {
  .plantamilliontrees-page-hero__title {
    font-size: 52px;
  }
  .plantamilliontrees-page-hero__description {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .plantamilliontrees-page-hero {
    min-height: 85vh;
  }
  .plantamilliontrees-page-hero__eyebrow {
    font-size: 18px;
  }
  .plantamilliontrees-page-hero__title {
    font-size: 38px;
  }
  .plantamilliontrees-page-hero__description {
    font-size: 16px;
  }
  .plantamilliontrees-page-hero__btn {
    font-size: 16px;
    padding: 14px 30px;
  }
}

@media (max-width: 400px) {
    .plantamilliontrees-page-hero__title{
        font-size: 32px;
    }
}



/********************************* PlantAMillionTrees- Page - The Problems We are Facing **************************************************/

.plantamilliontrees-page-thecrisis {
  position: relative;
  padding: 80px 20px;
  overflow: hidden;
}

.plantamilliontrees-page-thecrisis::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(47, 111, 62, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.plantamilliontrees-page-thecrisis__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.plantamilliontrees-page-thecrisis__header {
  text-align: center;
  margin-bottom: 35px;
}

/*.plantamilliontrees-page-thecrisis__eyebrow {*/
/*  font-size: 22px;*/
/*  margin-bottom: 10px;*/
/*  color: #222;*/
/*}*/

/*.plantamilliontrees-page-thecrisis__title {*/
/*  font-size: 48px;*/
/*  font-weight: 800;*/
/*  color: #2d3f73;*/
/*  margin-bottom: 18px;*/
/*}*/

/*.plantamilliontrees-page-thecrisis__subtitle {*/
/*  max-width: 750px;*/
/*  margin: 0 auto;*/
/*  font-size: 20px;*/
/*  line-height: 1.6;*/
/*  color: #333;*/
/*}*/

/* Grid */
.plantamilliontrees-page-thecrisis__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding-top: 10px;
  align-items: stretch;
  justify-content: center;
}

/* Card */
.plantamilliontrees-page-thecrisis__card {
  position: relative;
  background: #d0e9e2;
  padding: 60px 24px 30px;
  border-radius: 26px;
  border: 2.5px solid #2f6f3e;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.plantamilliontrees-page-thecrisis__card:hover {
  transform: translateY(-12px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.18);
}

/* Icon */
.plantamilliontrees-page-thecrisis__icon {
  position: absolute;
  top: 10px;
  right: 22px;
  width: auto;
  height: 75px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

/* Card content */
.plantamilliontrees-page-thecrisis__card h3 {
  font-size: 24px;
  font-weight: 700;
  color: #2d3f73;
  margin-bottom: 14px;
}

.plantamilliontrees-page-thecrisis__card p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 26px;
  flex-grow: 1;
}

.plantamilliontrees-page-thecrisis__divider {
  height: 2px;
  background: #2f6f3e;
  margin-bottom: 18px;
  opacity: 0.85;
}

.plantamilliontrees-page-thecrisis__stat strong {
  display: block;
  font-size: 24px;
  color: #2d3f73;
}

.plantamilliontrees-page-thecrisis__stat span {
  font-size: 14px;
  color: #444;
}

/* ============================= TABLET ============================= */
/* 2 cards in one row and centered */
@media (max-width: 1024px) {
  .plantamilliontrees-page-thecrisis__title {
    font-size: 40px;
  }

  .plantamilliontrees-page-thecrisis__grid {
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
  }
  
}

@media (max-width: 992px) {
  .plantamilliontrees-page-thecrisis__grid {
    grid-template-columns: 1fr 1fr;
    justify-content: center;
  }
}

/* ============================= MOBILE ============================= */
/* 1 card in one row */
@media (max-width: 600px) {
  .plantamilliontrees-page-thecrisis {
    padding: 80px 16px;
  }

  .plantamilliontrees-page-thecrisis__title {
    font-size: 34px;
  }

  .plantamilliontrees-page-thecrisis__subtitle {
    font-size: 16px;
  }

  .plantamilliontrees-page-thecrisis__grid {
    grid-template-columns: 1fr;
    justify-content: unset;
  }

  .plantamilliontrees-page-thecrisis__card {
    padding: 55px 20px 26px;
  }

  .plantamilliontrees-page-thecrisis__icon {
    height: 62px;
    right: 18px;
  }

  .plantamilliontrees-page-thecrisis__card h3 {
    font-size: 22px;
  }

  .plantamilliontrees-page-thecrisis__card p {
    font-size: 15px;
  }
}


/********************************* PlantAMillionTrees - Page - Our Process **************************************************/
/********************************* CleanTheHills - Page - Our Process **************************************************/
/********************************* SeedTheFuture - Page - Our Process **************************************************/
/********************************* Reusable Our Process **************************************************/
.reuseable-our-process-classname-wrapper {
 padding: 40px 80px;
}

.reuseable-our-process-classname-container {
 max-width: 1200px;
 margin: auto;
 padding: 40px;
 border-radius: 18px;
}
.theme-green .reuseable-our-process-classname-container {
   background: #dfe6ee;
}
.theme-blue .reuseable-our-process-classname-container {
   background: #f8f6f1;
}
.theme-red .reuseable-our-process-classname-container {
   background: #dfe6ee;
}
.theme-blue .reuseable-our-process-classname-container {
   background: #f2f7fc;
}
.theme-orange .reuseable-our-process-classname-container {
   background: #e8eff8;
}

.reuseable-our-process-classname-header {
 text-align: center;
 margin-bottom: 40px;
}

.reuseable-our-process-classname-header span{
 color: #2f8d46;
}

/* IMPORTANT FIX HERE */
.reuseable-our-process-classname-content {
 display: flex;
 gap: 40px;
 align-items: stretch; /* THIS IS CRITICAL */
}

.reuseable-our-process-classname-steps {
 flex: 1;
}

.reuseable-our-process-classname-step {
 margin-bottom: 25px;
 cursor: pointer;
}

.reuseable-our-process-classname-step-badge {
 background: #fff;
 padding: 5px 30px;
 border-radius: 5px;
 font-size: 17px;
 display: inline-block;
 margin-bottom: 2px;
}

.reuseable-our-process-classname-step-box {
 padding: 7px 15px;
 border-radius: 10px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 transition: 0.3s ease;
}

.theme-green .reuseable-our-process-classname-step-box {
    background: #c9e3dc;
    border: 2px solid #bcd6cf;
}
.theme-green .reuseable-our-process-classname-step.active .reuseable-our-process-classname-step-box {
 background:#89b8ab;
}

.theme-purple .reuseable-our-process-classname-step-box {
    background-color: #dfd2e8; 
    border: 2px solid #e7deeb;
}
.theme-purple .reuseable-our-process-classname-step.active .reuseable-our-process-classname-step-box {
 background:#be9ad8;
}

.theme-red .reuseable-our-process-classname-step-box {
    background: #f3e1e1;
    border: 2px solid #e5d4d4;
}
.theme-red .reuseable-our-process-classname-step.active .reuseable-our-process-classname-step-box {
 background:#d89b9b;
}

.theme-blue .reuseable-our-process-classname-step-box {
    background-color: #dcf3ff; 
    border: 2px solid #daf2fe;
}
.theme-blue .reuseable-our-process-classname-step.active .reuseable-our-process-classname-step-box {
 background:#9eddfd;
}

.theme-orange .reuseable-our-process-classname-step-box {
    background-color:#fbc8a1; 
    border: 2px solid #ebb286;
}
.theme-orange .reuseable-our-process-classname-step.active .reuseable-our-process-classname-step-box {
 background:#ffac6c;
}

.reuseable-our-process-classname-step-box h3{
 color:#223B77;
 font-size: 25px;
}

.reuseable-our-process-classname-step-box p{
 font-size: 17px;
}

.reuseable-our-process-arrow{
 height: 40px;
 width: 40px;
}

/* RIGHT COLUMN FIX */
.reuseable-our-process-classname-display {
 flex: 1;
 display: flex;              /* IMPORTANT */
 flex-direction: column;     /* IMPORTANT */
 padding-bottom: 25px;
}

/* Image */
.reuseable-our-process-classname-display img {
 width: 100%;
 border-radius: 35px;
 transition: opacity 0.3s ease;
}

/* Text */
.reuseable-our-process-classname-text {
 margin: 20px 0;
 line-height: 1.6;
 font-size: 18px;
 color: #4c4a4a;
 flex: 1;                    /* IMPORTANT */
}

/* BUTTON FIX */
.reuseable-our-process-classname-buttons {
 margin-top: auto;           /* PUSH TO BOTTOM */
 display: flex;
 gap: 25px;
}

/* Primary Button */
.process-btn-primary {
 color: #fff;
 padding: 10px 20px;
 border-radius: 12px;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none;
 display: inline-block;
 align-content: center;
 transition: all 0.3s ease;
 box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 text-align: center;
}

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

.theme-green .process-btn-primary {
 background: #136c3f;
}
.theme-green .process-btn-primary:hover {
 background: #0f5733;
}

.theme-purple .process-btn-primary {
background: #8d4397;
}
.theme-purple .process-btn-primary:hover {
 background: #8d4397;
}

.theme-red .process-btn-primary {
 background: #ef2b2b;
}
.theme-red .process-btn-primary:hover {
 background: #ef2b2b;
}

.theme-blue .process-btn-primary {
 background: #186ae3;
}
.theme-blue .process-btn-primary:hover {
 background: #186ae3;
}

.theme-orange .process-btn-primary {
 background: #f1521f;
}
.theme-oraneg .process-btn-primary:hover {
 background: #e33700;
}

.process-btn-secondary {
 font-size: 22px;
 font-weight: 600;
 color: #4c4a4a;
 position: relative;
 padding: 15px 0px;
 transition: 0.3s ease;
}

.theme-green .process-btn-secondary:hover {
 color: #136c3f;
}

.theme-purple .process-btn-secondary:hover {
 color: #8d4397;
}

.theme-red .process-btn-secondary:hover {
 color: #ef2b2b;
}

.theme-blue .process-btn-secondary:hover {
 color: #186ae3;
}

.theme-orange .process-btn-secondary:hover {
 color: #f1521f;
}

@media (max-width: 1024px) {
  .reuseable-our-process-classname-wrapper{
      padding: 40px 20px;
  }
}

@media (max-width: 992px) {
  .reuseable-our-process-classname-wrapper{
      padding: 40px;
  }
 .reuseable-our-process-classname-content {
   flex-direction: column;
 }
 .reuseable-our-process-classname-text{
         text-align: center;
     }
    .reuseable-our-process-classname-buttons{
        justify-content: center;
    }
}

@media (max-width: 600px) {
  .reuseable-our-process-classname-wrapper{
      padding: 40px 20px;
  }
 
 .reuseable-our-process-classname-content {
   flex-direction: column;
 }
 
 .reuseable-our-process-classname-buttons{
     flex-wrap: wrap;
 }
 
 .process-btn-secondary{
     margin-top: -20px;
 }
 .reuseable-our-process-classname-step-box h3{
     font-size: 23px;
 }
}

@media (max-width: 400px) {
    .reuseable-our-process-classname-container{
        padding: 40px 15px;
    }
        .reuseable-our-process-classname-wrapper{
          padding: 50px 15px;
      }
     .reuseable-our-process-classname-step-box h3{
         font-size: 20px;
     }
     .reuseable-our-process-classname-step-box p{
         font-size: 16px;
     }
     .reuseable-our-process-classname-text{
         font-size: 17px;
     }
     .process-btn-primary{
         font-size: 18px;
     }
     .process-btn-secondary{
         font-size: 18px;
         padding: 10px 0px;
     }
}




/*************************************************************PlantAMillionTrees - Page Miyawaki_CSR_section****************************************************/

.Miyawaki_CSR_section{
    background:#fff;
    padding:80px 20px;
  }

  .Miyawaki_CSR_section-container{
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* ===== Header (matches screenshot) ===== */
  .csr-header{
    text-align:center;
    margin-bottom: 40px;
  }

  .csr-header .sub-title{
    font-size: 28px;
    font-weight: 500;
    color:#222;
    margin:0 0 10px;
    
  }


  .csr-header .description{
    font-size: 22px;
    line-height: 1.45;
    max-width: 980px;
    margin: 0 auto;
    color:#333;
  }

  /* ===== Two panels ===== */
  .csr-content{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
    margin-top: 22px;
  }

  /* ===== Left mint card ===== */
  .csr-left-card{
    background:#CFE5DF;            /* mint like screenshot */
    border-radius: 18px;
    padding: 34px 34px 28px;
    min-height: 355px;             /* match right image height */
    display:flex;
    flex-direction: column;
    justify-content: center;
  }

  .csr-left-card .intro-text{
    font-size: 18px;
    line-height: 1.45;
    color:black;
    margin: 0 0 18px;
    font-weight: 500;
  }

  .csr-left-card .divider{
    height: 2px;
    background:#3E7B63;            /* green divider */
    margin: 6px 0 18px;
    width: 100%;
  }

  .feature-list{
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .feature-list li{
    font-size: 17px;
    color:black;
    margin-bottom: 12px;
    padding-left: 34px;
    position: relative;
    line-height: 1.35;
  }

  .feature-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:26px;
    height:26px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1D8C57;
    font-weight: 900;
    font-size: 22px;
  }

  /* ===== Right image card ===== */
  .csr-image-wrapper{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 355px;             /* match left card */
    background:#eee;
  }

  .csr-image-wrapper img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }

  .image-badge{
    position:absolute;
    top: 10px;
    right: 10px;
    background:#4A7F46;
    color:#fff;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    text-align:center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }

  /* ===== Buttons row ===== */
  .csr-buttons{
    margin-top: 42px;
    display:flex;
    justify-content:center;
    gap: 24px;
  }

  .csr-buttons a{
       min-width: 341px;
    text-align: center;
    padding: 9px 28px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
  }

  .btn-primary{
    background:#4A7F46;
    color:#fff;
    border:2px solid #4A7F46;
  }

  .btn-outline{
    background:transparent;
    color:#4A7F46;
    border:2px solid #4A7F46;
  }

  /* ===== Bottom note ===== */
  .bottom-note{
    margin-top: 22px;
    text-align:center;
    font-size: 18px;
    color:#333;
  }

  /* ===== Responsive ===== */
  @media (max-width: 1024px){
    /*.csr-header h2{ font-size: 44px; }*/
    .csr-header .description{ font-size: 18px; }
    .csr-left-card, .csr-image-wrapper{ min-height: 320px;}
    .csr-buttons{ 
        /*flex-direction: column; */
        align-items:center; }
    .csr-buttons a{ min-width: 280px; width: 90%; max-width: 520px; }
  }
  
  @media (max-width: 992px) {
      .csr-content{ 
          grid-template-columns: 1fr; 
      }
  }
  @media (max-width: 600px){
      .csr-buttons{ 
        flex-direction: column; 
        gap: 15px;
      }
      .csr-left-card{
          padding: 20px 20px;
      }
  }

/************************** PlantAMillionTrees - Page - Our Commitment to Tree Survival *****************************************************/
/**************************
PlantAMillionTrees - Page - Our Commitment to Tree Survival
**************************/

.plantamilliontrees-page-our-commitment-wrapper {
  /* Gradient Background */
  background: linear-gradient(
    180deg,
    #047b3e 0%,
    #137a3a 25%,
    #066d3b 50%,
    #066e3b 70%,
    #0d5f2d 100%
  );

  color: #fff;
  padding: 80px 20px;

  /* Depth effect like screenshot */
  box-shadow:
    inset 0 25px 50px rgba(0, 0, 0, 0.25),
    inset 0 -35px 60px rgba(0, 0, 0, 0.25);
}

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

.plantamilliontrees-page-our-commitment-container {
  max-width: 95%;
  margin: auto;
  padding: 0 20px 30px;
}

.plantamilliontrees-page-our-commitment-header {
  text-align: center;
  margin-bottom: 50px;
}

.plantamilliontrees-page-our-commitment-header h2 {
  color: #f5d76e;
}

.plantamilliontrees-page-our-commitment-header p {
    color: white;
  opacity: 0.95;
  max-width: 950px;
  margin: auto;
}

/* ================= CARDS ================= */

.plantamilliontrees-page-our-commitment-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.plantamilliontrees-page-our-commitment-card {
  background: #1c573a;
  padding: 40px 20px;
  border-radius: 12px;
  text-align: center;
  transition: 0.3s ease;
}

.plantamilliontrees-page-our-commitment-card:hover {
  transform: translateY(-5px);
  /* background: #218f4b; */
}

.plantamilliontrees-page-our-commitment-card h3 {
  font-size: 17px;
  margin-bottom: 15px;
  font-weight: 600;
}

.plantamilliontrees-page-our-commitment-icon {
  /* background: #ffffff; */
  width: 90px;
  height: 90px;
  margin: 0 auto 15px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plantamilliontrees-page-our-commitment-icon img {
  width: 100px;
}

.plantamilliontrees-page-our-commitment-card h4 {
    color: #f5d76e;
    font-size: 22px;
    margin-bottom: 10px;
}

.plantamilliontrees-page-our-commitment-card p {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.9;
}

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

.plantamilliontrees-page-our-commitment-button-wrap {
  text-align: center;
  margin-bottom: 40px;
}

.plantamilliontrees-page-our-commitment-button {
  background: #f5d76e;
  color: #000;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.plantamilliontrees-page-our-commitment-button:hover {
  background: #ffe48c;
}

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

/* Main Container */
.plantamilliontrees-page-our-commitment-gallery {
  padding: 0 60px;
}

/* Common row styling */
.gallery-row {
  display: grid;
  margin-bottom: 15px;
}

/* 5 image rows */
.row-5 {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* 4 image rectangular rows */
.row-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* Common image style */
.gallery-row img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.row-4 img {
  height: 150px;   /* More height = rectangular look */
}

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

.plantamilliontrees-page-our-commitment-bottom-text {
  text-align: center;
  padding: 25px 20px 0px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
    .plantamilliontrees-page-our-commitment-container{
        max-width: 100%;
        padding: 0px 10px 30px;
    }
  .plantamilliontrees-page-our-commitment-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .plantamilliontrees-page-our-commitment-gallery{
      padding: 0px 0px;
  }
  .row-4 img {
    height: 120px;
  }
}

@media (max-width: 820px){
    .row-4 img {
        height: 90px;
    }
}
@media (max-width: 768px) {
  .plantamilliontrees-page-our-commitment-cards {
    grid-template-columns: repeat(2, 1fr);
  }
    .row-4 img {
        height: 80px;
    }
}

@media (max-width: 576px) {
  .plantamilliontrees-page-our-commitment-cards {
    grid-template-columns: 1fr;
  }

  .plantamilliontrees-page-our-commitment-header h2 {
    font-size: 24px;
  }
  .row-5 {
  grid-template-columns: repeat(2, 1fr);
}

/* 4 image rectangular rows */
.row-4 {
  grid-template-columns: repeat(2, 1fr);
}
.row-4 img {
        height: 70px;
    }
    .plantamilliontrees-page-our-commitment-button {
        font-size: 16px;
}
}



/*********************************************** PlantAMillionTrees - Page - Our Ambition Why one million tree ***************************************************/
/* Section */
.plantamilliontrees-page-whyonemilliontrees-section {
  background: #f4f6f4;
  padding: 80px 20px;
  text-align: center;
}

.plantamilliontrees-page-whyonemilliontrees-container {
  max-width: 85%;
  margin: auto;
}

/* Headings */
.plantamilliontrees-page-whyonemilliontrees-subtitle {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}

.plantamilliontrees-page-whyonemilliontrees-title {
  font-size: 45px;
  font-weight: 700;
  color: #2D3F73;
  margin-bottom: 15px;
}

.plantamilliontrees-page-whyonemilliontrees-description {
  max-width: 900px;
  margin: auto;
  color: #555;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Progress Card */
.progress-card {
  background: linear-gradient(135deg, #138a36, #0f5132);
  padding: 25px 30px;
  border-radius: 16px;
  color: #fff;
  margin-bottom: 40px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  width: 95%;
  margin: auto;
}

/* Header & Footer */
.progress-header,
.progress-footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  flex-wrap: wrap;
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 20px;
  background: #e6e6e6;
  border-radius: 50px;
  margin: 15px 0;
  overflow: hidden;
  position: relative;
}

/* Animated Fill */
.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #f3d46d, #e6b84f);
  border-radius: 50px;
  transition: width 2s ease-in-out;
}

/* Responsive */
@media (max-width: 576px) {
  .progress-card {
    padding: 20px;
  }

  .progress-header,
  .progress-footer {
    font-size: 13px;
  }

  .progress-bar {
    height: 16px;
  }
}


/* Grid */
.plantamilliontrees-page-whyonemilliontrees-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.plantamilliontrees-page-whyonemilliontrees-item h3 {
  font-size: 25px;
  margin: 10px 0;
  color: #222;
}

.plantamilliontrees-page-whyonemilliontrees-item p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* Icon */
.plantamilliontrees-page-whyonemilliontrees-icon {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #dfeee5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plantamilliontrees-page-whyonemilliontrees-icon img {
  width: 90px;
}

/* Button */
.plantamilliontrees-page-whyonemilliontrees-btn-wrapper {
  margin-top: 20px;
}

.plantamilliontrees-page-whyonemilliontrees-btn {
  display: inline-block;
  padding: 12px 50px;
  background: #2e7d32;
  color: #fff;
  font-size: 22px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.plantamilliontrees-page-whyonemilliontrees-btn:hover {
  background: #1b5e20;
}

@media (max-width: 1024px) {
    .plantamilliontrees-page-whyonemilliontrees-container {
        max-width: 95%;
    }
}
/* Responsive */
@media (max-width: 992px) {
  .plantamilliontrees-page-whyonemilliontrees-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .plantamilliontrees-page-whyonemilliontrees-title {
    font-size: 28px;
  }

  .plantamilliontrees-page-whyonemilliontrees-grid {
    grid-template-columns: 1fr;
  }

  .plantamilliontrees-page-whyonemilliontrees-progress-card {
    padding: 20px;
  }
}




/******************************************************** PlantAMillionTrees - Page - Real Results Impact So Far *****************************************************************/
/* Section */
.plantamilliontrees-page-impact-so-far-section {
  padding: 80px 20px;
  text-align: center;
}

.plantamilliontrees-page-impact-so-far-container {
  max-width: 90%;
  margin: auto;
}

/* Headings */
.plantamilliontrees-page-impact-so-far-subtitle {
  font-size: 20px;
  color: #222;
  margin-bottom: 10px;
  font-weight: 500;
}

.plantamilliontrees-page-impact-so-far-title {
  font-size: 48px;
  font-weight: 700;
  color: #2c3e75;
  margin-bottom: 15px;
}

.plantamilliontrees-page-impact-so-far-description {
  max-width: 850px;
  margin: auto;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 40px;
}

/* Grid */
.plantamilliontrees-page-impact-so-far-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Card */
.plantamilliontrees-page-impact-so-far-card {
  background: #d0e9e2;
  padding: 15px 20px;
  border-radius: 15px;
  transition: 0.3s ease;
}

.plantamilliontrees-page-impact-so-far-card h3 {
  font-size: 26px;
  font-weight: 500;
  color: #111;
}

.plantamilliontrees-page-impact-so-far-number {
  font-size: 65px;
  font-weight: 700;
  color: #478241;
}

.plantamilliontrees-page-impact-so-far-card p {
  font-size: 20px;
  color: #222;
}

/* Responsive */
@media (max-width: 992px) {

  .plantamilliontrees-page-impact-so-far-title {
    font-size: 36px;
  }

  .plantamilliontrees-page-impact-so-far-description {
    font-size: 16px;
  }

  .plantamilliontrees-page-impact-so-far-grid {
    grid-template-columns: 1fr 1fr;
  }

  .plantamilliontrees-page-impact-so-far-number {
    font-size: 48px;
  }
}

@media (max-width: 600px) {

  .plantamilliontrees-page-impact-so-far-title {
    font-size: 36px;
  }

  .plantamilliontrees-page-impact-so-far-description {
    font-size: 16px;
  }

  .plantamilliontrees-page-impact-so-far-grid {
    grid-template-columns: 1fr;
  }

  .plantamilliontrees-page-impact-so-far-number {
    font-size: 48px;
  }
}




/************************************************************ PlantAMillionTrees - Page - Transformation into Action **********************************************************/
/* ============================= */
/* TRANSFORMATION SECTION START */
/* ============================= */

.plantamilliontrees-page-Transformation-in-Action-section {
  padding: 80px 90px;
  background: #ffffff;
  position: relative;
  z-index: 1;
}

.plantamilliontrees-page-Transformation-in-Action-container {
  max-width: 90%;
  margin: auto;
}

/*.title {*/
/*  text-align: center;*/
/*  margin-bottom: 50px;*/
/*  font-size: 36px;*/
/*  font-weight: 600;*/
/*}*/

/* Image Box */
.plantamilliontrees-page-Transformation-in-Action-image-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: auto;
  border: 10px solid #d0e9e2;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Wrapper */
.plantamilliontrees-page-Transformation-in-Action-images {
  position: relative;
  width: 100%;
  height: 500px;
  /*height: 440px;*/
  overflow: hidden;
}

/*#beforeImg,*/
/*#afterImg {*/
/*  object-fit: cover;*/
/*}*/

/* BOTH SECTIONS NOW 50% */
.plantamilliontrees-page-Transformation-in-Action-image {
  position: absolute;
  top: 0;
  width: 50%;     /* 50% each */
  height: 100%;
  overflow: hidden;
}

/* LEFT SIDE */
.plantamilliontrees-page-Transformation-in-Action-image.before {
  left: 0;
  z-index: 1;
}

/* RIGHT SIDE */
.plantamilliontrees-page-Transformation-in-Action-image.after {
  right: 0;
  z-index: 2;
}

/* ===================================== */
/* KEY PART — IMAGE IS 200% WIDTH */
/* ===================================== */

.pan-image {
  height: 100%;
  width: 200%;   /* IMPORTANT */
  object-fit: cover;
  display: block;

  transform: translateX(0);
  will-change: transform, opacity;

  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  backface-visibility: hidden;
}

/* Center Divider */
.plantamilliontrees-page-Transformation-in-Action-center-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 100%;
  background: #ffffff;
  transform: translateX(-50%);
  z-index: 5;
  box-shadow: 0 0 12px rgba(255,255,255,0.8);
}

/* Badges */
.plantamilliontrees-page-Transformation-in-Action-badge {
  position: absolute;
  top: 15px;
  padding: 8px 25px;
  background-color: #288951;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border-radius: 10px;
  z-index: 6;
}

.plantamilliontrees-page-Transformation-in-Action-before-badge { left: 25px; }
.plantamilliontrees-page-Transformation-in-Action-after-badge  { right: 25px; }

/* Caption */
.plantamilliontrees-page-Transformation-in-Action-caption {
  text-align: center;
  margin: 25px;
  font-size: 18px;
  color: #555;
}

/* ============================= */
/* MOBILE OPTIMIZED VERSION */
/* ============================= */

@media (max-width: 992px) {

  .plantamilliontrees-page-Transformation-in-Action-section {
    padding: 50px 25px;
  }

  .plantamilliontrees-page-Transformation-in-Action-images {
    height: 360px;
  }
  
  .plantamilliontrees-page-Transformation-in-Action-container{
      max-width: 100%;
    margin: auto;
  }

  .pan-image {
    width: 180%; /* slightly lighter for mobile */
  }

  /*.title {*/
  /*  font-size: 28px;*/
  /*}*/
}

@media (max-width: 600px) {

  .plantamilliontrees-page-Transformation-in-Action-images {
    height: 300px;
  }

  .pan-image {
    width: 160%; /* even lighter GPU load */
  }

  .plantamilliontrees-page-Transformation-in-Action-badge {
    font-size: 12px;
    padding: 6px 14px;
  }
}

/* ============================= */
/* CTA WRAPPER */
/* ============================= */

.plantamilliontrees-page-Transformation-in-Action-cta {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

/* ============================= */
/* EVENT CARD */
/* ============================= */

.plantamilliontrees-page-Transformation-in-Action-event-card {
  background: #d0e9e2;
  padding: 22px 28px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  max-width: 650px;
}


.calendar-icon {
  width: 65px;
}

.tree-icon {
  width: 65px;
  margin-left: auto;
}

.event-content small {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.event-content h3 {
  margin: 5px 0;
  font-size: 24px;
  color: #478241;
}

.event-content p {
  font-size: 15px;
  color: #444;
  margin: 0;
}

/* ============================= */
/* BUTTONS */
/* ============================= */

.plantamilliontrees-page-Transformation-in-Action-buttons {
  display: flex;
  align-items: center;
  gap: 25px;
}

.plantamilliontrees-join-btn {
    background: #478241;
    color:white;
    padding: 15px 20px;
    /*width: 220px;*/
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s ease;
    border: none;
}

.plantamilliontrees-join-btn:hover {
  background: #246f46;
}

.plantamilliontrees-read-more {
  color: #444;
  font-weight: 700;
  text-decoration: underline;
  font-size: 20px;
}


/* LOCATION LABEL */
.plantamilliontrees-page-Transformation-in-Action-location {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #ffffff;
    color: #000000;
    padding: 12px 100px;
    border-radius: 15px;
    font-size: 22px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

@media (max-width: 600px){
    .plantamilliontrees-page-Transformation-in-Action-location{
        padding: 5px 30px;
        width: 300px;
    text-align: center;
    }
    .plantamilliontrees-page-Transformation-in-Action-event-card{
        flex-wrap: wrap;
            align-items: center;
    justify-content: center;
    text-align: center;
    }
    .tree-icon {
    margin-left: 0;
    }
    .plantamilliontrees-page-Transformation-in-Action-buttons {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
}





/************************************** PlantAMillionTrees - Full Transparaency **************************************************/

.plantamilliontrees-page-whyonemilliontrees-transparency-section {
  background: #f5f5f5;
  padding: 80px 20px;
}

.plantamilliontrees-page-whyonemilliontrees-transparency-container {
  max-width: 1150px;
  margin: auto;
  text-align: center;
}

/* ===================== HEADINGS ===================== */

.plantamilliontrees-page-whyonemilliontrees-transparency-subtitle {
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 500;
}

.plantamilliontrees-page-whyonemilliontrees-transparency-title {
  font-size: 44px;
  font-weight: 800;
  color: #2c3e75;
  margin-bottom: 18px;
}

.plantamilliontrees-page-whyonemilliontrees-transparency-desc {
  max-width: 720px;
  margin: 0 auto 60px;
  font-size: 18px;
  line-height: 1.7;
}

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

.plantamilliontrees-page-whyonemilliontrees-transparency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

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

.plantamilliontrees-page-whyonemilliontrees-left {
  text-align: center;
}

.plantamilliontrees-page-whyonemilliontrees-donut-wrapper {
  position: relative;
  width: 360px;
  margin: auto;
}

.plantamilliontrees-page-whyonemilliontrees-donut-svg {
  width: 360px;
  height: 360px;
}

.plantamilliontrees-page-whyonemilliontrees-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
}

.plantamilliontrees-page-whyonemilliontrees-donut-center-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tooltip */

.plantamilliontrees-page-whyonemilliontrees-tooltip {
  position: absolute;
  display: none;
  background: #2c3e75;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
  transition: opacity 0.15s ease;
}

/* Donut animation smoothness */

circle {
  transition: stroke-width 0.2s ease;
}

/* Buttons */

.plantamilliontrees-page-whyonemilliontrees-donate-btn {
  display: block;
  margin: 20px auto;
  background: #2e7d32;
  color: #fff;
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  max-width: 420px;
  transition: 0.25s ease;
}

.plantamilliontrees-page-whyonemilliontrees-donate-btn:hover {
  opacity: 0.9;
}

.plantamilliontrees-page-whyonemilliontrees-report-btn {
  display: block;
  margin: auto;
  background: #f4d77a;
  color: #1a2d5a;
  padding: 14px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  max-width: 420px;
  transition: 0.25s ease;
}

.plantamilliontrees-page-whyonemilliontrees-report-btn:hover {
  opacity: 0.9;
}

/* =====================================================
   RIGHT SIDE
===================================================== */

.plantamilliontrees-page-whyonemilliontrees-right {
  text-align: left;
}

.plantamilliontrees-page-whyonemilliontrees-right h3 {
  font-size: 22px;
  font-weight: 800;
  color: #2c3e75;
  margin-bottom: 25px;
}

/* Breakdown Strips */

.plantamilliontrees-page-whyonemilliontrees-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #cfe3dd;
  padding: 10px 20px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-weight: 700;
  cursor: pointer;

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

/* Hover darker + zoom */

.plantamilliontrees-page-whyonemilliontrees-bar:hover {
  background: #bdd5cf;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Active (clicked) state */

.plantamilliontrees-page-whyonemilliontrees-bar.active {
  background: #aac7c1;
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Percentage badge */

.percent {
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
}

/* Badge colors preserved */

.blue   { background:#e3f1fa; color:#4d96c8; }
.purple { background:#efe7fb; color:#7e5ee0; }
.navy   { background:#e4ebf3; color:#2d4668; }
.red    { background:#fde7eb; color:#c8445d; }
.green  { background:#e7f6ef; color:#3f9f7c; }

/* =====================================================
   TRUST CARDS
===================================================== */

.plantamilliontrees-page-whyonemilliontrees-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.plantamilliontrees-page-whyonemilliontrees-trust-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  min-height: 80px;
}

.trust-chip {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  background: #d7e6df;
  color: #2e7d32;
  padding: 4px 10px;
  border-radius: 20px;
}

.trust-title {
  margin-top: 25px;
  font-size: 14px;
  font-weight: 800;
  color: #333;
}

.plantamilliontrees-page-whyonemilliontrees-trust-caption {
  margin-top: 18px;
  font-size: 13px;
  color: #333;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 992px) {

  .plantamilliontrees-page-whyonemilliontrees-transparency-grid {
    gap: 40px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-wrapper {
    width: 320px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-svg {
    width: 320px;
    height: 320px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-center {
    width: 150px;
    height: 150px;
  }

}

@media (max-width: 750px) {


  .plantamilliontrees-page-whyonemilliontrees-transparency-title {
    font-size: 32px;
  }

  .plantamilliontrees-page-whyonemilliontrees-transparency-desc {
    font-size: 16px;
  }
  

  .plantamilliontrees-page-whyonemilliontrees-transparency-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-wrapper {
    width: 320px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-svg {
    width: 320px;
    height: 320px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-center {
    width: 150px;
    height: 150px;
  }

  /*.plantamilliontrees-page-whyonemilliontrees-trust-row {*/
  /*  grid-template-columns: 1fr;*/
  /*}*/


}


@media (max-width: 992px) {

  .plantamilliontrees-page-whyonemilliontrees-transparency-section {
    padding: 70px 20px;
  }

  .plantamilliontrees-page-whyonemilliontrees-transparency-grid {
    gap: 40px;
  }

  /* Donut resize */
  .plantamilliontrees-page-whyonemilliontrees-donut-wrapper {
    width: 300px;
  }

  #plantamilliontrees-page-whyonemilliontrees-donut-svg {
    width: 300px;
    height: 300px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-center {
    width: 140px;
    height: 140px;
  }

  /* Right content spacing */
  .plantamilliontrees-page-whyonemilliontrees-right h3 {
    font-size: 20px;
  }

  .plantamilliontrees-page-whyonemilliontrees-bar {
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Trust cards adjust */
  .plantamilliontrees-page-whyonemilliontrees-trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  .plantamilliontrees-page-whyonemilliontrees-transparency-section {
    padding: 60px 15px;
  }

  /* Headings */
  .plantamilliontrees-page-whyonemilliontrees-transparency-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .plantamilliontrees-page-whyonemilliontrees-transparency-desc {
    font-size: 15px;
    margin-bottom: 40px;
  }

  /* Stack layout */
  .plantamilliontrees-page-whyonemilliontrees-transparency-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .plantamilliontrees-page-whyonemilliontrees-right {
    text-align: left;
  }

  /* Donut smaller */
  .plantamilliontrees-page-whyonemilliontrees-donut-wrapper {
    width: 260px;
  }

  #plantamilliontrees-page-whyonemilliontrees-donut-svg {
    width: 260px;
    height: 260px;
  }

  .plantamilliontrees-page-whyonemilliontrees-donut-center {
    width: 120px;
    height: 120px;
  }

  /* Buttons full width */
  .plantamilliontrees-page-whyonemilliontrees-donate-btn,
  .plantamilliontrees-page-whyonemilliontrees-report-btn {
    width: 100%;
    max-width: 100%;
    font-size: 14px;
  }

  /* Bars */
  .plantamilliontrees-page-whyonemilliontrees-bar {
    flex-direction: row;
    font-size: 13px;
    padding: 10px 14px;
  }

  /* Trust cards single column */
  .plantamilliontrees-page-whyonemilliontrees-trust-row {
    grid-template-columns: 1fr;
  }

}


/********************************** PlantAMiliionTrees - How to get involved **********************************************************/
/* ===============================
   HOW YOU CAN GET INVOLVED
=================================*/

.plantamilliontrees-page-whyonemilliontrees-involved-section {
  background: #f4f4f4;
  padding: 80px 20px;
}

.plantamilliontrees-page-whyonemilliontrees-involved-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Subtitle */
.plantamilliontrees-page-whyonemilliontrees-involved-subtitle {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

/* Main Title */
.plantamilliontrees-page-whyonemilliontrees-involved-title {
  font-size: 38px;
  font-weight: 700;
  color: #2c3e75;
  margin-bottom: 45px;
}

/* Grid */
.plantamilliontrees-page-whyonemilliontrees-involved-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-top: 50px;
}

/* Card */
.plantamilliontrees-page-whyonemilliontrees-involved-card {
  background: #D0E9E2;
  padding: 20px 30px;
  border-radius: 22px;
  text-align: left;
  transition: transform 0.3s ease;
}

.plantamilliontrees-page-whyonemilliontrees-involved-card:hover {
  transform: translateY(-5px);
}

/* Icon */
.plantamilliontrees-page-whyonemilliontrees-involved-icon {
  width: 75px;
  height: 85px;
  /* margin-bottom: 20px; */
}

.plantamilliontrees-page-whyonemilliontrees-involved-icon img {
  width: 100%;
  height: auto;
}

/* Heading */
.plantamilliontrees-page-whyonemilliontrees-involved-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Description */
.plantamilliontrees-page-whyonemilliontrees-involved-card p {
  font-size: 15px;
  color: #222;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Button */
.plantamilliontrees-page-whyonemilliontrees-involved-btn {
  display: inline-block;
  background: #2e7d32;
  color: #fff;
  padding: 10px 22px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s ease;
}

.plantamilliontrees-page-whyonemilliontrees-involved-btn:hover {
  background: #1b5e20;
}

/* Responsive */
@media (max-width: 992px) {
  .plantamilliontrees-page-whyonemilliontrees-involved-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
    .plantamilliontrees-page-whyonemilliontrees-involved-title {
    font-size: 30px;
  }

  .plantamilliontrees-page-whyonemilliontrees-involved-card {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .plantamilliontrees-page-whyonemilliontrees-involved-title {
    font-size: 30px;
  }

  .plantamilliontrees-page-whyonemilliontrees-involved-grid {
    grid-template-columns: 1fr;
  }

  .plantamilliontrees-page-whyonemilliontrees-involved-card {
    text-align: center;
  }
  
  .plantamilliontrees-page-whyonemilliontrees-involved-icon {
      margin: 0 auto;
  }
  
  .plantamilliontrees-page-whyonemilliontrees-involved-icon img {
  width: 85%;
  height: auto;
}

}




/**************************** PlantAMillionTrees - Page - How can you help *********************************************/
/* SECTION */
.plantamilliontrees-how-can-you-help-classname {
  background: #f4f4f4;
  padding: 100px 0;
}

.plantamilliontrees-how-can-you-help-container {
  width: 1200px;
  max-width: 90%;
  margin: auto;
}

/* HEADER */
.plantamilliontrees-how-can-you-help-header {
  text-align: center;
  margin-bottom: 70px;
}


/* CARDS GRID */
.plantamilliontrees-how-can-you-help-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* CARD DEFAULT */
.plantamilliontrees-how-can-you-help-card {
  background: #cfe1db;
  border-radius: 45px;
  padding: 30px 25px;
  position: relative;
  transition: 0.4s ease;
  border: 2px solid #478241;
}

/* ICON */
.plantamilliontrees-how-can-you-help-icon {
  position: absolute;
  top: -45px;
  right: -20px;
  background: #ffffff;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.plantamilliontrees-how-can-you-help-icon img {
  height: 60px;
}

/* TEXT */
.plantamilliontrees-how-can-you-help-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 1.2px;
  /*color: #1f2a55;*/
}

.plantamilliontrees-how-can-you-help-card small {
    font-size: 17px;
    color: #333;
    display: block;
    margin-bottom: 20px;
}

.plantamilliontrees-how-can-you-help-card p {
  font-size: 16px;
  color: #444;
  margin-bottom: 15px;
  font-weight: 700;
}

.plantamilliontrees-how-can-you-help-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.plantamilliontrees-how-can-you-help-card ul li {
  font-size: 15x;
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}

.plantamilliontrees-how-can-you-help-card ul li:before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #478241;
}

/* BUTTON */
.plantamilliontrees-how-can-you-help-card a {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  background: #478241;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

/* HOVER EFFECT = THIRD CARD STYLE */
.plantamilliontrees-how-can-you-help-card:hover {
  background: #4b8c4a;
  border-color: #4b8c4a;
  transform: translateY(-8px);
}

.plantamilliontrees-how-can-you-help-card:hover h3 {
  color: #ffd86b;
}

.plantamilliontrees-how-can-you-help-card:hover small,
.plantamilliontrees-how-can-you-help-card:hover p,
.plantamilliontrees-how-can-you-help-card:hover ul li {
  color: #fff;
}

.plantamilliontrees-how-can-you-help-card:hover ul li:before {
  color: #ffd86b;
}

.plantamilliontrees-how-can-you-help-card:hover a {
  background: #ffd86b;
  color: #1f2a55;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .plantamilliontrees-how-can-you-help-cards {
    grid-template-columns: 1fr 1fr;
        gap: 70px 20px;
  }
  .plantamilliontrees-how-can-you-help-card {
    padding: 50px 25px;
  }
}

@media (max-width: 600px) {
  .plantamilliontrees-how-can-you-help-cards {
    grid-template-columns: 1fr;
  }

  .plantamilliontrees-how-can-you-help-card {
    padding: 50px 25px;
  }
}





/******************************* PlantAMillionTrees - FAQ's ************************************************/
/*************************************************
 FAQ SECTION
**************************************************/

.plantamilliontrees-page-faqs-classname-faq-section {
  padding: 80px 20px;
  background: #0f6f36;
}

.plantamilliontrees-page-faqs-classname-faq-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* LEFT SIDE */

.plantamilliontrees-page-faqs-classname-subtitle {
  color: #e6f4ea;
}

.plantamilliontrees-page-faqs-classname-title {
    color: #f4d77a;
  margin-bottom: 15px;
}

.plantamilliontrees-page-faqs-classname-faq-para {
  color: #d9efe2;
  font-size:19px;
  line-height: 1.3;
}

/* HELP BOX */

.plantamilliontrees-page-faqs-classname-faq-help {
  display: flex;
  align-items: center;
  background: #f1f5f2;
  padding: 12px 15px;
  border-radius: 14px;
  margin: 30px 0;
  width: 400px;
}

.plantamilliontrees-page-faqs-classname-faq-help h3 {
  margin: 0;
  font-size: 22px;
  color: #1b1b1b;
}

.plantamilliontrees-page-faqs-classname-faq-help p {
  margin: 0;
  font-size: 16px;
  color: #555;
}

.plantamilliontrees-page-faqs-classname-faq-icon img {
  width: 60px;
  margin: 0px 15px;
}

/* CONTACT BUTTON */

.plantamilliontrees-page-faqs-classname-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f4d77a;
  padding: 5px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #1b1b1b;
  transition: all 0.3s ease;
}

.plantamilliontrees-page-faqs-classname-btn-text {
  font-size: 18px;
}

.plantamilliontrees-page-faqs-classname-btn-icon {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.plantamilliontrees-page-faqs-classname-btn-icon img {
  width: 40px;
}

/* Hover */
.plantamilliontrees-page-faqs-classname-join-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.plantamilliontrees-page-faqs-classname-join-btn:hover 
.plantamilliontrees-page-faqs-classname-btn-icon {
  transform: translateX(3px);
}

/* ACCORDION */

.plantamilliontrees-page-faqs-classname-accordion-item {
  background: #cfd8d3;
  border-radius: 15px;
  margin-bottom: 30px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.plantamilliontrees-page-faqs-classname-accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 25px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}
.plantamilliontrees-page-faqs-classname-accordion-header h3{
    text-align: left;
}

.plantamilliontrees-page-faqs-classname-accordion-body {
  display: none;
  padding: 0 25px 20px;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
}

.plantamilliontrees-page-faqs-classname-arrow {
  transition: transform 0.3s ease;
  color: #065b34;
}

/* ACTIVE */

.plantamilliontrees-page-faqs-classname-accordion-item.active
.plantamilliontrees-page-faqs-classname-accordion-body {
  display: block;
}

.plantamilliontrees-page-faqs-classname-accordion-item.active
.plantamilliontrees-page-faqs-classname-arrow {
  transform: rotate(180deg);
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .plantamilliontrees-page-faqs-classname-faq-left{
      text-align: center;
  }
  .plantamilliontrees-page-faqs-classname-faq-container {
    grid-template-columns: 1fr;
  }
  .plantamilliontrees-page-faqs-classname-faq-para{
      max-width:none;
  }
  .plantamilliontrees-page-faqs-classname-faq-help {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 450px){
    .plantamilliontrees-page-faqs-classname-title {
  font-size: 35px;
  margin-bottom: 15px;
  line-height: 1.2;
}
.plantamilliontrees-page-faqs-classname-faq-para{
    font-size: 16px;
}
}



/***************************************************** PlantAMillionTrees - Proof From the Ground **********************************************************************/
/******************************************************************
 EXACT MATCH – PROOF FROM THE GROUND
******************************************************************/

.plantamilliontrees-page-prooffromtheground-classname-section {
  padding: 80px 20px;
  /*background: #f3f4f6;*/
  text-align: center;
}

.plantamilliontrees-page-prooffromtheground-classname-container {
  max-width: 1200px;
  margin: auto;
}

.plantamilliontrees-page-prooffromtheground-classname-subtitle {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

.plantamilliontrees-page-prooffromtheground-classname-title {
  font-size: 36px;
  font-weight: 700;
  color: #2f4374;
  margin-bottom: 12px;
}

.plantamilliontrees-page-prooffromtheground-classname-description {
  font-size: 15px;
  color: #666;
  max-width: 650px;
  margin: 0 auto 50px auto;
}

/* EXACT GRID STRUCTURE */

.plantamilliontrees-page-prooffromtheground-classname-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* IMAGE STYLE */

.plantamilliontrees-page-prooffromtheground-classname-gallery img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 30px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.plantamilliontrees-page-prooffromtheground-classname-gallery img:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* BUTTON */

.plantamilliontrees-page-prooffromtheground-classname-btn {
  display: inline-block;
    margin-top: 50px;
    padding: 8px 68px;
    background: #4f7f4f;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
    font-size: 29px;
}

.plantamilliontrees-page-prooffromtheground-classname-btn:hover {
  background: #3d6b3d;
}

/* RESPONSIVE */

@media (max-width: 992px) {
  .plantamilliontrees-page-prooffromtheground-classname-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .plantamilliontrees-page-prooffromtheground-classname-gallery {
    grid-template-columns: 1fr;
  }

  .plantamilliontrees-page-prooffromtheground-classname-title {
    font-size: 26px;
  }
}



/* Masonry layout */
.masonry {
  column-count: 4;
  column-gap: 25px;
}

/* Each image acts like a card */
.masonry img {
  width: 100%;
  display: block;
  margin: 0 0 25px;
  border-radius: 30px;
  break-inside: avoid;
}

/* Responsive */
@media (max-width: 992px) {
  .masonry { column-count: 4;
        column-gap: 5px; }
}
@media (max-width: 600px) {
  .masonry { column-count: 2; }
}
/***************************************************************plantamilliontrees-page-csr-partner-button**************************************************************************/
.plantamilliontrees-page-csr-partner-button{
    padding: 12px 40px;
    font-size: 20px;
    background-color: #223b77;
    margin-top: 35px;
    border-radius: 10px;
    border: none;
}

.plantamilliontrees-page-csr-partner-button a{
    color:white;
    text-decoration: none;
}




/****************************************************************milestone***************************************************************************************************/



.timeline {
  position: relative;
  width: 100%;
}

/* Vertical center bar */
.timeline-progress {
  position: fixed;
  left: 50%;
  top: 0;
  width: 4px;
  height: 0%;
  background: white;
  transform: translateX(-50%);
  z-index: 10;
}

.timeline-step {
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

.timeline-left,
.timeline-right {
  width: 50%;
  padding: 80px;
}

.timeline-left {
  text-align: right;
  padding-right: 100px;
}

.timeline-left h2 {
  font-size: 40px;
  font-weight: 500;
}

.timeline-right {
  padding-left: 100px;
  opacity: 0;
  transform: translateX(80px);
}

.timeline-right img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 20px;
}

.timeline-right p {
  color: #aaa;
  font-size: 18px;
  line-height: 1.6;
}



  /*****************************************************PlantAMillionTrees - Testimonials ****************************************************/
.PlantAMillionTrees-Testimonials-section {
  /*overflow: hidden;*/
  background-size: cover;
  background-position: center;
  padding: 80px 20px;
  text-align: center;
}

.PlantAMillionTrees-Testimonials-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 60px;
      margin-bottom: 82px;
}

.PlantAMillionTrees-Testimonials-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.PlantAMillionTrees-Testimonials-video-slider {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
  padding: 10px 0;
  scrollbar-width: none;
}

.PlantAMillionTrees-Testimonials-video-slider::-webkit-scrollbar {
  display: none;
}

/* 2 cards per row */
.PlantAMillionTrees-Testimonials-video-card {
  flex: 0 0 48%;
  max-width: 48%;
  text-align: center;
}

/* Increased width & height */
.PlantAMillionTrees-Testimonials-video-box {
  width: 100%;
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.PlantAMillionTrees-Testimonials-video-box iframe {
  width: 100%;
  height: 100%;
}

.PlantAMillionTrees-Testimonials-video-card h3 {
  margin-top: 15px;
  font-size: 20px;
  font-weight: 600;
}

.PlantAMillionTrees-Testimonials-video-card p {
  font-size: 14px;
  color: #555;
}

/* Navigation Buttons */
.PlantAMillionTrees-Testimonials-nav-btn {
  position: absolute;
  background: #1e3a8a;
  color: #fff;
  border: none;
  font-size: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.PlantAMillionTrees-Testimonials-prev {
  left: -60px;
}

.PlantAMillionTrees-Testimonials-next {
  right: -60px;
}

/* Responsive: 1 video per row on mobile */
@media (max-width: 768px) {
  .PlantAMillionTrees-Testimonials-video-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .PlantAMillionTrees-Testimonials-video-box {
    height: 250px;
  }

  .PlantAMillionTrees-Testimonials-container {
    padding: 0 20px;
  }
}





/*********************************************************************************************************************************************************************************/
/********************************************************************** CleanTheHills Page ***************************************************************************************/
/*********************************************************************************************************************************************************************************/
/* HERO SECTION */
.cleanthehills-page-hero {
    position: relative;
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    background-image: url('https://ytds.org/ytds_2/asset/images/Clean_The_Hills_Banner-37 (1)_11zon (2) (1) (1).webp');
    background-size: cover;
}

/* LEFT DARK GRADIENT OVERLAY */
.cleanthehills-overlay {
    position: absolute;
    inset: 0;
   
    z-index: 1;
}

/* CONTAINER */
.cleanthehills-container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 110px 120px 60px;
}

/* CONTENT */
.cleanthehills-content {
    max-width: 650px;
    color: #fff;
}

/* SUBTITLE */
.cleanthehills-subtitle {
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    opacity: 0.85;
}

/* TITLE */
.cleanthehills-title {
    font-size: 75px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
}

/* DESCRIPTION */
.cleanthehills-description {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 25px;
    opacity: 0.9;
}

/* STATS */
.cleanthehills-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.cleanthehills-stat-box {
    background: rgb(255 255 255 / 10%);
    backdrop-filter: blur(4px);
    padding: 15px 35px;
    border-radius: 12px;
    min-width: 200px;
    text-align: center;
}

.cleanthehills-stat-box h3 {
    font-size: 45px;
    color: #f4c542;
    margin-bottom: 5px;
}

.cleanthehills-stat-box p {
    font-size: 18px;
}

/* CTA */
.cleanthehills-cta-row {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.cleanthehills-btn {
    background: #f4c542;
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cleanthehills-btn:hover {
    background: #ddb32f;
}

.cleanthehills-volunteers {
    font-size: 18px;
    color: #f4c542;
    font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 1024px){
    .cleanthehills-container{
        padding: 95px 85px 75px;
    }
    .cleanthehills-stat-box{
        padding: 18px 35px;
    }
    .cleanthehills-stat-box h3{
        font-size: 40px;
    }
}
@media (max-width: 992px) {
    .cleanthehills-page-hero {
        min-height: auto;
        padding: 250px 0 300px;
        background-image: url('../images/CleanTheHills_Banner_Mobile.webp');
    }
    .cleanthehills-container{
        padding: 0px 85px 75px;
        text-align: center;
        top: -100px;
    }
    .cleanthehills-title {
        font-size: 48px;
    }

    .cleanthehills-description {
        font-size: 16px;
    }
    .cleanthehills-stats{
        justify-content: center;
    }
    .cleanthehills-stat-box {
        min-width: 180px;
        padding: 20px;
    }
    .cleanthehills-cta-row{
        justify-content: center;
    }
}

@media (max-width: 600px) {

    .cleanthehills-page-hero {
        min-height: auto;
        padding: 225px 0;
    }

    .cleanthehills-container {
        padding: 0 20px;
        text-align: center;
    }

    .cleanthehills-title {
        font-size: 36px;
    }

    .cleanthehills-description {
        font-size: 15px;
    }

    .cleanthehills-stats {
        /*flex-direction: column;*/
        justify-content: center;
    }
    
    .cleanthehills-stat-box h3{
            font-size: 26px;
    }
    .cleanthehills-stat-box p {
    font-size: 16px;
}

    .cleanthehills-cta-row {
        flex-direction: column;
        gap: 15px;
    }

    .cleanthehills-volunteers {
        font-size: 14px;
    }
}

@media (max-width: 450px) {

    .cleanthehills-page-hero {
        min-height: auto;
        padding: 180px 0 260px;
    }
    .cleanthehills-container {
        padding: 0 15px;
    }
    .cleanthehills-subtitle{
        font-size: 12px;
    }
    .cleanthehills-description {
        font-size: 14px;
    }
    .cleanthehills-stats{
        gap:10px;
    }
    .cleanthehills-stat-box {
        min-width: 140px;
        padding: 15px;
    }
}




/* =============================== CleanTheHills - THE CRISIS SECTION ================================== */

.the_crisis{
  padding: 80px 20px;
  /*background: #f5f5f5;*/
  text-align: center;
}

/* Top small title */
.the_crisis .crisis-top{
  font-size: 32px;
  margin-bottom: 15px;
  color: #111;
}

/* Main heading */
.the_crisis .crisis-heading{
  font-size: 56px;
  font-weight: 700;
  color: #2f4b8f; /* deep blue */
  margin-bottom: 25px;
}

/* Paragraph */
.the_crisis .crisis-text{
  max-width: 1100px;
  line-height: 1.6;
}

.the_crisis .crisis-highlight{
  font-weight: 700;
  margin-top: 15px;
  font-size: 24px;
  color: #111;
}

/* Cards Wrapper */
.the_crisis .crisis-cards{
  margin-top: 80px;
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

/* Individual Card */
.the_crisis .crisis-card{
position: relative;
    width: 360px;
    background: #c9ddd6;
    border: 2px solid #6fa27e;
    border-radius: 25px;
    padding: 41px 11px 13px;
    text-align: center;
}

/* Floating Icon Box */
.the_crisis .crisis-icon{
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #4f8b6f;
  width: 75px;
  height: 75px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
}

/* Card Title */
.the_crisis .crisis-card h3{
  font-size: 22px;
    font-weight: 700;
    color: #243b6b;
    margin-bottom: -9px;
    margin-top: 11px;
}

/* Card text */
.the_crisis .crisis-card p{
      font-size: 17px;
    line-height: 1.5;
    color: black;
    margin-bottom: 20px;
        margin-top: 11px;
}

/* Big Numbers */
.the_crisis .crisis-number{
 font-size: 53px;
    font-weight: 700;
    color: #3d6f3f;
    margin-bottom: -11px;
    margin-top: -22px;
}

.the_crisis .crisis-subtext{
  font-size: 20px;
  font-weight: 600;
  color: #222;
      margin-top: 13px;
}

/* Responsive */
@media (max-width: 992px){
  .the_crisis .crisis-heading{
    font-size: 40px;
  }

  .the_crisis .crisis-text{
    font-size: 18px;
  }

  .the_crisis .crisis-cards{
    gap: 70px;
  }

  .the_crisis .crisis-card{
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 450px) {
    .the_crisis {
        padding: 50px 20px 50px;
    }
}





 /********************************* Clean-The-Hills - Our Structured Process **************************************************/ 



/*.cleanthe-hills-our-structured-process-wrapper {*/
/*  padding: 40px 80px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-container {*/
/*  max-width: 95%;*/
/*  margin: auto;*/
/*  background: #dfe6ee;*/
/*  padding: 40px;*/
/*  border-radius: 18px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-header {*/
/*  text-align: center;*/
/*  margin-bottom: 40px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-header span {*/
/*  color: #2f8d46;*/
/*}*/

/*.cleanthe-hills-our-structured-process-content {*/
/*  display: flex;*/
/*  gap: 40px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-steps {*/
/*  flex: 1;*/
/*}*/

/*.cleanthe-hills-our-structured-process-step {*/
/*  margin-bottom: 25px;*/
/*  cursor: pointer;*/
/*}*/

/*.cleanthe-hills-our-structured-process-step-badge {*/
/*  background: #fff;*/
/*  padding: 5px 30px;*/
/*  border-radius: 5px;*/
/*  font-size: 17px;*/
/*  display: inline-block;*/
/*  margin-bottom: 2px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-step-box {*/
/*  background: #bcd6cf;*/
/*  padding: 7px 14px;*/
/*  border-radius: 10px;*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  transition: 0.3s ease;*/
/*}*/

/*.cleanthe-hills-our-structured-process-step.active */
/*.cleanthe-hills-our-structured-process-step-box {*/
/*  background:#6c9590;*/
/*}*/

/*.cleanthe-hills-our-structured-process-step-box h4 {*/
/*  color:#223B77;*/
/*  font-size: 25px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-step-box p {*/
/*  font-size: 17px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-arrow {*/
/*  width: 40px;*/
/*}*/

/*.cleanthe-hills-our-structured-process-display {*/
/*  flex: 1.1;*/
/*}*/

/*.cleanthe-hills-our-structured-process-display img {*/
/*  width: 100%;*/
/*  border-radius: 18px;*/
/*  transition: opacity 0.3s ease;*/
/*}*/

/*.cleanthe-hills-our-structured-process-display p {*/
/*  margin-top: 20px;*/
/*  line-height: 1.6;*/
/*  font-size: 20px;*/
/*  color: #4c4a4a;*/
/*}*/

/*@media (max-width: 992px) {*/
/*  .cleanthe-hills-our-structured-process-content {*/
/*    flex-direction: column;*/
/*  }*/
/*}*/



/*<!--------------------------------- SECTION: Why-Clean-The-Hills-Matters ----------------------------->*/


  .Why-Clean-The-Hills-Matters {
    width: 100%;
    background: #ffffff;
    padding: 80px 20px;
    box-sizing: border-box;
  }

  .campaign-inner {
    max-width: 1130px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: start;
  }

  /* LEFT IMAGE */
  .campaign-image {
    border-radius: 14px;
    /*overflow: hidden;*/
    /*background: #e9eef1;*/
    /*height: 520px;*/
  }
  .campaign-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* RIGHT */
  .campaign-kicker {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f1f1f;
  }

  .campaign-title {
    margin: 0 0 12px 0;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.3px;
    color: #1f3c7a;
    font-weight: 800;
  }

  .campaign-desc {
    margin: 0 0 18px 0;
    font-size: 16px;
    line-height: 1.45;
    color: #6b7280;
    font-weight: 500;
  }

  /* CARDS */
  .campaign-cards {
       display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    /*margin-top: 28px;*/
  }

  .campaign-card {
    background: #d7efe9;
    border-radius: 12px;
    padding: 18px 18px 16px 18px;
    min-height: 132px;
    box-sizing: border-box;
  }

  /*.campaign-icon {*/
  /*  width: 34px;*/
  /*  height: 34px;*/
  /*  border-radius: 999px;*/
  /*  background: rgba(255, 255, 255, 0.65);*/
  /*  display: inline-flex;*/
  /*  align-items: center;*/
  /*  justify-content: center;*/
  /*  margin-bottom: 10px;*/
  /*  overflow: hidden;*/
  /*}*/

  .campaign-icon img {
    width: 20%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .campaign-card h3 {
   margin: 9px 0 9px 0;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
    color: #0f172a;
  }

  .campaign-card p {
   margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: #334155;
    font-weight: 600;
    margin-bottom: 10px;
  }
  
  @media (max-width: 1024px) {
      .campaign-right-header .title {
          font-size: 42px;
      }
  }

  @media (max-width: 980px) {
    .campaign-inner {
      grid-template-columns: 1fr;
    }
    .campaign-image {
      height: 380px;
    }
    .campaign-title {
      font-size: 38px;
    }
    .campaign-right-header{
          text-align: center;
      }
      .campaign-right-header .title {
          font-size: 40px;
      }
  }
  
  @media (max-width: 768px) {
      .campaign-right-header .title {
          font-size: 38px;
      }
  }

  @media (max-width: 560px) {
    .campaign-cards {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 450px) {
     .campaign-image img {
        object-fit: scale-down;
    }
      .campaign-right-header .title {
          font-size: 34px;
      }
  }



/*<!----------------------------------Impact-So-Far---------------------------------->*/

.Impact-So-Far {
  background: #1f6f3f;
  padding: 80px 50px;
}


.Impact-So-Far .impact-wrapper {
  background: #f3f5f3;
  border-radius: 20px;
  padding: 40px 40px 60px;
  position: relative;
}

.Impact-So-Far .impact-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    width: 100%;
    gap: 60px;
}

.Impact-So-Far .mini-title {
  font-size: 14px;
  font-weight: 600;
  color: #3c3c3c;
  margin-bottom: 10px;
}

.Impact-So-Far h2 {
  font-size: 42px;
}

.Impact-So-Far .impact-right {
  max-width: 550px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.Impact-So-Far .impact-btn {
 display: inline-block;
    background: #3e7f3b;
    color: #fff;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    /*margin-top: 8px;*/
    font-size: 20px;
    margin-bottom: -49px;
    z-index: 1;
    position: relative;
    top: 33px;
}

.Impact-So-Far .impact-image {
  position: relative;
  margin-top: -10px;
}

.Impact-So-Far .impact-image img {
  width: 100%;
  border-radius: 15px;
  display: block;
}

/* Bottom green fade */
.Impact-So-Far .impact-image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(to bottom, rgba(31,111,63,0) 0%, rgba(31,111,63,0.9) 100%);
}

/* Stats overlapping image */
.Impact-So-Far .impact-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    gap: 30px;
    margin-top: -100px;
    position: relative;
    z-index: 5;
    padding: 0 50px;
}

.Impact-So-Far .stat-box {
  flex: 1;
  background: #cfe9e2;
  padding: 10px;
    border-radius: 10px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.Impact-So-Far .stat-box .live {
    font-size: 22px;
    color: black;
    /*margin-bottom: 5px;*/
}

.Impact-So-Far .stat-box h3 {
  font-size: 40px;
  font-weight: 700;
  color: #2f6e2e;
  /*margin: 0 0 5px;*/
}

.Impact-So-Far .stat-box span {
 font-size: 17px;
    color: black;
}

@media (max-width: 1024px){
    .Impact-So-Far .impact-stats{
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .Impact-So-Far .impact-stats{
        gap: 25px 20px;
        padding: 20px;
    }
    .Impact-So-Far .stat-box{
        padding: 15px;
    }
    .Impact-So-Far .stat-box .live {
        font-size: 18px;
    }
    .Impact-So-Far .stat-box h3 {
        font-size: 30px;
    }
    .Impact-So-Far .stat-box span {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .Impact-So-Far .impact-top{
        flex-wrap:wrap;
        gap: 20px;
    }
}

@media (max-width: 450px) {
    .Impact-So-Far {
        padding: 70px 20px;
    }
    .Impact-So-Far .impact-wrapper {
        padding: 40px 20px;
    }
    .Impact-So-Far .impact-stats{
        gap: 25px 15px;
        padding: 20px 10px;
    }
    .Impact-So-Far .impact-top{
        flex-wrap:wrap;
        gap: 20px;
        text-align: center;
    }
}



/******************************************Where-Your-Support-Goes-cleanthehill*******************************************/

.Where-Your-Support-Goes-cleanthehill{
  padding:80px 20px;
  background:#f3f3f3;
  text-align:center;
}

/* Layout */
.wysg-wrapper{
  display:flex;
  justify-content:center;
  align-items: center;
  gap: 140px;
  flex-wrap: wrap;
  margin-left: 80px;
}

/* DONUT */
.wysg-chart{
  position:relative;
  width:420px;
  height:420px;
}

.donut-svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.slice{
  cursor:pointer;
  transition:0.3s ease;
}

.slice:hover{
  stroke-width:70;
  filter:brightness(1.1);
}

/* Center image */
.donut-center-img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
}

.donut-center-img img{
  width:100%;
}

/* Hover Label (ONLY visible on hover) */
.hover-label{
  position:absolute;
  font-size:18px;
  font-weight:600;
  color:#2c2c2c;
  background:#ffffff;
  padding:8px 14px;
  border-radius:6px;
  box-shadow:0 8px 18px rgba(0,0,0,0.2);
  display:none;
  white-space:nowrap;
}

/* RIGHT CARD */
.wysg-card{
  background:#d9dee4;
  padding:45px;
  border-radius:20px;
  width:550px;
  box-shadow:8px 12px 18px rgba(0,0,0,0.25);
  text-align:center;
}

.card-title{
  /*font-family:Georgia, serif;*/
  font-size:22px;
  margin-bottom: 15px;
}

.card-cost{
  font-size:60px;
  font-weight:800;
  color:#1f6b43;
  margin:10px 0;
}

.card-sub{
  font-size:15px;
  margin-bottom:25px;
}

.card-item{
  background:#c8d8cf;
  padding:14px;
  border-radius:8px;
  justify-content:space-between;
  margin-bottom:12px;
  height: 85px;
}

.price{
    font-size: 19px;
  font-weight:700;
}

.full-transparency-desc{
  font-size: 17px;
  color:#333;
}

.donate-btn{
  display:inline-block;
  margin-top:25px;
  background:#1f6b43;
  color:#fff;
  padding:14px 30px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}

.card-note{
  margin-top:18px;
  font-size:14px;
}

/* Make sure slices receive pointer events */
.slice {
  cursor: pointer;
  transition: 0.3s ease;
  pointer-events: stroke;
}

/* Ensure hover label is above SVG */
.hover-label {
  position: absolute;
  font-size: 18px;
  font-weight: 600;
  color: #2c2c2c;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  display: none;
  white-space: nowrap;
  z-index: 50; /* VERY IMPORTANT */
}

/* Make chart relative */
.wysg-chart {
  position: relative;
}


.wysg-chart{
  position:relative;
  width:420px;
  height:420px;
}

.donut-svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.slice{
  cursor:pointer;
  pointer-events:stroke;
  transition:0.3s ease;
}

.slice:hover{
  stroke-width:70;
  filter:brightness(1.1);
}

/* Center image */
.donut-center-img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
}

.donut-center-img img{
  width:100%;
}

.outside-label{
  position:absolute;
  font-size:17px;
  font-weight:600;
  color:#2c2c2c;
  line-height:1.4;
  text-align:center;
  opacity:1;   /* Always visible */
}


/* Exact positions */
.gloves{ top:20px; left:-60px; width:170px; }
.logistics{ top:60px; right:-110px; width:170px; }
.awareness{ top: 250px; right: -120px; width: 170px; }
.waste{ bottom:-55px; left:120px; width:190px; }
.drive{ top:180px; left:-126px; width:170px; }




@media (max-width: 992px) {

  .Where-Your-Support-Goes-cleanthehill {
    padding: 70px 20px;
  }

  /* Heading */
  .wysg-header h2 {
    font-size: 34px;
  }

  .wysg-desc {
    font-size: 16px;
    margin-bottom: 50px;
  }

  /* Layout spacing */
  .wysg-wrapper {
    gap: 60px;
  }

  /* Donut resize */
  .wysg-chart {
    width: 340px;
    height: 340px;
  }

  .donut-center-img {
    width: 100px;
  }

  /* Card resize */
  .wysg-card {
    width: 380px;
    padding: 35px;
  }

  .card-cost {
    font-size: 48px;
  }

  .card-item {
    font-size: 14px;
  }

  /* Outside labels adjust (important) */
  .outside-label {
    font-size: 14px;
  }

  .gloves { left: -40px; }
  .logistics { right: -80px; }
  .awareness { right: -90px; }
  .drive { left: -90px; }

}



@media (max-width: 768px) {

  .Where-Your-Support-Goes-cleanthehill {
    padding: 60px 15px;
  }

  /* Header */
  .wysg-header h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .wysg-subtitle {
    font-size: 14px;
  }

  .wysg-desc {
    font-size: 14px;
    margin-bottom: 40px;
  }

  /* STACK layout */
  .wysg-wrapper {
    flex-direction: column;
    gap: 40px;
    margin: 0;
  }

  /* Donut smaller */
  .wysg-chart {
    width: 260px;
    height: 260px;
  }

  .donut-center-img {
    width: 80px;
  }

  /* 🔥 IMPORTANT: Hide outside labels on mobile (they break layout) */
  .outside-label {
    display: none;
  }

  /* Card full width */
  .wysg-card {
    width: 100%;
    padding: 25px;
    border-radius: 16px;
  }

  .card-cost {
    font-size: 42px;
  }

  .card-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
  }

  .donate-btn {
    width: 100%;
    padding: 12px;
  }

  .card-note {
    font-size: 13px;
  }

}

/*************************************************************Take-the-first-step-cleanthehill*****************************************************************/


.Take-the-first-step-cleanthehill {
  padding: 80px 20px;
  background: #ffffff;
}

.cleanthehill-container {
  width: 1180px;
  margin: 0 auto;
}

/* Header */
.cleanthehill-header {
  text-align: center;
  margin-bottom: 65px;
}

/* Grid */
.cleanthehill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 42px 40px;
}

/* Card */
.cleanthehill-card {
    background: #cfe9e2;
    border-radius: 10px;
    padding: 40px 25px 30px;
    position: relative;
}

/* Title inside card */
.cleanthehill-card h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Paragraph */
.cleanthehill-card p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 420px;
}

/* Icon Box */
.cleanthehill-icon {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 75px;
    height: 75px;
    background: #54927f;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cleanthehill-icon img {
  width: 60px;
}

/* Button */
.cleanthehill-btn {
  display: inline-block;
    background: #478140;
    padding: 10px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    color: white;
}

/* Responsive */
@media (max-width: 1024px) {
  .cleanthehill-container {
    width: 92%;
  }

  .cleanthehill-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .cleanthehill-card p{
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .cleanthehill-grid {
    gap: 30px;
  }
      .cleanthehill-card p {
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .cleanthehill-card {
        padding: 30px 25px 25px;
    }
    .cleanthehill-card h3 {
        font-size: 28px;
        margin-right: 70px;
    }
    .cleanthehill-icon {
        right: 20px;
        width: 60px;
        height: 60px;
    }
    
    .cleanthehill-icon img {
      width: 50px;
    }
    .cleanthehill-btn{
        font-size: 16px;
    }
}

@media (max-width: 567px){
    .cleanthehill-grid {
        grid-template-columns: 1fr;
    }
    .cleanthehill-card h3 {
        font-size: 25px;
        margin-right: 70px;
    }
}





/*********************************************************************************************************/
/*************************** SeedThefuture Page  ***********************************************************/
/*********************************************************************************************************/



/********************************** SeedThefuture - Page -Hero *********************************************/
/* ===============================
   Seed The future Hero (Accurate Match)
================================= */

.seedthefuture-page-hero {
    position: relative;
    width: 100%;
    min-height: auto;
    background-size: cover;
    background-position: center;
    background-image: url('https://ytds.org/ytds_2/asset/images/SeedBall Page Banner (1).webp');
}

/* Content Container */
.seedthefuture-container {
    position: relative;
    width: 100%;
    padding: 110px 120px 45px;
    color: #fff;
}

/* Typography */
.seedthefuture-subtitle {
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.85;
    animation: fadeUp 1s ease forwards;
}

.seedthefuture-title {
    font-size: 65px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
    animation: fadeUp 1.2s ease forwards;
}

.seedthefuture-tagline {
    font-size: 27px;
    font-weight: 600;
    /*width:750px;*/
    color: #f5d96b;
    margin-bottom: 15px;
    animation: fadeUp 1.4s ease forwards;
}

.seedthefuture-description {
    max-width: 750px;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 15px;
    opacity: 0.9;
    animation: fadeUp 1.6s ease forwards;
}

/* Stats */
.seedthefuture-stats {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
    /*flex-wrap: wrap;*/
}

.seedthefuture-stat {
    background: rgb(160 160 160 / 25%);
    padding: 20px 30px;
    border-radius: 16px;
    backdrop-filter: blur(1px);
    min-width: 200px;
    text-align: center;
    transition: 0.3s ease;
}

.seedthefuture-stat:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-6px);
}

.seedthefuture-stat h3 {
    font-size: 36px;
    color: #f5d96b;
    margin-bottom: 8px;
}

.seedthefuture-stat span {
    font-size: 15px;
    opacity: 0.85;
}

/* Buttons */
.seedthefuture-buttons {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.seedthefuture-btn-primary {
    background: #f5d96b;
    color: #000;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.seedthefuture-btn-primary:hover {
    background: #fff;
}

.seedthefuture-btn-secondary {
    border: 2px solid #f5d96b;
    padding: 15px 35px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.seedthefuture-btn-secondary:hover {
    background: #f5d96b;
    color: #000;
}

/* Animation */
@keyframes fadeUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .seedthefuture-container {
        padding: 100px 70px 56px;
    }
    .seedthefuture-title {
    font-size: 70px;
    }
    .seedthefuture-tagline {
    font-size: 25px;
    }
    .seedthefuture-stat {
    padding: 18px 20px;
    }
    .seedthefuture-stat h3 {
    font-size: 35px;
    }
    .seedthefuture-stat span {
    font-size: 15px;
    }
}

@media (max-width: 992px) {
    .seedthefuture-page-hero{
        background-image: url('https://ytds.org/ytds_2/asset/images/V6 2 (1).webp');
    }
    .seedthefuture-container {
        padding: 350px 50px 250px;
        text-align: center;
        top: -220px;
    }
    .seedthefuture-title {
        font-size: 50px;
    }
    .seedthefuture-tagline {
        font-size: 24px;
    }
    .seedthefuture-stats {
        justify-content: center;
        flex-wrap: nowrap;
    }
    .seedthefuture-buttons{
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .seedthefuture-title {
        font-size: 38px;
    }
}

@media (max-width: 600px) {
    .seedthefuture-container {
        padding: 100px 20px 50px;
        top: 0;
    }
    .seedthefuture-title {
        font-size: 30px;
    }
    .seedthefuture-tagline {
        font-size: 20px;
    }
    .seedthefuture-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    .seedthefuture-stat {
        padding: 10px 20px;
        background: rgb(0 0 0 / 40%);
    }
    .seedthefuture-stat h3 {
        font-size: 30px;
        margin-bottom: 0px;
    }
    .seedthefuture-buttons {
        gap: 15px;
    }
    .seedthefuture-btn-primary,
    .seedthefuture-btn-secondary {
        width: 100%;
        text-align: center;
    }
}



/******************************* SeedTheFuture - Page - The Real Challenge *************************************************/
/* ==========================================
   The Real Challenge Section
========================================== */

.seedthefuture-page-therealchallenges-classname {
    background: #f5f6f4;
    padding: 80px 6% 0px;
}

/* Top Layout */
.seedthefuture-page-therealchallenges-classname-container {
    display: flex;
    align-items: center;
    gap: 65px;
}

/* Image */
.seedthefuture-page-therealchallenges-classname-image img {
    width: 100%;
    max-width: 460px;
    border-radius: 20px;
    display: block;
}

/* Content */
.seedthefuture-page-therealchallenges-classname-content {
    max-width: 700px;
    margin-top: -100px
}

.seedthefuture-page-therealchallenges-classname-description {
    font-size: 17px;
    line-height: 1.7;
    color: #333;
}

/* Cards Grid */
.seedthefuture-page-therealchallenges-classname-challenges {
    display: grid;
    width: 95%;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: auto;
    margin-top: -50px;
    padding: 0px 0px 80px;
}

/* Card */
.seedthefuture-page-therealchallenges-classname-card {
    background: #cfe9e2;
    padding: 5px 15px;
    border-radius: 10px;
    border: 2px solid #478140;
    align-content: center;
    position: relative;
    transition: 0.3s ease;
}

.seedthefuture-page-therealchallenges-classname-card:hover {
    transform: translateY(-6px);
}

/* Floating Icon */
.seedthefuture-page-therealchallenges-classname-icon {
    position: absolute;
    top: -25px;
    right: -2px;
    background: #54927f;
    padding: 5px;
    border-radius: 10px;
}

.seedthefuture-page-therealchallenges-classname-icon img {
    width: 40px;
    height: 35px;
}

/* Card Text */
.seedthefuture-page-therealchallenges-classname-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #111;
}

.seedthefuture-page-therealchallenges-classname-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* ==========================
   Responsive
========================== */

@media (max-width: 1024px) {

    .seedthefuture-page-therealchallenges-classname-container {
        /*flex-direction: column;*/
        text-align: center;
    }

    .seedthefuture-page-therealchallenges-classname-image img {
        max-width: 350px;
    }
    .seedthefuture-page-therealchallenges-classname-main-title {
        font-size: 40px;
        margin-bottom: 15px;
    }
    .seedthefuture-page-therealchallenges-classname-content {
        max-width: 50%;
        margin-top: -50px;
    }
    .seedthefuture-page-therealchallenges-classname-challenges {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 50px;
    }
    .seedthefuture-page-therealchallenges-classname-small-title{
        margin-top: 50px;
    }
}

@media (max-width: 992px){
    .seedthefuture-page-therealchallenges-classname-container {
        flex-direction: column;
        text-align: center;
    }
    .seedthefuture-page-therealchallenges-classname-content {
    max-width: 100%;
    }
    .seedthefuture-page-therealchallenges-classname-small-title{
        margin-top: 0px;
    }
    .seedthefuture-page-therealchallenges-classname-challenges {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 50px;
    }
}

@media (max-width: 600px) {

    .seedthefuture-page-therealchallenges-classname-main-title {
        font-size: 30px;
    }

    .seedthefuture-page-therealchallenges-classname-challenges {
        grid-template-columns: 1fr;
    }

    .seedthefuture-page-therealchallenges-classname-card {
        padding: 20px;
    }

    .seedthefuture-page-therealchallenges-classname-icon {
        top: -18px;
        right: 15px;
    }
}






/************************* SeedTheFuture - Page - Why seed the future matters ***********************************************************/
/* =====================================================
   WHY SEED THE FUTURE MATTERS - REFINED VERSION
===================================================== */

.seedthefuture-page-whyseedthefuturematters-classname {
    /* background: #f3f4f2; */
    padding: 80px 50px;
}

.seedthefuture-page-whyseedthefuturematters-classname-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    width: 90%;
    margin: auto;
}

/* LEFT IMAGE */
.seedthefuture-page-whyseedthefuturematters-classname-left img {
    width: 100%;
    max-width: 590px;
    border-radius: 26px;
    display: block;
}

/* RIGHT SIDE */
.seedthefuture-page-whyseedthefuturematters-classname-right {
    max-width: 550px;
}

.seedthefuture-page-whyseedthefuturematters-classname-subtitle {
    font-size: 22px;
    font-weight: 500;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.seedthefuture-page-whyseedthefuturematters-classname-title {
    font-size: 46px;
    font-weight: 700;
    color: #2f4574;
    line-height: 1.1;
    margin-bottom: 5px;
}

.seedthefuture-page-whyseedthefuturematters-classname-text {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 10px;
}

/* FEATURE BOXES */
.seedthefuture-page-whyseedthefuturematters-classname-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.seedthefuture-page-whyseedthefuturematters-classname-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #cfe9e2;
    border: 2px solid #bcd6cf;
    padding: 5px 20px;
    border-radius: 12px;
    transition: 0.3s ease;
}

.seedthefuture-page-whyseedthefuturematters-classname-feature:hover {
    transform: translateY(-4px);
}

.seedthefuture-page-whyseedthefuturematters-classname-feature img {
    width: 60px;
    height: 55px;
    padding: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* TEXT */
.seedthefuture-page-whyseedthefuturematters-classname-feature h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

.seedthefuture-page-whyseedthefuturematters-classname-feature p {
    font-size: 16px;
    color: #333;
    line-height: 1.3;
}

/* =============================
   RESPONSIVE
============================= */

@media (max-width: 1024px) {

    .seedthefuture-page-whyseedthefuturematters-classname-wrapper {
        text-align: center;
    }
    .seedthefuture-page-whyseedthefuturematters-classname-wrapper{
        width: 100%;
    }
    .seedthefuture-page-whyseedthefuturematters-classname-right {
        max-width: 50%;
    }

    .seedthefuture-page-whyseedthefuturematters-classname-feature {
        text-align: left;
    }
}

@media (max-width: 992px) {
    .seedthefuture-page-whyseedthefuturematters-classname-wrapper {
        flex-direction: column;
    }
    .seedthefuture-page-whyseedthefuturematters-classname-right {
        max-width: 100%;
    }
}
@media (max-width: 600px) {

    .seedthefuture-page-whyseedthefuturematters-classname-title {
        font-size: 32px;
    }

    .seedthefuture-page-whyseedthefuturematters-classname-feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .seedthefuture-page-whyseedthefuturematters-classname-feature img {
        margin-bottom: 8px;
    }
}



/*************************** SeedTheFuture - Page - Building Awareness ********************************************************************/
/* =====================================================
   BUILDING AWARENESS SECTION
   seedthefuture-page-buildingawareness-classname
===================================================== */

.seedthefuture-page-buildingawareness-classname {
    background: linear-gradient(180deg, #0e5a35 0%, #126b3c 40%, #167f45 75%, #188a48 100%);
    padding: 80px 20px;
    color: #ffffff;
    overflow: hidden;
}

/* CONTAINER */
.seedthefuture-page-buildingawareness-classname-container {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 0 20px; */
}

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

.seedthefuture-page-buildingawareness-classname-header {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 35px;
}

.seedthefuture-page-buildingawareness-classname-header span {
    color: white;
    opacity: 0.9;
}

.seedthefuture-page-buildingawareness-classname-header h2 {
    color: #f4d06f;
}

.seedthefuture-page-buildingawareness-classname-header p {
    color: white;
    opacity: 0.95;
}

/* ================= 60 / 40 GRID ================= */

.seedthefuture-page-buildingawareness-classname-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
    align-items: center;
}

/* ================= LEFT GRID ================= */

.seedthefuture-page-buildingawareness-classname-left {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

.seedthefuture-page-buildingawareness-classname-card {
    /* background: #176f3f; */
    border: 2px solid #49bb84;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.seedthefuture-page-buildingawareness-classname-card:hover {
    background: #1c7c46;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
}

/* ICON BOX */

.seedthefuture-page-buildingawareness-classname-card .icon-box {
    /* background: #f4d06f;
    padding: 12px; */
    border-radius: 10px;
    flex-shrink: 0;
}

.seedthefuture-page-buildingawareness-classname-card .icon-box img {
    width: 45px;
    height: 45px;
    display: block;
}

/* CARD TEXT */

.seedthefuture-page-buildingawareness-classname-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.seedthefuture-page-buildingawareness-classname-card p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.95;
}

/* ================= RIGHT IMAGE ================= */

.seedthefuture-page-buildingawareness-classname-right {
    width: 100%;
    overflow: hidden; /* prevents overflow */
}

.seedthefuture-page-buildingawareness-classname-right img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 28px;
    object-fit: cover;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
    .seedthefuture-page-buildingawareness-classname-container {
        width: 90%;
    }
}

@media (max-width: 992px) {

    .seedthefuture-page-buildingawareness-classname-main {
        grid-template-columns: 1fr;
    }

    .seedthefuture-page-buildingawareness-classname-header h2 {
        font-size: 36px;
    }
}

@media (max-width: 600px) {

    .seedthefuture-page-buildingawareness-classname {
        padding: 80px 0;
    }

    .seedthefuture-page-buildingawareness-classname-header h2 {
        font-size: 28px;
    }

    /*.seedthefuture-page-buildingawareness-classname-card {*/
    /*    flex-direction: column;*/
    /*}*/

    .seedthefuture-page-buildingawareness-classname-card .icon-box {
        margin-bottom: 10px;
    }
    
    .seedthefuture-page-buildingawareness-classname-left {
        grid-template-columns: 1fr;
    }
}




/************************** SeedTheFuture - Page - Impact So Far ***************************************************************/
/* =====================================================
   IMPACT SO FAR SECTION
===================================================== */

.seedthefuture-page-impactsofar-classname {
    background: #f1f2f1;
    padding: 90px 0;
}

.seedthefuture-page-impactsofar-classname-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* HEADER */

.seedthefuture-page-impactsofar-classname-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px;
}

.seedthefuture-page-impactsofar-classname-header span {
    font-size: 25px;
    color: #222;
    display: block;
    margin-bottom: 10px;
}

.seedthefuture-page-impactsofar-classname-header h2 {
    font-size: 48px;
    font-weight: 700;
    color: #2f4574;
    margin: 0px 0px 10px;
}

.seedthefuture-page-impactsofar-classname-header p {
    font-size: 20px;
    color: #444;
    line-height: 1.7;
}

/* STATS GRID */

.seedthefuture-page-impactsofar-classname-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* CARD */

.seedthefuture-page-impactsofar-classname-card {
    background: #d0e9e2;
    border-radius: 14px;
    padding: 50px 20px 30px;
    text-align: center;
    position: relative;
    transition: 0.3s ease;
}

.seedthefuture-page-impactsofar-classname-card:hover {
    transform: translateY(-6px);
}

/* ICON */

.seedthefuture-page-impactsofar-classname-card .icon-box {
    width: 70px;
    height: 70px;
    background: #3f7d3f;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -85px auto 20px auto;
    position: relative;
    /* top: 40px; */
}

.seedthefuture-page-impactsofar-classname-card .icon-box img {
    width: 50px;
    height: 50px;
    margin: auto;
}

/* NUMBER */

.seedthefuture-page-impactsofar-classname-card h3 {
    font-size: 54px;
    font-weight: 700;
    color: #3f7d3f;
    margin: 15px 0 5px;
}

/* LABEL */

.seedthefuture-page-impactsofar-classname-card p {
    font-size: 22px;
    color: #222;
}

/* RESPONSIVE */

@media (max-width: 992px) {

    .seedthefuture-page-impactsofar-classname-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .seedthefuture-page-impactsofar-classname-header h2 {
        font-size: 36px;
    }
}

@media (max-width: 600px) {

    .seedthefuture-page-impactsofar-classname {
        padding: 80px 0;
    }

    .seedthefuture-page-impactsofar-classname-stats {
        grid-template-columns: 1fr;
    }

    .seedthefuture-page-impactsofar-classname-header h2 {
        font-size: 28px;
    }

    .seedthefuture-page-impactsofar-classname-card h3 {
        font-size: 40px;
    }
}



/********************************************Where your support goes**************************************************************/



/* ================= SECTION BACKGROUND ================= */

.section{
  padding: 60px 35px 20px;
    background: linear-gradient(180deg, #0e5a35 0%, #126b3c 40%, #167f45 75%, #188a48 100%);
}

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

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

.header-block{
  text-align:center;
  color:white;
  margin-bottom:60px;
}


.desc{
  max-width:720px;
  margin:auto;
  font-size:18px;
  line-height:1.6;
}

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

.grid{
      display: grid;
    grid-template-columns: 1fr 595px;
  
    align-items: center;
}

/* ================= DONUT ================= */

.donut-wrapper{
  position:relative;
  width:420px;
  margin:auto;
}

/*#donut{*/
/*  width:100%;*/
/*  height:auto;*/
/*}*/

.center-box{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
 width: 265px;
    height: 270px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: #cfe9e2;
}

.center-box img{
  width:118px;
}

circle{
  transition: stroke-width .3s ease;
  cursor:pointer;
}

/* ================= TOOLTIP ================= */

.donut-tooltip{
  position:absolute;
  background:#cfe3dd;
  color:#1a2d5a;
  padding:14px 22px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  transform:scale(0.9);
  transition:all .25s ease;
  pointer-events:none;
  z-index:10;
}

.donut-tooltip.show{
  opacity:1;
  transform:scale(1);
}

/* ================= RIGHT CARD ================= */

.right-card{
  background:#e3e9ec;
  padding:35px;
  border-radius:20px;
  box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.right-card h3{
  margin-bottom:25px;
  color:#1a2d5a;
}

/* ================= BARS ================= */

.bar{
  background:#cfe3dd;
  padding:16px 20px;
  border-radius:12px;
  margin-bottom:18px;
  font-weight:700;
  cursor:pointer;
  transition:.3s ease;
}

.bar:hover{
  background:#bdd5cf;
}

.bar.active{
  background:#aac7c1;
  transform:scale(1.03);
}

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

.donate-btn{
  display:block;
  width:100%;
  text-align:center;
  background:#e6c96c;
  color:#1a2d5a;
  font-weight:800;
  padding:16px;
  border-radius:12px;
  margin-top:30px;
  text-decoration:none;
  box-shadow:0 6px 15px rgba(0,0,0,0.25);
  transition:.3s ease;
}

.donate-btn:hover{
  transform:translateY(-3px);
}

.bar{
  display:flex;
  align-items:center;   /* vertically center */
  gap:12px;             /* space between logo and text */
}

.bar img{
  width:7%;     /* adjust as needed */
  height:auto;
  display:block;
}

.bar span{
  line-height:1;
}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){
  .grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .right-card{
    margin-top:30px;
  }
}




@media (max-width: 992px) {

  /* Fix container spacing (VERY IMPORTANT) */
  .container-fluid {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 40px 20px !important;
  }

  /* Header */
  /*.title {*/
  /*  font-size: 32px;*/
  /*}*/

  .desc {
    font-size: 16px;
  }

  /* Grid → stack */
  .grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  /* Donut resize */
  .donut-wrapper {
    width: 320px;
  }

  #donut {
    width: 320px;
    height: 320px;
  }

  .center-box {
    width: 200px;
    height: 200px;
  }

  .center-box img {
    width: 90px;
  }

  /* Right card */
  .right-card {
    width: 100%;
    padding: 30px;
  }

  /* Bars */
  .bar {
    padding: 14px 16px;
    font-size: 14px;
  }

  .bar img {
    width: 10%;
  }

}


@media (max-width: 768px) {

  /* Section padding */
  .section {
    padding: 60px 15px;
  }

  /* Container fix */
  .container-fluid {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 30px 15px !important;
  }

  /* Header */
  /*.title {*/
  /*  font-size: 26px;*/
  /*  line-height: 1.3;*/
  /*}*/

  /*.subtitle {*/
  /*  font-size: 14px !important;*/
  /*}*/

  .desc {
    font-size: 14px;
    margin-bottom: 40px;
  }

  /* Stack layout */
  .grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Donut smaller */
  .donut-wrapper {
    width: 250px;
  }

  #donut {
    width: 250px;
    height: 250px;
  }

  .center-box {
    width: 150px;
    height: 150px;
  }

  .center-box img {
    width: 70px;
  }

  /* Tooltip smaller */
  .donut-tooltip {
    font-size: 13px;
    padding: 10px 14px;
  }

  /* Right card */
  .right-card {
    padding: 20px;
    border-radius: 14px;
  }

  /* Bars → better mobile UX */
  .bar {
    padding: 12px;
    font-size: 13px;
    gap: 10px;
  }

  .bar img {
    width: 14%;
  }

  /* Button */
  .donate-btn {
    padding: 14px;
    font-size: 14px;
  }

}

/**************************************** Empowerment Hero *******************************************************/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Outfit:wght@400;600;700;800;900&display=swap');

.empowerment-section {
  padding: 80px 20px;
  background: #f4f4f6;
}

/* Layout */
.empowerment-container {
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.empowerment-left {
  flex: 1.5;
}

/* Big Heading */
.empowerment-tag {
  font-family: Impact, sans-serif;
  font-size: 75px;
  color: #9956a2;
  margin: 15px 0;
  line-height: 1;
  text-transform: uppercase;
}

/* Title */
.empowerment-title {
  /*font-family: "Outfit", sans-serif;*/
  font-size: 35px;
  font-weight: 800;
  line-height: 1.18;
  color: #1f2a55;
  margin-bottom: 20px;
}

/* Description */
.empowerment-description {
    font-size: 20px;
    color: #444;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 10px;
}

/* Stats */
.empowerment-stats {
  display: flex;
  gap: 80px;
  margin-bottom: 35px;
  flex-wrap: wrap;
}

.empowerment-stat h3 {
  font-size: 60px;
  font-weight: 900;
  color: #9956a2;
  margin: 0 0 5px;
  line-height: 1;
}

.empowerment-stat p {
    /*font-family: "Outfit", sans-serif;*/
    font-size: 18px;
    font-weight: 600;
    color: #1f2a55;
    margin: 0;
}

/* Button */
.empowerment-btn {
  display: inline-block;
  padding: 16px 40px;
  background: #8e44ad;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.empowerment-btn:hover {
  background: #732d91;
  transform: translateY(-2px);
}

/* RIGHT */
.empowerment-right {
  flex: 1;
  display: flex;
  justify-content: center;
}

.empowerment-image {
  /*max-width: 500px;*/
  width: 100%;
  height: auto;
  /*margin-top: -114px;*/
}

/* ================= Responsive ================= */

@media (max-width: 992px) {
  .empowerment-container {
    flex-direction: column;
    text-align: center;
  }

  .empowerment-stats {
    justify-content: center;
    gap: 40px;
  }

  .empowerment-tag {
    font-size: 58px;
  }

  .empowerment-title {
    font-size: 40px;
  }
}

@media (max-width: 768px){
  .empowerment-title {
    font-size: 35px;
  }
  .empowerment-stat h3 {
    font-size: 50px;
  }
  .empowerment-image {
      width: 80%;
  }
}

@media (max-width: 576px) {
  .empowerment-tag {
    font-size: 42px;
  }

  .empowerment-title {
    font-size: 30px;
  }

  .empowerment-description {
    font-size: 16px;
  }

  .empowerment-stats {
    /*flex-direction: column;*/
    gap: 25px;
  }

  .empowerment-btn {
    /*width: 100%;*/
    /*max-width: 260px;*/
    margin-top: 10px;
    margin-left: 0px !important;
  }
}



<!--/********************************************* Strip ************************************************/-->
<!--/* ================================-->
<!--   empowerment LOOP STRIP (WITH IMAGE ICON)-->
<!--================================ */-->

.empowerment-text-strip {
  background-color: #dfd2e7;
  padding: 30px 0;
  overflow: hidden;
}

.empowerment-text-slider {
  width: 100%;
  overflow: hidden;
}

/* track */
.empowerment-slider-track {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  white-space: nowrap;
  animation: empowerment-scroll 35s linear infinite;
  will-change: transform;
}

/* text */
.empowerment-tagtext {
  font-size: 35px;
  font-weight: 700;
  color: #1f3a2d;
  line-height: 1.2;
}

/* icon image */
.empowerment-dot {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: inline-block;
  flex: 0 0 auto;
}

/* infinite scroll */
@keyframes empowerment-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .empowerment-tagtext {
    font-size: 18px;
  }
  .empowerment-dot {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .empowerment-tagtext {
    font-size: 16px;
  }
  .empowerment-dot {
    width: 14px;
    height: 14px;
  }
}




/*********************************** Why empowerment Matters ***************************************************/
.empowerment-urgency-section{
  position: relative;
  color: #fff;
  padding: 80px 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* watermark on right */
.empowerment-urgency-section::after{
  content:"";
  position:absolute;
  top:-40px;
  right:-40px;
  width:100%;
  height:auto;
  background:url("assets/img/empowerment (The Urgency is Now).png") no-repeat;
  background-size:contain;
  opacity:0.12;
  pointer-events:none;
}

.empowerment-urgency-container{
  max-width:100%;
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* header */
.empowerment-urgency-header{
  text-align:center;
  margin-bottom:35px;
}

.empowerment-urgency-subtitle{
  color: white;
  opacity:.9;
}

.empowerment-urgency-title{
  color:#ffd86b;
}

.empowerment-urgency-desc{
  color: white;
  width: 1000px;
  opacity:.95;
}

/* ✅ FIX: 4 columns always on desktop */
.empowerment-urgency-cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0; /* dividers will handle spacing */
  margin:0 0 60px;
}

/* Card padding + divider using pseudo element */
.empowerment-urgency-card{
  padding:0 36px;
  position:relative;
}

/* ✅ Divider line between cards (not extra HTML) */
.empowerment-urgency-card:not(:last-child)::after{
  content:"";
  position:absolute;
  top:10px;
  right:0;
  width:1px;
  height:240px;
  background:rgba(255,255,255,0.25);
}

/* icon box */
.empowerment-urgency-icon{
  width:72px;
  height:72px;
  border-radius:14px;
  /*background:rgba(255,255,255,0.14);*/
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 18px;
}

.empowerment-urgency-icon img{
  width:65px;
  height:auto;
  display:block;
}

.empowerment-urgency-card h3{
  margin:0 0 12px;
  font-size:24px;
  font-weight:800;
  color:#ffd86b;
}

.empowerment-urgency-card p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  opacity:.95;
}

/* footer */
.empowerment-urgency-footer{
  text-align:center;
  font-size:24px;
  font-weight:800;
 
}

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

/* Tablet */
@media(max-width:1100px){
  .empowerment-urgency-cards{
    grid-template-columns:repeat(2, 1fr);
    gap:50px 20px;
  }

  .empowerment-urgency-card{
    padding:0 20px;
  }

  .empowerment-urgency-card::after{
    display:none;
  }
}

/* Mobile */
@media(max-width:600px){
  .empowerment-urgency-section{
    padding:70px 16px 50px;
  }

  .empowerment-urgency-title{
    font-size:34px;
  }

  .empowerment-urgency-desc{
    font-size:16px;
  }

  .empowerment-urgency-cards{
    grid-template-columns:1fr;
    gap:40px;
  }
  
  .empowerment-urgency-card{
    padding: 0 20px;
    justify-items: center;
    text-align: center;
  }

  .empowerment-urgency-footer{
    font-size:20px;
  }
}



/*<!--------------------------------- SECTION: Why Empowerment Matters ----------------------------->*/

.Why-Empowerment-Matters {
  padding: 80px 20px;
  /*background: #f6f4f8;*/
}

.wem-container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

/* Subtitle */
.wem-subtitle {
  display: block;
  font-size: 14px;
  color: #6b6b6b;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

/* Main Title */
.wem-title {
  font-size: 42px;
  font-weight: 700;
  color: #1d2d50;
  margin-bottom: 60px;
}

/* Main Content Layout */
.wem-content {
  display: flex;
  gap: 60px;
  align-items: center;
  text-align: left;
  margin-top: 30px;
}

/* Left Image */
.wem-image {
  flex: 1;
}

.wem-image img {
  width: 100%;
  border-radius: 22px;
  object-fit: cover;
         margin-top: -85px;
}

/* Right Side */
.wem-right {
  flex: 1;
}

/* Intro Paragraph */
.wem-intro {
  font-size: 16px;
  color: #555;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* Grid */
.wem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

/* Card */
.wem-card {
  background: #e7dff1;
  padding: 14px;
  border-radius: 16px;
  transition: 0.3s ease;
}

.wem-card:hover {
  transform: translateY(-5px);
}

/* Icon */
.wem-icon {
  font-size: 22px;
  margin-bottom: 12px;
}

/* Card Title */
.wem-card h3 {
  font-size: 18px;
  color: #1d2d50;
  margin-bottom: 8px;
}

/* Card Text */
.wem-card p {
 font-size: 13px;
    color: black;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
  .Why-Empowerment-Matters{
      padding: 80px 20px 0px;
  }
  
  .empowerment-page-safeherindia-left{
      text-align: center;
  }
  
  .wem-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .wem-icon{
      width: 125%;
  }
  
  .wem-image img {
      margin-top: 0px;
  }

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

  .wem-title {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
.wem-grid {
    grid-template-columns: 1fr;
  }
}



/******************************* Empowerment Page - Middle Strip **************************************************************/
/* Outer Section Background */
.empowerment-page-middle-strip-classname {
  /*background: #efefef;*/
  padding: 40px 20px;
  margin: 40px auto;
  display: flex;
  justify-content: center;
}

/* Purple Container */
.empowerment-page-middle-strip-wrapper {
  width: 100%;
  max-width: 1200px;
  background: linear-gradient(90deg, #7b2c83 0%, #5a1f60 100%);
  border-radius: 12px;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Left Content */
.empowerment-page-middle-strip-left h2 {
  color: #ffd84d;
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 8px 0;
  letter-spacing: 1.2px;
}

.empowerment-page-middle-strip-left p {
  color: #ffffff;
  font-size: 18px;
  margin: 0;
  line-height: 1.5;
  max-width: 750px;
}

/* Right Buttons */
.empowerment-page-middle-strip-right {
  display: flex;
  gap: 15px;
}

/* Buttons Base */
.empowerment-page-middle-strip-btn {
  padding: 12px 25px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
  display: inline-block;
  white-space: nowrap;
}

/* Yellow Button */
.empowerment-page-middle-strip-btn.primary {
  background: #ffd84d;
  color: #000;
}

.empowerment-page-middle-strip-btn.primary:hover {
  background: #ffcf33;
}

/* White Button */
.empowerment-page-middle-strip-btn.secondary {
  background: #f3f3f3;
  color: #000;
}

.empowerment-page-middle-strip-btn.secondary:hover {
  background: #e5e5e5;
}

/* Responsive */
@media (max-width: 768px) {
  .empowerment-page-middle-strip-classname{
      margin: 0 auto;
  }
  
  .empowerment-page-middle-strip-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .empowerment-page-middle-strip-right {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .empowerment-page-middle-strip-left h2 {
    font-size: 20px;
  }

  .empowerment-page-middle-strip-btn {
    width: 100%;
    text-align: center;
  }
}



/********************************* Empowerment Page - #SafeHerIndia *********************************************************************/
.empowerment-page-safeherindia-classname {
  /*background: #f4f4f4;*/
  padding: 80px 20px;
}

.empowerment-page-safeherindia-container {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: start;
}

/* LEFT SIDE */
.empowerment-page-safeherindia-subtitle {
  font-size: 22px;
  color: #333;
}

.empowerment-page-safeherindia-title {
  font-size: 45px;
  font-weight: 700;
  color: #1e3a5f;
  margin: 10px 0;
}

.empowerment-page-safeherindia-description {
  font-size: 18px;
  line-height: 1.4;
  color: #555;
  margin-bottom: 20px;
}

/* FEATURES */
.empowerment-page-safeherindia-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.empowerment-page-safeherindia-feature {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #dcd6e8;
  padding: 7px 10px;
  font-size: 20px;
  border-radius: 10px;
  font-weight: 600;
}

.empowerment-page-safeherindia-feature img {
  width: 35px;
  height: 35px;
}

/* BUTTONS */
.empowerment-page-safeherindia-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.empowerment-page-safeherindia-btn {
  background: #873994;
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.empowerment-page-safeherindia-btn:hover {
  background: #4d1f6b;
}

.empowerment-page-safeherindia-readmore {
  color: #333;
  font-weight: 600;
  font-size: 20px;
  text-decoration: underline;
}

/* RIGHT SIDE */
.empowerment-page-safeherindia-image-wrapper img {
  width: 100%;
  border-radius: 30px;
  display: block;
}

.empowerment-page-safeherindia-image-caption {
  text-align: center;
  margin: 15px 0 25px;
  font-weight: 600;
  color: #555;
}

/* DRIVE CARD */
.empowerment-page-safeherindia-drive-card {
  background: #dcd6e8;
  padding: 15px 25px;
  border-radius: 12px;
  gap:20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ICON LEFT SIDE */
.empowerment-page-safeherindia-drive-icon img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* DRIVE TEXT */
.empowerment-page-safeherindia-drive-content small {
  font-weight: 600;
  font-size: 16px;
  color: #444;
}

.empowerment-page-safeherindia-drive-content h3 {
  margin: 5px 0;
  color: #1e3a5f;
  font-size: 22px;
}

.empowerment-page-safeherindia-drive-content p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.empowerment-page-safeherindia-drive-logo img {
  height: 55px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .empowerment-page-safeherindia-container {
    grid-template-columns: 1.3fr 1fr;
  }
  /*.empowerment-page-safeherindia-drive-card{*/
  /*    display: block;*/
  /*}*/
  .empowerment-page-safeherindia-drive-content h4{
      margin: 7px 0;
  }
  .empowerment-page-safeherindia-drive-logo{
      margin-top: 15px;
  }
}

@media (max-width: 768px) {
  .empowerment-page-safeherindia-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .empowerment-page-safeherindia-title {
    font-size: 30px;
  }

  .empowerment-page-safeherindia-actions {
    flex-direction: column;
  }

  .empowerment-page-safeherindia-btn {
    width: 100%;
    text-align: center;
  }

  .empowerment-page-safeherindia-drive-card {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}




/********************************* Empowerment Page - #DonateBloodSaveLives *********************************************************************/
.empowerment-page-donatebloodsavelives-classname {
  /*background: #f4f4f4;*/
  padding: 80px 20px;
}

.empowerment-page-donatebloodsavelives-container {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: start;
}

/* LEFT SIDE */
.empowerment-page-donatebloodsavelives-subtitle {
  font-size: 22px;
  color: #333;
}

.empowerment-page-donatebloodsavelives-title {
  font-size: 45px;
  font-weight: 700;
  color: #1e3a5f;
  margin: 10px 0;
}

.empowerment-page-donatebloodsavelives-description {
  font-size: 18px;
  line-height: 1.4;
  color: #555;
  margin-bottom: 20px;
}

/* FEATURES */
.empowerment-page-donatebloodsavelives-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.empowerment-page-donatebloodsavelives-feature {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #dcd6e8;
  padding: 7px 10px;
  font-size: 20px;
  border-radius: 10px;
  font-weight: 600;
}

.empowerment-page-donatebloodsavelives-feature img {
  width: 35px;
  height: 35px;
}

/* BUTTONS */
.empowerment-page-donatebloodsavelives-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.empowerment-page-donatebloodsavelives-btn {
  background: #873994;
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.empowerment-page-donatebloodsavelives-btn:hover {
  background: #4d1f6b;
}

.empowerment-page-donatebloodsavelives-readmore {
  color: #333;
  font-weight: 600;
  font-size: 20px;
  text-decoration: underline;
}

/* RIGHT SIDE */
.empowerment-page-donatebloodsavelives-image-wrapper img {
  width: 100%;
  border-radius: 30px;
  display: block;
}

.empowerment-page-donatebloodsavelives-image-caption {
  text-align: center;
  margin: 15px 0 25px;
  font-weight: 600;
  color: #555;
}

/* DRIVE CARD */
.empowerment-page-donatebloodsavelives-drive-card {
  background: #dcd6e8;
  padding: 15px 25px;
  border-radius: 12px;
  gap: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ICON LEFT SIDE */
.empowerment-page-donatebloodsavelives-drive-icon img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* DRIVE TEXT */
.empowerment-page-donatebloodsavelives-drive-content small {
  font-weight: 600;
  font-size: 16px;
  color: #444;
}

.empowerment-page-donatebloodsavelives-drive-content h3 {
  margin: 5px 0;
  color: #1e3a5f;
  font-size: 22px;
}

.empowerment-page-donatebloodsavelives-drive-content p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.empowerment-page-donatebloodsavelives-drive-logo img {
  height: 55px;
}

/* RESPONSIVE */

@media (max-width: 992px) {
  .empowerment-page-donatebloodsavelives-container {
    grid-template-columns: 1fr 1.3fr;
  }
}

@media (max-width: 768px) {
  .empowerment-page-donatebloodsavelives-container {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}

@media (max-width: 576px) {
  .empowerment-page-donatebloodsavelives-container {
    grid-template-columns: 1fr;
  }
  .empowerment-page-donatebloodsavelives-classname {
      padding: 70px 20px 10px;
  }
  .empowerment-page-donatebloodsavelives-title {
    font-size: 28px;
  }
  .empowerment-page-donatebloodsavelives-actions {
    flex-direction: column;
  }
  .empowerment-page-donatebloodsavelives-btn {
    width: 100%;
    text-align: center;
  }

  .empowerment-page-donatebloodsavelives-drive-card {
    /*flex-direction: column;*/
    gap: 10px;
    /*text-align: center;*/
  }
  
  .empowerment-page-donatebloodsavelives-left{
      text-align: center;
  }
}



/********************************* Youth-Led Empowerment Strip *********************************************************************/

.empowerment-page-youthled-strip-classname {
  /*background: #f4f4f4;*/
  padding: 40px 20px 80px;
}

.empowerment-page-youthled-strip-container {
    max-width: 1100px;
    margin: auto;
    background: #dcd3e6;
    border-radius: 20px;
    padding: 15px 35px;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* ICON CIRCLE */
.empowerment-page-youthled-strip-icon {
  /*width: 90px;*/
  /*height: 90px;*/
  /*min-width: 90px;*/
  /*background: linear-gradient(135deg, #873994, #b46cc2);*/
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empowerment-page-youthled-strip-icon img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

/* CONTENT */
.empowerment-page-youthled-strip-content h3 {
  font-size: 26px;
  margin: 0 0 8px;
  font-weight: 700;
  color: #111;
}

.empowerment-page-youthled-strip-content p {
  margin: 0;
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .empowerment-page-youthled-strip-classname {
      padding: 30px 20px 50px;
  }
  .empowerment-page-youthled-strip-container {
    /*flex-direction: column;*/
    text-align: center;
    padding: 30px 20px;
  }

  .empowerment-page-youthled-strip-icon {
    width: 80px;
    height: 80px;
  }

  .empowerment-page-youthled-strip-content h3 {
    font-size: 22px;
  }

  .empowerment-page-youthled-strip-content p {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .empowerment-page-youthled-strip-container {
    flex-direction: column;
  }
}




/********************************* Empowerment- Page - Measurable Outcomes *********************************************************************/
.empowerment-page-measurable-outcome-classname {
  /*background: #f4f4f4;*/
  padding: 80px 20px;
  text-align: center;
}

.empowerment-page-measurable-outcome-container {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.empowerment-page-measurable-outcome-description {
  margin-bottom: 80px;
}

/* GRID */
.empowerment-page-measurable-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* CARD */
.empowerment-page-measurable-outcome-card {
  background: #dcd3e6;
  padding: 40px 20px 25px;
  border-radius: 15px;
  position: relative;
  text-align: center;
}

/* ICON (floating top style) */
.empowerment-page-measurable-outcome-icon {
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 12px;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empowerment-page-measurable-outcome-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* NUMBER */
.empowerment-page-measurable-outcome-card h3 {
  font-size: 48px;
  color: #2f3d6c;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* LABEL */
.empowerment-page-measurable-outcome-card p {
  margin: 0;
  font-size: 17px;
  color: #444;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .empowerment-page-measurable-outcome-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .empowerment-page-measurable-outcome-grid {
    grid-template-columns: 1fr;
    width: 300px;
    margin: 0 auto;
    gap: 35px;
  }

  .empowerment-page-measurable-outcome-title {
    font-size: 30px;
  }

  .empowerment-page-measurable-outcome-description {
    font-size: 16px;
  }
}





/***************************************************************** Empowerment - Page - How You Can Support *********************************************/
/* SECTION */
.empowerment-page-how-you-can-support-classname {
  /*background: #f4f4f4;*/
  padding: 80px 20px;
}

/* CONTAINER */
.empowerment-page-how-you-can-support-container {
  width: 1200px;
  max-width: 90%;
  margin: auto;
}

/* HEADER */
.empowerment-page-how-you-can-support-header {
  text-align: center;
  margin-bottom: 70px;
}

/* GRID */
.empowerment-page-how-you-can-support-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* CARD DEFAULT STYLE (All 3 Same Initially) */
.empowerment-page-how-you-can-support-card {
  background: #dcd3e6;
  border-radius: 20px;
  padding: 30px 25px;
  position: relative;
  transition: all 0.4s ease;
  border: 2px solid #dcd3e6;
}

/* FLOATING ICON */
.empowerment-page-how-you-can-support-icon {
  position: absolute;
  top: -45px;
  right: -25px;
  background: #ffffff;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.empowerment-page-how-you-can-support-icon img {
  height: 55px;
}

/* TITLE */
.empowerment-page-how-you-can-support-card h3 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1f2a55;
}

/* DESCRIPTION */
.empowerment-page-how-you-can-support-card p {
  font-size: 16px;
  color: #444;
  margin-bottom: 18px;
  line-height: 1.6;
}

/* LIST */
.empowerment-page-how-you-can-support-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.empowerment-page-how-you-can-support-card ul li {
  font-size: 16px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 22px;
  color: #333;
}

.empowerment-page-how-you-can-support-card ul li:before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #873994;
  font-weight: 700;
}

/* BUTTON */
.empowerment-page-how-you-can-support-card a {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background: #873994;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

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

.empowerment-page-how-you-can-support-card:hover {
  background: linear-gradient(135deg, #873994, #5e2a84);
  border-color: #5e2a84;
  transform: translateY(-8px);
}

/* Hover Text Colors */
.empowerment-page-how-you-can-support-card:hover h3 {
  color: #ffd86b;
}

.empowerment-page-how-you-can-support-card:hover p,
.empowerment-page-how-you-can-support-card:hover ul li {
  color: #ffffff;
}

.empowerment-page-how-you-can-support-card:hover ul li:before {
  color: #ffd86b;
}

/* Hover Button */
.empowerment-page-how-you-can-support-card:hover a {
  background: #ffd86b;
  color: #1f2a55;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .empowerment-page-how-you-can-support-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .empowerment-page-how-you-can-support-cards {
    grid-template-columns: 1fr 1fr;
    padding: 0px 15px 0px 0px;
  }

  .empowerment-page-how-you-can-support-card {
    padding: 70px 25px 40px;
    margin-top: 20px;
  }

  .empowerment-page-how-you-can-support-header h2 {
    font-size: 36px;
  }

  .empowerment-page-how-you-can-support-header p {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .empowerment-page-how-you-can-support-cards {
    grid-template-columns: 1fr;
}
.empowerment-page-how-you-can-support-container {
  max-width: 100%;
  margin: auto;
}
}





/****************************** Empowerment - Page - Stories of Empowerment *********************************************/
/****************************** Stories of Empowerment ******************************************************************/

.empowerment-page-stories-of-emp-classname {
  position: relative;
  padding: 80px 0px;
  overflow: hidden;
}

/* Watermark Image */
.empowerment-page-stories-of-emp-bg {
  position: absolute;
  width: 100%;
  height: auto;
}

/* Container */
.empowerment-page-stories-of-emp-container {
  position: relative;
  z-index: 2;
  width: 1200px;
  max-width: 90%;
  padding: 80px 0px;
  margin: auto;
  color: #fff;
}

/* Header */
.empowerment-page-stories-of-emp-header {
  text-align: center;
  margin-bottom: 40px;
}

/*.empowerment-page-stories-of-emp-header span {*/
/*  font-size: 22px;*/
/*  opacity: 0.9;*/
/*}*/

/*.empowerment-page-stories-of-emp-header h2 {*/
/*  font-size: 48px;*/
/*  font-weight: 700;*/
/*  color: #ffd86b;*/
/*  margin: 7px 0;*/
/*}*/

/*.empowerment-page-stories-of-emp-header p {*/
/*  font-size: 18px;*/
/*  max-width: 900px;*/
/*  margin: auto;*/
/*  opacity: 0.9;*/
/*}*/

/* Grid */
.empowerment-page-stories-of-emp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Card */
.empowerment-page-stories-of-emp-card {
  border-radius: 20px;
  /*overflow: hidden;*/
  transition: 0.4s ease;
}

/* Image */
.emp-img img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* Bottom Content */
.emp-content {
  background: #f2f2f2;
  padding: 20px 25px;
  /*border-bottom-left-radius: 20px;*/
  /*border-bottom-right-radius: 20px;*/
  border-radius: 20px;
  color: #333;
}

/* Quote */
.quote-icon {
  font-size: 32px;
  color: #d1c7de;
  margin-bottom: 12px;
}

.emp-quote {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  font-style: italic;
  margin-bottom: 20px;
}

/* Divider */
.emp-divider {
  height: 1px;
  background: #ddd;
  margin-bottom: 18px;
}

/* Name */
.emp-content h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2f3d6c;
  margin-bottom: 5px;
}

/* Role */
.emp-content span {
  font-size: 16px;
  color: #888;
}

/* Hover */
.empowerment-page-stories-of-emp-card:hover {
  transform: translateY(-10px);
}

/* Button */
.empowerment-page-stories-of-emp-btn {
  text-align: center;
  margin-top: 60px;
}

.empowerment-page-stories-of-emp-btn a {
  padding: 15px 30px;
  background: #873994;
  color: #fff;
  font-size: 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.empowerment-page-stories-of-emp-btn a:hover {
  background: #ffd86b;
  color: #1f2a55;
}

/* Responsive */
@media (max-width: 992px) {
  .empowerment-page-stories-of-emp-bg{
    position: absolute;
    width: auto;
    height: auto;
  }
  .empowerment-page-stories-of-emp-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .empowerment-page-stories-of-emp-bg{
    position: absolute;
    width: auto;
    height: auto;
  }
  .empowerment-page-stories-of-emp-cards {
    grid-template-columns: 1fr 1fr;
  }

  .empowerment-page-stories-of-emp-header h2 {
    font-size: 36px;
  }
}

@media (max-width: 600px) {
  .empowerment-page-stories-of-emp-cards {
    grid-template-columns: 1fr;
  }
}




/**********************************************Corporate_Partner_empower***********************************************************************/

.Corporate_Partner_empower_section {
    /*background: #f3f3f3;*/
    padding: 40px 20px 80px;
    text-align: center;
    /*font-family: 'Poppins', sans-serif;*/
}

.Corporate_Partner_empower_wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
}

.Corporate_Partner_empower_card {
    background: #cfc3d8;
    width: 584px;
    padding: 26px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    text-align: left;
    position: relative;
}

.Corporate_Partner_empower_badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}

.Corporate_Partner_empower_badge img {
    height: 24px;
}

.Corporate_Partner_empower_text {
   font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-top: 45px;
    margin-bottom: 5px;
}

.Corporate_Partner_empower_profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: -14px;
}

.Corporate_Partner_empower_profile img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}

.Corporate_Partner_empower_profile p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.Corporate_Partner_empower_profile span {
    font-size: 14px;
    color: #444;
}

.Corporate_Partner_empower_cta h2 {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 25px;
    color: #666;
}

.Corporate_Partner_empower_btn {
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(to right, #7b3f8c, #9b59b6);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s ease;
}

.Corporate_Partner_empower_btn:hover {
    opacity: 0.9;
}


/* Smooth transition */
.Corporate_Partner_empower_card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover Popup Effect */
.Corporate_Partner_empower_card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}


@media (max-width: 600px) {
    .Corporate_Partner_empower_wrapper{
        flex-wrap: wrap;
    }
}




/*************************************************Fund_Transparency_Empowerment_section******************************************************************************/
.donut-inner {
  fill: #BFD4CF;   /* Exact mint green center */
}

.Fund_Transparency_Empowerment_section {
  padding: 80px 20px;
  /*background: #f6f7fb;*/
  background: white;
}

.container {
  width: 1200px;
  margin: auto;
}

.section-headerss {
  text-align: center;
  margin-bottom: 50px;
}

.section-headerss h5 {
  font-weight: 600;
  color: #111;
}

/*.section-headerss h2 {*/
/*  font-size: 38px;*/
/*  color: #273c75;*/
/*  margin: 10px 0;*/
/*}*/

/*.section-headerss p {*/
/*  color: #444;*/
/*      font-size: 19px;*/
/*    font-weight: 450;*/
/*    margin-top: 20px;*/
/*}*/

.fund-content-wrapper {
  display: flex;
  gap: 70px;
  align-items: start;
}

/* DONUT */
.donut-card {
  background: #f1e5f9;
  padding: 60px;
  border-radius: 22px;
  text-align: center;
}

.donut {
  width: 360px;
  height: 360px;
}

.donut-bg {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 4;
}

.donut-segment {
  fill: none;
  stroke-width: 6;
  cursor: pointer;
  transition: 0.3s ease;
}

/* Darker Donut Colors (Matching Screenshot) */

/* EXACT Donut Colors from Screenshot */

/* ===== BRIGHT DONUT COLORS (Exact Look) ===== */

.seg1 { stroke: #55B7A5; }  /* Bright Teal */
.seg2 { stroke: #C93F63; }  /* Bright Pink/Red */
.seg3 { stroke: #2F4F75; }  /* Deep Navy */
.seg4 { stroke: #8B63E6; }  /* Bright Purple */
.seg5 { stroke: #6CB6E4; }  /* Bright Sky Blue */

.donut-title {
  font-size: 3px;
  fill: #273c75;
  font-weight: 600;
}

.donut-percent {
  font-size: 4px;
  fill: #273c75;
  font-weight: bold;
}

.download-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 25px;
  background: #273c75;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

/* RIGHT STRIPS */
.allocation-list {
  flex: 1;
}

.allocation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-weight: 500;
  transition: 0.3s ease;
  cursor: pointer;
}

.left-part {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 17px;
    font-weight: 600;
}

.icon-box {
  width: 44px;
  height: 44px;
  /*background: #2f3e6b;*/
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box img {
     width: 130%;
}

/* Strip Colors */


/* EXACT Strip Background Colors */

/* ===== BRIGHT STRIP COLORS (Matching Screenshot) ===== */

.item1 { background:#cde9e1; }  /* Teal Strip */
.item2 { background: #f0c7d1; }  /* Pink Strip */
.item3 { background: #c0c8d3; }  /* Grey-Blue Strip */
.item4 { background: #e3d6fd; }  /* Purple Strip */
.item5 { background: #d8eefe; }  /* Light Blue Strip */

.allocation-item.active {
  transform: scale(1.02);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* CERTIFICATION BOXES */
.badges {
  display: flex;
  gap: 25px;
  margin-top: 0px;
}

.badge {
  background: #e8f0f9;
  border-radius: 14px;
  padding: 25px 20px;
  text-align: center;
  width: 190px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  position: relative;
}

.badge-top {
  position: absolute;
    top: 19px;
    left: 8px;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #4caf50;
    color: #fff;
}

.badge img {
     width: 50px;
    margin: -15px -130px 0px 10px;
}

.badge p {
 font-weight: 600;
    margin: -8px;
    color: black;
    text-align: left;
    font-size: 17px;
}

.bottom-text {
  margin-top: 30px;
  font-weight: 500;
  color: #333;
}

/* Hover content outside donut */
.donut-hover-content {
  margin-top: 20px;
  min-height: 45px;
}

.hover-title {
  font-size: 16px;   /* Smaller font */
  font-weight: 600;
  color: #273c75;
  margin: 0;
}

.hover-percent {
  font-size: 17px;   /* Smaller percentage */
  font-weight: 700;
  margin: 3px 0 0;
  color: #273c75;
}

.left-wrapper {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

@media (max-width: 1024px) {
    .Fund_Transparency_Empowerment_section {
        padding: 30px 0;
    }
}

@media (max-width: 600px){
    .section-headerss{
        margin-bottom:35px;
    }
}



@media (max-width: 992px) {

  /* 🔥 FIX container */
  .container {
    width: 100%;
    padding: 0 20px;
  }

  /* Header */
  .section-headerss h2 {
    font-size: 30px;
  }

  .section-headerss p {
    font-size: 16px;
  }

  /* 🔥 STACK layout */
  .fund-content-wrapper {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  /* Donut */
  .donut-card {
    padding: 40px;
  }

  .donut {
    width: 300px;
    height: 300px;
  }

  /* Right side full width */
  .allocation-list {
    width: 100%;
  }

  /* Allocation items */
  .allocation-item {
    padding: 14px 16px;
  }

  .left-part {
    font-size: 15px;
  }

  /* Badges → 2 per row */
  .badges {
    /*flex-wrap: wrap;*/
    justify-content: center;
  }

  .badge {
    width: 45%;
  }

}



@media (max-width: 768px) {

  .Fund_Transparency_Empowerment_section {
    padding: 50px 15px;
  }

  /* Header */
  .section-headerss {
    margin-bottom: 30px;
  }

  .section-headerss h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  .section-headerss p {
    font-size: 14px;
  }

  /* Stack layout */
  .fund-content-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  /* Donut smaller */
  .donut-card {
    padding: 25px;
  }

  .donut {
    width: 240px;
    height: 240px;
  }

  .download-btn {
    width: 100%;
    text-align: center;
  }

  /* Allocation items */
  .allocation-item {
    /*flex-direction: column;*/
    /*align-items: flex-start;*/
    gap: 8px;
    font-size: 14px;
  }

  .left-part {
    gap: 10px;
    font-size: 14px;
  }

  .icon-box {
    width: 36px;
    height: 36px;
  }

  .icon-box img {
    width: 100%;
  }

  /* Badges → single column */
  .badges {
    /*flex-direction: column;*/
    gap: 15px;
  }

  .badge {
    width: 100%;
    padding: 20px;
  }

  .badge img {
    margin: 0;
    width: 40px;
  }

  .badge p {
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
  }

  /* Bottom text */
  .bottom-text {
    font-size: 14px;
    text-align: center;
  }

}

@media (max-width: 600px){
    .badge img {
        margin-left: 80px;
    }
}

@media (max-width: 576px){
    .badges {
         flex-direction: column;
    }
}






/**************************************************************************************************************************/
/*********************************** Miyawaki Page ************************************************************************/
/**************************************************************************************************************************/

/*********************************** Miyawaki - Page - Hero Section *******************************************************/
/* ===== MIYAWAKI HERO SECTION ===== */

.miyawaki-page-hero-classname {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url("../images/Miyawaki (Banner) (1).webp") center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 20px;
}

/* Dark green overlay */
.miyawaki-page-hero-classname__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Content */
.miyawaki-page-hero-classname__content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    color: #ffffff;
}

/* Subtitle */
.miyawaki-page-hero-classname__subtitle {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: inline-block;
    opacity: 0.9;
}

/* Title */
.miyawaki-page-hero-classname__title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

.miyawaki-page-hero-classname__title .highlight {
    color: #fbde75; /* Yellow tone */
}

/* Description */
.miyawaki-page-hero-classname__description {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.95;
}

/* Buttons Wrapper */
.miyawaki-page-hero-classname__buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    /*flex-wrap: wrap;*/
}

/* Primary Button */
.miyawaki-page-hero-btn-primary {
    background: #fbde75;
    color: #000;
    padding: 12px 45px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.miyawaki-page-hero-btn-primary:hover {
    background: #eacb5b;
    transform: translateY(-2px);
}

/* Outline Button */
.miyawaki-page-hero-btn-outline {
    border: 2px solid #fbde75;
    color: #ffffff;
    padding: 12px 30px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.miyawaki-page-hero-btn-outline:hover {
    background: #fbde75;
    color: #000;
    transform: translateY(-2px);
}


/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
    .miyawaki-page-hero-classname__title {
        font-size: 40px;
    }

    .miyawaki-page-hero-classname__description {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .miyawaki-page-hero-classname__title {
        font-size: 32px;
    }

    .miyawaki-page-hero-classname__description {
        font-size: 16px;
    }

    .miyawaki-page-hero-classname__buttons {
        gap: 20px;
        flex-wrap: wrap!important;
    }

    .miyawaki-page-hero-btn-primary,
    .miyawaki-page-hero-btn-outline {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .miyawaki-page-hero-classname__title {
        font-size: 26px;
    }

    .miyawaki-page-hero-classname__subtitle {
        font-size: 14px;
    }
    
    .miyawaki-page-hero-classname__buttons {
        flex-direction: column!important;
        gap: 15px;
    }
}



/*********************************** Miyawaki - Page - The Science Section *******************************************************/
/* ==============================
   MIYAWAKI - THE SCIENCE SECTION
============================== */
/* Section */
.miyawaki-page-the-science-classname {
    padding: 80px 20px 40px;
    background: #f4f4f4;
}

.miyawaki-page-the-science-classname__container {
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}

/* Grid Layout */
.miyawaki-page-the-science-classname__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Card */
.miyawaki-page-the-science-classname__card {
    background: #d0e9e2;
    border: 2px solid #72a273;
    border-radius: 12px;
    padding: 18px;
    text-align: left;
    position: relative;
    transition: all 0.3s ease;
}

.miyawaki-page-the-science-classname__card:hover {
    transform: translateY(-5px);
}

/* Icon */
.miyawaki-page-the-science-classname__icon {
    position: absolute;
    top: 20px;
    right: 20px;
}

.miyawaki-page-the-science-classname__icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* Card Title */
.miyawaki-page-the-science-classname__card h3 {
    font-size: 22px;
    color: #2f4677;
    margin-bottom: 10px;
    padding-right: 60px;
}

/* Card Text */
.miyawaki-page-the-science-classname__card p {
    font-size: 18px;
    color: black;
    font-weight: 500;
    line-height: 1.5;
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 1100px) {
    .miyawaki-page-the-science-classname__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .miyawaki-page-the-science-classname {
        padding: 70px 20px;
    }

    .miyawaki-page-the-science-classname__title {
        font-size: 34px;
    }

    .miyawaki-page-the-science-classname__subtitle {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .miyawaki-page-the-science-classname__title {
        font-size: 26px;
    }

    .miyawaki-page-the-science-classname__label {
        font-size: 18px;
    }
    
    .miyawaki-page-the-science-classname__grid {
        grid-template-columns: 1fr ;
    }
}




/*********************************** Miyawaki - Page - The Science Difference Section *******************************************************/
/* =========================================
   MIYAWAKI DIFFERENCE SECTION
========================================= */

.miyawaki-page-the-science-difference-classname {
    padding: 40px 20px 80px;
    /* background: #f2f2f2; */
}

.miyawaki-page-the-science-difference-classname__container {
    max-width: 1200px;
    margin: 0 auto;
}

.miyawaki-page-the-science-difference-classname__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Card */
.miyawaki-page-the-science-difference-card h3 {
    font-size: 26px;
    font-weight: 700;
    color: #2f4677;
    margin-bottom: 15px;
}

.miyawaki-page-the-science-difference-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 20px;
    border: 5px solid #e8f0f9;
}

/* Table Box */
.miyawaki-page-the-science-difference-table-box {
    margin-top: -45px;
    background: #e8f0f9;
    border-radius: 10px;
    padding: 10px 15px;
}

/* Header */
.miyawaki-page-the-science-difference-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px 20px;
    background: #cfe9e2;
    border-radius: 8px;
    margin: 30px 0px 10px;
}

.miyawaki-page-the-science-difference-table-header span{
  font-size: 20px;
  color:#243c7c;
  font-weight: 700;
}

/* Rows */
.miyawaki-page-the-science-difference-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px 20px;
    border-bottom: 2px solid #8696b7;
}

.miyawaki-page-the-science-difference-table-row:last-child {
    border-bottom: none;
}

.miyawaki-page-the-science-difference-table-row span{
  font-size:15px;
  color:black;
  font-weight: 500;
}

/* CTA */
.miyawaki-page-the-science-difference-cta {
    text-align: center;
    margin-top: 50px;
}

.miyawaki-page-the-science-difference-btn {
    display: inline-block;
    background: #478140;
    color: #fff;
    padding: 12px 48px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.miyawaki-page-the-science-difference-btn:hover {
    background: #3e7a30;
}

.miyawaki-page-the-science-difference-cta p {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.8px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
    .miyawaki-page-the-science-difference-classname__grid {
        grid-template-columns: 1fr;
    }

    .miyawaki-page-the-science-difference-card img {
        height: 220px;
    }
}

@media (max-width: 600px) {
    .miyawaki-page-the-science-difference-card img {
        height: 200px;
    }

    .miyawaki-page-the-science-difference-table-header,
    .miyawaki-page-the-science-difference-table-row {
        font-size: 13px;
        padding: 10px 15px;
    }
}




/*********************************** Miyawaki - Page - CSR Advantages Section *******************************************************/
/* =========================================
   CSR ADVANTAGES SECTION
========================================= */

.miyawaki-page-csr-advantages-classname {
    position: relative;
    padding: 80px 40px 440px 20px;
    background: url("../images/Miyawaki (Csr Advantage) (1).webp") no-repeat center bottom;
    background-size: cover;
    color: #fff;
}

/* Optional subtle overlay for readability */
.miyawaki-page-csr-advantages-classname::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: rgba(10, 90, 45, 0.85); */
    z-index: 0;
}

/* Container */
.miyawaki-page-csr-advantages-classname__container {
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Headings */
.miyawaki-page-csr-advantages-csr-label {
    color: white;
}

.miyawaki-page-csr-advantages-csr-title {
    color: #ffd56a;
}

.miyawaki-page-csr-advantages-csr-subtitle {
    color: #d7f5df;
}

/* Grid */
.miyawaki-page-csr-advantages-csr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 50px;
}

/* Card */
.miyawaki-page-csr-advantages-csr-card {
    background: #1d5539;
    padding: 55px 25px 30px;
    border-radius: 0px;
    position: relative;
    text-align: left;
    transition: 0.3s ease;
}

.miyawaki-page-csr-advantages-csr-card:hover {
    transform: translateY(-6px);
}

/* Floating Icon */
.miyawaki-page-csr-advantages-csr-icon {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #d0e9e2;
    padding: 5px 7px;
    border-radius: 8px;
}

.miyawaki-page-csr-advantages-csr-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* Card Text */
.miyawaki-page-csr-advantages-csr-card h3 {
    font-size: 20px;
    color: #ffd56a;
    margin-bottom: 15px;
    line-height: 1.3;
}

.miyawaki-page-csr-advantages-csr-card p {
    font-size: 14px;
    color: #cfe9d7;
    line-height: 1.6;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
    .miyawaki-page-csr-advantages-csr-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .miyawaki-page-csr-advantages-csr-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 750px) {
    .miyawaki-page-csr-advantages-csr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .miyawaki-page-csr-advantages-csr-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}





/*********************************** Miyawaki - Page - Project Scale Section *******************************************************/
/* =========================================
   PROJECT SCALE SECTION
========================================= */

.miyawaki-page-project-scale-classname {
    padding: 20px 20px 40px;
    background: #ffffff;
}

.miyawaki-page-project-scale-classname__container {
    max-width: 1300px;
    margin: 0 auto;
    background: #e8f0f9;
    border-radius: 10px;
    padding: 40px 20px;
}

.miyawaki-page-project-scale-classname__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
}

/* Commitment Box */

.miyawaki-page-project-scale-classname__commitment-box {
    /* background: #0f7a3b; */
    background: linear-gradient(90deg, #05713c 0%, #05713c 100%);
    padding: 20px 25px;
    border-radius: 12px;
    width: 500px;
    color: #fff;
    display: inline-block;
}

.miyawaki-page-project-scale-classname__commitment-label {
    font-size: 22px;
    display: block;
    margin-bottom: 5px;
}

.miyawaki-page-project-scale-classname__commitment-value {
    font-size: 70px;
    font-weight: 700;
    color: #ffd56a;
    line-height: 1;
    letter-spacing: 1px;
}

.miyawaki-page-project-scale-classname__commitment-sub {
    font-size: 22px;
    display: block;
    margin-top: 5px;
}

/* RIGHT SIDE */

.miyawaki-page-project-scale-classname__right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.miyawaki-page-project-scale-classname__item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #d0e9e2;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
    color: #1e1e1e;
}

.miyawaki-page-project-scale-classname__item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
    .miyawaki-page-project-scale-classname__grid {
        grid-template-columns: 1fr;
    }

    .miyawaki-page-project-scale-classname__container {
        padding: 30px 20px;
        text-align: center;
    }
    .miyawaki-page-project-scale-classname__description{
        max-width: none;
    }
}

@media (max-width: 768px) {

    .miyawaki-page-project-scale-classname__title {
        font-size: 32px;
    }

    .miyawaki-page-project-scale-classname__commitment-value {
        font-size: 48px;
    }

    .miyawaki-page-project-scale-classname__container {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {

    /* Container padding */
    .miyawaki-page-project-scale-classname {
        padding: 10px 10px 20px;
    }

    .miyawaki-page-project-scale-classname__container {
        padding: 20px 15px;
        border-radius: 8px;
    }

    /* Stack everything cleanly */
    .miyawaki-page-project-scale-classname__grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Commitment box FIX */
    .miyawaki-page-project-scale-classname__commitment-box {
        width: 100%;              /* 🔥 remove fixed width */
        padding: 15px;
    }

    .miyawaki-page-project-scale-classname__commitment-label,
    .miyawaki-page-project-scale-classname__commitment-sub {
        font-size: 16px;
    }

    .miyawaki-page-project-scale-classname__commitment-value {
        font-size: 40px;
    }

    /* Right side items */
    .miyawaki-page-project-scale-classname__item {
        /*flex-direction: column; */  /* 🔥 stack icon + text */
        text-align: center;
        padding: 15px;
        font-size: 16px;
    }

    .miyawaki-page-project-scale-classname__item img {
        width: 35px;
        height: 35px;
    }

    /* Typography */
    .miyawaki-page-project-scale-classname__title {
        font-size: 26px;
    }

    .miyawaki-page-project-scale-classname__description {
        font-size: 15px;
    }
}




/*********************************** Miyawaki - Page - Our Process Section *******************************************************/
.miyawaki-page-our-process-classname {
  padding: 80px 40px;
  background: url("../images/Miyawaki (Our Process) BG-28.png") no-repeat center;
  background-size: cover;
  color: #ffffff;
}

.miyawaki-page-our-process-classname__container {
  max-width: 1550px;
  margin: 0 auto;
  text-align: center;
}

/* Headings */

.miyawaki-page-our-process-classname__label {
  color: white;
}

.miyawaki-page-our-process-classname__title {
  color: #f2c75c;
}

.miyawaki-page-our-process-classname__subtitle {
  color: #dff3e6;
  margin-bottom: 80px;
}

/* Timeline */

.miyawaki-page-our-process-classname__timeline {
  position: relative;
}

.miyawaki-page-our-process-classname__line {
  position: absolute;
  top: 0px; /* perfectly centered through icon box */
  left: 80px;
  right: 80px;
  height: 3px;
  background: #f2c75c;
  z-index: 1;
}

/* Grid */

.miyawaki-page-our-process-classname__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
  position: relative;
  z-index: 2;
  top: 5px;
}

/* Card */

.miyawaki-page-our-process-classname__card {
    background: #1e4936;
    border-radius: 0px;
    padding: 10px 15px 25px;
    text-align: left;
    min-height: auto;
}

/* Icon Box */

.miyawaki-page-our-process-classname__icon-box {
  width: 70px;
  height: 70px;
  background: #d0e9e2;
  border-radius: 22px;
  top: -35px;
  left: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.miyawaki-page-our-process-classname__icon-box img {
  width: 60px;
  height: 60px;
}

/* Number Circle */

.miyawaki-page-our-process-classname__number {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 35px;
  height: 35px;
  background: #f2c75c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: #1a1a1a;
}

/* Text */

.miyawaki-page-our-process-classname__week {
    font-size: 18px;
    font-weight: 600;
    color: #f2c75c;
    position: relative;
    top: -20px;
}

.miyawaki-page-our-process-classname__card h3 {
  font-size: 23px;
  font-weight: 700;
  margin: -10px 0px 10px;
}

.miyawaki-page-our-process-classname__card p {
  font-size: 12px;
  line-height: 1.5;
  color: #e8f8ee;
}

/* Responsive */

@media (max-width: 1400px) {
  .miyawaki-page-our-process-classname__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .miyawaki-page-our-process-classname__line {
    display: none;
  }
}

@media (max-width: 768px) {
  .miyawaki-page-our-process-classname__title {
    font-size: 42px;
  }
}

@media (max-width: 600px) {
  .miyawaki-page-our-process-classname__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .miyawaki-page-our-process-classname__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}




/*********************************** Miyawaki - Page - Measurable Outcomes Section *******************************************************/
/* =========================================================
   MEASURABLE OUTCOMES – IMPACT & REPORTING
========================================================= */

.miyawaki-page-measureable-outcomes-classname {
  padding: 80px 20px;
  background: #ffffff;
}

.miyawaki-page-measureable-outcomes-classname__container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Cards Grid */

.miyawaki-page-measureable-outcomes-classname__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 64px; /* vertical / horizontal spacing similar to image */
  align-items: stretch;
  justify-items: center;
}

/* Card */

.miyawaki-page-measureable-outcomes-classname__card {
  width: 100%;
  max-width: 500px;
  background: #d0e9e2;              /* mint fill */
  border: 1.5px solid #689964;      /* green border */
  border-radius: 10px;
  padding: 15px 25px;
  text-align: left;
  box-sizing: border-box;
}

.miyawaki-page-measureable-outcomes-classname__card-title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  color: #2b3f78; /* same blue */
  line-height: 1.15;
}

.miyawaki-page-measureable-outcomes-classname__card-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

/* Responsive */

@media (max-width: 1200px) {
  .miyawaki-page-measureable-outcomes-classname__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 34px;
  }

  .miyawaki-page-measureable-outcomes-classname__title {
    font-size: 46px;
  }

  .miyawaki-page-measureable-outcomes-classname__card-title {
    font-size: 30px;
  }
}

@media (max-width: 720px) {
  .miyawaki-page-measureable-outcomes-classname {
    padding: 70px 16px;
  }

  .miyawaki-page-measureable-outcomes-classname__grid {
     gap: 30px 20px;
  }

  .miyawaki-page-measureable-outcomes-classname__title {
    font-size: 38px;
  }

  .miyawaki-page-measureable-outcomes-classname__subtitle {
    font-size: 18px;
    margin-bottom: 35px;
  }

  .miyawaki-page-measureable-outcomes-classname__card {
    padding: 22px 20px;
  }

  .miyawaki-page-measureable-outcomes-classname__card-title {
    font-size: 26px;
  }

  .miyawaki-page-measureable-outcomes-classname__card-text {
    font-size: 17px;
  }
}

@media (max-width: 600px){
    .miyawaki-page-measureable-outcomes-classname__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}





/*********************************** Miyawaki Page - Project Showcase Section *******************************************************/
/* ===================================================
   PROJECT SHOWCASE – MIYAWAKI IN ACTION
=================================================== */

.miyawaki-page-project-showcase-classname {
  background: #e8f0f9;
  padding: 80px 20px;
}

.miyawaki-page-project-showcase-classname__container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Tabs */

.miyawaki-page-project-showcase-classname__tabs {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}

.miyawaki-page-project-showcase-classname__tab {
  padding: 15px 45px;
  width: 300px;
  border-radius: 8px;
  border: none;
  background: #3c7a3c;
  color: #fff;
  font-size: 18px;
      letter-spacing: 0.5px;
  font-weight: 600;
  cursor: pointer;
}

.miyawaki-page-project-showcase-classname__tab--active {
  background: #e7c96c;
  color: #213164;
}

/* Images */

.miyawaki-page-project-showcase-classname__image-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 20px;
}

.miyawaki-page-project-showcase-classname__image-wrapper img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* Meta Row */

.miyawaki-page-project-showcase-classname__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0px 35px;
  flex-wrap: wrap;
}

.miyawaki-page-project-showcase-classname__location {
  font-size: 30px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #2b3f78;
}

.miyawaki-page-project-showcase-classname__brands {
  display: flex;
  gap: 10px;
  align-items: center;
}

.miyawaki-page-project-showcase-classname__brand-t{
    width: auto;
    height: 28px;
}
.miyawaki-page-project-showcase-classname__brand-y {
    width: auto;
    height: 60px;
}
/* Stats */

.miyawaki-page-project-showcase-classname__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 30px 0;
}

.miyawaki-page-project-showcase-classname__stat {
  background: #d0e9e2;
  border: 1px solid #4f7f58;
  border-radius: 12px;
  padding: 20px 20px 12px;
  text-align: left;
  position: relative;
}

.miyawaki-page-project-showcase-classname__stat img {
  width: 50px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.miyawaki-page-project-showcase-classname__stat span {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.5px;
  color: #2b3f78;
}

.miyawaki-page-project-showcase-classname__stat p {
  font-size: 50px;
  font-weight: 600;
  color: #478140;
}

/* Responsive */

@media (max-width: 992px) {
  .miyawaki-page-project-showcase-classname__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .miyawaki-page-project-showcase-classname__image-wrapper {
    grid-template-columns: 1fr;
  }
  .miyawaki-page-project-showcase-classname__image-wrapper img {
      height: 310px;
  }
  
  .miyawaki-page-project-showcase-classname__brands{
    margin: 0 auto;
  }
  .miyawaki-page-project-showcase-classname-key{
      margin-top: 0px;
  }
}

@media (max-width: 600px) {
  .miyawaki-page-project-showcase-classname__stats {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   PROJECT HIGHLIGHTS SECTION
===================================================== */

.miyawaki-page-project-showcase-classname-highlights {
  padding: 15px 0px 70px;
}

.miyawaki-page-project-showcase-classname-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Top Layout */

.miyawaki-page-project-showcase-classname-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Left Side */
.miyawaki-page-project-showcase-classname-left {
  text-align: left;
}

.miyawaki-page-project-showcase-classname-heading {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.miyawaki-page-project-showcase-classname-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.miyawaki-page-project-showcase-classname-list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  font-size: 22px;
  color: #2b3f78;
}

.miyawaki-page-project-showcase-classname-list li::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #3c7a3c;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 5px;
}

/* Key Result Card */

.miyawaki-page-project-showcase-classname-key {
  background: white;
  padding: 40px 40px 30px;
  /*margin-top: 65px;*/
  text-align: left;
  border-radius: 16px;
}

.miyawaki-page-project-showcase-classname-key-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.miyawaki-page-project-showcase-classname-key-header h4 {
  font-size: 26px;
  font-weight: 700;
}

.miyawaki-page-project-showcase-classname-key-header img {
  width: 45px;
  background: #3c7a3c;
  padding: 6px;
  border-radius: 8px;
  margin: -30px -30px 0px 0px;
}

.miyawaki-page-project-showcase-classname-key p {
  font-size: 18px;
  color: #2b3f78;
  line-height: 1.6;
}

/* Gallery */

.miyawaki-page-project-showcase-classname-gallery {
  margin-top: 0px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.miyawaki-page-project-showcase-classname-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
}

/* ==========================
   Responsive
========================== */

@media (max-width: 1100px) {
  .miyawaki-page-project-showcase-classname-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .miyawaki-page-project-showcase-classname-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .miyawaki-page-project-showcase-classname-heading {
    font-size: 28px;
  }

  .miyawaki-page-project-showcase-classname-list li {
    font-size: 16px;
  }

  .miyawaki-page-project-showcase-classname-gallery {
    grid-template-columns: 1fr;
  }
}





/************************************************** Miyawaki Page - Get Started Section *******************************************************************************************/


/* ===== SECTION ===== */
.miyawaki-page-get-started {
  /*background: #f4f5f4;*/
  padding: 80px 0;
  /*font-family: 'Inter', sans-serif;*/
}

.miyawaki-container {
  width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* ===== LEFT SIDE ===== */
.miyawaki-left {
  width: 50%;
}

.miyawaki-button-group {
  display: flex;
  gap: 15px;
}

.miyawaki-btn {
  padding: 12px 22px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s ease;
}

.miyawaki-btn-primary {
  background-color: #0f5f3a;
  color: #fff;
}

.miyawaki-btn-primary:hover {
  background-color: #0c4e30;
}

.miyawaki-btn-outline {
  border: 1px solid #0f5f3a;
  color: #0f5f3a;
  background: transparent;
}

.miyawaki-btn-outline:hover {
  background: #0f5f3a;
  color: #fff;
}

/* ===== FORM SECTION ===== */
.miyawaki-form-wrapper {
  width: 45%;
  background: #dbe3ea;
  padding: 30px;
  border-radius: 16px;
}

.miyawaki-form-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.miyawaki-form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.miyawaki-form-group label {
 font-size: 16px;
    margin-bottom: 6px;
    color: #333;
    font-weight: 600;
}

.miyawaki-form-group input {
  padding: 12px;
  border: 2px solid #6ea86b;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}

.miyawaki-form-group input:focus {
  border-color: #0f5f3a;
}

/* ===== SUBMIT BUTTON ===== */
.miyawaki-submit-btn {
 display: block;
  width: 60%;              /* Adjust this (50%–70%) as needed */
  margin: 25px auto 0;     /* Center horizontally */
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: #0f5f3a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.miyawaki-submit-btn:hover {
  background: #0c4e30;
}


@media (max-width: 1024px) {
    .miyawaki-container{
        width: 100%;
        padding: 0 40px;
    }
    .miyawaki-left{
        width: 100%;
        text-align: center;
    }
    .miyawaki-form-wrapper {
        width: 100%;
    }
    .miyawaki-button-group{
        justify-content: center;
    }
}

@media (max-width: 768px){
    .miyawaki-container{
        flex-wrap:wrap;
    }
}





/************************************************* Miyawaki Page - FAQ's Section ************************************************************************************************/

/* ===================================================
   FAQ SECTION
=================================================== */

.miyawaki-page-faqs-classname {
  padding: 80px 20px;
}

.miyawaki-page-faqs-classname__container {
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
}

/* Heading */

.miyawaki-page-faqs-classname__kicker {
  /*font-family: serif;*/
  font-size: 28px;
  margin-bottom: 5px;
}

.miyawaki-page-faqs-classname__title {
  font-size: 48px;
  font-weight: 700;
  color: #2b3f78;
  margin-bottom: 30px;
}

/* Accordion */

.miyawaki-page-faqs-classname__accordion {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* FAQ Item Box */

.miyawaki-page-faqs-classname__item {
  background: #d0e9e2;
  border: 1px solid #5f935c;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-align: left;
}

/* Question Button */

.miyawaki-page-faqs-classname__question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #111;
}

/* Arrow Icon */

.miyawaki-page-faqs-classname__icon {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #2b3f78;
  transition: transform 0.3s ease;
}

/* Answer (hidden by default) */

.miyawaki-page-faqs-classname__answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 30px;
  font-size: 18px;
  color: #333;
  line-height: 1.6;
  transition: all 0.4s ease;
}

/* Active State */

.miyawaki-page-faqs-classname__item.active 
.miyawaki-page-faqs-classname__answer {
  max-height: 500px;
  padding: 0 30px 20px 30px;
}

.miyawaki-page-faqs-classname__item.active 
.miyawaki-page-faqs-classname__icon {
  transform: rotate(180deg);
}

/* Responsive */

@media (max-width: 992px) {
  .miyawaki-page-faqs-classname__title {
    font-size: 40px;
  }

  .miyawaki-page-faqs-classname__question {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .miyawaki-page-faqs-classname__title {
    font-size: 30px;
  }

  .miyawaki-page-faqs-classname__question {
    font-size: 16px;
  }
}




/******************************************************************DonateBloodSaveLife_hero_section*****************************************************************************************************/

/* HERO SECTION */
.DonateBloodSaveLife_hero_section-page-hero {
    position: relative;
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    background-size: cover;
    background-image: url('../images/Banners (1)_11zon (2).webp');
}

/* LEFT DARK GRADIENT OVERLAY */
.DonateBloodSaveLife_hero_section-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* CONTAINER */
.DonateBloodSaveLife_hero_section-container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 110px 120px 60px;
}

/* CONTENT */
.DonateBloodSaveLife_hero_section-content {
    max-width: 650px;
    color: #fff;
}

/* SUBTITLE */
.DonateBloodSaveLife_hero_section-subtitle {
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.85;
}

/* TITLE */
.DonateBloodSaveLife_hero_section-title {
    font-size: 75px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

/* DESCRIPTION */
.DonateBloodSaveLife_hero_section-description {
    font-size: 20px;
    margin-bottom: 20px;
    opacity: 0.9;
    letter-spacing: 0.7px;
    line-height: 1.4;
    width: 800px;
    color: rgba(255, 255, 255, 0.9);
}

/* STATS */
.DonateBloodSaveLife_hero_section-stats {
    display: flex;
    gap: 25px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.DonateBloodSaveLife_hero_section-stat-box {
    background: rgb(255 255 255 / 10%);
    backdrop-filter: blur(4px);
    padding: 20px 35px;
    border-radius: 12px;
    min-width: 240px;
    text-align: center;
}

.DonateBloodSaveLife_hero_section-stat-box h2 {
    font-size: 45px;
    color: #f4c542;
    margin-bottom: 5px;
}

.DonateBloodSaveLife_hero_section-stat-box p {
    font-size: 18px;
}

/* CTA */
.DonateBloodSaveLife_hero_section-cta-row {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.DonateBloodSaveLife_hero_section-btn {
    background: #f4c542;
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.DonateBloodSaveLife_hero_section-btn:hover {
    background: #ddb32f;
}

.DonateBloodSaveLife_hero_section-volunteers {
    font-size: 18px;
    color: #f4c542;
    font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .DonateBloodSaveLife_hero_section-page-hero {
        background-image: url('../images/V13.jpg');
    }
    
    .DonateBloodSaveLife_hero_section-container{
            padding: 200px 120px 325px;
    }

    .DonateBloodSaveLife_hero_section-title {
        font-size: 48px;
    }

    .DonateBloodSaveLife_hero_section-description {
        font-size: 16px;
    }
    .DonateBloodSaveLife_hero_section-stats{
        justify-content: center;
    }

    .DonateBloodSaveLife_hero_section-stat-box {
        min-width: 240px;
        padding: 20px;
    }
    .DonateBloodSaveLife_hero_section-content {
        max-width: none;
        text-align: center;
        margin: 0px 0px 80px;
    }
}

@media (max-width: 768px) {

    .DonateBloodSaveLife_hero_section-page-hero {
        min-height: auto;
        padding: 85px 0 180px;
    }

    .DonateBloodSaveLife_hero_section-container {
        padding: 0 20px;
        text-align:center;
    }

    .DonateBloodSaveLife_hero_section-title {
        font-size: 36px;
    }

    .DonateBloodSaveLife_hero_section-description {
        font-size: 15px;
    }

    /*.DonateBloodSaveLife_hero_section-stats {*/
    /*    flex-direction: column;*/
    /*}*/
    
    .DonateBloodSaveLife_hero_section-stat-box {
        width: 150px;
        padding: 20px;
    }

.DonateBloodSaveLife_hero_section-stat-box h3 {
    font-size: 35px;
}
    .DonateBloodSaveLife_hero_section-cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .DonateBloodSaveLife_hero_section-volunteers {
        font-size: 14px;
    }
}

/*.onateBloodSaveLifeimmg{*/
/*   width: 40%;*/
/*    margin-left: 81px;*/
/*    margin-top: -50px;*/
/*}*/

@media (max-width: 360px) {
    .DonateBloodSaveLife_hero_section-title {
        font-size: 27px;
    }

    .DonateBloodSaveLife_hero_section-description {
        font-size: 15px;
        max-width: none;
    }
}




/***************************************************************DonateBloodSaveLifeTheNeed****************************************************************************/

.DonateBloodSaveLifeTheNeed-section {
  padding: 80px 5%;
  background: #f5f5f5;
  /*font-family: 'Poppins', sans-serif;*/
}

.DonateBloodSaveLifeTheNeed-container {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1400px;
  margin: auto;
}

/* LEFT SIDE */
.DonateBloodSaveLifeTheNeed-left {
  position: relative;
  flex: 1;
}

.DonateBloodSaveLifeTheNeed-left img {
  width: 100%;
  border-radius: 20px;
  display: block;
}

/* Overlay */
.DonateBloodSaveLifeTheNeed-overlayBox {
  position: absolute;
  bottom: -47px;
  left: 95px;
  background: #e8c7c9;
  padding: 25px 30px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.DonateBloodSaveLifeTheNeed-overlayImg {
  max-width: 45px;
}

/* RIGHT SIDE */
.DonateBloodSaveLifeTheNeed-right {
  flex: 1;
}

.DonateBloodSaveLifeTheNeed-description {
  /*font-size: 19px;*/
  /*color: black;*/
  line-height: 1.4;
  /*font-weight: 600;*/
  margin-bottom: 30px;
}

/* CARD GRID */
.DonateBloodSaveLifeTheNeed-cardGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.DonateBloodSaveLifeTheNeed-card {
  background: #e8c7c9;
  padding: 25px;
  border-radius: 14px;
  transition: 0.3s ease;
}

.DonateBloodSaveLifeTheNeed-card:hover {
  transform: translateY(-5px);
}

/* HEADER */
.DonateBloodSaveLifeTheNeed-cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* ICON BOX */
.DonateBloodSaveLifeTheNeed-cardIcon {

     border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 30px;
    margin-right: -28px;
    margin-top: -18px;
}

.DonateBloodSaveLifeTheNeed-iconImg {
  max-width: 72%;
  max-height: 60%;
  object-fit: contain;
}

.DonateBloodSaveLifeTheNeed-cardTitle {
  margin: 0;
  font-size: 17px;
  color: #1c2b52;
  font-weight: 600;
}

.DonateBloodSaveLifeTheNeed-card p {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* BUTTON */
.DonateBloodSaveLifeTheNeed-button {
  display: inline-block;
  padding: 12px 37px;
  background: #ef2b2b;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s ease;
  font-size: 18px;
}

.DonateBloodSaveLifeTheNeed-button:hover {
  background: #c71f1f;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .DonateBloodSaveLifeTheNeed-overlayBox {
      left: 50px;
    }
}
  
@media (max-width: 992px) {
  .DonateBloodSaveLifeTheNeed-container {
    flex-direction: column;
  }

  .DonateBloodSaveLifeTheNeed-cardGrid {
    grid-template-columns: 1fr 1fr;
  }
  
  .DonateBloodSaveLifeTheNeed-overlayBox {
     position: unset;
  }
}

@media (max-width: 600px) {
  .DonateBloodSaveLifeTheNeed-cardGrid {
    grid-template-columns: 1fr;
  }
}
  
  
  
  
/***********************************************************DonateBloodSaveLife-ourprocess*****************************************************************/
/* =========================
   SECTION
========================= */
.DonateBloodSaveLife_ourprocess_section {
  padding: 100px 5%;
  background: #f7f7f7;
  /*font-family: 'Poppins', sans-serif;*/
}

.DonateBloodSaveLife_ourprocess_container {
  max-width: 1400px;
  margin: auto;
}

/* =========================
   HEADING
========================= */
.DonateBloodSaveLife_ourprocess_heading {
  text-align: center;
  margin-bottom: 70px;
}

.DonateBloodSaveLife_ourprocess_smalltitle {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}

.DonateBloodSaveLife_ourprocess_maintitle {
  font-size: 42px;
  color: #333;
  margin-bottom: 15px;
}

.DonateBloodSaveLife_ourprocess_subtitle {
  font-size: 18px;
  color: #666;
  max-width: 750px;
  margin: auto;
  line-height: 1.6;
}

/* =========================
   CONTENT LAYOUT
========================= */
.DonateBloodSaveLife_ourprocess_content {
  display: flex;
  gap: 70px;
  align-items: flex-start;
}

/* =========================
   LEFT STEP CARDS
========================= */
.DonateBloodSaveLife_ourprocess_steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* STEP CARD */
.DonateBloodSaveLife_ourprocess_stepcard {
  position: relative;
  padding: 30px 30px 30px 80px;
  background: #f3e1e1;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.4s ease;
}

/* LEFT FULL STRIP */
.DonateBloodSaveLife_ourprocess_stepcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 65px;
  height: 100%;
  /*background: #d89b9b;*/
  border-radius: 16px 0 0 16px;
  transition: 0.4s ease;
}

/* ACTIVE CARD */
.DonateBloodSaveLife_ourprocess_stepcard.active {
  background:#d89b9b;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

/* ACTIVE STRIP */
/* .DonateBloodSaveLife_ourprocess_stepcard.active::before {
 
} */

/* STEP BADGE */
.DonateBloodSaveLife_ourprocess_stepbadge {
     position: absolute;
    top: 0px;
    left: 8px;
    background: #ffffff;
    padding: 7px 11px;
    font-size: 13px;
    border-radius: 6px;
    font-weight: 600;
    z-index: 2;
}

/* STEP CONTENT */
.DonateBloodSaveLife_ourprocess_stepcontent {
  max-width: 80%;
  z-index: 2;
}

.DonateBloodSaveLife_ourprocess_stepcontent h4 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}

.DonateBloodSaveLife_ourprocess_stepcontent p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}

/* ARROW */
.DonateBloodSaveLife_ourprocess_arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #d89b9b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: 0.3s ease;
  z-index: 2;
}

/* ACTIVE ARROW */
.DonateBloodSaveLife_ourprocess_stepcard.active 
.DonateBloodSaveLife_ourprocess_arrow {
  background: #c68484;
}

/* =========================
   RIGHT SIDE
========================= */
.DonateBloodSaveLife_ourprocess_right {
  flex: 1;
}

.DonateBloodSaveLife_ourprocess_right img {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 25px;
  transition: 0.4s ease;
}

.DonateBloodSaveLife_ourprocess_imagetext {
  font-size: 18px;
  color: #555;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* CTA BUTTON (RIGHT SIDE BELOW CONTENT) */
.DonateBloodSaveLife_ourprocess_cta {
     display: inline-block;
    padding: 12px 37px;
    background: #ef2b2b;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 18px;
}

.DonateBloodSaveLife_ourprocess_cta:hover {
  background: #c68484;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .DonateBloodSaveLife_ourprocess_content {
    flex-direction: column;
  }

  .DonateBloodSaveLife_ourprocess_stepcontent {
    max-width: 100%;
  }
}


/******************************************DonateBloodSaveLife_your_safety_section-**********************************************************************/
/* =========================
   SECTION
========================= */
.DonateBloodSaveLife_your_safety_section {
  padding: 80px 5%;
  /*background: #f7f7f7;*/
  /*font-family: 'Poppins', sans-serif;*/
}

.DonateBloodSaveLife_your_safety_container {
  max-width: 1400px;
  margin: auto;
}

/* =========================
   HEADING
========================= */
.DonateBloodSaveLife_your_safety_heading {
  text-align: center;
  margin-bottom: 70px;
}

.DonateBloodSaveLife_your_safety_smalltitle {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}

.DonateBloodSaveLife_your_safety_maintitle {
  font-size: 42px;
  color: #233a70;
  margin-bottom: 15px;
  font-weight: 700;
}

.DonateBloodSaveLife_your_safety_subtitle {
  font-size: 18px;
  color: #666;
  max-width: 700px;
  margin: auto;
  line-height: 1.6;
}

/* =========================
   CARDS LAYOUT
========================= */
.DonateBloodSaveLife_your_safety_cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}

/* =========================
   CARD
========================= */
.DonateBloodSaveLife_your_safety_card {
  background: #e7c3c3;
  padding: 45px 35px 25px;
  border-radius: 16px;
  flex: 1;
  position: relative;

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

/* ✨ HOVER ZOOM EFFECT */
.DonateBloodSaveLife_your_safety_card:hover {
  transform: scale(1.04);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  background: #efd4d4;
}

/* =========================
   ICON BOX (TOP RIGHT)
========================= */
.DonateBloodSaveLife_your_safety_iconbox {
  position: absolute;
  top: 20px;
  right: 20px;
  /*background: #ffffff;*/
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;

  transition: transform 0.4s ease;
}

/* Icon slight zoom */
.DonateBloodSaveLife_your_safety_card:hover 
.DonateBloodSaveLife_your_safety_iconbox {
  transform: scale(1.1);
}

/* =========================
   CARD TITLE
========================= */
.DonateBloodSaveLife_your_safety_card h3 {
  font-size: 24px;
  margin-bottom: 30px;
  color: #233a70;
  font-weight: 600;
}

/* =========================
   LIST
========================= */
.DonateBloodSaveLife_your_safety_card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.DonateBloodSaveLife_your_safety_card li {
  margin-bottom: 5px;
  padding-left: 30px;
  position: relative;
  font-size: 17px;
  color: #333;
  line-height: 1.6;
}

/* CHECK ICON */
.DonateBloodSaveLife_your_safety_card li.check::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #2e9e4f;
  font-weight: bold;
  font-size: 15px;
}

/* CROSS ICON */
.DonateBloodSaveLife_your_safety_card li.cross::before {
  content: "✖";
  position: absolute;
  left: 0;
  top: 0;
  color: #d9534f;
  font-weight: bold;
  font-size: 15px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .DonateBloodSaveLife_your_safety_cards {
    grid-template-columns: 1fr 1fr;
  }

  .DonateBloodSaveLife_your_safety_card {
    padding: 40px 30px;
  }
}

@media (max-width: 768px) {
    .DonateBloodSaveLife_your_safety_card h3{
        margin-right: 65px;
    }
}

@media (max-width: 600px) {
  .DonateBloodSaveLife_your_safety_cards {
    grid-template-columns: 1fr;
  }
}




/*******************************************************DonateBloodSaveLife_Impact_So_Far_section*******************************************************************************/


/* Outer wrapper gives space around banner */
/*.DonateBloodSaveLife_Impact_So_Far_outer {*/
/*    padding: 40px;*/
/*    background: #000; */
/*}*/

/* Banner section */
.DonateBloodSaveLife_Impact_So_Far_section {
    padding: 80px 20px;
    background: url("https://ytds.org/ytds_2/asset/images/Impact-Banner.png") no-repeat center center;
    background-size: contain;  
    background-repeat: no-repeat;
    border-radius: 25px;
    overflow: hidden;
      min-height: 500px; /* adjust based on your image height */
}

/* Inner content width */
.DonateBloodSaveLife_Impact_So_Far_container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.DonateBloodSaveLife_Impact_So_Far_content {
    width: 100%;
    color: #ffffff;
}

.DonateBloodSaveLife_Impact_So_Far_small_title {
    color: #ffffff;
    margin-top: 50px;
}

.DonateBloodSaveLife_Impact_So_Far_main_title {
    color: #ffd166;
}

.DonateBloodSaveLife_Impact_So_Far_description {
    color: #ffffff;
    margin: 0 0 30px;
}

.DonateBloodSaveLife_Impact_So_Far_stats_wrapper {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    max-width: 850px;
    margin-bottom: 50px;
}

.DonateBloodSaveLife_Impact_So_Far_stat_box h3 {
    font-size: 43px;
    margin: 11px 0 8px;
}

.DonateBloodSaveLife_Impact_So_Far_stat_box p {
    font-size: 20px;
    color: #ffd166;
    font-weight: 600;
}

.DonateBloodSaveLife_Impact_So_Far_icon_box {
    width: 70px;
    height: 70px;
    background: #5a1414;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.DonateBloodSaveLife_Impact_So_Far_icon_box i {
    font-size: 28px;
    color: #ffffff;
}

/* Responsive */

@media (max-width: 1024px) {
    .DonateBloodSaveLife_Impact_So_Far_section {
        /*background: url("https://ytds.org/ytds_2/asset/images/donatebloodsavelife%20(The%20Scale%20Of%20Impact)-Tab%20View.webp") no-repeat center center;*/
        background: linear-gradient(
          to bottom,
          #d62828 0%,
          #b22222 30%,
          #7a1c1c 60%,
          #3b1f1f 100%
        );
    }
}
@media (max-width: 992px) {
    .DonateBloodSaveLife_Impact_So_Far_outer {
        padding: 20px;
    }

    .DonateBloodSaveLife_Impact_So_Far_content {
        width: 100%;
    }

    .DonateBloodSaveLife_Impact_So_Far_main_title {
        font-size: 40px;
    }
    .DonateBloodSaveLife_Impact_So_Far_stats_wrapper {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {
    .DonateBloodSaveLife_Impact_So_Far_stats_wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .DonateBloodSaveLife_Impact_So_Far_section {
        text-align: center;
    }
    .DonateBloodSaveLife_Impact_So_Far_stat_box{
        justify-items: center;
    }
}



/*****************************************************Upcoming_Blood_Donation_Drive_section****************************************************************/

/* Section Background */
.Upcoming_Blood_Donation_Drive_section {
    padding: 30px 40px 80px;
    background: #ffffff;
}

/* Main Flex Container */
.Upcoming_Blood_Donation_Drive_container {
   display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: -58px;
}

/* Pink Card */
.Upcoming_Blood_Donation_Drive_card {
   
       background: #e8c2c2;
    color: #2e3f6e;
    padding: 15px 25px;
    border-radius: 15px;
    min-width: 700px;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

/* Left Calendar Icon */
.Upcoming_Blood_Donation_Drive_left_icon i {
    font-size: 40px;
    color: #1e3a6d;
}

/* Content */
.Upcoming_Blood_Donation_Drive_small_title {
    font-size: 16px;
    margin: 0;
    color: #000;
    font-weight: 500;
}

.Upcoming_Blood_Donation_Drive_main_title {
    font-size: 28px;
    margin: 5px 0;
    color: #1e3a6d;
    font-weight: 700;
}

.Upcoming_Blood_Donation_Drive_date {
    font-size: 16px;
    margin: 0;
    color: #000;
}

/* Right Blood Icon */
.Upcoming_Blood_Donation_Drive_right_icon i {
    font-size: 40px;
    color: #a32222;
}

/* CTA Button */
.Upcoming_Blood_Donation_Drive_button_wrapper {
    display: flex;
    align-items: center;
}

.Upcoming_Blood_Donation_Drive_button {
    background: #ff2a2a;
    color: #ffffff;
    padding: 18px 35px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.Upcoming_Blood_Donation_Drive_button:hover {
    background: #d91f1f;
}


/*************************************************************8recognized_by_ruby_hall_clinic_section********************************************/

/* Section Padding */
.recognized_by_ruby_hall_clinic_section {
    padding: 80px 20px;
    background: #ffffff;
}

/* Container */
.recognized_by_ruby_hall_clinic_container {
    max-width: 1305px;
    margin: auto;
}

/* Heading */
.recognized_by_ruby_hall_clinic_heading {
    text-align: center;
    margin-bottom: 50px;
}

.recognized_by_ruby_hall_clinic_small_title {
    font-size: 22px;
    margin-bottom: 10px;
    color: #333;
}

.recognized_by_ruby_hall_clinic_main_title {
    font-size: 42px;
    font-weight: 700;
    color: #2d4b7a;
    margin-bottom: 15px;
}

.recognized_by_ruby_hall_clinic_sub_text {
    max-width: 800px;
    margin: auto;
    font-size: 18px;
    color: #444;
    line-height: 1.6;
}

/* Card */
.recognized_by_ruby_hall_clinic_card {
    background: #efd6d6;
    border-radius: 25px;
    padding: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Left Image */
.recognized_by_ruby_hall_clinic_left {
    flex: 1;
    text-align: center;
        margin-left: -50px;
}

.recognized_by_ruby_hall_clinic_award_image {
    max-width: 80%;
    height: auto;
}

/* Right Content */
.recognized_by_ruby_hall_clinic_right {
    flex: 1.5;
        margin-left: -15px;
}

.recognized_by_ruby_hall_clinic_card_title {
    font-size: 31px;
    color: #2d4b7a;
    margin-bottom: 15px;
    font-weight: 700;
}

.recognized_by_ruby_hall_clinic_card_text {
    font-size: 20px;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Highlight Box */
.recognized_by_ruby_hall_clinic_highlight_box {
    background: #ffffff;
    padding: 20px 25px;
    border-radius: 15px;
    margin-bottom: 25px;
}

.recognized_by_ruby_hall_clinic_highlight_box p {
    margin: 8px 0;
    font-size: 17px;
    color: #333;
}

/* Button */
.recognized_by_ruby_hall_clinic_button {
    display: inline-block;
    background: #ff2a2a;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 23px;
    font-weight: 600;
    transition: 0.3s ease;
}

.recognized_by_ruby_hall_clinic_button:hover {
    background: #d91f1f;
}

/* Logo Bottom Right */
.recognized_by_ruby_hall_clinic_logo {
    margin-top: 25px;
}

.recognized_by_ruby_hall_clinic_logo img {
    max-width: 180px;
}

/* Responsive */
@media (max-width: 992px) {

    .recognized_by_ruby_hall_clinic_card {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }

    .recognized_by_ruby_hall_clinic_right {
        flex: 1;
    }

    .recognized_by_ruby_hall_clinic_main_title {
        font-size: 32px;
    }

    .recognized_by_ruby_hall_clinic_card_title {
        font-size: 24px;
    }
}


/* Tick Row */
.recognized_by_ruby_hall_clinic_tick_item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    font-size: 22px;
    color: #333;
}

/* Green Circle */
.recognized_by_ruby_hall_clinic_tick {
    width: 22px;
    height: 22px;
    background-color: #4CAF50; /* green */
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

/* White Check Mark */
.recognized_by_ruby_hall_clinic_tick::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}


/* Bottom Row Layout */
.recognized_by_ruby_hall_clinic_bottom_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 20px;
}

/* Button */
.recognized_by_ruby_hall_clinic_button {
    display: inline-block;
    background: #ff2a2a;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 600;
    transition: 0.3s ease;
}

.recognized_by_ruby_hall_clinic_button:hover {
    background: #d91f1f;
}

/* Logo */
.recognized_by_ruby_hall_clinic_logo img {
    max-width: 200px;
    height: auto;
        margin-top: -11px;
}


.DonateBloodSaveLife-page-take-action-today-classname__btn{
    background-color: #ee2b29;
     display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 35px;
    border-radius: 10px;

    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 19px;
    width: auto;
}

/*********************************************************************************************************/
/*************************** SafeHerIndia Page ***********************************************************/
/*********************************************************************************************************/


/************************** SafeHerIndia Page - Hero Section ********************************************/
/* ✅ SafeHerIndia Hero Styles (responsive + optimized) */
.safeherindia-page-hero-classname {
  position: relative;
  min-height: clamp(520px, 70vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;

  /* Background image is injected through HTML */
  background-image: url('../images/SafeHerIndia Banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* helps text look crisp on overlay backgrounds */
  color: #fff;
}

.safeherindia-page-hero__overlay {
  position: absolute;
  inset: 0;

  /* close to screenshot: purple tint + darker left side */
  background: linear-gradient(90deg, rgb(40 15 55 / 30%) 0%, rgb(40 15 55 / 25%) 55%, rgb(40 15 55 / 0%) 100%), rgb(126 53 158 / 0%);
  z-index: 0;
}

.safeherindia-page-hero__container {
  position: relative;
  z-index: 1;
  width: 1200px;
  margin: 0 auto;
  padding: 120px 20px 60px;
}

.safeherindia-page-hero__content {
  max-width: 650px;
}

.safeherindia-page-hero__eyebrow {
  margin: 0 0 10px;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.3px;
  color: rgba(255, 220, 140, 0.92); /* golden tone like screenshot */
}

.safeherindia-page-hero__title {
  margin: 0 0 14px;
  font-weight: 800;
  line-height: 1.02;
  font-size: clamp(44px, 5.4vw, 74px);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.safeherindia-page-hero__subtitle {
  margin: 0 0 25px;
  max-width: 650px;
  letter-spacing: 0.7px;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.safeherindia-page-hero__stats {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.safeherindia-page-hero__stat {
  flex: 0 0 auto;
  min-width: 180px;
  padding: 15px 25px;
  border-radius: 14px;
  text-align: center;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.safeherindia-page-hero__stat-number {
  font-weight: 700;
  font-size: 45px;
  color: rgba(255, 210, 95, 0.98); /* warm yellow */
  margin-bottom: 2px;
}

.safeherindia-page-hero__stat-label {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.safeherindia-page-hero__actions {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.safeherindia-page-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  width: 240px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
  user-select: none;
}

.safeherindia-page-hero__btn:active {
  transform: translateY(1px);
}

.safeherindia-page-hero__btn--primary {
  background: #f4d06b; /* screenshot-like gold */
  color: #1a1022;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.safeherindia-page-hero__btn--primary:hover {
  opacity: 0.92;
}

.safeherindia-page-hero__btn--ghost {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  border: 2px solid rgba(244, 208, 107, 0.85);
}

.safeherindia-page-hero__btn--ghost:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* ✅ Mobile tuning (matches screenshot structure but stacks cleanly) */
@media (max-width: 992px) {
  .safeherindia-page-hero-classname{
      background-image: url('../images/safe-her-india-mobile-banner.webp');
  }
  .safeherindia-page-hero__container{
        padding: 85px 20px 100px;
        margin-bottom: 160px;
  }
  .safeherindia-page-hero__content {
    max-width: 100%;
    text-align: center;
  }
  .safeherindia-page-hero__stats{
      justify-content: center;
  }
  .safeherindia-page-hero__actions{
      justify-content: center;
  }
}
@media (max-width: 640px) {

  .safeherindia-page-hero__stat {
    min-width: 160px;
    padding: 12px 14px;
  }

  .safeherindia-page-hero__btn {
    width: 100%;
  }
}

@media (max-width: 360px) {
    .safeherindia-page-hero__container {
        padding: 85px 5px 100px;
    }
}



/************************** SafeHerIndia Page - The Challenges We'er Addressing **********************************************************/
.safeherindia-page-the-challenges-addressed-classname {
  background: #f3f0f6;
  padding: 80px 20px 80px;
  overflow: hidden;
}

.safeherindia-page-the-challenges-addressed-classname__container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 50px;
}

/* LEFT */
.safeherindia-page-the-challenges-addressed-classname__left {
  position: relative;
  text-align: center;
}

.safeherindia-page-the-challenges-addressed-classname__main-image {
  max-width: 100%;
  height: auto;
  position: relative;
  /* z-index: 2; */
}

/* Reality Box */
.safeherindia-page-the-challenges-addressed-classname__reality-box {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #d9d2e5;
  border-radius: 18px;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 15px;
  width: 95%;
  max-width: 550px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.safeherindia-page-the-challenges-addressed-classname__reality-icon img {
  width: 50px;
}

.safeherindia-page-the-challenges-addressed-classname__reality-small {
  font-size: 18px;
  color: #555;
}

.safeherindia-page-the-challenges-addressed-classname__reality-title {
  font-size: 20px;
  font-weight: 600;
  color: #2e3f6e;
  margin: 0px;
}

/* RIGHT */
/*.safeherindia-page-the-challenges-addressed-classname__eyebrow {*/
/*  font-size: 24px;*/
/*  color: #333;*/
/*  margin-bottom: 0px;*/
/*}*/

/*.safeherindia-page-the-challenges-addressed-classname__title {*/
/*  font-size: 46px;*/
/*  color: #2e3f6e;*/
/*  margin-bottom: 5px;*/
/*  font-weight: 700;*/
/*}*/

.safeherindia-page-the-challenges-addressed-classname__desc {
  font-size: 17px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 15px;
}

.safeherindia-page-the-challenges-addressed-classname__highlight {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 25px;
  color: #606060;
  letter-spacing: 0.5px;
}

/* CARDS */
.safeherindia-page-the-challenges-addressed-classname__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}

.safeherindia-page-the-challenges-addressed-classname__card {
  background: #d9d2e5;
  padding: 10px 20px;
  border-radius: 14px;
  gap: 15px;
  align-items: flex-start;
  transition: 0.3s ease;
}

.safeherindia-page-the-challenges-addressed-classname_block{
  display: flex;
}

.safeherindia-page-the-challenges-addressed-classname__card:hover {
  transform: translateY(-5px);
}

.safeherindia-page-the-challenges-addressed-classname__card img {
  width: 50px;
}

.safeherindia-page-the-challenges-addressed-classname__card h3 {
  margin: 15px;
  color: #2e3f6e;
  font-size: 19px;
}

.safeherindia-page-the-challenges-addressed-classname__card p {
  font-size: 16px;
  margin: 0;
  margin-top: 10px;
  color: #444;
}

/* BUTTON */
.safeherindia-page-the-challenges-addressed-classname__btn {
  display: inline-block;
  background: linear-gradient(90deg, #7b3fa0, #9b4db8);
  color: #fff;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.safeherindia-page-the-challenges-addressed-classname__btn:hover {
  opacity: 0.9;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .safeherindia-page-the-challenges-addressed-classname__container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .safeherindia-page-the-challenges-addressed-classname__cards {
    grid-template-columns: 1fr 1fr;
  }

  .safeherindia-page-the-challenges-addressed-classname__reality-box {
    position: relative;
    bottom: 0;
    /*transform: none;*/
    margin-top: 30px;
  }
}

@media (max-width: 576px) {
  .safeherindia-page-the-challenges-addressed-classname__title {
    font-size: 32px;
  }

  .safeherindia-page-the-challenges-addressed-classname {
    padding: 60px 15px;
  }
  
  .safeherindia-page-the-challenges-addressed-classname__cards {
    grid-template-columns: 1fr;
  }
}




/************************** SafeHerIndia Page - Why SafeHerIndia Matters ************************************************************************/
.safeherindia-page-why-safeherindia-matters-classname {
  padding: 80px 20px;
  text-align: center;
}

.safeherindia-page-why-safeherindia-matters-classname__container {
  max-width: 1250px;
  margin: auto;
}

/* Headings */
.safeherindia-page-why-safeherindia-matters-classname__eyebrow {
  font-size: 28px;
  color: #444;
  margin-bottom: 5px;
}

.safeherindia-page-why-safeherindia-matters-classname__title {
  font-size: 48px;
  font-weight: 700;
  color: #2e3f6e;
  margin-bottom: 10px;
}

.safeherindia-page-why-safeherindia-matters-classname__subtitle {
  max-width: 1000px;
  margin: 0px auto 70px;
}

/* Cards Layout */
.safeherindia-page-why-safeherindia-matters-classname__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Card */
.safeherindia-page-why-safeherindia-matters-classname__card {
  background: #dfd2e8;
  padding: 60px 15px 20px;
  border-radius: 12px;
  position: relative;
  transition: 0.3s ease;
}

.safeherindia-page-why-safeherindia-matters-classname__card:hover {
  transform: translateY(-8px);
}

/* Floating Icon */
.safeherindia-page-why-safeherindia-matters-classname__icon {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #8b3e95;
  width: 70px;
  height: 70px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.safeherindia-page-why-safeherindia-matters-classname__icon img {
  width: 60px;
}

/* Card Content */
.safeherindia-page-why-safeherindia-matters-classname__card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #2e3f6e;
}

.safeherindia-page-why-safeherindia-matters-classname__card p {
  font-size: 16px;
  color: #555;
  line-height: 1.4;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .safeherindia-page-why-safeherindia-matters-classname__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .safeherindia-page-why-safeherindia-matters-classname__cards {
    grid-template-columns: 1fr;
    gap: 50px
  }

  .safeherindia-page-why-safeherindia-matters-classname__title {
    font-size: 34px;
  }

  .safeherindia-page-why-safeherindia-matters-classname {
    padding: 70px 15px;
  }
}




/************************** SafeHerIndia Page - Training And Awareness Programs ************************************************************************/
.safeherindia-page-training-and-awareness-programs-classname {
  background: #f4f1f7;
  padding: 80px 20px;
}

.safeherindia-page-training-and-awareness-programs-classname__wrapper {
  margin: auto 50px;
  text-align: center;
}

/* Headings */
.safeherindia-page-training-and-awareness-programs-classname__eyebrow {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.safeherindia-page-training-and-awareness-programs-classname__title {
  font-size: 40px;
  font-weight: 700;
  color: #2e3f6e;
  margin-bottom: 16px;
}

.safeherindia-page-training-and-awareness-programs-classname__subtitle {
  font-size: 15px;
  color: #555;
  max-width: 650px;
  margin: 0 auto 50px;
  line-height: 1.7;
}

/* GRID */
.safeherindia-page-training-and-awareness-programs-classname__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  /* align-items: center; */
  text-align: left;
}

/* LEFT */
.safeherindia-page-training-and-awareness-programs-classname__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.safeherindia-page-training-and-awareness-programs-classname__card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #dfd2e8; /* closer shade */
  padding: 10px 15px;
  border-radius: 12px;
  height: 75px;
}

.safeherindia-page-training-and-awareness-programs-classname__card img {
  width: 55px;
  height: 55px;
}

.safeherindia-page-training-and-awareness-programs-classname__card h4 {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #2e3f6e;
}

.safeherindia-page-training-and-awareness-programs-classname__card p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.3;
}

/* BUTTON */
.safeherindia-page-training-and-awareness-programs-classname__btn {
  margin-top: 20px;
  width: fit-content;
  background: linear-gradient(90deg, #883c94, #8b3e95);
  color: #fff;
  padding: 10px 40px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  transition: 0.3s;
}

.safeherindia-page-training-and-awareness-programs-classname__btn:hover {
  opacity: 0.9;
}

/* RIGHT IMAGE */
.safeherindia-page-training-and-awareness-programs-classname__right img {
  width: 100%;
  height: 520px;
  border-radius: 18px;
  display: block;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .safeherindia-page-training-and-awareness-programs-classname__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .safeherindia-page-training-and-awareness-programs-classname__right {
    order: -1;
    text-align: center;
  }

  .safeherindia-page-training-and-awareness-programs-classname__right img {
    margin: auto;
  }
}

@media (max-width: 600px) {
  .safeherindia-page-training-and-awareness-programs-classname__title {
    font-size: 30px;
  }

  .safeherindia-page-training-and-awareness-programs-classname {
    padding: 60px 15px;
  }
  
  .safeherindia-page-training-and-awareness-programs-classname__right img{
      height:auto;
  }
}

@media (max-width: 576px){
    .safeherindia-page-training-and-awareness-programs-classname__wrapper {
      margin: auto;
    }
}



/*************************** SafeHerIndia Page - Real Numbers, Real Impact *************************************************/
.safeherindia-page-real-numbers-real-impact-classname {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 70px 20px;
  color: #fff;
}

/* Container */
.safeherindia-page-real-numbers-real-impact-classname__container {
  max-width: 1300px;
  margin: auto;
  text-align: center;
}

/* Headings */
.safeherindia-page-real-numbers-real-impact-classname__eyebrow {
  opacity: 0.95;
  color: white;
}

.safeherindia-page-real-numbers-real-impact-classname__title {
  color: #ffd86b;
}

.safeherindia-page-real-numbers-real-impact-classname__subtitle {
  max-width: 1000px;
  opacity: 0.95;
  color: white;
}

/* Stats Box */
.safeherindia-page-real-numbers-real-impact-classname__stats {
  background: #38213a;
  border-radius: 26px;
  padding: 45px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.safeherindia-page-real-numbers-real-impact-classname__stat img {
  width: 55px;
  margin-bottom: 0px;
}

.safeherindia-page-real-numbers-real-impact-classname__stat h3 {
  font-size: 55px;
  margin: 0;
  font-weight: 700;
}

.safeherindia-page-real-numbers-real-impact-classname__stat p {
  color: #fbde76;
  font-size: 22px;
  margin-top: 0px;
  font-weight: 600;
}

/* CTA Row */
.safeherindia-page-real-numbers-real-impact-classname__cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  /*flex-wrap: wrap;*/
  width: 90%;
  margin: 0px auto;
}

/* Event Card */
.safeherindia-page-real-numbers-real-impact-classname__event-card {
  background: #e8e0ef;
  color: #2e3f6e;
  padding: 15px 25px;
  border-radius: 15px;
  width: 100%;
  max-width: 700px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}

.safeherindia-page-real-numbers-real-impact-classname__event-card small {
  font-size: 16px;
  color: black;
  font-weight: 600;
}

.safeherindia-page-real-numbers-real-impact-classname__event-card h4 {
  margin: 3px 0;
  font-size: 28px;
  font-weight: 700;
}

.safeherindia-page-real-numbers-real-impact-classname__event-card span {
  font-size: 16px;
  color: black;
  font-weight: 600;
}

/* Buttons */
.safeherindia-page-real-numbers-real-impact-classname__buttons {
  display: flex;
  align-items: center;
  gap: 25px;
}

.safeherindia-page-real-numbers-real-impact-classname__btn-primary {
  background: linear-gradient(90deg, #8f4799, #8a3d95);
  padding: 14px 28px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  font-size: 22px;
}

.safeherindia-page-real-numbers-real-impact-classname__btn-primary:hover {
  opacity: 0.9;
}

.safeherindia-page-real-numbers-real-impact-classname__btn-link {
  color: #fff;
  text-decoration: underline;
  /* text-decoration-color: #883b94; */
  font-size: 22px;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
    .safeherindia-page-real-numbers-real-impact-classname__cta-row{
        justify-content: center;
        flex-wrap: wrap;
    }
}
@media (max-width: 992px) {
  .safeherindia-page-real-numbers-real-impact-classname__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .safeherindia-page-real-numbers-real-impact-classname__cta-row {
    flex-direction: column;
  }

  .safeherindia-page-real-numbers-real-impact-classname__buttons {
    margin-top: 20px;
  }
  
  .safeherindia-page-real-numbers-real-impact-classname__event-card{
      max-width: none;
  }
}

@media (max-width: 600px) {
  .safeherindia-page-real-numbers-real-impact-classname__title {
    font-size: 34px;
  }

  .safeherindia-page-real-numbers-real-impact-classname {
    padding: 70px 15px;
  }
  .safeherindia-page-real-numbers-real-impact-classname__event-card{
      flex-direction: column;
      gap: 15px;
      text-align: center;
  }
}

@media (max-width: 576px) {
  .safeherindia-page-real-numbers-real-impact-classname__stats {
    grid-template-columns: 1fr;
  }
}





/***************************************** SafeHerIndia - Page - Take Action Today ****************************************************************************************/
.safeherindia-page-take-action-today-classname {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 70px 20px 95px;
    color: #fff;
    overflow: hidden;
  }

  .safeherindia-page-take-action-today-classname__container {
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
  }

  .safeherindia-page-take-action-today-classname__eyebrow {
    color:white;
    opacity: 0.95;
  }

  .safeherindia-page-take-action-today-classname__title {
    color: #ffd86b;
  }

  .safeherindia-page-take-action-today-classname__subtitle {
    color: white;
    opacity: 0.95;
  }

  /* Cards Grid */
  .safeherindia-page-take-action-today-classname__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 36px;
    align-items: stretch;
    margin-top: 10px;
  }

  /* Card */
  .safeherindia-page-take-action-today-classname__card {
    background:#fdebea;
    color: #2e3f6e;
    border-radius: 16px;
    padding: 15px 28px 25px;
    text-align: left;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
    position: relative;
  }

  .safeherindia-page-take-action-today-classname__card-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
  }

  .safeherindia-page-take-action-today-classname__card-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
  }

  /* Icon block top-right */
  .safeherindia-page-take-action-today-classname__card-icon {
    /*width: 65px;*/
    /*height: 65px;*/
    border-radius: 14px;
   
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .safeherindia-page-take-action-today-classname__card-icon img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
  }

  .safeherindia-page-take-action-today-classname__card-text {
    margin: 0 0 15px;
    font-size: 17px;
    line-height: 1.5;
    color: black;
  }

  /* Button */
  .safeherindia-page-take-action-today-classname__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 35px;
    border-radius: 10px;
    background: #8e4598;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 18px;
    /*width: 180px;*/
  }

  .safeherindia-page-take-action-today-classname__btn:hover {
    opacity: 0.92;
  }

  /* Responsive */
  @media (max-width: 992px) {
    .safeherindia-page-take-action-today-classname__grid {
      grid-template-columns: 1fr 1fr;
      gap: 35px;
    }

    .safeherindia-page-take-action-today-classname__title {
      font-size: 38px;
    }
  }

  @media (max-width: 600px) {
    .safeherindia-page-take-action-today-classname {
      padding: 70px 15px 80px;
    }

    .safeherindia-page-take-action-today-classname__title {
      font-size: 32px;
    }

    .safeherindia-page-take-action-today-classname__subtitle {
      font-size: 16px;
      margin-bottom: 34px;
    }
    .safeherindia-page-take-action-today-classname__grid {
      grid-template-columns: 1fr;
    }

    .safeherindia-page-take-action-today-classname__card {
      padding: 22px 18px 20px;
    }

    .safeherindia-page-take-action-today-classname__card-title {
      font-size: 24px;
    }

    .safeherindia-page-take-action-today-classname__card-icon {
      width: 52px;
      height: 52px;
    }
  }



/************************************************************EachOneTeachOne_education******************************************************/


/* Section */
.EachOneTeachOne_education_section {
    padding: 80px 20px 40px;
  
}

/* Container */
.EachOneTeachOne_education_container {
    max-width: 1200px;
    margin: auto;
}

 /*Heading */
.EachOneTeachOne_education_heading {
    text-align: center;
}

/* Content Layout */
.EachOneTeachOne_education_content {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Left Image */
.EachOneTeachOne_education_left {
    flex: 1.1;
}

.EachOneTeachOne_education_left img {
    width: 100%;
    border-radius: 25px;
    display: block;
}

.EachOneTeachOne_education_image_caption {
    margin-top: 15px;
    font-size: 16px;
    color: #666;
}

/* Right Side */
.EachOneTeachOne_education_right {
    flex: 1;
}

/* Feature Boxes */
.EachOneTeachOne_education_feature {
    background: #cfe0ea;
    padding: 7px 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    font-weight: 600;
}

.EachOneTeachOne_education_feature img{
    width:40px;
    height:40px;
}

.EachOneTeachOne_education_feature-items{
    display: flex;
    gap: 20px;
}

.EachOneTeachOne_education_feature h3{
    font-size: 25px;
    font-weight: 600;
    margin: auto 0;
}

/* Description */
.EachOneTeachOne_education_description {
    margin: 25px 0;
    color: #555;
    font-size: 17px;
    line-height: 1.6;
}

/* Stats */
.EachOneTeachOne_education_stats {
    display: flex;
    gap: 25px;
    /*flex-wrap: wrap;*/
}

.EachOneTeachOne_education_stat_box {
    border: 5px solid #9bb8d0;
    border-radius: 20px;
    padding: 10px 25px;
    text-align: center;
    flex: 1;
    min-width: 150px;
}

.EachOneTeachOne_education_stat_box h3 {
    font-size: 38px;
    font-weight: 800;
    color: #2c3e70;
    margin-bottom: 5px;
}

.EachOneTeachOne_education_stat_box p {
    font-size: 17px;
    font-weight: 600;
    color: #232f64;
}

/* Responsive */
@media (max-width: 992px) {
    .EachOneTeachOne_education_content {
        flex-flow: column;
    }

    .EachOneTeachOne_education_main_title {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .EachOneTeachOne_education_main_title {
        font-size: 32px;
    }
    .EachOneTeachOne_education_feature h3 {
        font-size: 22px;
    }
}

/*******************************************************************Education*********************************************************************************/

.Education_The_Urgency_is_Now{
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
}


.methodology-connector-2 {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 25px;
}

.env_line {
     width: 259px;
  height: 4px;
  background-color: #000;
  border: none;
  display: block;
}


/******************************************Next_Drive_education_section************************************************************************/

.Next_Drive_education_section{
    padding:40px 20px 80px;
}

.Next_Drive_education_section .next_drive_container{
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    justify-content: space-between;
    background-image: url('https://ytds.org/ytds_2/asset/images/Education (Next Drive)-17.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 19px 40px;
    color: #fff;
    flex-wrap: wrap;
    /*margin-top: -30px;*/
}

/* LEFT SIDE */

.Next_Drive_education_section .next_drive_left{
    display:flex;
    align-items:center;
    gap:20px;
}

.Next_Drive_education_section .next_drive_icon{
    font-size:40px;
    color:#ffc107;
}

.Next_Drive_education_section .next_drive_label{
    font-size:22px;
    margin-bottom:5px;
    opacity:0.9;
}

.Next_Drive_education_section h2{
    font-size:35px;
    font-weight:700;
    margin:5px 0;
}

.Next_Drive_education_section .next_drive_date{
    font-size:20px;
    opacity:0.9;
}

/* RIGHT SIDE */

.Next_Drive_education_section .next_drive_right{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    align-content: center;
    gap: 20px;
}

.Next_Drive_education_section .next_drive_btn{
    background: #fcdf75;
    color: #1c2f9b;
    padding: 12px 15px;
    border-radius: 18px;
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;
    text-align: center;
}

.Next_Drive_education_section .next_drive_link{
    color:#fff;
    font-size: 20px;
    text-decoration:underline;
    text-align: center;
}

/* RESPONSIVE */

@media(max-width: 768px){
    .Next_Drive_education_section h2 {
        font-size:26px;
    }
}
@media(max-width:600px){

.Next_Drive_education_section .next_drive_container{
    display: flex;
    flex-direction:column;
    gap:20px;
    text-align:center;
}

.Next_Drive_education_section .next_drive_left{
    display: flex;
    flex-direction:column;
    gap: 0px;
}

.Next_Drive_education_section h2 {
    font-size:26px;
}

}


/*-------------------------------------Our_Impact_Education------------------------------------------------------*/

.Our_Impact_Education{
  background-image:url("https://ytds.org/ytds_2/asset/images/Education (Our Impact)-29.webp"); /* your image path */
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    padding:80px 20px 30px;
    color:#fff;
    text-align:center;
}

/* HEADER */

.Our_Impact_Education_small_title{
    color: white;
    opacity:0.9;
}

.Our_Impact_Education_title{
    color:#ffd766;
}

.Our_Impact_Education_subtitle{
    color: white;
    opacity:0.9;
}

/* STATS GRID */

.Our_Impact_Education_stats{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:40px;
    justify-items: center;
    margin: 0 auto;
    margin-top:70px;
    width: auto;
    
}

/* BOX */

.Our_Impact_Education_box{
    text-align: center;
    width:180px;
}

.Our_Impact_Education_icon{
    /*width:50px;*/
    /*height:50px;*/
    /*margin:auto;*/
    /*background:#173f88;*/
    /*border-radius:10px;*/
    /*display:flex;*/
    /*align-items:center;*/
    /*justify-content:center;*/
    /*font-size:26px;*/
    margin-bottom:15px;
}

.Our_Impact_Education_number{
    font-size:47px;
    color:#ffd766;
    margin-bottom:5px;
}

.Our_Impact_Education_text{
       font-size: 19px;
    font-weight: 600;
}

/* BOOK IMAGE */

.Our_Impact_Education_books{
    margin-top:70px;
}

.Our_Impact_Education_books img{
    width:100%;
    display:block;
}

.impact_imgg{
        width: 31%;
}

@media (max-width: 1024px) {
    .Our_Impact_Education_stats{
        grid-template-columns:repeat(3,1fr);
        justify-items: center;
    }
}

@media (max-width: 600px) {
    .Our_Impact_Education_stats{
        grid-template-columns:repeat(2,1fr);
    }
    .Our_Impact_Education_title {
        font-size: 38px;
    }
}

@media (max-width: 350px) {
    .Our_Impact_Education_stats{
        grid-template-columns:repeat(1,1fr);
    }
}



/*******************************************Corporate_Alignment_eduction*************************************************************/

.Corporate_Alignment_eduction{
    padding:80px 20px;
    text-align:center;
  
}


/* HEADER */

.Corporate_Alignment_eduction_small_title{
    font-size:18px;
    color:#666;
    margin-bottom:10px;
}

.Corporate_Alignment_eduction_title{
    font-size:46px;
    font-weight:700;
    color:#2e3d6b;
    margin-bottom:15px;
}

.Corporate_Alignment_eduction_subtitle{
    font-size:20px;
    color:#555;
    max-width:800px;
    margin:auto;
    line-height:1.3;
}


/* GRID */

.Corporate_Alignment_eduction_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin:50px auto 0;
    max-width:1200px;
}


/* BOX */

.Corporate_Alignment_eduction_box{
    text-align:center;
}


/* ICON */

.Corporate_Alignment_eduction_icon{
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin:auto;
    margin-bottom:15px;
}

.Corporate_Alignment_eduction_icon img{
    width:65px;
}


/* HEADING */

.Corporate_Alignment_eduction_heading{
    font-size:35px;
    color:#2e3d6b;
    margin-bottom:10px;
}


/* TEXT */

.Corporate_Alignment_eduction_text{
    font-size:20px;
    color:#555;
    line-height:1.2;
    max-width:340px;
    margin:auto;
}

@media (max-width: 992px){
    .Corporate_Alignment_eduction_grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px){
    .Corporate_Alignment_eduction_grid {
        grid-template-columns: 1fr;
    }
}



/*************************************************Sustainable_Development_Goals_eduction************************************************************/
.Sustainable_Development_Goals_eduction{
padding:40px 20px;
/* background:#f6f6f6; */
text-align:center;
}

.Sustainable_Development_Goals_container_eduction{
max-width:1200px;
margin:auto;
}

.Sustainable_Development_Goals_title_eduction{
font-size:40px;
font-weight:700;
color:#1e90b7;
margin-bottom:60px;
}

/* GRID */

.Sustainable_Development_Goals_grid_eduction{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

/* CARD */

.Sustainable_Development_Goals_card_eduction{
border-radius:18px;
padding:40px 25px;
text-align:left;
color:#fff;
position:relative;
transition:transform 0.35s ease, box-shadow 0.35s ease;
cursor:pointer;
}

/* HOVER ZOOM EFFECT */

.Sustainable_Development_Goals_card_eduction:hover{
transform:scale(1.06);
box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

/* ICON */

.Sustainable_Development_Goals_icon_eduction{

margin-bottom:20px;
margin-bottom: 20px;
    margin-top: -18px;
}

.Sustainable_Development_Goals_icon_eduction img{
width:52px;
}

/* NUMBER */

.Sustainable_Development_Goals_number_eduction{
position:absolute;
top:20px;
right:25px;
font-weight:600;
}

/* TEXT */

.Sustainable_Development_Goals_heading_eduction{
font-size:24px;
margin-bottom:10px;
}

.Sustainable_Development_Goals_text_eduction{
font-size:17px;
line-height:1.6;
}

/* COLORS */

.Sustainable_Development_Goals_card1_eduction{
background:#c21f32;
}

.Sustainable_Development_Goals_card2_eduction{
background:#ef402b;
}

.Sustainable_Development_Goals_card3_eduction{
background:#8f1838;
}

.Sustainable_Development_Goals_card4_eduction{
background:#e01483;
}

/*@media (max-width: )*/





/***************************** Education Page - Get Involved Section *************************************************************************/
/* ===== SECTION ===== */
.education-page-get-involved-section {
    padding: 80px 20px;
   
}
 
.education-page-get-involved-container {
    max-width: 1300px;
    margin: 0 auto;
}
 
/* ===== HEADING ===== */
.education-page-get-involved-heading {
    text-align: center;
    margin-bottom: 60px;
}
 
/* ===== CARDS WRAPPER ===== */
.education-page-get-involved-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}
 
/* ===== CARD ===== */
.education-page-get-involved-card {
    background: #dceaf3;
    padding: 35px 30px;
    border-radius: 14px;
    position: relative;
    min-height: 260px;
    transition: 0.3s ease;
}
 
.education-page-get-involved-card:hover {
    transform: translateY(-5px);
}
 
/* ===== ICON ===== */
.education-page-get-involved-icon {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
}
 
.education-page-get-involved-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
 
/* ===== TEXT ===== */
.education-page-get-involved-card h3 {
    font-size: 25px;
    font-weight: 700;
    color: #1d2f5f;
    margin: 5px 0 18px 0;
}
 
.education-page-get-involved-card p {
    font-size: 18px;
    color: #444;
    line-height: 1.4;
    margin-bottom: 30px;
}
 
/* .education-page-get-involved-div1 {
 
} */
 
/* ===== BUTTON ===== */
.education-page-get-involved-btn {
    display: inline-block;
    background: linear-gradient(90deg, #1e56c7, #2f7efc);
    color: #fff;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 25px;
    /*width: 200px;*/
    text-align: center;
    text-decoration: none;
    transition: 0.3s ease;
}
 
.education-page-get-involved-btn:hover {
    opacity: 0.9;
}
 
/* ===== RESPONSIVE ===== */
/***************************** Education Page - Get Involved Section (RESPONSIVE ONLY - DESIGN SAME) *************************************************************************/

/* ===== LARGE DESKTOP (keep your exact design) ===== */
@media (min-width: 1200px) {

  .education-page-get-involved-container {
    max-width: 1300px;
  }

  .education-page-get-involved-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
  }

}


/* ===== LAPTOP ===== */
@media (max-width: 1199px) {

  .education-page-get-involved-container {
    max-width: 1100px;
  }

  .education-page-get-involved-heading h2 {
    font-size: 38px;
  }
  
  .education-page-get-involved-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        margin: 0 100px;
    }
}

/* ===== TABLET ===== */
@media (max-width: 992px) {

  .education-page-get-involved-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 0 30px;
  }

  .education-page-get-involved-heading h2 {
    font-size: 34px;
  }

  .education-page-get-involved-heading p {
    font-size: 16px;
  }

  .education-page-get-involved-card {
    padding: 30px 25px;
  }

  /* Fix title overlap with icon */
  .education-page-get-involved-card h3 {
    margin-right: 70px;
  }

  .education-page-get-involved-icon {
    width: 55px;
    height: 55px;
  }

}


/* ===== SMALL TABLET ===== */
@media (max-width: 768px) {

  .education-page-get-involved-heading h2 {
    font-size: 30px;
  }

  .education-page-get-involved-heading p {
    font-size: 15px;
  }
  
  .education-page-get-involved-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

}


/* ===== MOBILE ===== */
@media (max-width: 600px) {

  .education-page-get-involved-section {
    padding: 60px 15px;
  }

  .education-page-get-involved-cards {
    grid-template-columns: 1fr;
    margin: 0 15px;
    gap: 25px;
  }

  .education-page-get-involved-card {
    padding: 25px 20px 25px;
  }

  .education-page-get-involved-card h3 {
    font-size: 20px;
    margin-right: 65px; /* keeps spacing from icon */
  }

  .education-page-get-involved-card p {
    font-size: 15px;
  }

  .education-page-get-involved-icon {
    width: 50px;
    height: 50px;
    top: 20px;
    right: 20px;
  }

  .education-page-get-involved-btn {
    width: 100% !important;
    max-width: 280px;
  }

}


/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {

  .education-page-get-involved-heading h2 {
    font-size: 26px;
  }

  .education-page-get-involved-heading p {
    font-size: 14px;
  }

  .education-page-get-involved-card {
    padding: 22px 18px;
  }

  .education-page-get-involved-card h3 {
    font-size: 18px;
  }

  .education-page-get-involved-card p {
    font-size: 14px;
  }

  .education-page-get-involved-icon {
    width: 45px;
    height: 45px;
  }

}




/**************************************************************************Become_a_Volunteer_education*****************************************/
.Become_a_Volunteer_education{
    padding:80px 20px;
    margin: 0 auto 50px;
}

.Become_a_Volunteer_education_container{
    max-width: 1200px;
    margin: auto;
    padding: 29px 50px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-image: url('https://ytds.org/ytds_2/asset/images/Education (Become a Volunteer) bg-41.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    overflow: hidden;
}


/* Optional overlay for better text visibility */

.Become_a_Volunteer_education_container::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

border-radius:12px;
}

.Become_a_Volunteer_education_container *{
position:relative;
z-index:2;
}


/* LEFT CONTENT */

.Become_a_Volunteer_education_left{
max-width:625px;
}

.Become_a_Volunteer_education_small_title{
font-size: 24px;
/*margin-bottom:10px;*/
}

.Become_a_Volunteer_education_title{
    font-size: 42px;
    color: #ffd766;
    /*margin-bottom: 11px;*/
}

.Become_a_Volunteer_education_text{
    font-size: 20px;
    line-height: 1.4;
}


/* BUTTONS */

.Become_a_Volunteer_education_right{
display:flex;
gap:10px;
}

.Become_a_Volunteer_education_btn{
padding:14px 28px;
border-radius:17px;
font-size:18px;
text-decoration:none;
font-weight:600;
display:inline-block;
}

.donate_btn{
background:#ffd766;
color:#000;
}

.volunteer_btn{
background:#4c7f36;
color:#fff;
}

@media (max-width: 1024px) {
    .Become_a_Volunteer_education_left{
        max-width:550px;
    }
    .Become_a_Volunteer_education_right{
        display: flex;
        gap:20px;
        margin-top: 20px;
    }
}
@media (max-width: 992px) {
    .Become_a_Volunteer_education_left{
        max-width: none;
        text-align: center;
        margin: 0 auto;
    }
    .Become_a_Volunteer_education_right{
        margin: 15px auto 0;
    }
}
@media (max-width: 480px){
    .Become_a_Volunteer_education_right{
        flex-wrap: wrap;
        justify-content: center;
    }
}



/*****************************************************EachOneTeachOne******************************************************************/

.eachoneteachone-page-hero-banner {
    position: relative;
    width: 100%;
    min-height: auto;
    background-size: cover;
    background-position: center;
    background-image: url('https://ytds.org/ytds_2/asset/images/Each-One-Teach-One-Banner.webp');
}

@media (max-width: 992px){
    .eachoneteachone-page-hero-banner {
        background-image: url('https://ytds.org/ytds_2/asset/images/Each One Teach One Mobile Banner.webp');
    }
}

/************************************************************EachOneTeachOne_the_challenges**************************************************************************/

.EachOneTeachOne_the_challenges{
padding:80px 20px;
}

.EachOneTeachOne_the_challenges_container{
max-width:1200px;
margin:auto;
}

.EachOneTeachOne_the_challenges_grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
margin-bottom:60px;
}

/* LEFT */

.EachOneTeachOne_the_challenges_small_title{
font-size:18px;
color:#444;
margin-bottom:10px;
}

.EachOneTeachOne_the_challenges_heading{
font-size:48px;
color:#2e4a7f;
font-weight:700;
margin-bottom:20px;
line-height:1.2;
}

.EachOneTeachOne_the_challenges_text{
font-size:18px;
line-height:1.7;
color:black;
max-width:500px;
}

/* RIGHT LIST */

.EachOneTeachOne_the_challenges_right{
display:flex;
flex-direction:column;
gap:15px;
}

.EachOneTeachOne_the_challenges_item{
background:#cfe2ef;
padding:16px 20px;
border-radius:10px;
font-size:18px;
display:flex;
align-items:center;
gap:10px;
}

/* STATS */

.EachOneTeachOne_the_challenges_stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.EachOneTeachOne_the_challenges_stat{
background:#cfe2ef;
padding:35px;
text-align:center;
border-radius:10px;
}

.EachOneTeachOne_the_challenges_stat h3{
font-size:48px;
color:#2e4a7f;
margin-bottom:5px;
}

.EachOneTeachOne_the_challenges_stat p{
font-size:18px;
font-weight:600;
}

/* HOVER ZOOM EFFECT */

.EachOneTeachOne_the_challenges_item,
.EachOneTeachOne_the_challenges_stat{
transition: all 0.35s ease;
cursor:pointer;
}

.EachOneTeachOne_the_challenges_item:hover,
.EachOneTeachOne_the_challenges_stat:hover{
transform: scale(1.06);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

@media (max-width: 768px){
    .EachOneTeachOne_the_challenges_stats{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px){
    .EachOneTeachOne_the_challenges_grid{
        grid-template-columns: 1fr;
    }
}




/******************************************************EachOneTeachOne_OurCommitment********************************************/
.EachOneTeachOne_OurCommitment{
padding:80px 20px;
text-align:center;
}

.EachOneTeachOne_OurCommitment_container{
max-width:1200px;
margin:auto;
}

/* GRID */

.EachOneTeachOne_OurCommitment_grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

/* CARD */

.EachOneTeachOne_OurCommitment_card{
background-color: #dcf3ff;
padding:30px;
border-radius:14px;
display:flex;
gap:20px;
text-align:left;
align-items:flex-start;
transition:all 0.35s ease;
}

/* ICON */

.EachOneTeachOne_OurCommitment_icon{
width:60px;
height:60px;
/*background:#1f63c7;*/
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.EachOneTeachOne_OurCommitment_icon img{
width:60px;
/*filter:brightness(0) invert(1);*/
}

/* TEXT */

.EachOneTeachOne_OurCommitment_card h3{
margin-bottom:8px;
font-size:22px;
color:#2e4372;
}

.EachOneTeachOne_OurCommitment_card p{
font-size:16px;
line-height:1.6;
color:#333;
}

/* HOVER EFFECT */

.EachOneTeachOne_OurCommitment_card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

@media (max-width: 600px){
    .EachOneTeachOne_OurCommitment_grid{
        grid-template-columns: repeat(1, 1fr);
    }
}




/**********************************************EachOneTeachOne_What_We_Provide***************************************************************/

.EachOneTeachOne_What_We_Provide{
padding:80px 20px;
/*background:#f3f4f6;*/
text-align:center;
}

.EachOneTeachOne_What_We_Provide_container{
max-width:1200px;
margin:auto;
}

/* GRID */

.EachOneTeachOne_What_We_Provide_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

/* CARD */

.EachOneTeachOne_What_We_Provide_card{
background-color: #dcf3ff;
padding:13px;
border-radius:20px;
text-align:left;
transition:all 0.35s ease;
position:relative;
}

/* ICON */

.EachOneTeachOne_What_We_Provide_icon{
width:60px;
height:60px;
/*background:#1e63c8;*/
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
}

.EachOneTeachOne_What_We_Provide_icon img{
width:46px;
/*filter:brightness(0) invert(1);*/
}

/* TEXT */

.EachOneTeachOne_What_We_Provide_card h3{
font-size:22px;
margin-bottom:25px 15px;
color:#000;
}

.EachOneTeachOne_What_We_Provide_card p{
font-size:15px;
line-height:1.6;
margin-bottom:25px;
}

/* LINK */

.EachOneTeachOne_What_We_Provide_card a{
font-weight:600;
text-decoration:underline;
color:#000;
}

/* HOVER EFFECT */

.EachOneTeachOne_What_We_Provide_card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

.EachOneTeachOne_What_We_Provide_card a{
position:relative;
font-weight:600;
text-decoration:none;
color:#000;
display:inline-block;
padding-bottom:5px;
}

.EachOneTeachOne_What_We_Provide_card a::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:linear-gradient(90deg,#1f5fd1,#4fa3ff);
border-radius:3px;
}

@media (max-width: 992px) {
    .EachOneTeachOne_What_We_Provide_grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .EachOneTeachOne_What_We_Provide_grid{
        grid-template-columns: repeat(1, 1fr);
    }
}


/*****************************************************EachOneTeachOne_Our_Reach***********************************************************/

.EachOneTeachOne_Our_Reach{
padding:80px 20px;
background:linear-gradient(180deg, #244fc1, #1b7dee);
color:#fff;
text-align:center;
}

.EachOneTeachOne_Our_Reach_container{
max-width:1200px;
margin:auto;
}

.EachOneTeachOne_Our_Reach_small{
color:white;
opacity:.9;
}

.EachOneTeachOne_Our_Reach_title{
color:#ffd65a;
}

.EachOneTeachOne_Our_Reach_sub{
color:white;
opacity:.9;
}

/* GRID */

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

/* CARD */

.EachOneTeachOne_Our_Reach_card{
background:#dcf3ff;
padding:24px;
border-radius:20px;
text-align:left;
color:#000;
transition:.35s;
}

/* ICON */

.EachOneTeachOne_Our_Reach_icon{
width:60px;
height:60px;
/*background:#2c6dd5;*/
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
}

.EachOneTeachOne_Our_Reach_icon img{
width:54px;
/*filter:brightness(0) invert(1);*/
}

/* TEXT */

.EachOneTeachOne_Our_Reach_card h3{
font-size:24px;
margin-bottom:10px;
}

.EachOneTeachOne_Our_Reach_card p{
font-size:16px;
line-height:1.6;
margin-bottom:20px;
}

/* BAR */

.EachOneTeachOne_Our_Reach_bar{
background: white;
    border-radius: 30px;
    padding: 0px 15px;
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

/*.EachOneTeachOne_Our_Reach_bar span{*/
/*position:absolute;*/
/*left:0;*/
/*top:0;*/
/*bottom:0;*/
/*background:#9bb5d3;*/
/*border-radius:30px;*/
/*}*/

/* BUTTON */

.EachOneTeachOne_Our_Reach_btn_wrap{
margin-top:60px;
}

.EachOneTeachOne_Our_Reach_btn{
background: #ffd65a;
    color: #000;
    padding: 14px 20px;
    border-radius: 19px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
}

/* HOVER */

.EachOneTeachOne_Our_Reach_card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 20px 40px rgba(0,0,0,.25);
}

@media (max-width: 992px){
.EachOneTeachOne_Our_Reach_grid{
        grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px){
.EachOneTeachOne_Our_Reach_grid{
        grid-template-columns: repeat(1, 1fr);
}
}



/***************************************************************************************************************/

.EachOneTeachOne_Pillar_1{
padding:80px 20px;
/*background:#f4f5f6;*/
text-align:center;
}

.EachOneTeachOne_Pillar_1_container{
max-width:1200px;
margin:auto;
}

/*.EachOneTeachOne_Pillar_1_sub{*/
/*font-size:19px;*/
/*max-width:750px;*/
/*margin:auto;*/
/*margin-bottom:60px;*/
/*line-height:1.6;*/
/*}*/

/* GRID */

.EachOneTeachOne_Pillar_1_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

/* CARD */

.EachOneTeachOne_Pillar_1_card{
background:#dcf3ff;
padding:35px 25px;
border-radius:18px;
transition:.35s;
}

.EachOneTeachOne_Pillar_1_card:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:0 15px 35px rgba(0,0,0,.15);
}

/* ICON */

.EachOneTeachOne_Pillar_1_icon{
margin-bottom:15px;
}

.EachOneTeachOne_Pillar_1_icon img{
width:45px;
}

/* TEXT */

.EachOneTeachOne_Pillar_1_card h3{
font-size:18px;
margin-bottom:10px;
font-weight:700;
}

.EachOneTeachOne_Pillar_1_card p{
font-size:16px;
line-height:1.5;
}

/* BUTTON */

.EachOneTeachOne_Pillar_1_button_wrap{
margin-top:40px;
}

.EachOneTeachOne_Pillar_1_button{
display:inline-block;
padding:14px 35px;
border-radius:8px;
text-decoration:none;
font-weight:600;
background:#2c6bd8;
color:#fff;
}

@media (max-width: 992px){
    .EachOneTeachOne_Pillar_1_grid{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px){
    .EachOneTeachOne_Pillar_1_grid{
        grid-template-columns: repeat(1, 1fr);
    }
}




/***************************************************EachOneTeachOne_Digital_Access******************************************************************/
.EachOneTeachOne_Digital_Access{
padding:80px 20px;
text-align:center;
}

/* IMAGE AREA */
.EachOneTeachOne_Digital_Access_image{
height:420px;
background-image:url("https://ytds.org/ytds_2/asset/images/EachOneTeachOne (Digital Access & Learning Tools)-30.webp");
background-size:cover;
background-position:center;
border-radius:20px;
}

/* CARDS */
.EachOneTeachOne_Digital_Access_cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

max-width:1200px;
margin:auto;

margin-top: -144px;
position:relative;
}

/* CARD */

.EachOneTeachOne_Digital_Access_card{
background:#dcf3ff;
padding:20px;
border-radius:12px;
display:flex;
gap:12px;
text-align:left;
    padding-bottom: 12px;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.EachOneTeachOne_Digital_Access_card img{
    height: 51px;
    width: 51px;
}

.EachOneTeachOne_Digital_Access_card h3{
font-size:18px;
margin-bottom:4px;
}

.EachOneTeachOne_Digital_Access_card p{
font-size:14px;
color:#555;
}


.EachOneTeachOne_Digital_Access_card{

border-radius:12px;
display:flex;
gap:12px;
text-align:left;

box-shadow:0 8px 25px rgba(0,0,0,0.15);

transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Zoom popup effect */
.EachOneTeachOne_Digital_Access_card:hover{
transform: scale(1.08);
box-shadow:0 18px 40px rgba(0,0,0,0.25);
z-index:2;
}

@media (max-width: 992px){
    .EachOneTeachOne_Digital_Access_cards{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px){
    .EachOneTeachOne_Digital_Access_cards{
        grid-template-columns: repeat(1, 1fr);
    }
}



/**************************************************EachOneTeachOne_Digital_Access*****************************************************/

.EachOneTeachOne_Pillar_2{
padding:80px 20px;
/*background:#f3f3f3;*/
text-align:center;
}

.EachOneTeachOne_Pillar_2_container{
max-width:1200px;
margin:auto;
}

/* Cards */

.EachOneTeachOne_Pillar_2_cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-bottom:60px;
}

.EachOneTeachOne_Pillar_2_card{
background:#dcf3ff;
padding:35px 25px;
border-radius:18px;
transition:.35s;
}

.EachOneTeachOne_Pillar_2_card:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.EachOneTeachOne_Pillar_2_card img{
width:45px;
margin-bottom:15px;
}

.EachOneTeachOne_Pillar_2_card h3{
font-size:20px;
margin-bottom:10px;
}

.EachOneTeachOne_Pillar_2_card p{
font-size:16px;
line-height:1.5;
}

/* Quote Section */
.EachOneTeachOne_Pillar_2_quote{
display:flex;
align-items:center;
gap:20px;

background:#dcf3ff;
padding: 13px 40px;
border-radius:18px;
}

.EachOneTeachOne_Pillar_2_quote_text{
flex:1;
text-align:left;
font-size:22px;
}

.EachOneTeachOne_Pillar_2_quote_right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
}

.EachOneTeachOne_Pillar_2_author{
font-size:14px;
opacity:.7;
/*margin-top: -31px;*/
}

.EachOneTeachOne_Pillar_2_btn{
background:#2f6ad9;
color:#fff;
padding:12px 26px;
border-radius:8px;
text-decoration:none;
font-weight:600;
margin-top: 33px;
}

@media (max-width: 992px){
    .EachOneTeachOne_Pillar_2_cards{
       grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px){
    .EachOneTeachOne_Pillar_2_cards{
       grid-template-columns: repeat(1, 1fr);
    }
    .EachOneTeachOne_Pillar_2_quote{
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }
}




/****************************************EachOneTeachOne_Pillar_3**********************************************************/

.EachOneTeachOne_Pillar_4{
padding:80px 20px;
/**/
}

.EachOneTeachOne_Pillar_4_container{
max-width:1200px;
margin:auto;
}

.EachOneTeachOne_Pillar_4_grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

/* LEFT */
.EachOneTeachOne_Pillar_4_desc{
font-size:17px;
line-height:1.6;
margin-bottom:30px;
}

/* Cards */

.EachOneTeachOne_Pillar_4_cards{
display:flex;
flex-direction:column;
gap:18px;
margin-bottom:25px;
}

.EachOneTeachOne_Pillar_4_card{
display:flex;
gap:15px;
align-items:center;

background:#dcf3ff;
padding:16px 20px;
border-radius:14px;

transition:.3s;
}

.EachOneTeachOne_Pillar_4_card:hover{
transform:translateY(-4px) scale(1.02);
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.EachOneTeachOne_Pillar_4_icon img{
width:40px;
}

.EachOneTeachOne_Pillar_4_card h4{
margin:0;
font-size:18px;
font-weight:600;
}

.EachOneTeachOne_Pillar_4_card p{
margin:0;
font-size:16px;
}

/* Button */

.EachOneTeachOne_Pillar_4_btn{
display:inline-block;
background:#2d6cdf;
color:#fff;
padding:12px 26px;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

/* RIGHT */

.EachOneTeachOne_Pillar_4_right{
position:relative;
}

.EachOneTeachOne_Pillar_4_hash{
position:absolute;
top:-95px;
right:10px;
font-size:34px;
font-weight:700;
color:#2c4b86;
}

.EachOneTeachOne_Pillar_4_right img{
width:100%;
border-radius:20px;
}

@media (max-width: 992px) {
    .EachOneTeachOne_Pillar_4_grid{
        grid-template-columns: 1fr;
    }
}





/***************************************************EachOneTeachOne_Our_Impact************************************************************/

.EachOneTeachOne_Our_Impact{
padding:80px 20px;
text-align:center;
color:#fff;

background-image:url("https://ytds.org/ytds_2/asset/images/EachOneTeachOne (Our Impact)-42.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.EachOneTeachOne_Our_Impact_container{
max-width:1200px;
margin:auto;
}

.EachOneTeachOne_Our_Impact_desc{
color: white;
opacity:.9;
}

/* GRID */

.EachOneTeachOne_Our_Impact_grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:30px;
align-items:center;
}

/* ITEM */

.EachOneTeachOne_Our_Impact_item{
text-align:center;
}

.EachOneTeachOne_Our_Impact_item img{
width:55px;
margin-bottom:15px;
}

.EachOneTeachOne_Our_Impact_item h3{
font-size:42px;
color:#ffd75c;
margin-bottom:5px;
}

.EachOneTeachOne_Our_Impact_item p{
font-size:18px;
line-height:1.3;
}

@media (max-width: 992px){
    .EachOneTeachOne_Our_Impact_grid{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px){
    .EachOneTeachOne_Our_Impact_grid{
        grid-template-columns: repeat(2, 1fr);
    }
}



/*********************************************EachOneTeachOne_Proof_from_the_Ground**************************************************************/

.EachOneTeachOne_Proof_from_the_Ground{
padding:80px 20px;
text-align:center;
}

.EachOneTeachOne_Proof_from_the_Ground_container{
max-width:1100px;
margin:auto;
}

/* GRID */

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

/* CARD */

.EachOneTeachOne_Proof_from_the_Ground_card{

overflow:hidden;

transition:.3s;
}

.EachOneTeachOne_Proof_from_the_Ground_card img{
width:100%;
display:block;
border-radius:6px;
}

/* Hover effect */

.EachOneTeachOne_Proof_from_the_Ground_card:hover{
transform:scale(1.05);
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

/* BUTTON */

.EachOneTeachOne_Proof_from_the_Ground_btn{
    display: inline-block;
    margin-top: 35px;
    background: #2d6cdf;
    color: #fff;
    padding: 7px 39px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
}

@media (max-width: 600px){
    .EachOneTeachOne_Proof_from_the_Ground_grid{
        grid-template-columns: repeat(2, 1fr);
    }
}



/*----------------------------------------------EachOneTeachOne_Stories_of_Continuity------------------------------------------------------*/

.EachOneTeachOne_Stories_of_Continuity{
padding:80px 20px;
background:#f6f6f6;
text-align:center;
}

.EachOneTeachOne_Stories_of_Continuity_container{
max-width:1200px;
margin:0px auto;
/*padding: 0 20px;*/
}

/* GRID */

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

/* CARD */

.EachOneTeachOne_Stories_of_Continuity_card{
background:#fff;
border-radius:20px;
overflow:hidden;

/* top and bottom borders */
border-top:4px solid #2d63d6;   /* blue top */
border-bottom:1px solid #d9d9d9; /* gray bottom */
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;

transition:0.3s;
}

.EachOneTeachOne_Stories_of_Continuity_card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}
/* IMAGE */

.EachOneTeachOne_Stories_of_Continuity_img{
position:relative;
border-top:4px solid #2d63d6;   /* blue top border */
border-left:4px solid #2d63d6;
border-right:4px solid #2d63d6;
border-bottom:4px solid #2d63d6;
border-top-left-radius:18px;
border-top-right-radius:18px;
overflow:hidden;
}

.EachOneTeachOne_Stories_of_Continuity_img img{
width:100%;
display:block;
background-color: #2d63d6;
}

/* TAG */

.EachOneTeachOne_Stories_of_Continuity_tag{
position:absolute;
bottom:12px;
left:12px;
background:#2d63d6;
color:#fff;
font-size:14px;
padding:6px 12px;
border-radius:20px;
}

/* CONTENT */

.EachOneTeachOne_Stories_of_Continuity_content{
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-bottom-left-radius:18px;
border-bottom-right-radius:18px;
background:#fff;
padding:22px;
}

.EachOneTeachOne_Stories_of_Continuity_text{
font-size:16px;
color:#555;
line-height:1.6;
margin-bottom:18px;
}

/* INFO */

.EachOneTeachOne_Stories_of_Continuity_info{
display:flex;
justify-content:space-between;
font-weight:600;
margin-bottom:15px;
}

/* LINK */

.EachOneTeachOne_Stories_of_Continuity_link{
color:#2d63d6;
text-decoration:none;
font-weight:600;
}

@media (max-width:600px){
    .EachOneTeachOne_Stories_of_Continuity_grid{
        grid-template-columns: repeat(1, 1fr);
    }
}






/******************************* TallyThatEmploys Page - Home Page ***********************************************************************/
/****************************** HERO SECTION - FULL RESPONSIVE **************************************************************/

/* SECTION */
.TallyThatEmploys-page-hero-section-classname {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 78vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;

  /* DEFAULT DESKTOP IMAGE */
  background-image: url('../images/TallyThatEmploys Banner-02.webp'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

@media (max-width: 1024px) {
    .TallyThatEmploys-page-hero-section-classname {
        background-position: -725px;
    }
}

@media (max-width: 992px) {

  .TallyThatEmploys-page-hero-section-classname {
    background-image: url('https://ytds.org/ytds_2/asset/images/Tally That Employs Mobile Banner.webp');
    text-align: center;
    padding: 80px 80px 300px;
    background-position: 0px;
  }
}

/* ================= MOBILE (≤ 480px) ================= */
@media (max-width: 480px) {

  .TallyThatEmploys-page-hero-section-classname {
    padding: 0px 20px;
    background-position: -120px;
  }
}

@media (max-width: 400px) {

  .TallyThatEmploys-page-hero-section-classname {
    background-position: -180px;
  }
}


/********************************************************************************************************************************************/
/******************************* ThinkBeforeYouClick Page ***********************************************************************************/
/********************************************************************************************************************************************/

/******************************* ThinkBeforeYouClick Page - Home Page ***********************************************************************/
/****************************** HERO SECTION - FULL RESPONSIVE **************************************************************/

/* SECTION */
.ThinkBeforeYouClick-page-hero-section-classname {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 78vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;

  /* DEFAULT DESKTOP IMAGE */
  background-image: url('https://ytds.org/ytds_2/asset/images/Think Before You Click Banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* OVERLAY */
.ThinkBeforeYouClick-page-hero-section-classname__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(3, 12, 26, 0.85) 0%,
    rgba(3, 12, 26, 0.65) 50%,
    rgba(3, 12, 26, 0.25) 80%,
    rgba(3, 12, 26, 0.05) 100%
  );
  pointer-events: none;
}

/* CONTAINER */
.ThinkBeforeYouClick-page-hero-section-classname__container {
  position: relative;
  z-index: 1;
  width: min(1200px, 92%);
  margin: auto;
  padding: 120px 0px 100px;
}

/* GRID */
.ThinkBeforeYouClick-page-hero-section-classname__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

/* CONTENT */
.ThinkBeforeYouClick-page-hero-section-classname__content {
  max-width: 100%;
  text-align: center;
}

/* KICKER */
.ThinkBeforeYouClick-page-hero-section-classname__kicker {
  margin-bottom: 15px;
  font-size: 20px;
  color: rgba(244, 206, 93, 0.95);
}

/* TITLE */
.ThinkBeforeYouClick-page-hero-section-classname__title {
  margin-bottom: 12px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-size: clamp(28px, 6vw, 42px);
}

/* DESCRIPTION */
.ThinkBeforeYouClick-page-hero-section-classname__desc {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* STATS */
.ThinkBeforeYouClick-page-hero-section-classname__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 25px 0 35px;
}

/* STAT CARD */
.ThinkBeforeYouClick-page-hero-section-classname__stat-card {
  border-radius: 12px;
  padding: 14px;
  background: rgba(16, 64, 140, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  text-align: center;
}

/* STAT VALUE */
.ThinkBeforeYouClick-page-hero-section-classname__stat-value {
  font-size: 28px;
  font-weight: 800;
  color: rgba(244, 206, 93, 0.98);
}

/* STAT LABEL */
.ThinkBeforeYouClick-page-hero-section-classname__stat-label {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

/* CTA */
.ThinkBeforeYouClick-page-hero-section-classname__cta {
  display: flex;
  /*flex-direction: column;*/
  gap: 12px;
  align-items: center;
}

/* BUTTON */
.ThinkBeforeYouClick-page-hero-section-classname__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 100%;
  max-width: 260px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.2s;
}

/* PRIMARY */
.ThinkBeforeYouClick-page-hero-section-classname__btn--primary {
  background: #1f73ff;
  color: #fff;
}

/* GHOST */
.ThinkBeforeYouClick-page-hero-section-classname__btn--ghost {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}

/* VISUAL */
.ThinkBeforeYouClick-page-hero-section-classname__visual {
  display: none;
}


/* ================= TABLET (≤ 992px) ================= */
@media (max-width: 992px) {

  .ThinkBeforeYouClick-page-hero-section-classname {
    background-image: url('https://ytds.org/ytds_2/asset/images/Think Before You Click Mobile Banner.webp');
    text-align: center;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__grid {
    grid-template-columns: 1fr;
  }
  
  .ThinkBeforeYouClick-page-hero-section-classname__container {
    margin: 100px auto 200px;
    padding: 120px 0px 150px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__content {
    margin: 0 auto;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__desc {
    margin-left: auto;
    margin-right: auto;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__stats {
    grid-template-columns: repeat(3, 1fr);
    margin-left: auto;
    margin-right: auto;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__cta {
    flex-direction: row;
    justify-content: center;
  }
}


/* ================= MOBILE (≤ 480px) ================= */
@media (max-width: 480px) {

  .ThinkBeforeYouClick-page-hero-section-classname {
    padding: 25px 0;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__container {
    padding: 70px 0 80px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__title {
    font-size: 28px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__desc {
    font-size: 14px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__stats {
    grid-template-columns: 1fr;
  }
  .ThinkBeforeYouClick-page-hero-section-classname__stat-card {
      width: 160px;
    justify-self: center;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__cta {
    flex-direction: column;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__btn {
    width: 100%;
    max-width: 260px;
  }
}


/* ================= DESKTOP (≥ 1024px) ================= */
@media (min-width: 1024px) {

  .ThinkBeforeYouClick-page-hero-section-classname__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 50px;
    align-items: center;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__content {
    text-align: left;
    max-width: 720px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__desc {
    max-width: 650px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__cta {
    justify-content: flex-start;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__visual {
    display: block;
    min-height: clamp(280px, 50vh, 520px);
  }

  .ThinkBeforeYouClick-page-hero-section-classname__stat-value {
    font-size: 40px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__stat-label {
    font-size: 16px;
  }
}


/* ================= LARGE SCREENS (≥ 1280px) ================= */
@media (min-width: 1280px) {

  .ThinkBeforeYouClick-page-hero-section-classname__title {
    font-size: 64px;
  }

  .ThinkBeforeYouClick-page-hero-section-classname__desc {
    font-size: 18px;
  }

}


/****************************** ThinkBeforeYouClick Page - The-Growing-Digital-Threat **************************************************************/

/* SECTION */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname {
  padding: 60px 20px;
}

/* CONTAINER */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* IMAGE */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-image {
  position: relative;
}

.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}

/* STAT CARD */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-stat {
  position: relative;
  margin-top: 15px;
  background: #dcf3ff;
  padding: 8px 18px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-stat h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #1f2c55;
}

.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-stat p {
  margin: 0;
  font-size: 14px;
  color: black;
}

/* CONTENT */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-description {
  margin-bottom: 25px;
}

/* GRID */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* CARD */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-card {
  background: #dcf3ff;
  padding: 12px;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: 0.3s;
}

.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* ICON */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-icon {
  width: 40px;
  height: 40px;
  background: #1e64d1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-icon img {
  width: 40px;
}

/* TEXT */
.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-card h4 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #2c4277;
}

.ThinkBeforeYouClick-page-the-growing-digital-threat-classname-card p {
  margin: 0;
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}


/* ========================= */
/* TABLET (>=768px) */
/* ========================= */
@media (min-width: 768px) {

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname {
    padding: 80px 20px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-title {
    font-size: 34px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-description {
    font-size: 18px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* stat overlay */
  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-stat {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }
}


/* ========================= */
/* DESKTOP (>=1024px) */
/* ========================= */
@media (min-width: 1024px) {

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-container {
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-title {
    font-size: 25px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-description {
    font-size: 20px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-card h4 {
    font-size: 17px;
  }

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-card p {
    font-size: 14px;
  }
}


/* ========================= */
/* LARGE SCREENS (>=1280px) */
/* ========================= */
@media (min-width: 1280px) {

  .ThinkBeforeYouClick-page-the-growing-digital-threat-classname-title {
    font-size: 44px;
  }

}




/****************************** ThinkBeforeYouClick Page - The-Risk-We-See-Everyday **************************************************************/

/* SECTION */
.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname {
  padding: 60px 20px;
}

/* CONTAINER */
.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-container {
  max-width: 1200px;
  width: 92%;
  margin: auto;
  text-align: center;
}

/* GRID */
.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* CARD */
.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card {
  background: #dcf3ff;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  text-align: left;
  transition: 0.3s;
}

.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* ICON */
.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon {
  background: #1e64d1;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon img {
  width: 50px;
}

/* TEXT */
.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card h4 {
  font-size: 18px;
  margin: 0 0 5px;
  color: #2c4277;
}

.ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card p {
  font-size: 14px;
  font-weight: 400;
  color: black;
  line-height: 1.4;
  margin: 0;
}


/* ================= TABLET (>=768px) ================= */
@media (min-width: 768px) {

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname {
    padding: 80px 20px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-title {
    font-size: 36px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-description {
    font-size: 16px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon {
    width: 50px;
    height: 50px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon img {
    width: 50px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card h4 {
    font-size: 20px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card p {
    font-size: 15px;
  }
}


/* ================= DESKTOP (>=1024px) ================= */
@media (min-width: 1024px) {

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-container {
    max-width: 1150px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-title {
    font-size: 44px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-description {
    font-size: 18px;
    margin-bottom: 40px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-grid {
    gap: 30px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card {
    padding: 20px 25px;
    gap: 25px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon {
    width: 60px;
    height: 60px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon img {
    width: 60px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card h4 {
    font-size: 22px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card p {
    font-size: 16px;
  }
}


/* ================= LARGE SCREENS (>=1280px) ================= */
@media (min-width: 1280px) {

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-title {
    font-size: 48px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card h4 {
    font-size: 24px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card p {
    font-size: 18px;
  }

}


/* ================= SMALL MOBILE (<=480px) ================= */
@media (max-width: 480px) {

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon {
    width: 45px;
    height: 45px;
  }

  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-icon img {
    width: 45px;
  }
  
  .ThinkBeforeYouClick-page-the-risk-we-see-everyday-classname-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

}




/****************************** ThinkBeforeYouClick Page - What We Teach **************************************************************/
/****************************** ThinkBeforeYouClick Page - What We Teach (FULL RESPONSIVE) **************************************************************/

/* SECTION */
.ThinkBeforeYouClick-page-what-we-teach-classname {
  padding: 60px 20px;
}

/* CONTAINER */
.ThinkBeforeYouClick-page-what-we-teach-classname-container {
  max-width: 1200px;
  width: 92%;
  margin: auto;
  text-align: center;
}

/* GRID */
.ThinkBeforeYouClick-page-what-we-teach-classname-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* CARD */
.ThinkBeforeYouClick-page-what-we-teach-classname-card {
  background: #dcf3ff;
  padding: 20px;
  border-radius: 12px;
  text-align: left;
  transition: 0.3s;
  height: auto;
}

.ThinkBeforeYouClick-page-what-we-teach-classname-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* ICON */
.ThinkBeforeYouClick-page-what-we-teach-classname-icon {
  width: 50px;
  height: 50px;
  background: #1e64d1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.ThinkBeforeYouClick-page-what-we-teach-classname-icon img {
  width: 28px;
}

/* TEXT */
.ThinkBeforeYouClick-page-what-we-teach-classname-card h3 {
  margin: 0 0 8px;
  font-size: 24px;
  color: #1c2b4f;
}

.ThinkBeforeYouClick-page-what-we-teach-classname-card p {
  margin: 0;
  font-size: 14px;
  color: black;
  line-height: 1.4;
}

/* BUTTON */
/*.ThinkBeforeYouClick-page-what-we-teach-classname-button-wrap {*/
/*  margin-top: 30px;*/
/*}*/

.ThinkBeforeYouClick-page-what-we-teach-classname-button {
  background: #186be3;
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
}

.ThinkBeforeYouClick-page-what-we-teach-classname-button:hover {
  background: #1c4db5;
}

@media (max-width: 480px) {

  /* Better spacing */
  .ThinkBeforeYouClick-page-what-we-teach-classname {
    padding: 50px 15px;
  }

  /* Improve card feel */
  .ThinkBeforeYouClick-page-what-we-teach-classname-card {
    padding: 18px;
    border-radius: 10px;
  }

  /* Icon slightly smaller */
  .ThinkBeforeYouClick-page-what-we-teach-classname-icon {
    width: 45px;
    height: 45px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-icon img {
    width: 60px;
  }

  /* Text tweaks */
  .ThinkBeforeYouClick-page-what-we-teach-classname-card h3 {
    font-size: 18px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Button better tap */
  .ThinkBeforeYouClick-page-what-we-teach-classname-button {
    width: 100%;
    max-width: 260px;
    padding: 12px;
    font-size: 15px;
  }

}

/* ================= TABLET (>=768px) ================= */
@media (min-width: 700px) {

  .ThinkBeforeYouClick-page-what-we-teach-classname {
    padding: 80px 20px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-title {
    font-size: 34px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-description {
    font-size: 16px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card h3 {
    font-size: 20px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card p {
    font-size: 15px;
  }
}


/* ================= DESKTOP (>=1024px) ================= */
@media (min-width: 1024px) {

  .ThinkBeforeYouClick-page-what-we-teach-classname-container {
    max-width: 1150px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-title {
    font-size: 42px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-description {
    font-size: 18px;
    margin-bottom: 40px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card {
    padding: 25px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-icon {
    width: 60px;
    height: 60px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-icon img {
    width: 60px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card h3 {
    font-size: 22px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card p {
    font-size: 15px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-button {
    font-size: 18px;
    padding: 12px 30px;
  }
}


/* ================= LARGE SCREENS (>=1280px) ================= */
@media (min-width: 1280px) {

  .ThinkBeforeYouClick-page-what-we-teach-classname-title {
    font-size: 44px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card h3 {
    font-size: 24px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-card p {
    font-size: 16px;
  }

}


/* ================= SMALL MOBILE (<=480px) ================= */
@media (max-width: 480px) {

  .ThinkBeforeYouClick-page-what-we-teach-classname-title {
    font-size: 24px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-description {
    font-size: 14px;
  }

  .ThinkBeforeYouClick-page-what-we-teach-classname-button {
    width: 100%;
    max-width: 260px;
  }

}




/****************************** ThinkBeforeYouClick Page - Why This Campaign Mattters **************************************************************/
/* SECTION */

.ThinkBeforeYouClick-page-why-this-campaign-matters-classname {
  /* background:#f5f7fb; */
  padding: 80px 0 0 0;
  text-align: center;
}


/* HEADER */

.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-container {
  width: 1200px;
  max-width: 92%;
  margin: auto;
  margin-bottom: 40px;
}

/* BACKGROUND IMAGE */
.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-bg {
  position: relative;
  padding: 140px 0 50px;
}

/* CARD */
.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-card {
  width: 1250px;
  max-width: 90%;
  top: 180px;
  margin: auto;
  background: #dcf3ff;
  padding: 25px 60px;
  border-radius: 18px;
  position: relative;
  z-index: 2;
}

/* GRID */
.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}

/* ITEM */
.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-item {
  text-align: center;
}

/* ICON */
.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-icon {
  width: 60px;
  height: 60px;
  background: #1e64d1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto 10px;
  margin-bottom: 12px;
}

.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-icon img {
  width: 60px;
}

/* TEXT */
.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-item h3 {
  margin: 0 0 10px;
  font-size: 24px;
  color: #1c2b4f;
}

.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-item p {
  font-size: 17px;
  color: black;
  line-height: 1.2;
}

/* BUTTON */
.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-button-wrap {
  text-align: center;
  margin-top: 200px;
}

.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-button {
  background: #2c66d3;
  color: #fff;
  padding: 10px 45px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  display: inline-block;
  transition: 0.3s;
}

.ThinkBeforeYouClick-page-why-this-campaign-matters-classname-button:hover {
  background: #1e4fb3;
}

/* RESPONSIVE */
@media(max-width:992px) {
  .ThinkBeforeYouClick-page-why-this-campaign-matters-classname-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ThinkBeforeYouClick-page-why-this-campaign-matters-classname-title {
    font-size: 32px;
  }
}

@media(max-width:600px) {
  .ThinkBeforeYouClick-page-why-this-campaign-matters-classname-grid {
    grid-template-columns: 1fr;
  }

  .ThinkBeforeYouClick-page-why-this-campaign-matters-classname-bg {
    padding: 80px 0;
  }
  
  .ThinkBeforeYouClick-page-why-this-campaign-matters-classname-card{
      padding: 40px 15px;
  }
}




/****************************** ThinkBeforeYouClick Page - Our Impact **************************************************************/
.ThinkBeforeYouClick-page-our-impact-classname {
  padding: 80px 0;
  /*margin: 50px 0px;*/
  color: #fff;
  text-align: center;
  border-radius: 10px;
}

.ThinkBeforeYouClick-page-our-impact-classname-container {
  width: 1200px;
  max-width: 92%;
  margin: auto;
}

.ThinkBeforeYouClick-page-our-impact-classname-subtitle {
  color: white;
  opacity: 0.9;
}

.ThinkBeforeYouClick-page-our-impact-classname-title {
  color: #ffd76a;
}

.ThinkBeforeYouClick-page-our-impact-classname-description {
  color: white;
  opacity: 0.95;
}

.ThinkBeforeYouClick-page-our-impact-classname-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

.ThinkBeforeYouClick-page-our-impact-classname-icon {
  width: 85px;
  height: 85px;
  /*background: #0b316f;*/
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 5px;
}

.ThinkBeforeYouClick-page-our-impact-classname-icon img {
  width: 75px;
}

.ThinkBeforeYouClick-page-our-impact-classname-item h3 {
  font-size: 60px;
  color: #ffd76a;
  margin: 0;
}

.ThinkBeforeYouClick-page-our-impact-classname-item p {
  font-size: 22px;
  font-weight: 600;
  margin-top: 5px;
  line-height: 1.2;
}

/* RESPONSIVE */

@media(max-width:992px) {
  .ThinkBeforeYouClick-page-our-impact-classname-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .ThinkBeforeYouClick-page-our-impact-classname-title {
    font-size: 36px;
  }
}

@media(max-width:992px) {
  .ThinkBeforeYouClick-page-our-impact-classname-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  /*.ThinkBeforeYouClick-page-our-impact-classname-grid {*/
  /*  grid-template-columns: 1fr;*/
  /*}*/
  .ThinkBeforeYouClick-page-our-impact-classname-item h3 {
    font-size: 46px;
  }
}



/****************************** ThinkBeforeYouClick Page - How You Can Help **************************************************************/
/* SECTION */

.ThinkBeforeYouClick-page-how-you-can-help-classname {
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}


/* CONTAINER */

.ThinkBeforeYouClick-page-how-you-can-help-classname-container {
  width: 1150px;
  max-width: 92%;
  margin: auto;
}


/* HEADER */

.ThinkBeforeYouClick-page-how-you-can-help-classname-subtitle {
  color: #ffffff;
  opacity: 0.9;
}

.ThinkBeforeYouClick-page-how-you-can-help-classname-title {
  color: #ffd76a;
}

.ThinkBeforeYouClick-page-how-you-can-help-classname-description {
  color: #ffffff;
  opacity: 0.95;
}

/* GRID */

.ThinkBeforeYouClick-page-how-you-can-help-classname-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}


/* CARD */

.ThinkBeforeYouClick-page-how-you-can-help-classname-card {
  background: #dcf3ff;
  color: #1c2b4f;
  padding: 25px 100px 25px 30px;
  border-radius: 15px;
  text-align: left;
  position: relative;
  transition: 0.3s;
}

.ThinkBeforeYouClick-page-how-you-can-help-classname-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}


/* ICON */

.ThinkBeforeYouClick-page-how-you-can-help-classname-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 65px;
  height: 65px;
  /*background: #1e64d1;*/
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ThinkBeforeYouClick-page-how-you-can-help-classname-icon img {
  width: 65px;
}


/* TEXT */

.ThinkBeforeYouClick-page-how-you-can-help-classname-card h3 {
  font-size: 28px;
  font-weight: 600px;
  margin-bottom: 7px;
  color: #242f64;
}

.ThinkBeforeYouClick-page-how-you-can-help-classname-card p {
  font-size: 17px;
  line-height: 1.3;
  color: #4f4f4f;
  margin-bottom: 30px;
}


/* BUTTON */

.ThinkBeforeYouClick-page-how-you-can-help-classname-button {
  display: inline-block;
  background: #2c66d3;
  color: #fff;
  padding: 7px 15px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  /*width: 230px;*/
  text-align: center;
  transition: 0.3s;
}

.ThinkBeforeYouClick-page-how-you-can-help-classname-button:hover {
  background: #1c4db5;
}


/* RESPONSIVE */

@media(max-width:992px) {

  .ThinkBeforeYouClick-page-how-you-can-help-classname-title {
    font-size: 36px;
  }

}

@media(max-width:768px){
    .ThinkBeforeYouClick-page-how-you-can-help-classname-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:600px) {

  .ThinkBeforeYouClick-page-how-you-can-help-classname-title {
    font-size: 30px;
  }

  .ThinkBeforeYouClick-page-how-you-can-help-classname-card {
    padding: 30px;
  }
  
  .ThinkBeforeYouClick-page-how-you-can-help-classname-card h3 {
      margin-right: 50px;
  }
  .ThinkBeforeYouClick-page-how-you-can-help-classname-card p {
      margin-top: 30px;
  }

}





/*******************************************************************************************************************************/
/************************** Employment Page ************************************************************************************/
/*******************************************************************************************************************************/


.employment-page-DriveHer-upcoming-section{
    padding:80px 20px 40px;
    /* background:#f5f5f5; */
}

.employment-page-DriveHer-upcoming-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    gap:40px;
    align-items:center;
}

/* LEFT SIDE */

.employment-page-DriveHer-upcoming-left{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.employment-page-DriveHer-upcoming-card{
    display: flex;
    gap: 15px;
    background: #e7b993;
    padding: 15px 25px;
    border-radius: 12px;
    align-items: center;
}

.employment-page-DriveHer-upcoming-icon img{
    width:60px;
}

.employment-page-DriveHer-upcoming-content h3{
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 600;
}

.employment-page-DriveHer-upcoming-content p{
    font-size: 17px;
    line-height: 1.2;
}


/* RIGHT SIDE */

.employment-page-DriveHer-upcoming-right{
    flex:1;
    text-align:center;
}

.employment-page-DriveHer-upcoming-right img{
    width:100%;
    border-radius:26px;
    display:block;
}

.employment-page-DriveHer-upcoming-caption{
    margin-top:12px;
    font-size:14px;
    color:#6a6a6a;
}


/* RESPONSIVE */

@media(max-width:992px){

.employment-page-DriveHer-upcoming-container{
    flex-direction:column;
}

.employment-page-DriveHer-upcoming-right{
    order:-1;
}

}

@media(max-width:576px){

.employment-page-DriveHer-upcoming-card{
    padding:18px;
}

.employment-page-DriveHer-upcoming-content h3{
    font-size:18px;
}

}




/*************************************************************************************************************************************/
/**************************** DriveHer Page **************************************************************************************/
/*************************************************************************************************************************************/


/***************************** DriveHer Page - Hero ******************************************************************************/
.DriveHer-page-hero-section-main {
    position: relative;
  width: 100%;
  min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    background-image:url('../images/DriveHer-Banner.webp');
    padding: 100px 0 60px;
  overflow: hidden;
}

@media(max-width:1024px) {
    .DriveHer-page-hero-section-main {
        background-position: -450px;
        padding: 100px 40px 60px;
    }
}

@media(max-width:992px) {
    .DriveHer-page-hero-section-main {
        background-image:url('../images/V3 5 (2).webp');
        padding: 100px 0 450px;
        background-position: center;
    }
}

@media(max-width:768px) {
    .DriveHer-page-hero-section-main {
        padding: 40px 0 300px;
        background-position: center;
    }
}

@media(max-width:360px) {
    .DriveHer-page-hero-section-main {
        padding: 0px 0 250px;
        background-position: center;
    }
}

/*************************************************************************************************************************************/
/**************************** FeedingIndia Page **************************************************************************************/
/*************************************************************************************************************************************/


/***************************** FeedingIndia Page - Hero ******************************************************************************/
/* HERO SECTION */
.FeedingIndia-page-hero-section-main {
  position: relative;
  width: 100%;
  min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    background-image:url('../images/DM-picture-Recovered (1).webp');
    padding: 100px 0 60px;
  overflow: hidden;
}

/* OVERLAY */
.FeedingIndia-page-hero-section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* CONTAINER */
.FeedingIndia-page-hero-section-container {
  width: 1200px;
  max-width: 95%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* LEFT CONTENT */
.FeedingIndia-page-hero-section-content {
  width: 60%;
  color: white;
}

.FeedingIndia-page-hero-section-subtitle {
  font-size: 18px;
  margin-bottom: 15px;
  opacity: 0.9;
  border-radius:15px;
}

.FeedingIndia-page-hero-section-title {
  font-size: 72px;
  font-weight: 800;
  margin-bottom: 0px;
}

.FeedingIndia-page-hero-section-tagline {
  font-size: 34px;
  font-weight: 700;
  color: #ffd34f;
  margin-bottom: 5px;
}

.FeedingIndia-page-hero-section-description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 35px;
  max-width: 700px;
}

/* STATS */
.FeedingIndia-page-hero-section-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 35px;
}

.FeedingIndia-page-hero-section-stat-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(3px);
  padding: 18px 25px;
  border-radius: 10px;
  text-align: center;
  width: 185px;
}

.FeedingIndia-page-hero-section-stat-box h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 5px;
}

.FeedingIndia-page-hero-section-stat-box p {
  font-size: 14px;
  opacity: 0.9;
}

/* BUTTONS */
.FeedingIndia-page-hero-section-buttons {
  display: flex;
  gap: 20px;
}

.FeedingIndia-page-hero-section-btn-primary {
  background: #ff6a2b;
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.FeedingIndia-page-hero-section-btn-primary:hover {
  background: #ff4f0f;
}

.FeedingIndia-page-hero-section-btn-secondary {
  border: 2px solid #ffd34f;
  color: #ffd34f;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.FeedingIndia-page-hero-section-btn-secondary:hover {
  background: #ffd34f;
  color: #000;
}


/* RESPONSIVE */
@media(max-width:1024px) {
.FeedingIndia-page-hero-section-main {
    background-position: -450px;
        padding: 100px 40px 60px;
}
}
@media(max-width:992px) {
    .FeedingIndia-page-hero-section-main {
        background-image:url('../images/Feeding India Mobile Banner.webp');
        background-position: center;
        padding: 100px 0 450px;
    }
  .FeedingIndia-page-hero-section-container {
    flex-direction: column;
    text-align: center;
  }

  .FeedingIndia-page-hero-section-content {
    width: 100%;
  }

  .FeedingIndia-page-hero-section-right-image {
    width: 100%;
    margin-top: 40px;
    justify-content: center;
  }

  .FeedingIndia-page-hero-section-title {
    font-size: 52px;
  }
  .FeedingIndia-page-hero-section-subtitle{
      margin: 0px auto;
  }

  .FeedingIndia-page-hero-section-tagline {
    font-size: 26px;
  }

  .FeedingIndia-page-hero-section-stats {
    justify-content: center;
    flex-wrap: wrap;
     margin-bottom: 15px;
  }
  
  .FeedingIndia-page-hero-section-description {
       margin-bottom: 15px;
  }
  .FeedingIndia-page-hero-section-buttons {
    justify-content: center;
  }
}

@media(max-width:600px) {
  .FeedingIndia-page-hero-section-container {
    flex-direction: column;
    text-align: center;
    padding: 50px 10px;
    margin-top: 50px;
  }

  .FeedingIndia-page-hero-section-title {
    font-size: 40px;
    margin-top: 20px;
  }

  .FeedingIndia-page-hero-section-tagline {
    font-size: 22px;
  }

  .FeedingIndia-page-hero-section-description {
    font-size: 16px;
  }

  .FeedingIndia-page-hero-section-stat-box {
    min-width: 120px;
  }

  .FeedingIndia-page-hero-section-buttons {
    justify-content: center;
  }
}




/***************************** FeedingIndia Page - The Challenge of Hunger ******************************************************************************/
/************************ FeedingIndia - The Challenge of Hunger Section ************************/

.FeedingIndia-page-the-challenge-of-hunger-section-main {
  /*background: #f3f3f3;*/
  padding: 80px 20px;
}


.FeedingIndia-page-the-challenge-of-hunger-section-container {
  width: 1200px;
  max-width: 92%;
  margin: auto;
}


/* HEADER */

.FeedingIndia-page-the-challenge-of-hunger-section-header {
  text-align: center;
  margin: auto;
  margin-bottom: 70px;
}

/* GRID */

.FeedingIndia-page-the-challenge-of-hunger-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}


/* CARD */

.FeedingIndia-page-the-challenge-of-hunger-section-card {

  position: relative;
  background: #fbc8a1;
  padding: 25px 90px 25px 25px;
  border-radius: 20px;
  transition: 0.3s;
}

.FeedingIndia-page-the-challenge-of-hunger-section-card:hover {
  transform: translateY(-5px);
}


/* ICON */

.FeedingIndia-page-the-challenge-of-hunger-section-icon {
  position: absolute;
  top: -30px;
  right: 15px;
  width: 70px;
  height: 70px;
  background: #e74f14;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.FeedingIndia-page-the-challenge-of-hunger-section-icon img {
  width: 65px;
}


/* TEXT */

.FeedingIndia-page-the-challenge-of-hunger-section-card h3 {
  font-size: 25px;
  color: #243a6b;
  margin-bottom: 7px;
}

.FeedingIndia-page-the-challenge-of-hunger-section-card p {
  font-size: 19px;
  line-height: 1.3;
}


/* ========================= */
/* RESPONSIVE */
/* ========================= */

/* Tablet */

@media (max-width:992px) {

  .FeedingIndia-page-the-challenge-of-hunger-section-description {
    width: 650px;
    margin: 0 auto;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-title {
    font-size: 38px;
  }

}


/* Mobile */

@media (max-width:600px) {

  .FeedingIndia-page-the-challenge-of-hunger-section-main {
    padding: 70px 20px;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-title {
    font-size: 32px;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-description {
    font-size: 16px;
    width: 300px;
    margin: 0 auto;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-card {
    padding: 30px 20px;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-icon {
    width: 60px;
    height: 60px;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .FeedingIndia-page-the-challenge-of-hunger-section-icon img {
    width: 50px;
  }

}




/************************ FeedingIndia - Beyond Food Section ************************/

.FeedingIndia-page-beyond-food-section-main {
  position: relative;
  padding: 40px 60px;
  background-size: cover;
  /* background-position: center;*/
  border-radius: 40px;
  overflow: hidden;
  margin: 40px 40px 80px;
}

/* Container */

.FeedingIndia-page-beyond-food-section-container {

  width: 1100px;
  max-width: 92%;
  margin: auto;
  text-align: center;
  position: relative;
  z-index: 2;
  color: white;

}


/* Text */

.FeedingIndia-page-beyond-food-section-subtitle {
    color:white;
  opacity: 0.9;
}

.FeedingIndia-page-beyond-food-section-title {
  color: #ffd34f;
}

.FeedingIndia-page-beyond-food-section-description {
  font-size: 18px;
  line-height: 1.7;
  max-width: 900px;
  margin: auto;
  margin-bottom: 50px;
}


/* Stats */

.FeedingIndia-page-beyond-food-section-stats {

  display: flex;
  justify-content: center;
  gap: 30px;

  flex-wrap: wrap;

}


/* Card */

.FeedingIndia-page-beyond-food-section-stat-card {

  background: #f4f4f4;

  padding: 30px 40px;

  border-radius: 12px;

  min-width: 220px;

  position: relative;

  color: #243a6b;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

}


/* Icon */

.FeedingIndia-page-beyond-food-section-icon {

  position: absolute;

  top: -25px;
  right: -20px;

  width: 60px;
  height: 60px;

  background: #e74f14;

  border-radius: 16px;

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

}

.FeedingIndia-page-beyond-food-section-icon img {

  width: 50px;

}


/* Numbers */

.FeedingIndia-page-beyond-food-section-stat-card h3 {

  font-size: 34px;
  font-weight: 800;

  margin-bottom: 5px;

}

.FeedingIndia-page-beyond-food-section-stat-card p {

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

}


/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:992px) {

  .FeedingIndia-page-beyond-food-section-main {
    padding: 80px 20px;
    margin: 60px 20px;
  }

  .FeedingIndia-page-beyond-food-section-title {
    font-size: 38px;
  }

  .FeedingIndia-page-beyond-food-section-description {
    font-size: 16px;
  }

}


@media(max-width:765px) {

  .FeedingIndia-page-beyond-food-section-main {
    padding: 80px 20px;
    margin: 40px 15px;
  }

  .FeedingIndia-page-beyond-food-section-title {
    font-size: 30px;
  }

  .FeedingIndia-page-beyond-food-section-stats {
    /* flex-direction:column; */
    align-items: center;
  }

}


@media(max-width:480px) {

  .FeedingIndia-page-beyond-food-section-title {
    font-size: 26px;
  }

  .FeedingIndia-page-beyond-food-section-description {
    font-size: 15px;
  }

  /*.FeedingIndia-page-beyond-food-section-stat-card {*/
  /*   width:100%; */
  /*}*/

}



/************************ FeedingIndia Page - Our Impact Section ************************/

.FeedingIndia-page-our-impact-section-main {
  position: relative;
  padding: 80px 40px;
  background-size: cover;
  color: white;
}

/* Container */
.FeedingIndia-page-our-impact-section-container {
  width: 1200px;
  max-width: 92%;
  margin: auto;
  text-align: center;
}

/* Header */
.FeedingIndia-page-our-impact-section-subtitle {
  font-size: 22px;
  margin-bottom: 10px;
  opacity: 0.95;
}

.FeedingIndia-page-our-impact-section-title {
  font-size: 48px;
  font-weight: 800;
  color: #fbde75;
  margin-bottom: 15px;
}

.FeedingIndia-page-our-impact-section-description {

  font-size: 18px;
  line-height: 1.6;
  /*max-width: 650px;*/
  margin: 30px auto 0;
}


/* Grid */

.FeedingIndia-page-our-impact-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 70px;
}


/* Card */

.FeedingIndia-page-our-impact-section-card {
  background: #fbc8a1;
  padding: 35px 25px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  transition: 0.3s;
}

.FeedingIndia-page-our-impact-section-card:hover {
  transform: translateY(-5px);
}


/* Icon */

.FeedingIndia-page-our-impact-section-icon {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #e9edf1;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.FeedingIndia-page-our-impact-section-icon img {
  width: 60px;
}


/* Numbers */

.FeedingIndia-page-our-impact-section-card h3 {
  font-size: 45px;
  color: #f04b10;
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: 800;
}

.FeedingIndia-page-our-impact-section-card p {
  font-size: 19px;
  color: #000;
  font-weight: 500;
}


/* ============================ */
/* Responsive */
/* ============================ */

@media(max-width:1024px) {
  .FeedingIndia-page-our-impact-section-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
  .FeedingIndia-page-our-impact-section-title {
    font-size: 38px;
  }
  .FeedingIndia-page-our-impact-section-card{
      width: 300px;
  }

}


@media(max-width:600px) {

  .FeedingIndia-page-our-impact-section-main {

    padding: 80px 20px;

  }

  .FeedingIndia-page-our-impact-section-grid {

    grid-template-columns: 1fr;

    gap: 25px;

  }

  .FeedingIndia-page-our-impact-section-title {

    font-size: 32px;

  }

  .FeedingIndia-page-our-impact-section-description {

    font-size: 16px;

  }

}




/**************** FeedingIndia - Stories of Financial Independence ****************/

.FeedingIndia-page-stories-of-financial-independence-section-main {
  background: #fbc8a1;
  padding: 80px 0;
}

/* Container */
.FeedingIndia-page-stories-of-financial-independence-section-container {
  width: 1200px;
  max-width: 92%;
  margin: auto;
  text-align: center;
}

/* Heading */
.FeedingIndia-page-stories-of-financial-independence-section-title {
  margin-bottom: 50px;
}

/* Grid */
.FeedingIndia-page-stories-of-financial-independence-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Card */
.FeedingIndia-page-stories-of-financial-independence-section-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.FeedingIndia-page-stories-of-financial-independence-section-card:hover {
  transform: translateY(-6px);
}

/* Image */
.FeedingIndia-page-stories-of-financial-independence-section-image img {
  width: 100%;
  display: block;
}

/* Content */
.FeedingIndia-page-stories-of-financial-independence-section-content {
  padding: 25px;
}

.FeedingIndia-page-stories-of-financial-independence-section-quote {
  font-size: 40px;
  color: #bfbfbf;
  display: block;
  margin-bottom: 0px;
}

.FeedingIndia-page-stories-of-financial-independence-section-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.FeedingIndia-page-stories-of-financial-independence-section-content hr {
  border: none;
  border-top: 1px solid #ddd;
  margin-bottom: 15px;
}

/* Name */
.FeedingIndia-page-stories-of-financial-independence-section-content h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.FeedingIndia-page-stories-of-financial-independence-section-content span {
  font-size: 13px;
  color: #777;
}

/* ============================ */
/* Responsive */
/* ============================ */
@media(max-width:992px) {
  .FeedingIndia-page-stories-of-financial-independence-section-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .FeedingIndia-page-stories-of-financial-independence-section-title {
    font-size: 36px;
  }
}

@media(max-width:600px) {
  .FeedingIndia-page-stories-of-financial-independence-section-main {
    padding: 80px 20px;
  }

  .FeedingIndia-page-stories-of-financial-independence-section-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .FeedingIndia-page-stories-of-financial-independence-section-title {
    font-size: 30px;
  }
}



/**************** FeedingIndia - Get Involved Section ************************************************************/
.FeedingIndia-page-get-involved-section-main {
  padding: 80px 20px;
}

/* Container */
.FeedingIndia-page-get-involved-section-container {
  width: 1200px;
  max-width: 92%;
  margin: auto;
  text-align: center;
}

/* Grid */
.FeedingIndia-page-get-involved-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px;
}

/* Card */
.FeedingIndia-page-get-involved-section-card {
  background: #fbc8a1;
  padding: 30px 136px 20px 30px;
  border-radius: 12px;
  text-align: left;
  position: relative;
  transition: 0.3s;
}

.FeedingIndia-page-get-involved-section-card:hover {
  transform: translateY(-6px);
}

/* Icon */
.FeedingIndia-page-get-involved-section-icon {
  position: absolute;
  top: 25px;
  right: 25px;
  background: #ff6a1a;
  width: 65px;
  height: 65px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.FeedingIndia-page-get-involved-section-icon img {
  width: 65px;
}

/* Card Text */
.FeedingIndia-page-get-involved-section-card h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.FeedingIndia-page-get-involved-section-card p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #222;
}

/* Button */
.FeedingIndia-page-get-involved-section-btn {
  display: inline-block;
  background: #f76916;
  color: white;
  padding: 7px 25px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  /*width: 210px;*/
  text-align: center;
  transition: 0.3s;
}

.FeedingIndia-page-get-involved-section-btn:hover {
  background: #d94c0f;
}

/* ======================= */
/* Responsive */
/* ======================= */
@media(max-width:992px) {
  .FeedingIndia-page-get-involved-section-grid {
    grid-template-columns: 1fr;
  }
  .FeedingIndia-page-get-involved-section-title {
    font-size: 34px;
  }
}

@media(max-width:600px) {
  .FeedingIndia-page-get-involved-section-main {
    padding: 80px 20px;
  }
  .FeedingIndia-page-get-involved-section-title {
    font-size: 28px;
  }
  .FeedingIndia-page-get-involved-section-description {
    font-size: 16px;
  }
}







/*************************************************************************************************************************************/
/**************************** DriveHer Page **************************************************************************************/
/*************************************************************************************************************************************/

/**************** DriveHer - The Challenge Women Face ****************/

.DriveHer-page-the-challenge-women-face-section-main{
/*background:#f3f3f3;*/
padding:80px 20px;
}

/* Container */
.DriveHer-page-the-challenge-women-face-section-container{
width:1200px;
max-width:92%;
margin:auto;
text-align:center;
}

/* Grid */
.DriveHer-page-the-challenge-women-face-section-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}


/* Card */

.DriveHer-page-the-challenge-women-face-section-card{
background:#fbc8a1;
padding:60px 35px 20px;
border-radius:20px;
text-align:left;
position:relative;
transition:0.3s;
}

.DriveHer-page-the-challenge-women-face-section-card:hover{
transform:translateY(-6px);
}

/* Icon */
.DriveHer-page-the-challenge-women-face-section-icon{
position:absolute;
top:-30px;
left:35px;
/*background:linear-gradient(135deg,#ff7a18,#ff3d00);*/   /* IMPORTANT */
background:#e84f15;
width:70px;
height:70px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
}

.DriveHer-page-the-challenge-women-face-section-icon img{
width:60px;
}

/* Text */
.DriveHer-page-the-challenge-women-face-section-card h3{
font-size:24px;
margin-bottom:10px;
color:#233f78;
}

.DriveHer-page-the-challenge-women-face-section-card p{
font-size:16px;
line-height:1.6;
margin-bottom:20px;
color:#222;
}

/* Divider */
.DriveHer-page-the-challenge-women-face-section-divider{
height:2px;
background:#f35a14;
width:100%;
margin-bottom:10px;
}

/* Stats */
.DriveHer-page-the-challenge-women-face-section-card h4{
font-size:34px;
margin:0;
}

.DriveHer-page-the-challenge-women-face-section-card span{
font-size:15px;
color:#333;
}

/* ======================== */
/* Responsive */
/* ======================== */
@media(max-width:992px){
.DriveHer-page-the-challenge-women-face-section-grid{
grid-template-columns:1fr;
}
.DriveHer-page-the-challenge-women-face-section-title{
font-size:36px;
}
}


@media(max-width:600px){

.DriveHer-page-the-challenge-women-face-section-main{

padding:80px 20px;

}

.DriveHer-page-the-challenge-women-face-section-title{

font-size:30px;

}

.DriveHer-page-the-challenge-women-face-section-description{

font-size:16px;

}

}



/* Main Section */
.DriveHer-page-Opportunity-section-below-strip-classname {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* Container */
.DriveHer-page-Opportunity-section-below-strip-container {
    width: 100%;
    max-width: 1200px;
    background: linear-gradient(90deg, #ff5a1f, #ff3c00);
    border-radius: 12px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Icon Circle */
.DriveHer-page-Opportunity-section-below-strip-icon {
    min-width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.DriveHer-page-Opportunity-section-below-strip-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Text */
.DriveHer-page-Opportunity-section-below-strip-text {
    flex: 1;
}

.DriveHer-page-Opportunity-section-below-strip-text p {
    color: #fff;
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
    font-weight: 500;
    width:750px;
}

/* Button */
.DriveHer-page-Opportunity-section-below-strip-btn a {
    background: #f4c95d;
    color: #000;
    padding: 10px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 21px;
    display: inline-block;
    transition: all 0.3s ease;
}

.DriveHer-page-Opportunity-section-below-strip-btn a:hover {
    background: #e5b94f;
}

/* =========================
   Responsive Design
========================= */
@media (max-width: 992px) {
    .DriveHer-page-Opportunity-section-below-strip-container {
        flex-wrap: wrap;
        text-align: center;
    }

    .DriveHer-page-Opportunity-section-below-strip-icon {
        margin: 0 auto;
    }

    .DriveHer-page-Opportunity-section-below-strip-text {
        width: 100%;
    }

    .DriveHer-page-Opportunity-section-below-strip-btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .DriveHer-page-Opportunity-section-below-strip-container {
        padding: 16px;
    }

    .DriveHer-page-Opportunity-section-below-strip-text p {
        font-size: 14px;
    }

    .DriveHer-page-Opportunity-section-below-strip-btn a {
        width: 100%;
        text-align: center;
    }
}



/***************************************** DriveHer Page - Skill Development Section *************************************************************************************/
/* Section */
.DriveHer-page-skill-development-section-below-strip-classname {
    padding: 60px 20px;
}

/* Container */
.DriveHer-page-skill-development-section-below-strip-container {
    max-width: 1300px;
    margin: auto;
}

/* Heading */
.DriveHer-page-skill-development-section-below-strip-heading {
    text-align: center;
    margin-bottom: 40px;
}

/* Content Layout */
.DriveHer-page-skill-development-section-below-strip-content {
    display: flex;
    gap: 30px;
    /*align-items: center;*/
}

/* Image */
.DriveHer-page-skill-development-section-below-strip-image {
    flex: 1;
}

.DriveHer-page-skill-development-section-below-strip-image img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Cards */
.DriveHer-page-skill-development-section-below-strip-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Card */
.DriveHer-page-skill-development-section-below-strip-card {
    background: #f4c29a;
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Text */
.DriveHer-page-skill-development-section-card-text{
    width:500px;
}

.DriveHer-page-skill-development-section-card-text h3 {
    margin: 0 0 7px;
    font-size: 23px;
    color: #213164;
    font-weight: 700;
}

.DriveHer-page-skill-development-section-card-text p {
    margin: 0;
    font-size: 17px;
    color: #333;
}

/* Badge */
.DriveHer-page-skill-development-section-card-badge {
    background: #fff;
    border-radius: 10px;
    padding: 5px 10px;
    text-align: center;
    min-width: 90px;
}

.DriveHer-page-skill-development-section-card-badge strong {
    font-size: 40px;
    display: block;
}

.DriveHer-page-skill-development-section-card-badge span {
    font-size: 16px;
}

/* Button */
.DriveHer-page-skill-development-section-below-strip-btn a {
    background: #f0511e;
    color: #fff;
    padding: 7px 50px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 22px;
    display: inline-block;
    transition: 0.3s;
}

.DriveHer-page-skill-development-section-below-strip-btn a:hover {
    background: #eb3900;
}

/* =========================
   Responsive
========================= */
@media (max-width: 992px) {
    .DriveHer-page-skill-development-section-below-strip-content {
        flex-direction: column;
    }

    .DriveHer-page-skill-development-section-below-strip-image,
    .DriveHer-page-skill-development-section-below-strip-cards {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .DriveHer-page-skill-development-section-below-strip-heading h2 {
        font-size: 26px;
    }

    .DriveHer-page-skill-development-section-below-strip-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .DriveHer-page-skill-development-section-card-badge {
        align-self: flex-end;
    }
}








/******************************************************Environment_esg_section**************************************************************************/

.Environment_esg_section{
padding:80px 20px;
background:#ffffff;
}

.Environment_esg_container{
max-width:1200px;
margin:auto;
text-align:center;
}

/* top */

.Environment_esg_kicker{
font-size:14px;
margin-bottom:8px;
display:block;
}

.Environment_esg_title{
font-size:38px;
font-weight:700;
color:#283b63;
}

.Environment_esg_desc{
max-width:720px;
margin:10px auto 60px;
color:#444;
}

/* ESG grid */

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

.Environment_esg_icon{
/*width:70px;*/
/*height:70px;*/
/*margin:auto;*/
/*background:#0f7a3a;*/
/*border-radius:14px;*/
/*display:flex;*/
/*align-items:center;*/
/*justify-content:center;*/
margin-bottom:15px;
}

.Environment_esg_icon img{
width:16%;
}

.Environment_esg_item h3{
color:#283b63;
margin-bottom:10px;
font-size: 30px;
}

.Environment_esg_item p{
font-size:18px;
line-height:1.6;
}

/* SDG title */

.Environment_esg_sdg_title{
margin:60px 0 30px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-size:20px;
font-weight:700;
color:#1c96d1;
}

.Environment_esg_sdg_title img{
height:30px;
}

/* SDG cards */

/*.Environment_sdg_cards{*/
/*display:grid;*/
/*grid-template-columns:repeat(4,1fr);*/
/*gap:25px;*/
/*margin-top:30px;*/
/*}*/

.Environment_sdg_cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0px;
margin-top:30px;
align-items:center;
}

.sdg_card_item{
width:91%;
}

.Sustainable_Development_Goals_cardsss{
width:100%;
height:auto;
display:block;
/*margin: 0 auto;*/
}

.Environment_sdg_icon{
width:50px;
height:50px;
background:white;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:15px;
}

.Environment_sdg_icon img{
width:28px;
}

.Environment_sdg_tag{
position:absolute;
top:15px;
right:20px;
font-size:14px;
font-weight:600;
}

.Environment_sdg_card h4{
font-size:20px;
margin-bottom:10px;
}

.Environment_sdg_card p{
font-size:14px;
line-height:1.5;
}

/* colors */

.sdg13{background:#4f7d41;}
.sdg15{background:#3aa74a;}
.sdg17{background:#243e69;}


/* TABLET */

@media(max-width:1024px){

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

.Environment_sdg_cards{
grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: 20px 0;
}

}


/* MOBILE */

@media(max-width:640px){

.Environment_sdg_cards{
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 0;
}

.Sustainable_Development_Goals_title_eduction{
    margin: 0 auto 30px;
}

.Sustainable_Development_Goals_title_eduction img{
    width: 100%;
    height: auto;
}

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

/*.Environment_sdg_cards{*/
/*grid-template-columns:1fr;*/
/*}*/

.Environment_esg_title{
font-size:28px;
}

}


/********************************************home_esg_alignment_section***********************************************************/

.home_esg_alignment_section{
padding:80px 20px;
background:#ffffff;
}

.home_esg_alignment_container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
gap:60px;
}

/* LEFT */

.home_esg_alignment_left{
flex:1;
}

.home_esg_alignment_subtitle{
font-size: 22px;
font-weight:600;
color:#000;
}

.home_esg_alignment_title{
font-size:42px;
font-weight:700;
color: #243c7c;
margin: 10px 0;
word-spacing: 2px;
letter-spacing: 1px;
}

.home_esg_alignment_desc{
font-size: 20px;
line-height:1.3;
color:#333;
max-width:500px;
}

.home_esg_alignment_btn{
display:inline-block;
margin-top:20px;
background:#2e3b64;
color:#fff;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-size: 18px;
font-weight: 600;
}

/* RIGHT */

.home_esg_alignment_right{
flex:1.3;
text-align: center;
}

.home_sdg_heading{
display:flex;
align-items:center;
gap:10px;
color:#1992c5;
font-size:22px;
margin-bottom:20px;
}

.home_sdg_heading img{
height:30px;
}

/* GRID */

.home_sdg_cards_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.home_sdg_card{
width:100%;
height:auto;
display:block;
}

/* TABLET */

@media (max-width:1024px){

.home_esg_alignment_container{
flex-direction:column;
text-align:center;
}

.home_esg_alignment_title {
    font-size: 30px;
}

.home_esg_alignment_desc{
margin:auto;
max-width: 950px;
}

.home_sdg_cards_grid{
grid-template-columns:repeat(4,1fr);
}

}

/* MOBILE */

@media (max-width:640px){

.home_esg_alignment_title{
font-size:30px;
}

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

}


/******************************************************************************************************************************************/
.EachOneTeachOne_esg_alignment_section{
/*padding:60px 20px;*/
background:#ffffff;
}

.EachOneTeachOne_esg_alignment_container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}

/* LEFT */

.EachOneTeachOne_esg_alignment_left{
flex:1;
}

.EachOneTeachOne_esg_alignment_subtitle{
font-size:14px;
font-weight:600;
letter-spacing:1px;
color:#000;
display:block;
margin-bottom:6px;
}

.EachOneTeachOne_esg_alignment_title{
font-size:40px;
font-weight:700;
color:#2e3b64;
margin-bottom:10px;
}

.EachOneTeachOne_esg_alignment_desc{
font-size:18px;
color:#333;
margin-bottom:20px;
}

/* SDG heading */

.EachOneTeachOne_sdg_heading{
display:flex;
align-items:center;
gap:10px;
color:#1992c5;
font-size:22px;
font-weight:700;
}

.EachOneTeachOne_sdg_heading img{
height:32px;
}

/* RIGHT CARDS */

.EachOneTeachOne_sdg_cards{
flex:1.2;
display:flex;
gap:20px;
justify-content:flex-end;
}

.EachOneTeachOne_sdg_card{
width: 26%;
height:auto;
}

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

@media(max-width:1024px){

.EachOneTeachOne_esg_alignment_container{
flex-direction:column;
text-align:center;
}

.EachOneTeachOne_sdg_cards{
justify-content:center;
margin-top:20px;
}

.EachOneTeachOne_esg_alignment_section{
    padding: 0px 20px;
}
}

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

@media(max-width:640px){

.EachOneTeachOne_esg_alignment_title{
font-size:30px;
}

.EachOneTeachOne_sdg_cards{
flex-wrap:wrap;
justify-content:center;
margin-top:0px;
}

.EachOneTeachOne_sdg_card{
width:100px;
}

}

/**********************************************************************case study page*******************************************************/

.case_study_main_banner{
padding:120px 20px 80px;
background:#ffffff;
text-align:center;
}

.case_study_main_banner_container{
max-width:1200px;
margin:auto;
}

.case_study_main_banner_desc{
margin-bottom:60px;
}

.case_study_main_banner_stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-bottom:30px;
}

.case_study_main_banner_card{
background:#e8f0f9;
padding:25px 20px;
border-radius:10px;
position:relative;
}

.case_study_main_banner_icon{
position:absolute;
top:-22px;
left:50%;
transform:translateX(-50%);
/*background:#3e7a44;*/
width:50px;
height:50px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
}

.case_study_main_banner_icon img{
width:56px;
}

.case_study_main_banner_number{
font-size:44px;
color:#2e3f73;
margin-top:10px;
}

.case_study_main_banner_label{
font-size:16px;
color:#333;
}

.case_study_main_banner_buttons{
display:flex;
justify-content:center;
gap:20px;
}

.case_study_main_banner_btn_support{
background:#f9dd76;
color:#000;
padding:16px 28px;
border-radius:10px;
font-weight:700;
text-decoration:none;
font-size:20px;
}

.case_study_main_banner_btn_involve{
background:#2b675e;
color:#fff;
padding:16px 28px;
border-radius:10px;
font-weight:700;
text-decoration:none;
font-size:20px;
}


/* TABLET */

@media(max-width:1024px){

.case_study_main_banner_title{
font-size:48px;
}

.case_study_main_banner_desc{
font-size:18px;
}

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

}


/* MOBILE */

@media(max-width:640px){

.case_study_main_banner_title{
font-size:36px;
}

.case_study_main_banner_desc{
font-size:16px;
}

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

.case_study_main_banner_buttons{
flex-direction:column;
}

.case_study_main_banner_btn_support,
.case_study_main_banner_btn_involve{
width:100%;
}

}


/*******************************************case study for 4es*****************************************************************/

.case-study{
    padding-top: 80px;
}

.case-study-section-slider-all{
    text-align:center;
}

.tabs{
display:flex;
gap:20px;
justify-content:center;
margin: 35px auto;
}

.tab {
  padding: 10px 25px;
  border: none;
  cursor: pointer;
  background: #eee;
  color: #333;
  font-size: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tab.active {
  font-size: 20px;
  font-weight: 600;
  padding: 1px 44px 0px 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  border-radius: 11px;

  /* Highlight effect */
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.buttn{
     color: #478341;
  background-color: #d1eae3;
        font-size: 20px;
    font-weight: 600;
  padding: 1px 44px 0px 45px;
   display:flex;
align-items:center;
justify-content:space-between;
gap:42px;
border-radius: 11px;


}

.bttn2{
   color: #632c87;
  background-color: #d1c0db;
        font-size: 20px;
    font-weight: 600;
   padding: 1px 44px 0px 45px;
   display:flex;
align-items:center;
justify-content:space-between;
gap:42px;
border-radius: 11px;

}

.bttn3{
  color: #3876bb;
  background-color: #c4d6eb;
        font-size: 20px;
    font-weight: 600;
   padding: 1px 44px 0px 45px;
  display:flex;
align-items:center;
justify-content:space-between;
gap:42px;
border-radius: 11px;


}

.bttn4{
     color: #e66f25;
  background-color: #f8d4be;
        font-size: 20px;
    font-weight: 600;
 padding: 1px 44px 0px 45px;
   display:flex;
align-items:center;
justify-content:space-between;
gap:42px;
border-radius: 11px;

}


.buttn img{
width:18%;
height:auto;
margin-left:8px;
}

.bttn2 img{
width:18%;
height:auto;
margin-left:8px;
}

.bttn3 img{
width:18%;
height:auto;
margin-left:8px;
}

.bttn4 img{
width:18%;
height:auto;
margin-left:8px;
}
.tab-content{
display:none;
}

.tab-content.active{
display:block;
}

.section{
padding:80px 40px;
text-align:center;
color:white;
}

/* ENVIRONMENT (1st tab) */
.tab.buttn.active {
  color: #478341;
  background-color: #d1eae3;
}

/* EMPOWERMENT */
.tab.bttn2.active {
  color: #632c87;
  background-color: #d1c0db;
}

/* EDUCATION */
.tab.bttn3.active {
  color: #3876bb;
  background-color: #c4d6eb;
}

/* EMPLOYMENT */
.tab.bttn4.active {
  color: #e66f25;
  background-color: #f8d4be;
}
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.card{
background:white;
border-radius:10px;
overflow:hidden;
}

.card img{
width:100%;
}

.see-more{
margin-top:30px;
padding:12px 40px;
font-weight: 600;
    font-size: 18px;
background:#f5c65d;
border:none;
border-radius:8px;
cursor:pointer;
}

.case-header{
display:flex;
justify-content:space-between;
align-items:center;
/*padding:40px 60px;*/
color:white;
position:relative;
overflow:hidden;

}

/*.environment-header{*/
/*background:#0aa04f;*/
/*}*/

/* Watermark icon */
.environment-header::after{
content:"";
position:absolute;
right:-80px;
top:-40px;
width:320px;
height:320px;
background:url('https://ytds.org/ytds_2/asset/images/Environment.png') no-repeat center;
background-size:contain;
opacity:0.08;
}

.case-header-left h2{
font-size:64px;
font-weight:700;
letter-spacing:2px;
margin:0;
opacity:0.6;
}

.case-header-right{
max-width:520px;
}

.case-header-right p{
font-size:18px;
line-height:1.6;
margin:0;
}









/**************************************************************************************************************************************************/
/************************************** Donation Page *********************************************************************************************/
/**************************************************************************************************************************************************/


/**************************************** Donation Page - HERO SECTION *************************************************************************/
.Donation-page-hero-section-classname-hero {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    padding:40px 0;
}

/* BACKGROUND IMAGE */
.Donation-page-hero-section-classname-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 0;
}

/* CONTENT */
.Donation-page-hero-section-classname-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    padding: 70px 20px 50px;
}

/* BADGE */
.Donation-page-hero-section-classname-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 18px;
    margin-bottom: 20px;
}

/* HEADING */
.Donation-page-hero-section-classname-content h1 {
    font-size: 52px;
    font-weight: 700;
    color: #f5d36c;
    margin-bottom: 10px;
}

/* SUBTEXT */
.Donation-page-hero-section-classname-subtext {
    font-size: 22px;
    line-height: 1.6;
    max-width: 950px;
    margin: 0 auto 20px;
}

/* STATS */
.Donation-page-hero-section-classname-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.Donation-page-hero-section-classname-stats .Donation-page-hero-section-classname-stat h2 {
    font-size: 46px;
    color: #f5d36c;
    margin-bottom: 5px;
}

.Donation-page-hero-section-classname-stats .Donation-page-hero-section-classname-stat p {
    font-size: 22px;
    opacity: 0.9;
}

/* BUTTONS */
.Donation-page-hero-section-classname-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.Donation-page-hero-section-classname-btn {
    padding: 10px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    width: 320px;
    text-align: center;
    font-size:22px;
    transition: 0.3s ease;
}

/* PRIMARY */
.Donation-page-hero-section-classname-btn.primary {
    background: #f5d36c;
    color: #0b1e46;
}

.Donation-page-hero-section-classname-btn.primary:hover {
    background: #e6c45a;
}

/* SECONDARY */
.Donation-page-hero-section-classname-btn.secondary {
    border: 2px solid #f5d36c;
    color: #fff;
}

.Donation-page-hero-section-classname-btn.secondary:hover {
    background: #f5d36c;
    color: #0b1e46;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 1024px) {
    .Donation-page-hero-section-classname-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .Donation-page-hero-section-classname-content h1 {
        font-size: 38px;
    }
    .Donation-page-hero-section-classname-stat p{
        font-size:20px;
    }
    .Donation-page-hero-section-classname-stat h2{
        font-size:34px;
    }
}

@media (max-width: 768px) {
    .Donation-page-hero-section-classname-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .Donation-page-hero-section-classname-content h1 {
        font-size: 30px;
    }

    .Donation-page-hero-section-classname-subtext {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .Donation-page-hero-section-classname-stats {
        grid-template-columns: 1fr;
    }

    .Donation-page-hero-section-classname-content h1 {
        font-size: 24px;
    }
}



/************************************* Donation Page - Why Your Support Matters *****************************************************************/
.Donation-page-why-your-support-matters-section-classname-wrapper {
    padding: 80px 20px;
}

.Donation-page-why-your-support-matters-section-classname-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
}

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

.Donation-page-why-your-support-matters-section-classname-left h2 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 10px;
}

.Donation-page-why-your-support-matters-section-classname-left h3 {
    font-size: 46px;
    color: #2c3e73;
    margin-bottom: 15px;
    line-height: 1.2;
    word-spacing: 2px;
    letter-spacing: 1px;
}

.Donation-page-why-your-support-matters-section-classname-left p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* HIGHLIGHT BOX */
.Donation-page-why-your-support-matters-section-classname-highlight {
    background: #dbe3ec;
    padding: 25px;
    border-radius: 12px;
    margin-top: 30px;
    transition: all 0.4s ease;
}

.Donation-page-why-your-support-matters-section-classname-highlight strong {
    display: block;
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 0px;
}

.Donation-page-why-your-support-matters-section-classname-highlight span {
    font-size: 16px;
}

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

.Donation-page-why-your-support-matters-section-classname-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CARD BASE */
.Donation-page-why-your-support-matters-section-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 30px;
    border-radius: 16px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}

/* Hover */
.Donation-page-why-your-support-matters-section-card:hover {
    transform: translateY(-3px);
}

/* ACTIVE ZOOM EFFECT */
.Donation-page-why-your-support-matters-section-card.active {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    z-index: 2;
}

/* TEXT */
.Donation-page-why-your-support-matters-section-card small {
    font-size: 15px;
    color: black;
    font-weight: 500;
}

.Donation-page-why-your-support-matters-section-card h3 {
    font-size: 30px;
    margin: 2px 0;
    font-weight: 700;
}

.Donation-page-why-your-support-matters-section-card p {
    font-size: 16px;
    color: black;
}

/* ICON */
.Donation-page-why-your-support-matters-section-card img {
    width: 65px;
    height: auto;
}

/* ================= CARD COLORS ================= */

.Donation-page-why-your-support-matters-section-card.green { background: #dfeee4; }
.Donation-page-why-your-support-matters-section-card.green h3 { color: #2e7d32; }

.Donation-page-why-your-support-matters-section-card.purple { background: #e9e1f0; }
.Donation-page-why-your-support-matters-section-card.purple h3 { color: #6a1b9a; }

.Donation-page-why-your-support-matters-section-card.blue { background: #e2eaf3; }
.Donation-page-why-your-support-matters-section-card.blue h3 { color: #2f5f9c; }

.Donation-page-why-your-support-matters-section-card.orange { background: #f6e2d3; }
.Donation-page-why-your-support-matters-section-card.orange h3 { color: #e06a1f; }

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {
    .Donation-page-why-your-support-matters-section-classname-container {
        grid-template-columns: 1fr;
    }
}





/**************************************** SUPPORT A CAUSE *************************************************************************/
.Donation-page-support-a-cause-section-classname-wrapper {
    padding: 80px 20px;
}

/* HEADER */
.Donation-page-support-a-cause-section-classname-header {
    text-align: center;
    margin-bottom: 50px;
}

/* GRID */
.Donation-page-support-a-cause-section-classname-grid {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 65px 25px;
}

/* CARD */
.Donation-page-support-a-cause-section-classname-card {
    position: relative;
    padding: 30px 35px 20px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    opacity: 0;
    transform: translateY(40px);
    transition: all .8s cubic-bezier(0.22,1,0.36,1);
}

.Donation-page-support-a-cause-section-classname-card.active {
    opacity: 1;
    transform: translateY(0);
}

.Donation-page-support-a-cause-section-classname-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* ICON */
.Donation-page-support-a-cause-section-classname-icon-wrap {
    position: absolute;
    top: -25px;
    left: 35px;
    width: 65px;
    height: 65px;
    border-radius: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Donation-page-support-a-cause-section-classname-icon-wrap img {
    width: 65px;
}

/* TAG */
.Donation-page-support-a-cause-section-classname-tag {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 12px;
    padding: 5px 20px;
    border-radius: 5px;
    color:white;
    background: rgba(0,0,0,0.08);
    font-weight: 500;
}

/* TEXT */
.Donation-page-support-a-cause-section-classname-card h3 {
    margin-top: 30px;
    font-size: 25px;
    font-weight: 700;
    color: #213164;
}

.Donation-page-support-a-cause-section-classname-card p {
    font-size: 17px;
    color: #000000;
    margin: 10px 0 25px;
    line-height: 1.3;
    height: 80px;
}

/* PROGRESS */
.Donation-page-support-a-cause-section-classname-progress-wrap {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-bottom: 6px;
    color: black;
}

.Donation-page-support-a-cause-section-classname-progress-bar {
    height: 10px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.Donation-page-support-a-cause-section-classname-progress-fill {
    height: 100%;
    width: 0;
    background: #1e2a55;
    border-radius: 10px;
    transition: width 1.5s ease;
}

/* BUTTON */
.Donation-page-support-a-cause-section-classname-btn {
    display: block;
    text-align: center;
    margin-top: 15px;
    padding: 10px;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
}

/* COLORS */
.green { background: #d1eae3; }
.green .Donation-page-support-a-cause-section-classname-icon-wrap { background: #2e7d32; }
.green .Donation-page-support-a-cause-section-classname-btn { background: #2e7d32; }

.purple { background: #e8deef; }
.purple .Donation-page-support-a-cause-section-classname-icon-wrap { background: #6a1b9a; }
.purple .Donation-page-support-a-cause-section-classname-btn { background: #6a1b9a; }

.red { background: #fee6e6; }
.red .Donation-page-support-a-cause-section-classname-icon-wrap { background: #ef2b2d; }
.red .Donation-page-support-a-cause-section-classname-btn { background: #ef2b2d; }

.blue { background: #dde6f1; }
.blue .Donation-page-support-a-cause-section-classname-icon-wrap { background: #2f5f9c; }
.blue .Donation-page-support-a-cause-section-classname-btn { background: #2f5f9c; }

.orange { background: #f4dfcf; }
.orange .Donation-page-support-a-cause-section-classname-icon-wrap { background: #e06a1f; }
.orange .Donation-page-support-a-cause-section-classname-btn { background: #e06a1f; }

/* STAGGER ANIMATION */
.Donation-page-support-a-cause-section-classname-card:nth-child(1){transition-delay:.1s}
.Donation-page-support-a-cause-section-classname-card:nth-child(2){transition-delay:.2s}
.Donation-page-support-a-cause-section-classname-card:nth-child(3){transition-delay:.3s}
.Donation-page-support-a-cause-section-classname-card:nth-child(4){transition-delay:.1s}
.Donation-page-support-a-cause-section-classname-card:nth-child(5){transition-delay:.2s}
.Donation-page-support-a-cause-section-classname-card:nth-child(6){transition-delay:.3s}
.Donation-page-support-a-cause-section-classname-card:nth-child(7){transition-delay:.1s}
.Donation-page-support-a-cause-section-classname-card:nth-child(8){transition-delay:.2s}
.Donation-page-support-a-cause-section-classname-card:nth-child(9){transition-delay:.3s}

/* RESPONSIVE */
@media(max-width:1024px){
    .Donation-page-support-a-cause-section-classname-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:750px){
    .Donation-page-support-a-cause-section-classname-grid{
        grid-template-columns: 1fr;
    }
}




/************************************* Donation Page - Make A Difference Today ***************************************************************************/
/**************************************** Donation Page - Make A Difference *************************************************************************/

.Donation-page-make-a-difference-today-section-classname-wrapper {
    background: #2f4a7c;
    padding: 80px 20px;
    text-align: center;
    /*font-family: 'Inter', sans-serif;*/
    color: #fff;
}

/* HEADER */
.Donation-page-make-a-difference-today-section-classname-header-subtitle {
    color: #fff;
}

.Donation-page-make-a-difference-today-section-classname-header-title {
    color: #ffd86b;
}

.Donation-page-make-a-difference-today-section-classname-header-intro {
    color: #fff;
    margin-bottom: 0px;
}

/* CARD */
.Donation-page-make-a-difference-today-section-classname-card {
    background: #fff;
    color: #000;
    max-width: 1000px;
    margin: 0px auto 50px;
    padding: 30px 50px;
    border-radius: 18px;
    text-align: left;
    opacity: 1;
    transform: translateY(40px);
    transition: all .8s ease;
}

.Donation-page-make-a-difference-today-section-classname-card.active {
    opacity: 1;
    transform: translateY(0);
}

.Donation-page-make-a-difference-today-section-classname-card label {
    display: block;
    margin: 25px 0 15px;
    font-size: 20px;
    font-weight: 600;
}

.Donation-page-make-a-difference-today-section-classname-card label span{
  color:red;
}

/* SELECT */
.Donation-page-make-a-difference-today-section-classname-select {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #ddd;
    font-size: 15px;
}

.Donation-page-make-a-difference-today-section-classname-select option{
    padding: 15px;
    font-size: 18px;
}

/* AMOUNT */
.Donation-page-make-a-difference-today-section-classname-amounts {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.Donation-page-amount {
    position: relative;
    padding: 15px 35px;
    border-radius: 10px;
    border: 2px solid #ddd;
    cursor: pointer;
    background: #f5f5f5;
    font-size: 18px;
    font-weight: 600;
}

.Donation-page-amount.active {
    border: 2px solid #ff6b00;
    background: #fff3ea;
    color: #ff6b00;
}

.Donation-page-amount {
    position: relative;
}

.tick {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ff6b00;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.25);
}

.Donation-page-amount.active .tick {
    display: flex;
}

/* INPUT */
.Donation-page-make-a-difference-today-section-classname-input {
    width: 100%;
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
    border: 2px solid #ddd;
    font-size: 15px;
}

/* INFO */
.Donation-page-make-a-difference-today-section-classname-info {
    background: #f7e9dd;
    padding: 20px 25px;
    margin-top: 15px;
    border-radius: 10px;
    font-size: 15px;
}

/* TOGGLE */
.Donation-page-make-a-difference-today-section-classname-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: 22px;
    font-weight: 600;
}

.Donation-page-make-a-difference-today-section-classname-toggle label {
    display: block;
    margin: 10px 0;
    font-size: 20px;
}

/* SWITCH */
.Donation-page-switch {
    position: relative;
    width: 40px;
    height: 20px;
}

.Donation-page-switch input {
    display: none;
}

.Donation-page-slider {
    background: #ccc;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.Donation-page-slider:before {
    content: "";
    width: 16px;
    height: 16px;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: 0.3s;
}

.Donation-page-switch input:checked + .Donation-page-slider {
    background: #ff6b00;
}

.Donation-page-switch input:checked + .Donation-page-slider:before {
    transform: translateX(20px);
}

.Donation-page-hide-form {
    display: none;
}

/* DETAILS */
.Donation-page-make-a-difference-today-section-classname-row {
    display: flex;
    gap: 10px;
}

.Donation-page-make-a-difference-today-section-classname-details input {
    width: 100%;
    padding: 20px;
    margin-top: 15px;
    border-radius: 10px;
    border: 2px solid #ddd;
    font-size: 15px;
}

/* BUTTON */
.Donation-page-make-a-difference-today-section-classname-btn {
    width: 100%;
    margin-top: 30px;
    padding: 14px;
    background: #ff6b00;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

/******************************** CUSTOM DROPDOWN ********************************/

.Donation-page-custom-dropdown {
    position: relative;
    width: 100%;
}

/* SELECTED */
.Donation-page-custom-dropdown-selected {
    padding: 18px 20px;
    border: 2px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    font-size: 16px;

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

/* ARROW */
.Donation-page-dropdown-arrow {
    font-size: 14px;
    transition: 0.3s;
}

/* ROTATE ON OPEN */
.Donation-page-custom-dropdown.open .Donation-page-dropdown-arrow {
    transform: rotate(180deg);
}

/* OPTIONS BOX */
.Donation-page-custom-dropdown-options {
    position: absolute;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    margin-top: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: none;
    z-index: 999;

    max-height: 260px; /* 👈 SHOW ONLY ~5 OPTIONS */
    overflow-y: auto;
}

/* SCROLLBAR */
.Donation-page-custom-dropdown-options::-webkit-scrollbar {
    width: 6px;
}
.Donation-page-custom-dropdown-options::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* OPTION */
.Donation-page-custom-dropdown-option {
    padding: 14px 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.Donation-page-custom-dropdown-option:hover {
    background: #f5f5f5;
}

.Donation-page-custom-dropdown-option strong {
    font-size: 15px;
}

.Donation-page-custom-dropdown-option span {
    font-size: 13px;
    margin-top: 3px;
}

/* COLORS */
.Donation-page-custom-dropdown-green { color: #28a745; }
.Donation-page-custom-dropdown-orange { color: #ff7a00; }
.Donation-page-custom-dropdown-red { color: #e63946; }
.Donation-page-custom-dropdown-blue { color: #1d4ed8; }
.Donation-page-custom-dropdown-purple { color: #7b2cbf; }

/******************************** TRUST SECTION ********************************/

.Donation-page-make-a-difference-today-section-classname-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 15px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #666;
}

/* EACH ITEM */
.Donation-page-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ICON */
.Donation-page-trust-icon {
    font-size: 14px;
}

/* RESPONSIVE */
@media(max-width:768px){
    .Donation-page-make-a-difference-today-section-classname-trust {
        gap: 15px;
        font-size: 12px;
    }
}

@media(max-width:480px){
    .Donation-page-make-a-difference-today-section-classname-trust {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* RESPONSIVE */
@media(max-width:768px){
    .Donation-page-custom-dropdown-selected {
        padding: 14px;
        font-size: 14px;
    }

    .Donation-page-custom-dropdown-option strong {
        font-size: 14px;
    }
}

@media(max-width:480px){
    .Donation-page-custom-dropdown-selected {
        padding: 12px;
        font-size: 13px;
    }
}

/* RESPONSIVE */
@media(max-width:600px){
    .Donation-page-make-a-difference-today-section-classname-row {
        flex-direction: column;
    }
}




/*********************************** Donation Page - Where Your Money Goes *****************************************************************************************/
.Donation-page-where-your-money-goes-section {
  padding: 80px 20px;
}

.Donation-page-where-your-money-goes-section-container {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.Donation-page-where-your-money-goes-section-header {
  text-align: center;
  margin-bottom: 50px;
}

/* GRID */
.Donation-page-where-your-money-goes-section-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
}

/* LEFT CARD */
.Donation-page-where-your-money-goes-section-card {
  background: #e8f0f9;
  padding: 35px 40px;
  border-radius: 20px;
}

/* PROGRESS BAR (OVERLAY STYLE) */
.Donation-page-where-your-money-goes-section-progress {
  position: relative;
  height: 30px;
  border-radius: 10px;
  overflow: hidden;
  background: #dde5ef;
  margin-bottom: 30px;
}

.Donation-page-where-your-money-goes-section-progress-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 10px;
  transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* COLORS */
.Donation-page-where-your-money-goes-section-strip-orange { background: #f97015; z-index: 1; }
.Donation-page-where-your-money-goes-section-strip-blue   { background: #3876bb; z-index: 2; }
.Donation-page-where-your-money-goes-section-strip-purple { background: #632c87; z-index: 3; }
.Donation-page-where-your-money-goes-section-strip-green  { background: #478341; z-index: 4; }

.Donation-page-where-your-money-goes-section-orange { color: #f97015; }
.Donation-page-where-your-money-goes-section-blue   { color: #3876bb; }
.Donation-page-where-your-money-goes-section-purple { color: #632c87; }
.Donation-page-where-your-money-goes-section-green  { color: #478341; }

/* ITEMS */
.Donation-page-where-your-money-goes-section-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 15px;
  margin-bottom: 25px;
}

/* DOT */
.Donation-page-where-your-money-goes-section-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 10px;
  margin-right: -10px;
  opacity: 1;
}

.Donation-page-where-your-money-goes-section-content{
  margin-left: -5px;
}

/* TEXT */
.Donation-page-where-your-money-goes-section-item h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #213164;
}

.Donation-page-where-your-money-goes-section-item p {
  margin: 5px 0 0;
  font-size: 15px;
  color: #101112;
}

/* BADGE */
.Donation-page-where-your-money-goes-section-badge {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  width: 60px;
  height: 40px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

/* RIGHT SIDE */
.Donation-page-where-your-money-goes-section-right {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.Donation-page-where-your-money-goes-section-info-card {
  background: #e8f0f9;
  padding: 30px 25px;
  border-radius: 15px;
}

.Donation-page-where-your-money-goes-section-info-card-h3 {
  font-size: 48px;
  color: #243b6b;
}

.Donation-page-where-your-money-goes-section-info-card h3 {
  color: #243b6b;
  font-size: 24px;
  font-weight: 700;
}

.Donation-page-where-your-money-goes-section-info-card p{
  margin-top: 5px;
  font-size: 16px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .Donation-page-where-your-money-goes-section-grid {
    grid-template-columns: 1.2fr 1fr;
  }

  .Donation-page-where-your-money-goes-section-header h2 {
    font-size: 30px;
  }
}
@media (max-width: 768px) {
  .Donation-page-where-your-money-goes-section-grid {
    grid-template-columns: 1fr;
  }
}




/**************************** Donation Page - Trusted and Recognized **************************************************************************/
/**************************** Donation Page - Trusted and Recognized ****************************/

/* GLOBAL */
/** {*/
/*  box-sizing: border-box;*/
/*}*/

/* SECTION */
.Donation-page-trusted-and-recognized-section {
  padding: 80px 20px;
  background: #edeff2;
}

/* CONTAINER */
.Donation-page-trusted-and-recognized-section-container {
  /* max-width: 1200px; */
  margin: auto;
}

/* HEADER */
.Donation-page-trusted-and-recognized-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.Donation-page-trusted-and-recognized-section-subtitle {
  color: #000;
  font-size:25px;
  margin-bottom: 10px;
}

.Donation-page-trusted-and-recognized-section-header h2 {
  font-size: 45px;
    color: #243c7c;
    margin: 10px 0;
    font-weight: 700;
    word-spacing: 2px;
    letter-spacing: 1px;
}

.Donation-page-trusted-and-recognized-section-desc {
  font-size: 19px;
    color: #000;
    margin-bottom: 60px;

}

/* ===================== */
/* TOP CARDS */
/* ===================== */
.Donation-page-trusted-and-recognized-section-top-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 0 auto;
  margin-bottom: 60px;
  max-width: 1300px;
}

.Donation-page-trusted-and-recognized-section-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 18px;
  position: relative;
  /* POP-UP EFFECT */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Donation-page-trusted-and-recognized-section-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* TEXT */
.Donation-page-trusted-and-recognized-section-card h3 {
  font-size: 21px;
  color: #2c3f73;
  max-width: 75%;
  line-height: 1.3;
}

.Donation-page-trusted-and-recognized-section-card p {
  font-size: 16px;
  color: #5f6b7a;
  margin-top: 10px;
  line-height: 1.3;
}

/* ICON */
.Donation-page-trusted-and-recognized-section-icon {
  position: absolute;
  top: 15px;
  right: 18px;
  /*background: #2c3f73;*/
  border-radius: 14px;
  /*padding: 12px;*/
}

.Donation-page-trusted-and-recognized-section-icon img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* ===================== */
/* TESTIMONIALS */
/* ===================== */
.Donation-page-trusted-and-recognized-section-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0 auto;
  max-width: 1150px;
}

/* TESTIMONIAL CARD */
.Donation-page-trusted-and-recognized-section-testimonial-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);

  /* POP-UP EFFECT */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Donation-page-trusted-and-recognized-section-testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* QUOTE */
.Donation-page-trusted-and-recognized-section-quote {
  font-size: 50px;
  color: #2c3f73;
  opacity: 0.4;
}

/* TEXT */
.Donation-page-trusted-and-recognized-section-testimonial-card p {
  font-size: 15px;
  color: #2c3f73;
  margin: 0 0 15px 0;
  line-height: 1.6;
}

/* USER */
.Donation-page-trusted-and-recognized-section-user {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.Donation-page-trusted-and-recognized-section-avatar {
  width: 42px;
  height: 42px;
  background: #f97316;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-weight: 600;
  font-size: 14px;
}

.Donation-page-trusted-and-recognized-section-user h4 {
  margin: 0;
  font-size: 14px;
}

.Donation-page-trusted-and-recognized-section-user span {
  font-size: 12px;
  color: #6b7280;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

/* TABLET */
@media (max-width: 1024px) {

  .Donation-page-trusted-and-recognized-section-header h2 {
    font-size: 34px;
  }
  .Donation-page-trusted-and-recognized-section-top-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE */
@media (max-width: 768px) {

  .Donation-page-trusted-and-recognized-section {
    padding: 60px 15px;
  }

  .Donation-page-trusted-and-recognized-section-header h2 {
    font-size: 28px;
  }

  .Donation-page-trusted-and-recognized-section-desc {
    font-size: 14px;
  }

  .Donation-page-trusted-and-recognized-section-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }

  .Donation-page-trusted-and-recognized-section-card,
  .Donation-page-trusted-and-recognized-section-testimonial-card {
    padding: 22px;
  }

  .Donation-page-trusted-and-recognized-section-icon {
    padding: 10px;
  }

  .Donation-page-trusted-and-recognized-section-icon img {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 600px){
    .Donation-page-trusted-and-recognized-section-top-cards {
        grid-template-columns: 1fr;
    }
    .Donation-page-trusted-and-recognized-section-testimonials {
        grid-template-columns: 1fr;
    }
}


/*************************** Donation Page - Secure & Transparent ***********************************************************************/
/**************************** FIXED - Secure & Transparent ****************************/

/* SECTION */
.Donation-page-secure-and-transparent-section {
  padding: 90px 20px;
}

/* CONTAINER */
.Donation-page-secure-and-transparent-section-container {
  max-width: 1150px;
  margin: auto;
}

/* HEADER */
.Donation-page-secure-and-transparent-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.Donation-page-secure-and-transparent-section-subtitle {
  color: #000;
  font-size:25px;
  margin-bottom: 10px;
}

.Donation-page-secure-and-transparent-section-header h2 {
  font-size: 45px;
    color: #243c7c;
    margin: 10px 0;
    font-weight: 700;
    word-spacing: 2px;
    letter-spacing: 1px;
}

.Donation-page-secure-and-transparent-section-desc {
    font-size: 19px;
    color: #000;
    margin-bottom: 60px;
}

/* ===================== */
/* INFO CARDS */
/* ===================== */
.Donation-page-secure-and-transparent-section-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}

.Donation-page-secure-and-transparent-section-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #e8f0f9;
  padding: 20px 35px;
  border-radius: 15px
}

/* ICON */
.Donation-page-secure-and-transparent-section-card .icon {
  background: #2c3f73;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
}

.Donation-page-secure-and-transparent-section-card .icon img {
  width: 60px;
}

/* TEXT */
.Donation-page-secure-and-transparent-section-card h3 {
  font-size: 22px;
  font-weight: 600;
  color: #213164;
  margin-bottom: 5px;
}

.Donation-page-secure-and-transparent-section-card p {
  font-size: 17px;
  color: #101112;
  line-height: 1.3;
}

/* ===================== */
/* PAYMENT SECTION */
/* ===================== */

.Donation-page-secure-and-transparent-section-payments h3 {
  font-size: 22px;
  font-weight: 800;
  color: #2c3f73;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

.Donation-page-secure-and-transparent-section-payment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* PAYMENT CARD */
/* GRADIENT BORDER */
.Donation-page-secure-and-transparent-section-payment-card {
  position: relative;
  border-radius: 16px;
  padding: 20px 15px;

  background: 
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #7973b5, #494099) border-box;

  border: 2px solid transparent;

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

  transition: 0.3s ease;
}

/* HOVER (very subtle like design) */
.Donation-page-secure-and-transparent-section-payment-card:hover {
  transform: translateY(-5px);
}

/* IMAGE */
.Donation-page-secure-and-transparent-section-payment-card img {
  width: 42px;
}

/* TEXT */
.Donation-page-secure-and-transparent-section-payment-card h4 {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

.Donation-page-secure-and-transparent-section-payment-card p {
  font-size: 16px;
  color: #6b7280;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media (max-width: 1024px) {

  .Donation-page-secure-and-transparent-section-header h2 {
    font-size: 36px;
  }
}

@media (max-width: 768px) {

  .Donation-page-secure-and-transparent-section {
    padding: 70px 15px;
  }

  .Donation-page-secure-and-transparent-section-header h2 {
    font-size: 28px;
  }

  .Donation-page-secure-and-transparent-section-payment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .Donation-page-secure-and-transparent-section-card {
    padding: 18px;
  }
}

@media (max-width:600px) {
    .Donation-page-secure-and-transparent-section-cards {
        grid-template-columns: 1fr;
    }
      
    .Donation-page-secure-and-transparent-section-payment-grid {
        grid-template-columns: 1fr;
     }

}




/**************************** Donation Page - FAQ SECTION ****************************/

.Donation-page-all-doubts-answered-section-classname {
  background: #2f4c7c;
  padding: 80px 20px;
  /*font-family: 'Inter', sans-serif;*/
}

.Donation-page-all-doubts-answered-section-classname-container {
  max-width: 1100px;
  margin: auto;
}

/* HEADER */
.Donation-page-all-doubts-answered-section {
  text-align: center;
  margin-bottom: 50px;
}
.Donation-page-all-doubts-answered-section-classname-header {
  text-align: center;
  margin-bottom: 50px;
}

.Donation-page-all-doubts-answered-section-classname-subtitle {
  font-size: 22px;
    color: #fff;
}

.Donation-page-all-doubts-answered-section-classname-header h2 {
    font-size: 45px;
    margin: 10px 0;
    font-weight: 700;
    word-spacing: 2px;
    letter-spacing: 1px;
    color: #ffd86b;  color: #facc15;
    margin: 10px 0;
}

.Donation-page-all-doubts-answered-section-classname-desc {
  font-size: 19px;
    color: #fff;
    margin-bottom: 60px;
}

.Donation-page-all-doubts-answered-section-classname-desc a {
  color: #ffffff;
  text-decoration: underline;
}

/* FAQ */
.Donation-page-all-doubts-answered-section-classname-faq {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ITEM */
.Donation-page-all-doubts-answered-section-classname-item {
  background: #e8f0f9;
  border-radius: 20px;
  overflow: hidden;
}

/* QUESTION */
.Donation-page-all-doubts-answered-section-classname-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.Donation-page-all-doubts-answered-section-icon {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.Donation-page-all-doubts-answered-section-classname-item.active .icon {
  transform: rotate(180deg);
}

/* ANSWER */
.Donation-page-all-doubts-answered-section-classname-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 26px;
  background: #eef2f7;
  font-size: 17px;
  line-height: 1.5;
  color: #374151;
  transition: all 0.3s ease;
}

/* ACTIVE */
.Donation-page-all-doubts-answered-section-classname-item.active 
.Donation-page-all-doubts-answered-section-classname-answer {
  max-height: 200px;
  padding: 15px 26px 20px;
}

.Donation-page-all-doubts-answered-section-classname-item.active 
.Donation-page-all-doubts-answered-section-classname-question img {
  transform: rotate(180deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {

  .Donation-page-all-doubts-answered-section-classname-header h2 {
    font-size: 28px;
  }

  .Donation-page-all-doubts-answered-section-classname-question {
    padding: 16px;
    font-size: 14px;
  }
}




/*******************************************************************************************************************************/
/************************* Term And Condition / Privacy Policies Page****************************************************************************/
/*******************************************************************************************************************************/
/* MAIN SECTION */
.Term-and-condition-Privacy-Policies-section-classname-main {
  margin-top: 140px; /* FIX: push below header */
}

/* IMAGE */
.Term-and-condition-Privacy-Policies-section-classname-top img {
  width: 100%;
}

/* CONTAINER */
.Term-and-condition-Privacy-Policies-section-classname-container {
  max-width: 1200px; /* FIX: narrower like reference */
  margin: 0 auto;
  margin-top: -100px;
  padding: 10px 20px 40px;
}

/* TITLE */
.Term-and-condition-Privacy-Policies-section-classname-title {
  font-size: 60px;
  font-weight: 700;
  color: #243b77;
  margin-bottom: 15px;
}

/* CONTENT */
.Term-and-condition-Privacy-Policies-section-classname-content p {
  font-size: 22px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 25px;
}

/* HEADINGS */
.Term-and-condition-Privacy-Policies-section-classname-content h3 {
  font-size: 25px;
  font-weight: 700;
  color: #213164;
  margin-top: 15px;
  margin-bottom: 5px;
  display: inline; /* keeps heading aligned with number */
}

.Term-and-condition-Privacy-Policies-section-classname-content li p {
  font-size: 22px;
  color: #555;
  line-height: 1.5;
  margin: 5px 0;
}

/* LIST ITEMS */
.Term-and-condition-Privacy-Policies-section-classname-content li {
  font-size: 22px;
  color: #555;
  line-height: 1.5;
  margin: 5px 0 10px;
}

/* MAIN ORDERED LIST */
.Term-and-condition-Privacy-Policies-section-classname-content ol {
  padding-left: 25px;
  margin-bottom: 20px;
}

/* ✅ ONLY MAIN NUMBERS (1,2,3) */
.Term-and-condition-Privacy-Policies-section-classname-content > ol > li::marker {
  color: #213164;
  font-weight: 700;
}

/* ❌ RESET nested a,b,c to normal */
.Term-and-condition-Privacy-Policies-section-classname-content ol ol li::marker {
  color: #555;
  font-weight: 400;
}

/* NESTED UNORDERED LISTS */
.Term-and-condition-Privacy-Policies-section-classname-content ul {
  padding-left: 20px;
  margin-top: 5px;
}

/* NESTED ITEM SPACING */
.Term-and-condition-Privacy-Policies-section-classname-content li ul li {
  margin-bottom: 6px;
}
/* LINK */
.Term-and-condition-Privacy-Policies-section-classname-content .link {
  color: #0096ff;
}

/* RESPONSIVE */
@media (max-width: 1024px) {

  .Term-and-condition-Privacy-Policies-section-classname-main {
    margin-top: 160px;
        margin-bottom: 20px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-container {
      padding: 10px 60px 40px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content p {
    font-size: 20px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content li {
    font-size: 20px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content h3 {
    font-size: 22px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content li p {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .Term-and-condition-Privacy-Policies-section-classname-main {
    margin-top: 120px;
        margin-bottom: 20px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-title {
          font-size: 45px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-container {
          margin-top: -65px;
      padding: 10px 40px 40px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content p {
    font-size: 20px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content li {
  font-size: 20px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content h3 {
  font-size: 22px;
  }
  .Term-and-condition-Privacy-Policies-section-classname-content li p {
  font-size: 20px;
  }
}






/*******************************************************************************************************************************/
/****************************** Contact Page****************************************************************************/
/*******************************************************************************************************************************/

/****************************** Contact Page Hero Section ****************************************************************************/

/*.Contact-page-hero-section-classname{*/
/*   padding: 30px 0 50px;*/
/*}*/

/* HEADER */
.Contact-page-hero-section-classname__header-wrapper {
  background: #ffffff;
  padding: 120px 20px 60px;
  text-align: center;
}

.Contact-page-hero-section-classname__container {
  max-width: 1250px;
  margin: 0 auto;
}

/* TEXT */
.Contact-page-hero-section-classname__subtitle {
  font-size: 25px;
  color: #000;
  display: block;
}

.Contact-page-hero-section-classname__title {
  font-size: 48px;
  font-weight: 700;
  color: #243c7c;
  margin: 15px 0;
  line-height: 1.1;
}

.Contact-page-hero-section-classname__description {
  font-size: 22px;
  color: #000;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.5;
}

/* CARDS WRAPPER */
.Contact-page-hero-section-classname__cards-wrapper {
  background: #e8f0f9;
  padding: 60px 20px 80px;
}

/* GRID */
.Contact-page-hero-section-classname__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* CARD */
.Contact-page-hero-section-classname__card {
  background: #ffffff;
  border-radius: 15px;
  padding: 20px 25px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}

.Contact-page-hero-section-classname__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.08);
}

/* HEADER ROW (TITLE + ICON) */
.Contact-page-hero-section-classname__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* ICON */
.Contact-page-hero-section-classname__icon {
  width: 55px;
  height: 55px;
  background: #243b77;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.Contact-page-hero-section-classname__icon img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* TITLE */
.Contact-page-hero-section-classname__card-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #243c7c;
  line-height: 1.3;
  /* max-width: 180px; */
}

/* BODY */
.Contact-page-hero-section-classname__card-body p {
  font-size: 15px;
  color: black;
  line-height: 1.5;
  max-width: 240px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .Contact-page-hero-section-classname__cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .Contact-page-hero-section-classname__title {
    font-size: 38px;
  }
}

@media (max-width: 992px) {
  .Contact-page-hero-section-classname__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .Contact-page-hero-section-classname__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .Contact-page-hero-section-classname__title {
    font-size: 30px;
  }

  .Contact-page-hero-section-classname__description {
    font-size: 16px;
  }

  .Contact-page-hero-section-classname__header-wrapper {
    padding: 70px 16px 40px;
  }

  .Contact-page-hero-section-classname__cards-wrapper {
    padding: 60px 16px 80px;
  }
}




/********************************** Contact Page - Contact Details *****************************************************************************/
.Contact-page-contact-details-section-classname {
  position: relative;
  padding: 80px 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.Contact-page-contact-details-section-classname__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* HEADER */
.Contact-page-contact-details-section-classname__subtitle {
  color: white;
  opacity: 0.9;
}

.Contact-page-contact-details-section-classname__title {
  color: #fcd34d;
}

.Contact-page-contact-details-section-classname__desc {
  color: white;
  opacity: 0.9;
  margin: 0 0 50px;
}

/* GRID */
.Contact-page-contact-details-section-classname__grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 32px;
  align-items: stretch;
}

/* LEFT */
.Contact-page-contact-details-section-classname__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

/* CARD */
.Contact-page-contact-details-section-classname__card {
  background: #e9edf3;
  border-radius: 22px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0px 6px 18px rgba(0,0,0,0.08),
    inset 0px 1px 0px rgba(255,255,255,0.7);

  transition: all 0.25s ease;
}

.Contact-page-contact-details-section-classname__card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 18px 40px rgba(0,0,0,0.15);
}

/* LARGE CARD */
.Contact-page-contact-details-section-classname__card--large {
  height: 100%;
}

/* TITLE */
.Contact-page-contact-details-section-classname__card h3 {
  font-size: 24px;
  font-weight: 600;
  color: #243c7c;
  margin-bottom: 15px;
}

/* ITEM */
.Contact-page-contact-details-section-classname__item {
  display: flex;
  align-items: center;
  gap: 14px;
  /* margin-top: 5px; */
}

.Contact-page-contact-details-section-classname__item span {
  font-size: 18px;
  font-weight: 500;
}

/* ICON */
.Contact-page-contact-details-section-classname__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.Contact-page-contact-details-section-classname__icon img {
  width: 30px;
  height: 30px;
}

/* ADDRESS */
/*.Contact-page-contact-details-section-classname__address-block {*/
/*   margin-bottom: 24px; */
/*}*/

.Contact-page-contact-details-section-classname__address-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.Contact-page-contact-details-section-classname__address-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}

.Contact-page-contact-details-section-classname__address-heading {
  font-size: 15px;
  font-weight: 600;
  color: #243c7c;
  margin: 5px 0;
}

.Contact-page-contact-details-section-classname__address-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .Contact-page-contact-details-section-classname {
      width: 100%;
      background-position: right;
  }
  .Contact-page-contact-details-section-classname__title {
    font-size: 36px;
  }
}

@media (max-width: 992px) {
  .Contact-page-contact-details-section-classname {
     background-position: center;
  }
  .Contact-page-contact-details-section-classname__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .Contact-page-contact-details-section-classname {
    padding: 60px 16px;
  }

  .Contact-page-contact-details-section-classname__title {
    font-size: 28px;
  }

  .Contact-page-contact-details-section-classname__desc {
    font-size: 16px;
  }
}



/******************************* Contact Page - Contact Form ******************************************************************/
/* SECTION */
.Contact-page-contact-form-section-classname {
  padding: 80px 20px;
}

/* CONTAINER */
.Contact-page-contact-form-section-classname__container {
  max-width: 1200px;
  margin: 0 auto;
  background: #dbe3ed;
  border-radius: 20px;
  padding: 32px 32px 40px;
}

/* HEADER */
.Contact-page-contact-form-section-classname__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 28px;
}

.Contact-page-contact-form-section-classname__subtitle {
  font-size: 18px;
  color: #202020;
  margin-bottom: 8px;
  display: block;
}

.Contact-page-contact-form-section-classname__title {
  font-size: 36px;
  font-weight: 700;
  color: #243c7c;
  margin-bottom: 10px;
}

.Contact-page-contact-form-section-classname__desc {
  font-size: 16px;
  color: #202020;
}

/* FORM */
.Contact-page-contact-form-section-classname__form {
  width: 100%;
}

/* GRID */
.Contact-page-contact-form-section-classname__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  margin-bottom: 20px;
}

/* FIELD */
.Contact-page-contact-form-section-classname__field {
  width: 100%;
}

/* INPUT + TEXTAREA */
.Contact-page-contact-form-section-classname__field input,
.Contact-page-contact-form-section-classname__field textarea {
  width: 100%;
  border: 2px solid transparent;
  outline: none;
  background: #ffffff;
  color: #222;
  border-radius: 16px;
  padding: 16px 22px;
  font-size: 16px;
  /*font-family: 'Poppins', sans-serif;*/
  transition: 0.2s;
}

/* PLACEHOLDER */
.Contact-page-contact-form-section-classname__field input::placeholder,
.Contact-page-contact-form-section-classname__field textarea::placeholder {
  color: #6b6b6b;
}

/* FOCUS */
.Contact-page-contact-form-section-classname__field input:focus,
.Contact-page-contact-form-section-classname__field textarea:focus {
  border-color: #4d74bc;
  box-shadow: 0 0 0 3px rgba(77, 116, 188, 0.15);
}

/* TEXTAREA */
.Contact-page-contact-form-section-classname__field textarea {
  min-height: 130px;
  resize: none;
}

/* ERROR INPUT */
.Contact-page-contact-form-section-classname__input--error {
  border-color: #dc2626 !important;
}

/* ERROR TEXT */
.Contact-page-contact-form-section-classname__error {
  display: none;
  font-size: 13px;
  color: red;
  margin-top: 5px;
}

/* BUTTON */
.Contact-page-contact-form-section-classname__button {
  margin-top: 20px;
  min-width: 180px;
  border: none;
  border-radius: 10px;
  background: #4b74bc;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 14px 28px;
  cursor: pointer;
  transition: 0.2s;
}

.Contact-page-contact-form-section-classname__button:hover {
  background: #365da1;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .Contact-page-contact-form-section-classname__grid {
    grid-template-columns: 1fr;
  }

  .Contact-page-contact-form-section-classname__button {
    width: 100%;
  }
}



/******************************* Contact Page - Map Section ******************************************************************/

.Contact-page-map-section-classname {
  padding: 60px 20px;
}

.Contact-page-map-section-classname__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* SUBTITLE */
.Contact-page-map-section-classname__subtitle {
  display: block;
  font-size: 20px;
  color: #000;
  margin-bottom: 10px;
  font-weight: 500;
}

/* TITLE */
.Contact-page-map-section-classname__title {
  font-size: 42px;
  font-weight: 700;
  color: #2c3e75;
  margin-bottom: 30px;
  line-height: 1.2;
}

/* MAP WRAPPER */
.Contact-page-map-section-classname__map-wrapper {
  width: 100%;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
}

/* IFRAME */
.Contact-page-map-section-classname__map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .Contact-page-map-section-classname__title {
    font-size: 28px;
  }

  .Contact-page-map-section-classname__map-wrapper {
    height: 300px;
  }
}



/***************************** Career Page *************************************************************************************************/
/*******************************************************************************************************************************************/

/***************************** Career Page - Hero Section **********************************************************************************/
/* HERO SECTION */
.Career-page-hero-section-classname-hero {
  position: relative;
  background: url("../images/Career Banner (1).webp") no-repeat;
  background-size: cover;
  background-position: right center; /* FIX: aligns hands correctly */
  display: flex;
  align-items: center;
}

/* CONTAINER */
.Career-page-hero-section-classname-container {
  width: 90%;
  max-width: 1200px;
  margin: 100px auto;
}

/* CONTENT (spacing fix) */
.Career-page-hero-section-classname-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  color: #fff;
}

/* Subtitle */
.Career-page-hero-section-classname-subtitle {
  font-size: 24px;
  margin-bottom: 15px;
  opacity: 0.9;
}

/* Heading (major fix) */
.Career-page-hero-section-classname-content h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
  color: #fde075;
  margin-bottom: 15px;
}

/* Description */
.Career-page-hero-section-classname-description {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #e6e6e6;
}

/* Button */
.Career-page-hero-section-classname-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 80px;
  background: #fde075;
  color: #000;
  font-size: 22px;
  font-weight: 600;
  border-radius: 15px;
  text-decoration: none;
  transition: 0.3s ease;
}

.Career-page-hero-section-classname-btn:hover {
  background: #e0b233;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
  .Career-page-hero-section-classname-content h1 {
    font-size: 46px;
  }
}

@media (max-width: 992px) {
  .Career-page-hero-section-classname-content {
    margin-top: 40px;
  }

  .Career-page-hero-section-classname-content h1 {
    font-size: 38px;
  }
}

@media (max-width: 768px) {
  .Career-page-hero-section-classname-hero {
    background-position: -725px;
    min-height: 600px;
  }

  .Career-page-hero-section-classname-content {
    text-align: center;
    margin: auto;
  }

  .Career-page-hero-section-classname-content h1 {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .Career-page-hero-section-classname-content h1 {
    font-size: 24px;
  }

  .Career-page-hero-section-classname-description {
    font-size: 14px;
  }
}




/************************** Career Page - Work Culture ----------------------------------------------------------------------*/
/**************************** Career Page - Work Culture ****************************/
/* SECTION */
.Career-page-work-culture-section {
  padding: 80px 20px;
  background: #e8f0f9;
}

/* CONTAINER */
.Career-page-work-culture-section-container {
  margin: auto;
}

/* HEADER */
.Career-page-work-culture-section-header {
  text-align: center;
  margin-bottom: 60px;
}

/* ===================== */
/* TOP CARDS */
/* ===================== */
.Career-page-work-culture-section-top-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin: 10px auto;
  max-width: 1300px;
}

/* CARD */
.Career-page-work-culture-section-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 18px;

  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* HOVER EFFECT */
.Career-page-work-culture-section-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* ===================== */
/* CARD TOP (TITLE + ICON) */
/* ===================== */
.Career-page-work-culture-section-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 🔥 aligns title with bottom of icon */
  gap: 10px;
}

/* TITLE */
.Career-page-work-culture-section-card h2 {
  font-size: 21px;
  color: #2c3f73;
  max-width: 75%;
  line-height: 1.3;
  margin: 0;
}

/* DESCRIPTION */
.Career-page-work-culture-section-card p {
  font-size: 16px;
  color: #5f6b7a;
  margin-top: 12px;
  line-height: 1.4;
}

/* ===================== */
/* ICON */
/* ===================== */
.Career-page-work-culture-section-icon {
  /* background: #2c3f73; */
  border-radius: 14px;
  /* padding: 12px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.Career-page-work-culture-section-icon img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

/* Tablet */
@media (max-width: 1024px) {
  .Career-page-work-culture-section-top-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .Career-page-work-culture-section-header h2 {
    font-size: 36px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .Career-page-work-culture-section-top-cards {
    grid-template-columns: 1fr;
  }

  .Career-page-work-culture-section-header h2 {
    font-size: 28px;
  }

  .Career-page-work-culture-section-desc {
    font-size: 16px;
  }
}




/**************************** Career Page - Open Roles ****************************/

/* SECTION */
.Career-page-open-roles-section-classname-header {
  max-width: 1200px;
  margin: 80px auto 10px;
}

/* SECTION */
.Career-page-open-roles-section-classname {
  background: #f2f4f7;
  padding: 40px 40px 80px;
}

/* CONTAINER */
.Career-page-open-roles-section-classname-container {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.Career-page-open-roles-section-classname-header {
  margin-bottom: 20px;
}

.Career-page-open-roles-section-classname-subtitle {
  font-size: 24px;
  color: #000;
}

.Career-page-open-roles-section-classname-title {
   font-size: 46px;
    color: #243c7c;
    margin: 5px 0;
    font-weight: 700;
  word-spacing: 2px;
  letter-spacing: 1px;
}

.Career-page-open-roles-section-classname-desc {
  max-width: 1000px;
    font-size: 20px;
    margin-bottom: 50px;
    color: #000;
}

/* GRID */
.Career-page-open-roles-section-classname-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* CARD */
.Career-page-open-roles-section-classname-card {
  background: #ffffff;
  padding: 25px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

/* HOVER */
.Career-page-open-roles-section-classname-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* TITLE */
.Career-page-open-roles-section-classname-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #2c3f73;
  margin-bottom: 20px;
}

/* META */
.Career-page-open-roles-section-classname-card .meta {
  font-size: 16px;
  color: #7a869a;
  margin-bottom: 10px;
}

/* DESCRIPTION */
.Career-page-open-roles-section-classname-card .desc {
  font-size: 16px;
  color: #5a6573;
  margin: 15px 0 30px;
  line-height: 1.5;
}

/* APPLY LINK */
.Career-page-open-roles-section-classname-card a {
  font-size: 18px;
  font-weight: 600;
  color: #2c3f73;
  text-decoration: none;
}

.Career-page-open-roles-section-classname-card a:hover {
  text-decoration: underline;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 1024px) {
  .Career-page-open-roles-section-classname-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .Career-page-open-roles-section-classname-title {
    font-size: 32px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .Career-page-open-roles-section-classname-grid {
    grid-template-columns: 1fr;
  }

  .Career-page-open-roles-section-classname-title {
    font-size: 26px;
  }

  .Career-page-open-roles-section-classname-desc {
    font-size: 14px;
  }
}

/*****************************************Why Volunteer With YTDS****************************************************************/


.Why_Volunteer.With_YTDS_Volunteer_page {
  background: #e9edf3;
  padding: 60px 20px;
  text-align: center;
  /*font-family: Arial, sans-serif;*/
}

.Why_Volunteer.With_YTDS_Volunteer_page .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.Why_Volunteer.With_YTDS_Volunteer_page .card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}

.Why_Volunteer.With_YTDS_Volunteer_page .card:hover {
  transform: translateY(-5px);
}

.Why_Volunteer.With_YTDS_Volunteer_page .card h3 {
  font-size: 18px;
  color: #2b3f73;
  margin-bottom: 10px;
}

.Why_Volunteer.With_YTDS_Volunteer_page .card p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
  .Why_Volunteer.With_YTDS_Volunteer_page .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .Why_Volunteer.With_YTDS_Volunteer_page .cards {
    grid-template-columns: 1fr;
  }
}




/***********************************************************************************************************************/
/********************** Case Study - Inside Pages - Hero section****************************************************************/
/***********************************************************************************************************************/


/* --- Case Study Hero Section Styling --- */

.Case-Study-Inside-Pages-Hero {
    width: 100%;
    padding: 140px 20px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Titles/Headers */
.Case-Study-Inside-Pages-Hero-Header {
    text-align: center;
    margin-bottom: 35px;
}

.Case-Study-Inside-Pages-Hero-Label {
    /*font-family: 'Georgia', serif;*/
    font-size: 30px;
    color: #1a1a1a;
    display: block;
    margin-bottom: 12px;
}

.Case-Study-Inside-Pages-Hero-MainTitle {
    font-size: 38px;
    font-weight: 700;
    color: #2b3a67; /* Navy blue */
    line-height: 1.3;
}

/* Banner Card and Background */
.Case-Study-Inside-Pages-Hero-Banner {
    position: relative;
    width: 100%;
    min-height: 500px;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 70px;
}

/* Banner Content Text */
.Case-Study-Inside-Pages-Hero-Banner-Content {
    max-width: 650px;
}

.Case-Study-Inside-Pages-Hero-Banner-Heading {
    font-size: 50px;
    font-weight: 700;
    color: #fbde75; /* Golden Yellow */
    line-height: 1.15;
    margin-bottom: 20px;
}

.Case-Study-Inside-Pages-Hero-Banner-Desc {
    font-size: 22px;
    color: #ffffff;
    line-height: 1.5;
    font-weight: 400;
    opacity: 0.95;
}

/* Footer & Icons */
.Case-Study-Inside-Pages-Hero-Banner-Footer {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.Case-Study-Inside-Pages-Hero-Meta-Item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
}

.Case-Study-Inside-Pages-Hero-Meta-Item img{
    height: 40px;
    width: 40px;
}

/* --- Responsive Breakpoints --- */

@media (max-width: 768px) {
    .Case-Study-Inside-Pages-Hero {
        padding: 120px 15px 20px;
    }

    .Case-Study-Inside-Pages-Hero-Label {
        font-size: 26px;
    }

    .Case-Study-Inside-Pages-Hero-MainTitle {
        font-size: 35px;
    }

    .Case-Study-Inside-Pages-Hero-Banner {
        /* On mobile, gradient covers top-to-bottom for readability overlaying the entire background */
        /*background:url('../images/Case Study (Environment)-TOSHIBA Banner.webp') no-repeat center center;*/
        background-size: cover;
        padding: 30px 20px;
        min-height: auto;
    }

    .Case-Study-Inside-Pages-Hero-Banner-Heading {
        font-size: 32px;
    }

    .Case-Study-Inside-Pages-Hero-Banner-Desc {
        font-size: 16px;
    }

    .Case-Study-Inside-Pages-Hero-Banner-Footer {
        gap: 15px;
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .Case-Study-Inside-Pages-Hero-MainTitle {
        font-size: 28px;
    }
}




/********************** Case Study Toshiba Second Section Styling *******************************************************************************/
/* Section Wrapper */
.Case-Study-Inside-Pages-Second-Section {
  padding: 40px 20px;
}

/* Container */
.Case-Study-Inside-Pages-Second-Section-container {
  max-width: 1300px;
  margin: auto;
  padding: 0 20px;
}

/* Header Layout */
.Case-Study-Inside-Pages-Second-Section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*flex-wrap: wrap;*/
  gap: 40px;
  margin-bottom: 50px;
}

/* Location Text */
.Case-Study-Inside-Pages-Second-Section-location {
  font-size: 35px;
  font-weight: 600;
  color: #2f3e63;
}

/* Logo */
.Case-Study-Inside-Pages-Second-Section-logo img {
  max-width: 250px;
  height: auto;
}

/* Responsive */
@media (max-width: 576px) {
  .Case-Study-Inside-Pages-Second-Section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .Case-Study-Inside-Pages-Second-Section-location {
    font-size: 16px;
  }

  .Case-Study-Inside-Pages-Second-Section-logo img {
    max-width: 140px;
  }
}


/* Intro Text Heading */
.Case-Study-Inside-Pages-Second-Section-intro-heading {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.7;
    color: #5a5a5a;
    margin-bottom: 5px;
}

/* Intro Text */
.Case-Study-Inside-Pages-Second-Section-intro {
  font-size: 22px;
  line-height: 1.7;
  color: #5a5a5a;
  /* margin-bottom: 30px; */
}

/* Intro Text */
.Case-Study-Inside-Pages-Second-Section-intro-list {
  font-size: 22px;
  line-height: 1.7;
  color: #5a5a5a;
  padding-left: 20px;
  list-style-type: disc;
}

.Case-Study-Inside-Pages-Second-Section-main-list {
  padding-left: 0;
  margin-left: 0;
  list-style-position: inside; /* brings numbers inline */
}

.Case-Study-Inside-Pages-Second-Section-main-list > li {
  margin-bottom: 16px;
  padding-left: 0;
}

.Case-Study-Inside-Pages-Second-Section-main-list > li > strong {
      font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.7;
    color: #5a5a5a;
    margin-bottom: 5px;
}

.Case-Study-Inside-Pages-Second-Section-main-list ul {
  padding-left: 20px;
  list-style-type: disc;
}

.Case-Study-Inside-Pages-Second-Section-main-list ul li {
  margin-bottom: 4px;
      font-size: 22px;
    line-height: 1.7;
    color: #5a5a5a;
}

.Case-Study-Inside-Pages-Second-Section-main-list > li::marker {
  font-size: 24px;
  font-weight: 700;
  color: #5a5a5a;
}

/* Headings */
.Case-Study-Inside-Pages-Second-Section-heading {
  font-size: 35px;
  font-weight: 700;
  color: #000;
  margin: 35px 0 20px;
}

/* Subheading */
.Case-Study-Inside-Pages-Second-Section-subheading {
  font-size: 20px;
  font-weight: 500;
  color: #6a6a6a;
  margin-bottom: 10px;
}

/* Paragraph */
.Case-Study-Inside-Pages-Second-Section-text {
  font-size: 18px;
  line-height: 1.7;
  color: #5a5a5a;
  margin-bottom: 30px;
}

/* Tags Layout */
.Case-Study-Inside-Pages-Second-Section-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 15px;
}

/* Tag Box */
.Case-Study-Inside-Pages-Second-Section-tag {
  background: #d0e9e2;
  border: 2px solid #478241;
  border-radius: 10px;
  padding: 15px 22px;
}
.Case-Study-Inside-Pages-Second-Section-tag h4{
  font-size: 21px;
  color: #1f1a1a;
  font-weight: 600;
  margin-bottom: 5px;
}
.Case-Study-Inside-Pages-Second-Section-tag p{
    font-size: 19px;
    color: #1f2d2a;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .Case-Study-Inside-Pages-Second-Section-heading {
    font-size: 24px;
  }

  .Case-Study-Inside-Pages-Second-Section-intro,
  .Case-Study-Inside-Pages-Second-Section-text {
    font-size: 16px;
  }

  .Case-Study-Inside-Pages-Second-Section-tags {
    grid-template-columns: 1fr;
  }
}


/********************** Case Study Testimonial Section Styling *******************************************************************************/
.case-study-inside-page-testimonial-section {
  padding: 60px 20px;
  text-align: center;
  color: #ffffff;
}

.case-study-inside-page-testimonial-section-wrapper {
  max-width: 1200px;
  margin: auto;
}

.case-study-inside-page-testimonial-section-subtitle {
  font-size: 22px;
}

.case-study-inside-page-testimonial-section-title {
  font-size: 46px;
  margin: 10px 0;
}

.case-study-inside-page-testimonial-section-description {
    font-size: 20px;
  margin-bottom: 40px;
}

.case-study-inside-page-testimonial-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Square cards */
.case-study-inside-page-testimonial-section-card iframe {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
}

.case-study-inside-page-testimonial-section-name {
  margin-top: 12px;
  font-weight: 600;
}

.case-study-inside-page-testimonial-section-role {
  font-size: 14px;
  opacity: 0.85;
}

/* Tablet */
@media (max-width: 992px) {
  .case-study-inside-page-testimonial-section-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {
  .case-study-inside-page-testimonial-section-grid {
    grid-template-columns: 1fr;
  }
}








/***************************************************************************************************************************************************************************/
/******************************* Case Study Inside Page ********************************************************************************************************************/
/***************************************************************************************************************************************************************************/


/***********************************************************************************************************************/
    /********************** Case Study - Inside Pages - Hero section *********************************************************/
    /***********************************************************************************************************************/

    /* --- Case Study Hero Section Styling --- */
    .Case-Study-Inside-Pages-Hero {
      width: 100%;
      padding: 120px 20px 20px;
      max-width: 1300px;
      margin: 0 auto;
    }

    /* Titles/Headers */
    .Case-Study-Inside-Pages-Hero-Header {
      text-align: center;
      margin-bottom: 35px;
    }

    .Case-Study-Inside-Pages-Hero-Label {
      /*font-family: 'Georgia', serif;*/
      font-size: 30px;
      color: #1a1a1a;
      display: block;
      margin-bottom: 12px;
    }

    .Case-Study-Inside-Pages-Hero-MainTitle {
      font-size: 38px;
      font-weight: 700;
      color: #2b3a67;
      line-height: 1.3;
    }

    /* Banner Card and Background */
    .Case-Study-Inside-Pages-Hero-Banner {
      position: relative;
      width: 100%;
      min-height: 500px;
      border-radius: 24px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 50px 70px;
    }

    /* Banner Content Text */
    .Case-Study-Inside-Pages-Hero-Banner-Content {
      max-width: 650px;
    }

    .Case-Study-Inside-Pages-Hero-Banner-Heading {
      font-size: 50px;
      font-weight: 700;
      color: #fbde75;
      line-height: 1.15;
      margin-bottom: 20px;
    }

    .Case-Study-Inside-Pages-Hero-Banner-Desc {
      font-size: 22px;
      color: #ffffff;
      line-height: 1.5;
      font-weight: 400;
      opacity: 0.95;
    }

    /* Footer & Icons */
    .Case-Study-Inside-Pages-Hero-Banner-Footer {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
      margin-top: 40px;
    }

    .Case-Study-Inside-Pages-Hero-Meta-Item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #ffffff;
      font-size: 22px;
      font-weight: 500;
    }

    .Case-Study-Inside-Pages-Hero-Meta-Item img {
      height: 40px;
      width: 40px;
    }

    /* --- Responsive Breakpoints --- */
    @media (max-width: 768px) {
      .Case-Study-Inside-Pages-Hero {
        padding: 120px 15px 20px;
      }

      .Case-Study-Inside-Pages-Hero-Label {
        font-size: 26px;
      }

      .Case-Study-Inside-Pages-Hero-MainTitle {
        font-size: 35px;
      }

      .Case-Study-Inside-Pages-Hero-Banner {
        /* On mobile, gradient covers top-to-bottom for readability overlaying the entire background */
        /* background: url('../images/Case Study (Environment)-TOSHIBA Banner.webp') no-repeat center center; */
        background-size: cover;
        padding: 30px 20px;
        min-height: auto;
      }

      .Case-Study-Inside-Pages-Hero-Banner-Heading {
        font-size: 32px;
      }

      .Case-Study-Inside-Pages-Hero-Banner-Desc {
        font-size: 16px;
      }

      .Case-Study-Inside-Pages-Hero-Banner-Footer {
        gap: 15px;
        margin-top: 30px;
      }
    }

    @media (max-width: 480px) {
      .Case-Study-Inside-Pages-Hero-MainTitle {
        font-size: 28px;
      }
    }

    /********************** Case Study Toshiba Second Section Styling ******************************************************/
    /* Section Wrapper */
    .Case-Study-Inside-Pages-Second-Section {
      padding: 40px 20px;
    }

    /* Container */
    .Case-Study-Inside-Pages-Second-Section-container {
      max-width: 1200px;
      margin: auto;
      padding: 0 20px;
    }

    /* Header Layout */
    .Case-Study-Inside-Pages-Second-Section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* flex-wrap: wrap; */
      gap: 40px;
    }

    /* Location Text */
    .Case-Study-Inside-Pages-Second-Section-location {
      font-size: 35px;
      font-weight: 600;
      color: #2f3e63;
    }

    /* Logo */
    .Case-Study-Inside-Pages-Second-Section-logo img {
      max-width: 250px;
      height: auto;
    }

    .Case-Study-Inside-Pages-Four-Card-Section-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin: 50px auto;
    }

    .Case-Study-Inside-Pages-Four-Card-Section-card {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px 15px;
      background: #d0e9e2;
      border-radius: 12px;
      border: 1px solid #4f7f58;
      transition: all 0.3s ease;
    }

    .Case-Study-Inside-Pages-Four-Card-Section-card:hover {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
      transform: translateY(-3px);
    }

    .Case-Study-Inside-Pages-Four-Card-Section-card img {
      width: 50px;
      height: 50px;
      object-fit: contain;
      border-radius: 10px;
    }

    .Case-Study-Inside-Pages-Four-Card-Section-card span {
      display: block;
      margin-bottom: 2px;
      font-weight: 600;
      font-size: 20px;
      color: #2b3f78;
    }

    .Case-Study-Inside-Pages-Four-Card-Section-card p {
      font-size: 24px;
      font-weight: 700;
      color: #478140;
      margin: 0;
    }

    @media (max-width: 1024px) {
      .Case-Study-Inside-Pages-Four-Card-Section-wrapper {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .Case-Study-Inside-Pages-Four-Card-Section-wrapper {
        grid-template-columns: 1fr;
      }
    }

    /* Responsive */
    @media (max-width: 576px) {
      .Case-Study-Inside-Pages-Second-Section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .Case-Study-Inside-Pages-Second-Section-location {
        font-size: 16px;
      }

      .Case-Study-Inside-Pages-Second-Section-logo img {
        max-width: 140px;
      }
    }

    .Case-Study-Inside-Pages-Project-Execution-Section {
      width: 100%;
      padding: 20px 0;
      box-sizing: border-box;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-container {
      width: 100%;
      max-width: 100%;
      margin: 0;
      margin-left: 60px;
      position: relative;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-item {
      position: relative;
      padding-left: 72px;
      padding-bottom: 34px;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-item:last-child {
      padding-bottom: 0;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-item::before {
      content: "";
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #cfd6df;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-item:last-child::before {
      bottom: auto;
      height: 28px;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #082a57;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
      line-height: 1;
      z-index: 2;
      box-sizing: border-box;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-content h3 {
      margin: 0 0 6px;
      color: #0b1f3f;
      font-size: 28px;
      line-height: 1.2;
      font-weight: 700;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-content p {
      /* margin: 0 0 10px;
      color: #5c6f8a;
      font-size: 18px;
      line-height: 1.6;
      font-weight: 400; */
      font-size: 22px;
      line-height: 1.7;
      color: #5c6f8a;
      list-style-type: disc;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-content ul {
      margin: 0;
      padding-left: 20px;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-content ul li {
      /* margin: 0 0 6px;
      color: #0b1f3f;
      font-size: 18px;
      line-height: 1.55;
      font-weight: 400; */
      font-size: 22px;
      line-height: 1.7;
      color: #0b1f3f;
      padding-left: 10px;
      list-style-type: disc;
    }

    .Case-Study-Inside-Pages-Project-Execution-Section-content ul li::marker {
      color: #1ea45c;
      font-size: 20px;
    }

    @media (max-width: 1199px) {
      .Case-Study-Inside-Pages-Project-Execution-Section-item {
        padding-left: 64px;
        padding-bottom: 30px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content h3 {
        font-size: 24px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content p,
      .Case-Study-Inside-Pages-Project-Execution-Section-content ul li {
        font-size: 16px;
      }
    }

    @media (max-width: 767px) {
      .Case-Study-Inside-Pages-Project-Execution-Section {
        padding: 10px 0;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-item {
        padding-left: 54px;
        padding-bottom: 26px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-item::before {
        left: 14px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content h3 {
        font-size: 18px;
        margin-bottom: 6px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content p {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 8px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content ul {
        padding-left: 16px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content ul li {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 5px;
      }
    }

    @media (max-width: 480px) {
      .Case-Study-Inside-Pages-Project-Execution-Section-item {
        padding-left: 48px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content h3 {
        font-size: 17px;
      }

      .Case-Study-Inside-Pages-Project-Execution-Section-content p,
      .Case-Study-Inside-Pages-Project-Execution-Section-content ul li {
        font-size: 13px;
      }
    }

    .Case-Study-Inside-Pages-Images-Before-And-After-Section {
      width: 100%;
      padding: 28px 0;
      box-sizing: border-box;
    }

    .Case-Study-Inside-Pages-Images-Before-And-After-Section *,
    .Case-Study-Inside-Pages-Images-Before-And-After-Section *::before,
    .Case-Study-Inside-Pages-Images-Before-And-After-Section *::after {
      box-sizing: border-box;
    }

    .Case-Study-Inside-Pages-Images-Before-And-After-Section-container {
      width: 100%;
      /* max-width: 1120px; */
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 25px;
      align-items: start;
    }

    .Case-Study-Inside-Pages-Images-Before-And-After-Section-card {
      background: #f6f7f8;
      border: 1px solid #cfd7df;
      border-radius: 18px;
      overflow: hidden;
      width: 100%;
    }

    .Case-Study-Inside-Pages-Images-Before-And-After-Section-image-wrap {
      width: 100%;
      aspect-ratio: 523 / 307;
      overflow: hidden;
      background: #e9edf1;
    }

    .Case-Study-Inside-Pages-Images-Before-And-After-Section-image-wrap img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .Case-Study-Inside-Pages-Images-Before-And-After-Section-caption {
      padding: 16px 18px 15px;
      color: #55709b;
      font-size: 16px;
      line-height: 1.45;
      font-weight: 400;
      background: #f6f7f8;
      border-top: 1px solid #cfd7df;
    }

    @media (max-width: 1199px) {
      .Case-Study-Inside-Pages-Images-Before-And-After-Section-container {
        gap: 22px;
      }

      .Case-Study-Inside-Pages-Images-Before-And-After-Section-card {
        border-radius: 16px;
      }

      .Case-Study-Inside-Pages-Images-Before-And-After-Section-caption {
        font-size: 15px;
        padding: 14px 16px;
      }
    }

    @media (max-width: 767px) {
      .Case-Study-Inside-Pages-Images-Before-And-After-Section {
        padding: 20px 0;
      }

      .Case-Study-Inside-Pages-Images-Before-And-After-Section-container {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .Case-Study-Inside-Pages-Images-Before-And-After-Section-card {
        border-radius: 14px;
      }

      .Case-Study-Inside-Pages-Images-Before-And-After-Section-caption {
        font-size: 14px;
        line-height: 1.5;
        padding: 13px 14px;
      }
    }

    @media (max-width: 480px) {
      .Case-Study-Inside-Pages-Images-Before-And-After-Section-image-wrap {
        aspect-ratio: 16 / 10;
      }

      .Case-Study-Inside-Pages-Images-Before-And-After-Section-caption {
        font-size: 13px;
        padding: 12px 13px;
      }
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section {
      width: 100%;
      padding: 28px 0;
      box-sizing: border-box;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section * {
      box-sizing: border-box;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-card {
      background: #ffffff;
      border: 2px solid #d7dce3;
      border-radius: 20px;
      padding: 25px;
      min-height: 255px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-card-top {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-number {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 10px;
      background: #e7f0e8;
      color: #189a55;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-card-top h3 {
      margin: 0;
      color: #0b2850;
      font-size: 19px;
      font-weight: 700;
      line-height: 1.3;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-list li {
      position: relative;
      margin: 0 0 16px;
      padding-left: 28px;
      color: #55709b;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.45;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-list li:last-child {
      margin-bottom: 0;
    }

    .Case-Study-Inside-Pages-Impact-And-Significance-Section-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 5px;
      width: 18px;
      height: 18px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='8.25' stroke='%23189A55' stroke-width='1.5'/%3E%3Cpath d='M6.4 9.1L8.15 10.85L11.6 7.4' stroke='%23189A55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    @media (max-width: 1199px) {
      .Case-Study-Inside-Pages-Impact-And-Significance-Section-container {
        gap: 22px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card {
        padding: 24px 22px;
        min-height: 230px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card-top {
        margin-bottom: 20px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-number {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 20px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card-top h3 {
        font-size: 18px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-list li {
        font-size: 16px;
        margin-bottom: 14px;
      }
    }

    @media (max-width: 991px) {
      .Case-Study-Inside-Pages-Impact-And-Significance-Section-container {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card {
        min-height: auto;
      }
    }

    @media (max-width: 767px) {
      .Case-Study-Inside-Pages-Impact-And-Significance-Section {
        padding: 20px 0;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card {
        padding: 20px 18px;
        border-radius: 14px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card-top {
        gap: 12px;
        margin-bottom: 18px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-number {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 9px;
        font-size: 18px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card-top h3 {
        font-size: 17px;
        line-height: 1.35;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-list li {
        padding-left: 26px;
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 12px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-list li::before {
        width: 16px;
        height: 16px;
        top: 4px;
      }
    }

    @media (max-width: 480px) {
      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card {
        padding: 18px 16px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-card-top h3 {
        font-size: 16px;
      }

      .Case-Study-Inside-Pages-Impact-And-Significance-Section-list li {
        font-size: 14px;
      }
    }

    /* Headings */
    .Case-Study-Inside-Pages-Second-Section-heading {
      font-size: 35px;
      font-weight: 700;
      color: #000;
      margin: 35px 0 20px;
    }

    /* Subheading */
    .Case-Study-Inside-Pages-Second-Section-subheading {
      font-size: 20px;
      font-weight: 500;
      color: #6a6a6a;
      margin-bottom: 10px;
    }

    /* Paragraph */
    .Case-Study-Inside-Pages-Second-Section-text {
      font-size: 18px;
      line-height: 1.7;
      color: #5a5a5a;
      margin-bottom: 30px;
    }

    /* Tags Layout */
    .Case-Study-Inside-Pages-Second-Section-tags {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px 15px;
    }

    /* Tag Box */
    .Case-Study-Inside-Pages-Second-Section-tag {
      background: #d0e9e2;
      border: 2px solid #478241;
      border-radius: 10px;
      padding: 15px 22px;
    }

    .Case-Study-Inside-Pages-Second-Section-tag h4 {
      font-size: 21px;
      color: #1f1a1a;
      font-weight: 600;
      margin-bottom: 5px;
    }

    .Case-Study-Inside-Pages-Second-Section-tag p {
      font-size: 19px;
      color: #1f2d2a;
      font-weight: 500;
    }

    /* Intro Text Heading */
    .Case-Study-Inside-Pages-Second-Section-intro-heading {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0.5px;
      line-height: 1.7;
      color: #5a5a5a;
      margin-bottom: 5px;
    }

    /* Intro Text */
    .Case-Study-Inside-Pages-Second-Section-intro {
      font-size: 22px;
      line-height: 1.7;
      color: #5a5a5a;
      /* margin-bottom: 30px; */
    }

    /* Intro List */
    .Case-Study-Inside-Pages-Second-Section-intro-list {
      font-size: 22px;
      line-height: 1.7;
      color: #5a5a5a;
      padding-left: 20px;
      list-style-type: disc;
    }

    .Case-Study-Inside-Pages-Second-Section-main-list {
      padding-left: 0;
      margin-left: 0;
      list-style-position: inside;
    }

    .Case-Study-Inside-Pages-Second-Section-main-list > li {
      margin-bottom: 16px;
      padding-left: 0;
    }

    .Case-Study-Inside-Pages-Second-Section-main-list > li > strong {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0.5px;
      line-height: 1.7;
      color: #5a5a5a;
      margin-bottom: 5px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .Case-Study-Inside-Pages-Second-Section-heading {
        font-size: 24px;
      }

      .Case-Study-Inside-Pages-Second-Section-intro,
      .Case-Study-Inside-Pages-Second-Section-text {
        font-size: 16px;
      }

      .Case-Study-Inside-Pages-Second-Section-tags {
        grid-template-columns: 1fr;
      }
    }

    /********************** Case Study Testimonial Section Styling ******************************************************/
    .case-study-inside-page-testimonial-section {
      padding: 60px 20px;
      text-align: center;
      color: #ffffff;
    }

    .case-study-inside-page-testimonial-section-wrapper {
      max-width: 1200px;
      margin: auto;
    }

    .case-study-inside-page-testimonial-section-subtitle {
      font-size: 22px;
    }

    .case-study-inside-page-testimonial-section-title {
      font-size: 46px;
      margin: 10px 0;
    }

    .case-study-inside-page-testimonial-section-description {
      font-size: 20px;
      margin-bottom: 40px;
    }

    .case-study-inside-page-testimonial-section-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    /* Square cards */
    .case-study-inside-page-testimonial-section-card iframe {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 8px;
    }

    .case-study-inside-page-testimonial-section-name {
      margin-top: 12px;
      font-weight: 600;
    }

    .case-study-inside-page-testimonial-section-role {
      font-size: 14px;
      opacity: 0.85;
    }

    /* Tablet */
    @media (max-width: 992px) {
      .case-study-inside-page-testimonial-section-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Mobile */
    @media (max-width: 576px) {
      .case-study-inside-page-testimonial-section-grid {
        grid-template-columns: 1fr;
      }
    }
    



/*******************************************************Home page Make a Difference donation page *****************************************************/

/* ============================================
   BASE STYLES (DESKTOP)
============================================ */

/* Section Background */
.Make_a_Difference_home_page {
    background: #2f4a7c;
    padding: 40px 40px 80px;
    overflow: hidden; /* Prevents horizontal scroll from background */
}

/* Main Container */
.donation-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

/* Header Section */
.make-a-diff-donation {
    padding: 40px;
    text-align: center;
}

.make-a-diff-donation .subtitle {
    letter-spacing: 1px;
    font-size: 14px;
    text-transform: uppercase;
}

.make-a-diff-donation .title {
    font-size: 32px;
    margin: 10px 0;
}

.make-a-diff-donation .intro {
    font-size: 16px;
}

/* Step Bar */
.step-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
}

.step {
    text-align: center;
    flex: 1;
    opacity: 0.4;
    transition: all 0.3s ease;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.step.active {
    opacity: 1;
    font-weight: bold;
    color: #122d51;
}

/* Step Content */
.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Selectable Cards */
.selectable {
    border: 2px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    box-sizing: border-box;
    /* Fix: Ensure card grows with content */
    height: auto;
    min-height: 160px;
    display: flex;
    flex-direction: column;
}

.selectable:hover {
    border-color: #122d51;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.selectable.active {
    border: 2px solid #122d51;
    background: #eef3ff;
}

/* Card Icon - Top Right */
.card-icon-top-right {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    object-fit: contain;
    z-index: 2;
}

/* Tick Mark */
.tick {
    position: absolute;
    top: 10px;
    left: 10px; /* Moved to left to avoid conflict with icon */
    background: #122d51;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 3;
}

.selectable.active .tick {
    display: flex;
}

/* Impact Card Text Container */
.impact-card-donation {
    /* FIX: Removed fixed height that was hiding content */
    height: auto !important; 
    display: flex;
    align-items: center;
    flex-grow: 1;
}

/* Card Text */
.card-text-donation {
    width: 100%;
    /* Fix: Add padding to prevent text going under icon */
    padding-right: 60px; 
    box-sizing: border-box;
}

.card-text-donation h4 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #122d51;
}

.card-text-donation p {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin: 0;
    /* Fix: Ensure text wraps properly */
    word-wrap: break-word;
    overflow: visible;
    white-space: normal;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.form-grid label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

/* Inputs */
input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

input:focus {
    outline: none;
    border-color: #122d51;
    box-shadow: 0 0 0 3px rgba(18, 45, 81, 0.1);
}

/* Controls Buttons */
.controls {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.controls button {
    padding: 12px 24px;
    border: none;
    background: #122d51;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.controls button:hover:not(:disabled) {
    background: #1e4a7d;
    transform: translateY(-2px);
}

.controls button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Confirm Box */
.confirm-box {
    background: #f2f4f8;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.confirm-box span:first-child { color: #666; font-weight: 500; }
.confirm-box span:last-child { font-weight: 700; color: #122d51; }

/* Thank You */
.thankyou { text-align: center; padding: 40px 20px; }
.thankyou h2 { font-size: 32px; margin-bottom: 15px; }
.thankyou p { color: #666; font-size: 16px; }

/* ============ LOCKED STATE STYLES ============ */
.selectable.locked {
    pointer-events: none;
    opacity: 0.35;
    filter: grayscale(70%);
}

.selectable.locked.active {
    opacity: 1;
    filter: none;
    pointer-events: none;
    border: 3px solid #122d51;
    background: linear-gradient(135deg, #eef3ff 0%, #dbe5ff 100%);
    box-shadow: 0 4px 15px rgba(18, 45, 81, 0.25);
}

.selectable.locked.active::before {
    content: "🔒 Selected";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #122d51 0%, #1e4a7d 100%);
    color: #fff;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
    white-space: nowrap;
}

.locked-info-banner {
    background: linear-gradient(135deg, #122d51 0%, #1e4a7d 50%, #2a5298 100%);
    color: white;
    padding: 18px 24px;
    border-radius: 14px;
    margin-bottom: 25px;
    display: none;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    border-left: 6px solid #ffd86b;
}

.locked-info-banner.show { display: flex; }
.locked-info-banner .lock-icon { font-size: 32px; }
.locked-info-banner .banner-text { flex: 1; }
.locked-info-banner .banner-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.8; }
.locked-info-banner .campaign-name { font-weight: bold; color: #ffd86b; font-size: 17px; }

.unlock-btn {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.5);
    color: white;
    padding: 10px 22px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.unlock-btn:hover {
    background: white;
    color: #122d51;
    border-color: white;
}

/* ============ DROPDOWN & AMOUNT STYLES ============ */
.Donation-page-custom-dropdown { margin-bottom: 20px; position: relative; z-index: 100; }

.Donation-page-custom-dropdown-selected {
    border: 1px solid #ccc;
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    background: #fff;
}

.Donation-page-custom-dropdown-options {
    display: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 5px;
    background: #fff;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: absolute;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
}

.Donation-page-custom-dropdown-options.show { display: block; }

.Donation-page-custom-dropdown-option {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.Donation-page-custom-dropdown-option:hover { background: #f5f7fa; }
.Donation-page-custom-dropdown-option:last-child { border-bottom: none; }

/* Category Tags */
.Donation-page-custom-dropdown-green { background: #e8f5e9; color: #2e7d32; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.Donation-page-custom-dropdown-orange, .Donation-page-custom-dropdown-purple { background: #f3e5f5; color: #7b1fa2; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.Donation-page-custom-dropdown-blue { background: #e3f2fd; color: #1565c0; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.Donation-page-custom-dropdown-red { background: #ffebee; color: #c62828; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }

/* Amount Buttons */
.Donation-page-make-a-difference-today-section-classname-amounts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.Donation-page-amount {
    padding: 14px 24px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.Donation-page-amount:hover { border-color: #122d51; background: #f5f7fa; }
.Donation-page-amount.active { background: #122d51; color: #fff; border-color: #122d51; }
.Donation-page-amount .tick { display: none; position: static; background: transparent; color: inherit; width: auto; height: auto; }
.Donation-page-amount.active .tick { display: inline-block; margin-left: 5px; }

.Donation-page-make-a-difference-today-section-classname-input {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    margin-top: 10px;
}

/* ============================================
   TABLET VIEW (max-width: 1024px)
============================================ */
@media (max-width: 1024px) {

    .Make_a_Difference_home_page { padding: 30px 20px 60px; }
    .donation-wrapper { padding: 25px 20px; }
    .make-a-diff-donation { padding: 25px !important; }
    .make-a-diff-donation .title { font-size: 26px; }

    .step-bar { gap: 10px; margin-bottom: 25px; }
    .step { font-size: 13px; }

    .card-grid { gap: 15px; }
    .selectable { padding: 18px; min-height: 150px; }
    .card-icon-top-right { width: 45px; height: 45px; top: 12px; right: 12px; }
    .card-text-donation { padding-right: 50px; }
    .card-text-donation h4 { font-size: 16px; }
    .card-text-donation p { font-size: 13px; }

    .form-grid { gap: 12px; }
    .Donation-page-amount { padding: 12px 18px; font-size: 14px; }
    
    .locked-info-banner { padding: 15px 18px; gap: 12px; }
    .unlock-btn { padding: 8px 18px; font-size: 12px; }
    
    .controls button { padding: 10px 20px; }
}


/* ============================================
   MOBILE VIEW (max-width: 768px)
============================================ */
@media (max-width: 768px) {

    .Make_a_Difference_home_page { padding: 20px 15px 50px; }
    
    .donation-wrapper {
        padding: 15px 12px;
        margin: 10px auto;
        border-radius: 10px;
    }

    .make-a-diff-donation { padding: 15px 10px !important; text-align: center; }
    .make-a-diff-donation .title { font-size: 22px; line-height: 1.3; }
    .make-a-diff-donation .intro { font-size: 14px; }

    /* Step Bar */
    .step-bar { gap: 5px; margin-bottom: 20px; }
    .step { font-size: 11px; padding: 6px 3px; min-width: 50px; }

    /* Card Grid - 1 Column */
    .card-grid { grid-template-columns: 1fr; gap: 15px; }
    
    .selectable {
        padding: 15px;
        padding-right: 70px; /* Space for icon */
        min-height: 120px;
    }

    /* Fix: Ensure text is visible */
    .impact-card-donation { height: auto !important; }
    .card-text-donation { padding-right: 0; } /* Icon is outside now via padding on parent */
    .card-text-donation h4 { font-size: 16px; margin-bottom: 5px; }
    .card-text-donation p { font-size: 13px; line-height: 1.5; }

    .card-icon-top-right { width: 40px; height: 40px; top: 15px; right: 15px; }
    
    /* Move tick back to right top on mobile to avoid conflict with text */
    .tick { top: 10px; left: auto; right: 10px; }

    /* Locked Banner */
    .locked-info-banner {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        gap: 10px;
        border-left: none;
        border-top: 5px solid #ffd86b;
    }
    .locked-info-banner .lock-icon { font-size: 26px; }
    .locked-info-banner .campaign-name { font-size: 15px; }
    .unlock-btn { width: 100%; margin-top: 5px; }

    /* Form */
    .form-grid { grid-template-columns: 1fr; }
    #step2 h2, #step4 h2 { font-size: 20px; text-align: center; }

    /* Amount Grid - 3 Cols */
    .Donation-page-make-a-difference-today-section-classname-amounts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .Donation-page-amount { padding: 10px 5px; font-size: 13px; text-align: center; width: 100%; }

    /* Dropdown */
    .Donation-page-custom-dropdown-option { flex-direction: column; align-items: flex-start; gap: 4px; }

    /* Confirm */
    .confirm-box { flex-direction: column; align-items: flex-start; gap: 4px; }
    .confirm-box span:first-child { font-size: 12px; }
    .confirm-box span:last-child { font-size: 15px; }

    /* Controls */
    .controls { gap: 10px; margin-top: 20px; }
    .controls button { flex: 1; padding: 11px 16px; font-size: 13px; }

    /* Thank You */
    .thankyou { padding: 25px 10px; }
    .thankyou h2 { font-size: 24px; }
    .thankyou button { width: 100%; }
}


/* ============================================
   EXTRA SMALL MOBILE (max-width: 480px)
============================================ */
@media (max-width: 480px) {

    .Make_a_Difference_home_page { padding: 15px 10px 40px; }
    .donation-wrapper { padding: 12px 10px; border-radius: 8px; }
    .make-a-diff-donation .title { font-size: 19px; }

    /* Step Bar Compact */
    .step { font-size: 9px; min-width: 45px; }

    /* Cards */
    .selectable { padding: 12px; padding-right: 60px; min-height: 100px; }
    .card-icon-top-right { width: 35px; height: 35px; top: 10px; right: 10px; }
    .card-text-donation h4 { font-size: 15px; }
    .card-text-donation p { font-size: 12px; }

    /* Amount Grid - 2 Cols for very small screens */
    .Donation-page-make-a-difference-today-section-classname-amounts {
        grid-template-columns: repeat(2, 1fr);
    }
    .Donation-page-amount { font-size: 12px; }

    /* Controls */
    .controls button { font-size: 12px; padding: 10px 12px; }
}





/***********************************************************************************************************/



/* =========================
   SECTION
========================= */
.abt-framework-section {
  padding: 80px 40px;
}

.abt-framework-header {
  text-align: center;
  margin-bottom: 45px;
}

.abt-framework-header .subtitle {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: #243d91;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.abt-framework-header .title {
  font-size: 42px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
  color: #1b1b1b;
}

.abt-framework-section-cards {
  padding: 0 40px;
}

/* =========================
   GRID
========================= */
.abt-framework-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px;
}

/* =========================
   CARD
========================= */
.abt-framework-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 35px;
  border-radius: 20px;
  min-height: 450px;
  overflow: hidden;
}

/* =========================
   TOP ICON / LOGO
   Fixed size so it won't touch text
========================= */
.abt-framework-top-icon {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.abt-framework-top-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* =========================
   TEXT
========================= */
.abt-framework-subtitle {
  font-size: 20px;
  margin: 0 0 6px;
  padding-right: 110px; /* reserve space for logo */
}

.abt-framework-title {
  font-size: 45px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 15px;
  padding-right: 110px; /* reserve space for logo */
}

.abt-framework-desc {
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 100%;
}

/* =========================
   STATS
========================= */
.abt-framework-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 60px;
  margin-top: 20px;
}

.abt-framework-stats h3 {
  font-size: 48px;
  line-height: 1;
  color: #273d8f;
  margin: 0 0 6px;
}

.abt-framework-stats p {
  color: #2d478f;
  margin: 0;
  font-size: 16px;
}

/* =========================
   BUTTON
   Using flex instead of absolute to avoid overlap
========================= */
.abt-framework-btn {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #243d91;
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.abt-framework-btn:hover {
  background: #1c3277;
}

/* =========================
   COLORS
========================= */
.abt-framework-environment {
  background: #dde7e3;
}

.abt-framework-environment .abt-framework-title {
  color: #4f8f41;
}

.abt-framework-empowerment {
  background: #e3d8e9;
}

.abt-framework-empowerment .abt-framework-title {
  color: #7d45ad;
}

.abt-framework-education {
  background: #d8e7f3;
}

.abt-framework-education .abt-framework-title {
  color: #4778c7;
}

.abt-framework-employment {
  background: #f3dece;
}

.abt-framework-employment .abt-framework-title {
  color: #f0822d;
}

/* =========================
   TABLET VIEW
========================= */
@media (max-width: 1024px) {
  .abt-framework-section {
    padding: 60px 24px;
  }

  .abt-framework-section-cards {
    padding: 0 24px;
  }

  .abt-framework-header {
    margin-bottom: 35px;
  }

  .abt-framework-header .title {
    font-size: 34px;
  }

  .abt-framework-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .abt-framework-card {
    min-height: auto;
    padding: 30px;
  }

  .abt-framework-top-icon {
    width: 70px;
    height: 70px;
    top: 20px;
    right: 20px;
  }

  .abt-framework-subtitle {
    font-size: 18px;
    padding-right: 95px;
  }

  .abt-framework-title {
    font-size: 36px;
    padding-right: 95px;
  }

  .abt-framework-desc {
    font-size: 16px;
  }

  .abt-framework-stats {
    gap: 20px 40px;
  }

  .abt-framework-stats h3 {
    font-size: 40px;
  }
}

/* =========================
   MOBILE VIEW
========================= */
@media (max-width: 768px) {
  .abt-framework-section {
    padding: 40px 16px;
  }

  .abt-framework-section-cards {
    padding: 0;
  }

  .abt-framework-header {
    margin-bottom: 28px;
  }

  .abt-framework-header .subtitle {
    font-size: 14px;
  }

  .abt-framework-header .title {
    font-size: 28px;
  }

  .abt-framework-card {
    padding: 24px;
    border-radius: 16px;
  }

  /* Move logo into normal flow on mobile */
  .abt-framework-top-icon {
    position: static;
    width: 60px;
    height: 60px;
    margin: 0 0 14px auto;
  }

  .abt-framework-subtitle {
    font-size: 16px;
    padding-right: 0;
  }

  .abt-framework-title {
    font-size: 30px;
    padding-right: 0;
    margin-bottom: 12px;
  }

  .abt-framework-desc {
    font-size: 15px;
    line-height: 1.55;
  }

  .abt-framework-stats {
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
  }

  .abt-framework-stats h3 {
    font-size: 34px;
  }

  .abt-framework-stats p {
    font-size: 14px;
  }

  .abt-framework-btn {
    width: 100%;
    align-self: stretch;
    text-align: center;
    margin-top: 24px;
    padding: 12px 18px;
  }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px) {
  .abt-framework-section {
    padding: 32px 14px;
  }

  .abt-framework-card {
    padding: 20px;
  }

  .abt-framework-header .title {
    font-size: 24px;
  }

  .abt-framework-top-icon {
    width: 52px;
    height: 52px;
  }

  .abt-framework-title {
    font-size: 26px;
  }

  .abt-framework-desc {
    font-size: 14px;
  }

  .abt-framework-stats h3 {
    font-size: 30px;
  }
}