.typing-container {
            margin: auto;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        .section {
            width: 250px;
            margin-bottom: 50px; 
            padding: 30px; 
            border-radius: 10px;
        }

        /* Different background colors for each section */
        .section:nth-child(1) { background-color: #E3F2FD; }  /* Light Red */
        .section:nth-child(2) { background-color: #E3F2FD; }  /* Light Blue */
        .section:nth-child(3) { background-color: #E3F2FD; }  /* Light Green */
        .section:nth-child(4) { background-color: #E3F2FD; }  /* Light Orange */

        .typing-title {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: black;            /*animation: colorChange 5s infinite alternate;*/
        }

        .typing-description {
            font-size: 10px;
            line-height: 1.8; 
            color: #333;
            animation: textGlow 4s infinite alternate;
        }

        .highlight {
            font-weight: bold;
            color: #ff5722;
            animation: colorPulse 3s infinite alternate;
        }

        /* Color Animations */
        @keyframes colorChange {
            0% { color: #ff5722; }
            50% { color: #009688; }
            100% { color: #3f51b5; }
        }

        @keyframes textGlow {
            0% { color: #333; }
            50% { color: #555; }
            100% { color: #777; }
        }

        @keyframes colorPulse {
            0% { color: #e91e63; }
            50% { color: #ff9800; }
            100% { color: #8bc34a; }
        }

        .top{
           padding-top: 20px;
            text-align: center;
            height: 200px;
            background-color: #8bc34a;
        }
    .grid {
      top: -100px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      padding-top: 50px;
      padding-bottom: 50px;
      padding-left: 50px;
      padding-right: 50px;
      gap: 20px;
      max-width: 1200px;
      width: 100%;
    }

    .card {
         position: absolute;
      top: -100px;
      color: white;
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      text-align: center;
      padding: 40px 20px 20px 20px;
      position: relative;
      animation: slideIn 0.8s ease forwards;
      transform: translateY(100px);
      opacity: 0;
    }

    .card:nth-child(1) { background: #3b82f6; animation-delay: 0.1s; } /* Blue */
    .card:nth-child(2) { background: #10b981; animation-delay: 0.2s; } /* Green */
    .card:nth-child(3) { background: #f59e0b; animation-delay: 0.3s; } /* Orange */
    .card:nth-child(4) { background: #8b5cf6; animation-delay: 0.4s; } /* Purple */
    .card:nth-child(5) { background: #ec4899; animation-delay: 0.5s; } /* Pink */

    .card-title {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      background: white;
      color: #000;
      padding: 6px 22px;
      font-weight: bold;
      font-size: 18px;
      white-space: nowrap;
      border-radius: 25px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .icon {
      width: 80px;
      height: 80px;
      margin-bottom: 15px;
     
      display: block;       /* <-- important */
  margin-left: auto;    /* <-- centers horizontally */
  margin-right: auto;
    }

    .btn {
      display: inline-block;
      padding: 10px 18px;
      background: white;
      color: #000;
      text-decoration: none;
      border-radius: 30px;
      transition: background 0.3s ease, transform 0.2s ease;
      font-weight: 500;
    }

    .btn:hover {
      background: #e0eaff;
      transform: scale(1.05);
    }

    .btn::after {
      content: ' ➜';
    }

    @keyframes slideIn {
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @media (max-width: 600px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }