body {
  margin: 0;
  font-family: serif;
  overflow-x: hidden;
}

.navbar {
  background-color: transparent !important;
  transition: background-color 0.5s ease;
}
.navbar.scrolled {
  background-color: rgba(44, 62, 80, 0.8) !important;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  color: #2c3e50;
}

.nav-link {
  color: #ffffff !important;
  font-weight: bold;
}

.hero {
  background: url('./1.png');
  background-size: contain;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.hero .container {
  max-width: 1200px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 30px;
}

.btn-outline-light {
  border-color: #ffffff;
  color: #ffffff;
  padding: 10px 20px;
}

.btn-outline-light:hover {
  background-color: #ffffff;
  color: #2c3e50;
}

.circle-animation {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-orbit {
  position: absolute;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid white;
  border-radius: 50%;
}

.ball {
  position: absolute;
  background-color: rgba(229, 223, 223, 0.951);
  border-radius: 50%;
}

.ball.large {
  position: relative;
  width: 20px;
  height: 20px;
}

.ball.medium {
  width: 50px;
  height: 50px;
}

.ball.small {
  width: 40px;
  height: 40px;
}
ul {
list-style-image: url('./leaf.webp');
}
nav ul li{
  font-size: larger;
  padding-left: 50px;
}