/*
Theme Name: Pristine Theme
Theme URI: http://example.com/pristine-theme
Author: Shrief Elsakaa
Description: Custom theme for Pristine project based on Figma design.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: pristine
*/

/* --- BASIC RESET --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Cairo', sans-serif; background-color: #F5F8EC; color: #333; line-height: 1.6;overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; }

/* --- LAYOUT UTILITIES --- */
.container { max-width: 1245px; margin: 0 auto; padding: 0 20px; }
.btn { display: inline-block; padding: 10px 20px; background-color: #2e7d32; color: #fff; border-radius: 5px; }
.btn:hover { background-color: #1b5e20; }

/* --- GRID SYSTEM (Simple) --- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Add specific Figma styles (colors, fonts) below here */
/* --- HEADER STYLES --- */

/* The Wrapper handles the 'Sticky' behavior and spacing from top */
.header-wrapper {
    position: sticky;
    top: 20px;          /* Floats 20px from the top of the browser */
    z-index: 1000;      /* Ensures it stays above all other content */
    padding: 0 20px;    /* Side margins for smaller screens */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* The actual Pill-Shaped Header */
.site-header {
    background-color: #f1f6ea; /* Light beige/green tint from image */
    border-radius: 50px;       /* Creates the full 'pill' shape */
    padding: 10px 30px;        /* Inner spacing */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;         /* Prevents it from getting too wide on huge screens */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

/* 1. Logo Styles */
.header-logo .logo-img {
    height: 50px;              /* Adjust based on your actual logo file */
    width: auto;
    display: block;
}

/* 2. Navigation Styles */
.main-navigation .nav-links {
    display: flex;
    gap: 25px;                 /* Space between menu items */
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation .nav-links li a {
    text-decoration: none;
    color: #1a3c34;            /* Dark Green Text */
    font-weight: 600;
    font-size: 16px;
    font-family: 'Cairo', sans-serif;
 /* Replace with specific font if needed */
}

.main-navigation .nav-links li a:hover {
    color: #8cc63f;            /* Lime highlight on hover */
}

/* 3. Action Buttons Styles */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Cart Icon */
.cart-icon {
    font-size: 20px;
    color: #1a3c34;
    margin-right: 5px;
}

/* Base Pill Button */
.btn-pill {
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 30px;       /* Rounded button corners */
    font-weight: bold;
    font-size: 14px;
    transition: transform 0.2s ease;
    white-space: nowrap;
}

.btn-pill:hover {
    transform: scale(1.05);    /* Slight zoom on hover */
}

/* Dark Green Button (Find a Program) */
.btn-dark {
    background-color: #0d3b2e; /* Deep Forest Green */
    color: #ffffff;
}

/* Lime Green Button (Donation) */
.btn-lime {
    background-color: #8cc63f; /* Bright Lime Green */
    color: #0d3b2e;            /* Dark text for contrast */
}

/* Responsive: Hide Nav on Mobile (Simple fix for now) */
@media (max-width: 900px) {
    .main-navigation, .btn-dark {
        display: none; /* Hides menu & one button on small screens */
    }
    .site-header {
        padding: 10px 15px;
    }
}

/* Theme Name: Pristine Theme 
Description: Pixel-perfect implementation of Figma design.
*/

:root {
    /* Exact Colors from Screenshot */
    --c-dark: #0B2822;       /* Deep Forest Green */
    --c-lime: #93C202;       /* The exact "Acid/Neon" Lime Green */
    --c-beige: #F3F5EB;      /* Light background beige */
    --c-white: #ffffff;
    --c-text: #022D1B;
    --c-grey-light: #E5E5E5;

    /* Spacing */
    --site-width: 1233px;
    --header-height: 80px;
}

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Cairo', sans-serif;
    color: var(--c-text); 
    line-height: 1.5; 
    background-color: #F5F8EC;
}
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; }

/* UTILS */
.container { max-width: var(--site-width); margin: 0 auto;  }
@media (max-width:992px) {
    .container { padding: 0 20px; }
}
.section-pad { padding: 100px 0; }
.bg-light { background-color: var(--c-beige); }
.mt-4 { margin-top: 30px; display: inline-block; }

/* --- 1. PILL HEADER (Sticky & Floating) --- */
.header-sticky-wrapper {
    position: sticky;
    top: 20px;
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    pointer-events: none; /* Let clicks pass through outside the pill */
    overflow-x: hidden;
}

.site-header-pill {
    pointer-events: auto; /* Re-enable clicks on the header itself */
    background: rgba(243, 245, 235, 0.95); /* Semi-transparent Beige */
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 1300px;
    border-radius: 100px; /* Fully rounded pill */
    padding: 12px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.site-header-pill img { height: 40px; }

.pill-nav .nav-links { 
    display: flex; 
    gap: 30px; 
    list-style: none; 
}
.pill-nav a { 
    font-weight: 600; 
    color: var(--c-dark); 
    font-size: 15px;
}
.pill-nav a:hover { color: var(--c-lime); }

.header-actions { display: flex; align-items: center; gap: 15px; }
.icon-btn { font-size: 20px; color: var(--c-dark); margin-right: 10px; }

/* Buttons */
.btn-pill {
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: capitalize;
}
.btn-dark { background: var(--c-dark); color: var(--c-white); }
.btn-lime { background: var(--c-lime); color: var(--c-dark); }

/* --- 2. HERO (With Glass Badge) --- */
.hero-section {
    height: 90vh;
    min-height: 700px;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Pull section up so header floats over it */
    margin-top: -100px; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--c-white);
        background-image: url("assets/imgs/hero-overlay.jpg");
}

.hero-overlay {
        position: absolute;
    inset: 0;

    background:
      linear-gradient(
        180deg,
        rgba(2, 45, 27, 0.55) 0%,
        rgba(2, 45, 27, 0.35) 40%,
        rgba(2, 45, 27, 0.75) 100%
      );

    z-index: 1;

}

.hero-content-wrapper { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }




.hero-section h1 { font-size: 4.5rem; font-weight: 800; margin-bottom: 15px; }
.hero-section p { font-size: 1.25rem; font-weight: 500; opacity: 0.9; }

/* --- 3. DARK SECTION (01/02) --- */
/* --- DARK SECTION ("What We Do") --- */
.dark-section {
    color: #ffffff;
}

/* STACK ITEMS VERTICALLY */
.grid-2-wide {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Item wrapper */
.dark-item-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 720px;
}

/* Top thin line */
.item-top-border {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin-bottom: 16px;
}

/* Content */
.dark-item-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Neon number */
.neon-number-small {
    font-size: 13px;
    font-weight: 600;
    color: #C8FF00;
    letter-spacing: 1px;
}

/* Title */
.dark-item-content h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

/* Paragraph */
.dark-item-content p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 680px;
}


/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .grid-2-wide {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .dark-section {
    }
}

/* --- 4. IMPACT STATS (Single Bar) --- */
.tag-pill {
    background: var(--c-lime); color: var(--c-dark);
    padding: 6px 37px; border-radius: 20px;
    font-weight: 600; font-size: 1.25rem; ;
    display: inline-block; margin-bottom: 20px;
}
.section-title { font-size: 3.75rem; color: var(--c-dark); margin-bottom: 10px; line-height: 67px;font-weight: 800; }
.section-desc { font-size: 1.75rem; color: #022D1B;  margin-bottom: 30px;font-weight: 600; }

/* The Unified Stats Bar */
/* --- Desktop / Default Styles (Your Code) --- */
.stats-bar-container {
    display: flex;
    background: transparent;
    border: 1px solid #93C202;
    border-radius: 54px;
    padding: 40px 0;
    /* Added alignment consistency */
    align-items: center; 
    justify-content: center;
}

.stat-col {
    flex: 1;
    text-align: center;
    /* Assuming you had a border-right based on your .no-border class */
    border-right: 1px solid rgba(147, 194, 2, 0.3); /* Example divider color */
}

.stat-col:last-child {
    border-right: none;
}

.stat-col h3 {
    font-size: 3.25rem;
    color: #022D1B;
    font-weight: 700;
    margin-bottom: 0px;
    font-family: 'Cairo', sans-serif;
}

.stat-col p {
    font-size: 1.25rem;
    font-weight: 600;
    color: #022D1B;
    line-height: 20px;
    margin-top: 10px; /* Added for spacing */
}

/* --- Mobile / Tablet Styles (Max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    .stats-bar-container {
        /* Switch to vertical stacking */
        flex-direction: column;
        
        /* Reduce container padding and radius for smaller screens */
        padding: 20px 0;
        border-radius: 30px;
    }

    .stat-col {
        width: 100%; /* Ensure full width */
        padding: 20px 0; /* Add vertical breathing room between items */
        
        /* Switch dividers from vertical (right) to horizontal (bottom) */
        border-right: none;
        border-bottom: 1px solid rgba(147, 194, 2, 0.3);
    }

    /* Remove the border from the very last item so it doesn't touch the container edge */
    .stat-col:last-child {
        border-bottom: none;
    }

    /* Scale down the large heading for mobile screens */
    .stat-col h3 {
        font-size: 2.5rem; 
    }
    
    /* Slightly reduce descriptive text size */
    .stat-col p {
        font-size: 1.1rem;
    }
}

/* --- 5. PLACEHOLDERS & SHOP --- */
.placeholder-box {
    border: 2px dashed #ccc; background: #fff; padding: 80px; text-align: center; border-radius: 20px; color: #999;
}
.flex-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.link-arrow { font-weight: 700; border-bottom: 2px solid var(--c-lime); padding-bottom: 3px; }

/* --- 6. PARTNER & NEWSLETTER --- */
.grid-partner { display: grid; grid-template-columns: 1.6fr 1.2fr; gap: 60px; align-items: center; }
.lead-text { font-size: 1.75rem; line-height: 38px; color: var(--c-text); margin-bottom: 40px; font-weight: 600; }

/* ===== Partner carousel: fixed logos per view ===== */
.partner-carousel{
        margin-top: 50px;

  --logos-desktop: 6;
  --logos-tablet: 4;
  --logos-mobile: 2;

  --logo-h: 56px;
  --gap: 40px;

  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
}

.partner-viewport{
  overflow:hidden;
  border-radius:24px;
  padding:10px 0;
  outline:none;

  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.partner-track{
  display:flex;
  align-items:center;
  gap: var(--gap);
  will-change:transform;
  user-select:none;
  touch-action:pan-y;
}

/* Each logo takes an equal slice of the viewport width */
.partner-track img{
  height: var(--logo-h);
  width: calc((100% - (var(--gap) * (var(--logos-desktop) - 1))) / var(--logos-desktop));
  object-fit: contain;

  opacity:1;
  transition:.25s ease;
  pointer-events:none;
}

.partner-track img:hover{
  opacity:1;
    transform:scale(1.5);
}

/* arrows */
.partner-nav{
  width:30px;height:30px;
  border-radius:999px;
  border:1px solid rgba(2,45,27,.15);
  backdrop-filter: blur(10px);
  background-color: transparent;
  color:#022D1B;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}
.partner-nav:hover{ transform:scale(1.06); }
.partner-nav:active{ transform:scale(0.98); }

.partner-viewport:focus{
  box-shadow:0 0 0 3px rgba(147,194,2,.35);
}

/* Tablet: 4 per view */
@media (max-width: 1024px){
  .partner-track img{
    width: calc((100% - (var(--gap) * (var(--logos-tablet) - 1))) / var(--logos-tablet));
  }
}

/* Mobile: 2 per view */
@media (max-width: 768px){
  .partner-carousel{
    grid-template-columns:1fr;
  }
  .partner-nav{ display:none; }

  .partner-track img{
    width: calc((100% - (var(--gap) * (var(--logos-mobile) - 1))) / var(--logos-mobile));
  }
}
.newsletter-section{
  background:#F4F7EA;
  padding:110px 0;
}

/* TAG */
.newsletter-tag{
  display:inline-block;
  background:#93C202;
  color:#022D1B;
  padding:8px 18px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  margin-bottom:18px;
}

/* TITLE */
.newsletter-title{
  font-size:56px;
  line-height:1.05;
  font-weight:800;
  color:#022D1B;
  letter-spacing:-0.5px;
  margin-bottom:20px;
  max-width:1100px;
}

/* BOTTOM GRID */
.newsletter-bottom{
  display:grid;
  grid-template-columns: 520px 1fr;
  gap:120px;
  align-items:start;
}

/* LEFT TEXT */
.newsletter-desc{
  font-size:16px;
  line-height:1.8;
  color:#1A3C34;
  max-width:420px;
}

/* RIGHT FORM AREA */
.newsletter-mini-title{
  display:block;
  font-size:24px;
  font-weight:500;
  color:#022D1B;
  line-height: 81px;
  padding-left: 30px;
}

.newsletter-form{
    margin-top: -10px;
  display:flex;
  gap:0px;
  align-items:center;
}

/* INPUT */
.newsletter-form input{
  width:420px;
  height:43px;
  padding:0 22px;
  border-radius:999px;
  border:1.5px solid #93C202;
  background:transparent;
  font-size:14px;
  outline:none;
  color:#022D1B;
}

/* BUTTON */
.newsletter-form button{
  height:43px;
  padding:0 28px;
  border-radius:999px;
  border:none;
  background:#93C202;
  color:#022D1B;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.newsletter-form button:hover{
  transform:scale(1.04);
}

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

  .newsletter-title{
    font-size:40px;
  }

  .newsletter-bottom{
    grid-template-columns:1fr;
    gap:30px;
  }

  .newsletter-form{
    flex-direction:column;
    align-items:stretch;
  }

  .newsletter-form input,
  .newsletter-form button{
    width:100%;
  }

}

.dark-section {
    color: #ffffff;
}

.dark-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 451px;
        background-color: #022D1B;

}

/* Each row */
.dark-row {
    display: inline-flex;
    margin: auto;
}

/* Number */
.neon-number-small {
    display: block;
    font-size: 40px;
    font-weight: 600;
    color: #93C202;
    margin-bottom: 12px;
    letter-spacing: 1px;
    line-height: 81px;
    width: 95px;
    margin-top: -20px;
}

/* Title */
.dark-row h3 {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 14px;
    color:#EDFECB;
        line-height: 81px;
        margin-bottom: 0px;
            margin-top: -20px;

}

/* Text */
.dark-row p {
    font-size: 28px;
    line-height: 38px;
    color: #F5F8EC;
    font-weight: 600;
    max-width: 1088px;
    margin: 0;
        letter-spacing: 0px !important;

}
.dark-bright{
            display: flex;
    flex-direction: column;
    gap: 0;
    height: 437px;
    margin: auto;
}
.darker{
    background-color: #022818;
        display: flex;
    flex-direction: column;
    gap: 0;
    height: 437px;
    margin: auto;
}
/* =========================
   PRISTINE FIGMA FOOTER
========================= */

.pristine-footer{
  background:#022D1B;
  color:#F5F8EC;
  position:relative;
  padding:70px 0 40px;
  overflow:hidden;
}

/* top area */
.footer-top{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:120px;
  flex-direction: column;
}

/* SOCIAL ICONS */
.footer-social{
    margin-top: 60px;
  display:flex;
  gap:14px;
  z-index:2;
}

.social-btn{
  width:53px;
  height:53px;
  font-size: 33px;
  border-radius:999px;
  border:1px solid rgba(147,194,2,.45);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#93C202;
  transition:.2s ease;
  background:transparent;
}

.social-btn:hover{
  transform:scale(1.06);
  background:rgba(147,194,2,.12);
}

/* NEWSLETTER */
.footer-newsletter{
  z-index:2;
  width:520px;
  max-width:100%;
  margin-bottom: 30px;
}

.footer-mini-title{
  display:block;
  font-size:24px;
  font-weight:500;
  color:#EDFECB;
  margin-bottom:12px;
  padding-left: 15px;
}

.footer-form{
  display:flex;
  align-items:center;
}

.footer-form input{
  flex:1;
  height:52px;
  border-radius:999px;
  border:1px solid rgba(147,194,2,.45);
  padding:0 18px;
  background: #EDFECB;
  color:#022D1B;
  outline:none;
}

.footer-form input::placeholder{
  color:#022D1B;
}

.footer-form button{
  height:52px;
  font-size: 16px;
  padding:0 20px;
  border-radius:999px;
  border:none;
  background:#93C202;
  color:#022D1B;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:.2s ease;
  white-space:nowrap;
}

.footer-form button:hover{
  transform:scale(1.04);
}

.footer-form .arrow{
  font-size:16px;
  line-height:1;
}

/* BIG BACKGROUND MARK (decor) */
.footer-mark{
  position:absolute;
  right:-120px;
  top:-80px;
  width:720px;      /* adjust after you send the image */
  height:367px;     /* adjust after you send the image */
  background-image: url("assets/imgs/footer-mark.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  opacity: 1;
  z-index: 1;
  pointer-events:none;
}


/* divider line */
.footer-divider{
  margin-top:60px;
  height:1px;
  background:rgba(147,194,2,.25);
}

/* BOTTOM LINKS */
.footer-bottom{
  padding-top:22px;
  display:flex;
  justify-content:center;
}

.footer-menu{
  display:flex;
  gap:40px;
  list-style:none;
  margin:0;
  padding:0;
  padding-top: 25px;
}

.footer-menu a{
  color:#F5F8EC;
  font-weight:500;
  font-size:24px;
  opacity:.9;
  position:relative;
  padding-right:18px;
}

.footer-menu a::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 18px;

  width: 14px;
  height: 14px;

  background-image: url("assets/icons/arr-up-right-light.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  opacity: 1;
}


.footer-menu a:hover{
  opacity:1;
}

/* MOBILE */
@media (max-width: 900px){
  .footer-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-newsletter{
    width:100%;
  }

  .footer-form{
    flex-direction:column;
    align-items:stretch;
  }

  .footer-form button{
    width:100%;
    justify-content:center;
  }

  .footer-menu{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:20px 28px;
  }

  .footer-mark{
    right:-220px;
    top:-220px;
    width:520px;
    height:520px;
  }
}
/* --- 2. About Us Page  --- */

/* --- 2. HERO (With Glass Badge) --- */


.hero-about-section {
    height: 90vh;
    min-height: 700px;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Pull section up so header floats over it */
    margin-top: -100px; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--c-white);
    background-color: #022D1B;
}

.hero-about-overlay {
        position: absolute;
    inset: 0;

    background:
      linear-gradient(
        180deg,
        rgba(2, 45, 27, 0.55) 0%,
        rgba(2, 45, 27, 0.35) 40%,
        rgba(2, 45, 27, 0.75) 100%
      );

    z-index: 1;

}

.hero-about-content-wrapper { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }




.hero-about-section h1 { font-size: 4.5rem; font-weight: 800; margin-bottom: 15px; }
.hero-about-section p { font-size: 1.25rem; font-weight: 500; opacity: 0.9; }
.who-section{
    background-color:#f5f8ec ;
}
/* --- Base Styles (Desktop) --- */
/* --- YOUR ORIGINAL DESKTOP STYLES (Kept exactly as requested) --- */
.impact-about-section{
    background-color:#EBEFDE ;
    padding-top: 100px;
    padding-bottom: 100px;
}
.impact-inner{
    display: flex;
}
.impact-inner h2{
    font-size: 4.025rem; color: var(--c-dark); margin-bottom: 10px; line-height: 67px;font-weight: 800;
    max-width: 483px;
}

.about-darker{
    background-color: #022818;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: auto;
    padding: 25px;
    margin-bottom: 15px;
    border-radius: 37px;
    width: 735px;
}
.about-dark-row h3 {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 14px;
    color:#F5F8EC;
    line-height: 36px;
}

.about-dark-row p {
    font-size: 20px;
    line-height: 30px;
    color: #F5F8EC;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0px !important;
}

/* --- NEW: RESPONSIVE OVERRIDES --- */
/* These rules ONLY activate on screens smaller than 991px */

@media (max-width: 991px) {
    .impact-inner {
        /* Stacks the title and box vertically instead of side-by-side */
        flex-direction: column; 
    }

    .impact-inner h2 {
        /* Allows the text to fit smaller screens */
        max-width: 100%;
        font-size: 2.5rem; /* Smaller font for mobile */
        line-height: 1.2;
    }

    .about-darker {
        /* CRITICAL: Overrides the fixed '735px' width so it fits on phones */
        width: 100%; 
        box-sizing: border-box; /* Ensures padding doesn't break the layout */
        margin: 20; /* Resets the 'auto' margin for better mobile stack */
    }
    
    .about-dark-row h3 {
         font-size: 1.75rem; /* Scale down heading */
    }
    
    .about-dark-row p {
         font-size: 18px; /* Scale down paragraph */
    }
}
/* --- Mobile / Tablet Responsive Styles --- */

/* Triggers on screens smaller than 992px (Tablets/Small Laptops) */
@media (max-width: 992px) {
    .impact-inner {
        /* Stack the H2 and the Box on top of each other */
        flex-direction: column; 
        align-items: center; /* Center them */
        text-align: center;
    }

    .impact-inner h2 {
        /* Remove the max-width restriction so it uses full screen width */
        max-width: 100%; 
        font-size: 3rem; /* Reduce font size */
    }
}

/* Triggers on screens smaller than 600px (Mobile Phones) */
@media (max-width: 600px) {
    .impact-inner h2 {
        font-size: 2.25rem; /* Further reduce main heading */
    }

    .about-darker {
        padding: 20px; /* Less padding on small screens saves space */
        border-radius: 25px;
    }

    .about-dark-row h3 {
        font-size: 1.75rem; /* Reduce sub-heading */
    }

    .about-dark-row p {
        font-size: 16px; /* Standard mobile reading size */
        line-height: 1.6;
    }
}



    .wrap{
      max-width: 1213px;
      margin: 24px auto;
    }

    /* Top pills + arrows */
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom: 18px;
    }

    .tabs{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .tab-btn{
      border: 1px solid rgba(12,59,46,.25);
      background: var(--pill-bg);
      padding: 10px 18px;
      border-radius: 999px;
      cursor:pointer;
      font-size: 20px;
      font-family: "Cairo", sans-serif;
      font-weight: 600;
      line-height: 1;
      transition: .2s ease;
    }
    .tab-btn[aria-selected="true"]{
      background: #93C202;
      border-color: transparent;
      box-shadow: var(--shadow);
    }

    .nav{
      display:flex;
      gap:10px;
    }
    .nav button{
      height: 37.48px;
      width: 37.48px;
      background: transparent;
      border: 0px;
      cursor:pointer;
      display:grid;
      place-items:center;
      transition:.2s ease;
    }
    .nav button img{
      height: 37.48px;
      width: 37.48px;
    }
    .nav button:hover{ transform: translateY(-1px); }
    .nav svg{ width:18px; height:18px; }

    /* Slider */
    .slider{
      display:flex;
      gap:18px;
      overflow:auto;
      scroll-snap-type: x mandatory;
      padding: 6px 2px 14px;
      scrollbar-width: none;          /* Firefox */
    }
    .slider::-webkit-scrollbar{ display:none; } /* Chrome */

    /* Card */
    .card{
      flex: 0 0 280px;                /* card width */
      scroll-snap-align: start;
      background-color: #022D1B;
      border-radius: 37px;
      padding: 15px;
      position: relative;

    }

    .card-inner{
      border-radius: calc(var(--radius) - 10px);
      overflow:hidden;
      background: var(--dark);
    }

    .photo{
      height: 225px;
      background: #93C202;
      border-radius: 24px;
      overflow:hidden;
      position: relative;
    }
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
object-position: center 25%;
}

  

    .info{
      padding: 14px 14px 16px;
      color: #fff;
    }
    .name{
      font-weight: 700;
      font-size: 20px;
      margin: 0 0 0px;
    }
    .role{
      margin-top: -2px;
      font-size: 20px;
      font-weight: 500;
    }

    /* hide panels except active */
    .panel{ display:none; }
    .panel.active{ display:block; }

    /* Optional: make it feel like screenshot spacing */
    .slider-area{
      background: transparent;
      border-radius: 18px;
      padding: 6px;
    }
    .annual-report{
      width: 1240px !important;
      margin: auto;
    }

