body {
    background-color: #f0f0f0; /* Light gray background for the entire page */
  }
  .form-container {
    max-width: 800px;
    margin: 30px auto;
    background-color: #ffffff; /* White background for the form */
    padding: 30px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for form */
  }
  .emoji {
    font-size: 80px !important;
    cursor: pointer;
  }
  .emoji-row {
    display: flex;
    justify-content: space-evenly;
    margin: 10px 0;
    flex-wrap: wrap; /* Allow emojis to wrap in small screens */
  }
  .emoji-card {
    text-align: center;
    padding: 15px;
    margin: 5px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 18%; /* Set width of cards to prevent overflow */
    min-width: 100px; /* Ensure cards have a minimum width */
    box-sizing: border-box;
    word-wrap: break-word;
  }

.emoji-card.selected {
    background-color: #c8f5c9; /* Highlight the selected card with a light green */
    border-color: #28a745;     /* Change border color */
}


  .emoji-card:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
  }
  .emoji-row input {
    display: none;
  }
  .emoji-row label {
    cursor: pointer;
    font-size: 13px;
  }
  .form-label {
    font-weight: bold;
  }
  .emoji-card.selected {
    background-color: #c8f5c9;
    border-color: #28a745;
  }

  /* Header style */
  .header {
    background-color: #FFA500; /* Orange background */
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    border-radius: 8px 8px 0 0; /* Rounded corners at the top */
  }

  /* Row with logo */

  .logo-row {
    text-align: center; /* This centers the content inside the row */
    margin-bottom: 20px;
  }
  
  .logo {
    /* max-width: 150px; */
    height: auto;
    display: block; /* This makes the image block-level to apply margin auto */
    margin: 0 auto; /* This centers the image horizontally */
  }

  .btn {
    background-color: #FFA500; 
    border-color: #FFA500;
  }

  .btn:hover {
    background-color: #F9F9F9;
    border-color: #ccc;
    color: #FFA500;
  }
    
  
  /* Media query for responsive adjustments */
  @media (max-width: 767px) {
    .emoji-card {
      width: 100%;
      max-width: none; /* Full width on smaller screens */
      margin-bottom: 10px; /* Space between cards */
    }
  }