<!doctype html>
<html class="no-js spat-dark" lang="zxx">

<head>

    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>SPAT</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon/favicon.png">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/font-awesome-pro.css">
    <link rel="stylesheet" href="assets/css/spacing.css">
    <link rel="stylesheet" href="assets/css/atropos.min.css">
    <link rel="stylesheet" href="assets/css/main.css">


</head>

<body class="tp-magic-cursor">

    <!-- Begin magic cursor -->
    <div id="magic-cursor" class="cursor-white-bg">
        <div id="ball"></div>
    </div>
  
    <div class="back-to-top-wrapper">
        <button id="back_to_top" type="button" class="back-to-top-btn">
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 6L6 1L1 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
   
   <?php include "header.php" ?>
    <div class="body-overlay"></div>
    <!-- tp-offcanvus-area-end -->
    <!-- offcanvas end here -->


    <div id="smooth-wrapper">
        <div id="smooth-content">

            <main>

                <!-- hero area start -->
                <div class="cr-hero-area fix cr-hero-ptb p-relative pt-170 bg-purple-grad">
                    
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="cr-hero-heading text-center z-index-1">
                                    <div class="tp-section-subtitle-gradient ct mb-20 tp_fade_anim" data-delay=".3">
                                       SPAT Techno Solution
                                    </div>
                                    <h4 class="tp-section-title-onest fs-72 tp-text-revel-anim" data-delay=".5">Website Design & Development <br> Company in Coimbatore </h4>

                                    <p class="tp-text-revel-anim tp-sec-para" data-delay=".7">We turn ideas into seamless digital experiences that engage and grow your business</p>
                                </div>
                                <div class="cr-hero-content text-center z-index-2">
                                    <div class="tp_text_anim">
                                        <p>We only launch digital experiences that<br> reset industry standards</p>
                                    </div>


                                    <div class="cr-hero-btn">
                                        <a href="contact.php" class="tp-btn-white-border">Start Enquiry <span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
                                                    <path d="M14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.696699C9.46447 0.403806 8.98959 0.403806 8.6967 0.696699C8.40381 0.989592 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.40381 10.5355 8.40381 11.0104 8.6967 11.3033C8.98959 11.5962 9.46447 11.5962 9.75736 11.3033L14.5303 6.53033ZM0 6.75H14V5.25H0V6.75Z" fill="currentColor" />
                                                </svg></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container container-1230">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="cr-hero-bottom-wrap text-center z-index-1">
                                    <span class="cr-hero-bottom-big bg-b"></span>
                                    <span class="cr-hero-bottom-small bg-l"></span>
                                    <span class="cr-hero-bottom-small bg-r"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="des-about-area pb-100 pt-100">
                    <div class="container container-1230">
                        <div class="row justify-content-center">
                            <div class="col-xl-12">
                                <div class="des-about-text text-center">
                                    <p class="tp_text_invert_3 mb-45">
                                        At Spat Techno Solution, we turn ideas into interactive experiences. Our team blends creative thinking with technical expertise to help brands grow and adapt in an ever-evolving online world.
                                       
                                    </p>
                                    <a class="tp-btn-border" href="about.php">
                                        More About Us
                                        <span>
                                            <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 9.99999H15.2222M8.11121 1.11108L17.0001 9.99997L8.11121 18.8889" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<section class="creative-studio-marqueeover overflow-hidden">
               <div class="creative-studio-marqueeover">
                  <div class="pbmit-marqueeover-inner">
                     <div class="pbmit-element-marquee-movetext-style-1">
                        <div class="pbmit-element-inner">
                           <div class="pbmit-move-marquee" data-backspace-count="16" data-type-svg="pbmit_wave">
                              <svg class="pbmitSvg" width="100%" height="100%" viewBox="0 0 1516 92" fill="none" xmlns="https://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#9968FF" />
        <stop offset="49%" stop-color="#FF6CB2" />
        <stop offset="100%" stop-color="#FFAF56" />
      </linearGradient>
    </defs>
    
    <g>
      <path id="pbmitpath" d="M-724.4,671.5c47.9,17.5,93.6,25.9,139.6,25.9c105.3,0,186.5-43.2,272.5-88.9
        c86.4-45.9,175.7-93.4,290.1-93.4s203.8,47.5,290.1,93.4c86,45.7,167.2,88.9,272.5,88.9c105.3,0,186.5-43.2,272.5-88.9
        c86.4-45.9,175.7-93.4,290.1-93.4c114.4,0,203.7,47.5,290.1,93.4c86,45.7,167.2,88.9,272.5,88.9c105.3,0,186.5-43.2,272.5-88.9 c86.4-45.9,175.7-93.4,290.1-93.4c114.4,0,203.8,47.5,290.1,93.4c86,45.7,167.2,88.9,272.5,88.9c46,0,91.6-8.5,139.6-25.9"></path>
    </g>
                                 <text>
      <textPath href="#pbmitpath" id="pbmit-text-move" startOffset="-6.743870000000001%" text-anchor="start" fill="url(#textGradient)">
        <tspan>Website Redesign </tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Digital Marketing</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Customized website design</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Search Engine Optimization</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        
        <tspan>Brochure Designs</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Logo Designs</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <tspan>Website Redesign </tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Digital Marketing</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Customized website design</tspan>
        <tspan>Flyer & Catalogue</tspan>
        &nbsp;&nbsp;
        <tspan> Pay-Per-Click Advertising</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Business Card</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <tspan>Social Media Marketing</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        
        <tspan>Branding and Advertising</tspan>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                   
      </textPath>
    </text>
                              </svg>
                           </div>
                        </div>
                     </div>
                  </div>
              </div></section>

              <div class="design-project-area pt-200 pb-180 title-box">
                    <div class="container container-1680">
                        <div class="design-project-title-wrap mb-140">
                            <div class="row align-items-end">
                                <div class="col-xl-9 col-lg-9 col-md-9">
                                    <div class="design-project-title-box">
                                        <h4 class="tp-section-title-dirtyline">
                                            <span class="tp-text-right-scroll tp_text_invert_2">Recent</span> <br>
                                            <span class="tp_text_invert_2">Work</span>
                                        </h4>
                                        <p class="tp_reveal_anim" data-delay=".5">In the creative wilderness, clients find our work truly beloved.</p>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3">
                                    <div class="design-project-btn text-start text-md-end">
                                        <a class="tp-btn-sky-border" href="#">Explore work</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="design-project-item-wrap">
                            <div class="design-project-item mb-120">
                                <div class="row align-items-center">
                                    <div class="col-xl-5 order-xl-0 order-1">
                                        <div class="design-project-content">
                                            <h4 class="design-project-title tp_reveal_anim"><a href="#">Dental Care</a></h4>
                                           
                                            <a class="tp-btn-sky-border height-50" href="#">View project</a>
                                        </div>
                                    </div>
                                    <div class="col-xl-7 order-xl-1 order-0">
                                        <div class="design-project-thumb item-1 text-end">
                                            <img src="assets/img/webimages/work-1.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="design-project-item mb-120">
                                <div class="row align-items-center">
                                    <div class="col-xl-7">
                                        <div class="design-project-thumb item-2">
                                            <img src="assets/img/webimages/work-2.png" alt="">
                                        </div>
                                    </div>
                                    <div class="col-xl-5">
                                        <div class="design-project-content pl-200">
                                            <h4 class="design-project-title tp_reveal_anim"><a href="#">Ajantha Maaligai</a></h4>
                                            
                                            <a class="tp-btn-sky-border height-50" href="#">View project</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="design-project-item mb-120">
                                <div class="row align-items-center">
                                    <div class="col-xl-5 order-xl-0 order-1">
                                        <div class="design-project-content">
                                            <h4 class="design-project-title tp_reveal_anim"><a href="#">Adminity</a></h4>
                                           
                                            <a class="tp-btn-sky-border height-50" href="#">View project</a>
                                        </div>
                                    </div>
                                    <div class="col-xl-7 order-xl-1 order-0">
                                        <div class="design-project-thumb item-1 text-end">
                                            <img src="assets/img/webimages/work-3.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- project area end -->

