:root{
--purple:#371b59;
--red:#b31c20;
--gold:#d4af37;
--accent:#f4b400;
--blue:#2c3a89;

--t3-purple:#371b59;
--t3-red:#b31c20;
--t3-gold:#d4af37;
--t3-ink:#0b1220;
 --t3-blue:#243c78; /* close match to screenshot's blue bar */

 --t3-bg:#f6f2fb;
 --t3-border:#e6def3;



 --ink:#0b1220;
 --muted:#64748b;
 --soft:#d0b8ffc4;
 --border:#e9e3f2;
 --shadow: 0 12px 32px rgba(11,18,32,.12);

 --lav:#efe9f8;
 --lav2:#f6f2fb;
 --border:#d7cdea;
 --ink:#231f2e;
 --btn1:#2c3a89;
 --btn2:#1f2c63;
}

body{ color:var(--ink);
  /* background-color:#f2eeee; */
  background:radial-gradient(1200px 500px at 80% 20%, rgba(55,27,89,.18), transparent 60%),
radial-gradient(900px 420px at 20% 40%, rgba(179,28,32,.14), transparent 55%),
radial-gradient(900px 420px at 70% 70%, rgba(212,175,55,.14), transparent 55%),
linear-gradient(180deg, #ffffff, #fbf9ff)
 }
.bg-soft{ background:var(--soft); }
.text-muted-2{ color:var(--muted)!important; }
.border-soft{ border:1px solid var(--border); }
.shadow-soft{ box-shadow:var(--shadow); }
.brand{ color:var(--brand)!important; }
.btn-brand{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;

}
.btn-brand:hover{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
.btn-accent{
  background:var(--accent);
  border-color:var(--accent);
  color:#111;
  font-weight:600;
}
.btn-accent:hover{ filter:brightness(.95); }

/* Navbar */
.navbar{ background:#fff; }
.navbar-brand .logo-mark{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:inline-grid; place-items:center;
  color:#fff; font-weight:800;
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: 500;
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 80% 20%, rgba(11,74,162,.18), transparent 60%),
    radial-gradient(900px 420px at 20% 40%, rgba(244,180,0,.20), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f9ff);
}
.hero .hero-card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(6px);
}
.hero-img{
  border-radius:24px;
  min-height:280px;
  background:
    linear-gradient(135deg, rgba(11,74,162,.15), rgba(244,180,0,.15)),
    url("https://placehold.co/600x400");
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* Section headings */
.section-title{ letter-spacing:-.02em; }
.eyebrow{
  font-size:.85rem;
  font-weight:700;
  color:var(--brand);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Cards */
.icon-pill{
  width:46px; height:46px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(11,74,162,.10);
  color:var(--brand);
  flex:0 0 auto;
}

/* Footer */
footer{
  /* background:#0b1220; */
  background:#371e5c;
  color:#cbd5e1;
}
footer a{ color:#cbd5e1; text-decoration:none; }
footer a:hover{ color:#fff; }

/* Small tweaks */
.rounded-2xl{ border-radius:20px; }


/* Helpers */
.bg-soft{ background:var(--soft); }
.text-muted-2{ color:var(--muted)!important; }
.border-soft{ border:1px solid var(--border); }
.shadow-soft{ box-shadow:var(--shadow); }
.brand{ color:var(--purple)!important; }

/* Buttons */
.btn-brand{
background:var(--purple);
border-color:var(--purple);
color:#fff;
}
.btn-brand:hover{
background:#2a1345; /* darker purple */
border-color:#2a1345;
color:#fff;
}

.btn-danger-brand{
background:var(--red);
border-color:var(--red);
color:#fff;
}
.btn-danger-brand:hover{
background:#90161a; /* darker red */
border-color:#90161a;
color:#fff;
}

.btn-gold{
background:var(--gold);
border-color:var(--gold);
color:#111;
font-weight:700;
}
.btn-gold:hover{
filter:brightness(.95);
}

/* Navbar brand mark */
.navbar-brand .logo-mark{
width:40px; height:40px; border-radius:12px;
background:linear-gradient(135deg, var(--purple), var(--red));
display:inline-grid; place-items:center;
color:#fff; font-weight:800;
}

/* Icon pill / accents */
.icon-pill{
width:46px; height:46px;
border-radius:14px;
display:grid; place-items:center;
background:rgba(55,27,89,.10);
color:var(--purple);
flex:0 0 auto;
}

/* Hero background tuned to brand */
.hero{
position:relative;
overflow:hidden;
background:
radial-gradient(1200px 500px at 80% 20%, rgba(55,27,89,.18), transparent 60%),
radial-gradient(900px 420px at 20% 40%, rgba(179,28,32,.14), transparent 55%),
radial-gradient(900px 420px at 70% 70%, rgba(212,175,55,.14), transparent 55%),
linear-gradient(180deg, #ffffff, #fbf9ff);
}

/* Gold underline option for headings */
.section-title{
letter-spacing:-.02em;
}
.section-underline{
display:inline-block;
padding-bottom:.35rem;
border-bottom:3px solid var(--gold);
}

/* Links + focus */
a{ color:var(--purple); }
a:hover{ color:var(--red); }
.btn:focus, .form-control:focus, .form-select:focus{
box-shadow: 0 0 0 .25rem rgba(55,27,89,.20);
border-color: rgba(55,27,89,.35);
}
.navbar-brand {
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-right: var(--bs-navbar-brand-margin-end);
font-size: var(--bs-navbar-brand-font-size);
color: var(--bs-navbar-brand-color);
text-decoration: none;
white-space: nowrap;
}

/* ######################### change ######################### */
/* Overall section */
.t3-change-section{
background:#fff;
overflow:hidden;
}

/* Top red band */
.t3-change-band{
background:var(--t3-red);
padding:34px 0;
}
.t3-change-title{
color:#fff;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
font-size:clamp(2rem, 4vw, 4.2rem);
line-height:1;
}

/* Body */
.t3-change-body{
position:relative;
background:#fff;
}

/* Right image block */
.t3-change-image{
height:100%;
min-height:420px;
background-size:cover;
background-position:center;
position:relative;
}

/* Fade the image into the white area (like the screenshot) */
.t3-change-image::before{
content:"";
position:absolute;
inset:0;
/* left fade -> transparent to show the image */
background:linear-gradient(90deg,
 rgba(255,255,255,1) 0%,
 rgba(255,255,255,.90) 20%,
 rgba(255,255,255,.55) 40%,
 rgba(255,255,255,0) 65%);
pointer-events:none;
}

/* Checklist */
.t3-checklist{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:32px;
}
.t3-checklist li{
position:relative;
padding-left:64px;
font-size:clamp(1.35rem, 2.1vw, 2.6rem);
font-weight:500;
color:#1f2937;
line-height:1.15;
}

/* Red check icon (CSS only) */
.t3-checklist li::before{
content:"✓";
position:absolute;
left:0;
top:50%;
transform:translateY(-52%);
font-weight:900;
font-size:2.4rem;
color:var(--t3-red);
line-height:1;
}

/* Mobile image sizing (optional) */
.t3-change-image-mobile{
min-height:260px;
border-radius:16px;
overflow:hidden;
}
.t3-change-image-mobile::before{
/* slightly softer fade on mobile */
background:linear-gradient(180deg,
  rgba(255,255,255,0) 0%,
  rgba(255,255,255,0) 55%,
  rgba(255,255,255,.75) 85%,
  rgba(255,255,255,1) 100%);
}

/* Optional: give the checklist area a little breathing room like the design */
@media (min-width:992px){
.t3-change-body .container{
  padding-top:18px;
  padding-bottom:18px;
}
}

/* ################ Issue section ##################### */
.t3-issue-grid{
background:#fff;
}

.t3-issue-card{
display:block;
text-decoration:none;
border-radius:0;              /* screenshot looks square */
overflow:hidden;
background:#fff;
border:0;
transition:transform .2s ease, box-shadow .2s ease;
}

/* Optional subtle hover (feel free to remove) */
.t3-issue-card:hover{
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(0,0,0,.12);
}

.t3-issue-img{
width:100%;
aspect-ratio: 4 / 3;          /* matches the tall-ish image area */
overflow:hidden;
background:#f3f3f3;
}

.t3-issue-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.t3-issue-bar{
padding:22px 16px;
text-align:center;
color:#fff;
font-weight:800;
font-size:clamp(1.25rem, 2vw, 2rem);
line-height:1.1;
letter-spacing:.01em;
}

.t3-bar-purple{ background:var(--t3-purple); }
.t3-bar-red{ background:var(--t3-red); }
.t3-bar-blue{ background:var(--t3-blue); }

/* keep spacing similar to screenshot */
@media (min-width:992px){
.t3-issue-grid{ padding-top:60px; padding-bottom:60px; }
}

/* ############################ Empowering Section ####################### */
/* Hero sizing */
.t3-hero{
min-height: 680px;
padding: 70px 0 40px;
color:#fff;
}
.t3-hero-inner{ position:relative; z-index:2; }

/* Background + overlays */
.t3-hero-bg{
position:absolute; inset:0;
background-size:cover;
background-position:center;
filter:saturate(1.05);
transform:scale(1.02);
}
.t3-hero-overlay{
position:absolute; inset:0;
background:
  linear-gradient(90deg, rgba(55,27,89,.82) 0%, rgba(55,27,89,.55) 45%, rgba(55,27,89,.25) 100%),
  radial-gradient(900px 450px at 70% 25%, rgba(212,175,55,.25), transparent 60%),
  radial-gradient(900px 450px at 30% 70%, rgba(179,28,32,.22), transparent 60%);
}

/* Left image */
.t3-hero-people{
/* border-radius:18px;
box-shadow: 0 18px 45px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.18); */
}

/* Right logo */
.t3-hero-logo-wrap{
max-width: 420px;
}
.t3-hero-logo{
width:100%;
height:auto;
filter: drop-shadow(0 18px 35px rgba(0,0,0,.45));
}

/* Kicker row */
.t3-hero-kicker{
font-weight:800;
letter-spacing:.02em;
text-transform:uppercase;
}
.t3-kicker-pill{
color:#fff;
opacity:.95;
font-size: clamp(1.2rem, 2vw, 2.2rem);
}
.t3-kicker-divider{
color: rgba(255,255,255,.7);
font-size: clamp(1.2rem, 2vw, 2.2rem);
}
.t3-kicker-accent{
color: var(--t3-gold);
font-size: clamp(1.2rem, 2vw, 2.2rem);
text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Tagline */
.t3-hero-tagline{
font-weight:500;
font-size: clamp(1.4rem, 2.4vw, 2.6rem);
color: rgba(255,255,255,.92);
text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Features strip */
.t3-hero-features{
background: rgba(18, 10, 30, .30);
border: 1px solid rgba(255,255,255,.14);
border-radius: 16px;
padding: 18px 12px;
backdrop-filter: blur(6px);
}
.t3-feature{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding: 10px 8px;
height:100%;
text-align:left;
}
.t3-feature-icon{
width:44px; height:44px;
border-radius:12px;
display:grid; place-items:center;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
font-size: 1.4rem;
}
.t3-feature-text{
font-weight:600;
line-height:1.15;
color: rgba(255,255,255,.92);
}

/* Responsive tweaks */
@media (max-width: 991.98px){
.t3-hero{ padding: 50px 0 28px; min-height:auto; }
.t3-hero-logo-wrap{ max-width: 320px; margin: 0 auto; }
}

/* ######################### Our Fight page ################################ */
/* HERO */
.our-fight-hero{
  position:relative;
  height:400px;
  background:url('../img/t3hero_bg.webp') center/cover no-repeat;
}
.fight-label{
  position:absolute;
  top:30px;
  left:40px;
  background:rgba(55,27,89,.9);
  color:#fff;
  padding:12px 26px;
  font-size:2rem;
  font-weight:800;
  letter-spacing:1px;
}

/* TEXT */
.text-purple{ color:var(--purple); }

/* CARDS */
.fight-card{
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  height:100%;
}

.fight-bar{
  color:#fff;
  font-weight:800;
  padding:12px;
  text-align:center;
  font-size:1.2rem;
}
.fight-bar.purple{ background:var(--purple); }
.fight-bar.red{ background:var(--red); }
.fight-bar.blue{ background:var(--blue); }

.fight-body{
  padding:16px;
  font-size:.95rem;
  color:#444;
}

/* ################# SSL Page Css ############## */
.ssl-hero{
      background: linear-gradient(135deg, rgba(55,27,89,.95), rgba(179,28,32,.55));
      color:#fff;
      padding: 56px 0 44px;
      position:relative;
      overflow:hidden;
    }

    .ssl-hero::after{
      content:"";
      position:absolute;
      inset:-40% -30%;
      background: radial-gradient(circle at 35% 30%, rgba(212,175,55,.35), transparent 55%);
      transform: rotate(-8deg);
      pointer-events:none;
    }

    .ssl-badge{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.45rem .8rem;
      border-radius:999px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.18);
      font-weight:700;
      letter-spacing:.02em;
    }

    .ssl-badge-dot{
      width:10px; height:10px;
      border-radius:999px;
      background: var(--t3-gold);
      box-shadow: 0 0 0 4px rgba(212,175,55,.18);
    }

    .ssl-card{
      background:#fff;
      border: 1px solid var(--t3-border);
      border-radius: 18px;
      box-shadow: 0 18px 40px rgba(20,10,35,.10);
    }

    .ssl-card-body{
      padding: 28px;
    }

    .ssl-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }

    .ssl-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(55,27,89,.06);
      border: 1px solid rgba(55,27,89,.12);
      font-weight:700;
      color: var(--t3-purple);
    }

    .t3-pill .bar{
      width:10px; height:10px;
      border-radius:999px;
      background: var(--t3-red);
    }

    .t3-content h2{
      font-size: 1.15rem;
      margin-top: 26px;
      margin-bottom: 10px;
      font-weight: 800;
      color: var(--t3-purple);
    }

    .t3-content p{
      line-height: 1.8;
      color:#2b2b38;
      margin-bottom: 14px;
    }

    .t3-callout{
      margin-top: 18px;
      padding: 16px 16px;
      border-radius: 14px;
      background: rgba(212,175,55,.10);
      border: 1px solid rgba(212,175,55,.22);
    }

    .t3-footer-note{
      color:#5b556a;
      font-size:.95rem;
    }

    a.t3-link{
      color: var(--t3-red);
      font-weight: 800;
      text-decoration: none;
    }
    a.t3-link:hover{ text-decoration: underline; }

    @media (max-width: 576px){
      .t3-card-body{ padding: 20px; }
    }


    /* ########################## Volunteer Page css ######################  */
    /* HERO */
    .v_hero{
      position:relative;
      height:270px;
      background:url('https://placehold.co/1600x520/png') center/cover no-repeat;
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .v_hero::after{
      content:"";
      position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(55,27,89,.20));
    }
    .v_hero h1{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      z-index:2;
      width:min(980px, 92vw);
      text-align:center;
      font-weight:900;
      letter-spacing:-.02em;
      color:rgba(55,27,89,.95);
      text-shadow: 0 2px 18px rgba(255,255,255,.8);
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    /* PANEL */
    .panel{
      max-width: 980px;
      margin: -34px auto 50px;
      background: rgba(239,233,248,.92);
      border:1px solid rgba(215,205,234,.9);
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(20,10,35,.12);
      backdrop-filter: blur(4px);
      overflow:hidden;
    }
    .panel-inner{ padding: 26px 22px 28px; }

    h2.section-title{
      font-weight:900;
      color:var(--t3-purple);
      font-size: 1.35rem;
      margin: 18px 0 10px;
    }

    .form-card{
      background: rgba(255,255,255,.45);
      border:1px solid rgba(215,205,234,.85);
      border-radius: 14px;
      padding: 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }

    .form-control, .form-select, textarea{
      border-radius: 10px;
      border: 1px solid rgba(215,205,234,.95);
      background: rgba(255,255,255,.62);
      padding: 12px 14px;
    }
    .form-control:focus, .form-select:focus, textarea:focus{
      border-color: rgba(55,27,89,.45);
      box-shadow: 0 0 0 .25rem rgba(55,27,89,.12);
    }

    .check-grid .form-check{
      margin-bottom: .65rem;
    }
    .form-check-input{
      width: 1.1rem;
      height: 1.1rem;
      border:1px solid rgba(55,27,89,.25);
    }
    .form-check-input:checked{
      background-color: var(--t3-purple);
      border-color: var(--t3-purple);
    }
    .muted-note{ color:#5b556a; }

    .submit-wrap{
      display:flex;
      justify-content:center;
      margin-top: 18px;
    }
    .t3-submit{
      border:none;
      padding: 14px 26px;
      border-radius: 12px;
      font-weight: 900;
      font-size: 1.25rem;
      color:#fff;
      background: linear-gradient(180deg, var(--btn1), var(--btn2));
      box-shadow: 0 12px 26px rgba(20,10,35,.25);
      width: min(520px, 100%);
    }

    /* spacing like screenshot */
    .spacer{ height:6px; }


    /* ################# who we are page css ####################### */
    /* HERO */
    .who-hero{
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .hero-wrap{
      position:relative;
      overflow:hidden;
      min-height: 230px;
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(246,242,251,1));
    }
    .hero-title{
      font-weight: 900;
      letter-spacing: .03em;
      color: rgba(35,31,46,.92);
      font-size: clamp(2rem, 4vw, 3.2rem);
      text-transform: uppercase;
    }
    .hero-image{
      position:absolute;
      right:0;
      top:0;
      height:100%;
      width:55%;
      background: url("https://placehold.co/1200x450/png") center/cover no-repeat;
    }
    .hero-image::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.88) 18%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 70%);
    }

    /* CARDS / PANELS */
    .who-card{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 18px 45px rgba(20,10,35,.10);
    }
    .section-pad{ padding: 26px 22px; }

    .lead-muted{ color:var(--muted); line-height:1.8; }
    .title-strong{
      font-weight: 900;
      color: var(--t3-purple);
      letter-spacing: -.02em;
    }

    /* Round icon */
    .round-icon{
      width: 86px; height: 86px;
      border-radius: 999px;
      background: rgba(55,27,89,.08);
      border: 1px solid rgba(55,27,89,.14);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      flex: 0 0 auto;
    }
    .round-icon img{ width: 54px; height: 54px; object-fit: contain; }

    /* "We represent" section */
    .represent-title{
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .02em;
      color: rgba(35,31,46,.92);
      font-size: clamp(1.45rem, 2.3vw, 2.05rem);
    }

    .checkline{
      display:flex;
      gap:14px;
      margin-bottom: 22px;
    }
    .checkmark{
      width:28px; height:28px;
      border-radius: 8px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
      background: rgba(179,28,32,.10);
      border: 1px solid rgba(179,28,32,.25);
    }
    .checkmark svg{ width:18px; height:18px; fill: var(--t3-red); }
    .checkline h5{
      margin:0;
      font-weight: 900;
      color: rgba(35,31,46,.92);
    }
    .checkline p{
      margin:6px 0 0;
      color: var(--muted);
      line-height:1.7;
    }

    .right-photo{
      position:relative;
      min-height: 420px;
      border-radius: 16px;
      overflow:hidden;
      background: url("https://placehold.co/900x900/png") center/cover no-repeat;
      box-shadow: 0 18px 45px rgba(20,10,35,.12);
    }
    .right-photo::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(246,242,251,1) 0%, rgba(246,242,251,.70) 28%, rgba(246,242,251,.25) 52%, rgba(246,242,251,0) 72%);
    }

    /* Small bottom image hint like screenshot */
    .bottom-strip{
      margin-top: 18px;
      position:relative;
      height: 120px;
      border-radius: 16px;
      overflow:hidden;
      background: url("https://placehold.co/1200x300/png") center/cover no-repeat;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 12px 28px rgba(20,10,35,.08);
    }
    .bottom-strip::before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(90deg, rgba(246,242,251,1) 0%, rgba(246,242,251,.62) 34%, rgba(246,242,251,0) 70%);
    }

    /* Responsive */
    @media (max-width: 991.98px){
      .hero-image{ width: 100%; opacity:.95; }
      .hero-image::before{
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.70) 35%, rgba(255,255,255,0) 70%);
      }
      .hero-wrap{ min-height: 260px; }
    }