* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: hidden; /* Menghindari scroll horizontal */
}

/* jumbooo */
.jumbotron {
  padding-top: 6rem;
  background-color: #11124897;
  margin: 4rem 0;
}

.section {
  padding-top: 5rem;
}

.jumbotron h1 {
  text-align: center;
  font-weight: 500;
  font-size: 1.7rem;
}

.jumbotron p {
  font-weight: 400;
  font-size: 1.3rem;
}

/* Nav */
.container ul li {
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
}

.container p {
  color: #2c2c3e97;
  font-weight: 800;
}

.container a {
  color: #ffffff;
  text-shadow: #333 1px 1px 1px;
  font-weight: 500;
}

.navbar-toggler-icon {
  background-color: #000; /* Warna hitam */
}

/* about */
#about img {
  width: 90%;
}

#about p {
  font-weight: 600;
  font-size: 1.1rem;
  color: #273036;
  margin-top: 2rem 0;
}

#about h2 {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.8rem;
  margin: 2rem 1rem;
}

/* Projects */
#my-projects {
  background-color: #273036;
}

#my-project img {
  margin-bottom: 6rem;
}

#my-projects h2 {
  font-weight: 600;
  font-size: 2rem;
  color: #ffffff;
  margin-top: 3rem;
}

.card p {
  font-size: 1.1rem;
  color: #676767;
  font-style: italic;
}

/* Custom hamburger icon */
.custom-toggler {
  border: none; /* Menghapus border default */
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  width: 1.5rem;
  height: 1.5rem;
}

/* Hover efek pada tombol hamburger */
.custom-toggler:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='yellow' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Navbar background (bisa diubah sesuai kebutuhan) */
.navbar {
  background-color: #000000; /* Warna gelap */
}

/* Link navbar */
.navbar-nav .nav-link {
  color: white; /* Warna teks link */
  font-size: 1rem;
  margin: 0 0.5rem;
  transition: color 0.3s ease;
  font-weight: 500;
}

/* Link hover effect */
.navbar-nav .nav-link:hover {
  color: rgb(251, 251, 251);
}

/* contact */
#contact h2 {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.9rem;
  margin-bottom: 3rem;
  margin-top: 3rem;
}

#my-projects h2 {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.9rem;
  margin-bottom: 3rem;
  margin-top: 3rem;
}

/* footer */
.footer-icons {
  align-items: center;
  background-color: #11124897;
  padding: 1rem 1rem;
  text-align: center;
  padding-bottom: 2rem;
}