body{
    background-color: #28443F;
  }
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'poppins';
      text-decoration: none;
      scroll-behavior: smooth;
      list-style: none;
  
  
  }
  
  header{
      position: fixed;
      top: 1rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4rem;
      background-color: #F2FD7D;
      backdrop-filter: blur(8px);
      color: #28443F;
      padding: 0.5rem 1.5rem;
      border-radius: 3rem;
      z-index: 1000;
  }
  
  .logo{
    color: #28443F;
    font-size: 1.3rem;
    font-weight: 600;
    text-wrap: nowrap;
    transition: 0.3s ease-in-out;
    margin-right: 70px;
  }
  
  .logo:hover{
  transform: scale(1.1);
  }
  
  .nav-links{
      display: flex;
      gap: 2rem;
  }
  
  li a{
      position: relative;
      color: #28443F;
      font-weight: 300;
  }
  
  li a::before{
      position: absolute;
      content: '';
      width: 0;
      left: 0;
      height: 5px;
      top: 25px;
      border-radius: 1rem;
      transition: 0.3s ease-in-out;
      background: linear-gradient(to right, rgb(0,175,255), rgb(255,0,255) );
      background-size: 400% 400%;
      animation: gradient 3s ease infinite ;
  }
  
  li a:hover::before{ 
  width: 100%;
  }
  
  .visit-btn{
  padding: 0.8rem 1.5rem; 
  border-radius: 3rem; 
  border: none; 
  font-weight: 500; 
  font-size: 1rem; 
  color: white;
  cursor: pointer; 
  text-wrap: nowrap;
  transition: 0.3s ease-in-out;
  background: linear-gradient(to right, rgb(0, 157, 255), rgb(255, 0, 255));
  }
  .visit-btn:hover{
  background: linear-gradient(to right, rgb(255,0, 255),rgb(0,157, 255));
  transform: scale(1.03);}
  
  #menu-icon{
  font-size: 2rem; 
  display: none;
  }
  
 .visit-btn {
    background: linear-gradient(45 deg, rgb(255,0, 255),rgb(0,157, 255));
    background-size: 400% 400%;
    animation: gradient 3s ease infinite ;
  }

  .visit-btn:hover {
    background:#28443F;
    background-size: 400% 400%;
    animation: gradient 3s ease infinite ;
    color: #F2FD7D ;
  }

.footer {
  display: flexbox;
  text-align:center;
  align-content: end;
  background-color: #0f4a40;
  color: #F2FD7D;
  padding: 1rem;
}

.footername {
  text-align: left;
}
.footerdiscription{
  text-align: center;
  padding-bottom: 6rem;
}

  @keyframes gradient{
    0%{
      background-position: 0%;
    }
    50%{
      background-position: 100%;
    }
    100%{
      background-position: 0%;
    }
  }