.inner-report{
  border: 1px solid #93C202;
  border-radius: 54px;
  padding: 33px;
}
.tag-button{
      background: var(--c-lime); color: var(--c-dark);
    padding: 6px 37px; border-radius: 20px;
    font-weight: 600; font-size: 1.25rem; ;
    display: inline-block; margin-bottom: 20px;
    border: 0px;
    height: 61px;
    border-radius: 100px;
    font-family: 'cairo', sans-serif;
}
.annual-report .tag-pill{
  margin-left: 20px;
}



.form-wrap{
      max-width: 100%;
      background: var(--panel);
      border: 1.5px solid rgba(147, 194, 2, .6);
      border-radius: 31px;
      padding: 23.5px;
      box-sizing: border-box;
    }

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

    /* two columns only for the middle row */
    .row-2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .row-3{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }
      .row-4{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 12px;
    }
    
    

    .field label{
      display:block;
      font-size: 18px;
      font-weight: 600;
      margin: 2px 0 6px;
      color: rgba(16, 32, 24, .85);
    }

    .field input,
    .field textarea{
      width:100%;
      box-sizing:border-box;
      border: 1.5px solid rgba(147, 194, 2, .7);
      border-radius: 999px;
      padding: 10px 55px;
      background: #fbfdf6;
      outline: none;
      font-size: 18px;
    }
    select{
            width:100%;
      box-sizing:border-box;
      border: 1.5px solid rgba(147, 194, 2, .7);
      border-radius: 999px;
      padding: 10px 35px;
      background: #fbfdf6;
      outline: none;
      font-size: 18px;
    }

    .field textarea{
      border-radius: 12px;
      min-height: 355px;     /* big message box */
      resize: none;
      padding: 10px 39px;
    }

    .field input:focus,
    .field textarea:focus{
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(147, 194, 2, .18);
    }

    .btn{
      width:100%;
      border:none;
      cursor:pointer;
      background: #93C202;
      color: #0f1b12;
      font-weight: 700;
      font-size: 18px;
      padding: 10px 14px;
      border-radius: 999px;
      transition: .2s ease;
      height: 43px;
    }

    .btn:hover{ background: #022D1B; color: #fff; }

    /* tiny placeholder like screenshot */
    ::placeholder{
      color: rgba(16, 32, 24, .45);
    }

    @media (max-width: 430px){
      .row-2{ grid-template-columns: 1fr; }
    }



    .contact-title{
      font-size: 48px;
      line-height: 52px;
      text-align: center;
      margin-top: 107px;
      margin-bottom: 80px;
    }
    .mail i{
      color: #93C202;
      font-size: 24px;
      margin-right: 15px;
    }
    .mail {
  display: flex;
  align-items: center; /* vertical center */
      justify-content: flex-end;
  margin-top: 20px;
  margin-bottom: 120px;
  padding-right: 40px;
  
}
@media (max-width: 992px){
  .mail {
        justify-content: center;
  }
   .field textarea{
    min-height: 200px !important ;
   }
   .form-wrap{
    padding: 10px !important ;
}
    .contact-title{
      font-size: 32px;
      line-height: 36px;
      margin-top: 60px;
      margin-bottom: 40px;
    }
}
.email-text{
  font-size: 21px;
  font-weight: 700;
}