body {
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .logo {
    width: 50%;  /* Make the logo take full width on smaller screens */
    max-width: 1280px;  /* Set a max width on very large screens to avoid it getting too large */
    height: auto;  /* Maintain aspect ratio */
  }
  @media (min-width: 768px) {
    .logo {
      width: 20%;  /* Set the logo width to 20% on larger screens */
    }
  }
  .form-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    max-width: 50%;
  }
  @media (max-width: 768px) {
    .form-container {
      max-width: 100%;
    }
  }
  #text-input {
    direction: rtl;
  }
  .letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    direction: rtl;
    gap: 10px;
    margin-top: 20px;
  }
  .letter-btn {
    font-size: 1.5rem;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
  }
  .letter-btn:hover {
    background-color: #f0f0f0;
  }
  .letters {
display: grid;
gap: 10px;
margin-top: 20px;
direction: rtl;
}

/* Define number of columns for different screen sizes */
@media (min-width: 1200px) {
.letters {
  grid-template-columns: repeat(7, 1fr); /* 7 columns on extra-large screens */
}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
.letters {
  grid-template-columns: repeat(6, 1fr); /* 6 columns on large screens */
}
}

@media (min-width: 768px) and (max-width: 991.98px) {
.letters {
  grid-template-columns: repeat(4, 1fr); /* 4 columns on medium screens */
}
}

@media (max-width: 767.98px) {
.letter-btn {
  font-size: 1.25rem;
  padding: 1px 7px 5px;
  background-color: #fff; /* Button background color */
  color: black; /* Ensure text color is black */
  cursor: pointer;
  appearance: none; /* Remove native button styles */
  -webkit-appearance: none; /* Remove native styles for iOS */
  -moz-appearance: none; /* Remove native styles for Firefox */
  text-decoration: none; /* Remove any default text decorations */
}
.letters {
  grid-template-columns: repeat(7, 1fr); /* 3 columns on small screens */
}
}

/* Add any custom styling if necessary */
.text-center.d-flex {
gap: 10px; /* Add spacing between buttons */
}
.equal-div {
flex: 1; /* Makes both divs take equal space */
max-width: 300px; /* Optional: Limit the width of each div */
height: 150px; /* Set a fixed height */
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}

.red-text {
color: red; /* Text color red */
font-size: .7rem;
}