{% extends 'frontend/base.html' %}
{% load static %}

{% block meta_title %}{{ page.meta_title|default:"Safeway Auto Solutions - Doorstep Vehicle Pickup & Repair Qatar" }}{% endblock %}
{% block meta_description %}{{ page.meta_description|default:"Safeway picks up, repairs, and delivers your vehicle with ease. Trusted auto solutions in Qatar with 24/7 emergency support." }}{% endblock %}
{% block meta_keywords %}{{ page.meta_keywords|default:"safeway auto, vehicle repair Qatar, doorstep car service, breakdown Qatar, fleet management" }}{% endblock %}

{% block body_class %}home{% endblock %}



{# ============================================================
   Index overrides the full header block because the homepage
   header has extra classes (pbmit-bg-color-light, pbmit-bg-color-white)
   and the hero slider is physically INSIDE the <header> tag.
   ============================================================ #}
{% block header %}
    <!-- Header Main Area -->
    <header class="site-header header-style-1 pbmit-bg-color-light">
      <div class="site-header-menu">
        <div class="pbmit-main-header-area pbmit-bg-color-white">
          <div class="container-fluid">
            <div class="pbmit-header-content d-flex justify-content-between align-items-center">
              <div class="pbmit-logo-menuarea d-flex justify-content-between align-items-center">
                <div class="site-branding">
                  <h1 class="site-title">
                    <a href="{% url 'frontend_app:index' %}">
                      <img class="logo-img" src="{% static 'frontend/images/logo/safewaylogo.png' %}" alt="Xcleen" />
                    </a>
                  </h1>
                </div>
                <div class="site-navigation">
                  <nav class="main-menu navbar-expand-xl navbar-light">
                    <div class="navbar-header">
                      <!-- Toggle Button -->
                      <button class="navbar-toggler" type="button">
                        <i class="pbmit-base-icon-menu-1"></i>
                      </button>
                    </div>
                    <div class="pbmit-mobile-menu-bg"></div>
                    <div class="collapse navbar-collapse clearfix show" id="pbmit-menu">
                      <div class="pbmit-menu-wrap">
                        <span class="closepanel">
                          <svg class="qodef-svg--close qodef-m" xmlns="http://www.w3.org/2000/svg" width="20.163"
                            height="20.163" viewBox="0 0 26.163 26.163">
                            <rect width="36" height="1" transform="translate(0.707) rotate(45)"></rect>
                            <rect width="36" height="1" transform="translate(0 25.456) rotate(-45)"></rect>
                          </svg>
                        </span>
                        <ul class="navigation clearfix">
                        {% for nav_page in main_nav_pages %}
                        <li class="{% if active_nav == nav_page.slug or active_nav == 'service' and nav_page.slug == 'services' or active_nav == 'services' and nav_page.slug == 'service' %}active{% endif %} {% if nav_page.page_set.all %}dropdown{% endif %}">
                          <a href="{% url 'frontend_app:page_detail' nav_page.slug %}">{{ nav_page.page_name }}</a>
                        {% if nav_page.page_set.all %}
                        <ul>
                          {% for child in nav_page.page_set.all %}
                            {% if child.show_in_menu %}
                            <li class="{% if active_nav == child.slug or active_nav == 'service' and child.slug == 'services' or active_nav == 'services' and child.slug == 'service' %}active{% endif %}">
                              <a href="{% url 'frontend_app:page_detail' child.slug %}">{{ child.page_name }}</a>
                            </li>
                            {% endif %}
                          {% endfor %}
                        </ul>
                        {% endif %}
                      </li>
                      {% endfor %}
                      </ul>
                      </div>
                    </div>
                  </nav>
                </div>
              </div>
              <div class="pbmit-right-box d-flex align-items-center">
                <div class="pbmit-button-box">
                  <div class="pbmit-header-button">
                    <a href="tel:+97460002324">
                      <span class="pbmit-header-button-text-2">+974 6000 2324</span>
                    </a>
                  </div>
                </div>
                <div class="pbmit-button-box-second">
                  <div>
                    <a class="pbmit-btn pbmit-btn-outline open-service-modal" href="javascript:void(0);">
                      <span class="pbmit-button-content-wrapper">
                        <span class="pbmit-button-icon">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 22.76 22.76">
                            <path
                              d="M22.34,1A14.67,14.67,0,0,1,12,5.3,14.6,14.6,0,0,1,6.08,4.06,14.68,14.68,0,0,1,1.59,1"
                              transform="translate(-0.29 -0.29)" fill="none" stroke="currentColor" stroke-width="2">
                            </path>
                            <path d="M22.34,1a14.67,14.67,0,0,0,0,20.75" transform="translate(-0.29 -0.29)"
                              fill="none" stroke="currentColor" stroke-width="2"></path>
                            <path d="M22.34,1,1,22.34" transform="translate(-0.29 -0.29)" fill="none"
                              stroke="currentColor" stroke-width="2"></path>
                          </svg>
                        </span>
                        <span class="pbmit-button-text">Book Your Service</span>
                      </span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pbmit-slider-area pbmit-slider-one">
        <style>
          .bg-slide-1 { background-image: url('{% static "frontend/images/banner-slider-img/BG1.jpg" %}'); }
          .bg-slide-2 { background-image: url('{% static "frontend/images/banner-slider-img/BG2.jpg" %}'); }
          .bg-slide-3 { background-image: url('{% static "frontend/images/banner-slider-img/BG3.jpg" %}'); }
        </style>
        <div class="swiper-slider" data-autoplay="true" data-loop="true" data-dots="true" data-arrows="false"
          data-columns="1" data-margin="0" data-effect="fade">
          <div class="swiper-wrapper">
            <!-- Slide1 -->
            <div class="swiper-slide">
              <div class="pbmit-bg-overlay"></div>
              <div class="pbmit-slider-item">
                <div class="pbmit-slider-bg bg-slide-1"></div>
                

                <div class="container">
                  <div class="row">
                    <div class="col-md-10">
                      <div class="pbmit-slider-content">
                        <h5 class="pbmit-sub-title transform-delay-1">Doorstep Pickup &amp; Delivery</h5>
                        <h2 class="pbmit-title transform-left transform-delay-2">
                          Doorstep Vehicle <br />Pickup &amp; Repair <br />Across Qatar
                        </h2>
                        <p class="pbmit-desc transform-bottom transform-delay-3">
                          We pick up, repair, and deliver your vehicle with ease.
                        </p>
                        <div class="pbmit-button transform-bottom transform-delay-4">
                          <a class="pbmit-btn pbmit-btn-hover-white" href="{% url 'frontend_app:service' %}">
                            <span class="pbmit-button-content-wrapper">
                              <span class="pbmit-button-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22.76" height="22.76" viewBox="0 0 22.76 22.76">
                                  <title>black-arrow</title>
                                  <path d="M22.34,1A14.67,14.67,0,0,1,12,5.3,14.6,14.6,0,0,1,6.08,4.06,14.68,14.68,0,0,1,1.59,1" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                  <path d="M22.34,1a14.67,14.67,0,0,0,0,20.75" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                  <path d="M22.34,1,1,22.34" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                </svg>
                              </span>
                              <span class="pbmit-button-text">Our Services</span>
                            </span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Slide2 -->
            <div class="swiper-slide">
              <div class="pbmit-bg-overlay"></div>
              <div class="pbmit-slider-item">
                <div class="pbmit-slider-bg bg-slide-2"></div>
                <div class="container">
                  <div class="row">
                    <div class="col-md-10">
                      <div class="pbmit-slider-content">
                        <h5 class="pbmit-sub-title transform-top transform-delay-1">24/7 Emergency Support</h5>
                        <h2 class="pbmit-title transform-left transform-delay-2">
                          24/7 Breakdown <br />Assistance When <br />You Need It
                        </h2>
                        <p class="pbmit-desc transform-bottom transform-delay-3">
                          Fast roadside help and towing when you need it most.
                        </p>
                        <div class="pbmit-button transform-bottom transform-delay-4">
                          <a class="pbmit-btn pbmit-btn-hover-white" href="{% url 'frontend_app:service' %}">
                            <span class="pbmit-button-content-wrapper">
                              <span class="pbmit-button-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22.76" height="22.76" viewBox="0 0 22.76 22.76">
                                  <title>black-arrow</title>
                                  <path d="M22.34,1A14.67,14.67,0,0,1,12,5.3,14.6,14.6,0,0,1,6.08,4.06,14.68,14.68,0,0,1,1.59,1" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                  <path d="M22.34,1a14.67,14.67,0,0,0,0,20.75" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                  <path d="M22.34,1,1,22.34" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                </svg>
                              </span>
                              <span class="pbmit-button-text">Our Services</span>
                            </span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Slide3 -->
            <div class="swiper-slide">
              <div class="pbmit-bg-overlay"></div>
              <div class="pbmit-slider-item">
                <div class="pbmit-slider-bg bg-slide-3"></div>
                <div class="container">
                  <div class="row">
                    <div class="col-md-10">
                      <div class="pbmit-slider-content">
                        <h5 class="pbmit-sub-title transform-top transform-delay-1">Maintenance &amp; Fleet Solutions</h5>
                        <h2 class="pbmit-title transform-left transform-delay-2">
                          Complete Vehicle <br />Maintenance <br />&amp; Fleet Support
                        </h2>
                        <p class="pbmit-desc transform-bottom transform-delay-3">
                          Reliable servicing for personal and fleet vehicles.
                        </p>
                        <div class="pbmit-button transform-bottom transform-delay-4">
                          <a class="pbmit-btn pbmit-btn-hover-white" href="{% url 'frontend_app:service' %}">
                            <span class="pbmit-button-content-wrapper">
                              <span class="pbmit-button-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22.76" height="22.76" viewBox="0 0 22.76 22.76">
                                  <title>black-arrow</title>
                                  <path d="M22.34,1A14.67,14.67,0,0,1,12,5.3,14.6,14.6,0,0,1,6.08,4.06,14.68,14.68,0,0,1,1.59,1" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                  <path d="M22.34,1a14.67,14.67,0,0,0,0,20.75" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                  <path d="M22.34,1,1,22.34" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                                </svg>
                              </span>
                              <span class="pbmit-button-text">Our Services</span>
                            </span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- Header Main Area End Here -->
{% endblock header %}

{% block content %}
    <!-- page content -->
    <div class="page-content">
      <!-- Book Bar Start -->
      <section class="pbmit-book-bar-section mt-5">
        <div class="container p-0">
          <div class="pbmit-book-bar">
            <!-- Options -->
            <div class="pbmit-book-bar-options">
              <a href="javascript:void(0);" class="pbmit-book-bar-option open-service-modal">
                <div class="pbmit-book-bar-icon">
                  <i class="pbmit-karsfix-icon pbmit-karsfix-icon-repair"></i>
                </div>
                <div class="pbmit-book-bar-text">
                  <strong>Book a Service</strong>
                  <span>Select &amp; submit online</span>
                </div>
              </a>

              <a href="https://wa.me/97460002324?text=Hello%20SafeWay,%20I%20would%20like%20to%20book%20a%20vehicle%20service."
                target="_blank" class="pbmit-book-bar-option">
                <div class="pbmit-book-bar-icon">
                  <i class="fab fa-whatsapp"></i>
                </div>
                <div class="pbmit-book-bar-text">
                  <strong>WhatsApp Us</strong>
                  <span>Reply within minutes</span>
                </div>
              </a>

              <a href="tel:+97460002324" class="pbmit-book-bar-option">
                <div class="pbmit-book-bar-icon">
                  <i class="pbmit-base-icon-phone-call"></i>
                </div>
                <div class="pbmit-book-bar-text">
                  <strong>Call Us</strong>
                  <span>+974 6000 2324</span>
                </div>
              </a>
            </div>
            <!-- CTA -->
            <div class="pbmit-book-bar-cta">
              <a class="pbmit-btn pbmit-btn-global open-service-modal" href="javascript:void(0);">
                <span class="pbmit-button-content-wrapper">
                  <span class="pbmit-button-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 22.76 22.76">
                      <path d="M22.34,1A14.67,14.67,0,0,1,12,5.3,14.6,14.6,0,0,1,6.08,4.06,14.68,14.68,0,0,1,1.59,1"
                        transform="translate(-0.29 -0.29)" fill="none" stroke="currentColor" stroke-width="2"></path>
                      <path d="M22.34,1a14.67,14.67,0,0,0,0,20.75" transform="translate(-0.29 -0.29)" fill="none"
                        stroke="currentColor" stroke-width="2"></path>
                      <path d="M22.34,1,1,22.34" transform="translate(-0.29 -0.29)" fill="none" stroke="currentColor"
                        stroke-width="2"></path>
                    </svg>
                  </span>
                  <span class="pbmit-button-text">Book Now</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </section>
      <!-- Book Bar End -->

      <!-- About us Start -->
      <section class="section-lg">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-xl-4">
              <div class="pbmit-heading-subheading animation-style2">
                <h4 class="pbmit-subtitle">About Us</h4>
                <h2 class="pbmit-title">
                  Your Trusted Automotive
                  <span class="pbmit-global-color">Support Partner</span>
                </h2>
                <div class="pbmit-heading-desc">
                  Safeway Auto Solution is a trusted premium automotive service center dedicated to providing
                  exceptional care for American and German vehicles. Combining expert technicians, state-of-the-art
                  diagnostic equipment, and industry-leading repair standards, we deliver reliable solutions with
                  precision and professionalism.
                  <br><br>
                  From routine maintenance to advanced diagnostics and major repairs, our commitment is to ensure your
                  vehicle performs at its best while providing a seamless and transparent customer experience. At
                  Safeway Auto Solution, quality, integrity, and customer satisfaction drive everything we do.
                </div>
              </div>
              <a class="pbmit-btn" href="{% url 'frontend_app:about' %}">
                <span class="pbmit-button-content-wrapper">
                  <span class="pbmit-button-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22.76" height="22.76" viewBox="0 0 22.76 22.76">
                      <title>black-arrow</title>
                      <path d="M22.34,1A14.67,14.67,0,0,1,12,5.3,14.6,14.6,0,0,1,6.08,4.06,14.68,14.68,0,0,1,1.59,1" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                      <path d="M22.34,1a14.67,14.67,0,0,0,0,20.75" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                      <path d="M22.34,1,1,22.34" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                    </svg>
                  </span>
                  <span class="pbmit-button-text">Know More</span>
                </span>
              </a>
              <div class="tween-effect-style-area">
                <div class="pbmit-tween-effect-style-1">
                  <div class="pbmit-tween-effect" data-x-start="0" data-x-end="10" data-y-start="0" data-y-end="0"
                    data-scale-x-start="1" data-scale-x-end=" 1" data-skew-x-start=" 0deg" data-skew-x-end="0deg"
                    data-skew-y-start=" 0deg" data-skew-y-end=" 0deg" data-rotate-x-start="0" data-rotate-x-end="0">
                    <img src="{% static 'frontend/images/homepage-1/about-img-02.webp' %}" class="img-fluid" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12 col-xl-4">
              <div class="why-choose-one-about-img">
                <img src="{% static 'frontend/images/homepage-1/about-img.png' %}" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col-md-12 col-xl-4">
              <div class="pbmit-ihbox-style-2">
                <div class="pbmit-ihbox-headingicon">
                  <div class="pbmit-ihbox-icon">
                    <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                      <i class="pbmit-karsfix-icon pbmit-karsfix-icon-automobile"></i>
                    </div>
                  </div>
                  <div class="pbmit-ihbox-contents">
                    <h2 class="pbmit-element-title">Reliable Doorstep Convenience</h2>
                    <div class="pbmit-heading-desc">We provide easy vehicle pickup and delivery from your home or office, saving you time and eliminating the need to visit service centers.</div>
                  </div>
                </div>
              </div>
              <div class="pt-5 mt-md-2">
                <div class="pbmit-ihbox-style-2">
                  <div class="pbmit-ihbox-headingicon">
                    <div class="pbmit-ihbox-icon">
                      <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                        <i class="pbmit-karsfix-icon pbmit-karsfix-icon-meter"></i>
                      </div>
                    </div>
                    <div class="pbmit-ihbox-contents">
                      <h2 class="pbmit-element-title">Verified Service Network</h2>
                      <div class="pbmit-heading-desc">Our trusted network of professional garages ensures your vehicle is handled by skilled technicians using proper tools and quality parts.</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pt-5 mt-md-2">
                <div class="pbmit-ihbox-style-2">
                  <div class="pbmit-ihbox-headingicon">
                    <div class="pbmit-ihbox-icon">
                      <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                        <i class="pbmit-karsfix-icon pbmit-karsfix-icon-adjustable-wrench"></i>
                      </div>
                    </div>
                    <div class="pbmit-ihbox-contents">
                      <h2 class="pbmit-element-title">Professional Support Team</h2>
                      <div class="pbmit-heading-desc">Our trained service advisors assess your vehicle needs and coordinate the right solutions for smooth and efficient service.</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pt-5 mt-md-2">
                <div class="pbmit-ihbox-style-2">
                  <div class="pbmit-ihbox-headingicon">
                    <div class="pbmit-ihbox-icon">
                      <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                        <i class="pbmit-karsfix-icon pbmit-karsfix-icon-car-lifter"></i>
                      </div>
                    </div>
                    <div class="pbmit-ihbox-contents">
                      <h2 class="pbmit-element-title">Complete Vehicle Care Solutions</h2>
                      <div class="pbmit-heading-desc">From routine maintenance to emergency breakdown assistance, we offer end-to-end vehicle support tailored for both individual and fleet owners.</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- About us end -->

      <!-- Who We Are Start -->
      <section class="section-lg who-we-are-one-bg">
        <div class="container">
          <div class="row g-5">
            <div class="col-md-12 col-xl-6">
              <div class="pbmit-bg-color-blackish content-wrapper">
                <div class="pbmit-heading-subheading animation-style2">
                  <h4 class="pbmit-subtitle">Who we are</h4>
                  <h2 class="pbmit-title">The <span class="pbmit-global-color">story</span> behind SafeWay Auto Solutions</h2>
                  <div class="pbmit-heading-desc">SafeWay Auto Solutions was founded to simplify vehicle care for drivers and businesses across Qatar. We connect customers with trusted garages, trained drivers, and professional service advisors to deliver reliable vehicle support from pickup to delivery.</div>
                </div>
                <div class="list-group-area">
                  <div class="row">
                    <div class="col-md-6">
                      <ul class="list-group list-group-borderless">
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Doorstep Pickup &amp; Delivery</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Verified Garage Network</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Professional Service Coordination</span>
                        </li>
                      </ul>
                    </div>
                    <div class="col-md-6">
                      <ul class="list-group list-group-borderless pt-md-0 pt-3">
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Transparent Service Updates</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Emergency Breakdown Support</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Scale into Dashboard, Offers &amp; Reminders</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12 col-xl-6">
              <div class="pbmit-bg-color-blackish content-wrapper">
                <div class="pbmit-heading-subheading animation-style2">
                  <h4 class="pbmit-subtitle">Why Choose Us</h4>
                  <h2 class="pbmit-title">Drive with <span class="pbmit-global-color">Ease</span> Guided by Expertise</h2>
                  <div class="pbmit-heading-desc">SafeWay combines professional service coordination, skilled drivers, and trusted garage partners to deliver reliable vehicle support across Qatar. Our approach focuses on cost efficiency, transparency, and long-term vehicle care for both individual and corporate clients.</div>
                </div>
                <div class="list-group-area">
                  <div class="row">
                    <div class="col-md-6">
                      <ul class="list-group list-group-borderless">
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Cost-Conscious Service</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Professional Service Advisors</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Experienced Drivers &amp; Pickup Teams</span>
                        </li>
                      </ul>
                    </div>
                    <div class="col-md-6">
                      <ul class="list-group list-group-borderless pt-md-0 pt-3">
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Skilled Technicians</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Vehicle History Retained in One Account</span>
                        </li>
                        <li class="list-group-item">
                          <span class="pbmit-icon-list-icon"><svg aria-hidden="true" class="e-font-icon-svg e-fas-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
                          <span class="pbmit-icon-list-text">Scale into dashboard, offers, and reminders</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Who We Are End -->

      <!-- Service Start -->
      <section class="service-one-bg section-lg">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-md-6">
              <div class="pbmit-heading-subheading animation-style2">
                <h4 class="pbmit-subtitle">Our Services</h4>
                <h2 class="pbmit-title">
                  We offer a <span class="pbmit-global-color">wide range</span> <br />of car services
                </h2>
              </div>
            </div>
            <div class="col-md-6 text-end">
              <div class="service-swiper-arrow swiper-btn-custom d-inline-flex flex-row-reverse"></div>
            </div>
          </div>
          <div class="swiper-slider" data-arrows-class="service-swiper-arrow" data-autoplay="false" data-loop="true"
            data-dots="false" data-arrows="true" data-columns="3" data-margin="40" data-effect="slide">
            <div class="swiper-wrapper">
              <!-- Slide1 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service10.jpg' %}" class="img-fluid" alt=" " />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Maintenance">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">01</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Emergency Support</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Breakdown Assistance</a></h3>
                      <div class="pbmit-service-description"><p>Fast roadside support, towing services, and emergency vehicle recovery anywhere in Qatar.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-automobile"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide2 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service9.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Wheels Alignment">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">02</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Maintenance</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Periodic Service</a></h3>
                      <div class="pbmit-service-description"><p>Routine servicing based on mileage and manufacturer recommendations for smooth performance.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-repair"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide3 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service8.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Engine Service">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">03</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Safety</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Brake Works</a></h3>
                      <div class="pbmit-service-description"><p>Brake pad replacement, disc servicing, and inspections to ensure safe driving.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-brakes"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide4 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service7.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Interior Cleaning">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">04</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Electrical</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Battery Services</a></h3>
                      <div class="pbmit-service-description"><p>Battery testing, jump-start support, replacement, and warranty tracking.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-monitor"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide5 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service6.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Break Service">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">05</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Cleaning</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Detailing Services</a></h3>
                      <div class="pbmit-service-description"><p>Interior deep cleaning, sanitization, polishing, and exterior detailing solutions.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-car-door"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide6 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service5.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Electrical Repairs">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">06</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Tires</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Tire &amp; RIM Services</a></h3>
                      <div class="pbmit-service-description"><p>Wheel alignment, balancing, puncture repair, and rim restoration services.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-tyre"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide7 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service4.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Car Polishing">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">07</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Cooling</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Air Conditioning Services</a></h3>
                      <div class="pbmit-service-description"><p>AC inspection, gas refill, diagnostics, and compressor repair solutions.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-turbo"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide8 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service3.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Battery Replacement">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">08</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Repairs</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Repair Works</a></h3>
                      <div class="pbmit-service-description"><p>Minor and major vehicle repairs handled through verified garage partners.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-car-engine"></i></div>
                    </div>
                  </div>
                </div>
              </article>
              <!-- Slide9 -->
              <article class="pbmit-service-style-1 swiper-slide">
                <div class="pbminfotech-post-item">
                  <div class="pbmit-box-content-wrap">
                    <div class="pbmit-service-image-wrapper">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          <img src="{% static 'frontend/images/service/service2.jpg' %}" class="img-fluid" alt="" />
                        </div>
                      </div>
                      <div class="pbmit-service-btn-wrapper">
                        <a class="pbmit-service-btn" href="{% url 'frontend_app:service' %}" title="Air Conditioner">
                          <span class="pbmit-button-icon"><i class="pbmit-base-icon-angle-right"></i></span>
                        </a>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:service' %}"></a>
                    </div>
                    <div class="pbmit-content-box">
                      <div class="pbminfotech-box-number">09</div>
                      <div class="pbmit-serv-cat"><a href="{% url 'frontend_app:service' %}">Convenience</a></div>
                      <h3 class="pbmit-service-title"><a href="{% url 'frontend_app:service' %}">Pickup &amp; Delivery</a></h3>
                      <div class="pbmit-service-description"><p>Safe vehicle pickup and return from your home or office location.</p></div>
                      <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-automobile"></i></div>
                    </div>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>
      <!-- Service End -->

      <!--Corporate services Start -->
      <section class="section-lg gray-bg">
        <div class="container">
          <div class="row">
            <div class="col-xl-12">
              <div class="pbmit-heading-subheading text-center animation-style2">
                <h4 class="pbmit-subtitle">Brands</h4>
                <h2 class="pbmit-title">Corporate<span class="pbmit-global-color"> services</span></h2>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-xl-3">
              <div class="pbminfotech-ele-fid-style-2">
                <div class="pbmit-fid-content">
                  <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-monitor"></i></div>
                  <h4 class="pbmit-fid-title">Vehicle Tracking System</h4>
                  <div class="pbmit-heading-desc">Real-time monitoring with optional alerts and detailed reporting for your entire fleet.</div>
                  <ul class="pbmit-list"><li>Live GPS tracking</li><li>Custom alert triggers</li><li>Automated reports</li></ul>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 mt-xl-0 mt-4">
              <div class="pbminfotech-ele-fid-style-2">
                <div class="pbmit-fid-content">
                  <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-automobile"></i></div>
                  <h4 class="pbmit-fid-title">Fleet Management Workflows</h4>
                  <div class="pbmit-heading-desc">Integrated end-to-end workflows that streamline operations across your corporate fleet.</div>
                  <ul class="pbmit-list"><li>Centralized dashboard</li><li>Multi-vehicle scheduling</li><li>Driver assignment tools</li></ul>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 mt-xl-0 mt-5">
              <div class="pbminfotech-ele-fid-style-2">
                <div class="pbmit-fid-content">
                  <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-repair"></i></div>
                  <h4 class="pbmit-fid-title">Maintenance Contracts</h4>
                  <div class="pbmit-heading-desc">Scheduled preventive service plans and maintenance contracts tailored for corporate fleets.</div>
                  <ul class="pbmit-list"><li>Preventive servicing</li><li>Periodic inspection schedules</li><li>Priority lane booking</li></ul>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 mt-xl-0 mt-5">
              <div class="pbminfotech-ele-fid-style-2">
                <div class="pbmit-fid-content">
                  <div class="pbmit-service-icon"><i class="pbmit-karsfix-icon pbmit-karsfix-icon-turbo"></i></div>
                  <h4 class="pbmit-fid-title">24/7 Fleet Assistance</h4>
                  <div class="pbmit-heading-desc">Round-the-clock support covering towing, repairs, and full breakdown coordination.</div>
                  <ul class="pbmit-list"><li>Battery, tyre &amp; AC support</li><li>Towing &amp; recovery</li><li>Single-provider convenience</li></ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--Corporate services End -->

      <!-- How It Works Start -->
      <section class="section-lg pbmit-bg-color-white">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-9 text-center">
              <div class="pbmit-heading-subheading text-center animation-style2">
                <h4 class="pbmit-subtitle">How it works</h4>
                <h2 class="pbmit-title">A simple pickup-to-delivery <span class="pbmit-global-color">service flow</span></h2>
              </div>
            </div>
          </div>
          <div class="row pbmit-how-it-works-row mt-5">
            <div class="col-md-6 col-xl-3 pbmit-hiw-step">
              <div class="pbmit-hiw-inner">
                <div class="pbmit-hiw-circle"><span class="pbmit-hiw-label">Step</span><span class="pbmit-hiw-num">01</span></div>
                <h4 class="pbmit-hiw-title">Book a service</h4>
                <p class="pbmit-hiw-desc">Customer selects a service, adds vehicle information, and submits a request.</p>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 pbmit-hiw-step">
              <div class="pbmit-hiw-inner">
                <div class="pbmit-hiw-circle"><span class="pbmit-hiw-label">Step</span><span class="pbmit-hiw-num">02</span></div>
                <h4 class="pbmit-hiw-title">Vehicle pickup</h4>
                <p class="pbmit-hiw-desc">A trained driver or recovery team picks up the vehicle from the selected location.</p>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 pbmit-hiw-step">
              <div class="pbmit-hiw-inner">
                <div class="pbmit-hiw-circle"><span class="pbmit-hiw-label">Step</span><span class="pbmit-hiw-num">03</span></div>
                <h4 class="pbmit-hiw-title">Service or repair</h4>
                <p class="pbmit-hiw-desc">The vehicle is diagnosed, approved work is performed, and status updates are logged.</p>
              </div>
            </div>
            <div class="col-md-6 col-xl-3 pbmit-hiw-step">
              <div class="pbmit-hiw-inner">
                <div class="pbmit-hiw-circle"><span class="pbmit-hiw-label">Step</span><span class="pbmit-hiw-num">04</span></div>
                <h4 class="pbmit-hiw-title">Vehicle return</h4>
                <p class="pbmit-hiw-desc">The vehicle is delivered back with service records and next-maintenance reminders.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- How It Works End -->

      <!-- Pricing Start -->
      <section class="section-lg gray-bg">
        <div class="container p-0">
          <div class="pbmit-bg-color-light pricing-one-bg">
            <div class="row g-0">
              <div class="col-md-12 col-xl-12">
                <div class="pbminfotech-ele-ptable-style-2">
                  <div class="pbmit-ptable-cols row">
                    <div class="pbmit-ptable-col col-md-4">
                      <div class="pbmit-pricing-table-box">
                        <div class="pbmit-feature-wrap"></div>
                        <div class="pbmit-pricing-table-inner">
                          <div class="pbmit-head-wrap">
                            <div class="pbmit-price-wrapper">
                              <div class="pbmit-ptable-price-w">
                                <div class="pbminfotech-ptable-symbol">Basic Care Package </div>
                              </div>
                            </div>
                          </div>
                          <div class="pbmit-ptable-lines">
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>Oil change</div>
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>fluid check</div>
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>tire pressure check</div>
                            <div class="pbmit-ptable-line"><i class="ti-check"></i> quick inspection</div>
                            <div class="pbmit-price-btn">
                              <a class="pbmit-button" href="#contactid">
                                <span class="pbmit-button-text">Purchase Now</span>
                                <span class="pbmit-button-icon-wrapper"><span class="pbmit-button-icon"><i class="pbmit-base-icon-black-arrow-1"></i></span></span>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pbmit-ptable-col col-md-4">
                      <div class="pbmit-pricing-table-box">
                        <div class="pbmit-feature-wrap"><div class="pbmit-ptablebox-featured-w"></div></div>
                        <div class="pbmit-pricing-table-inner">
                          <div class="pbmit-head-wrap">
                            <div class="pbmit-price-wrapper">
                              <div class="pbmit-ptable-price-w">
                                <div class="pbminfotech-ptable-symbol"> Summer Ready Package </div>
                              </div>
                            </div>
                          </div>
                          <div class="pbmit-ptable-lines">
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>AC inspection</div>
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>Cooling system check</div>
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>Battery test</div>
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>Wash</div>
                            <div class="pbmit-price-btn">
                              <a class="pbmit-button" href="#contactid">
                                <span class="pbmit-button-text">Purchase Now</span>
                                <span class="pbmit-button-icon-wrapper"><span class="pbmit-button-icon"><i class="pbmit-base-icon-black-arrow-1"></i></span></span>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pbmit-ptable-col col-md-4">
                      <div class="pbmit-pricing-table-box">
                        <div class="pbmit-feature-wrap"></div>
                        <div class="pbmit-pricing-table-inner">
                          <div class="pbmit-head-wrap">
                            <div class="pbmit-price-wrapper">
                              <div class="pbmit-ptable-price-w">
                                <div class="pbminfotech-ptable-symbol"> Fleet Preventive Package </div>
                              </div>
                            </div>
                          </div>
                          <div class="pbmit-ptable-lines">
                            <div class="pbmit-ptable-line"><i class="ti-check"></i>Scheduled maintenance bundle for recurring fleet servicing.</div>
                            <div class="pbmit-price-btn">
                              <a class="pbmit-button" href="#contactid">
                                <span class="pbmit-button-text">Purchase Now</span>
                                <span class="pbmit-button-icon-wrapper"><span class="pbmit-button-icon"><i class="pbmit-base-icon-black-arrow-1"></i></span></span>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Pricing End -->

      <!-- Client Start -->
      <section class="section-lg">
        <div class="container mt-5 mb-5">
          <div class="pbmit-heading-subheading text-center animation-style2">
            <h4 class="pbmit-subtitle">Brands</h4>
            <h2 class="pbmit-title">Brands We <span class="pbmit-global-color">Support</span></h2>
          </div>
          <div class="border-top section-md">
            <div class="swiper-slider" data-autoplay="true" data-loop="true" data-dots="false" data-arrows="false"
              data-columns="6" data-margin="30" data-effect="slide">
              <div class="swiper-wrapper">
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Ford</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/fords.png' %}" alt="brand" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/fords.png' %}" alt="brand" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Jeep</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/jeep.png' %}" alt="brand" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/jeep.png' %}" alt="brand" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Audi</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/audi.png' %}" alt="brand" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/audi.png' %}" alt="brand" class="img-fluid" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Benz</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/benz.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/benz.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">BMW</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/bmw.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/bmw.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Nissan</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/nissan.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/nissan.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Porsche</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/porsche.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/porsche.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Hyundai</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/hyundai.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/hyundai.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Lexus</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/lexus.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/lexus.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Toyota</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/toyota.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/toyota.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Mitsubishi</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/mistibushi.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/mistibushi.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Client 02</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/barnd2.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/barnd2.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Client 03</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/barnd3.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/barnd3.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Client 04</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/barnd4.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/barnd4.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Client 05</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/barnd5.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/barnd5.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
                <article class="pbmit-client-style-1 swiper-slide"><div class="pbmit-border-wrapper"><div class="pbmit-client-wrapper pbmit-client-with-hover-img"><h4 class="pbmit-hide">Client 06</h4><div class="pbmit-client-hover-img"><img src="{% static 'frontend/images/client/barnd6.png' %}" alt="" /></div><div class="pbmit-featured-img-wrapper"><div class="pbmit-featured-wrapper"><img src="{% static 'frontend/images/client/barnd6.png' %}" class="img-fluid" alt="" /></div></div></div></div></article>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Client End -->

      <!-- Contact Start -->
      <section class="contact-one-bg" id="contactid">
        <div class="container-fluid p-0">
          <div class="row g-0">
            <div class="col-md-12 col-xl-6 bg-blackish">
              <form method="POST" action="{% url 'frontend_app:submit_contact' %}" class="pbmit-contact-form" novalidate>
                {% csrf_token %}
                <div class="pbmit-appointment-form-inner pbmit-bg-color-blackish">
                  <div class="pbmit-heading-subheading">
                    <h4 class="pbmit-subtitle">Contact</h4>
                    <h2 class="pbmit-title">Get In <span class="pbmit-global-color">Touch</span></h2>
                  </div>
                  
                  {% if messages %}
                  <div class="messages mb-4">
                      {% for message in messages %}
                      <div class="alert alert-success" style="background-color:#28a745 !important; color: white; border: none; padding: 15px; border-radius: 5px;">
                          {{ message }}
                      </div>
                      {% endfor %}
                  </div>
                  {% endif %}

                  <div class="row">
                    <div class="col-md-6"><input type="text" class="form-control" placeholder="Your Name" name="your-name" required /></div>
                    <div class="col-md-6"><input type="tel" class="form-control" placeholder="Phone Number" name="phone" required /></div>
                    <div class="col-md-6"><input type="email" class="form-control" placeholder="Email Address" name="email" required /></div>
                    <div class="col-md-6"><input type="text" class="form-control" placeholder="Subject" name="subject" /></div>
                    <div class="col-md-12"><textarea class="form-control" placeholder="Your Message" name="message" rows="5" required></textarea></div>
                  </div>
                </div>
                <div class="input-button">
                  <button type="submit" class="pbmit-btn pbmit-btn-white">
                    <span class="pbmit-button-content-wrapper">
                      <span class="pbmit-button-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22.76" height="22.76" viewBox="0 0 22.76 22.76">
                          <title>black-arrow</title>
                          <path d="M22.34,1A14.67,14.67,0,0,1,12,5.3,14.6,14.6,0,0,1,6.08,4.06,14.68,14.68,0,0,1,1.59,1" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                          <path d="M22.34,1a14.67,14.67,0,0,0,0,20.75" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                          <path d="M22.34,1,1,22.34" transform="translate(-0.29 -0.29)" fill="none" stroke="#000" stroke-width="2"></path>
                        </svg>
                      </span>
                      <span class="pbmit-button-text">Submit Now</span>
                    </span>
                  </button>
                </div>
              </form>
            </div>
            <div class="col-md-12 col-xl-6"></div>
          </div>
        </div>
      </section>
      <!-- Contact End -->

      <!-- Blog start -->
      <section class="section-lg">
        <div class="container">
          <div class="pbmit-heading-subheading text-center animation-style2">
            <h4 class="pbmit-subtitle">Latest Blogs</h4>
            <h2 class="pbmit-title">Our most recent <span class="pbmit-global-color">Blogs</span></h2>
          </div>
          <div class="swiper-slider" data-autoplay="false" data-loop="true" data-dots="false" data-arrows="false"
            data-columns="3" data-margin="40" data-effect="slide">
            <div class="swiper-wrapper">
              {% for blog in posts|slice:":9" %}
              <article class="pbmit-blog-style-1 swiper-slide">
                <div class="pbmit-post-item">
                  <div class="pbmit-featured-wrapper">
                    <div class="pbmit-featured-container">
                      <div class="pbmit-featured-img-wrapper">
                        <div class="pbmit-featured-wrapper">
                          {% if blog.featured_image %}
                          <img src="{{ blog.featured_image.url }}" class="img-fluid w-100" style="aspect-ratio: 3/2; object-fit: cover;" alt="{{ blog.title }}" />
                          {% else %}
                          <img src="{% static 'frontend/images/homepage-1/blog/blog-img-01.webp' %}" class="img-fluid w-100" style="aspect-ratio: 3/2; object-fit: cover;" alt="{{ blog.title }}" />
                          {% endif %}
                        </div>
                      </div>
                      <a class="pbmit-link" href="{% url 'frontend_app:blog_detail' blog.slug %}"></a>
                    </div>
                    <div class="pbmit-meta-date pbmit-meta-line"><span class="pbmit-post-date">{{ blog.created_at|date:"j M Y" }}</span></div>
                  </div>
                  <div class="pbmit-content-wrapper">
                    <h3 class="pbmit-post-title"><a href="{% url 'frontend_app:blog_detail' blog.slug %}">{{ blog.title }}</a></h3>
                    <div class="pbmit-meta-category-wrapper pbmit-meta-line"><div class="pbmit-meta-category"><a href="{% url 'frontend_app:blog' %}?category={{ blog.category.slug }}" rel="category tag">{{ blog.category.category_name }}</a></div></div>
                  </div>
                </div>
              </article>
              {% empty %}
              <p>No recent blogs found.</p>
              {% endfor %}
            </div>
          </div>
        </div>
      </section>
      <!-- Blog End -->
    </div>
    <!-- page content End -->
{% endblock %}