<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Callcenter Service: Sunrediant</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Favicon -->
    <!-- <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png"> -->

    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/plugins/all.min.css">
    <link rel="stylesheet" href="assets/css/plugins/flaticon.css">
    <link rel="stylesheet" href="assets/css/plugins/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/plugins/aos.css">
    <link rel="stylesheet" href="assets/css/plugins/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/style.css">

  <!-- AOS Animation -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">

  <style>
    body {
    
      font-family: 'Poppins', sans-serif;
      background:#000;
      color:#fff;
      line-height:1.6;
    }
    h1,h2,h3,h4 { color:#00c6ff; }
    a { color:#00c6ff; text-decoration:none; }

/* Hero Section with Banner */
.hero {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)),
    url('https://img.freepik.com/free-photo/contract-male-sunny-sand-career_1134-990.jpg?ga=GA1.1.1377766556.1753945531&semt=ais_hybrid&w=740&q=80') 
    no-repeat center/cover;
  height: 120vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  padding-top: 250px; /* adjust if your header is taller/shorter */
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 20px; /* reduced space */
  text-transform: uppercase;
  font-weight: 700;
  color: #0072ff;
}

.hero p {
  font-size: 1.2rem;
  max-width: 750px;
  margin: 0 auto 30px auto; /* button will now sit right below */
  color: #ccc;
}

.hero .btn {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  color: #fff;
  padding: 14px 40px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 1rem;
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 20px rgba(0,198,255,0.4);
  border: none;
  display: inline-block;
}

