index.html

<!DOCTYPE html>
<html lang="en" class="scroll-smooth" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ItEthik - An It Ethnicity</title>

  <link rel="shortcut icon" type="image/x-icon" href="https://ik.imagekit.io/hk376cwka/images/monogram__1_.png?updatedAt=1685287408855>

  <link rel="">
  <link rel=" preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap"
    rel="stylesheet">

  <!-- Plugins css -->
  <link rel="stylesheet" href="./assets/css/mobilemenu.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
  <!-- Tailwind css -->
  <link rel="stylesheet" href="./assets/css/styles.css" />

  <script>
    // On page load, set the dark theme
    document.documentElement.classList.add("dark");
    document.getElementById("light__to--dark")?.classList.add("dark--version");
  </script>

</head>

<body class="font-rubik dark:bg-dark_primary_bg">

  <!-- Preloader start -->
  <div id="preloader">
    <div class="loader--border"></div>
  </div>
  <!-- Preloader end -->

  <!-- Header area start -->
  <header class="absolute w-full left-0 top-0">
    <div class="header__sticky py-5">
      <div class="container mx-auto">
        <div class="flex justify-between items-center">
          <div class="logo">
            <a href="./index.html">
              <img class="hidden dark:block" src="assets/images/blue-logo-border.png" loading="lazy" width="120"
                height="30" alt="ItEthik" loading="lazy">
            </a>
          </div>
          <div class="flex items-center md:hidden">
            <nav>
              <ul class="flex items-center">
                <li>
                  <a href="#home"
                    class="text-[17px] xl:text-[19px] text-accent1 dark:text-orange font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300 relative after:absolute after:content-[''] after:h-[2px] after:w-0 after:bottom-[3px] ltr:after:left-0 rtl:after:right-0 after:transition-[.5s] after:bg-accent1 py-[8px] hover:after:w-full">Home</a>
                </li>
                <li>
                  <a href="#about"
                    class="text-[17px] xl:text-[19px] text-primary dark:text-white font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300 ltr:ml-[26px] ltr:xl:ml-[44px] rtl:mr-[26px] rtl:xl:mr-[44px] relative after:absolute after:content-[''] after:h-[2px] after:w-0 after:bottom-[3px] ltr:after:left-0 rtl:after:right-0 after:transition-[.5s] after:bg-accent1 py-[8px] hover:after:w-full">About</a>
                </li>
                </li>
                <li>
                  <a href="#services"
                    class="text-[17px] xl:text-[19px] text-primary dark:text-white font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300 ltr:ml-[26px] ltr:xl:ml-[44px] rtl:mr-[26px] rtl:xl:mr-[44px] relative after:absolute after:content-[''] after:h-[2px] after:w-0 after:bottom-[3px] ltr:after:left-0 rtl:after:right-0 after:transition-[.5s] after:bg-accent1 py-[8px] hover:after:w-full">Services</a>
                </li>
                <li>
                  <a href="#portfolio"
                    class="text-[17px] xl:text-[19px] text-primary dark:text-white font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300 ltr:ml-[26px] ltr:xl:ml-[44px] rtl:mr-[26px] rtl:xl:mr-[44px] relative after:absolute after:content-[''] after:h-[2px] after:w-0 after:bottom-[3px] ltr:after:left-0 rtl:after:right-0 after:transition-[.5s] after:bg-accent1 py-[8px] hover:after:w-full">Projects</a>
                </li>
                <li>
                  <a href="#blog"
                    class="text-[17px] xl:text-[19px] text-primary dark:text-white font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300 ltr:ml-[26px] ltr:xl:ml-[44px] rtl:mr-[26px] rtl:xl:mr-[44px] relative after:absolute after:content-[''] after:h-[2px] after:w-0 after:bottom-[3px] ltr:after:left-0 rtl:after:right-0 after:transition-[.5s] after:bg-accent1 py-[8px] hover:after:w-full">Blog</a>
                </li>
                <li><a href="#contact"
                    class="text-[17px] xl:text-[19px] text-primary dark:text-white font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300 ltr:ml-[26px] ltr:xl:ml-[44px] rtl:mr-[26px] rtl:xl:mr-[44px] relative after:absolute after:content-[''] after:h-[2px] after:w-0 after:bottom-[3px] ltr:after:left-0 rtl:after:right-0 after:transition-[.5s] after:bg-accent1 py-[8px] hover:after:w-full">Contact</a>
                </li>
              </ul>
            </nav>
            <a href="login.html">
              <button
                class="flex bg-accent1 lg:px-[15px] px-[12px] xl:py-[12px] py-[10px] rounded-[2rem] text-[16px] xl:text-[18px] font-medium text-white items-center ltr:ml-[32px] rtl:mr-[32px] transition duration-300 relative after:absolute :after:content-[''] after:bg-primary after:h-full after:w-full after:bottom-0 after:left-0 after:rounded-[2rem] after:trasition after:duration-300 after:opacity-0 hover:after:opacity-[1]">
                <span
                  class="icon bg-[#EFEBEB] text-accent1 w-[34px] h-[34px] rounded-full flex items-center justify-center ltr:xl:mr-[15px] ltr:mr-[10px] rtl:xl:ml-[15px] rtl:ml-[10px] relative z-[8] flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-activity">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                  </svg>
                </span>

                <span
                  class="ltr:xl:pr-[5px] ltr:lg:pr-[5px] rtl:xl:pl-[5px] rtl:lg:pl-[5px] relative z-[8] flex-shrink-0">Sign-in</span>
              </button>
            </a>
          </div>
          <div class="lg:hidden">
            <button class="offcanvas__header--menu__open--btn text-primary dark:text-white " data-offcanvas>
              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-menu">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <!-- Start Offcanvas header menu -->
      <div class="offcanvas__header lg:hidden dark:bg-gray-800">
        <div class="offcanvas__inner">
          <div class="offcanvas__logo">
            <a class="offcanvas__logo_link" href="index.html">
              <img class="hidden dark:block" src="assets/images/blue-logo-border.png" loading="lazy" alt="ItEthik"
                width="158" height="36">
            </a>
            <button class="offcanvas__close--btn dark:text-white" data-offcanvas>close</button>
          </div>
          <nav class="offcanvas__menu">
            <ul class="offcanvas__menu_ul">
              <li class="offcanvas__menu_li">
                <a class="offcanvas__menu_item dark:text-orange" href="#home">Home</a>
              </li>
              <li class="offcanvas__menu_li"><a class="offcanvas__menu_item dark:text-white" href="about.html">About</a>
              </li>
              <li class="offcanvas__menu_li"><a class="offcanvas__menu_item dark:text-white"
                  href="services.html">Services</a></li>
              <li class="offcanvas__menu_li"><a class="offcanvas__menu_item dark:text-white"
                  href="portfolio.html">Portfolio</a></li>
              <li class="offcanvas__menu_li"><a class="offcanvas__menu_item dark:text-white" href="blog.html">Blog</a>
              </li>
              <li class="offcanvas__menu_li"><a class="offcanvas__menu_item dark:text-white"
                  href="contact.html">Contact</a></li>
            </ul>
            <a href="login.html">
              <button
                class="flex mx-auto bg-accent1 lg:px-[15px] px-[12px] xl:py-[12px] py-[10px] rounded-[2rem] text-[16px] xl:text-[18px] font-medium text-white items-center transition duration-300 relative after:absolute :after:content-[''] after:bg-primary after:h-full after:w-full after:bottom-0 after:left-0 after:rounded-[2rem] after:trasition after:duration-300 after:opacity-0 hover:after:opacity-[1] mt-[30px]">
                <span
                  class="icon bg-[#EFEBEB] text-accent1 w-[34px] h-[34px] rounded-full flex items-center justify-center ltr:xl:mr-[15px] ltr:mr-[10px] rtl:xl:ml-[15px] rtl:ml-[10px] relative z-[8] flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-activity">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                  </svg>
                </span>
                <span
                  class="ltr:xl:pr-[5px] ltr:lg:pr-[5px] rtl:xl:pl-[5px] rtl:lg:pl-[5px] relative z-[8] flex-shrink-0">Sign-in</span>
              </button>
            </a>

          </nav>
        </div>
      </div>

      <!-- End Offcanvas header menu -->
    </div>


  </header>
  <!-- Header area end -->

  <!-- Main wrapper start -->
  <main>
    <!-- Hero section start -->


    <section
      class="bg-cover bg-no-repeat bg-center sm:h-full only-md:h-screen lg:min-h-screen flex justify-center items-center overflow-hidden bg-[url('..home2-hero-bg-dark.png')] bg-[#DAEEF1] dark:bg-[url('../images/home2-hero-bg-dark.png')] dark:bg-dark_primary_bg dark:border-b dark:border-dark_accent1"
      id="home">
      <div
        class="container mx-auto flex sm:flex-col items-center justify-center lg:mt-[40px] only-md:mt-[40px] sm:pt-[100px] sm:pb-[70px]">
        <div class="lg:max-w-[40%] sm:max-w-[60%] xs:max-w-[85%] only-md:max-w-[40%] flex justify-end">
          <div class="relative only-xl:max-w-[70%]">
            <img class="hidden dark:block" src="https://cdn.vibox.co.uk/uploads/178/conversions/obs_amd_lgpu-large.png"
              alt="" loading="lazy">

            <a href="https://goo.gl/maps/jjK3LvA1LwoZFWHX6?coh=178572&entry=tt" target="_blank"
              class="absolute top-[100px] lg:top-[210px] right-[-20px] only-md:right-[-10px] only-xl:max-w-[65px] lg:max-w-[80px] xl:max-w-[105px] sm:max-w-[50px] only-md:max-w-[70px] animateUpDown">
              <img src="https://www.transparentpng.com/thumb/google-logo/google-logo-png-icon-free-download-SUF63j.png"
                alt="google logo" width="70" height="70" loading="lazy">
            </a>


            <a href="https://www.justdial.com/Mumbai/Itethik-Near-Radcliffe-School-Ulwe/022PXX22-XX22-190416133035-B6N6_BZDET"
              target="_blank"
              class="absolute top-[80px] left-[210px] md:left-[-10px] only-xl:max-w-[65px] lg:max-w-[80px] xl:max-w-[105px] sm:max-w-[50px] only-md:max-w-[70px] animateUpDown">
              <img src="https://ik.imagekit.io/hk376cwka/images/justdial.png?updatedAt=1685287408807" width="50"
                height="50" alt="justdial logo" loading="lazy">
            </a>


            <a href="#">
              <div
                class="flex items-center absolute bottom-0 right-0 bg-white dark:bg-dark_accent1 rounded-[50px] px-[15px] py-[15px] shadow-[0_0_50px_0_rgba(196,206,213,0.2)] dark:shadow-[0_0_50px_0_rgba(0,0,0,0.2)]">
                <div class="text-accent1 w-[45px]">
                  <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-check-circle">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg>
                </div>
                <div class="pl-[10px] pr-[15px]">
                  <span
                    class="block text-[20px] lg:text-[26px] font-bold text-primary dark:text-white font-heebo leading-[1]">800+</span>
                  <span class="block text-paragraph dark:text-slate-200 text-[17px]">Projects Completed</span>
                </div>
              </div>
            </a>

          </div>
        </div>
        <div
          class="ltr:xl:pl-[95px] ltr:lg:pl-[50px] ltr:only-md:pl-[40px] rtl:xl:pr-[95px] rtl:lg:pr-[50px] rtl:only-md:pr-[40px] flex-grow sm:mt-[30px] sm:text-center">
          <span class="text-accent1 text-[24px] font-semibold italic pb-[5px]">With ItEthik</span>
          <h2
            class="lg:text-[60px] only-md:text-[40px] sm:text-[28px] font-bold font-heebo text-heading dark:text-white">
            Simplify Your IT Needs. </h2>
          <h3 class="font-heebo font-normal text-primary dark:text-white"> </h3>
          <p class="lg:text-[20px] md:text-[16px] text-paragraph dark:text-slate-200 lg:mt-[18px] md:mt-[15px]">Your
            expert partner for computer, laptop/mac repairs, CCTV, intercoms, biometrics, and servers.</p>
          <div class="flex items-center gap-[18px] flex-wrap mt-[30px] sm:justify-center">
            <a href="#" class="btn outline-btn text-accent1 shrink-0">Book Now</a>
            <div class="flex items-center flex-wrap gap-[15px] sm:justify-center">
              <span
                class="font-heebo lg:text-[22px] md:text-[18px] font-semibold shrink-0 text-primary dark:text-white">Follow
                us: </span>
              <div class="flex items-center">
                <a href="https://www.facebook.com/profile.php?id=100076832234885" target="_blank"
                  class="w-[30px] h-[30px] flex items-center justify-center text-accent1 border border-accent1 transition duration-300 hover:bg-accent1 hover:text-white rounded-full">
                  <svg fill="currentColor" stroke="currentColor" width="13" height="14"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                    <path
                      d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
                  </svg>
                </a>
                <a href="https://www.youtube.com/channel/UCh3-ExRE1XhEf-A6FJQQJLw" target="_blank"
                  class="w-[30px] h-[30px] flex items-center justify-center text-accent1 border border-accent1 transition duration-300 hover:bg-accent1 hover:text-white rounded-full ltr:ml-[10px] rtl:mr-[10px]">
                  <svg fill="currentColor" stroke="currentColor" width="13" height="14"
                    xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="youtube">
                    <path
                      d="M23,9.71a8.5,8.5,0,0,0-.91-4.13,2.92,2.92,0,0,0-1.72-1A78.36,78.36,0,0,0,12,4.27a78.45,78.45,0,0,0-8.34.3,2.87,2.87,0,0,0-1.46.74c-.9.83-1,2.25-1.1,3.45a48.29,48.29,0,0,0,0,6.48,9.55,9.55,0,0,0,.3,2,3.14,3.14,0,0,0,.71,1.36,2.86,2.86,0,0,0,1.49.78,45.18,45.18,0,0,0,6.5.33c3.5.05,6.57,0,10.2-.28a2.88,2.88,0,0,0,1.53-.78,2.49,2.49,0,0,0,.61-1,10.58,10.58,0,0,0,.52-3.4C23,13.69,23,10.31,23,9.71ZM9.74,14.85V8.66l5.92,3.11C14,12.69,11.81,13.73,9.74,14.85Z">
                    </path>
                  </svg>

                </a>
                <a href="https://twitter.com/ITEthik" target="_blank"
                  class="w-[30px] h-[30px] flex items-center justify-center text-accent1 border border-accent1 transition duration-300 hover:bg-accent1 hover:text-white rounded-full ltr:ml-[10px] rtl:mr-[10px]">
                  <svg fill="currentColor" stroke="currentColor" width="13" height="14"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path
                      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
                  </svg>
                </a>
                <a href="https://www.instagram.com/_itethik_/" target="_blank"
                  class="w-[30px] h-[30px] flex items-center justify-center text-accent1 border border-accent1 transition duration-300 hover:bg-accent1 hover:text-white rounded-full ltr:ml-[10px] rtl:mr-[10px]">
                  <svg fill="currentColor" stroke="currentColor" width="13" height="14"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                    <path
                      d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
                  </svg>

                  <a href="https://www.reddit.com/user/ITETHIK/" target="_blank"
                    class="w-[30px] h-[30px] flex items-center justify-center text-accent1 border border-accent1 transition duration-300 hover:bg-accent1 hover:text-white rounded-full ltr:ml-[10px] rtl:mr-[10px]">
                    <svg fill="currentColor" stroke="currentColor" width="13" height="14"
                      xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="reddit">
                      <path
                        d="M14.41016,16.86719A3.375,3.375,0,0,1,12.042,17.5a3.36829,3.36829,0,0,1-2.36523-.63184,1.00059,1.00059,0,0,0-1.416,1.41407A5.11054,5.11054,0,0,0,12.042,19.5a5.12,5.12,0,0,0,3.78223-1.2168,1.00058,1.00058,0,1,0-1.41406-1.416ZM9.2005,15.00165a1,1,0,1,0-1.0003-.9997A1.00079,1.00079,0,0,0,9.2005,15.00165Zm6-2a1,1,0,1,0,.9997,1.0003A1.00138,1.00138,0,0,0,15.2005,13.00165ZM23,11.78027a3.77157,3.77157,0,0,0-6.794-2.26471,16.50461,16.50461,0,0,0-3.05005-.47851l.85578-5.705,2.08752.70984a2.99694,2.99694,0,0,0,5.99353-.06433V3.95508a3.02886,3.02886,0,0,0-3-2.95508,2.97689,2.97689,0,0,0-2.33209,1.155L13.52246,1.05371a.999.999,0,0,0-1.31152.79785L11.13446,9.027A16.66426,16.66426,0,0,0,7.794,9.51556a3.76753,3.76753,0,0,0-6.22492,4.23487A4.86206,4.86206,0,0,0,1,16c0,3.9248,4.832,7,11,7s11-3.0752,11-7a4.86217,4.86217,0,0,0-.56866-2.2489A3.78344,3.78344,0,0,0,23,11.78027ZM19.09277,3a1,1,0,1,1-1,1A1.01672,1.01672,0,0,1,19.09277,3ZM4.78027,10a1.75976,1.75976,0,0,1,.88172.24951A9.97889,9.97889,0,0,0,3.0141,11.9234c-.004-.04785-.0141-.095-.0141-.14313A1.78255,1.78255,0,0,1,4.78027,10ZM12,21c-4.87891,0-9-2.29-9-5s4.12109-5,9-5,9,2.29,9,5S16.87891,21,12,21Zm8.9859-9.07654A9.97805,9.97805,0,0,0,18.338,10.24951,1.75993,1.75993,0,0,1,19.21973,10,1.78255,1.78255,0,0,1,21,11.78027C21,11.82837,20.98993,11.87561,20.9859,11.92346Z">
                      </path>
                    </svg>


                  </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Hero section end -->

    <!-- ################################################################################### -->

    <!-- About me section start -->
    <section
      class="bg-cover bg-no-repeat bg-center bg-[url('https://ik.imagekit.io/hk376cwka/images/about-me-bg.png?updatedAt=1685287405206')] bg-[#ECF1F6] dark:bg-dark_primary_bg dark:bg-none py-[70px] lg:py-[100px] dark:border-t dark:border-b dark:border-dark_accent1 "
      id="about">
      <div class="container mx-auto">
        <div class="flex justify-between sm:flex-wrap sm:flex-col-reverse">
          <div class="w-full lg:max-w-[550px]">
            <div>
              <span class="text-accent1 text-[20px] lg:text-[15px] font-medium mb-[10px] lg:mb-[5px]">Why Chosse
                Us?</span>
              <h2
                class="text-[24px] only-md:text-[32px] lg:text-[48px] font-bold font-heebo leading-[36px] lg:leading-[58px] text-[#000248] dark:text-white ltr:lg:pr-[50px] rtl:lg:pl-[50px]">
                Top choice for Mac, desktop, and laptop repairs / upgrades.
              </h2>
            </div>
            <div class="mt-[30px]">
              <h3 class="text-accent1 text-[20px] lg:text-[24px] font-medium ">Key Points:</h3>
              <ul class="flex justify-between flex-wrap mt-[18px]">
                <li
                  class="text-paragraph dark:text-slate-200 w-full xs:max-w-[100%]  max-w-[50%] ltr:pl-[18px] rtl:pr-[18px] my-[10px] relative before:absolute before:content-[''] before:bg-accent1 before:w-[6px] before:h-[6px] ltr:before:left-0 rtl:before:right-0 before:top-[8px] before:rounded-full after:absolute after::content-[''] after:w-4 after:h-4 after:border-2 after:border-accent1 ltr:after:left-[-5px] rtl:after:right-[-5px] after:top-[3px] after:border-solid after:rounded-full text-[17px]">
                  Pre-informed about cost, time</li>

                <li
                  class="text-paragraph dark:text-slate-200 w-full xs:max-w-[100%]  max-w-[50%] ltr:pl-[18px] rtl:pr-[18px] my-[10px] relative before:absolute before:content-[''] before:bg-accent1 before:w-[6px] before:h-[6px] ltr:before:left-0 rtl:before:right-0 before:top-[8px] before:rounded-full after:absolute after::content-[''] after:w-4 after:h-4 after:border-2 after:border-accent1 ltr:after:left-[-5px] rtl:after:right-[-5px] after:top-[3px] after:border-solid after:rounded-full text-[17px]">
                  Device Security and transparent process</li>

                <li
                  class="text-paragraph dark:text-slate-200 w-full xs:max-w-[100%]  max-w-[50%] ltr:pl-[18px] rtl:pr-[18px] my-[10px] relative before:absolute before:content-[''] before:bg-accent1 before:w-[6px] before:h-[6px] ltr:before:left-0 rtl:before:right-0 before:top-[8px] before:rounded-full after:absolute after::content-[''] after:w-4 after:h-4 after:border-2 after:border-accent1 ltr:after:left-[-5px] rtl:after:right-[-5px] after:top-[3px] after:border-solid after:rounded-full text-[17px]">
                  Urgent Repair Services</li>

                <li
                  class="text-paragraph dark:text-slate-200 w-full xs:max-w-[100%]  max-w-[50%] ltr:pl-[18px] rtl:pr-[18px] my-[10px] relative before:absolute before:content-[''] before:bg-accent1 before:w-[6px] before:h-[6px] ltr:before:left-0 rtl:before:right-0 before:top-[8px] before:rounded-full after:absolute after::content-[''] after:w-4 after:h-4 after:border-2 after:border-accent1 ltr:after:left-[-5px] rtl:after:right-[-5px] after:top-[3px] after:border-solid after:rounded-full text-[17px]">
                  Expert and Trained technician</li>

              </ul>
              <a href="#about" class="btn solid-btn text-accent1 mt-[35px] inline-block">Contact Us</a>
            </div>
          </div>
          <div class="sm:mb-[50px]">
            <div class="relative">
              <img class="relative z-10 sm:mx-auto" src="assets/images/1.png" width="535" height="549" alt=""
                loading="lazy">
              <span
                class="absolute sm:w-[100px] sm:h-[100px] only-md:w-[150px] only-md:h-[150px] lg:w-[200px] lg:h-[200px] xl:w-[250px] xl:h-[250px] border-[8px] lg:border-[13px] border-accent1 rounded-full xs:bottom-[-25%] sm:bottom-[-12%] bottom-[-18%] ltr:sm:left-[3%] ltr:left-[-18%] rtl:sm:right-[3%] rtl:right-[-18%] animateUpDown"></span>
            </div>
            <div class="text-center mt-[30px]">
              <h4 class="font-heebo text-[50px] lg:text-[80px] font-bold leading-[1] text-white title-stroke">500+</h4>
              <span
                class="font-bold sm:text-[20px] only-md:text-[24px] lg:text-[30px] font-heebo text-primary dark:text-white">Services
                Attended
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- About me section end -->

    <!-- ################################################################################### -->


    <!-- OUR SERVICE section start -->

    <section class="lg:py-[100px] md:py-[70px]" id="services">
      <div class="container mx-auto">
        <!-- Section title start -->
        <div class="flex justify-between items-center gap-[20px] lg:gap-[30px] mb-[55px] md:flex-wrap md:text-center">
          <div class="max-w-full lg:max-w-[580px]  w-full">
            <span class="text-accent1 text-[20px] lg:text-[24px] font-medium mb-[10px] lg:mb-[5px]">OUR SERVICE</span>
            <h2
              class="text:[28px] lg:text-[48px] font-bold font-heebo leading-[36x] lg:leading-[58px] text-[#000248] dark:text-white">
              We are here to help with your IT Problems.</h2>
          </div>
          <div class="md:grow">
            <p class="text-[#636363] text-[17px] leading-[28px] lg:max-w-[472px] w-full dark:text-slate-200">We
              specialize in providing desktop and laptop repair services, along with maintenance and AMC services for
              CCTV, biometric, and intercom systems.</p>
          </div>
        </div>
        <!-- Section title end -->

        <!-- Services list start -->
        <div class="grid gap-[30px] lg:grid-cols-3 grid-cols-1 only-md:grid-cols-2">

          <!-- Single service start -->
          <div
            class="shadow-[0_0_50px_0_rgba(196,206,213,0.2)] hover:shadow-[0_0_150px_0_rgba(196,206,213,0.7)]  dark:shadow-[0_0_20px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_50px_0_rgba(0,0,0,0.2)] hover:translate-y-[-10px] transition duration-500">
            <div class="overflow-hidden px-[30px] xl:px-[40px] lg:pt-[50px] md:pt-[40px] pb-[40px] ">
              <span
                class="bg-[#48CDA0] text-white w-[70px] h-[70px] lg:w-[93px] lg:h-[93px] flex items-center justify-center rounded-full service-shape before:bg-[#79DAB9] before:opacity-[0.26]">
                <img src="assets/images/computer-svgrepo-com.svg" width="46%">

              </span>
              <h3
                class="text-primary dark:text-white text-[20px] xl:text-[25px] font-bold font-heebo mt-[20px] mb-[15px]">
                Desktop, Laptop Repair Services</h3>
              <p class="text-[17px] text-[#636363] dark:text-slate-200">Expert desktop and laptop repair services to
                ensure optimal performance and functionality of your devices.</p>

              <!-- <a href="#" class="link-button text-[#48CDA0] before:bg-[#48CDA0] mt-[15px] hover:text-[#333] dark:hover:text-white">Read More</a>  -->
            </div>
          </div>
          <!-- Single service end -->

          <!-- Single service start -->
          <div
            class="shadow-[0_0_50px_0_rgba(196,206,213,0.2)] hover:shadow-[0_0_150px_0_rgba(196,206,213,0.7)]  dark:shadow-[0_0_20px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_50px_0_rgba(0,0,0,0.2)] hover:translate-y-[-10px] transition duration-500">
            <div class="overflow-hidden px-[30px] xl:px-[40px] lg:pt-[50px] md:pt-[40px] pb-[40px] ">

              <span
                class="bg-[#ED5F38] text-white w-[70px] h-[70px] lg:w-[93px] lg:h-[93px] flex items-center justify-center rounded-full service-shape before:bg-[#ED5F38] before:opacity-[0.16]">

                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-life-buoy">
                  <circle cx="12" cy="12" r="10"></circle>
                  <circle cx="12" cy="12" r="4"></circle>
                  <line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line>
                  <line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line>
                  <line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line>
                  <line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line>
                  <line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line>
                </svg>

              </span>
              <h3
                class="text-primary dark:text-white text-[20px] xl:text-[25px] font-bold font-heebo mt-[20px] mb-[15px]">
                CCTV, Biometric, Intercom Services</h3>

              <p class="text-[17px] text-[#636363] dark:text-slate-200">Comprehensive CCTV, biometric, and intercom
                services for enhanced security and efficient communication systems.</p>

              <!-- <a href="#" class="link-button text-[#ED5F38] before:bg-[#ED5F38] mt-[15px] hover:text-[#333] dark:hover:text-white">Read More</a> -->

            </div>
          </div>
          <!-- Single service end -->

          <!-- Single service start -->
          <div
            class="shadow-[0_0_50px_0_rgba(196,206,213,0.2)] hover:shadow-[0_0_150px_0_rgba(196,206,213,0.7)]  dark:shadow-[0_0_20px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_50px_0_rgba(0,0,0,0.2)] hover:translate-y-[-10px] transition duration-500">

            <div class="overflow-hidden px-[30px] xl:px-[40px] lg:pt-[50px] md:pt-[40px] pb-[40px] ">

              <span
                class="bg-[#007EFF] text-white w-[70px] h-[70px] lg:w-[93px] lg:h-[93px] flex items-center justify-center rounded-full service-shape before:bg-[#007EFF] before:opacity-[0.16]">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-globe">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="2" y1="12" x2="22" y2="12"></line>
                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z">
                  </path>
                </svg>
              </span>

              <h3
                class="text-primary dark:text-white text-[20px] xl:text-[25px] font-bold font-heebo mt-[20px] mb-[15px]">
                Maintenance & AMC Services</h3>

              <p class="text-[17px] text-[#636363] dark:text-slate-200">Reliable maintenance and AMC services to ensure
                the continuous performance and longevity of your IT systems and equipment.</p>

              <!-- <a href="#" class="link-button text-[#007EFF] before:bg-[#007EFF] mt-[15px] hover:text-[#333] dark:hover:text-white">Read More</a> -->

            </div>
          </div>
          <!-- Single service end -->
        </div>
        <!-- Services list end -->

      </div>
    </section>
    <!-- OUR SERVICE section end -->

    <!-- ################################################################################### -->

    <!-- PORTFOLIO SECTION start -->
    <section
      class="bg-[#EFF3F7] dark:bg-dark_primary_bg pt-[70px] lg:pt-[100px] pb-[40px] lg:pb-[70px] dark:border-t dark:border-b dark:border-dark_accent1"
      id="portfolio">
      <div class="container mx-auto">
        <div class="flex justify-between items-center gap-[20px] lg:gap-[30px] mb-[55px] md:flex-wrap md:text-center">
          <div class="max-w-full lg:max-w-[580px]  w-full">
            <span class="text-accent1 text-[20px] lg:text-[24px] font-medium mb-[10px] lg:mb-[5px]">Recent Work</span>
            <h2
              class="text:[28px] lg:text-[48px] font-bold font-heebo leading-[36x] lg:leading-[58px] text-[#000248] dark:text-white">
              Our Recent Computer, Laptop, CCTV, Biomatrics & Intercoms Projects
            </h2>
          </div>
          <div class="md:grow">
            <p class="text-[#636363] dark:text-slate-200 text-[17px] leading-[28px] lg:max-w-[472px] w-full">We showcase
              our expertise through an impressive portfolio featuring our latest projects across Mumbai and Navi Mumbai.
              Explore our portfolio to see examples of our successful undertakings and the quality of our work.</p>
          </div>
        </div>

        <!-- Filter portfolio start -->
        <div class="isotope--filter">
          <!-- FILTER NAV -->
          <div class="button-group filters-button-group flex justify-center flex-wrap gap-[30px]">
            <button
              class="button is-checked text-primary dark:text-white text-[18px] capitalize font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300"
              data-filter="*">Show All</button>
            <button
              class="button text-primary dark:text-white text-[18px] capitalize font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300"
              data-filter=".web">Desktop Repair</button>
            <button
              class="button text-primary dark:text-white text-[18px] capitalize font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300"
              data-filter=".graphics">Laptop Repair</button>
            <button
              class="button text-primary dark:text-white text-[18px] capitalize font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300"
              data-filter=".development">CCTV</button>
            <button
              class="button text-primary dark:text-white text-[18px] capitalize font-medium hover:text-accent1 dark:hover:text-accent1 transition duration-300"
              data-filter=".mobile">AMC Services</button>
          </div>
          <div class="portfolio__grid flex mt-[50px] mx-[-15px]">

            <!-- CCTV portfolio start -->
            <div class="element-item mb-[30px] w-[50%] lg:w-[33.33%]  px-[15px] web portfolio__parent"
              data-category="web">
              <div class="relative overflow-hidden">
                <a href="#" class="popup-modal--open">
                  <span
                    class="absolute w-full h-full bg-accent1 left-0 top-0 opacity-0 transition duration-300 portfolio__overlay z-10">
                    <div class="flex items-center justify-end flex-col text-center h-full text-white p-[20px]">
                      <span
                        class="portfolio--zoom flex items-center grow transition-all duration-300 translate-y-[-20px]">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-maximize">
                          <path
                            d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3">
                          </path>
                        </svg>
                      </span>
                      <h3
                        class="portfolio--title text-[18px] lg:text-[24px] font-heebo transition-all duration-300 translate-y-3">
                        CCTV Security</h3>
                      <span
                        class="portfolio--sub-title text-[17px] 2xs:hidden transition-all duration-500 translate-y-3">Installation
                        of 4 CCTV IP Cameras at Amit Kharkar's Bungalow</span>
                    </div>
                  </span>
                  <div class="w-full portfolio__image--card">
                    <img class="w-full transition duration-300" src="./assets/images/blog/Amit-1.png" alt="">
                  </div>
                </a>
                <!-- CCTV Popup start -->
                <div class="modal_portfolio fixed h-screen w-full left-0 top-0 z-[98] opacity-0 invisible">
                  <div class="modal_popup_overlay fixed w-full h-full bg-[#000] left-0 top-0 opacity-[0.3]"></div>
                  <!-- Modal content -->
                  <div
                    class="modal__portfolio--content relative z-10 h-full flex items-center px-[15px] max-w-[750px] xl:max-w-[800px] mx-auto transition duration-300 translate-y-[-50px]">
                    <div
                      class="overflow-y-auto modal__portfolio--content-inner bg-white dark:bg-gray-800  max-h-[60vh] lg:max-h-[80vh] p-8 rounded-2xl relative">
                      <button
                        class="modal__popup--close ltr:right-[10px] rtl:left-[10px] top-[10px] absolute w-[50px] h-[50px] bg-accent1 hover:bg-primary dark:hover:bg-dark_accent1 text-white rounded-full flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-x">
                          <line x1="18" y1="6" x2="6" y2="18"></line>
                          <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                      </button>
                      <h2 class="text-accent1 text-center font-bold">
                        CCTV Security
                      </h2>
                      <div class="grid grid-cols-1 lg:grid-cols-2 my-6">
                        <div class="space-y-2">
                          <p class="dark:text-white flex items-center">
                            <span class="mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-file-text">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                <polyline points="14 2 14 8 20 8"></polyline>
                                <line x1="16" y1="13" x2="8" y2="13"></line>
                                <line x1="16" y1="17" x2="8" y2="17"></line>
                                <polyline points="10 9 9 9 8 9"></polyline>
                              </svg>
                            </span>
                            Project :&nbsp;
                            <span class="font-medium"> CCTV Cameras Installation</span>
                          </p>

                        </div>

                        <div class="space-y-2">
                          <p class="dark:text-white flex items-center mt-2 lg:mt-0">
                            <span class="mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-user">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                              </svg>
                            </span>
                            Client: <span class="font-medium">Amit Kharkar</span>
                          </p>
                        </div>
                      </div>
                      <div class="pr-3">
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-2.webp">
                      </div>
                      <p class="dark:text-white font-normal text-[17px]">
                        <br>
                        Recently, we installed CCTV IP cameras at Amit Kharkar's bungalow to enhance security and
                        provide peace of mind to the residents. The cameras offer high-quality video surveillance,
                        remote monitoring and recording, and are accessible from anywhere at any time using a smartphone
                        or computer.
                        <br><br>
                        The installation of these cameras involved setting up the cameras in strategic locations around
                        the bungalow, and connecting them to the internet. This allows remote monitoring and recording
                        of the premises, which is especially useful for keeping an eye on the property when one is not
                        physically present.
                        <br>
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-3.webp"
                          width="50%">
                        <br>
                        One of the key advantages of IP cameras is their ability to provide high-quality video
                        surveillance. The cameras used in this installation are equipped with features such as night
                        vision, high resolution, and motion detection. This means that even in low light conditions, the
                        cameras are able to capture clear images, and any suspicious activity is immediately detected
                        and recorded.
                        <br><br>
                        Additionally, these cameras are user-friendly and easy to operate. They can be accessed and
                        monitored from anywhere, at any time, using a smartphone or a computer. This makes it convenient
                        for the residents to check on the property while they are away.
                        <br><br>
                        In conclusion, the installation of 4 CCTV IP cameras at Amit Kharkar’s bungalow has been a
                        success. The cameras provide the residents with a high level of security, peace of mind, and the
                        convenience of remote monitoring. If you are looking to upgrade your security system, consider
                        investing in IP cameras for a more efficient and effective solution.
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-4.webp"
                          width="60%">
                      </p>

                    </div>
                  </div>
                </div>
                <!-- CCTV popup end -->
              </div>
            </div>
            <!-- CCTV portfolio end -->

            <!-- Desktop Repair portfolio start -->
            <div class="element-item mb-[30px] w-[50%] lg:w-[33.33%]  px-[15px] graphics portfolio__parent"
              data-category="graphics">
              <div class="relative overflow-hidden">
                <a href="#" class="popup-modal--open">
                  <span
                    class="absolute w-full h-full bg-accent1 left-0 top-0 opacity-0 transition duration-300 portfolio__overlay z-10">
                    <div class="flex items-center justify-end flex-col text-center h-full text-white p-[20px]">
                      <span
                        class="portfolio--zoom flex items-center grow transition-all duration-300 translate-y-[-20px]">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-maximize">
                          <path
                            d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3">
                          </path>
                        </svg>
                      </span>
                      <h3
                        class="portfolio--title text-[18px] lg:text-[24px] font-heebo transition-all duration-300 translate-y-3">
                        CCTV Security</h3>
                      <span
                        class="portfolio--sub-title text-[17px] 2xs:hidden transition-all duration-500 translate-y-3">Installation
                        of 4 CCTV IP Cameras at Amit Kharkar's Bungalow</span>
                    </div>
                  </span>
                  <div class="w-full portfolio__image--card">
                    <img class="w-full transition duration-300" src="./assets/images/blog/Amit-1.png" alt="">
                  </div>
                </a>
                <!-- CCTV Popup start -->
                <div class="modal_portfolio fixed h-screen w-full left-0 top-0 z-[98] opacity-0 invisible">
                  <div class="modal_popup_overlay fixed w-full h-full bg-[#000] left-0 top-0 opacity-[0.3]"></div>
                  <!-- Modal content -->
                  <div
                    class="modal__portfolio--content relative z-10 h-full flex items-center px-[15px] max-w-[750px] xl:max-w-[800px] mx-auto transition duration-300 translate-y-[-50px]">
                    <div
                      class="overflow-y-auto modal__portfolio--content-inner bg-white dark:bg-gray-800  max-h-[60vh] lg:max-h-[80vh] p-8 rounded-2xl relative">
                      <button
                        class="modal__popup--close ltr:right-[10px] rtl:left-[10px] top-[10px] absolute w-[50px] h-[50px] bg-accent1 hover:bg-primary dark:hover:bg-dark_accent1 text-white rounded-full flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-x">
                          <line x1="18" y1="6" x2="6" y2="18"></line>
                          <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                      </button>
                      <h2 class="text-accent1 text-center font-bold">
                        CCTV Security
                      </h2>
                      <div class="grid grid-cols-1 lg:grid-cols-2 my-6">
                        <div class="space-y-2">
                          <p class="dark:text-white flex items-center">
                            <span class="mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-file-text">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                <polyline points="14 2 14 8 20 8"></polyline>
                                <line x1="16" y1="13" x2="8" y2="13"></line>
                                <line x1="16" y1="17" x2="8" y2="17"></line>
                                <polyline points="10 9 9 9 8 9"></polyline>
                              </svg>
                            </span>
                            Project :&nbsp;
                            <span class="font-medium"> CCTV Cameras Installation</span>
                          </p>

                        </div>

                        <div class="space-y-2">
                          <p class="dark:text-white flex items-center mt-2 lg:mt-0  ">
                            <span class="mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-user">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                              </svg>
                            </span>
                            Client :&nbsp; <span class="font-medium">Amit Kharkar</span>
                          </p>

                        </div>
                      </div>
                      <div class="pr-3">
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-2.webp">
                      </div>
                      <p class="dark:text-white font-normal text-[17px]">
                        <br>
                        Recently, we installed CCTV IP cameras at Amit Kharkar's bungalow to enhance security and
                        provide peace of mind to the residents. The cameras offer high-quality video surveillance,
                        remote monitoring and recording, and are accessible from anywhere at any time using a smartphone
                        or computer.
                        <br><br>
                        The installation of these cameras involved setting up the cameras in strategic locations around
                        the bungalow, and connecting them to the internet. This allows remote monitoring and recording
                        of the premises, which is especially useful for keeping an eye on the property when one is not
                        physically present.
                        <br>
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-3.webp"
                          width="50%">
                        <br>
                        One of the key advantages of IP cameras is their ability to provide high-quality video
                        surveillance. The cameras used in this installation are equipped with features such as night
                        vision, high resolution, and motion detection. This means that even in low light conditions, the
                        cameras are able to capture clear images, and any suspicious activity is immediately detected
                        and recorded.
                        <br><br>
                        Additionally, these cameras are user-friendly and easy to operate. They can be accessed and
                        monitored from anywhere, at any time, using a smartphone or a computer. This makes it convenient
                        for the residents to check on the property while they are away.
                        <br><br>
                        In conclusion, the installation of 4 CCTV IP cameras at Amit Kharkar’s bungalow has been a
                        success. The cameras provide the residents with a high level of security, peace of mind, and the
                        convenience of remote monitoring. If you are looking to upgrade your security system, consider
                        investing in IP cameras for a more efficient and effective solution.
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-4.webp"
                          width="60%">
                      </p>

                    </div>
                  </div>
                </div>
                <!-- Portfolio popup end -->
              </div>
            </div>
            <!-- Desktop Repair portfolio end -->

            <!-- Laptop Repair portfolio start -->
            <div class="element-item mb-[30px] w-[50%] lg:w-[33.33%]  px-[15px] development portfolio__parent"
              data-category="development">
              <div class="relative overflow-hidden">
                <a href="#" class="popup-modal--open">
                  <span
                    class="absolute w-full h-full bg-accent1 left-0 top-0 opacity-0 transition duration-300 portfolio__overlay z-10">
                    <div class="flex items-center justify-end flex-col text-center h-full text-white p-[20px]">
                      <span
                        class="portfolio--zoom flex items-center grow transition-all duration-300 translate-y-[-20px]">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-maximize">
                          <path
                            d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3">
                          </path>
                        </svg>
                      </span>
                      <h3
                        class="portfolio--title text-[18px] lg:text-[24px] font-heebo transition-all duration-300 translate-y-3">
                        CCTV Security</h3>
                      <span
                        class="portfolio--sub-title text-[17px] 2xs:hidden transition-all duration-500 translate-y-3">Installation
                        of 4 CCTV IP Cameras at Amit Kharkar's Bungalow</span>
                    </div>
                  </span>
                  <div class="w-full portfolio__image--card">
                    <img class="w-full transition duration-300" src="./assets/images/blog/Amit-1.png" alt="">
                  </div>
                </a>
                <!-- CCTV Popup start -->
                <div class="modal_portfolio fixed h-screen w-full left-0 top-0 z-[98] opacity-0 invisible">
                  <div class="modal_popup_overlay fixed w-full h-full bg-[#000] left-0 top-0 opacity-[0.3]"></div>
                  <!-- Modal content -->
                  <div
                    class="modal__portfolio--content relative z-10 h-full flex items-center px-[15px] max-w-[750px] xl:max-w-[800px] mx-auto transition duration-300 translate-y-[-50px]">
                    <div
                      class="overflow-y-auto modal__portfolio--content-inner bg-white dark:bg-gray-800  max-h-[60vh] lg:max-h-[80vh] p-8 rounded-2xl relative">
                      <button
                        class="modal__popup--close ltr:right-[10px] rtl:left-[10px] top-[10px] absolute w-[50px] h-[50px] bg-accent1 hover:bg-primary dark:hover:bg-dark_accent1 text-white rounded-full flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-x">
                          <line x1="18" y1="6" x2="6" y2="18"></line>
                          <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                      </button>
                      <h2 class="text-accent1 text-center font-bold">
                        CCTV Security
                      </h2>
                      <div class="grid grid-cols-1 lg:grid-cols-2 my-6">
                        <div class="space-y-2">
                          <p class="dark:text-white flex items-center">
                            <span class="mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-file-text">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                <polyline points="14 2 14 8 20 8"></polyline>
                                <line x1="16" y1="13" x2="8" y2="13"></line>
                                <line x1="16" y1="17" x2="8" y2="17"></line>
                                <polyline points="10 9 9 9 8 9"></polyline>
                              </svg>
                            </span>
                            Project :&nbsp;
                            <span class="font-medium"> CCTV Cameras Installation</span>
                          </p>

                        </div>

                        <div class="space-y-2">
                          <p class="dark:text-white flex items-center mt-2 lg:mt-0  ">
                            <span class="mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-user">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                              </svg>
                            </span>
                            Client :&nbsp; <span class="font-medium">Amit Kharkar</span>
                          </p>

                        </div>
                      </div>
                      <div class="pr-3">
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-2.webp">
                      </div>
                      <p class="dark:text-white font-normal text-[17px]">
                        <br>
                        Recently, we installed CCTV IP cameras at Amit Kharkar's bungalow to enhance security and
                        provide peace of mind to the residents. The cameras offer high-quality video surveillance,
                        remote monitoring and recording, and are accessible from anywhere at any time using a smartphone
                        or computer.
                        <br><br>
                        The installation of these cameras involved setting up the cameras in strategic locations around
                        the bungalow, and connecting them to the internet. This allows remote monitoring and recording
                        of the premises, which is especially useful for keeping an eye on the property when one is not
                        physically present.
                        <br>
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-3.webp"
                          width="50%">
                        <br>
                        One of the key advantages of IP cameras is their ability to provide high-quality video
                        surveillance. The cameras used in this installation are equipped with features such as night
                        vision, high resolution, and motion detection. This means that even in low light conditions, the
                        cameras are able to capture clear images, and any suspicious activity is immediately detected
                        and recorded.
                        <br><br>
                        Additionally, these cameras are user-friendly and easy to operate. They can be accessed and
                        monitored from anywhere, at any time, using a smartphone or a computer. This makes it convenient
                        for the residents to check on the property while they are away.
                        <br><br>
                        In conclusion, the installation of 4 CCTV IP cameras at Amit Kharkar’s bungalow has been a
                        success. The cameras provide the residents with a high level of security, peace of mind, and the
                        convenience of remote monitoring. If you are looking to upgrade your security system, consider
                        investing in IP cameras for a more efficient and effective solution.
                        <img class="max-w-full h-auto rounded-xl mt-6 mx-auto" src="./assets/images/blog/amit-4.webp"
                          width="60%">
                      </p>

                    </div>
                  </div>
                </div>
                <!-- Portfolio popup end -->
              </div>
            </div>
            <!-- Laptop Repair portfolio end -->

          </div>
        </div>
        <!-- Filter portfolio end -->
        <button class="btn solid-btn mt-12" style="display: block; margin: 20px auto;">Read More</button>
      </div>
    </section>
    <!-- PORTFOLIO SECTION end -->


    <!-- ################################################################################### -->


    <!-- Testimonial section start -->
    <section class="lg:py-[100px] md:py-[70px] dark:border-b dark:border-dark_accent1">
      <div class="container mx-auto">
        <!-- Section title start -->
        <div class="mb-[35px] lg:mb-[55px]">
          <div class="max-w-full max-w-full w-full text-center">
            <span class="text-accent1 text-[20px] lg:text-[24px] font-medium mb-[10px] lg:mb-[5px]">TESTIMONIALS</span>
            <h2
              class="text:[28px] lg:text-[48px] font-bold font-heebo leading-[36x] lg:leading-[58px] text-[#000248] dark:text-white">
              We are people say about us
            </h2>
          </div>
        </div>
        <!-- Section title end -->

        <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
        <div class="elfsight-app-3cdcec3f-4c6b-44aa-9212-70b047fdfb5e hidden dark:block"></div>
        <!-- Testimonial section end -->

        <!-- ################################################################################### -->

        <!-- Team section start -->

        <section class="lg:py-[100px] md:py-[70px] dark:border-b dark:border-dark_accent1">
          <div class="container mx-auto">
            <!-- Section title start -->
            <div class="mb-[35px] lg:mb-[55px]">
              <div class="max-w-full max-w-full w-full text-center">
                <span class="text-accent1 text-[20px] lg:text-[24px] font-medium mb-[10px] lg:mb-[5px]">Our
                  Professionals</span>
                <h2
                  class="text:[28px] lg:text-[48px] font-bold font-heebo leading-[36x] lg:leading-[58px] text-[#000248] dark:text-white">
                  Meet Our Expert Team
                </h2>
              </div>
            </div>
            <!-- Team title end -->

            <section class="py-20">
              <div class="team">
                <div class="team-members">
                  <div class="team-card rounded-lg overflow-hidden shadow-lg">
                    <img src="assets/images/Keshav.webp" alt="Team Member 1" class="w-full h-auto profile-image">
                    <div class="team-card-content">
                      <h3>Keshav Sharma</h3>
                      <p>Web Developer</p>
                      <div class="social-icons">
                        <a href="#" onclick="alert('Facebook clicked')"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" onclick="alert('Instagram clicked')"><i class="fab fa-instagram"></i></a>
                        <a href="#" onclick="alert('LinkedIn clicked')"><i class="fab fa-linkedin-in"></i></a>
                      </div>
                    </div>
                    <div class="card-popup">
                      <div class="card-popup-content">
                        <img src="assets/images/Keshav.webp" alt="Team Member 1">
                        <h5>Keshav Sharma</h5>
                        <p>Web Developer</p>
                        <p>Service Team Manager</p>
                        <div class="card-popup-social-icons">
                          <a href="#" onclick="alert('Facebook clicked')"><i class="fab fa-facebook-f"></i></a>
                          <a href="#" onclick="alert('Instagram clicked')"><i class="fab fa-instagram"></i></a>
                          <a href="#" onclick="alert('LinkedIn clicked')"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                      </div>
                      <a href="#" class="close-button">&times;</a>
                    </div>
                  </div>
                  <!--  team members 2 -->

                  <div class="team-card rounded-lg overflow-hidden shadow-lg">
                    <img src="assets/images/Keshav.webp" alt="Team Member 1" class="w-full h-auto profile-image">
                    <div class="team-card-content">
                      <h3>Keshav Sharma</h3>
                      <p>Web Developer</p>
                      <div class="social-icons">
                        <a href="#" onclick="alert('Facebook clicked')"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" onclick="alert('Instagram clicked')"><i class="fab fa-instagram"></i></a>
                        <a href="#" onclick="alert('LinkedIn clicked')"><i class="fab fa-linkedin-in"></i></a>
                      </div>
                    </div>
                    <div class="card-popup">
                      <div class="card-popup-content">
                        <img src="assets/images/Keshav.webp" alt="Team Member 1">
                        <h5>Keshav Sharma</h5>
                        <p>Web Developer</p>
                        <p>Service Team Manager</p>
                        <div class="card-popup-social-icons">
                          <a href="#" onclick="alert('Facebook clicked')"><i class="fab fa-facebook-f"></i></a>
                          <a href="#" onclick="alert('Instagram clicked')"><i class="fab fa-instagram"></i></a>
                          <a href="#" onclick="alert('LinkedIn clicked')"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                      </div>
                      <a href="#" class="close-button">&times;</a>
                    </div>
                  </div>
                  <!--  team members 3 -->

                  <div class="team-card rounded-lg overflow-hidden shadow-lg">
                    <img src="assets/images/Keshav.webp" alt="Team Member 1" class="w-full h-auto profile-image">
                    <div class="team-card-content">
                      <h3>Keshav Sharma</h3>
                      <p>Web Developer</p>
                      <div class="social-icons">
                        <a href="#" onclick="alert('Facebook clicked')"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" onclick="alert('Instagram clicked')"><i class="fab fa-instagram"></i></a>
                        <a href="#" onclick="alert('LinkedIn clicked')"><i class="fab fa-linkedin-in"></i></a>
                      </div>
                    </div>
                    <div class="card-popup">
                      <div class="card-popup-content">
                        <img src="assets/images/Keshav.webp" alt="Team Member 1">
                        <h5>Keshav Sharma</h5>
                        <p>Web Developer</p>
                        <p>Sales Team Manager</p>
                        <div class="card-popup-social-icons">
                          <a href="#" onclick="alert('Facebook clicked')"><i class="fab fa-facebook-f"></i></a>
                          <a href="#" onclick="alert('Instagram clicked')"><i class="fab fa-instagram"></i></a>
                          <a href="#" onclick="alert('LinkedIn clicked')"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                      </div>
                      <a href="#" class="close-button">&times;</a>
                    </div>
                  </div>
                </div>
              </div>
          </div>
          <button class="btn solid-btn mt-12" style="display: block; margin: 20px auto;">More</button>


        </section>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>

        <!-- ################################################################################### -->

        <!-- Logo list section start -->
        <section class="py-[70px] lg:py-[100px] border-b-[1px] border-[#DDDDDD] dark:border-dark_accent1">
          <div class="container mx-auto">
            <div class="relative">
              <div
                class="w-full absolute h-[1px] bg-[#DDDDDD] top-[50%] translate-y-[-50%] ltr:left-0 rtl:right-0 2xs:hidden">
              </div>
              <div class="flex flex-wrap">
                <div
                  class="max-w-[25%] 2xs:max-w-[50%] w-full ltr:border-r-[1px] rtl:border-l-[1px] border-[#DDDDDD] dark:border-dark_accent1 client__logo--padding">
                  <div
                    class="w-full client__logo--padding--inner 2xs:border-b-[1px] 2xs:border-[#DDDDDD] dark:2xs:border-dark_accent1">

                    <a href="https://shagunrealty.com/" target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/shagun-logo.png" alt="" loading="lazy"></a>
                  </div>
                  <div
                    class="w-full client__logo--padding--inner 2xs:border-b-[1px] 2xs:border-[#DDDDDD] dark:2xs:border-dark_accent1">

                    <a href="https://mishtiaffair.com/" target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/misti affair blue.png" alt="" loading="lazy"></a>
                  </div>
                </div>

                <div
                  class="max-w-[25%] 2xs:max-w-[50%] w-full ltr:border-r-[1px] rtl:border-l 2xs:border-none border-[#DDDDDD] dark:border-dark_accent1 client__logo--padding">
                  <div
                    class="w-full client__logo--padding--inner 2xs:border-b-[1px] 2xs:border-[#DDDDDD] dark:2xs:border-dark_accent1">

                    <a href="https://bombayburgerseattle.com/" target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/bombay burgers blue.png" alt="" loading="lazy"></a>
                  </div>
                  <div
                    class="w-full client__logo--padding--inner 2xs:border-b-[1px] 2xs:border-[#DDDDDD] dark:2xs:border-dark_accent1">

                    <a href="https://www.cottonking.com/" target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/cotton king blue.png" alt="" loading="lazy"></a>
                  </div>
                </div>

                <div
                  class="max-w-[25%] 2xs:max-w-[50%] w-full ltr:border-r-[1px] rtl:border-l border-[#DDDDDD] client__logo--padding dark:border-dark_accent1">
                  <div
                    class="w-full client__logo--padding--inner 2xs:border-b-[1px] 2xs:border-[#DDDDDD] dark:2xs:border-dark_accent1">

                    <a href="https://seafarers.edu.in/" target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/BOE blue_.png" alt="" loading="lazy"></a>
                  </div>
                  <div class="w-full client__logo--padding--inner">

                    <a href="https://www.indiapost.gov.in/" target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/india post blue.png" alt="" loading="lazy"></a>
                  </div>
                </div>

                <div class="max-w-[25%] 2xs:max-w-[50%] w-full client__logo--padding">
                  <div
                    class="w-full client__logo--padding--inner 2xs:border-b-[1px] 2xs:border-[#DDDDDD] dark:2xs:border-dark_accent1">

                    <a href="https://kenzofitness.com/" target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/kenzo fitness blue.png" alt="" loading="lazy"></a>
                  </div>
                  <div class="w-full client__logo--padding--inner">

                    <a href="https://www.facebook.com/people/Fun-O-Villa-Seawoods/100087389810276/?paipv=0&eav=AfY9la7axwd3eaz6haIgD4HGsWHJYy4T9tecRFbDooBI1OzppAYSiCMT3SiT13lN2Xc&_rdr"
                      target="_blank">
                      <img class="mx-auto grayscale hover:grayscale-0 transition duration-300 dark:block hidden"
                        src="./assets/images/logo/fun o villa bluey.png" alt="" loading="lazy"></a>
                  </div>
                </div>


              </div>
            </div>
          </div>
        </section>
        <!-- Logo list section end -->

        <!-- ################################################################################### -->


        <br><br><br><br>
        <!-- BLOG section start -->
        <section class="pb-[70px] lg:pb-[100px]" id="blog">
          <div class="container mx-auto">
            <!-- Title start -->
            <div
              class="flex justify-between items-center gap-[20px] lg:gap-[30px] mb-[55px] md:flex-wrap md:text-center">
              <div class="max-w-full lg:max-w-[580px]  w-full">
                <span class="text-accent1 text-[20px] lg:text-[24px] font-medium mb-[10px] lg:mb-[5px]">TECH
                  INSIGHTS</span>
                <h2
                  class="text:[28px] lg:text-[48px] font-bold font-heebo leading-[36x] lg:leading-[58px] text-[#000248] dark:text-white">
                  Latest Blogs</h2>
              </div>
              <div class="md:grow">
                <p class="text-[#636363] dark:text-slate-200 text-[17px] leading-[28px] lg:max-w-[472px] w-full">
                  Discover the latest in tech and innovation through our captivating blog, exploring topics ranging from
                  cutting-edge PCs to emerging technologies.</p>
              </div>
            </div>
            <!-- Title end -->

            <div class="grid grid-cols-1 only-md:grid-cols-2 lg:grid-cols-3 gap-[30px]">


              <!-- Computer Upgrade blog  start -->
              <div
                class="blog__card shadow-[0_0_50px_0_rgba(196,206,213,0.2)] hover:shadow-[0_0_100px_0_rgba(196,206,213,0.7)] dark:shadow-[0_0_20px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_50px_0_rgba(0,0,0,0.2)] transition duration-500">
                <a class="block popup-modal--open" href="#">
                  <!-- blog image -->
                  <div class="overflow-hidden">
                    <span class="block">
                      <img class="blog__thumb w-full transition duration-300" src="assets/images/blog/pc-upgrade.png"
                        alt="">
                    </span>
                  </div>
                  <!-- blog image end -->

                  <!-- blog content -->
                  <div class="p-[30px]">
                    <div class="mb-[15px]">
                      <span
                        class="bg-accent1_rgb text-[14px] uppercase py-1 px-[6px] text-accent1 dark:text-white dark:bg-accent1 hover:bg-accent1 hover:text-white transition-all duration-300">Desktop
                        Tips</span>
                    </div>
                    <div>
                      <h3 class="text-[25px] leading-7 font-heebo font-bold">
                        <span
                          class="text-primary hover:text-accent1 dark:text-white dark:hover:text-accent1 transition-all duration-300">Maximizing
                          Your Computer’s Performance: The Benefits of Regular Upgrades</span>
                      </h3>
                      <p class="mt-[15px] text-paragraph dark:text-slate-200 text-[17px]">Computers are essential tools
                        in our daily lives, and it’s important to keep them running smoothly and efficiently. </p>
                    </div>
                  </div>
                  <!-- blog content end -->
                </a>

                <!-- Blog popup start -->
                <div class="modal_portfolio fixed h-screen w-full left-0 top-0 z-[98] opacity-0 invisible">
                  <div class="modal_popup_overlay fixed w-full h-full bg-[#000] left-0 top-0 opacity-[0.3]"></div>
                  <!-- Modal content -->
                  <div
                    class="modal__portfolio--content relative z-10 h-full flex items-center px-[15px] max-w-[750px] xl:max-w-[800px] mx-auto transition duration-300 translate-y-[-50px]">

                    <div
                      class="overflow-y-auto modal__portfolio--content-inner bg-white dark:bg-gray-800  max-h-[60vh] lg:max-h-[80vh] p-8 rounded-2xl relative">
                      <!-- Modal close button -->
                      <button
                        class="modal__popup--close ltr:right-[5px] rtl:left-[5px] top-[5px] absolute w-[50px] h-[50px] bg-accent1 text-white rounded-full flex items-center justify-center transition-all duration-300 hover:bg-primary dark:hover:bg-dark_accent1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-x">
                          <line x1="18" y1="6" x2="6" y2="18"></line>
                          <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                      </button>
                      <!-- Modal close button -->
                      <!-- Modal main content -->
                      <div>
                        <div class="pt-3">
                          <img class="max-w-full h-auto rounded-xl mt-6 mx-auto w-full"
                            src="https://img.youtube.com/vi/FlOLCLgL1EI/maxresdefault.jpg" alt="Blog details">
                        </div>
                        <h4 class="text-[25px] lg:text-[32px] leading-7 font-heebo font-bold mt-8">
                          <span class="text-primary dark:text-white">Maximizing Your Computer’s Performance: The
                            Benefits of Regular Upgrades</span>
                        </h4>
                        <div class="blog__content mt-5 text-[17px] leading-7 dark:text-slate-300">
                          <p>
                            Computers are essential tools in our daily lives, and it’s important to keep them running
                            smoothly and efficiently. Upgrading your computer regularly is one of the best ways to
                            achieve this. In this blog, we will discuss the benefits of regular computer upgrades and
                            why they are essential for maximizing your computer’s performance.

                            <br><br>
                            <!-- <img src="assets/images/blog/pc-upgrade-2.png" width="50%" class="blog-mid"> -->

                            <b>Increased Speed and Efficiency:</b> Upgrading your computer’s hardware components, such
                            as its RAM or hard drive, can significantly increase its speed and efficiency. This means
                            that you can run more programs and applications simultaneously without slowing down your
                            computer.</li>

                            <br><br>
                            <b>Better Performance for Resource-Intensive Applications:</b> If you use resource-intensive
                            applications such as video editing software or games, upgrading your computer’s graphics
                            card or processor can significantly improve its performance.

                            <br><br>
                            <b>Improved Security:</b> Upgrading your computer’s operating system, antivirus software,
                            and other security measures can help protect it against viruses, malware, and other online
                            threats. Regular upgrades will ensure that your computer stays protected against the latest
                            security threats.

                            <br><br>
                            <b>Longer Life Span:</b> Regular upgrades can help extend the lifespan of your computer. By
                            upgrading the hardware components that tend to wear out over time, you can keep your
                            computer running smoothly for longer.

                            <br><br>
                            Regular computer upgrades can have a significant impact on your computer’s performance,
                            security, and lifespan. By investing in upgrades, you can ensure that your computer stays
                            up-to-date and runs at its best for years to come. So, don’t hesitate to upgrade your
                            computer regularly to maximize its performance.
                          </p>

                        </div>

                        <blockquote
                          class="p-4 my-4 bg-gray-50 ltr:border-l-4 rtl:border-r-4 border-gray-300 dark:border-dark_accent1 dark:bg-dark_accent1 dark:text-white text-xl">
                          <p>Tags: <br> Computer Performance, Regular Upgrades, Increased Speed, Efficiency,
                            Resource-Intensive Applications, Improved Security, Longer Life Span, Hardware Upgrades,
                            Computer Maintenance.</p>
                        </blockquote>

                        <form action="#" class="mt-10">
                          <h4 class="text-primary mb-5 dark:text-white">Leave a Reply</h4>
                          <div class="grid grid-cols-2 gap-7">
                            <div>
                              <input
                                class="w-full bg-white rounded px-5 py-2 h-11 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                type="text" name="name" placeholder="Your name">
                            </div>
                            <div>
                              <input
                                class="w-full bg-white rounded px-5 py-2 h-11 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                type="email" name="email" placeholder="Your email">
                            </div>
                            <div class="col-span-2">
                              <textarea
                                class="w-full bg-white rounded px-5 py-2 h-40 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                name="message" id="" cols="30" rows="10" placeholder="Message"></textarea>
                            </div>
                          </div>
                          <button class="btn--small solid-btn mt-7">Post Comment</button>
                        </form>
                      </div>
                      <!-- Modal main content end -->
                    </div>
                  </div>
                </div>
                <!-- Blog popup end -->

              </div>
              <!-- Computer Upgrade blog end -->

              <!-- Laptop tips blog  start -->
              <div
                class="blog__card shadow-[0_0_50px_0_rgba(196,206,213,0.2)] hover:shadow-[0_0_100px_0_rgba(196,206,213,0.7)] dark:shadow-[0_0_20px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_50px_0_rgba(0,0,0,0.2)] transition duration-500">
                <a class="block popup-modal--open" href="#">
                  <!-- blog image -->
                  <div class="overflow-hidden">
                    <span class="block">
                      <img class="blog__thumb w-full transition duration-300"
                        src="https://variety.com/wp-content/uploads/2022/07/GettyImages-906347962.jpg?w=1024" alt="">
                    </span>
                  </div>
                  <!-- blog image end -->

                  <!-- blog content -->
                  <div class="p-[30px]">
                    <div class="mb-[15px]">
                      <span
                        class="bg-accent1_rgb text-[14px] uppercase py-1 px-[6px] text-accent1 dark:text-white dark:bg-accent1 hover:bg-accent1 hover:text-white transition-all duration-300">Laptop
                        Tips</span>
                    </div>
                    <div>
                      <h3 class="text-[25px] leading-7 font-heebo font-bold">
                        <span
                          class="text-primary hover:text-accent1 dark:text-white dark:hover:text-accent1 transition-all duration-300"
                          href="#">10 Essential Laptop Tips for Optimal Performance and Longevity</span>
                      </h3>
                      <p class="mt-[15px] text-paragraph dark:text-slate-200 text-[17px]">In today's digital age,
                        laptops have become indispensable tools for both work and leisure. To ensure your laptop
                        continues to perform at its best...</p>
                    </div>
                  </div>
                  <!-- blog content end -->

                </a>

                <!-- Blog popup start -->
                <div class="modal_portfolio fixed h-screen w-full left-0 top-0 z-[98] opacity-0 invisible">
                  <div class="modal_popup_overlay fixed w-full h-full bg-[#000] left-0 top-0 opacity-[0.3]"></div>
                  <!-- Modal content -->
                  <div
                    class="modal__portfolio--content relative z-10 h-full flex items-center px-[15px] max-w-[750px] xl:max-w-[800px] mx-auto transition duration-300 translate-y-[-50px]">

                    <div
                      class="overflow-y-auto modal__portfolio--content-inner bg-white dark:bg-gray-800  max-h-[60vh] lg:max-h-[80vh] p-8 rounded-2xl relative">
                      <!-- Modal close button -->
                      <button
                        class="modal__popup--close ltr:right-[5px] rtl:left-[5px] top-[5px] absolute w-[50px] h-[50px] bg-accent1 text-white rounded-full flex items-center justify-center transition-all duration-300 hover:bg-primary dark:hover:bg-dark_accent1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-x">
                          <line x1="18" y1="6" x2="6" y2="18"></line>
                          <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                      </button>
                      <!-- Modal close button -->
                      <!-- Modal main content -->
                      <div>
                        <div class="pt-3">
                          <img class="max-w-full h-auto rounded-xl mt-6 mx-auto w-full"
                            src="https://variety.com/wp-content/uploads/2022/07/GettyImages-906347962.jpg?w=1024"
                            alt="Blog details">
                        </div>
                        <h4 class="text-[25px] lg:text-[32px] leading-7 font-heebo font-bold mt-8">
                          <span class="text-primary dark:text-white">10 Essential Laptop Tips for Optimal Performance
                            and Longevity</span>
                        </h4>
                        <div class="blog__content mt-5 text-[17px] leading-7 dark:text-slate-300">
                          <p>
                            In today's digital age, laptops have become indispensable tools for both work and leisure.
                            To ensure your laptop continues to perform at its best and stands the test of time, we've
                            compiled a list of essential tips to optimize its performance, enhance security, and extend
                            its lifespan. Whether you're a student, professional, or casual user, these tips will help
                            you make the most out of your laptop experience.

                            <br><br>
                            1. Keep Your Laptop Clean:
                            Regularly clean the keyboard, screen, and exterior of your laptop to prevent dust
                            accumulation, which can affect performance and overheat the device. Use a soft, lint-free
                            cloth and specialized cleaning solutions suitable for electronics.

                            <br><br>
                            2. Protect Your Laptop with a Reliable Antivirus:
                            Install a reputable antivirus software and keep it up to date to protect your laptop from
                            viruses, malware, and online threats. Regularly scan your system to detect and remove any
                            potential security risks.

                            <br><br>
                            3. Optimize Startup Programs:
                            Disable unnecessary programs from launching at startup to improve boot time and overall
                            system performance. You can manage startup programs through the Task Manager or System
                            Configuration tool.

                            <br><br>
                            4. Regularly Update Software and Drivers:
                            Keep your operating system, applications, and device drivers up to date. Updates often
                            include bug fixes, security patches, and performance improvements, ensuring your laptop runs
                            smoothly and securely.

                            <br><br>
                            5. Practice Safe Browsing Habits:
                            Avoid visiting suspicious websites and be cautious while downloading files or clicking on
                            links. Use a secure browser and enable built-in privacy and security features, such as
                            pop-up blockers and anti-phishing settings.

                            <br><br>
                            6. Manage Your Storage Space:
                            Regularly declutter your laptop by deleting unnecessary files, uninstalling unused
                            applications, and transferring large files to external storage or cloud services. This frees
                            up space, improves performance, and organizes your data.

                            <br><br>
                            7. Adjust Power Settings:
                            Optimize your laptop's power settings to balance performance and battery life. Customize
                            settings such as screen brightness, sleep mode, and power plans based on your usage patterns
                            and preferences.

                            <br><br>
                            8. Use Surge Protectors and Proper Charging Practices:
                            Protect your laptop from power surges by using surge protectors. Additionally, follow
                            recommended charging practices, such as avoiding overcharging and using the manufacturer's
                            original charger to prevent potential battery issues.

                            <br><br>
                            9. Maintain Proper Ventilation:
                            Ensure your laptop has proper airflow and ventilation to prevent overheating. Use it on a
                            hard, flat surface to allow air to circulate freely and consider using a laptop cooling pad
                            for intensive tasks or prolonged usage.

                            <br><br>
                            10. Back Up Your Data:
                            Regularly back up your important files and documents to external drives, cloud storage, or
                            backup services. This protects your data in case of hardware failure, loss, or accidental
                            deletion.

                            <br><br>
                            By implementing these essential laptop tips, you can optimize performance, enhance security,
                            and prolong the lifespan of your device. Remember to practice regular maintenance, keep your
                            software up to date, and follow safe computing habits to ensure a smooth and enjoyable
                            laptop experience.
                          </p>

                          <blockquote
                            class="p-4 my-4 bg-gray-50 ltr:border-l-4 rtl:border-r-4 border-gray-300 dark:border-dark_accent1 dark:bg-dark_accent1 dark:text-white text-xl">
                            <p>Tags: <br> laptop tips, optimal laptop performance, laptop longevity, laptop maintenance,
                              laptop optimization, laptop security, laptop cleaning, antivirus software, startup program
                              optimization, power settings adjustment, surge protectors for laptops, laptop care tips,
                              laptop performance enhancement</p>
                          </blockquote>
                        </div>

                        <form action="#" class="mt-10">
                          <h4 class="text-primary mb-5 dark:text-white">Leave a Reply</h4>
                          <div class="grid grid-cols-2 gap-7">
                            <div>
                              <input
                                class="w-full bg-white rounded px-5 py-2 h-11 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                type="text" name="name" placeholder="Your name">
                            </div>
                            <div>
                              <input
                                class="w-full bg-white rounded px-5 py-2 h-11 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                type="email" name="email" placeholder="Your email">
                            </div>
                            <div class="col-span-2">
                              <textarea
                                class="w-full bg-white rounded px-5 py-2 h-40 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                name="message" id="" cols="30" rows="10" placeholder="Message"></textarea>
                            </div>
                          </div>
                          <button class="btn--small solid-btn mt-7">Post Comment</button>
                        </form>
                      </div>
                      <!-- Modal main content end -->
                    </div>
                  </div>
                </div>
                <!-- Blog popup end -->

              </div>
              <!-- Laptop tips blog end -->

              <!-- Mining rig blog  start -->
              <div
                class="blog__card shadow-[0_0_50px_0_rgba(196,206,213,0.2)] hover:shadow-[0_0_100px_0_rgba(196,206,213,0.7)] dark:shadow-[0_0_20px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_50px_0_rgba(0,0,0,0.2)] transition duration-500">
                <a class="block popup-modal--open" href="#">
                  <!-- blog image -->
                  <div class="overflow-hidden">
                    <span class="block">
                      <img class="blog__thumb w-full transition duration-300"
                        src="https://finbold.com/app/uploads/2022/12/how-to-assemble-gpu-mining-rig.jpg" alt="">
                    </span>
                  </div>
                  <!-- blog image end -->

                  <!-- blog content -->
                  <div class="p-[30px]">
                    <div class="mb-[15px]">
                      <span
                        class="bg-accent1_rgb text-[14px] uppercase py-1 px-[6px] text-accent1 dark:text-white dark:bg-accent1 hover:bg-accent1 hover:text-white transition-all duration-300">Mining
                        Rig</span>
                    </div>
                    <div>
                      <h3 class="text-[25px] leading-7 font-heebo font-bold">
                        <span
                          class="text-primary hover:text-accent1 dark:text-white dark:hover:text-accent1 transition-all duration-300">What
                          is a Mining Rig? Exploring the Key Components and Functionality</span>
                      </h3>
                      <p class="mt-[15px] text-paragraph dark:text-slate-200 text-[17px]">In the world of
                        cryptocurrency, mining rigs play a pivotal role in the process of validating transactions and
                        securing decentralized networks. </p>
                    </div>
                  </div>
                  <!-- blog content end -->
                </a>

                <!-- Blog popup start -->
                <div class="modal_portfolio fixed h-screen w-full left-0 top-0 z-[98] opacity-0 invisible">
                  <div class="modal_popup_overlay fixed w-full h-full bg-[#000] left-0 top-0 opacity-[0.3]"></div>
                  <!-- Modal content -->
                  <div
                    class="modal__portfolio--content relative z-10 h-full flex items-center px-[15px] max-w-[750px] xl:max-w-[800px] mx-auto transition duration-300 translate-y-[-50px]">

                    <div
                      class="overflow-y-auto modal__portfolio--content-inner bg-white dark:bg-gray-800  max-h-[60vh] lg:max-h-[80vh] p-8 rounded-2xl relative">
                      <!-- Modal close button -->
                      <button
                        class="modal__popup--close ltr:right-[5px] rtl:left-[5px] top-[5px] absolute w-[50px] h-[50px] bg-accent1 text-white rounded-full flex items-center justify-center transition-all duration-300 hover:bg-primary dark:hover:bg-dark_accent1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-x">
                          <line x1="18" y1="6" x2="6" y2="18"></line>
                          <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                      </button>
                      <!-- Modal close button -->
                      <!-- Modal main content -->
                      <div>
                        <div class="pt-3">
                          <img class="max-w-full h-auto rounded-xl mt-6 mx-auto w-full"
                            src="https://finbold.com/app/uploads/2022/12/how-to-assemble-gpu-mining-rig.jpg"
                            alt="Blog details">
                        </div>
                        <h4 class="text-[25px] lg:text-[32px] leading-7 font-heebo font-bold mt-8">
                          <span class="text-primary dark:text-white">What is a Mining Rig? Exploring the Key Components
                            and Functionality</span>
                        </h4>
                        <div class="blog__content mt-5 text-[17px] leading-7 dark:text-slate-300">
                          <p>
                            In the world of cryptocurrency, mining rigs play a pivotal role in the process of validating
                            transactions and securing decentralized networks. In this blog post, we will delve into what
                            mining rigs are, how they work, and why they are essential for successful cryptocurrency
                            mining. At itEthik, we specialize in building and providing efficient and high-performing
                            mining rigs at competitive prices, empowering miners to achieve optimal results.

                            <br><br>
                            <b>Understanding Mining Rigs:</b>
                            Mining rigs are specialized computer systems designed specifically for cryptocurrency
                            mining. These rigs consist of carefully selected hardware components working in harmony to
                            perform complex calculations, known as hashing, required for mining new blocks and verifying
                            transactions on blockchain networks.

                            <br><br>
                            <b>Components of a Mining Rig:</b>
                            A typical mining rig comprises several key components, including high-performance graphics
                            cards (GPUs) or application-specific integrated circuits (ASICs), a powerful central
                            processing unit (CPU), sufficient random-access memory (RAM), storage devices, a
                            motherboard, and a reliable power supply unit (PSU). These components work together to
                            provide the computational power necessary for efficient mining operations.

                            <br><br>
                            <b>itEthik: Building Efficient Mining Rigs at Competitive Prices:</b>
                            At itEthik, we are passionate about empowering miners with top-quality mining rigs that
                            deliver exceptional performance and reliability. Our team of experts has extensive knowledge
                            and experience in selecting the most suitable components to ensure optimal mining
                            efficiency.

                            <br><br>
                            We take pride in offering mining rigs that strike the perfect balance between performance
                            and affordability. Our commitment to delivering efficient and cost-effective solutions
                            enables miners of all levels to enter and thrive in the world of cryptocurrency mining.

                            <br><br>
                            <b>Why Choose itEthik Mining Rigs:</b>

                            <br>
                            <b>Efficiency:</b> Our mining rigs are meticulously designed to optimize power consumption
                            while delivering high hash rates, maximizing your mining potential.

                            <br><br>
                            <b>Quality Components:</b> We carefully select hardware components from trusted
                            manufacturers to ensure durability and long-term performance.

                            <br><br>
                            <b>Competitive Pricing</b>: We believe in providing the best value to our clients, offering
                            competitive prices without compromising on quality.

                            <br><br>
                            <b>Expert Guidance:</b> Our team of professionals is dedicated to providing personalized
                            support, helping you choose the right mining rig configuration and offering ongoing
                            assistance to enhance your mining experience.

                            <br><br>
                            Mining rigs are the backbone of cryptocurrency mining, driving the process of validating
                            transactions and securing blockchain networks. With itEthik, you gain a reliable partner in
                            building and providing efficient mining rigs tailored to your needs. Our commitment to
                            delivering high-performance rigs at competitive prices, coupled with our expertise and
                            personalized support, sets us apart in the industry.

                            <br><br>
                            Unlock the full potential of cryptocurrency mining with itEthik. Invest in our efficient
                            mining rigs and embark on a profitable mining journey, backed by quality, affordability, and
                            unwavering support.
                          </p>

                          <blockquote
                            class="p-4 my-4 bg-gray-50 ltr:border-l-4 rtl:border-r-4 border-gray-300 dark:border-dark_accent1 dark:bg-dark_accent1 dark:text-white text-xl">
                            <p>Tags: <br> mining rigs, cryptocurrency mining, mining hardware, GPU mining, ASIC mining,
                              mining components, mining efficiency, mining profitability</p>
                          </blockquote>
                        </div>

                        <form action="#" class="mt-10">
                          <h4 class="text-primary mb-5 dark:text-white">Leave a Reply</h4>
                          <div class="grid grid-cols-2 gap-7">
                            <div>
                              <input
                                class="w-full bg-white rounded px-5 py-2 h-11 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                type="text" name="name" placeholder="Your name">
                            </div>
                            <div>
                              <input
                                class="w-full bg-white rounded px-5 py-2 h-11 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                type="email" name="email" placeholder="Your email">
                            </div>
                            <div class="col-span-2">
                              <textarea
                                class="w-full bg-white rounded px-5 py-2 h-40 border border-gray-300 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                                name="message" id="" cols="30" rows="10" placeholder="Message"></textarea>
                            </div>
                          </div>
                          <button class="btn--small solid-btn mt-7">Post Comment</button>
                        </form>
                      </div>
                      <!-- Modal main content end -->
                    </div>
                  </div>
                </div>
                <!-- Blog popup end -->

              </div>
              <!-- Mining rig blog end -->

            </div>
            <button class="btn solid-btn mt-12" style="display: block; margin: 20px auto;">Read More</button>
          </div>
        </section>
        <!-- BLOG section end -->


        <!-- ################################################################################### -->


        <!-- Contact form section start -->
        <section
          class="py-[70px] lg:py-[100px] mb-[270px] bg-cover bg-no-repeat bg-center bg-[url('../images/contact-bg.png')] bg-[#ECF1F6] dark:bg-[url('../images/contact-bg-dark.png')] dark:bg-dark_primary_bg"
          id="contact">
          <div class="container mx-auto">
            <!-- Form wrapper start -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-[30px]">
              <div>
                <!-- Section title -->
                <div class="mb-[55px] md:text-center">
                  <span class="text-accent1 text-[20px] lg:text-[24px] font-medium mb-[10px] lg:mb-[5px]">Send A
                    Message</span>
                  <h2
                    class="text:[28px] lg:text-[48px] font-bold font-heebo leading-[36x] lg:leading-[58px] text-[#000248] dark:text-white">
                    CONTACT US
                  </h2>
                  <p class="text-[#636363] dark:text-slate-200 text-[17px] leading-[28px] lg:max-w-[472px] w-full">
                    ItEthik's main motive is to offer services at a personalized level and fulfill each & every client
                    requirement.
                    <br>
                    We believe in providing quality, affordable & easy services to our valuable customers at a
                    reasonable price.
                  </p>
                </div>
                <!-- Section title end -->

                <!-- from inner start-->
                <form action="#">
                  <div class="grid grid-cols-2 gap-7">
                    <div>
                      <input
                        class="w-full bg-white rounded px-5 py-2 h-11 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                        type="text" name="name" placeholder="Your name">
                    </div>
                    <div>
                      <input
                        class="w-full bg-white rounded px-5 py-2 h-11 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                        type="email" name="email" placeholder="Your email">
                    </div>
                    <div class="col-span-2">
                      <textarea
                        class="w-full bg-white rounded px-5 py-2 h-40 dark:bg-transparent dark:text-slate-300 dark:border dark:border-slate-600"
                        name="message" id="" cols="30" rows="10" placeholder="Message"></textarea>
                    </div>
                  </div>
                  <button class="btn solid-btn mt-12">Send Request</button>
                </form>
                <!-- from inner end -->
              </div>

              <div
                class="ltr:only-md:pl-[30px] ltr:lg:pl-[50px] rtl:only-md:pr-[30px] rtl:lg:pr-[50px] mt-[30px] lg:mt-[150px] md:flex md:gap-[30px] md:flex-wrap">
                <!-- Single contact info start -->
                <div class="flex items-center">
                  <div>
                    <span
                      class="w-[50px] h-[50px] lg:w-[70px] lg:h-[70px] bg-accent1 text-white flex items-center rounded-full justify-center">
                      <svg width="25" height="34" fill="currentColor" stroke="currentColor"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path
                          d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
                      </svg>
                    </span>
                  </div>
                  <div class="ltr:pl-6 rtl:pr-6">
                    <h3 class="text-[28px] md:text-[22px] font-heebo font-bold text-primary dark:text-white">Call Us
                    </h3>
                    <span class="text-primary dark:text-slate-200 text-[22px] md:text-[18px] mt-5">+91 89 76 76 5350
                      <br> +91 89 76 76 5351</span>
                  </div>
                </div>
                <!-- Single contact info end -->

                <!-- Single contact info start -->
                <div class="flex items-center lg:mt-7">
                  <div>
                    <span
                      class="w-[50px] h-[50px] lg:w-[70px] lg:h-[70px] bg-accent1 text-white flex items-center rounded-full justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-mail">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                      </svg>
                    </span>
                  </div>
                  <div class="ltr:pl-6 rtl:pr-6">
                    <h3 class="text-[28px] md:text-[22px] font-heebo font-bold text-primary dark:text-white">Email Us
                    </h3>
                    <span
                      class="text-primary  dark:text-slate-200 text-[22px] md:text-[18px] mt-5">info@itethik.com</span>
                  </div>
                </div>
                <!-- Single contact info end -->

                <!-- Single contact info start -->
                <div class="flex items-center lg:mt-7">
                  <div>
                    <span
                      class="w-[50px] h-[50px] lg:w-[70px] lg:h-[70px] bg-accent1 text-white flex items-center rounded-full justify-center">
                      <svg width="32" height="34" fill="currentColor" stroke="currentColor"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                        <path
                          d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 256c-35.3 0-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64s-28.7 64-64 64z" />
                      </svg>
                    </span>
                  </div>
                  <div class="ltr:pl-6 rtl:pr-6">
                    <h3 class="text-[28px] md:text-[22px] font-heebo font-bold text-primary dark:text-white">Address
                    </h3>
                    <span class="text-primary  dark:text-slate-200 text-[22px] md:text-[18px] mt-5">Shop No: 03, Plot
                      No: 08, Sector 20, Uwe, Navi Mumbai, Maharashtra, India - 410206
                    </span>
                  </div>
                </div>
                <!-- Single contact info end -->

              </div>
            </div>
            <!-- Form wrapper end -->

            <!-- Google map start  -->
            <div class="mb-[-275px] pt-[70px] lg:pt-[100px] rounded-md">
              <div style="width: 100%">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15091.699338662589!2d73.0279465!3d18.9789267!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c36a769d9229%3A0x99ff3a02205e7e7f!2sItEthik!5e0!3m2!1sen!2sin!4v1684923351202!5m2!1sen!2sin"
                  width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                  style="border:0;" allowfullscreen="" loading="lazy"
                  referrerpolicy="no-referrer-when-downgrade"></iframe>
              </div>
            </div>

            <!-- Google map send -->

          </div>
        </section>
        <!-- Contact form section end -->

  </main>
  <!-- Main wrapper end -->


  <!-- ################################################################################### -->

  </main>
  <!-- Main wrapper end -->


  <!-- Footer start -->

  <footer
    class="py-[50px] bg-cover bg-no-repeat bg-center bg-[url('https://ik.imagekit.io/hk376cwka/images/footer-bg.png?updatedAt=1685287405195')] bg-[#EFF3F7] dark:bg-[url('https://ik.imagekit.io/hk376cwka/images/footer-bg-dark.png?updatedAt=1685287405211')] dark:bg-dark_primary_bg dark:border-t dark:border-dark_accent1">
    <div class="container mx-auto">
      <div class="grid grid-cols-1 only-md:grid-cols-2 lg:grid-cols-2">
        <div class="flex">
          <p class="flex items-center flex-wrap sm:justify-center dark:text-slate-200">Developed <span
              class="px-[3px] text-paragraph dark:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
                stroke="text-paragraph" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-heart">
                <path
                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                </path>
              </svg>
            </span> by <span class=" px-[3px]"><a class="text-accent1 hover:font-bold" href="#">Itethik</a></span>© 2023
          </p>
        </div>
        <div class="flex items-center justify-end gap-8 sm:justify-center sm:mt-[15px]">
          <a href="#"
            class="text-paragraph dark:text-slate-200 hover:text-accent1 font-medium text-[20px] sm:text-[16px]">Terms &
            Condition</a>
          <a href="#"
            class="text-paragraph dark:text-slate-200 hover:text-accent1 font-medium text-[20px] sm:text-[16px]">
            Privacy Policy</a>
          <a href="#"
            class="text-paragraph dark:text-slate-200 hover:text-accent1 font-medium text-[20px] sm:text-[16px]">
            Credits </a>
        </div>
      </div>
    </div>
    <!-- whatapp  -->
    <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
    <div class="elfsight-app-0809a40f-3062-420d-9569-857c5a5efca2"></div>
    <!-- whatapp end -->

    <!-- Back to top start -->
    <button id="scroll__top"
      class="fixed bottom-12 ltr:right-5 rtl:left-5 z-50 bg-accent1 text-white shadow-[0_2px_22px_rgba(0,0,0,0.16)] cursor-pointer translate-y-12 opacity-0 invisible transition-all duration-300 leading-[1] w-11 h-11 rounded-full border-none flex items-center justify-center hover:bg-primary dark:hover:bg-dark_accent1">
      <svg xmlns="http://www.w3.org/2000/svg" class="ionicon w-6 leading-[1]" viewBox="0 0 512 512">
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="48"
          d="M112 244l144-144 144 144M256 120v292" />
      </svg>
    </button>
    <!-- Back to top end -->

  </footer>
  <!-- Footer end -->

  <!--cookie notice-->
  <div id="cookie-notice"
    style="position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(33,36,40,255); color: #fff; padding: 20px; text-align: center; font-size: 14px; z-index: 9999;">
    This website uses cookies to ensure you get the best experience on our website. <a href="#"
      style="color: #fff;">Learn more</a>
    <button onclick="acceptCookies()"
      style="background-color: #fff; color: rgba(33,36,40,255); border: none; padding: 8px 16px; margin-left: 10px; cursor: pointer;">Accept</button>
  </div>
  <!--cookie notice end-->
  <!-------- Plugins js ------>

  <!-- Swiper js -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

  <!-- imagesloaded js -->
  <script src="./assets/js/imagesloaded.pkgd.min.js" defer></script>

  <!-- Isotope js -->
  <script src="./assets/js/isotope.pkgd.min.js" defer></script>

  <!-- Custom js -->
  <script src="./assets/js/script.js" defer></script>


</body>

</html>