/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
  margin-top: 65px; /* Adjusted for responsiveness */
  margin-bottom: -70px; /* Adjusted for responsiveness */
}

.hoo {
  font-size: 82px; /* Adjusted for scalability */
  margin-top: 20px; /* Corrected property name */
  margin-bottom: 20px; /* Corrected property name */
}

.small {
  font-size: 50px; /* Adjusted for scalability */
  margin-bottom: 20px; /* Adjusted for responsiveness */
}

.flex-container {
  display: flex;
  flex-direction: row; 
  flex-wrap: wrap;
  justify-content: center;
}

/* Adjusted for better responsiveness */
.flex-container > div .card {
  margin: 12px; /* Adjusted for scalability */
  font-size: 40px; /* Adjusted for scalability */
}

/* Styles for large screens */
@media (min-width: 992px) {
.hoo {
    font-size: 120px; /* Adjusted for scalability */
}
}

/* General styles for all screens */
@media all {
.hey {
    background-color: #ffffff;
}

.main {
    text-align: center;
    padding: 0px;
    margin: 0px;
    font-size: xx-large; /* Adjusted for scalability */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.fa {
    padding: 50px; /* Adjusted for larger screens */
    text-decoration: none;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 20%;
}

.fa:hover {
    opacity: 0.9;
}

.fa-calendar-plus-o {
    background: #5d4333;
    color: white;
}
}

/* Adjustments for medium screens */
@media (max-width: 991px) and (min-width: 768px) {
.hoo {
    font-size: 80px; /* Adjusted for scalability */
}

.fa {
    padding: 40px; /* Adjusted for medium screens */
}

.main {
    font-size: x-large; /* Adjusted for scalability */
}
}

/* Adjustments for small screens */
@media (max-width: 767px) {
.hoo {
    font-size: 60px; /* Adjusted for scalability */
}

.fa {
    padding: 30px; /* Adjusted for small screens */
}

.main {
    font-size: large; /* Adjusted for scalability */
}
}

/* Adjustments for extra small screens */
@media (max-width: 575px) {
.hoo {
    font-size: 40px; /* Adjusted for scalability */
}

.fa {
    padding: 20px; /* Adjusted for extra small screens */
}

.main {
    font-size: medium; /* Adjusted for scalability */
}
}