.hero .btn:hover {
  background: linear-gradient(90deg, #0072ff, #00c6ff);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 30px rgba(0,198,255,0.7);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .hero {
    height: auto;
    padding: 120px 20px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 0.95rem;
  }
  .hero .btn {
    padding: 12px 30px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.6rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  .hero .btn {
    padding: 10px 24px;
    font-size: 0.85rem;
  }
}


    /* Services Section */
    .services {
      padding:100px 20px;
      text-align:center;
    }
    .services h2 { margin-bottom:50px; font-size:2.5rem; }
    .card-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:40px;
    }
    .card {
      background:#111;
      border-radius:16px;
      padding:40px 30px;
      transition:0.3s;
      position:relative;
      box-shadow:0 8px 30px rgba(0,198,255,0.1);
    }
    .card:hover { transform:translateY(-15px); box-shadow:0 10px 40px rgba(0,198,255,0.2); }
    .card i {
      font-size:2.5rem;
      color:#00c6ff;
      margin-bottom:20px;
    }
    .card h3 { margin-bottom:15px; font-size:1.3rem; font-weight:600; }
    .card p { color:#aaa; font-size:1rem; }

    /* Workflow Section */
    .workflow {
      padding:100px 20px;
      background:#0d0d0d;
      text-align:center;
    }
    .workflow h2 { margin-bottom:60px; font-size:2.5rem; }
    .steps {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:40px;
    }
    .step {
      flex:1 1 250px;
      background:#111;
      border-radius:12px;
      padding:35px;
      text-align:center;
      position:relative;
      box-shadow:0 5px 25px rgba(0,198,255,0.1);
      transition:0.3s;
    }
    .step:hover { transform:scale(1.05); }
    .step span {
      display:inline-block;
      width:60px;
      height:60px;
      background:#00c6ff;
      color:#000;
      border-radius:50%;
      line-height:60px;
      font-weight:700;
      margin-bottom:20px;
      font-size:1.2rem;
    }
    .step p { color:#bbb; }

    /* Testimonials */
    .testimonials {
      padding:100px 20px;
    }
    .testimonials h2 {
      text-align:center;
      margin-bottom:50px;
      font-size:2.5rem;
    }
    .testimonial-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:40px;
    }
    .testimonial {
      background:#111;
      border-radius:12px;
      padding:35px;
      position:relative;
      color:#ccc;
      box-shadow:0 5px 25px rgba(0,198,255,0.1);
    }
    .testimonial::before {
      content:"“";
      font-size:5rem;
      color:#00c6ff;
      position:absolute;
      top:-25px;
      left:25px;
      opacity:0.15;
    }
    .testimonial h4 {
      margin-top:25px;
      font-size:1rem;
      color:#fff;
      font-weight:600;
    }

    /* FAQ */
    .faq-section {
      max-width:900px;
      margin:100px auto;
      padding:0 20px;
    }
    .faq-section h2 { text-align:center; margin-bottom:40px; font-size:2.5rem; }
    .accordion { border-radius:12px; overflow:hidden; background:#1c1c1c; }
    .accordion-item { border-bottom:1px solid #333; }
    .accordion-header {
      width:100%;
      padding:18px 24px;
      font-size:1rem;
      text-align:left;
      border:none;
      background:#222;
      color:#00c6ff;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      transition:0.3s;
      border-radius:6px;
      margin-bottom:5px;
      font-weight:600;
    }
    .accordion-header:hover { background:#111; }
    .accordion-header::after { content:"+"; font-weight:bold; color:#00c6ff; }
    .accordion-header.active::after { content:"-"; }
    .accordion-content {
      max-height:0;
      overflow:hidden;
      background:#1c1c1c;
      transition:max-height 0.3s ease, padding 0.3s ease;
      padding:0 24px;
    }
    .accordion-content p { margin:18px 0; color:#ccc; }

    /* Contact Section */
 .contact {
    background: #0a0a0a;
    padding: 50px 30px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(0,198,255,0.2);
    color: #fff;
    text-align: center;
  }

  .contact h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #00c6ff;
  }

  .contact p {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 25px;
  }

  .contact form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .contact input,
  .contact textarea {
    width: 100%;
    padding: 10px 14px; /* reduced padding */
    border: none;
    border-radius: 8px; /* slightly smaller radius */
    background: #1a1a1a;
    color: #fff;
    font-size: 0.9rem; /* smaller font */
    outline: none;
    transition: all 0.3s ease;
  }

  .contact input:focus,
  .contact textarea:focus {
    border: 1px solid #00c6ff;
    box-shadow: 0 0 12px rgba(0,198,255,0.4);
  }

  .contact button {
    background: #00c6ff;
    color: #000;
    padding: 12px 30px; /* reduced size */
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.3s;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0,198,255,0.4);
  }

  .contact button:hover {
    background: #fff;
    color: #000;
    transform: scale(1.05);
  }


    /* Responsive */
    @media (max-width:768px){
      .hero h1 { font-size:2.3rem; }
      .hero p { font-size:1rem; }
    }
  </style>
</head>
<body>

 
               <?php include 'header.php'; ?>

  <!-- Hero -->
  <section class="hero" data-aos="fade-up">
  <h1>Professional Call Center Services</h1>
  <p>Delivering 24/7 customer support that builds trust, strengthens relationships, and accelerates business growth with the latest call center technology.</p>
  <a href="#contact" class="btn">Get Started</a>
</section>

  <!-- Services -->
  <section class="services" data-aos="fade-up">
    <h2>Our Core Services</h2>
    <div class="card-grid">
      <div class="card" data-aos="zoom-in">
        <i class="fas fa-headset"></i>
        <h3>Inbound Support</h3>
        <p>24/7 inbound customer support to handle queries, complaints, and requests with professionalism.</p>
      </div>
      <div class="card" data-aos="zoom-in" data-aos-delay="100">
        <i class="fas fa-phone-volume"></i>
        <h3>Outbound Calling</h3>
        <p>Proactive outbound campaigns for telemarketing, lead generation, and follow-ups.</p>
      </div>
      <div class="card" data-aos="zoom-in" data-aos-delay="200">
        <i class="fas fa-comments"></i>
        <h3>Live Chat & Email</h3>
        <p>Multi-channel support through chat and email, ensuring quick responses and resolutions.</p>
      </div>
      <div class="card" data-aos="zoom-in" data-aos-delay="300">
        <i class="fas fa-globe"></i>
        <h3>Technical Support</h3>
        <p>Expert-level assistance for software, products, and services with remote troubleshooting.</p>
      </div>
    </div>
  </section>

  <!-- Workflow -->
  <section class="workflow" data-aos="fade-up">
    <h2>How Our Call Center Works</h2>
    <div class="steps">
      <div class="step" data-aos="fade-right">
        <span>1</span>
        <h3>Client Onboarding</h3>
        <p>Understanding your business requirements and setting up a tailored support plan.</p>
      </div>
      <div class="step" data-aos="fade-up">
        <span>2</span>
        <h3>Agent Training</h3>
        <p>We train dedicated agents to represent your brand with expertise and empathy.</p>
      </div>
      <div class="step" data-aos="fade-left">
        <span>3</span>
        <h3>Customer Interaction</h3>
        <p>Handling inbound and outbound communication seamlessly across multiple platforms.</p>
      </div>
      <div class="step" data-aos="fade-up">
        <span>4</span>
        <h3>Reports & Insights</h3>
        <p>Delivering performance reports and analytics to ensure measurable growth.</p>
      </div>
    </div>
  </section>
  <!-- Call Center Success Stories -->
<section class="success-stories" data-aos="fade-up">
  <h2>Success Stories</h2>
  <div class="stories-container">
    
    <!-- Story 1 -->
    <div class="story-card" data-aos="zoom-in">
      <img src="assets/images/Customer Support.avif" alt="24/7 Customer Support">
      <h3>24/7 Customer Support</h3>
      <p>Delivered round-the-clock multilingual customer support for an international e-commerce brand, improving customer satisfaction scores by 40%.</p>
    </div>

    <!-- Story 2 -->
    <div class="story-card" data-aos="zoom-in" data-aos-delay="200">
      <img src="assets/images/Healthcare Assistance.jpg" alt="Healthcare Support">
      <h3>Healthcare Assistance</h3>
      <p>Provided HIPAA-compliant inbound call solutions for a hospital network, streamlining appointment scheduling and patient support services.</p>
    </div>

    <!-- Story 3 -->
    <div class="story-card" data-aos="zoom-in" data-aos-delay="400">
      <img src="assets/images/Technical Helpdesk.avif" alt="Technical Support">
      <h3>Technical Helpdesk</h3>
      <p>Set up a scalable technical helpdesk for a SaaS company, reducing average response time by 55% and boosting customer retention.</p>
    </div>

  </div>
</section>

<!-- CSS -->
<style>
.success-stories {
  background: #0a0a0a;
  padding: 60px 20px;
  text-align: center;
}

.success-stories h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #00c6ff;
}

.stories-container {
  display: flex;
  gap: 25px;
  justify-content: center;
  flex-wrap: wrap;
}

.story-card {
  background: #111;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,198,255,0.15);
  max-width: 350px;
  flex: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.story-card h3 {
  font-size: 1.3rem;
  margin: 20px 15px 10px;
  color: #00c6ff;
}

.story-card p {
  font-size: 0.95rem;
  color: #ccc;
  padding: 0 15px 20px;
}

.story-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(0,198,255,0.4);
}
</style>

  <!-- Industries We Serve Section -->
<section class="industries-section">
  <div class="container">
    <h2 class="section-title">Industries We Serve</h2>
    <p class="section-subtitle">Our call center solutions empower businesses across multiple industries with 24/7 support, seamless communication, and customer-first strategies.</p>
    
    <div class="industries-grid">
      <div class="industry-card">
        <i class="fas fa-stethoscope"></i>
        <h3>Healthcare</h3>
        <p>Appointment scheduling, patient support, and medical inquiries handled with care and compliance.</p>
      </div>
      
      <div class="industry-card">
        <i class="fas fa-shopping-cart"></i>
        <h3>E-commerce</h3>
        <p>Order management, product inquiries, and post-sales support for online stores & marketplaces.</p>
      </div>
      
      <div class="industry-card">
        <i class="fas fa-university"></i>
        <h3>Finance</h3>
        <p>Secure customer interactions, loan queries, and account management with top-notch data protection.</p>
      </div>
      
      <div class="industry-card">
        <i class="fas fa-plane"></i>
        <h3>Travel & Hospitality</h3>
        <p>Booking assistance, travel updates, and guest support to ensure a smooth customer journey.</p>
      </div>
      
      <div class="industry-card">
        <i class="fas fa-truck"></i>
        <h3>Logistics</h3>
        <p>Shipment tracking, delivery coordination, and real-time customer communication solutions.</p>
      </div>
      
      <div class="industry-card">
        <i class="fas fa-graduation-cap"></i>
        <h3>Education</h3>
        <p>Student inquiries, admissions support, and online learning assistance for institutions.</p>
      </div>

      <!-- Newly Added Industries -->
      <div class="industry-card">
        <i class="fas fa-laptop-code"></i>
        <h3>IT Services</h3>
        <p>Technical support, helpdesk services, and remote troubleshooting for IT companies.</p>
      </div>

      <div class="industry-card">
        <i class="fas fa-university"></i>
        <h3>Banking</h3>
        <p>Customer query handling, loan application support, and secure banking assistance.</p>
      </div>

      <div class="industry-card">
        <i class="fas fa-bullhorn"></i>
        <h3>Event & Advertising</h3>
        <p>Campaign inquiries, booking coordination, and client engagement for agencies.</p>
      </div>

      <div class="industry-card">
        <i class="fas fa-box"></i>
        <h3>FMCG</h3>
        <p>Consumer support, order processing, and supply chain coordination for FMCG brands.</p>
      </div>

      <div class="industry-card">
        <i class="fas fa-car"></i>
        <h3>Automobile</h3>
        <p>Dealership support, service appointment scheduling, and customer assistance for auto companies.</p>
      </div>
    </div>
  </div>
</section>

<!-- CSS -->
<style>
.industries-section {
  background: #000;
  padding: 80px 20px;
  text-align: center;
  color: #fff;
}

.industries-section .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00c6ff;
  margin-bottom: 20px;
}

.industries-section .section-subtitle {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 50px;
  color: #bbb;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.industry-card {
  background: #111;
  border-radius: 15px;
  padding: 40px 25px;
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(0,198,255,0.15);
}

.industry-card i {
  font-size: 2.5rem;
  color: #00c6ff;
  margin-bottom: 20px;
}

.industry-card h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #fff;
}

.industry-card p {
  font-size: 1rem;
  color: #ccc;
}

.industry-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 35px rgba(0,198,255,0.35);
}
</style>

