.navbar {

  width: 100%;

  padding: 0.5rem 6%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: rgba(255,255,255,0.85);

  backdrop-filter: blur(10px);

  position: sticky;

  top: 0;

  z-index: 1000;
}

.logo {

  height: 60px;

  display: flex;

  align-items: center;

}

.logo img {

  height: 190px;

  width: auto;

  object-fit: contain;

  display: block;

}

nav {
  display: flex;
  gap: 2rem;
}

nav a {
  text-decoration: none;
  color: var(--text);
}

.hero {

  min-height: 78vh;

  display: grid;

  grid-template-columns: 45% 55%;

  align-items: start;

  padding: 3% 8%;

  padding-top: 7rem;

  overflow: hidden;

}

.hero-text h1 {
  font-size: 5rem;
  line-height: 1;
}

.hero-text span {
  color: var(--orange);
}

.hero-text p {
  margin: 2rem 0;
  font-size: 1.2rem;
  max-width: 500px;
}

.hero button {
  padding: 1rem 2rem;

  border: none;
  border-radius: 50px;

  background: var(--orange);
  color: white;

  font-size: 1rem;

  cursor: pointer;
}
.hero-image {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  margin-top: -180px;

}

.hero-image img {

  width: 120%;

  max-width: 850px;

  object-fit: contain;

}

.topics {
    padding: 1% 8% 5% 8%;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;
}

.card {
  background: white;
  padding: 2rem;
  border-radius: 30px;

  transition: 0.3s;
}

.card:hover {
  transform: translateY(-10px);
}

.hero-image {
  position: relative;
}

.hero-image::before {

  content: "";

  position: absolute;

  width: 600px;
  height: 600px;

  background: var(--mint);

  border-radius: 50%;

  z-index: -1;

  opacity: 0.5;

}

.main-button {

  display: inline-block;

  margin-top: 2rem;

  padding: 1rem 2rem;

  background: var(--orange);

  color: white;

  text-decoration: none;

  border-radius: 50px;

  font-size: 1rem;

  transition: 0.3s ease;

}

.main-button:hover {

  transform: translateY(-3px);

}
.story-navigation {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 5% 8%;

}

.nav-story {

  text-decoration: none;

  background: white;

  padding: 1rem 2rem;

  border-radius: 50px;

  color: var(--text);

  transition: 0.3s ease;

}

.nav-story:hover {

  transform: translateY(-5px);

  background: var(--orange);

  color: white;

}

.info {
  margin-top: -8rem;

  padding: 0 8%;

  position: relative;

  z-index: 5;

}


.info h2 {

  font-size: 3rem;

  line-height: 1.1;

  max-width: 600px;

  color: var(--dark);


}

.info h2 {

  animation: fadeUp 1s ease;

}

@keyframes fadeUp {

  from {

    opacity: 0;
    transform: translateY(20px);

  }

  to {

    opacity: 1;
    transform: translateY(0);

  }

}