/* Reset and basic styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background-color: #f8f9fa;
}

header {
  margin-bottom: 80px; /* To avoid content overlap with fixed navbar */
}

#hero {
  padding: 100px 0;
  background-color: #343a40; /* Dark Gray Background */
  color: white;
}

section {
  padding: 50px 0;
}

footer {
  background: #343a40; /* Darker footer color */
  color: #fff;
}

.card {
  border: none;
  background-color: #f8f9fa; /* Light background for cards */
}

form input, form textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

form button {
  background: #343a40; /* Dark Button */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

form button:hover {
  background: #495057; /* Hover effect */
}

/* About Section */
#about {
  text-align: left; /* Align text to the left */
}

/* Photo Styling */
#about img {
  max-width: 100%; /* Ensure image takes up full width of its container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Optional: Add some rounding to the corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

@media (max-width: 991px) {
  #about {
    text-align: center; /* Center text for smaller screens */
  }

  #about .row {
    flex-direction: column-reverse; /* Stack photo below the text on small screens */
  }
}
.skill-icon {
    width: 40px;
    height: 40px;
    filter: invert(1); /* This makes the icon black */
}