@import 'variables.css';
:root {
  /* === Neutral Colors === */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue: #0A4A8E;
  --color-light-gray: #E6E6E6;
  --color-medium-gray: #8F8F8F;
  --off-white: rgba(255, 255, 255, 0.7);
  --off-white-card: rgba(255, 255, 255, 0.5);

  /* === Brand / Accent Colors === */
  --color-green: #AEFF02;

  /* 🖋️ Typography */
  --font-main:"Titillium Web", sans-serif;
  --first-heading: "Montserrat", sans-serif;
  --second-heading-:"Inter", sans-serif;

  /* 📏 Spacing */
  --space-xxs: 0.15rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xxl: 5rem;
  --space-base: 9rem;

  /* 🔲 Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* 🌙 Shadow & Transition */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --transition: all 0.3s ease-in-out;

  /* font sizes */
  --font-size-h1: 3.9rem; /* or 48px */
  --font-size-h2: 3.9025rem;
  --font-size-h3: 2.2rem;
  --font-size-h4: 1.5rem;
  --font-size-base: 1.15rem;
}


.color-blue { 
  color: var(--color-blue) !important;
 }
.p-tag { 
  color: var(--color-blue);
  font-size: 1.5rem;
  font-weight: 600;

}

.color-green { 
  /* color: var(--color-green) !important;  */
  font-size: 2.5rem;
  padding-top: 20px;
  font-family: var(--first-heading);
}