*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
.container{
    background-image: url(./assets/Garden\ img.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
     /* opacity: 0.8;  */
     width: 100vw; 
     height: 100vh; 
     padding: 20px;
     
    }
    

    
    nav{
        display: flex;
       width: 100%;
        height: 60px;
    }
    h1{
      position: fixed;
    }
    .logo{
        
        background-color: white;
        width: 20%;
        opacity: 0.7;
        display: flex;
        justify-content: start;
        align-items: center;
    }
    .list{
        width: 80%;
        background-color:white;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.7;
        
           

    }
    ul{
        display: flex;
        list-style: none;
        gap: 120px;
        
             
    }
    a{
        text-decoration: none;
        color: black;
    }

    .icon{
        
    }
     .parent{
        margin-top: 5%;
        width: 100%;
        height: 400px;
        /* background-color: rgb(199, 211, 27); */
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-between;

     }
    .card-1{
        background-color: white;
        height: 400px;
        width: 300px;
        opacity: 0.7;
    }
    .card-2{
        background-color: white;
        height: 400px;
        width: 300px;
        opacity: 0.7;
    }
    .card-3{
        background-color: white;
        height: 400px;
        width: 300px;
        opacity: 0.7;
    }
    .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* INDIVIDUAL CARD */
.card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
}
.card .icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 1.3rem;
  color: black;
  margin-bottom: 10px;
}

.card p {
  font-size: 1.1rem;
  color:black;
  line-height: 1.6;
}
   
  
    

/* RESPONSIVE */
@media (max-width: 768px) {
   ul {
    gap: 10px;
    display: flex;
    
  }
  a{
    display: none;
  }
 
  
    
    
  
}