.background-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
/* Navbar */
nav {
  background-color: black;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  position: sticky;
  top: 0px;
}
.navbar {
  position: sticky;
  top: 0px;
}
nav img {
  width: 50px;
  height: 50px;
  border-radius: 10%;
}
nav ul {
  list-style-type: none;
  margin-left: 50%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

/* Home Section */
#home {
  display: flex; /* Make the home section take up the full width */
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center elements horizontally */
  min-height: 100vh; /* Set minimum height for full viewport */
  background: rgba(59, 59, 59, 0.123);
  padding: 20px;
  border-radius: 2px;
  box-shadow: 2px 2px 10px rgba(94, 92, 92, 0.7);
}

/* Hero Section */
.hero {
  width: 80%; /* Reduce hero section width to 80% */
  margin-top: 50px; /* Add some top margin */
  margin-bottom: 50px; /* Add some bottom margin */
  text-align: center; /* Center text within hero section */
  color: #ccc;
}

.hero-image {
  border-radius: 5%;
  margin-bottom: 20px; /* Add some space below the image */
}

.hero-content {
  padding: 20px; /* Add some padding for content */
}

/* Bio Paragraph */
.bio {
  line-height: 1.5; /* Increase line spacing for better readability */
  margin-bottom: 20px; /* Add some space between paragraphs */
}
/* Project Section */
#project {
  padding: 50px 0; /* Add top and bottom padding */
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(207, 205, 205, 0.2); /* Add box shadow */
}

.project {
  padding: 10px;
  margin-bottom: 20px; /* Add space below each project */
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(207, 205, 205, 0.2);
}
.projects {
  text-align: center; /* Center text within project section */
}

.projects h2 {
  margin-bottom: 20px; /* Add space below the heading */
}

.project-grid {
  display: flex; /* Allow projects to wrap on smaller screens */
  flex-wrap: wrap; /* Wrap projects onto multiple rows */
  justify-content: space-around; /* Distribute projects evenly with space */
}

.project-grid article {
  width: calc(33% - 20px); /* Set project width considering grid gaps */
  margin: 10px; /* Add space between projects */
  text-align: left; /* Align project content to the left */
}

.project img {
  width: 300px;
  height: 200px; /* Set image width to fill project container */
  display: block; /* Ensure image fills available space */
  overflow: hidden;
  border-radius: 5px; /* Add rounded corners */
  box-shadow: 2px 2px 10px rgba(255, 254, 254, 0.2); /* Add box shadow */
}

.project h3 {
  margin: 10px 0 5px 0; /* Add space around project title */
}

.project p {
  margin-bottom: 10px; /* Add space below project description */
}

.more-info {
  display: inline-block; /* Display "Learn More" as a button */
  padding: 5px 10px; /* Add padding for button */
  background-color: #007bff; /* Blue background */
  color: #fff; /* White text */
  text-decoration: none; /* Remove underline from link */
  border-radius: 5px; /* Add rounded corners */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.more-info:hover {
  background-color: #0069d9; /* Change background color on hover */
}
/* Skill Section */
#skill {
  padding: 50px 0;
  background-color: #2c2b2b52; /* Light gray background */
  border: 2px solid #ddd; /* Add a border for a clean look */
  border-radius: 10px; /* Rounded corners */
  margin: 0 auto; /* Center the section horizontally */
  max-width: 800px; /* Set a maximum width for responsiveness */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* Add box shadow */
  color: white;
}

.skill {
  padding: 20px; /* Add some padding inside the border */
}

.skill h2 {
  margin-bottom: 20px;
  font-size: 24px; /* Increase heading size */
}

.skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skills-list li {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between; /* Distribute content horizontally */
  align-items: center; /* Align content vertically */
}

/* Soft Skills Section (Optional) */
#soft-skills {
  margin-top: 50px; /* Add space between skill sections */
  padding: 20px; /* Add some padding */
  border: 1px solid #ddd; /* Optional border */
  border-radius: 5px; /* Rounded corners */
  margin: 0 auto; /* Center the section horizontally */
  max-width: 800px; /* Maintain responsiveness */
}

