:root {
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font Family */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  
  /* Font Sizes */
  --fs-xs: 0.75rem;        /* 12px */
  --fs-sm: 0.875rem;       /* 14px */
  --fs-base: 1rem;         /* 16px */
  --fs-lg: 1.125rem;       /* 18px */
  --fs-xl: 1.25rem;        /* 20px */
  --fs-2xl: 1.5rem;        /* 24px */
  --fs-3xl: 1.875rem;      /* 30px */
  --fs-4xl: 2.25rem;       /* 36px */
  
  /* Line Heights */
  --lh-very-tight: 1;
  --lh-tight: 1.25;
  --lh-snug: 1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;
  --lh-loose: 2;
  --lh-mid-loose: 2.25;
  --lh-very-loose: 2.5;
  
  /* Font Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  
  /* Letter Spacing */
  --ls-tighter: -0.05em;
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* ============================================
     COLORS
     ============================================ */
  
  /* Primary - Teal */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  
  /* Secondary - Cyan */
  --color-cyan-50: #ecfeff;
  --color-cyan-500: #06b6d4;
  
  /* Accent Colors */
  --color-orange-500: #f97316;
  --color-amber-500: #f59e0b;
  --color-indigo-500: #6366f1;
  --color-violet-500: #8b5cf6;
  --color-green-500: #22c55e;
  --color-emerald-500: #10b981;
  --color-rose-500: #f43f5e;
  --color-pink-500: #ec4899;
  
  /* Neutrals - Gray */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-black: #000000;
  
  /* Alert Colors */
  --color-yellow-400: #facc15;
  
  /* ============================================
     SPACING
     ============================================ */
  
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-8: 2rem;         /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  
  /* ============================================
     CONTAINER
     ============================================ */
  
  --container-padding: 2rem;      /* 32px */
  --container-max-width: 80rem;   /* 1280px */
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  
  --radius-sm: 0.125rem;   /* 2px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Full round */
  
  /* ============================================
     BOX SHADOWS
     ============================================ */
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 500ms;
  
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

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

@media (max-width: 767px) {
  :root {
    --container-padding: var(--space-4);  /* 16px - Mobile */
  }
}

/* ============================================
   BASE STYLES
   ============================================ */

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

html{
    scroll-behavior: smooth;
}

body, button, input, textarea, select {
  font-family: var(--font-primary);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
p{
    font-size: var(--fs-sm);
    color: var(--color-gray-600);
    line-height: calc(var(--fs-2xl) - 1px);
}
img, video {
  width: 100%;
  display: block;
}

.container {
  padding-inline: var(--container-padding);
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
}
section{
    padding-block: var(--space-12);
}
.section__heading{
    margin-bottom: var(--space-8);
}

.section__heading :where(h1, h2), .about__con h2{
    font-size: var(--fs-4xl);
    color: var(--color-gray-900);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-4);
}


.section__heading span, .about__con h2 span{
    &:not(.about__con h2 span, .children__wrapper .section__heading span, .mission__wrapper span, .donor__wrapper span){
        display: block;
    }
    color: var(--color-teal-600);
}

.hero__item .section__heading p{
    margin-top: var(--space-6);
    font-size: var(--fs-xs);
}

/* arrows navigation  */
[class*="swiper-button"]{
    background: url(../images/next.png) no-repeat;
    height: 40px;
    width: 40px;
    background-size: 24px;
    background-color: #ffffffe6;
    background-position: center;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    &:after{
        content: none;
    }
}
.swiper-button-prev{
    transform: scaleX(-1);
}

/* arrows navigation end */
/* dots css  */
.swiper-pagination{
    bottom: var(--space-4);
}
.swiper-pagination .swiper-pagination-bullet{
    height: .5rem;
    width: .5rem;
    background: #ffffff80;
    transition: var(--transition-fast);
    opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet-active{
    width: 2rem;
    border-radius: 120px;
    background: var(--color-white);
}
/* dots css end */

/* ============================================
   NAVIGATION CSS
   ============================================ */
header{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    padding-block: calc(var(--space-3) + 4px);
    background: var(--color-white);
}

.scrolled header{
    box-shadow: var(--shadow-md);
}

.logo__main{
    display: flex;
    column-gap: var(--space-3);
}
.logo__main img {
  max-width: 3rem;
}
.logo__text p{
    color: var(--color-gray-900);
    line-height: var(--lh-normal);
    font-weight: var(--fw-bold);
}

.logo__text span{
    color: var(--color-gray-600);
    font-size: var(--fs-xs);
    line-height: var(--lh-very-tight);
}

.navigation__menu ul{
    display: flex;
    column-gap: var(--space-8);
    align-items: center;
}

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

.header_main__wrapper a{
    color: var(--color-gray-700);
    font-size: var(--fs-sm);
    transition: var(--transition-fast);
    font-weight: var(--fw-medium);
    display: inline-block;
}

.donate__button button, .donate__button a{
    display: inline-block;
    box-shadow: var(--shadow-lg);
    background-image: linear-gradient(to right, var(--color-teal-500), var(--color-teal-600));
    border: none;
    color: var(--color-white);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    padding: calc(var(--space-3) - 2px) var(--space-6);
    border-radius: 120px;
    cursor: pointer;
}

@media screen and (max-width: 767px){
    .navigation__menu ul li:not(:last-child){
        display: none;
    }

    .donate__button button{
        padding-inline: calc(var(--space-3) - 2px);
    }
}