<!-- Tutee E-Learning Contact Button (paste into a Zoho Sites Embed/HTML block) -->
<style>
  /* Button base */
  .tutee-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
    box-shadow: 0 6px 18px rgba(18, 38, 63, 0.12);
    -webkit-tap-highlight-color: transparent;
  }

  /* Primary style (Tutee brand-ish) */
  .tutee-contact-btn.primary {
    background: linear-gradient(90deg, #0b6bff 0%, #0066cc 100%);
    color: #ffffff;
  }

  /* Secondary / outline style */
  .tutee-contact-btn.outline {
    background: transparent;
    color: #0b6bff;
    border: 2px solid rgba(11,107,255,0.18);
  }

  /* Small / large modifiers */
  .tutee-contact-btn.small { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
  .tutee-contact-btn.large { padding: 14px 22px; font-size: 18px; border-radius: 14px; }

  /* Hover & active */
  .tutee-contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(11,107,255,0.12);
  }
  .tutee-contact-btn:active { transform: translateY(-1px); opacity: 0.96; }

  /* Focus accessibility */
  .tutee-contact-btn:focus {
    outline: 3px solid rgba(11,107,255,0.18);
    outline-offset: 3px;
  }

  /* Icon styling (if you include an icon) */
  .tutee-contact-btn .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
  }

  /* Responsive block option: full-width on small screens */
  @media (max-width: 520px) {
    .tutee-contact-btn.responsive-full {
      display: inline-flex;
      width: 100%;
      justify-content: center;
      padding-left: 16px;
      padding-right: 16px;
    }
  }
</style>

<!-- Example 1: Button opens mail client -->
<a class="tutee-contact-btn primary responsive-full" href="mailto:subh4397@gmail.com?subject=Contact%20Request%20-%20Tutee%20E-Learning" title="Email us">
  <span class="icon" aria-hidden="true">📧</span>
  Contact Us
</a>

<!-- Example 2: Button opens WhatsApp (use if you want link to WhatsApp chat) -->
<!-- Replace phone number with international format if needed, here example uses India number -->
<a class="tutee-contact-btn outline" href="https://wa.me/918339827528?text=Hi%20Tutee%20E-Learning%2C%20I%20want%20to%20know%20about%20tuition" target="_blank" rel="noopener" title="Chat on WhatsApp">
  <span class="icon" aria-hidden="true">💬</span>
  Chat on WhatsApp
</a>

<!-- Example 3: Button that scrolls to a Contact section on the same page -->
<a class="tutee-contact-btn primary large" href="#contact-section" title="Go to contact form">
  <span class="icon" aria-hidden="true">📞</span>
  Schedule a Class
</a>