.soft-skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.soft-skills-list li {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between; /* Distribute content horizontally */
  align-items: center; /* Align content vertically */
}

.skill-name,
.skill-level {
  font-weight: bold;
}

/* Reuse Skill Level Colors */
.skill-level.Strong {
  color: #007bff; /* Blue for strong */
}

.skill-level.Excellent {
  color: #28a745; /* Green for excellent */
}

.skill-level.Proficient {
  color: #ffc107; /* Yellow for proficient */
}

.skill-level.Intermediate {
  color: #ff9800; /* Orange for intermediate */
}

.skill-level.Advanced {
  color: #dc3545; /* Red for advanced (can be adjusted) */
}

/* Sub-Skills (Optional) */
.sub-skills {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 20px; /* Indent sub-skills */
}

.sub-skills li {
  margin-bottom: 5px;
}

/* Progress Bar */
.progress-bar {
  height: 10px;
  background-color: #ddd; /* Light gray background */
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #007bff; /* Blue background for progress */
  transition: width 1s ease-in-out;
}

/* In Progress Skill Level */
.skill-level.in-progress {
  color: orange; /* Orange for "In Progress" skill level */
}

/* Skill Level Colors (Optional - Modify these for specific colors) */
.skill-level.Advanced {
  color: #007bff; /* Blue for advanced */
}

.skill-level.Expert {
  color: #28a745; /* Green for expert */
}

.skill-level.Proficient {
  color: #ffc107; /* Yellow for proficient */
}

.skill-level.Intermediate {
  color: #ff9800; /* Orange for intermediate */
}

.skill-level.Beginner {
  color: #dc3545; /* Red for beginner */
}

/* About Me Section */
#about {
  padding: 50px 0; /* Add top and bottom padding */
  text-align: center; /* Center text within about me section */
  background-color: rgb(145, 142, 142, 0.1);
  color: #9b9797;
  border: 2px 2px 3px 2px rgb(145, 142, 142, 0.1);
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
}

.about-me {
  text-align: center; /* Center text within about me section */
}

.about-me h2 {
  margin-bottom: 20px; /* Add space below the heading */
}

.about-me p {
  line-height: 1.5; /* Increase line spacing for better readability */
  font-size: 16px; /* Set a base font size */
}

/* Emphasized Skills */
.about-me b i {
  font-weight: bold; /* Make emphasized skills bold */
  font-family: monospace; /* Use monospaced font for code-like appearance */
}
/* Footer */
footer {
  background: rgb(145, 142, 142, 0.1);
  padding: 10px; /* Add some padding for footer content */
  text-align: center; /* Center text within footer */
  color: #ccc;
  width: 50%;
  margin: auto;
  margin-top: 20px;
  align-items: center;
}
/* Contact Link */
footer a {
  color: #9b9797; /* Set link color to black */
  text-decoration: none; /* Remove underline from link */
}

footer a:hover {
  color: #ccc; /* Change link color on hover */
}
/* Contact Section */
#contact {
  display: flex; /* Allow content to wrap around each other */
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center elements horizontally */
  padding: 50px 0; /* Add top and bottom padding */
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(207, 205, 205, 0.2); /* Add box shadow */
}

.contact {
  text-align: center; /* Center text within contact section */
}

.contact h2 {
  margin-bottom: 20px; /* Add space below the heading */
}

.contact-info,
.social_media {
  list-style: none; /* Remove default bullet points */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

.contact-info li,
.social_media li {
  display: inline-block; /* Display list items inline */
  margin: 0 15px 15px 0; /* Add space between list items */
}

.social p.social {
  margin-top: 30px; /* Add space above social media links */
  margin-bottom: 10px; /* Add space below social media text */
}

/* Icons */
.contact-info img,
.social_media img {
  background: #4b4a4a;
  border-radius: 20%;
  width: 24px; /* Set image width */
  height: 24px; /* Set image height */
}
.contact-info img:hover,
.social_media img:hover {
  background: rgb(212, 211, 211, 0.002);
  transform: scale(1.02);
  transition: 0.5s;
  overflow: hidden;
}