#container {

  
margin-top: 50px;
  width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

  border-radius: 50px;
  
  text-align: center;
 
}


/* Kaarten */
.card {
  transition: transform 0.5s ;
  padding: 10px;
height: fit-content;
min-height: 500px;
  width: 100%;
  max-width: 350px;
border-radius: 20px;
  box-shadow: 5px 5px 5px black;
 display: none;
background-color: rgb(255, 255, 255);
 margin-bottom: 50px;
  flex-direction: column;
 
}

.card:hover {
transform: scale(1.05);

}
.card img {
  width: 100%;
  aspect-ratio: 4/ 3;   /* of 4 / 3 */
 
  border-radius: 10px;
}
img{

  height: 200px;
}
.beschrijving {

  position: relative;

  overflow: hidden;
   background: inherit; 
}

.meer-minder{
  color: rgb(1, 185, 202);
  cursor:pointer
}



.button1 {
    transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  background-color: rgb(71, 71, 237);
text-align: center;
  color: white;
  width: 200px;
  height: 50px;
  cursor: pointer;
  border-radius: 10px;
 text-decoration: none !important;
}
.button1:hover {
 transform: scale(1.05);
 background-color: rgb(49, 49, 246);
}

.button1:focus {
   text-decoration: none;
}
 a{
   text-decoration: none;
   outline: none;
 }


#projecten-box {

  display: grid;
  width: 100%;
  max-width: 1600px;
  height: auto;
  justify-self: center;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  justify-items: center;

}

#sorteerbox{
  justify-self: center;
  display: flex;
  justify-content: space-evenly;
  width: 80%;

  gap: 10px;
  margin-bottom: 100px;
}
#KopTekst{
 
  font-size: 50px;
}
#marked{
  color: rgb(0, 238, 255);
}

#KleineTekst{
  font-size: 25px;
}
#sorteertekst{
   color: rgb(2, 210, 175);
    font-size: 30px;
}


.sorteerKnop{
  display: flex;
  align-items: center;
  justify-content: center;
height: 30px;
width: 100px;
  border-radius: 5px;
  background-color: rgb(66, 147, 167);
  cursor: pointer;
}
.sorteerKnop:hover{
  background-color: rgba(37, 221, 241, 0.627);
  transform: scale(1.02);
}

.sorteerKnop.active{
  color: white;
  background-color: rgb(3, 140, 245) !important;
}




#beneden-lijn {
border: none;
height: 2px;
background-color: rgba(70, 200, 251);
 width: 95%;
 margin-bottom: 20px;



}
#Bladerknoppenlijst{
  width: 90%;
  margin-bottom: 20px;
  height: fit-content;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.Bladerknop{
  transition: 0.2s;
  border-radius: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
 
  font-size: 25px;
  width: 60px;

  height: 60px;
}

.Bladerknop:hover{
 color: rgb(148, 245, 252);
  font-size: 28px;
}

.Bladerknop.active{
 color: aqua;
}
/* Responsive */





@media only screen and (max-width: 720px) {
 
  #projecten-box {
   width: 80%;
    grid-template-columns: 1fr; /* 1 kolom op kleine schermen */
     /* optioneel, zodat ze niet tegen de rand plakken */
  }



  /* Verberg normale menu links */

  
  /* Hamburger menu standaard verbergen (JS toggle) */

}

/* Voor grotere schermen altijd hamburger menu verbergen */