@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Onest:wght@300;400;500;600;700;800;900&display=swap");

:root {
  /* Colors */

  --white: #fffeff;
  --orange: #f7931e;
  --softblack: #1f1e1f;

  /* Fonts */

  --onest: "Onest", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--white);
}

/* NAVBAR */

.navbar {
  margin-top: 1rem;
}

.navbar .navbar-nav .nav-item a {
  margin-inline: 1rem;
  font-family: "Onest", sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--softblack);
}

.navbar .navbar-nav .nav-item a:hover {
  transition: all 0.4s ease-in-out;
  color: var(--orange);
}

.custom-toggler.navbar-toggler {
  border-color: var(--orange);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 128, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hero Section */

#hero {
  display: flex;
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala */
  height: auto; /* Ekran yüksekliği kadar büyüt */
}

#hero .hero-title {
  font-family: var(--onest);
  font-weight: bold;
  font-size: 38px;
  letter-spacing: 0.3px;
  color: var(--orange);
}

#hero .hero-subtitle {
  font-family: var(--onest);
  font-weight: 500;
  color: var(--softblack);
  text-align: center;
  width: 45%;
  font-size: 20px;
  letter-spacing: 0.3px;
}

.responsive-img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}