<!-- Declaration of XML version and encoding -->
<?xml version="1.0" encoding="UTF-8"?>

<!-- Document type declaration for XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Root HTML element with XML namespace declaration -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!-- Meta tags for character encoding and viewport settings -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Title of the document -->
    <title>Document</title>

    <!-- External stylesheet links -->

    <!-- Bootstrap styles -->
    <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />

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

    <!-- Custom Styles -->
    <link rel="stylesheet" href="assets/css/style.css" />

    <!-- Animation styles -->
    <link rel="stylesheet" href="assets/css/animation.css" />

    <!-- Responsive styles -->
    <link rel="stylesheet" href="assets/css/responsive.css" />
  </head>

  <body class="overflow-hidden">
    <!-- Main content container -->
    <main class="overflow-hidden">
      <!-- Header section -->
      <header class="wrapper FadeC">
        <!-- Logo and contact information -->
        <div class="logo">
          <img src="assets/images/icon.png" alt="Icon" />
          Fimro.
        </div>
        <div class="contact">
          <!-- Social icons -->
          <div class="social-icons">
            <a href="#"><i class="fa-brands fa-facebook"></i></a>
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-youtube"></i></a>
            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
          </div>
          <!-- Call information -->
          <div class="call">
            <i class="fa-solid fa-phone-volume"></i>
            <article class="call-details">
              <span>Give us a call</span>
              <a href="tel:+92 123 456 7890"><h5>+92 123 456 7890</h5></a>
            </article>
          </div>
        </div>
      </header>

      <!-- Slider section -->
      <section class="slider wrapper FadeC">
        <div class="container">
          <!-- Carousel for slider -->
          <div id="managementSlider" class="carousel slide carousel-fade">
            <div class="carousel-inner">
              <!-- Slide 1: Design -->
              <div class="carousel-item h-100 active" data-slide-type="design">
                <!-- Slide background image -->
                <img src="assets/images/slider/slide1.jpg" alt="Slider" />
                <!-- Slide content -->
                <div class="slider-content wrapper">
                  <span class="highlight">best it solution</span>
                  <h2 class="main-heading">Get Fast Business Solution</h2>
                  <p>
                    Since 1985 Reed has pioneered specialist recruitment,
                    sourcing Knowledge
                  </p>
                  <a href="price.html"
                    ><button class="btn-hover trim-btn">Get Started</button></a
                  >
                  <div class="best-value">
                    <div class="indicator">super sale</div>
                  </div>
                </div>
              </div>
              <!-- Slide 2: Service -->
              <div class="carousel-item h-100" data-slide-type="service">
                <!-- Slide background image -->
                <img src="assets/images/slider/slide2.jpg" alt="Slider" />
                <!-- Slide content -->
                <div class="slider-content wrapper">
                  <span class="highlight">best it solution</span>
                  <h2 class="main-heading">Best IT Services Available</h2>
                  <p>
                    Since 1985 Reed has pioneered specialist recruitment,
                    sourcing Knowledge
                  </p>
                  <a href="price.html"
                    ><button class="btn-hover trim-btn">Get Started</button></a
                  >
                </div>
              </div>
              <!-- Slide 3: Development -->
              <div class="carousel-item h-100" data-slide-type="development">
                <!-- Slide background image -->
                <img src="assets/images/slider/slide3.jpg" alt="Slider" />
                <!-- Slide content -->
                <div class="slider-content wrapper">
                  <span class="highlight">best it solution</span>
                  <h2 class="main-heading">Get Top IT Technicians</h2>
                  <p>
                    Since 1985 Reed has pioneered specialist recruitment,
                    sourcing Knowledge
                  </p>
                  <a href="price.html"
                    ><button class="btn-hover trim-btn">Get Started</button></a
                  >
                </div>
              </div>
              <!-- Slide type indicators -->
              <div class="slideType carousel-indicators">
                <button
                  type="button"
                  data-bs-target="#managementSlider"
                  data-bs-slide-to="0"
                  class="active"
                  aria-current="true"
                  aria-label="Slide 1"
                >
                  Product Design
                </button>
                <button
                  type="button"
                  data-bs-target="#managementSlider"
                  data-bs-slide-to="1"
                  aria-label="Slide 1"
                >
                  Customs Services
                </button>
                <button
                  type="button"
                  data-bs-target="#managementSlider"
                  data-bs-slide-to="2"
                  aria-label="Slide 2"
                >
                  Product Development
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Next and previous buttons for slider -->
        <div class="next-prev">
          <button data-bs-target="#managementSlider" data-bs-slide="prev">
            <i class="fa-solid fa-left-long"></i>
          </button>
          <button data-bs-target="#managementSlider" data-bs-slide="next">
            <i class="fa-solid fa-right-long"></i>
          </button>
        </div>
      </section>

      <!-- Footer section -->
      <footer>
        <div class="container">
          <div
            class="d-flex flex-wrap justify-content-between align-items-center"
          >
            <!-- Footer heading -->
            <h2 class="footerHeading">sponser companies</h2>
            <!-- Footer video section -->
            <div class="footerVideo">
              <div class="play">
                <img src="assets/images/videoThumb.jpg" alt="Thumbanil" />
                <i class="fa-solid fa-play"></i>
              </div>
              <span>Check your Broadband<br />Availability and Speed.</span>
            </div>
            <!-- Sponsors' logos -->
            <div class="sponsers">
              <img src="assets/images/clients/c1.png" alt="Client" />
              <img src="assets/images/clients/c2.png" alt="Client" />
              <img src="assets/images/clients/c3.png" alt="Client" />
              <img src="assets/images/clients/c3.png" alt="Client" />
              <img src="assets/images/clients/c4.png" alt="Client" />
              <img src="assets/images/clients/c5.png" alt="Client" />
            </div>
          </div>
        </div>
      </footer>
    </main>

    <!-- JavaScript dependencies -->

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

    <!-- jQuery -->
    <script src="assets/js/jQuery/jquery-3.7.0.min.js"></script>

    <!-- Custom JS -->
    <script src="assets/js/custom.js"></script>
  </body>
</html>
