* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* S is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana, sans-serif;
}



/* Header */
#header {
  background-color: #333;
  color: white;
  padding: 20px 0;
}

#header .nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .nav-bar .brand h1 {
  font-size: 2.5rem;
  color: #fff;
}

#header .nav-bar .brand h1 span {
  color: #FF6347;
}

#header .nav-list ul {
  display: flex;
  list-style: none;
}

#header .nav-list ul li {
  margin: 0 15px;
}

#header .nav-list ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  position: relative;
}

#header .nav-list ul li a:after {
  content: attr(data-after);
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FF6347;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

#header .nav-list ul li a:hover:after {
  transform: scaleX(1);
  opacity: 1;
}

/* Hero Section */
#hero {
  background-color: #FF6347;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

#hero h1 {
  font-size: 3.5rem;
  margin: 20px 0;
}

#hero h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

#hero .cta {
  background-color: #fff;
  color: #333;
  padding: 10px 30px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  margin-top: 20px;
}

#hero .cta:hover {
  background-color: #f1f1f1;
}

/* About Section */
#about {
  display: flex;
  justify-content: space-between;
  padding: 60px 20px;
}

#about .col-left {
  width: 40%;
}

#about .col-right {
  width: 55%;
}

#about .about-img img {
  width: 100%;
  border-radius: 10px;
}

#about h1.section-title {
  font-size: 2rem;
  margin-bottom: 10px;
}

#about h2 {
  font-size: 1.3rem;
  margin: 10px 0;
}

#about p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Skills Section */
#services {
  padding: 60px 20px;
  background-color: #f1f1f1;
}

#services .section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
}

#services .service-item {
  display: inline-block;
  width: 30%;
  text-align: center;
  margin: 10px;
}

#services .service-item .icon img {
  width: 80px;
}

#services .service-item h2 {
  font-size: 1.5rem;
  margin: 10px 0;
}

#services .service-item p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Projects Section */
#projects {
  padding: 60px 20px;
}

#projects .section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
}

#projects .all-projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#projects .project-item {
  width: 48%;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

#projects .project-item .project-info {
  padding: 20px;
}

#projects .project-item .project-info h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

#projects .project-item .project-info p {
  font-size: 1rem;
  line-height: 1.5;
}

#projects .project-item .project-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Certificates Section */
#certificates {
  padding: 60px 20px;
  background-color: #f1f1f1;
}

#certificates .section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
}

#certificates .all-projects {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#certificates .project-item {
  width: 48%;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#certificates .project-item .project-info {
  padding: 20px;
}

#certificates .project-item .project-info h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

#certificates .project-item .project-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Contact Section */
#contact {
  padding: 60px 20px;
  background-color: #333;
  color: white;
}

#contact .section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
}

#contact .contact-items {
  display: flex;
  justify-content: space-between;
}

#contact .contact-item {
  width: 30%;
  text-align: center;
}

#contact .contact-item .icon img {
  width: 50px;
  margin-bottom: 15px;
}

#contact .contact-item h1 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

#contact .contact-item h2 {
  font-size: 1.2rem;
}

/* Footer */
#footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
  text-align: center;
}

#footer .social-icon {
  margin: 20px 0;
}

#footer .social-item {
  display: inline-block;
  margin: 0 10px;
}

#footer .social-item a img {
  width: 30px;
}

#footer p {
  font-size: 1rem;
  margin-top: 10px;
}
d-color: white;
  color: black;
  font-family: Verdana;
}