/* Dark grey background and overall page styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  line-height: 1.6;
  background-color: #2b2b2b; /* Dark grey background */
  color: #f0f0f0; /* Light grey text color for readability */
}

/* Main heading styling */
h1 {
  color: #d3d3d3; /* Lighter grey color */
  text-align: center; /* Center the heading */
  margin-top: 20px;
}

/* General paragraph styling */
p {
  margin-left: 20px; /* Adds space to the left for general text */
  margin-right: 20px;
}

/* Introduction container */
.intro-container {
  text-align: center; /* Centers the image and text */
  margin-top: 20px; /* Adds spacing between the heading and the container */
}

.intro-container img {
  display: block; /* Ensures proper alignment */
  margin: 0 auto; /* Centers the image */
  border-radius: 56%; /* Circular image */
}

.intro-text {
  text-align: center; /* Centers the text under the photo */
  font-style: italic; /* Make the text italic */
  color: #d3d3d3; /* Light grey color */
  margin-top: 15px; /* Add some spacing between the image and text */
  line-height: 1.8; /* Adjust line height for better readability */
}

/* Building in Progress section text */
.progress-text {
  text-align: center;
  color: #f0f0f0; /* Light grey */
  font-weight: bold;
  margin-top: 20px;
}

/* Default unordered list styling (for regular pages like Certifications) */
ul {
  padding: 0;
  margin: 20px; /* Standard spacing for regular lists */
  list-style: disc; /* Restore bullet points */
  text-align: center; /* Align to the left */
}

ul li {
  margin: 5px 0; /* Add slight spacing between list items */
}

/* Scoped Button List Styling - ONLY for links under "Building in Progress" */
ul.button-list {
  list-style: none; /* Remove bullets */
  padding: 0;
  text-align: center; /* Center align the list */
  margin: 20px 0; /* Add space around the list */
}

ul.button-list li {
  display: inline-block; /* Place links in a row */
  margin: 10px; /* Add spacing between buttons */
}

ul.button-list a {
  text-decoration: none; /* Remove underline */
  color: #1e90ff; /* Nice blue color for links */
  font-weight: bold;
  background-color: #333; /* Dark button background */
  padding: 10px 20px; /* Button-like padding */
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

ul.button-list a:hover {
  background-color: #1e90ff; /* Blue hover background */
  color: #fff; /* White text on hover */
}

/* Scoped Certifications Page styling */
.certifications-list {
  padding: 0;
  text-align: center;
  margin-center: 20px;
}

.certifications-list li {
  margin: 5px 0; /* Add spacing between items */
  list-style: disc; /* Use bullet points for certifications */
}

/* Remove bullet points for specific list */
.no-bullets {
  list-style: none; /* Remove bullets */
  padding: 0; /* Remove default padding */
  text-align: center; /* Center align list */
}

.no-bullets li {
  margin: 10px 0; /* Add spacing between list items */
}

/* Default link color (blue) */
a {
  color: #1e90ff; /* Blue hyperlink color */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color change on hover */
}

/* Link hover effect */
a:hover {
  color: #ff7f50; /* Coral color on hover */
  text-decoration: underline; /* Underline on hover for clarity */
}

/* Visited links (to reset purple color) */
a:visited {
  color: #1e90ff; /* Keep links blue even after visiting */
}