* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    section {
      padding: 0px 20px;
      background: #fff;
      overflow: hidden;
    }

    .wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 40px;
      max-width: 1200px;
      margin: auto;
    }

    .text-block h2 {
         text-align: center;
    font-size: 33px;
    color: #000 !important;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    }

    .text-block h2 span {
      color: #2563eb;
    }

    .text-block p {
      color: #555;
      margin-bottom: 30px;
      line-height: 1.6;
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s ease 0.2s;
    }

    .benefits {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .benefit-card {
      background: #fff;
      border: 1px solid #eee;
      padding: 25px;
      border-radius: 15px;
      text-align: left;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease, transform 0.8s ease, opacity 0.8s ease;
      cursor: pointer;
      opacity: 0;
      transform: translateY(40px);
    }

    .benefit-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
    }

    .benefit-icon {
      font-size: 40px;
      color: #2563eb;
      margin-bottom: 15px;
      transition: transform 0.3s;
    }

    .benefit-card:hover .benefit-icon {
      transform: rotate(8deg) scale(1.1);
    }

    .benefit-card h4 {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 8px;
      color: #1a1a1a;
    }

    .benefit-card p {
      font-size: 0.9rem;
      color: #555;
    }

    .visual img {
     width: 100%;
      opacity: 0;
      margin-bottom: -100px;
      transform: translateX(40px);
      transition: all 1s ease;
    }
    /* Responsive fix */
@media (max-width: 900px) {
  .visual img {
    margin-bottom: 0; /* Mobile/Tablet ke liye reset */
  }
}

    /* Active (when visible) */
    .show {
      opacity: 1 !important;
      transform: translate(0) !important;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .wrapper {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .text-block {
        order: 2;
      }
      .visual {
        order: 1;
      }
      .benefits {
        text-align: center;
      }
    }