:root {
  /* Section 2 Main Goal */
  --section-2-background: #f9f9f9; /* Light mode background color */
  --section-2-text-color: #333333; /* Primary text color */
  --section-2-heading-color: hsl(200, 100%, 50%); /* Highlight color */
  --section-2-box-background: #ffffff; /* Box background color */
  --section-2-box-text-color: #333333; /* Box text color */
  --section-2-box-shadow: rgba(0, 0, 0, 0.2); /* Box shadow color */
  --section-2-box-hover-shadow: rgba(0, 0, 0, 0.3); /* Box hover shadow color */
  --section-2-box-hover-transform: translateY(-8px); /* Box hover transform */
  --section-2-icon-color: hsl(200, 100%, 50%);
  --section-2-description-color: #666666; /* Description color */

  /* Section 3 Tech Stack */
  --section-3-background: #f9f9f9; /* Light mode background color */
  --section-3-text-color: #333333; /* Primary text color */
  --section-3-heading-color: #070707; /* Heading text color */
  --section-3-subtext-color: #666666; /* Subtext color */
  --section-3-box-background: #ffffff; /* Box background color */
  --section-3-box-color: #333333; /* Box text color */
  --section-3-box-shadow: rgba(0, 0, 0, 0.2); /* Box shadow color */
  --section-3-box-hover-shadow: rgba(0, 0, 0, 0.4); /* Box hover shadow color */
  --section-3-box-hover-transform: translateY(-10px); /* Box hover transform */
  --section-3-container-background: hsl(
    0,
    0%,
    19%
  ); /* Container background color */
  --section-3-container-hover-background: hsl(200, 100%, 50%);
  --section-3-container-text-color: #8f8f8f; /* Container text color */
  --section-3-container-img-filter: brightness(
    0.9
  ); /* Container image filter on hover */

  /* Section 4 How We Design */
  --section-4-background: #f9f9f9; /* Light mode background color */
  --section-4-text-color: #333333; /* Primary text color */
  --section-4-heading-color: #000000; /* Heading text color */
  --section-4-subtext-color: #666666; /* Subtext color */
  --section-4-box-background: #ffffff; /* Box background color */
  --section-4-box-shadow: rgba(0, 0, 0, 0.2); /* Box shadow color */
  --section-4-box-hover-shadow: rgba(0, 0, 0, 0.4); /* Box hover shadow color */
  --section-4-circle-background: hsl(
    200,
    100%,
    50%
  ); /* Circle background color */
  --section-4-circle-hover-background: hsl(
    200,
    100%,
    50%
  ); /* Circle hover background color */
  --section-4-circle-text-color: #000000; /* Circle text color */
  --section-4-content-heading-color: #000000; /* Content heading color */
  --section-4-content-text-color: #000000; /* Content text color */

  /* Section 5 Why Partner With Us */
  --section-5-background: #f9f9f9; /* Light mode background color */
  --section-5-heading-color: #000000; /* Heading color */
  --section-5-container-background: #ffffff; /* Container background color */
  --section-5-container-shadow: rgba(
    0,
    0,
    0,
    0.1
  ); /* Container box shadow color */
  --section-5-container-hover-shadow: rgba(
    0,
    0,
    0,
    0.2
  ); /* Container hover shadow color */
  --section-5-icon-background: hsl(200, 100%, 50%);
  --section-5-icon-color: #000000; /* Icon color */
  --section-5-text-color: #000000; /* Text color */
}