.parent{
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: fit-content;
  border-radius: 10px;
  height: fit-content;
  flex-direction: column;
  gap: 16px;
}


.flexbox {
  display: flex;
  width: fit-content;
  gap: 4px;
  flex-wrap: nowrap;
  flex-direction: column;
  min-height: fit-content;
  border-radius: 10px;
}

.flexitem1 {
  background-color: rgb(155, 179, 201);
  min-height: 100px;
  max-height: 100px;
  min-width: fit-content;
  max-width: 300px;
  border-radius: 10px;
  border: 1px solid rgb(81, 196, 204);
  display: flex;            /* Allow image to flex inside */
  justify-content: center;  /* Optional: center horizontally */
  align-items: center;      /* Optional: center vertically */
  overflow: hidden;         /* Prevent image from spilling out */
}

.flexitem1 img {
  width: 100%;         /* Fill the width */
  height: 100%;        /* Fill the height */
  object-fit: fill;   /* or 'contain', depending on need */
  border-radius: 10px; /* Match parent if needed */
}


.flexitem2 {
  height: 100%;
  min-width: 300px;
  background-color: rgb(155, 179, 201);
  border-radius: 10px;
  border: 1px solid rgb(81, 196, 204); /* ← Add this */
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.flexitem3 {
  width: 500px;
  height: auto;
  background-color: rgb(155, 179, 201);
  border-radius: 10px;
  border: 1px solid rgb(81, 196, 204);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-align: center;

  /* Center text using Flexbox */
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

.flexbox1{
  display: flex;
  flex-direction: row;
  gap: 4px;
}