.cards {   
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18vw, 1fr)); 
    gap: 1%;
    margin: 2vh 5vw;
    place-items: center;
}

.card {   
    display: flex;
    flex-direction: column;
    border: 0.1vw solid #bdb6b6;
    border-radius: 5%;
    padding: 0.5vw;
    margin-bottom: 5vh;
    width: 18vw;
    background-color: #849c4a;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 7px 17px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transition: transform 0.2s ease-out;
}

.card img {
    width: 100%;
    height: 32.55vh;
    object-fit: cover;
    border-radius: 5%;
}

.cardText
{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cardTitle
{
  font-weight: bold;
  font-size: calc(2 * (1vw + 1vh)/2);
  margin: 1.3vh 0;
  color: #ffffff;
  transition: color 0.3s;
  text-align: center;

  font-family: "Crimson Text", serif;
  font-weight: 500;
  font-style: normal;
  text-shadow: 2px 2px 3px rgba(12, 51, 20, 0.3), 2px 2px 3px rgba(16, 77, 26, 0.3);
}

/*----Hover animation if not expanded----*/
.card:not(.expanded):hover .cardDescription
{
  color: #ffffff;
}

/*----Hover animation if not expanded----*/
.card:not(.expanded):hover 
{
    transform: scale(1.06);
    backdrop-filter: blur(1vW);
    background-color: #5e7034;
    cursor: pointer;
}

/*----Hover animation if not expanded----*/
.card:not(.expanded):hover .cardTitle 
{
    color: #ffffff;
}



/*-------------------------Expanded Cards--------------------------*/
/*------setarea expanded se adauga la click, e ca un indicator-----*/

.card.expanded 
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    flex-direction: row;
    background-color: rgba(0, 0, 0, 0);
    z-index: 9999;
    overflow: auto;
    transition: none;
    padding: 20px;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

.card.expanded .cardText 
{
    display: none;
}

.hiddenMenu
{
    display: none;
    padding: 20px;
    color: white;
    margin-left: 20px;
}
  
.card.expanded .hiddenMenu
{
    display: block;
    width: 100%;
}

.card.expanded p, .card.expanded h2
{
    color: #1b1d2c;
    
    transition: color 0.3s;
    text-align: left;
}
.card.expanded h2{
    margin-bottom: 20px;
}

.card.expanded img{
    width: 500px;
    height: 95%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 20px;
    align-items: center;
}

.card.expanded .title_expand {
    margin-top: 25px;
    display: flex;
    gap: 10px;
}

.card.expanded .title_expand p
{   
    background-color: #9aaf68;
    color: white;
    border-radius: 10%;
    font-size: calc(3 * (1vw + 1vh)/2);
    font-style: italic;
    margin: 0;
    text-align: center;
    margin-right: 20px;
}

.card.expanded h2
{
    font-size: calc(3 * (1vw + 1vh)/2);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(184, 182, 63);
}

.card.expanded p
{   
    font-size: calc(2 * (1vw + 1vh)/2);
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 10px;
    margin-bottom: 10px;
}
.hiddenMenu h3
{
    color: #1b1d2c;
    font-size: calc(2 * (1vw + 1vh)/2);
    font-family: "Crimson Text", serif;
    font-weight: 600;
    font-style: italic;
    text-align: left;
    margin-bottom: 10px;

}
.card.snap-back 
{
    transition: none !important;
}

.close-button 
{
    position: absolute;
    margin-top: -10px;
    right: 40px;
    font-size: calc(1.8 * (1vw + 1vh)/2);
    transition: 0.3s;
    color: #fff;
    border-radius: 5%;
    background-color: rgba(100, 100, 100, 0.4);
    text-decoration: none;
    padding: 2px 5px;
    border: none;
}

.close-button:hover 
{
    background-color: #a8be57;
    color: #353755;
}