html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   background-color: #fbf5e8;
   font-family: Arial, sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex-top {
  height: 70%;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

.flex-top img {
  max-height: 70%;
  object-fit: contain;
}

.flex-bottom {
  height: 30%;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: flex-start;     /* vertical */
  gap: 1rem;
}

.flex-bottom a {
  width: 6%;
  height: auto;
  transition: transform 0.3s ease;
}

.flex-bottom a:hover {
  transform: scale(1.2);
}

/* 📱 Mobile-only styles (screens smaller than 768px) */
@media (max-width: 767px) {
  .flex-bottom a {
    width: 16%; /* increase size for mobile */
  }
}

/* 📱💻 Tablet styles (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .flex-bottom a {
    width: 12%; /* Slightly bigger on tablets */
  }
}