:root {
  --primary: #0d47a1;
  --secondary: #d32f2f;
  --dark: #0a1f44;
  --light: #f8faff;
  --text: #222;
  --muted: #666;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

body{margin:0;font-family:Poppins;background:#f4f8ff;color:#222;scroll-behavior:smooth}
.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 0px;
  font-size: 16px;
}
.nav-flex{display:flex;justify-content:space-between;align-items:center}
.header{background:linear-gradient(90deg,#0d47a1,#42a5f5);color:#fff;padding:15px 0;position:sticky;top:0;z-index:1000}
nav ul{display:flex;gap:20px;list-style:none}
nav a{color:#fff;text-decoration:none;font-weight:500}
nav a:hover{opacity:.7}
.hero{display:flex;align-items:center;justify-content:center;padding:20px 0;text-align:center;background:linear-gradient(135deg,#e3f2fd,#bbdefb)}
.hero h1{font-size:3.2rem;color:#0d47a1}
.hero p{font-size:1.2rem;margin-top:10px}
.btn{padding:12px 28px;background:#0d47a1;color:#fff;border-radius:30px;text-decoration:none;display:inline-block;margin-top:20px;transition:.3s}
.btn:hover{background:#1565c0;transform:translateY(-3px)}
.section {
  padding: 10px 0;
  position: relative;
}

.section-dark {
  background: linear-gradient(135deg, #840d0d4f, #0f4b909e);
  color: #340404;
}

.section-light {
  background: #ffffff;
  padding: 60px 0;
}

.section-grey {
  background: #0447e770;
  padding: 60px 0;
}

.section-blue {
  background: linear-gradient(135deg, #0d47a1, #1976d2);
  color: #fff;
  padding: 60px 0;
}
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
    margin-bottom:3%;
}
.card {
  background: linear-gradient(90deg, #5391e1db, #c62f2fa8);
  color: #222;
  padding: 25px;
  font-size:18px;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.card1 {
  background: linear-gradient(90deg,#5d59f0d6,#bb1c1c94);
  color: #222;
  padding: 25px;
  border-radius: 10px;
  font-size:18px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.card1:hover {
   transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.card:hover {
   transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.cardsw{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
    margin-bottom:3%;
}
.cardw {
  background: linear-gradient(135deg,#4c67cf,#d03d3d);
  color: #222;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.cardw p{
  font-size:18px;
  color: #270303;
}
.cardw:hover {
   transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.stats{display:flex;justify-content:space-around;text-align:center}
.stat h2{color:#0d47a1;font-size:2.5rem}
.footer{background:linear-gradient(180deg, #2c3dc4bf, #bb2424c2);color:#fff;text-align:center;padding:20px}
.fade {
  opacity: 0;   /* FIXED */
  transform: translateY(40px);
  transition: 0.8s ease;
}


.fade.show{
    opacity:1;
    background:linear-gradient(0deg, #c1242482, #2d2fbc85);
    padding:2% 0;
    transform:translateY(0);
}

@media(max-width:768px){nav ul{flex-direction:column}.hero h1{font-size:2rem}.stats{flex-direction:column;gap:20px}}
.floating-btn{position:fixed;bottom:20px;right:20px;background:#0d47a1;color:#fff;padding:15px 20px;border-radius:50px}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media(max-width:768px){
  .grid-2 { grid-template-columns: 1fr; }
}
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #0d47a1;
}

p {
  line-height: 1.7;
  color: #fae2e2;
  font-size:18px;
}

/* TOP BAR */
.top-bar {
  background: #0d47a1;
  color: #fff;
  font-size: 14px;
  padding: 0 0;
}
.right {
  padding: 0% 0;
  margin-right:10px;
}
.top-bar span {
  margin-right: 20px;
  cursor: pointer;
}

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

/* BUTTONS */
.donate-btn {
  background: #d32f2f;
  color: #fff;
  padding: 6px 15px;
  margin-right: 15px;
  border-radius: 20px;
}

.member-btn {
  background: #fff;
  color: #0d47a1;
  padding: 6px 15px;
  border-radius: 20px;
}

/* MAIN HEADER */
.main-header {
  background: #fff;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.nav-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  background: radial-gradient(#e4151500, #223ee500);
}

.logo {
  font-weight: 700;
  font-size: 22px;
  color: #0d47a1;
}

/* NAV */
nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
}

nav a {
  text-decoration: none;
  color: #200000;
  font-weight: 500;
  font-size: 18px;
}

nav a:hover {
  color: #ede1e1;
  background:#0000;
}

/* REPORT BUTTON */
.report-btn {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
}
.hero {
  background: linear-gradient(135deg, #1976d28f, #e93800bf);
  color: #fff;
  padding: 120px 0;
  text-align: center;
}

.btn-blue {
  background: #fff;
  color: #0d47a1;
  padding: 12px 25px;
  margin: 10px;
}

.btn-red {
  background: #d32f2f;
  color: #fff;
  padding: 12px 25px;
}
/* BANNER HEADER */
.banner-header {
  background:linear-gradient(180deg, #d32f2f, #0d47a1);
  color: #fff;
  padding: 2% 4%;
  position: relative;
  overflow: hidden;
}

/* LIGHT SWEEP */
.banner-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
  animation: sweep 6s infinite;
}

@keyframes sweep {
  0% { left: -100%; }
  100% { left: 120%; }
}

.banner-header::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background: rgba(255,255,255,0.05);
  transform: rotate(25deg);
  animation: shine 6s linear infinite;
}

@keyframes shine {
  0% {transform: translateX(-100%) rotate(25deg);}
  100% {transform: translateX(100%) rotate(25deg);}
}

.banner-flex {
  display: flex;
  justify-content: flex-start;   /* IMPORTANT */
  align-items: center;
  gap: 5%;                     /* controls space between logo & text */
}

/* TEXT FIX */
.banner-text {
  flex: 1;
  margin-left: 10px;
}

.banner-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: 320%;
    font-weight: 900;
    color: #e9edfc;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
      /* GOLD PREMIUM EFFECT */
  background: linear-gradient(90deg,#cad4fad4,#cdb775,#ef9292);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* GLOW */
  text-shadow: 0 2px 10px rgba(194, 220, 254, 0.3);
}

.banner-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    max-width: 88%;
    color: #fff59d;
    text-align: center;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    margin-top: 2%;
}

.text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #09095f;
    text-align: justify;
    margin-left: 10%;
    margin-right: 10%;
}

.text ul {
  margin: 15px 0;
  padding-left: 7%;
  color:#0c1633;
}

.text li {
  margin-bottom: 8px;
  margin-left:5%;
  font-size:18px;
}
/* LOGO FIX */
.banner-logo {
  flex: 0 0 auto;
  margin-right: 10px;
}

.banner-logo img {
  width: 190px;     /* increase size */
  transition: transform 0.4s ease;
  max-width: 100%;
}
.banner-logo img:hover {
  transform: scale(1.05) rotate(-1deg);
}
/* NAV UPGRADE */
.main-nav {
  background: radial-gradient(#df3f3fcf, #2443ff61);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 999;
}
.hero-premium {
  min-height:220px;
  padding: 1% 10%;
  background: linear-gradient(135deg,#a10d0dad,#1e88e5c4);
  color: #fff;
  text-align: center;
}
.hero-premium h1{font-size:250%;}
.hero-premium p{font-size:150%;margin-top:10px
}

.home-premium {
  background: linear-gradient(135deg,#a10d0d8f,#1e88e5c4);
  color: #fff;
  padding: 1% 10%;
}
.home-premium h1{font-size:250%;}
.home-premium h2{font-size:250%;}
.home-premium p{font-size:150%;margin-top:10px
}

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

.cfib-header {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* LEFT LOGO BLOCK */
.cfib-logo {
  width: 220px;
  background: linear-gradient(135deg, #e30a0a, #0988f1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.cfib-logo img {
  width: 100%;
  max-width: 100%;
  margin-left: 0%;
}

/* RIGHT SIDE */
.cfib-header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* RED TITLE BAR */
.cfib-title-bar {
  background: linear-gradient(135deg,#d32f2f,#b71c1c);
  color: #fff;
  font-size: 300%;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 3%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Shine effect */
.cfib-title-bar::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background: rgba(255,255,255,0.08);
  transform: rotate(25deg);
  animation: shine 6s linear infinite;
}

/* BLUE TAGLINE */
.cfib-tagline {
  background: linear-gradient(135deg,#1a237e,#0d47a1);
  color: #fff;
  padding: 3%;
  text-align: center;
  font-size: 150%;
  line-height: 1.6;
}

/* NAVBAR */
.cfib-nav {
  background: #0d47a1;
}

.cfib-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
}

.cfib-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.cfib-nav a:hover {
  color: #ffeb3b;
}

/* REPORT BUTTON */
.report-btn {
  background: #d32f2f;
  padding: 10px 18px;
  border-radius: 25px;
  color: #fff;
}

/* TOP BAR */
.top-strip {
  background: #0d47a1;
  color: #fff;
  font-size: 13px;
  padding: 6px 0;
}

/* ANIMATION */
@keyframes shine {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}
/* ===== DESIGN SYSTEM ===== */
:root {
  --primary: #0d47a1;
  --secondary: #d32f2f;
  --dark: #0a1f44;
  --light: #f4f8ff;
  --gold: #ffe082;
}

/* SECTION BASE */
.cfib-section {
  padding: 80px 0;
  position: relative;
}

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

/* HEADINGS */
.cfib-title {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;

  background: linear-gradient(90deg,#0d47a1,#d32f2f);
  -webkit-background-clip: text;
  color: transparent;
}

.cfib-subtitle {
  text-align: center;
  max-width: 700px;
  margin: auto;
  color: #555;
}
.cfib-hero {
  background: linear-gradient(135deg,#0d47a1,#1e88e5);
  color: #fff;
  padding: 140px 0;
  text-align: center;
}
/* HERO LAYOUT */
.hero-flex {
  display: flex;
  align-items: center;
  gap: 30px;
}

.hero-left {
    flex: 1 0 50%;
}

.hero-slider {
  flex: 0 0 30%;
  position: relative;
  overflow: hidden;
  max-width:100%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* SLIDES */
.slides {
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;          /* FIXED HEIGHT */
  object-fit: cover;      /* prevents stretching */
  display: none;
  border-radius: 12px;
}

.slide.active { 
  display: block;
  animation: fadeSlide 1s ease;
}

@keyframes fadeSlide {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* ARROWS */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
  background: #d32f2f;
}

/* DOTS */
.dots {
  text-align: center;
  margin-top: 10px;
}

.dots span {
  height: 10px;
  width: 10px;
  margin: 5px;
  background: #ccc;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
}

.dots span.active {
  background: #d32f2f;
}

/* RESPONSIVE */
@media(max-width:768px){
  .hero-flex {
    flex-direction: column;
  }
}
@media(max-width: 1024px){
  .hero-slider {
    flex: 0 0 350px;
  }

  .slide {
    height: 220px;
  }
}

@media(max-width: 768px){
  .hero-flex {
    flex-direction: column;
    text-align: center;
  }

  .hero-slider {
    width: 100%;
    flex: none;
  }

  .slide {
    height: 200px;
  }
}
.trust-bar {
  background: linear-gradient(180deg,#0c3678a8,#7b27279e);
  color: #fff;
  padding: 2% 0;
  text-align: center;
}

.container1 {
  min-height:220px;
  background:linear-gradient(135deg,#0a47c054,#ea06063b);
  padding: 1% 10%;
  margin-bottom:0%;
}
.container1 h2{
    font-size:28px;
    text-align: center;
}
.container1 p{
  font-size:18px;
  text-align: justify;
  margin-left: 0%;
  color: #0d3056;
}
.container1 h3{
    font-size:24px;
    text-align: center;
    color: #19308a;
}
.containerh1 {
  min-height:180px;
  background:linear-gradient(135deg,#0a47c054,#ea06063b);
  padding: 1% 10%;
  margin-bottom:0%;
}
.containerh1 h1{
    font-size:38px;
    text-align: center;
    color: #1f31c8;
}
.containerh1 p{
  font-size:20px;
  text-align: center;
  margin-left: 0%;
  color: #0d3056;
}
.container2 {
    min-height: 220px;
    padding: 0% 10%;
    margin-bottom: 0%;
}
.container2 h3{
    font-size:24px;
    text-align: left;
    color: #19308a;
}
.container2 h2 {
    text-align: center;
}
.container2 p{
    font-size: 18px;
    text-align: justify;
    color: #2e0c50;
}

.container2 ul {
  margin: 15px 0;
  padding-left: 7%;
  color:#0c1633;
}

.container2 li {
  margin-bottom: 8px;
  margin-left:5%;
  text-align: left;
  font-size:18px;
}

/* SECTION BACKGROUND */
.banner-premium {
  padding: 3% 0;
  background: linear-gradient(135deg,#0a47c054,#ea06063b);
}

/* GRID LAYOUT */
.banner-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr; /* give more space to text */
  gap: 40px;
  align-items: center;
}

/* LEFT CONTENT */
.banner-content h1 {
  font-size: 38px;
  font-weight: 800;
  color: #0d47a1;
  margin-bottom: 20px;
}

.banner-content {
  max-width: 600px;
}

.banner-content .lead {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.banner-content p {
  margin-top: 15px;
  line-height: 1.5;
  color: #200202;
  text-align: justify;
}

/* RIGHT CARD */
.banner-card {
  flex-direction: column;
  display: flex;
  justify-content: center;
  height: 90%;
  background: linear-gradient(135deg,#d32f2f75,#0d47a170);
  width: 100%;
  max-width: 420px;   /* prevents it from becoming too big */
  margin-left: auto;  /* keeps it aligned right */
  padding: 4%;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
}

/* CARD TEXT */
.banner-card h2 {
  color: #1d0c95;
  margin-bottom: 15px;
}
.banner-card p {
  color: #5a0303;
  margin-bottom: 8px;
  text-align: justify;
}

.banner-card ul {
  margin: 15px 0;
  padding-left: 20px;
}

.banner-card li {
  margin-bottom: 8px;
  font-size:18px;
}

/* HIGHLIGHT TEXT */
.highlight {
  margin-top: 10px;
  font-weight: 600;
  color: #0d47a1;
}

/* BUTTONS */
.hero-buttons {
  margin-top: 25px;
}

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

  .banner-content h1 {
    font-size: 28px;
  }
}

.banner-card:hover {
  transform: translateY(-8px);
}
@media(max-width: 992px){
  .banner-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

}
/* HERO */
.about-hero {
  background: linear-gradient(135deg,#4789f094,#e45d5d66);
  color: #fff;
  padding: 0 0;
  text-align: center;
}

/* SECTIONS */
.about-section {
  padding: 1% 0;
  background: linear-gradient(135deg,#2729d447,#ea36364f);
  text-align: center;
}

.about-section-grey {
  padding: 1% 0;
  background: linear-gradient(180deg,#0d47a17a,#c0151585);
  color: #fff;
}
.about-section-grey h2{
  text-align:center;
}
.about-section-grey p{
  text-align:justify;
  color: #300303;
}
.about-section-dark {
  padding: 2% 0;
  background: linear-gradient(180deg,#0d47a17a,#c0151585);
  color: #fff;
}

.about-section-dark1 {
  padding: 0 0;
  background: linear-gradient(180deg,#0d47a17a,#c0151585);
  color: #fff;
}

/* GRID */
.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
}

/* HIGHLIGHT BOX */
.about-highlight {
  background: linear-gradient(135deg,#4d4fe97a,#ee5a5a7a);
  padding: 0px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-size: 18px;
}
.about-highlight h3{
    font-weight: 700;
  letter-spacing: -0.5px;
  text-align:center;
  font-size: 28px;
}
.about-highlight p{
text-align:justify;
}

.about-highlight ul {
  margin: 15px 0;
}

.about-highlight li {
  margin-bottom: 8px;
  margin-left:5%;
  text-align: justify;
}


/* MISSION */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.mission-card {
  background: rgba(255,255,255,0.1);
  padding: 2%;
  border-radius: 12px;
}

.mission-card h2{
  font-size: 2.2rem;
  color: #0d47a1;
  text-align: center;
}

.mission-card p{
  background: linear-gradient(90deg,#3f60e2c2,#ee5e5e);
  padding: 2% 2%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 4%;
  border-radius: 12px;
  color: #0d065b;
  font-size:18px;
}
.contact-highlight {
  background: linear-gradient(135deg,#4d4fe97a,#ee5a5a7a);
  padding: 12% 5%;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-size: 18px;
}
.contact-highlight h3{
  font-weight: 700;
  text-align:center;
  font-size: 28px;
}
.contact-highlight p{
text-align:center;
}

.contact-highlight ul {
  margin: 15px 0;
}

.contact-highlight li {
  margin-bottom: 8px;
  margin-left:5%;
  text-align: justify;
}

/* CTA */
.about-cta {
  background: linear-gradient(135deg,#2f60d3ab,#cc4343b5);
  color: #fff;
  text-align: center;
  padding: 2% 0;
}

/* LIST */
.styled-list li {
  margin: 10px 0;
  color: black;
}

/* CENTER TEXT */
.center-text {
  text-align: center;
  margin-top: 20px;
  color: #360505;
}

/* RESPONSIVE */
@media(max-width:768px){
  .about-grid,
  .mission-grid {
    grid-template-columns: 1fr;
  }
}
.about-text h2{
  font-size: 2.2rem;
  margin-bottom: 20px;
  text-align:center;
  color: #0d47a1;
}
.about-text p{
  color: #0e0505;
  text-align: justify;
  padding: 1% 0;
  font-size:18px;
}

.about-text1 p{
  color: #0e0505;
  text-align: center;
  padding: 0% 0;
  font-size:18px;
}

.work-text p{
  color: #0e0505;
  text-align: justify;
  padding: 1% 0;
}
/* HERO */
.work-hero {
  background: linear-gradient(135deg,#4789f094,#e45d5d66);
  color: #fff;
  padding: 0px 0;
  text-align: center;
}

/* SECTIONS */
.work-section {
  padding: 80px 0;
  background: #fff;
}

.work-section-grey {
  padding: 80px 0;
  background: #f4f7fc;
}

.work-section-dark {
  padding: 3% 0;
  background: linear-gradient(135deg, #4557e69e, #c835358f);
  color: #fff;
}

/* GRID */
.work-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
}

/* HIGHLIGHT BOX */
.work-highlight {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

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

.process-step {
  background: linear-gradient(90deg,#829bff75,#e77a7a9e);
  padding: 15px;
  border-radius: 12px;
  text-align: center;
}

.process-step p{
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  color: #07154f;
}

.process-step span {
  font-size: 28px;
  font-weight: 700;
  color: #d32f2f;
}
/* REMOVE UNDERLINE FROM TOP BAR BUTTONS */
.top-bar a {
  text-decoration: none;
  color: white;
}

/* ENSURE ON HOVER ALSO */
.top-bar a:hover {
  text-decoration: none;
}
/* CTA */
.work-cta {
  background: linear-gradient(135deg, #5162e99e, #bc4343ad);
  color: #fff;
  text-align: center;
  padding: 2% 0;
}

/* RESPONSIVE */
@media(max-width:768px){
  .work-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }
}
/* FORM */
.membership-form {
  max-width: 700px;
  margin-top: 20px;
}

.membership-form input,
.membership-form textarea,
.membership-form select {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: inherit;
}

/* GRID */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* FORM WRAPPER */
.form-wrapper {
  background: linear-gradient(135deg, #fffaf1ed, #f5e4f6b5);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
  max-width: 800px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

/* subtle glow border */
.form-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg,#d32f2f,#0d47a1);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

/* TITLE */
.form-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 32px;
}

/* GRID */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* GROUP */
.form-group {
  position: relative;
  margin-top: 20px;
}

/* INPUT */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px;
  border: none;
  border-bottom: 2px solid #ccc;
  background: transparent;
  font-size: 16px;
  outline: none;
  margin-top: 3%;
}

/* LABEL */
.form-group label {
  position: absolute;
  left: 10px;
  top: 12px;
  color: #888;
  font-size: 14px;
  transition: 0.3s;
  pointer-events: none;
}

/* FLOAT EFFECT */
.form-group input:focus + label,
.form-group input:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label,
.form-group select:focus + label,
.form-group select:valid + label {
  top: -10px;
  font-size: 12px;
  color: #0d47a1;
}

/* FOCUS EFFECT */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-bottom: 2px solid #d32f2f;
}

/* BUTTON */
.premium-btn {
  margin-top: 30px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg,#d32f2f,#b71c1c);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

/* BUTTON HOVER */
.premium-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(211,47,47,0.3);
}

/* RESPONSIVE */
@media(max-width:768px){
  .form-row {
    grid-template-columns: 1fr;
  }
}
/* CLICKABLE CARDS */
.membership-option {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

/* HOVER */
.membership-option:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* ACTIVE SELECTED */
.membership-option.active {
  border: 2px solid #d32f2f;
  background: linear-gradient(135deg, #c6b492, #d1a9d3);
}
/* FORM WRAPPER */
.premium-form {
  max-width: 850px;
  margin: 40px auto;
  padding: 3%;
  border-radius: 16px;

  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(15px);

  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

/* GRID */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* INPUT GROUP */
.form-group {
  position: relative;
  margin-top: 3%;
}

/* INPUTS */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px 0 14px 0;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 15px;
  outline: none;
  background: #fff;
}

/* TEXTAREA */
.textarea-group textarea {
  height: 120px;
  resize: none;
}

/* FLOATING LABEL */
.form-group label {
  position: absolute;
  left: 30%;
  top: 35%;
  color: #777;
  font-size: 14px;
  transition: 0.3s;
  pointer-events: none;
}

/* ICON */
.form-group .icon {
  position: absolute;
  right: 12px;
  top: 14px;
  font-size: 16px;
  opacity: 0.6;
}

/* FLOAT EFFECT */
.form-group input:focus + label,
.form-group input:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label {
  top: -8px;
  left: 10px;
  background: #fff;
  padding: 0 6px;
  font-size: 12px;
  color: #0d47a1;
}

/* FOCUS EFFECT */
.form-group input:focus,
.form-group textarea:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(13,71,161,0.1);
}

/* BUTTON */
.premium-btn {
  margin-top: 25px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;

  background: linear-gradient(135deg,#d32f2f,#b71c1c);
  color: #fff;

  transition: 0.3s;
}

.premium-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(211,47,47,0.3);
}

/* RESPONSIVE */
@media(max-width:768px){
  .form-row {
    grid-template-columns: 1fr;
  }
}
/* FEATURE */
.blog-feature {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.feature-image img {
  width: 100%;
  border-radius: 12px;
}

.feature-text p{
    color: #0e0505;
    text-align: justify;
    padding: 1% 0;
}
.blog-card p{
    color: #0e0505;
    text-align: center;
    padding: 1% 0;
}
/* FILTERS */
.blog-filters {
  margin-top: 20px;
}

.filter-btn {
  padding: 8px 18px;
  border: none;
  margin: 5px;
  border-radius: 20px;
  background: #eee;
  cursor: pointer;
}

.filter-btn.active {
  background: #d32f2f;
  color: #fff;
}

/* GRID */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 25px;
}

/* CARD */
.blog-card {
  background: radial-gradient(#b43c3ca8, #3452bf99);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.blog-card img {
  width: 100%;
  border-radius: 10px;
}

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

/* RESPONSIVE */
@media(max-width:768px){
  .blog-feature {
    grid-template-columns: 1fr;
  }
}
/* GLOBAL FIX */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* CONTAINER FIX */
.container,
.container1,
.container2,
.containerh1 {
  padding: 1% 20px;
}

/* TEXT SCALING */
h1 { font-size: clamp(26px, 5vw, 42px); }
h2 { font-size: clamp(22px, 4vw, 32px); }
p  { font-size: clamp(14px, 2.5vw, 18px); }

/* GRID FIXES */
@media(max-width: 992px){
  .about-grid,
  .banner-grid,
  .mission-grid,
  .work-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .cards,
  .cardsw,
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 600px){
  .cards,
  .cardsw,
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* HERO FIX */
@media(max-width:768px){
  .hero-premium {
    padding: 20px;
  }

  .hero-premium h1 {
    font-size: 22px;
  }

  .hero-premium p {
    font-size: 16px;
  }
}

/* ===== TOP BAR FIX ===== */
@media(max-width:768px){
  .top-bar .flex-between {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ===== BANNER FIX ===== */
@media(max-width:768px){
  .banner-flex {
    flex-direction: column;
    text-align: center;
  }

  .banner-logo img {
    width: 120px;
  }

  .banner-text h1 {
    font-size: 24px;
  }

  .banner-text p {
    font-size: 14px;
    max-width: 100%;
  }
}

/* ===== NAV FIX ===== */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  margin: 4px 0;
}

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

  .hamburger {
    display: flex;
  }

  #navMenu {
    position: absolute;
    top: 70%;
    left: 0;
    width: 60%;
    padding: 0% 3%;
    background: linear-gradient(135deg, #eb6464fc, #4854b9f5);

    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease;
  }

  #navMenu.active {
    max-height: 500px;
  }

  #navMenu li {
    padding: 5px;
    text-align: center;
  }

  .nav-flex {
    position: relative;
  }

  /* SUBMENU */
  .submenu {
    display: none;
  }

  .submenu.active {
    display: block;
  }
}
.section,
.about-section,
.banner-premium {
  padding: 40px 0;
}
/* ============================= */
/* GLOBAL TYPOGRAPHY SYSTEM */
/* ============================= */

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.4;
  color: #222;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

h1 { font-size: clamp(28px, 5vw, 40px); }
h2 { font-size: clamp(22px, 4vw, 28px); }
h3 { font-size: clamp(18px, 3vw, 24px); }

p {
  font-size: clamp(14px, 2.5vw, 18px);
  color: #290404;
}

.donate-btn,
.member-btn {
  text-decoration: none;
  display: inline-block;
  font-weight: 500;
  transition: all 0.3s ease;
}

.donate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(211,47,47,0.3);
}

.member-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(13,71,161,0.3);
}

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 25px;
}

.mag-card {
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  text-align: center;
}

.mag-card img {
  width: 100%;
  border-radius: 10px;
}

.mag-actions {
  margin-top: 10px;
}

/* VIEWER */
.viewer-modal {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  display:none;
  flex-direction:column;
  align-items:center;
  z-index:9999;
}

.viewer-modal canvas {
  max-width:90%;
  max-height:80%;
  margin-top:20px;
}

/* HEADER */
.viewer-header {
  background:#111;
  width:100%;
  padding:10px;
  text-align:center;
}

.viewer-header button {
  margin:5px;
  padding:8px 12px;
}

/* THUMBNAILS */
.thumbs {
  display:flex;
  overflow-x:auto;
  gap:10px;
  padding:10px;
}

.thumbs img {
  height:60px;
  cursor:pointer;
}