{% load static %}

<section id="call-to-action" class="call-to-action section light-background">

  <div class="container" data-aos="fade-up" data-aos-delay="100">

    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="cta-header text-center" data-aos="fade-up" data-aos-delay="200">
          <div class="d-flex align-items-center justify-content-center gap-2 mb-3">
            <span style="display:inline-block;width:36px;height:2px;background:var(--accent-color);border-radius:2px;"></span>
            <span style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent-color);font-family:var(--nav-font);">Why Radiant Infotech</span>
            <span style="display:inline-block;width:36px;height:2px;background:var(--accent-color);border-radius:2px;"></span>
          </div>
          <h2>22+ Years of Delivering<br>
            <span style="color:var(--accent-color);">Technology That Works</span>
          </h2>
          <p>From startups to government agencies — businesses across Nepal trust Radiant Infotech to build, maintain, and grow their digital infrastructure with consistency and care.</p>
        </div>
      </div>
    </div>

    <div class="cta-main" data-aos="fade-up" data-aos-delay="300">
      <div class="row align-items-center g-5">

        <div class="col-lg-6">
          <div class="achievements-grid">

            <div class="achievement-item" data-aos="zoom-in" data-aos-delay="400">
              <div class="achievement-icon">
                <i class="bi bi-shield-lock"></i>
              </div>
              <div class="achievement-info">
                <h3>Class 1,2,3</h3>
                <span>Digital Signature Certificates</span>
              </div>
            </div>

            <div class="achievement-item" data-aos="zoom-in" data-aos-delay="450">
              <div class="achievement-icon">
                <i class="bi bi-clock-history"></i>
              </div>
              <div class="achievement-info">
                <h3>22+</h3>
                <span>Years of Experience</span>
              </div>
            </div>

            <div class="achievement-item" data-aos="zoom-in" data-aos-delay="500">
              <div class="achievement-icon">
                <i class="bi bi-building"></i>
              </div>
              <div class="achievement-info">
                <h3>PKI Enabled</h3>
                <span>Infrastructure with DR Site</span>
              </div>
            </div>

            <div class="achievement-item" data-aos="zoom-in" data-aos-delay="550">
              <div class="achievement-icon">
                <i class="bi bi-award"></i>
              </div>
              <div class="achievement-info">
                <h3>Licensed</h3>
                <span>Certifying Authority</span>
              </div>
            </div>

          </div>
        </div>

        <div class="col-lg-6">
          <div class="action-panel" data-aos="fade-left" data-aos-delay="350">

            <div class="panel-content">
              <div class="d-flex align-items-center gap-2 mb-3">
                <div style="width:36px;height:36px;background:color-mix(in srgb, var(--accent-color), transparent 88%);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                  <i class="bi bi-laptop" style="color:var(--accent-color);font-size:1rem;"></i>
                </div>
                <span style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent-color);font-family:var(--nav-font);">Start Your Project</span>
              </div>
              <h3>Ready to Transform<br>Your Business?</h3>
              <p>Whether you need digital signature certificates, custom software development, web solutions, graphic design, or ICT consulting — our team is ready to deliver the right solution, on time and within budget.</p>

              <div class="action-buttons">
                <a href="{% url 'contact_us' %}" class="btn-primary">
                  <span>Get in Touch</span>
                  <i class="bi bi-arrow-right"></i>
                </a>
                <a href="{% url 'services' %}" class="btn-secondary">
                  <span>Our Services</span>
                  <i class="bi bi-eye"></i>
                </a>
              </div>
            </div>

            <div class="contact-quick">
              <div class="contact-row">
                <i class="bi bi-telephone-fill"></i>
                <div class="contact-details">
                  <span class="contact-label">Call Us</span>
                  <span class="contact-value">01-4545765 / 01-4524311</span>
                </div>
              </div>
              <div class="contact-row">
                <i class="bi bi-envelope-fill"></i>
                <div class="contact-details">
                  <span class="contact-label">Email Us</span>
                  <span class="contact-value">info@radiantnepal.com</span>
                </div>
              </div>
              <div class="contact-row">
                <i class="bi bi-geo-alt-fill"></i>
                <div class="contact-details">
                  <span class="contact-label">Visit Us</span>
                  <span class="contact-value">Radiant Building, Tukucha Marga, Naxal, Bhatbhateni, Kathmandu Nepal</span>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>

  </div>

</section>