<div class="st-service-area st-service-ptb pt-160 pb-160" data-bg-color="#151515">
                    <div class="container container-1320">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="st-service-heading mb-70 tp_fade_anim" data-delay=".3">
                                    <span class="tp-section-subtitle st">// OUR SERVICES</span>
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="st-service-heading mb-70">
                                    <h3 class="tp-section-title-playfair mb-20 tp_fade_anim" data-delay=".3">SERVICE WE’RE <br>
                                        ALWAYS <span>PROVIDE</span></h3>
                                    
                                </div>
                            </div>
                        </div>

                        <div class="st-service-item fix">
                            <div class="row gx-0">
                                <div class="col-lg-6">
                                    <div class="st-service-item-wrap d-flex align-items-center">
                                        <div class="st-service-item-thumb">
                                            <a href="#"><img src="assets/img/home-12/service/st-service-1.jpg" alt=""></a>
                                        </div>
                                        <div class="st-service-item-text">
                                            <h4 class="st-service-item-title"><a class="tp-line-white" href="#">Web Design</a></h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="st-service-item-wrapper p-relative fix">
                                        <div class="st-service-item-btn">
                                            <a href="#"><span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 13L13 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M1 1H13V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg></span>
                                            </a>
                                        </div>
                                        <div class="st-service-item-slider">
                                            <div class="st-service-item-tags">
                                                <span>Ecommerce website design</span>
                                                <span>Customized website design</span>
                                                <span>Portal website design</span>
                                                <span>Travel website design</span>
                                                <span>Matrimonial website designing</span>
                                                <span>Website Redesign</span>
                                                <span>Ecommerce website design</span>
                                                <span>Customized website design</span>
                                                <span>Portal website design</span>
                                                <span>Travel website design</span>
                                                <span>Matrimonial website designing</span>
                                                <span>Website Redesign</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="st-service-item fix">
                            <div class="row gx-0">
                                <div class="col-lg-6">
                                    <div class="st-service-item-wrap d-flex align-items-center">
                                        <div class="st-service-item-thumb">
                                            <a href="#"><img src="assets/img/home-12/service/st-service-2.jpg" alt=""></a>
                                        </div>
                                        <div class="st-service-item-text">
                                            <h4 class="st-service-item-title"><a class="tp-line-white" href="#">Graphic Design</a></h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="st-service-item-wrapper p-relative fix">
                                        <div class="st-service-item-btn">
                                            <a href="#"><span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 13L13 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M1 1H13V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg></span>
                                            </a>
                                        </div>
                                        <div class="st-service-item-slider">
                                            <div class="st-service-item-tags">
                                                <span>Logo Design</span>
                                                            <span>Logo Designs</span>
                                                            <span>Brochure Designs</span>
                                                            <span>Poster Designs</span>
                                                            <span>Banner Designs</span>
                                                            <span>Business Card</span>
                                                            <span>Flyer & Catalogue</span>
                                                            <span>Logo Design</span>
                                                            <span>Logo Designs</span>
                                                            <span>Brochure Designs</span>
                                                            <span>Poster Designs</span>
                                                            <span>Banner Designs</span>
                                                            <span>Business Card</span>
                                                            <span>Flyer & Catalogue</span>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="st-service-item fix">
                            <div class="row gx-0">
                                <div class="col-lg-6">
                                    <div class="st-service-item-wrap d-flex align-items-center">
                                        <div class="st-service-item-thumb">
                                            <a href="#"><img src="assets/img/home-12/service/st-service-3.jpg" alt=""></a>
                                        </div>
                                        <div class="st-service-item-text">
                                            <h4 class="st-service-item-title"><a class="tp-line-white" href="#">Digital Marketing</a></h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="st-service-item-wrapper p-relative fix">
                                        <div class="st-service-item-btn">
                                            <a href="#"><span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 13L13 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M1 1H13V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg></span>
                                            </a>
                                        </div>
                                        <div class="st-service-item-slider">
                                            <div class="st-service-item-tags">
                                                <span>Search Engine Optimization</span>
                                                            <span>Pay-Per-Click Advertising</span>
                                                           <span>Social Media Marketing</span>

                                                            <span>Content Marketing</span>
                                                            <span>Conversion Rate Optimization</span>
                                                            <span>Online Reputation Management</span>
                                                            <span>Influencer Marketing</span>
                                                            <span>Search Engine Optimization</span>
                                                            <span>Pay-Per-Click Advertising</span>
                                                           <span>Social Media Marketing</span>

                                                            <span>Content Marketing</span>
                                                            <span>Conversion Rate Optimization</span>
                                                            <span>Online Reputation Management</span>
                                                            <span>Influencer Marketing</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
               
 <div class="slide-funfact-height slide-funfact p-relative d-flex align-items-center justify-content-center">
            <div class="img-marq slide-funfact-overlay">
               <div class="middle-shadow">
                  <span></span>
               </div>
               <div class="slide-img-left">
                  <div class="box">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     
                  </div>
                  <div class="box">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-2.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-2.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     
                  </div>
               </div>
               <div class="slide-img-right">
                  <div class="box">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-2.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-2.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     
                  </div>
                  <div class="box">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                     <img src="assets/img/webimages/work-2.png" alt="">
                     <img src="assets/img/webimages/work-3.png" alt="">
                     <img src="assets/img/webimages/work-2.png" alt="">
                     <img src="assets/img/webimages/work-1.png" alt="">
                  </div>
               </div>
            </div>
            <div class="slide-funfact-wrap">
               <div>
                  <div class="container">
                     <div class="row">
                        <div class="col-xl-4 col-lg-4 col-md-4 mb-30">
                           <div class="slide-funfact-item text-center">
                              <h4><i data-purecounter-duration="1" data-purecounter-end="100" class="purecounter">0</i>%</h4>
                              <span>Customisable Designs</span>
                           </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-4 mb-30">
                           <div class="slide-funfact-item text-center">
                              <h4><i data-purecounter-duration="1" data-purecounter-end="8" class="purecounter">0</i>+</h4>
                              <span>Years of Experience</span>
                           </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-4 mb-30">
                           <div class="slide-funfact-item text-center">
                              <h4><i data-purecounter-duration="1" data-purecounter-end="150" class="purecounter">0</i>+</h4>
                              <span>Websites Designed</span>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
               <div class="cr-feature-2-area p-relative cr-feature-2-ptb">
                    <div class="cr-feature-2-bg">
                        <img src="assets/img/home-13/feature/feature-2/feature-2-bg.png" alt="">
                    </div>
                    <div class="container-fluid gx-0">
                        <div class="row g-0">
                            <div class="col-xxl-4 col-xl-6 order-2 order-xxl-1">
                                <div class="cr-feature-2-left">
                                    <div class="cr-feature-2-box">
                                        <div class="row row-cols-xl-5 gx-0">
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-1.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col"></div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation-2">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-2.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cr-feature-2-box">
                                        <div class="row row-cols-xl-5 gx-0">
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-3.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation-2">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-4.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-5.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col"></div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation-2">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-6.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cr-feature-2-box">
                                        <div class="row row-cols-xl-5 gx-0">
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-7.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col"></div>
                                            <div class="col"></div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation-2">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-8.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-xxl-4 order-xl-12 order-1 order-xxl-2">
                                <div class="cr-feature-2-heading text-center">
                                   <div class="tp-section-subtitle-gradient ct mb-20 tp_fade_anim" data-delay=".3">Spat Techno Solution</div>
                                    <h4 class="tp-section-title-onest tp-text-revel-anim">Technology Overview</h4>
                                    <div class="tp_text_anim">
                                        <p>A comprehensive selection of digital assets <br> curated to meet the highest standards of quality, safety, and <br> regulatory compliance</p>
                                    </div>
                                    <div class="cr-feature-2-btn tp_fade_anim" data-delay=".7" data-fade-from="top" data-ease="bounce">
                                        <a href="contact.php" class="tp-btn-white-border">Contact Us <span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
                                                    <path d="M14.5303 6.53033C14.8232 6.23744 14.8232 5.76256 14.5303 5.46967L9.75736 0.696699C9.46447 0.403806 8.98959 0.403806 8.6967 0.696699C8.40381 0.989592 8.40381 1.46447 8.6967 1.75736L12.9393 6L8.6967 10.2426C8.40381 10.5355 8.40381 11.0104 8.6967 11.3033C8.98959 11.5962 9.46447 11.5962 9.75736 11.3033L14.5303 6.53033ZM0 6.75H14V5.25H0V6.75Z" fill="currentColor" />
                                                </svg></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-4 col-xl-6 order-2 order-xxl-3">
                                <div class="cr-feature-2-right">
                                    <div class="cr-feature-2-box">
                                        <div class="row row-cols-xl-5 gx-0 justify-content-end">
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation-2">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-9.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cr-feature-2-box">
                                        <div class="row row-cols-xl-5 gx-0">
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-10.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col"></div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation-2">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-11.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-12.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-13.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cr-feature-2-box">
                                        <div class="row row-cols-xl-5 gx-0">
                                            <div class="col"></div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-14.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col"></div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">
                                                    <span class="bullet-top-left"></span>
                                                    <span class="bullet-top-right"></span>
                                                    <span class="bullet-bottom-left"></span>
                                                    <span class="bullet-bottom-right"></span>
                                                    <div class="cr-feature-2-item-icon animation-2">
                                                        <img src="assets/img/home-13/feature/feature-2/feature-2-15.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cr-feature-2-item">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                           
              
                <!-- <div class="design-choose-area title-box pb-120">
                    <div class="container container-1680">
                        <div class="row align-items-end">
                            <div class="col-xxl-6 col-xl-12">
                                <div class="design-choose-title-box mb-60">
                                    <h3 class="tp-section-title-dirtyline">
                                        <span class="tp-text-right-scroll tp_text_invert_2">who</span><br>
                                        <span class="tp_text_invert_2">we are</span>
                                    </h3>
                                    <p class="tp_reveal_anim" data-delay=".3">As an award-winning agency within digital jungle, spat® transcends aesthetics, crafting your vision into a legacy that endures.</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="offset-xl-6 col-xl-6">
                                <div class="design-choose-content-wrap d-flex justify-content-start justify-content-xl-end">
                                    <div class="design-choose-content">
                                        <p> We roar with creativity, staying updated with the
                                            latest tech to make your brand a formidable force
                                            in the digital wilderness and deliver exceptional
                                            website and app experiences.
                                        </p>
                                        <a class="tp-btn-sky-border height-50" href="about-modern-dark.html">About us</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="design-choose-item-wrap">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="design-choose-item design-choose-item-1 mb-30" data-bg-color="#FA4B1E">
                                        <span>50<i>+</i></span>
                                        <p>awards & <br> recognition</p>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="design-choose-item design-choose-item-2 mb-30 mt-170" data-bg-color="#A1C9B8">
                                        <span>900<i>+</i></span>
                                        <p>projects <br> completed</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="design-choose-item-wrap">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="design-choose-item design-choose-item-1 design-choose-item-3 mb-30" data-bg-color="#C2CACB">
                                        <span>20<i>+</i></span>
                                        <p>creative <br> minds</p>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="design-choose-item design-choose-item-2 mb-30" data-bg-color="#DECF3E">
                                        <span>32<i>+</i></span>
                                        <p>years of <br> experience</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
               

                <!-- work area start -->
                <!-- <div class="design-work-area p-relative">
                    <div class="design-work-content">
                        <img class="tp_fade_anim" src="assets/img/home-05/work/dribble-logo.png" alt="">
                        <p class="tp_reveal_anim">
                            Like a lion's roar echoing through
                            the jungle, a hint of our creative
                            minds emerges.
                        </p>
                        <a class="tp-btn-sky-border height-50 tp_fade_anim" href="#">View Dribbble</a>
                    </div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="design-work-wrapper">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="design-work-item design-work-item-1">
                                                <img src="assets/img/home-05/work/dribble-1.jpg" alt="">
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="design-work-item design-work-item-2">
                                                <img src="assets/img/home-05/work/dribble-4.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="design-work-wrapper">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="design-work-item design-work-item-1">
                                                <img src="assets/img/home-05/work/dribble-2.jpg" alt="">
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="design-work-item design-work-item-2">
                                                <img src="assets/img/home-05/work/dribble-5.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="design-work-wrapper">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="design-work-item design-work-item-1">
                                                <img src="assets/img/home-05/work/dribble-3.jpg" alt="">
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="design-work-item design-work-item-2">
                                                <img src="assets/img/home-05/work/dribble-6.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
                <!-- about area start -->
                
                <!-- service area end -->

                <!-- video area start -->
               
               

            </main>

           <?php include "footer.php" ?>

        </div>
    </div>



    <script src="assets/js/vendor/jquery.js"></script>
    <script src="assets/js/bootstrap-bundle.js"></script>
    <script src="assets/js/swiper-bundle.js"></script>
    <script src="assets/js/plugin.js"></script>
    <script src="assets/js/three.js"></script>
    <script src="assets/js/slick.js"></script>
    <script src="assets/js/scroll-magic.js"></script>
    <script src="assets/js/hover-effect.umd.js"></script>
    <script src="assets/js/magnific-popup.js"></script>
    <script src="assets/js/parallax-slider.js"></script>
    <script src="assets/js/nice-select.js"></script>
    <script src="assets/js/purecounter.js"></script>
    <script src="assets/js/isotope-pkgd.js"></script>
    <script src="assets/js/imagesloaded-pkgd.js"></script>
    <script src="assets/js/ajax-form.js"></script>
    <script src="assets/js/Observer.min.js"></script>
    <script src="assets/js/splitting.min.js"></script>
    <script src="assets/js/webgl.js"></script>
    <script src="assets/js/parallax-scroll.js"></script>
    <script src="assets/js/atropos.js"></script>
    <script src='assets/js/gsap-animation.js'></script>
    <script src="assets/js/slider-active.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/tp-cursor.js"></script>
    <script src="assets/js/portfolio-slider-1.js"></script>
    <script type="module" src="assets/js/distortion-img.js"></script>
    <script type="module" src="assets/js/skew-slider/index.js"></script>
    <script type="module" src="assets/js/img-revel/index.js"></script>

  

</body>
</html>