/*
  ========================================================================
  FILE: style.css
  PURPOSE: This is the main "Stylesheet" for the website. It dictates how 
           everything looks (colors, fonts, spacing, layout).
           
  HOW IT WORKS:
  - We use CSS classes (like .navbar or .btn) in our HTML.
  - Then we define the rules for those classes here in this file.
  - The `@media` blocks at the bottom make the site mobile-friendly.
  ========================================================================
*/
/* ===== Arun-Kumar Foundation - Canva-Inspired Design System ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  --teal:       #7ABCBC;
  --teal-hover: #5EA8A8;
  --teal-bg:    #90C0C0;   /* success stories section */
  --navy:       #1A2E4A;
  --white:      #FFFFFF;
  --off-white:  #F2F0ED;   /* light gray sections */
  --black:      #111111;
  --text:       #1E1E1E;
  --muted:      #606060;
  --border:     rgba(0,0,0,0.09);
  --shadow:     0 4px 24px rgba(0,0,0,0.08);
  --radius:     4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
section { padding: 100px 0; }