* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}


body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: url("./homepage2-images/background.jpg");
  min-height: 100vh;
  color: #fff;
  overflow-x: hidden;
}

.bg-anim {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: radial-gradient(circle, rgba(56, 188, 135, 0.4) 0%, rgba(47, 237, 173, 0.2) 100%);
  animation: pulseBg 6s infinite alternate;
}

@keyframes pulseBg {
  to { filter: blur(15px) brightness(1.2);}
}

header nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  margin-top: auto;
}

.navbar {
  display: flex;
  gap: 50px;
  list-style: none;
  background: rgba(34, 116, 81, 0.4);
  padding: 18px 45px;
  border-radius: 40px;
  box-shadow: 0 4px 24px rgba(25, 210, 139, 0.13);
  animation: fadeInTop 2.5s cubic-bezier(.61,-0.09,.46,1.4);
  display: flex;
  align-items: center;
}

@keyframes fadeInTop {
  from {transform: translateY(-20px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}

.nav-link {
  position: relative;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 21px;
  transition: color 0.4s, background 0.4s;
}

.nav-link:before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg,#628B61,#9CB770);
  border-radius: 4px;
  transition: width 0.4s;
}

.nav-link:hover {
  background: rgba(21, 133, 97, 0.568);
}
.nav-link:hover:before, .nav-link.active:before {
  width: 100%;
}

.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px; 
  margin: 10px auto 0;
  min-height: 550px;
  background: rgba(50, 99, 78, 0.4);
  border-radius: 40px;
  box-shadow: 0 8px 32px rgb(0, 0, 0);
  padding: 70px 50px;
  gap: 40px;
  backdrop-filter: blur(4px);
  animation: fadeInMain 6s cubic-bezier(.31,.74,0,.96);
}

@keyframes fadeInMain {
  from {transform: scale(.95); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

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

.animated-text {
  display: inline-block;
  background: linear-gradient(90deg, #628B61, #9CB770, #C7E1BA);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: textGradient 3s infinite alternate;
}

@keyframes textGradient {
  to {background-position: 300px;}
}

.hero-content h2 {
  font-size: 2.1rem;
  margin-bottom: 16px;
  opacity: 0.86;
}

.hero-content p {
  font-size: 1.17rem;
  margin-bottom: 30px;
  color: #d2b7ff;
}

.download-btn {
  padding: 13px 43px;
  background: linear-gradient(90deg, #628b614c 30%, #c7e1ba5d 90%);
  border: none;
  border-radius: 22px;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 20px #619460;
  margin-bottom: 32px;
  outline: none;
  position: relative;
  transition: box-shadow 0.4s;
}

.download-btn:hover {
  box-shadow: 0 2px 36px #314431;
  filter: brightness(1.18);
}

.social-links {
  display: flex;
  gap: 18px;
  margin-top: 10px;
}
.social-links a {
  display: inline-block;
  color: #fff;
  font-size: 1.46rem;
  background: rgba(82, 178, 143, 0.882);
  padding: 8px;
  border-radius: 50%;
  transition: background .3s, box-shadow .3s;
}
.social-links a:hover {
  background: linear-gradient(90deg,#628b614c ,#c7e1ba5d);
  color: #fff;
  box-shadow: 0 2px 16px #628B61 ;
}

.hero-image {
  width: 360px; max-width: 37vw;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.animated-profile {
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 44px #FFA84C;
  border: 3px solid #ececec;
  animation: profileGlow 0.5s infinite alternate;
}

@keyframes profileGlow {
  to {box-shadow: 0 0 60px #FEFD00;}
}

@media (max-width:920px) {
  .hero-section {flex-direction:column;align-items:flex-start;padding:40px 10px;}
  .hero-image {align-self:center;}
}

@media (max-width:600px) {
  .navbar {gap:18px;padding:9px 13px;}
  .hero-content h1 {font-size:2rem;}
  .hero-image {width:210px;}
  .hero-section {padding:20px 5px}
}