/* Reset margin and padding for all elements, and enable border-box sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set base font and background color for the entire page */
body {
  font-family: 'Arial', sans-serif;
  background-color: #1a1a1a;
}

/* Style for the navigation bar */
nav ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  justify-content: space-around;
  background-color: #2c2c2c;
  padding: 23px;
  border-bottom: 3px solid #00d9ff;
}

/* Style for each navigation link */
nav ul li a {
  text-decoration: none;
  background-color: #00d9ff;
  color: #1a1a1a;
  padding: 10px 15px;
  border-radius: 7px;
  margin: 10px;
  font-weight: bold;
}

/* Hover effect for navigation links */
nav ul li a:hover {
  background-color: #ff6b35;
  color: white;
  transition: 0.3s;
}

/* Section: About Me */
#about_me {
  background-color: #2c2c2c;
  padding: 20px;
  border-bottom: 2px solid #00d9ff;
}

/* Hero section with image and text side-by-side */
.hero {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 150px;
  background-color: #1a1a1a;
  border-radius: 10px;
  border: 2px solid #00d9ff;
}

/* Style for the hero introduction text */
.hero p {
  color: #00d9ff;
  font-size: 60px;
  max-width: 900px;
  margin-left: -90px;
  margin-bottom: 80px;
  font-weight: bold;
}

/* Style for the profile image */
.hero img {
  border-radius: 50%;
  box-shadow: 0 0 20px #00d9ff;
  width: 200px;
  height: 200px;
  margin-bottom: 100px;
  margin-right: -50px;
  border: 3px solid #ff6b35;
}

/* Section: Programming Languages */
#programming_languages {
  background-color: #1a1a1a;
  border-bottom: 2px solid #ff6b35;
}

/* Section header style */
#programming_languages h2 {
  text-align: center;
  font-size: 40px;
  color: #00d9ff;
  padding: 20px;
  font-weight: bold;
}

/* Container for skills */
.skills {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Skill titles */
.skills h3 {
  font-size: 30px;
  color: #ff6b35;
  padding: 20px;
  font-weight: bold;
}

/* Skill descriptions */
.skills p {
  font-size: 20px;
  color: #f1f5f9;
  max-width: 200px;
  padding: 10px;
}

/* Individual skill card */
.skills div {
  background-color: #2c2c2c;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 217, 255, 0.3);
  border-left: 4px solid #00d9ff;
}

/* Hover effect for skill cards */
.skills div:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(255, 107, 53, 0.4);
  border-left-color: #ff6b35;
}

/* Section: Educational Background */
#educational_background {
  background-color: #2c2c2c;
  padding: 20px;
}

/* Section heading */
#educational_background h2 {
  text-align: center;
  font-size: 40px;
  color: #00d9ff;
  padding: 20px;
  font-weight: bold;
}

/* Container for education entries */
.education {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Education titles */
.education h3 {
  font-size: 30px;
  color: #1a1a1a;
  padding: 20px;
  max-width: 310px;
  overflow-wrap: break-word;
  font-weight: bold;
}

/* Education descriptions */
.education p {
  font-size: 20px;
  color: #1a1a1a;
  max-width: 200px;
  padding: 10px;
  margin-left: 40px;
}

/* Education card styling */
.education div {
  background-color: #00d9ff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Hover effect for education cards */
.education div:hover {
  background-color: #00b8d4;
  transform: translateY(-2px);
}

/* Buttons for projects, CV, contact */
.education a button,
.projects a button,
.cv-download a button,
#contact-me button {
  background-color: #ff6b35;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

/* CV download section */
.cv-download {
  background-color: #1a1a1a;
  padding: 20px;
  text-align: center;
  border: 2px solid #00d9ff;
  margin: 20px;
  border-radius: 10px;
}

/* CV download heading */
.cv-download h3 {
  font-size: 30px;
  color: #ff6b35;
  padding: 20px;
  font-weight: bold;
}

/* CV download description */
.cv-download p {
  font-size: 20px;
  color: white;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
}

/* Hover effect for all buttons */
.cv-download a button:hover,
.projects a button:hover,
#contact-me button:hover {
  background-color: #00d9ff;
  color: #1a1a1a;
  transition: 0.3s;
}

/* Section: Interests */
#interests {
  background-color: #1a1a1a;
  padding: 20px;
}

/* Section heading */
#interests h2 {
  text-align: center;
  font-size: 40px;
  color: #ff6b35;
  padding: 20px;
  font-weight: bold;
}

/* Container for interests */
.interests {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Interest titles */
.interests h3 {
  font-size: 30px;
  color: #00d9ff;
  padding: 20px;
  max-width: 300px;
  overflow-wrap: break-word;
  font-weight: bold;
}

/* Interest descriptions */
.interests p {
  font-size: 20px;
  color: white;
  max-width: 300px;
  padding: 10px;
}

/* Interest card */
.interests div {
  background-color: #2c2c2c;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-top: 3px solid #ff6b35;
}

/* Hover effect for interest cards */
.interests div:hover {
  border-top-color: #00d9ff;
  transform: translateY(-2px);
}

/* Section: Projects */
#projects {
  background-color: #2c2c2c;
  padding: 20px;
}

#projects h2 {
  text-align: center;
  font-size: 40px;
  color: #ff6b35;
  padding: 20px;
  font-weight: bold;
}

/* Project cards container */
.projects {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  align-items: center;
}

/* Project titles */
.projects h3 {
  font-size: 30px;
  color: #1a1a1a;
  padding: 20px;
  max-width: 300px;
  overflow-wrap: break-word;
  font-weight: bold;
}

/* Project descriptions */
.projects p {
  font-size: 20px;
  color: #1a1a1a;
  max-width: 300px;
  padding: 10px;
}

/* Project card styling */
.projects div {
  max-width: 300px;
  max-height: 300px;
  overflow: auto;
  background-color: #00d9ff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Hover effect for project cards */
.projects div:hover {
  background-color: #00b8d4;
  transform: translateY(-2px);
}

/* Section: Contact */
#contact-me {
  background-color: #1a1a1a;
  padding: 20px;
}

#contact-me h2 {
  text-align: center;
  font-size: 40px;
  color: #00d9ff;
  padding: 20px;
  font-weight: bold;
}

/* Contact form layout */
#contact-me form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Contact form container */
.contact-info {
  background-color: #2c2c2c;
  color: white;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #ff6b35;
}

/* Contact form labels */
#contact-me label {
  font-size: 20px;
  color: #ff6b35;
  font-weight: bold;
}

/* Inputs and textareas */
#contact-me input,
#contact-me textarea {
  padding: 10px;
  border-radius: 5px;
  border: 2px solid #00d9ff;
  font-size: 16px;
  background-color: #1a1a1a;
  color: white;
}

/* Focused input styling */
#contact-me input:focus,
#contact-me textarea:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 5px #ff6b35;
}

/* Social media heading */
.contact-details h3 {
  font-size: 30px;
  color: #ff6b35;
  padding: 20px;
  font-weight: bold;
}

/* Social media icons container */
.contact-details ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  background-color: #2c2c2c;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #00d9ff;
}

/* Social media icons */
.contact-details ul li img {
  width: 30px;
  height: 30px;
  transition: 0.3s;
}

/* Hover effect on icons */
.contact-details ul li img:hover {
  transform: scale(1.1);
}

/* Footer styling */
footer {
  background-color: #2c2c2c;
  color: #00d9ff;
  text-align: center;
  padding: 20px;
  position: relative;
  bottom: 0;
  width: 100%;
  border-top: 3px solid #ff6b35;
  font-weight: bold;
}