<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">


  <!-- Testimonials -->
  <section class="testimonials" data-aos="fade-up">
    <h2>What Clients Say</h2>
    <div class="testimonial-grid">
      <div class="testimonial" data-aos="flip-left">
        <p>“The team has transformed our customer support. We now resolve issues faster and more effectively.”</p>
        <h4>- Monika, Business Owner</h4>
      </div>
      <div class="testimonial" data-aos="flip-right">
        <p>“Their outbound services helped us generate leads and close more deals in record time.”</p>
        <h4>- Ravindra Bisht, General Manager Marketing</h4>
      </div>
      <div class="testimonial" data-aos="flip-left">
        <p>“Professional, reliable, and available 24/7. Our customers are happier than ever.”</p>
        <h4>- Ajay Kumar, Operations Head</h4>
      </div>
    </div>
  </section>
  <!-- FAQ + Contact Container -->
  <section class="faq-contact-container" data-aos="fade-up" style="display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap;">
    
    <!-- FAQ -->
    <div class="faq-section" style="flex: 1; min-width: 300px;">
      <h2>Frequently Asked Questions</h2>
      <div class="accordion">
        <div class="accordion-item">
          <button class="accordion-header">What industries do you serve?</button>
          <div class="accordion-content"><p>We cater to multiple industries including healthcare, retail, technology, and finance with customized call center solutions.</p></div>
        </div>
        <div class="accordion-item">
          <button class="accordion-header">Do you provide 24/7 support?</button>
          <div class="accordion-content"><p>Yes, our agents work around the clock to ensure your customers are never left unattended.</p></div>
        </div>
        <div class="accordion-item">
          <button class="accordion-header">Can you scale with business growth?</button>
          <div class="accordion-content"><p>Our services are flexible and scalable to meet growing customer demands.</p></div>
        </div>
        <div class="accordion-item">
          <button class="accordion-header">How secure is customer data?</button>
          <div class="accordion-content"><p>We follow strict data security protocols, ensuring confidentiality and compliance with industry standards.</p></div>
        </div>
      </div>
    </div>

    <!-- Contact -->
   <div class="contact" id="contact" style="flex: 1; min-width: 300px;">
  <h2>Get in Touch</h2>
  <p>Let’s discuss how our call center solutions can improve your customer experience and business growth.</p>
  <form action="contact-handler.php" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <input type="text" name="subject" placeholder="Your Subject" required>
    <textarea name="message" rows="5" placeholder="Your Message" required></textarea>
    <button type="submit">Send Message</button>
