.card {
  perspective: 1000px;
  width: 200px;
  height: 300px;
  position: relative;
  
}

.card-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  text-align: center;
  
  
  
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

/* Styling for the front and back sides of the card */
.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 20px;
  
}

.front {
  background-color: rgba(255, 255, 255, 0.59);
  color:#22315d
  
  
}

.back {
  background-color:#22315d;
  color: white;
  font-size: larger;
  font-weight: bold;
  transform: rotateY(180deg);
}
.logo {
  display: block;
  margin: auto;
  width: 100px; /* Adjust the width as needed */
  height: auto; /* Maintains aspect ratio */
}
.card {
  perspective: 1000px;
  width: 220px;
  height: 300px;
  position: relative;
  border: 2px solid rgb(51, 0, 255); /* Red border */
  box-sizing: border-box; /* Include border in the total width/heigboderht */
  border-radius: 22px;
  
}
.container {
  display: flex;
  justify-content: space-around; /* Adjust to distribute space evenly */
  align-items: center; /* Align items vertically in the center */
  max-width: 1000px; /* Limit the width to prevent excessive spreading */
  margin: 0 auto; /* Center the container */
}
.container1{
  display: flex;
  justify-content: space-evenly; /* Adjust to distribute space evenly */
  align-items: center; /* Align items vertically in the center */
  max-width: 1000px; /* Limit the width to prevent excessive spreading */
  margin: 0 auto;
  padding-right: 4.1%;
}