:root {

    /* 🔵 Primary Brand Color - Door Blue (Main identity color) */
    --primary-blue: #2474A8;

    /* 🔵 Darker Blue - Used for hover states and active buttons */
    --primary-blue-dark: #1C5D87;

    /* 🟣 Secondary Accent - Purple from girl figure */
    --accent-purple: #8E2CA3;

    /* 🟣 Lighter Purple - Soft backgrounds or hover glow */
    --accent-purple-light: #A855C1;

    /* ⚫ Dark Neutral - Main text color (softer than pure black) */
    --text-dark: #1E1E1E;

    /* ⚪ Light Neutral - Page background */
    --bg-light: #F8F9FA;

    /* ⚪ Soft Section Background - Alternate section color */
    --bg-soft: #F5F5F5;

    /* 🤍 Pure White - Cards, navbar background */
    --white: #FFFFFF;

    /* ✨ Optional Luxury Accent - For donate buttons or highlights */
    --gold-accent: #D4AF37;

}

/* *{
   outline: 1px solid red;
} */

*{
  font-family: 'Nunito', Arial;
  border: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  line-height: 1.5;
   box-sizing: border-box;   /* Total width = width (includes padding and border) */

  transition: all 0.25s linear;
}

html{
  overflow-x: hidden;  /*  prevents content from overflowing horizontally */
  font-size: 95%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* Adds space at the top when scrolling to an anchor so content isn’t hidden behind a fixed header. */

  
}



/* The scrolbar design */

html::-webkit-scrollbar{
	width: .8rem;  /* scrollbar width */
} 
html::-webkit-scrollbar-track{
	background: #f0f0f0; /* scrollbar background */
}
html::-webkit-scrollbar-thumb{
	background: rgba(36, 116, 168, 0.65); /* draggable part (thumb) */
	border-radius: 6rem; /* rounded corners */
}

html::-webkit-scrollbar-thumb:hover{
	background: var(--primary-blue); /* hover effect */
}

body{
  padding-top: 90px;
}