</form>

</div>
    
  </section>

  <!-- Include Footer -->
                <?php include 'footer.php'; ?>


  <!-- JS Accordion -->
  <script>
    document.querySelectorAll('.accordion-header').forEach(btn => {
      btn.addEventListener('click', () => {
        const content = btn.nextElementSibling;
        btn.classList.toggle('active');
        if(btn.classList.contains('active')){
          content.style.maxHeight = content.scrollHeight + 'px';
          content.style.padding = '15px 20px';
        } else {
          content.style.maxHeight = '0';
          content.style.padding = '0 20px';
        }
      });
    });
  </script>

  <!-- AOS JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  <script>AOS.init({ duration: 1000, once: true });</script>

  <!-- Load Header & Footer -->
 


    <!-- JS
    ============================================ -->
    <script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="assets/js/plugins/popper.min.js"></script>
    <script src="assets/js/plugins/bootstrap.min.js"></script>

    <!-- Plugins JS -->
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/aos.js"></script>
    <script src="assets/js/plugins/waypoints.min.js"></script>
    <script src="assets/js/plugins/back-to-top.js"></script>
    <script src="assets/js/plugins/jquery.counterup.min.js"></script>
    <script src="assets/js/plugins/appear.min.js"></script>
    <script src="assets/js/plugins/jquery.magnific-popup.min.js"></script>


    <!--====== Use the minified version files listed below for better performance and remove the files listed above ======-->


    <!-- Main JS -->
    <script src="assets/js/main.js"></script>

</body>


</html>
