<style>
      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

      body {
        font-family: "Poppins", sans-serif;
        margin: 0;
        padding: 0;
        background-color: #000000;
        color: #fff;
        background-image: url("your-background-image.jpg"); /* Add your background image here */
        background-size: cover; /* Ensures the image covers the full screen */
        background-position: center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        background-attachment: fixed; /* Ensures the image stays fixed while scrolling */
      }

      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 80px;
        padding: 60;
      }

      .app-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #000000;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
        text-align: center;
      }

      

      .app-icon img {
        width: 330px; /* Set width to 400px */
        height: 440px; /* Set height to 500px */
        margin-bottom: 30px;
        transition: transform 0.3s ease; /* Animation removed */
      }

      .app-icon h3 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #ffffff;
        transition: transform 0.3s ease;
      }

      .app-icon:hover h3 {
        transform: scale(0.95);
        color: #00f80c;
        transition: transform 0.3s ease;
      }

      .app-icon .button {
        background-color: rgb(255, 255, 255);
        color: black;
        border: none;
        padding: 12px 30px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease,
          box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }

      .app-icon .button:hover {
        background-color: #46ee1d;
        transform: translateY(-3px) scale(0.95);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25),
          0 0 20px rgba(122, 250, 110, 0.5);
      }

      .app-icon .button:active {
        transform: translateY(1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
      }

      .message-box1 {
        display: none;
        position: absolute;
        bottom: -100%;
        left: 0;
        right: 0;
        background-color: #bdbdc2;
        color: #000000;
        padding: 20px;
        border-radius: 0 0 15px 15px;
        transition: bottom 0.3s ease, opacity 0.3s ease;
        opacity: 0;
        max-height: 200px;
        display: flex;
        flex-direction: column;
      }

      .app-icon.active .message-box1 {
        display: flex;
        bottom: 0;
        opacity: 1;
      }

      .close-button {
        background: transparent;
        border: none;
        color: rgb(0, 0, 0);
        font-size: 20px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
        transition: transform 0.3s ease;
      }

      .close-button:hover {
        transform: scale(1.1);
      }

      .message-content1 {
        overflow-y: auto;
        padding-right: 30px;
        direction: rtl;
        text-align: center;
        transition: opacity 0.3s ease;
      }

      .button-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }

      .voice-button,
      .stop-button {
        background: transparent;
        border: none;
        cursor: pointer;
        color: #000000;
        font-size: 24px;
        margin: 0 10px;
        transition: transform 0.3s ease;
      }

      .voice-button:hover,
      .stop-button:hover {
        transform: scale(1.1);
      }

      @media (max-width: 768px) {
        .container {
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          padding: 20px; /* Reduced padding for smaller screens */
        }

        .app-icon {
          padding: 20px; /* Reduced padding for smaller screens */
        }

        .app-icon img {
          width: 100%; /* Make the image responsive */
          height: auto; /* Maintain aspect ratio */
          max-width: 300px; /* Limit maximum width */
        }

        .app-icon h3 {
          font-size: 18px; /* Smaller font size for smaller screens */
        }

        .app-icon .button {
          padding: 10px 20px; /* Smaller button padding */
          font-size: 14px; /* Smaller font size */
        }
      }
    </style>