:root {
  /* Section 2 Main Goal */
  --section-2-background: #ffffff; /* Background color */
  --section-2-text-color: #000000; /* Text color */
  --section-2-border-radius: 25px; /* Border radius for service */

  /* Section 3 Light Mode */
  --section-3-background: #f9f9f9; /* Light background color */
  --section-3-container-background: #ffffff; /* Light container background color */
  --section-3-intro-heading-color: #333333; /* Darker heading color */
  --section-3-intro-text-color: #666666; /* Darker text color */
  --section-3-feature-item-background: #eeeeee; /* Lighter feature item background */
  --section-3-feature-item-heading-color: #333333; /* Dark feature item heading color */
  --section-3-feature-item-text-color: #666666; /* Darker feature item text color */
  --section-3-icon-color: #007bff; /* Primary blue icon color */
  --section-3-box-shadow: rgba(0, 0, 0, 0.1); /* Lighter box shadow color */

  /* Section 4 */
  --section-4-background: #f9f9f9; /* Light background color */
  --section-4-heading-color: #000000; /* Dark heading color */
  --section-4-highlight-color: hsl(200, 100%, 50%);
  --section-4-card-background: hsl(200, 100%, 50%);
  --section-4-card-shadow: rgba(0, 0, 0, 0.1); /* Lighter box shadow color */
  --section-4-card-hover-shadow: rgba(
    0,
    0,
    0,
    0.2
  ); /* Lighter hover shadow color */
  --section-4-icon-background: #191919; /* Light icon background color */
  --section-4-icon-hover-background: var(
    --section-4-highlight-color
  ); /* Icon hover background color */
  --section-4-icon-color: #000000; /* Dark icon color */
  --section-4-text-color: #000000; /* Dark text color */
  --section-4-text-light-color: #000000; /* Light text color */

  /* Section 5 Light Mode */
  --section-5-background: hsl(0, 0%, 89%); /* Light background color */
  --section-5-heading-color: #333333; /* Dark heading color */
  --section-5-box-background: #ffffff; /* Card background color */
  --section-5-box-color: #333333; /* Dark text color */
  --section-5-box-shadow: rgba(0, 0, 0, 0.1); /* Lighter box shadow color */
  --section-5-box-hover-shadow: rgba(
    0,
    0,
    0,
    0.2
  ); /* Lighter hover shadow color */
  --section-5-text-color: #666666; /* Light text color */
  --section-5-span-color: #333333; /* Dark span color */
}
