*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}


body {
  margin: 0;
  background-color: #232222;
  overflow: auto;

}
.filter{
  position: relative;
top: 30%;
left: 40px;
}
  /* Card container styling */
.card-container {
  display: flex;                   /* Enables Flexbox */
  justify-content: space-between;   /* Evenly distributes the cards */
  flex-wrap: wrap;                  /* Allows cards to wrap if necessary */
  gap: 20px;                        /* Space between cards */
  padding: 20px;
 
}

  .card{
  flex: 1 1 22%;                    /* Each card takes up about 22% of the container width */
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 250px;
  color: white;
  text-align: center;
  font-family: arial;
  box-sizing: border-box;
  background: linear-gradient(145deg, #2c2c2c, #3a3a3a);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); 
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2); 
text-align:center;
}
   
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); 
}
.card-container img{
  width:100%;
  height: 220px;
  border-radius: 20px;
  object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
  border-radius: 20px 20px 0 0;
 }
.card-container{
   background-color: #232222; /* Dark grey background */
   padding: 80px;
   text-align: center;
   color: white;
  }

   .logo{
    position: absolute;
    top: 0%;
    left: 0%;

   }
  .card-container button {
   
    outline: 0;
    padding: 0px;
    border-radius: 10px;
    color:#34718b;
    background-color: #b4b9b9;
    text-align: center;
    cursor: pointer;
    height: 30%;
    width: 80%;
    font-size: 18px;
  }
  .topnav .search-container {
 position: relative;
    margin-top: 100px;
    padding-left: 5px; 
    left: 20%;
   
    
  }
  
  .topnav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: 1px solid  #0BAAEE;
    background:#ffffff;
    width: 700px;
  }
  .topnav .search-container button {
    /* float: right; */
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ffffff;
    font-size: 17px;
    border: none;
    cursor: pointer;
  }
 
   
  .footer {
      width:100%;
       height: 220px;
     
       object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
       border-radius: 20px 20px 0 0;
    background-color: black;
   }