/* -------------- resets & primitives -------------- */
*{margin:0; padding:0; box-sizing:border-box;} /* Remove default spacing & set border-box model */
html{scroll-behavior:smooth; font-size:16px;} /* Smooth scrolling, base font size */
body{
  font-family:var(--font-primary);         /* Use main font stack */
  line-height:1.7;                        /* Improve readability */
  color:var(--text-color);                /* Set body text color */
  background:var(--white-color);          /* Set background to white */
  overflow-x:hidden;                      /* Prevent horizontal scroll */
  padding-top:70px;                       /* Offset for fixed header */
}

/* basic elements ---------------------------------- */
ul{list-style:none;}                      /* Remove default list bullets */
a{
  text-decoration:none;                   /* Remove underline */
  color:var(--primary-color);             /* Primary color for links */
  transition:.3s;                         /* Smooth color transition */
}
a:hover{color:var(--accent-color);}       /* Accent color on hover */
img{
  max-width:100%;                        /* Responsive images */
  height:auto;                           /* Keep aspect ratio */
  display:block;                         /* Remove inline space below images */
}
.container{
  max-width:1200px;                      /* Limit width of container */
  margin-inline:auto;                     /* Center horizontally */
  padding-inline:20px;                    /* Side padding for content */
}

/* headings ---------------------------------------- */
h1, h2, h3, h4{
  font-family:var(--font-secondary);      /* Use secondary font stack (for headings) */
  color:var(--dark-color);                /* Headings in dark color instead of white */
  margin-bottom:1rem;                     /* Space below heading */
  line-height:1.3;                        /* Tighten heading spacing */
  font-weight:600;                        /* Semi-bold weight */
}
h1{font-size:3rem; font-weight:700;}      /* Extra large, bold main heading */
h2{
  font-size:2.2rem;                      /* Slightly smaller than h1 */
  text-align:center;                     /* Centered */
  margin-bottom:3rem;                    /* More space below */
  position:relative;                     /* For ::after accent bar */
}
h2::after{
  content:'';                            /* Decorative accent bar below h2 */
  display:block;
  width:60px;
  height:4px;
  background:var(--accent-color);
  margin:.5rem auto 0;
  border-radius:2px;
}
h3{font-size:1.5rem; font-weight:500;}    /* Medium heading */
h4{font-size:1.2rem;}                     /* Smaller heading */