    <!-- offcanvas end here -->
 <div id="header-sticky" class="tp-header-area tp-header-ptb tp-header-blur sticky-black-bg header-transparent tp-header-border">
        <div class="container container-1750">
            <div class="row align-items-center">
                <div class="col-xl-2 col-lg-6 col-6">
                    <div class="tp-header-logo">
                        <a href="index.php">SPAT TECHNO
                       <!--      <img data-width="120" class="logo-white" src="assets/img/logo/logo-white.png" alt="">
                            <img data-width="120" class="logo-black d-none" src="assets/img/logo/logo-black.png" alt=""> -->
                        </a>
                    </div>
                </div>
                <div class="col-xl-7 d-none d-xl-block">
                    <div class="tp-header-box text-center">
                        <div class="tp-header-menu tp-header-dropdown dropdown-black-bg">
                            <nav class="tp-mobile-menu-active">
                                <ul>

                                    <li>
                                        <a href="index.php">Home</a>
                                    </li>
                                    <li>
                                        <a href="about.php">About Us</a>
                                    </li>
                                    <li class="has-dropdown">
                                        <a href="#">Services</a>
                                        <div class="tp-megamenu-wrapper mega-menu megamenu-black-bg">
                                            <div class="row gx-0">
                                                <div class="col-xl-4">
                                                    <div class="tp-megamenu-list">
                                                        <h4 class="tp-megamenu-title">Web Design</h4>
                                                        <ul>
                                                            <li><a href="#">Ecommerce website design</a></li>
                                                            <li><a href="#">Customized website design</a></li>
                                                            <li><a href="#">Portal website design</a></li>
                                                            <li><a href="#">Travel website design</a></li>
                                                            <li><a href="#">Matrimonial website designing</a></li>
                                                            <li><a href="#">Website Redesign</a></li>
                                                           
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4">
                                                    <div class="tp-megamenu-list">
                                                        <h4 class="tp-megamenu-title">Graphic/Logo Design</h4>
                                                        <ul>
                                                            <li><a href="#">Logo Designs</a></li>
                                                            <li><a href="#">Brochure Designs</a></li>
                                                            <li><a href="#">Poster Designs</a></li>
                                                            <li><a href="#">Banner Designs</a></li>
                                                            <li><a href="#">Business Card</a></li>
                                                            <li><a href="#">Flyer & Catalogue</a></li>
                                                            
                                                            <li><a href="#">Stationary & Packages</a></li>
                                                            
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4">
                                                    <div class="tp-megamenu-list">
                                                        <h4 class="tp-megamenu-title">Digital Marketing </h4>
                                                        <ul>
                                                            <li><a href="#">Search Engine Optimization</a></li>
                                                            <li><a href="#">Pay-Per-Click Advertising</a></li>
                                                            <li><a href="#">Social Media Marketing</a></li>

                                                            <li><a href="#">Content Marketing</a></li>
                                                            <li><a href="#">Conversion Rate Optimization</a></li>
                                                            <li><a href="#">Online Reputation Management</a></li>
                                                            <li><a href="#">Influencer Marketing</a></li>

                                                           
                                                        </ul>
                                                    </div>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </li>
                                   
                                    <li class="has-dropdown">
                                        <a href="#">Portfolio</a>
                                       <ul class="tp-submenu submenu">
                                            <li><a href="#">Web folio</a></li>
                                            <li><a href="#">Logo folio</a></li>
                                            <li><a href="#">Brochure & Poster folio</a></li><li>
                                                <a href="#">Catalogue folio</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="contact.php">Contact</a>
                                       
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6 col-6">
                    <div class="tp-header-right d-flex align-items-center justify-content-end">
                       
                        <div class="tp-header-btn-box ml-25 d-none d-md-flex">
                            <a href="#" class="tp-btn-black btn-red-bg">
                                <span class="tp-btn-black-filter-blur">
                                    <svg width="0" height="0">
                                        <defs>
                                            <filter id="buttonFilter">
                                                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur>
                                                <feColorMatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"></feColorMatrix>
                                                <feComposite in="SourceGraphic" in2="buttonFilter" operator="atop"></feComposite>
                                                <feBlend in="SourceGraphic" in2="buttonFilter"></feBlend>
                                            </filter>
                                        </defs>
                                    </svg>
                                </span>
                                <span class="tp-btn-black-filter d-inline-flex align-items-center" style="filter: url(#buttonFilter)">
                                    <span class="tp-btn-black-text">Enquiry Us</span>
                                    <span class="tp-btn-black-circle">
                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M1 9L9 1M9 1H1M9 1V9" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="tp-header-bar ml-20 d-xl-none">
                            <button class="tp-offcanvas-open-btn">
                                <i></i>
                                <i></i>
                                <i></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- header area end -->
    <!-- header area end -->

    <!-- offcanvas start here -->
    <!-- tp-offcanvus-area-start -->
    <div class="tp-offcanvas-area">
        <div class="tp-offcanvas-wrapper offcanvas-black-bg">
            <div class="tp-offcanvas-top d-flex align-items-center justify-content-between">
                <div class="tp-offcanvas-logo">
                    <a href="index.php">
                        <img class="logo-1" data-width="120" src="assets/img/logo/logo-black.png" alt="">
                        <img class="logo-2" data-width="120" src="assets/img/logo/logo-white.png" alt="">
                    </a>
                </div>
                <div class="tp-offcanvas-close">
                    <button class="tp-offcanvas-close-btn">
                        <svg width="37" height="38" viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.19141 9.80762L27.5762 28.1924" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M9.19141 28.1924L27.5762 9.80761" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>
            </div>
            <div class="tp-offcanvas-main">
                <div class="tp-offcanvas-content d-none d-xl-block">
                    <h3 class="tp-offcanvas-title">Hello There!</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p>
                </div>
                <div class="tp-offcanvas-menu d-xl-none">
                    <nav></nav>
                </div>
                <div class="tp-offcanvas-gallery d-none d-xl-block">
                    <div class="row gx-2">
                        <div class="col-md-3 col-3">
                            <div class="tp-offcanvas-gallery-img fix">
                                <a class="popup-image" href="assets/img/offcanvas/offcanvas-1.jpg"><img src="assets/img/offcanvas/offcanvas-1.jpg" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-3 col-3">
                            <div class="tp-offcanvas-gallery-img fix">
                                <a class="popup-image" href="assets/img/offcanvas/offcanvas-2.jpg"><img src="assets/img/offcanvas/offcanvas-2.jpg" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-3 col-3">
                            <div class="tp-offcanvas-gallery-img fix">
                                <a class="popup-image" href="assets/img/offcanvas/offcanvas-3.jpg"><img src="assets/img/offcanvas/offcanvas-3.jpg" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-3 col-3">
                            <div class="tp-offcanvas-gallery-img fix">
                                <a class="popup-image" href="assets/img/offcanvas/offcanvas-4.jpg"><img src="assets/img/offcanvas/offcanvas-4.jpg" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tp-offcanvas-contact">
                    <h3 class="tp-offcanvas-title sm">Information</h3>
                    <ul>
                        <li><a href="tel:99947 78685">+91 99947 78685</a></li>
                        <li><a href="mailto:dhivakaar183@gmail.com">dhivakaar183@gmail.com</a></li>
                        <li><a href="#">Coimbatore</a></li>
                    </ul>
                </div>
                <div class="tp-offcanvas-social">
                    <h3 class="tp-offcanvas-title sm">Follow Us</h3>
                    <ul>
                        <li>
                            <a href="#">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.25 1.5H4.75C2.95507 1.5 1.5 2.95507 1.5 4.75V11.25C1.5 13.0449 2.95507 14.5 4.75 14.5H11.25C13.0449 14.5 14.5 13.0449 14.5 11.25V4.75C14.5 2.95507 13.0449 1.5 11.25 1.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M10.6016 7.5907C10.6818 8.13166 10.5894 8.68414 10.3375 9.16955C10.0856 9.65497 9.68711 10.0486 9.19862 10.2945C8.71014 10.5404 8.15656 10.6259 7.61663 10.5391C7.0767 10.4522 6.57791 10.1972 6.19121 9.81055C5.80451 9.42385 5.54959 8.92506 5.46271 8.38513C5.37583 7.8452 5.46141 7.29163 5.70728 6.80314C5.95315 6.31465 6.34679 5.91613 6.83221 5.66425C7.31763 5.41238 7.87011 5.31998 8.41107 5.4002C8.96287 5.48202 9.47372 5.73915 9.86817 6.1336C10.2626 6.52804 10.5197 7.0389 10.6016 7.5907Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M11.5742 4.42578H11.5842" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M2.50589 12.7494C4.57662 16.336 9.16278 17.5648 12.7494 15.4941C14.2113 14.65 15.2816 13.388 15.8962 11.9461C16.7895 9.85066 16.7208 7.37526 15.4941 5.25063C14.2674 3.12599 12.1581 1.82872 9.89669 1.55462C8.34063 1.366 6.71259 1.66183 5.25063 2.50589C1.66403 4.57662 0.435172 9.16278 2.50589 12.7494Z" stroke="currentColor" stroke-width="1.5" />
                                    <path d="M12.7127 15.4292C12.7127 15.4292 12.0086 10.4867 10.5011 7.87559C8.99362 5.26451 5.28935 2.57155 5.28935 2.57155M5.68449 15.6124C6.79553 12.2606 12.34 8.54524 16.3975 9.43537M12.311 2.4082C11.1953 5.72344 5.75732 9.38453 1.71875 8.58915" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 5.5715H6.33342C7.62867 5.5715 8.61917 6.56199 8.61917 7.85725C8.61917 9.15251 7.62867 10.143 6.33342 10.143H1.76192C1.30477 10.143 1 9.83823 1 9.38108V1.76192C1 1.30477 1.30477 1 1.76192 1H5.5715C6.86676 1 7.85725 1.99049 7.85725 3.28575C7.85725 4.58101 6.86676 5.5715 5.5715 5.5715H1Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path>
                                    <path d="M10.9062 7.09454H17.0016C17.0016 5.41832 15.6301 4.04688 13.9539 4.04688C12.2777 4.04688 10.9062 5.41832 10.9062 7.09454ZM10.9062 7.09454C10.9062 8.77076 12.2777 10.1422 13.9539 10.1422H15.2492" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M16.1125 1.44434H11.668" stroke="currentColor" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.75 13H5.25C3 13 1.5 11.5 1.5 9.25V4.75C1.5 2.5 3 1 5.25 1H12.75C15 1 16.5 2.5 16.5 4.75V9.25C16.5 11.5 15 13 12.75 13Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8.70676 5.14837L10.8006 6.40465C11.5543 6.90716 11.5543 7.66093 10.8006 8.16344L8.70676 9.41972C7.86923 9.92224 7.19922 9.50348 7.19922 8.5822V6.06964C7.19922 4.98086 7.86923 4.64585 8.70676 5.14837Z" fill="currentColor" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>